feat: meta 支持配置数值和正则, 便于批量配置 close #2647 (#2799)

* feat: meta 支持配置数值和正则, 便于批量配置 close #2647 * chore: 还原配置 * chore: 还原
antvis · Jul 5, 2024 · 3d89940 · 3d89940
1 parent 637f651
commit 3d89940
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 10 deletions.
diff --git a/packages/s2-core/__tests__/unit/data-set/pivot-data-set-spec.ts b/packages/s2-core/__tests__/unit/data-set/pivot-data-set-spec.ts
@@ -464,8 +464,18 @@ describe('Pivot Dataset Test', () => {
             name: '成本',
             description: '成本描述',
           },
+          {
+            field: ['test-a', 'test-b'],
+            name: 'test',
+          },
+          {
+            field: /c+$/,
+            name: 'test-regexp',
+          },
         ],
         fields: {
+          rows: ['test-a', 'test-b'],
+          columns: ['test-c'],
           values: ['price', 'cost'],
           valueInCols: false,
         },
@@ -484,6 +494,9 @@ describe('Pivot Dataset Test', () => {
       expect(dataSet.getFieldName('price')).toStrictEqual('价格');
       expect(dataSet.getFieldName('cost')).toStrictEqual('成本');
       expect(dataSet.getFieldName('')).toEqual('');
+      expect(dataSet.getFieldName('test-a')).toStrictEqual('test');
+      expect(dataSet.getFieldName('test-b')).toStrictEqual('test');
+      expect(dataSet.getFieldName('test-c')).toStrictEqual('test-regexp');
       // 找不到名字返回字段本身
       expect(dataSet.getFieldName('not-found-field')).toEqual(
         'not-found-field',
@@ -594,6 +607,7 @@ describe('Pivot Dataset Test', () => {
       expect(newData.fields.columns).toEqual(['type', 'sub_type']);
       expect(newData.fields.values).toEqual(['number']);
     });
+
     test('should index of the cols of EXTRA_FIELD is 0 when customValueOrder is 0 and valueInCols is true', () => {
       const mockDataCfg: S2DataConfig = assembleDataCfg(dataCfg, {
         fields: {
@@ -607,6 +621,7 @@ describe('Pivot Dataset Test', () => {
       expect(newData.fields.columns).toEqual([EXTRA_FIELD, 'type', 'sub_type']);
       expect(newData.fields.values).toEqual(['number']);
     });
+
     test('should customValueOrder is too big, order feature does not work', () => {
       const mockDataCfg: S2DataConfig = assembleDataCfg(dataCfg, {
         fields: {
@@ -620,6 +635,7 @@ describe('Pivot Dataset Test', () => {
       expect(newData.fields.columns).toEqual(['type', 'sub_type', EXTRA_FIELD]);
       expect(newData.fields.values).toEqual(['number']);
     });
+
     test('should customValueOrder is not number, order feature does not work', () => {
       const mockDataCfg: S2DataConfig = assembleDataCfg(dataCfg, {
         fields: {

diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
@@ -71,9 +71,13 @@ export enum CellClipBox {
 
 export interface Meta {
   /**
-   * 字段 id
+   * 字段名
+   * @example
+      1. 'city'
+      2. ['city', 'type']
+      3. /^city/
    */
-  field?: string;
+  field?: string | string[] | RegExp;
 
   /**
    * 字段名称
@@ -89,6 +93,7 @@ export interface Meta {
    * 格式化
    * 数值字段：一般用于格式化数字单位
    * 文本字段：一般用于做字段枚举值的别名
+   * @see https://s2.antv.antgroup.com/manual/basic/formatter
    */
   formatter?: Formatter;
 }

diff --git a/packages/s2-core/src/common/interface/s2DataConfig.ts b/packages/s2-core/src/common/interface/s2DataConfig.ts
@@ -112,22 +112,31 @@ export interface CustomTreeNode {
 export interface S2DataConfig {
   /**
    * 原始明细数据
+   * @see https://assets.antv.antgroup.com/s2/basic.json
    */
   data: RawData[];
+
   /**
    * 维度字段
    */
   fields: Fields;
+
   /**
    * 字段元数据
+   * @see https://s2.antv.antgroup.com/manual/basic/formatter
    */
   meta?: Meta[];
+
   /**
    * 排序配置
+   * @see https://s2.antv.antgroup.com/manual/basic/sort/basic
    */
   sortParams?: SortParams;
+
   /**
    * 筛选配置
+   * @see https://s2.antv.antgroup.com/api/general/s2-data-config#filterparam
+   * @example https://s2.antv.antgroup.com/examples/case/data-preview/#index
    */
   filterParams?: FilterParam[];
   [key: string]: unknown;

diff --git a/packages/s2-core/src/data-set/base-data-set.ts b/packages/s2-core/src/data-set/base-data-set.ts
@@ -5,6 +5,7 @@ import {
   find,
   get,
   identity,
+  isArray,
   isEmpty,
   isNil,
   isString,
@@ -105,7 +106,17 @@ export abstract class BaseDataSet {
     (field: CustomHeaderField, meta?: Meta[]): Meta | undefined => {
       const realField = this.getField(field);
 
-      return find(this.meta || meta, { field: realField });
+      return find(this.meta || meta, ({ field: currentField }) => {
+        if (currentField instanceof RegExp) {
+          return currentField.test(realField);
+        }
+
+        if (isArray(currentField)) {
+          return currentField.includes(realField);
+        }
+
+        return currentField === realField;
+      });
     },
   );
 

diff --git a/s2-site/docs/api/general/S2DataConfig.zh.md b/s2-site/docs/api/general/S2DataConfig.zh.md
@@ -35,16 +35,16 @@ const s2DataConfig = {
 功能描述：表格数据源
 
 ```ts
-type RawData = Record<string, DataItem>;
-type DataItem =  SimpleData | MultiData;
+type RawData = Record<string, DataItem>
+type DataItem = SimpleData | MultiData
 ```
 
 #### SimpleData
 
 功能描述：基础数据类型
 
 ```ts
-type SimpleData = string | number;
+type SimpleData = string | number
 ```
 
 ```ts
@@ -112,7 +112,7 @@ const data = [
 
 | 参数        | 说明                                                                                                                                                                                                                                                                                             | 类型                                                                         | 默认值 | 必选 |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ------ | ---- |
-| field       | 字段 id                                                                                                                                                                                                                                                                                          | `string`                                                                     |        |      |
+| field       | 字段 id （即 [Fields](#fields) 中配置的字段）                                                                                                                                                                                                                                                                                         | `string \| string[] \| RegExp`                                                                     |        |      |
 | name        | 字段名称                                                                                                                                                                                                                                                                                         | `string`                                                                     |        |      |
 | description | 字段描述，会显示在行头、列头、单元格对应的 tooltip 中                                                                                                                                                                                                                                            | `string`                                                                     |        |      |
 | formatter   | 格式化 <br/> 单元格、行头和列头支持格式化，角头不支持格式化。只有单元格存在第二个参数。 <br/>数值字段：一般用于格式化数字单位<br/>文本字段：一般用于做字段枚举值的别名<br/> 第二个参数在以下情况会传入：data cell 格式化，复制/导出，tooltip 展示（**且仅在选择多个单元格时，data 类型为数组**） | `(value: unknown, data?: Data \| Data[], meta?: Node \| ViewMeta) => string` |        |      |

diff --git a/s2-site/docs/manual/basic/formatter.zh.md b/s2-site/docs/manual/basic/formatter.zh.md
@@ -82,7 +82,30 @@ tag: New
       },
     },
   ]
-};
+}
+```
+
+## 批量设置
+
+如果多个字段格式化一致，可以配置为数组以便于批量设置，或使用正则匹配。
+
+```ts
+ const s2DataConfig = {
+  meta: [
+    {
+      field: ['province', 'city'],
+      formatter: (value, record, meta) => {
+        return `${value}-test`
+      },
+    },
+    {
+      field: /type/,
+      formatter: (value, record, meta) => {
+        return `${value}-test`
+      },
+    }
+  ]
+}
 ```
 
 ## 复制导出时保留格式化信息

diff --git a/s2-site/examples/basic/pivot/demo/grid.ts b/s2-site/examples/basic/pivot/demo/grid.ts
@@ -9,6 +9,9 @@ fetch(
     const s2DataConfig = {
       ...dataCfg,
       meta: [
+        // 支持批量设置或正则匹配
+        // field: ['province', 'city'],
+        // field: /type/,
         {
           field: 'province',
           name: '省份',
@@ -49,8 +52,8 @@ fetch(
       // seriesNumber: {
       //   enable: true,
       //   自定义序号列文本, 默认 "序号"
-      //   text: '自定义序号标题', 
-      //},
+      //   text: '自定义序号标题',
+      // },
       frozen: {
         // 默认冻结行头, 行头和数值区域都会展示滚动条
         // rowHeader: false,