diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts index e9bcddae8f..e4844494e7 100644 --- a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts +++ b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts @@ -55,7 +55,8 @@ jest.mock('@/sheet-type', () => { return { dataCfg: assembleDataCfg(), options: assembleOptions({ - dataCell: (viewMeta) => new DataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new DataCell(viewMeta, spreadsheet), }), container, theme: getTheme({}), diff --git a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx index c1c939ceea..a27945cd5e 100644 --- a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx +++ b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx @@ -575,8 +575,8 @@ describe(' Tests', () => { } const s2Options: SheetComponentOptions = { - dataCell: (viewMeta) => - new CustomDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new CustomDataCell(viewMeta, spreadsheet), }; renderStrategySheet(s2Options, StrategySheetDataConfig); diff --git a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx index 6b186f4099..2e6975d5d4 100644 --- a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx +++ b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx @@ -14,8 +14,8 @@ export const ChartSheet: React.FC = React.memo( const s2Options = React.useMemo(() => { const options: SheetComponentOptions = { - dataCell: (viewMeta) => - new ChartSheetDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new ChartSheetDataCell(viewMeta, spreadsheet), showDefaultHeaderActionIcon: false, interaction: { hoverFocus: false, diff --git a/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx b/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx index a7cc94f5f4..46d207632e 100644 --- a/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx +++ b/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx @@ -11,8 +11,8 @@ export const GridAnalysisSheet: React.FC = React.memo( const s2Options = React.useMemo(() => { const options: SheetComponentOptions = { - dataCell: (viewMeta) => - new GridAnalysisSheetDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new GridAnalysisSheetDataCell(viewMeta, spreadsheet), showDefaultHeaderActionIcon: false, style: { colCell: { diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx index 20ac123d7d..3548735197 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx @@ -1,4 +1,3 @@ -import { type ViewMeta } from '@antv/s2'; import { isEmpty, size } from 'lodash'; import React from 'react'; import { customMerge, Node, SpreadSheet, type ColHeaderConfig } from '@antv/s2'; @@ -37,8 +36,8 @@ export const StrategySheet: React.FC = React.memo( return { hierarchyType: 'tree', - dataCell: (viewMeta: ViewMeta) => - new StrategySheetDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new StrategySheetDataCell(viewMeta, spreadsheet), colCell: ( node: Node, spreadsheet: SpreadSheet, diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md index d1c8e67cb5..c4048cab0d 100644 --- a/s2-site/docs/api/general/S2Options.zh.md +++ b/s2-site/docs/api/general/S2Options.zh.md @@ -71,7 +71,7 @@ const s2Options = { ## DataCellCallback ```js -DataCellCallback = (viewMeta: ViewMeta, s2: Spreadsheet) => G.Group; +DataCellCallback = (viewMeta: ViewMeta, spreadsheet: SpreadSheet) => G.Group; ``` 功能描述:自定义数值单元格。[查看示例](/examples/custom/custom-cell#data-cell) diff --git a/s2-site/docs/common/custom/dataCellCallback.zh.md b/s2-site/docs/common/custom/dataCellCallback.zh.md index 0aa298371b..ef9ab2af8f 100644 --- a/s2-site/docs/common/custom/dataCellCallback.zh.md +++ b/s2-site/docs/common/custom/dataCellCallback.zh.md @@ -6,7 +6,7 @@ order: 2 ## DataCellCallback ```js -DataCellCallback = (viewMeta: ViewMeta) => DataCell; +DataCellCallback = (viewMeta: ViewMeta, spreadsheet: SpreadSheet) => DataCell | TableDataCell; ``` 功能描述:自定义数值单元格,[ViewMeta](#viewmeta) diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md index 306e2f9dab..5ef2bde2d9 100644 --- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md +++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md @@ -192,8 +192,8 @@ class CustomDataCell extends DataCell { } const s2Options = { - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, }; ``` @@ -348,7 +348,7 @@ class ChartSheetDataCell extends DataCell { } const s2 = new PivotSheet(container, s2DataConfig, { - dataCell: (viewMeta) => new ChartSheetDataCell(viewMeta, viewMeta.spreadsheet) + dataCell: (viewMeta, spreadsheet) => new ChartSheetDataCell(viewMeta, spreadsheet) }); await s2.render(); diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md index 46f776775f..460c3eb52c 100644 --- a/s2-site/docs/manual/migration-v2.zh.md +++ b/s2-site/docs/manual/migration-v2.zh.md @@ -706,6 +706,22 @@ const s2Options = { 如有消费请注意修改,具体请查看 [源代码定义](https://github.com/antvis/S2/tree/next/packages/s2-core/src/common/constant). +#### 自定义数值单元格参数变更 + +增加第二个参数 `spreadsheet`, 和其他单元格保持一致。 + +```diff +const s2Options = { + width: 600, +- dataCell: (viewMeta) => { +- return new CustomDataCell(viewMeta, viewMeta.spreadsheet); +- } ++ dataCell: (viewMeta, spreadsheet) => { ++ return new CustomDataCell(viewMeta, spreadsheet); ++ } +} +``` + ### 组件层 @antv/s2-react #### 支持 React 18 和 Ant Design 5.0 diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx index f987b28375..a2dbe29433 100644 --- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx +++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx @@ -174,8 +174,8 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json') width: 1150, height: 720, showDefaultHeaderActionIcon: false, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, interaction: { hoverHighlight: false, diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx index 104b5e4cb7..63958d0d64 100644 --- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx +++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx @@ -199,11 +199,10 @@ class CustomDataCell extends DataCell { // 自定义icon显示 getIconStyle() { - const tagName = Object.keys(this.customConditions).find( - (item) => - this.meta.colId?.includes( - `root${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`, - ), + const tagName = Object.keys(this.customConditions).find((item) => + this.meta.colId?.includes( + `root${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`, + ), ); if (tagName) { @@ -218,11 +217,10 @@ class CustomDataCell extends DataCell { drawTextShape() { const { fieldValue } = this.meta; - const tagName = Object.keys(this.textConfig).find( - (item) => - this.meta.colId?.includes( - `root${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`, - ), + const tagName = Object.keys(this.textConfig).find((item) => + this.meta.colId?.includes( + `root${NODE_ID_SEPARATOR}${item}${NODE_ID_SEPARATOR}`, + ), ); if (!tagName) { @@ -511,8 +509,8 @@ fetch( return parseFloat(fieldValue) > 0 ? 'CellUp' : fieldValue < 0 - ? 'CellDown' - : ''; + ? 'CellDown' + : ''; }; const conditionsIcon = [ @@ -548,8 +546,8 @@ fetch( parseFloat(value) > 0 ? UP_COLOR : parseFloat(value) < 0 - ? DOWN_COLOR - : textStyle?.fill, + ? DOWN_COLOR + : textStyle?.fill, }; }; @@ -585,8 +583,8 @@ fetch( lineConfigStyle, ); }, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta.spreadsheet, { + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet, { lineConfig, lineConfigStyle, conditions: { diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx index 3d814109cb..8ba7c83e31 100644 --- a/s2-site/examples/case/comparison/demo/time-spend.tsx +++ b/s2-site/examples/case/comparison/demo/time-spend.tsx @@ -258,8 +258,8 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json') width: 1150, height: 420, showDefaultHeaderActionIcon: false, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, frame: (cfg) => { return new CustomFrame(cfg); diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx index 8614a15e16..09ed3d13b6 100644 --- a/s2-site/examples/case/kpi-strategy/demo/basic.tsx +++ b/s2-site/examples/case/kpi-strategy/demo/basic.tsx @@ -252,8 +252,8 @@ fetch('https://assets.antv.antgroup.com/s2/kpi-strategy.json') // 自定义角头文本 cornerText: '指标', // 覆盖默认数值单元格, 额外绘制衍生指标和子弹图 - dataCell: (viewMeta) => - new KpiStrategyDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new KpiStrategyDataCell(viewMeta, spreadsheet), }; // 覆盖默认主题, 让单元格文字靠左显示 diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts index 1741c431eb..46b7a14ae3 100644 --- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts @@ -325,8 +325,8 @@ fetch( rowCell: (node, spreadsheet, headerConfig) => { return new CustomRowCell(node, spreadsheet, headerConfig); }, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, }; diff --git a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts index b7cc4d24c0..6be956c681 100644 --- a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts @@ -1,5 +1,11 @@ /* eslint-disable max-classes-per-file */ -import { TableColCell, TableDataCell, TableSheet } from '@antv/s2'; +import { + TableColCell, + TableDataCell, + TableSheet, + type S2DataConfig, + type S2Options, +} from '@antv/s2'; /** * 自定义 TableDataCell,通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等... @@ -115,14 +121,15 @@ fetch( .then((res) => res.json()) .then((res) => { const container = document.getElementById('container'); - const s2DataConfig = { + const s2DataConfig: S2DataConfig = { fields: { columns: ['province', 'city', 'type', 'sub_type', 'number'], }, meta: res.meta, data: res.data, }; - const s2Options = { + + const s2Options: S2Options = { width: 600, height: 480, seriesNumber: { @@ -131,8 +138,8 @@ fetch( colCell: (node, spreadsheet, headerConfig) => { return new CustomColCell(node, spreadsheet, headerConfig); }, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, }; diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts index d06c55a20f..b8b7c33b17 100644 --- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts @@ -46,8 +46,8 @@ fetch( // 关闭 hover 十字高亮, 为了视觉效果,可不设置 hoverHighlight: false, }, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, }; diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts index 5ba23e29d2..4473f3ff5d 100644 --- a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts +++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts @@ -173,8 +173,8 @@ fetch( }, ], }, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, }; diff --git a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts index 52a02aec44..bb3db61674 100644 --- a/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts +++ b/s2-site/examples/custom/custom-dataset/demo/custom-strategy-sheet-dataset.ts @@ -125,8 +125,8 @@ fetch( height: 480, hierarchyType: 'tree', dataSet: (spreadsheet) => new CustomDataSet(spreadsheet), - dataCell: (viewMeta) => - new CustomDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new CustomDataCell(viewMeta, spreadsheet), }; const s2 = new PivotSheet(container, s2DataConfig, s2Options); diff --git a/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts b/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts index 0de5b5f105..74714eadc5 100644 --- a/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts +++ b/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts @@ -167,8 +167,8 @@ fetch( colCell: (node, spreadsheet, headerConfig) => { return new CustomColCell(node, spreadsheet, headerConfig); }, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + dataCell: (viewMeta, spreadsheet) => { + return new CustomDataCell(viewMeta, spreadsheet); }, }; diff --git a/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g2-chart.ts b/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g2-chart.ts index f68a21ef19..7bc1e74285 100644 --- a/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g2-chart.ts +++ b/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g2-chart.ts @@ -35,8 +35,8 @@ const s2Options: S2Options = { height: 400, }, }, - dataCell: (viewMeta) => - new ChartSheetDataCell(viewMeta, viewMeta.spreadsheet), + dataCell: (viewMeta, spreadsheet) => + new ChartSheetDataCell(viewMeta, spreadsheet), }; const s2DataConfig: S2DataConfig = {