From d218ac6f73b24226f32eb2212b40ddcb00b72329 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Mon, 1 Jul 2024 14:53:56 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20meta=20=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=95=B0=E5=80=BC=E5=92=8C=E6=AD=A3=E5=88=99,=20?= =?UTF-8?q?=E4=BE=BF=E4=BA=8E=E6=89=B9=E9=87=8F=E9=85=8D=E7=BD=AE=20close?= =?UTF-8?q?=20#2647?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit/data-set/pivot-data-set-spec.ts | 16 ++++++++++++ .../s2-core/src/common/interface/basic.ts | 9 +++++-- .../src/common/interface/s2DataConfig.ts | 9 +++++++ .../s2-core/src/data-set/base-data-set.ts | 13 +++++++++- .../s2-core/src/utils/condition/condition.ts | 15 ++--------- packages/s2-react/playground/config.tsx | 15 ++++++++++- s2-site/docs/api/general/S2DataConfig.zh.md | 8 +++--- s2-site/docs/manual/basic/formatter.zh.md | 25 ++++++++++++++++++- s2-site/examples/basic/pivot/demo/grid.ts | 7 ++++-- 9 files changed, 93 insertions(+), 24 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 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/packages/s2-core/src/utils/condition/condition.ts b/packages/s2-core/src/utils/condition/condition.ts index f1e54652ac..a43fb0ef21 100644 --- a/packages/s2-core/src/utils/condition/condition.ts +++ b/packages/s2-core/src/utils/condition/condition.ts @@ -1,5 +1,5 @@ -import { clamp, findLast } from 'lodash'; -import type { Condition, IconCondition } from '../../common/interface'; +import { clamp } from 'lodash'; +import type { IconCondition } from '../../common/interface'; import { parseNumberWithPrecision } from '../formatter'; export const getIconPosition = (condition: IconCondition) => @@ -55,14 +55,3 @@ export const getIntervalScale = (minValue = 0, maxValue = 0) => { return { zeroScale, scale }; }; }; - -export const findFieldCondition = ( - conditions: Condition[], - valueField: string, -) => { - return findLast(conditions, (item) => { - return item.field instanceof RegExp - ? item.field.test(valueField) - : item.field === valueField; - }); -}; diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx index 24ab755a64..953fb8705c 100644 --- a/packages/s2-react/playground/config.tsx +++ b/packages/s2-react/playground/config.tsx @@ -79,7 +79,20 @@ export const tableSheetDataCfg: S2DataConfig = { export const pivotSheetDataCfg: S2DataConfig = { data, totalData, - meta, + meta: [ + { + field: ['province', 'city'], + name: '测试-1', + }, + { + field: 'type', + name: '测试-2', + }, + { + field: /^sub/, + name: '测试3', + }, + ], fields, }; 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, From f5ba650b713b37a607a63c070396fad22a8d76b8 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Mon, 1 Jul 2024 15:05:40 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E8=BF=98=E5=8E=9F=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-react/playground/config.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx index 953fb8705c..24ab755a64 100644 --- a/packages/s2-react/playground/config.tsx +++ b/packages/s2-react/playground/config.tsx @@ -79,20 +79,7 @@ export const tableSheetDataCfg: S2DataConfig = { export const pivotSheetDataCfg: S2DataConfig = { data, totalData, - meta: [ - { - field: ['province', 'city'], - name: '测试-1', - }, - { - field: 'type', - name: '测试-2', - }, - { - field: /^sub/, - name: '测试3', - }, - ], + meta, fields, }; From ac457a37a7f6f9848d9b83cbcbe6a3ba2717fd48 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Mon, 1 Jul 2024 15:26:53 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E8=BF=98=E5=8E=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-core/src/utils/condition/condition.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/s2-core/src/utils/condition/condition.ts b/packages/s2-core/src/utils/condition/condition.ts index a43fb0ef21..f1e54652ac 100644 --- a/packages/s2-core/src/utils/condition/condition.ts +++ b/packages/s2-core/src/utils/condition/condition.ts @@ -1,5 +1,5 @@ -import { clamp } from 'lodash'; -import type { IconCondition } from '../../common/interface'; +import { clamp, findLast } from 'lodash'; +import type { Condition, IconCondition } from '../../common/interface'; import { parseNumberWithPrecision } from '../formatter'; export const getIconPosition = (condition: IconCondition) => @@ -55,3 +55,14 @@ export const getIntervalScale = (minValue = 0, maxValue = 0) => { return { zeroScale, scale }; }; }; + +export const findFieldCondition = ( + conditions: Condition[], + valueField: string, +) => { + return findLast(conditions, (item) => { + return item.field instanceof RegExp + ? item.field.test(valueField) + : item.field === valueField; + }); +};