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 index e5212971ff..fa2e7c8116 100644 --- 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 index a92d3a52ab..14cc5b090c 100644 --- 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 index bcac112151..e3a3a63b76 100644 --- 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 index 5b1f5cb1cc..1d7a266fec 100644 --- 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 index c6bcdf65b6..b0886b1458 100644 --- a/s2-site/docs/api/general/S2DataConfig.zh.md +++ b/s2-site/docs/api/general/S2DataConfig.zh.md @@ -35,8 +35,8 @@ const s2DataConfig = { 功能描述:表格数据源 ```ts -type RawData = Record; -type DataItem = SimpleData | MultiData; +type RawData = Record +type DataItem = SimpleData | MultiData ``` #### SimpleData @@ -44,7 +44,7 @@ type DataItem = SimpleData | MultiData; 功能描述:基础数据类型 ```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 | 格式化
单元格、行头和列头支持格式化,角头不支持格式化。只有单元格存在第二个参数。
数值字段:一般用于格式化数字单位
文本字段:一般用于做字段枚举值的别名
第二个参数在以下情况会传入: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 index 5be94a73e9..167409cdfd 100644 --- 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 index b3b75e858f..78c599dcbf 100644 --- 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,