fix: 修复自定义 dataCell 错误的传参写法 (#2748)

antvis · May 31, 2024 · c54ca82 · c54ca82
1 parent 535d2e0
commit c54ca82
Show file tree

Hide file tree

Showing 20 changed files with 75 additions and 54 deletions.
diff --git 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
@@ -575,8 +575,8 @@ describe('<StrategySheet/> 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
@@ -14,8 +14,8 @@ export const ChartSheet: React.FC<SheetComponentsProps> = React.memo(
 
     const s2Options = React.useMemo<SheetComponentOptions>(() => {
       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
@@ -11,8 +11,8 @@ export const GridAnalysisSheet: React.FC<SheetComponentsProps> = React.memo(
 
     const s2Options = React.useMemo<SheetComponentOptions>(() => {
       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
@@ -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<SheetComponentsProps> = 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
@@ -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
@@ -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
@@ -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
@@ -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);
++  }
+}
+```
+
 ### 组件层 <Badge>@antv/s2-react</Badge>
 
 #### 支持 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = {