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 = {