docs: 补充缺失的 fontStyle 和 fontVariant 文档 (#2407)

antvis · Nov 10, 2023 · eb8adbc · eb8adbc · vercel · Nov 10, 2023
1 parent 432c0c7
commit eb8adbc
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
@@ -97,7 +97,9 @@ export interface TextAlignCfg {
   textBaseline?: TextBaseline;
 }
 
-export interface TextTheme extends TextAlignCfg {
+export interface TextTheme
+  extends TextAlignCfg,
+    Pick<ShapeAttrs, 'fontStyle' | 'fontVariant'> {
   /* 字体 */
   fontFamily?: string;
   /* 字体大小 */

diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
@@ -149,6 +149,8 @@ s2.setTheme({
 | fontFamily   | 字体                                                                           | `string`                      | `Roboto, PingFangSC,` <br> `BlinkMacSystemFont,` <br> `Microsoft YaHei,` <br> `Arial, sans-serif` |      |
 | fontSize     | 字体大小                                                                       | `number`                      | -                                                                                                 |      |
 | fontWeight   | number <br> string: `normal` <br> `bold` <br> `bolder` <br> `lighter` 字体粗细 | `number` \| `string`          | 粗体文本：Mobile：`520` PC: `bold` <br> 普通文本：`normal`                                        |      |
+| fontStyle   | 字体样式    | `normal \| italic \| oblique`        |  `normal` |
+| fontVariant | 字体变体  | `normal \| small-caps \| string`    |  `normal`  |
 | fill         | 字体颜色                                                                       | `string`                      | -                                                                                                 |      |
 | linkTextFill | 链接文本颜色                                                                   | `string`                      | -                                                                                                 |      |
 | opacity      | 字体透明度                                                                     | `number`                      | 1                                                                                                 |      |

diff --git a/s2-site/docs/api/graphic.zh.md b/s2-site/docs/api/graphic.zh.md
@@ -47,6 +47,8 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图
 | fontSize      | `number`          | 文字大小                                                                                                     |
 | fontFamily    | `string`          | 文字字体                                                                                                     |
 | fontWeight    | `number`          | 字体粗细                                                                                                     |
+| fontStyle    | `normal \| italic \| oblique`           | 字体样式                                                                                                     |
+| fontVariant    | `normal \| small-caps \| string`           | 字体变体                                                                                                     |
 | lineHeight    | `number`          | 文字的行高                                                                                                   |
 | textAlign     | `center` \| `left` \| `right` \| `start` \| `end`          | 设置文本内容的对齐方式 |
 | textBaseline  | `top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`          | 设置在绘制文本时使用的当前文本基线|

diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts b/s2-site/examples/custom/custom-cell/demo/data-cell-placeholder.ts
@@ -0,0 +1,42 @@
+import { PivotSheet, CornerCell } from '@antv/s2';
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
+)
+  .then((res) => res.json())
+  .then((res) => {
+    const container = document.getElementById('container');
+    const s2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type', 'sub_type'],
+        values: ['number'],
+      },
+      meta: res.meta,
+      data: res.data.map((item, i) => {
+        return {
+          ...item,
+          number: i < 5 ? item.number : null,
+        };
+      }),
+    };
+    const s2Options = {
+      width: 600,
+      height: 480,
+      // 默认 "-"
+      // placeholder: '',
+      placeholder: (cell) => {
+        // 或者根据当前单元格动态设置
+        console.log('cell: ', cell);
+        if (cell.cellType === 'dataCell') {
+          return '*****';
+        }
+
+        // 返回 null, 使用默认值 ("-")
+        return null;
+      },
+    };
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    s2.render();
+  });
diff --git a/s2-site/examples/custom/custom-cell/demo/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json
@@ -83,6 +83,14 @@
         "en": "custom mini chart"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*apnIT4KXP3YAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "data-cell-placeholder.ts",
+      "title": {
+        "zh": "自定义空数据单元格占位符",
+        "en": "custom cell placeholder"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B-VMT7kCWL0AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }