fix: 修复默认配置对 ChartSheet 不生效 (#3075)

antvis · Jan 10, 2025 · 09a1f06 · 09a1f06
1 parent ddf4042
commit 09a1f06
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 25 deletions.
diff --git a/packages/s2-react/playground/components/ChartSheet.tsx b/packages/s2-react/playground/components/ChartSheet.tsx
@@ -27,7 +27,6 @@ const options: SheetComponentOptions = {
     multiSelection: true,
     overscrollBehavior: 'none',
   },
-  style: {},
 };
 
 export const ChartSheet = React.forwardRef<

diff --git a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx
@@ -6,26 +6,14 @@ import type { SheetComponentOptions, SheetComponentProps } from '../interface';
 
 export const ChartSheet: React.FC<SheetComponentProps> = React.memo((props) => {
   const {
-    options: defaultOptions,
-    themeCfg: defaultThemeCfg,
+    options: customOptions,
+    themeCfg: customThemeCfg,
     ...restProps
   } = props;
 
   const s2Options = React.useMemo<SheetComponentOptions>(() => {
-    const options: SheetComponentOptions = {
-      dataCell: (viewMeta, spreadsheet) =>
-        new ChartDataCell(viewMeta, spreadsheet),
-      showDefaultHeaderActionIcon: false,
-      interaction: {
-        hoverFocus: false,
-        brushSelection: {
-          dataCell: false,
-        },
-      },
+    const defaultOptions: SheetComponentOptions = {
       style: {
-        colCell: {
-          hideValue: true,
-        },
         rowCell: {
           width: 100,
         },
@@ -39,11 +27,27 @@ export const ChartSheet: React.FC<SheetComponentProps> = React.memo((props) => {
       },
     };
 
-    return customMerge<SheetComponentOptions>(defaultOptions, options);
-  }, [defaultOptions]);
+    const options: SheetComponentOptions = {
+      dataCell: (viewMeta, spreadsheet) =>
+        new ChartDataCell(viewMeta, spreadsheet),
+      showDefaultHeaderActionIcon: false,
+      interaction: {
+        hoverFocus: false,
+        brushSelection: {
+          dataCell: false,
+        },
+      },
+    };
+
+    return customMerge<SheetComponentOptions>(
+      defaultOptions,
+      customOptions,
+      options,
+    );
+  }, [customOptions]);
 
   const themeCfg = React.useMemo<ThemeCfg>(() => {
-    const theme: ThemeCfg['theme'] = {
+    const defaultTheme: ThemeCfg['theme'] = {
       dataCell: {
         cell: {
           interactionState: {
@@ -58,10 +62,8 @@ export const ChartSheet: React.FC<SheetComponentProps> = React.memo((props) => {
       },
     };
 
-    return customMerge<ThemeCfg>(defaultThemeCfg, {
-      theme,
-    });
-  }, [defaultThemeCfg]);
+    return customMerge<ThemeCfg>(defaultTheme, customThemeCfg);
+  }, [customThemeCfg]);
 
   return <BaseSheet {...restProps} options={s2Options} themeCfg={themeCfg} />;
 });

diff --git a/s2-site/docs/manual/advanced/chart-with-g2.zh.md b/s2-site/docs/manual/advanced/chart-with-g2.zh.md
@@ -116,7 +116,7 @@ pnpm add @antv/g2
 
 #### 1.3 在 `@antv/s2` 中使用
 
-##### 1. 使用 `@antv/s2/extends` 中导出的`ChartDataCell`
+##### 1. 使用 `@antv/s2/extends` 中导出的 `ChartDataCell`
 
 ```ts
 import { PivotSheet } from '@antv/s2';
@@ -148,7 +148,7 @@ function App() {
   return (
     <SheetComponent
       sheetType="chart"
-      dataCfg={s2DataConfig} 
+      dataCfg={s2DataConfig}
     />
   )
 }

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
@@ -1,10 +1,12 @@
 import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
 import { ChartDataCell } from '@antv/s2/extends';
+
 const s2Options: S2Options = {
   width: 1000,
   height: 900,
   style: {
     colCell: {
+      // 多指标情况下 (即: s2DataConfig.fields.values), 需要设为 false
       hideValue: true,
     },
     rowCell: {

diff --git a/s2-site/examples/react-component/sheet/demo/chart.tsx b/s2-site/examples/react-component/sheet/demo/chart.tsx
@@ -9,6 +9,7 @@ const s2Options: S2Options = {
   height: 900,
   style: {
     colCell: {
+      // 多指标情况下 (即: s2DataConfig.fields.values), 需要设为 false
       hideValue: true,
     },
     rowCell: {
@@ -20,6 +21,11 @@ const s2Options: S2Options = {
       height: 400,
     },
   },
+  tooltip: {
+    dataCell: {
+      enable: false,
+    },
+  },
 };
 
 const s2DataConfig: S2DataConfig = {