feat(strategysheet): 趋势分析表 Tooltip 增加 label 属性用于自定义标题 (#1540)

* feat(strategysheet): 趋势分析表 Tooltip 增加 label 属性用于自定义标题 * feat: update * test: 增加测试
antvis · Jul 8, 2022 · b44ffe3 · b44ffe3
1 parent 4d2c256
commit b44ffe3
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 42 deletions.
diff --git a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
@@ -1,15 +1,45 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import { type SpreadSheet, type S2DataConfig } from '@antv/s2';
+import { type SpreadSheet, type S2DataConfig, customMerge } from '@antv/s2';
+import { SheetType } from '@antv/s2-shared';
 import { SheetComponent, SheetComponentsProps } from '../../../../src';
 import { getContainer } from '../../../util/helpers';
 
 describe('<SheetComponent/> Tests', () => {
-  describe('<StrategySheet/> Tests', () => {
-    let s2: SpreadSheet;
-    let container: HTMLDivElement;
+  let s2: SpreadSheet;
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = getContainer();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+  });
+
+  describe('Render Tests', () => {
+    test.each(['pivot', 'table', 'strategy', 'gridAnalysis'] as SheetType[])(
+      'should render successfully for %s sheet',
+      (sheetType) => {
+        function render() {
+          ReactDOM.render(
+            <SheetComponent
+              sheetType={sheetType}
+              options={{ width: 200, height: 200 }}
+              dataCfg={null}
+            />,
+            container,
+          );
+        }
+
+        expect(render).not.toThrowError();
+      },
+    );
+  });
 
+  describe('<StrategySheet/> Tests', () => {
     const renderStrategySheet = (
       options: SheetComponentsProps['options'],
       dataCfg: S2DataConfig = null,
@@ -18,7 +48,10 @@ describe('<SheetComponent/> Tests', () => {
         ReactDOM.render(
           <SheetComponent
             sheetType="strategy"
-            options={options}
+            options={customMerge(options, {
+              width: 200,
+              height: 200,
+            })}
             dataCfg={dataCfg}
             getSpreadSheet={(instance) => {
               s2 = instance;
@@ -29,15 +62,6 @@ describe('<SheetComponent/> Tests', () => {
       });
     };
 
-    beforeEach(() => {
-      container = getContainer();
-    });
-
-    afterEach(() => {
-      ReactDOM.unmountComponentAtNode(container);
-      container.remove();
-    });
-
     test('should overwrite strategy sheet tooltip data cell content', () => {
       const content = 'custom';
 
@@ -97,16 +121,5 @@ describe('<SheetComponent/> Tests', () => {
 
       expect(s2.options.tooltip.operation.hiddenColumns).toBeTruthy();
     });
-
-    test.each([
-      'brushSelection',
-      'selectedCellMove',
-      'multiSelection',
-      'rangeSelection',
-    ])('should disable %s interaction', (interactionName) => {
-      renderStrategySheet(null);
-
-      expect(s2.options.interaction[interactionName]).toBeFalsy();
-    });
   });
 });
diff --git a/...es/s2-react/__tests__/unit/components/sheets/strategy-sheet/custom-tooltip/index-spec.tsx b/...es/s2-react/__tests__/unit/components/sheets/strategy-sheet/custom-tooltip/index-spec.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { createMockCellInfo } from '../../../../../util/helpers';
+import {
+  StrategySheetColTooltip,
+  StrategySheetDataTooltip,
+  StrategySheetRowTooltip,
+} from '../../../../../../src/components/sheets/strategy-sheet/custom-tooltip';
+
+describe('StrategySheet Tooltip Tests', () => {
+  const mockCellInfo = createMockCellInfo('test');
+  const mockCell = {
+    ...mockCellInfo.mockCell,
+    getMeta: () => {
+      return {
+        spreadsheet: {
+          options: {
+            style: {},
+          },
+          getRowNodes: jest.fn(),
+          getColumnNodes: jest.fn(),
+          dataSet: {
+            getFieldDescription: jest.fn(),
+            getFieldName: jest.fn(),
+          },
+        },
+      };
+    },
+  };
+
+  test.each([
+    {
+      label: 'test col label',
+      component: StrategySheetColTooltip,
+    },
+    {
+      label: 'test data label',
+      component: StrategySheetDataTooltip,
+    },
+    {
+      label: 'test row label',
+      component: StrategySheetRowTooltip,
+    },
+  ])('should render tooltip with %o', ({ label, component: Comp }) => {
+    render(<Comp cell={mockCell} label={label} />);
+    expect(screen.getByText(label)).toBeDefined();
+  });
+});
diff --git a/packages/s2-react/src/components/index.ts b/packages/s2-react/src/components/index.ts
@@ -2,6 +2,7 @@ export { BaseSheet } from './sheets/base-sheet';
 export { TableSheet } from './sheets/table-sheet';
 export { GridAnalysisSheet } from './sheets/grid-analysis-sheet';
 export { StrategySheet } from './sheets/strategy-sheet';
+export * from './sheets/strategy-sheet/custom-tooltip';
 export {
   AdvancedSort,
   type AdvancedSortProps,

diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx
@@ -1,11 +1,15 @@
 import cls from 'classnames';
 import React from 'react';
 import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared';
+import { isFunction } from 'lodash';
 import type { CustomTooltipProps } from './interface';
 
 import './index.less';
 
-export const ColTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
+export const StrategySheetColTooltip: React.FC<CustomTooltipProps> = ({
+  cell,
+  label,
+}) => {
   const meta = cell.getMeta();
 
   // 趋势分析表叶子节点显示是指标标题, tooltip 中没必要再显示了
@@ -14,10 +18,12 @@ export const ColTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
   }
 
   const cellName = meta.spreadsheet.dataSet.getFieldName(meta.field);
+  const customLabel = isFunction(label) ? label(cell, cellName) : label;
+  const name = customLabel ?? cellName;
 
   return (
     <div className={cls(tooltipCls(), tooltipCls('col'))}>
-      <span className={tooltipCls('name')}>{cellName}</span>
+      <span className={tooltipCls('name')}>{name}</span>
       <span className={tooltipCls('value')}>{meta.value}</span>
     </div>
   );

diff --git a/...ages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx b/...ages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx
@@ -6,28 +6,33 @@ import {
   type ViewMeta,
 } from '@antv/s2';
 import cls from 'classnames';
-import { first, get, isEmpty, isNil } from 'lodash';
+import { first, get, isEmpty, isFunction, isNil } from 'lodash';
 import React from 'react';
 import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared';
 import { getLeafColNode, getRowName } from '../utils';
 import type { CustomTooltipProps } from './interface';
 
 import './index.less';
 
-export const DataTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
+export const StrategySheetDataTooltip: React.FC<CustomTooltipProps> = ({
+  cell,
+  label,
+}) => {
   const meta = cell.getMeta() as ViewMeta;
   const metaFieldValue = meta?.fieldValue as MultiData<SimpleDataItem[][]>;
 
-  const rowName = getRowName(meta);
+  const defaultRowName = getRowName(meta);
+  const customLabel = isFunction(label) ? label(cell, defaultRowName) : label;
+  const rowName = customLabel ?? defaultRowName;
   const leftColNode = getLeafColNode(meta);
 
   const [, ...derivedLabels] = React.useMemo(() => {
     try {
-      return JSON.parse(leftColNode.value);
+      return JSON.parse(leftColNode?.value);
     } catch {
       return [];
     }
-  }, [leftColNode.value]);
+  }, [leftColNode?.value]);
 
   const [value, ...derivedValues] = first(metaFieldValue?.values) || [
     metaFieldValue,

diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx
@@ -2,19 +2,24 @@ import { i18n, Node } from '@antv/s2';
 import cls from 'classnames';
 import React from 'react';
 import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared';
+import { isFunction } from 'lodash';
 import type { CustomTooltipProps } from './interface';
 
 import './index.less';
 
-export const RowTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
+export const StrategySheetRowTooltip: React.FC<CustomTooltipProps> = ({
+  cell,
+  label,
+}) => {
   const { field, spreadsheet, value, extra } = cell.getMeta() as Node;
-
+  const customLabel = isFunction(label) ? label(cell, value) : label;
+  const rowName = customLabel ?? value;
   const description =
     spreadsheet.dataSet.getFieldDescription(field) || extra?.description;
 
   return (
     <div className={cls(tooltipCls(), tooltipCls('row'))}>
-      <div className={tooltipCls('value')}>{value}</div>
+      <div className={tooltipCls('value')}>{rowName}</div>
       {description && (
         <div>
           {i18n('说明')}: {description}

diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.ts
@@ -0,0 +1,3 @@
+export * from './custom-col-tooltip';
+export * from './custom-data-tooltip';
+export * from './custom-row-tooltip';
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/interface.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/interface.ts
@@ -3,4 +3,10 @@ import type { Node, S2CellType, TooltipShowOptions, ViewMeta } from '@antv/s2';
 export interface CustomTooltipProps {
   cell: S2CellType<Node | ViewMeta>;
   defaultTooltipShowOptions?: TooltipShowOptions<React.ReactNode>;
+  label?:
+    | React.ReactNode
+    | ((
+        cell: S2CellType<Node | ViewMeta>,
+        defaultLabel: React.ReactNode,
+      ) => React.ReactNode);
 }
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx
@@ -16,10 +16,11 @@ import type { SheetComponentsProps } from '../interface';
 import { CustomColCell } from './custom-col-cell';
 import { CustomDataCell } from './custom-data-cell';
 import { StrategyDataSet } from './custom-data-set';
-import { ColTooltip } from './custom-tooltip/custom-col-tooltip';
-import { DataTooltip } from './custom-tooltip/custom-data-tooltip';
-import { RowTooltip } from './custom-tooltip/custom-row-tooltip';
-
+import {
+  StrategySheetColTooltip,
+  StrategySheetDataTooltip,
+  StrategySheetRowTooltip,
+} from './custom-tooltip';
 /* *
  * 趋势分析表特性：
  * 1. 维度为空时默认为自定义目录树结构
@@ -87,10 +88,10 @@ export const StrategySheet: React.FC<SheetComponentsProps> = React.memo(
             hiddenColumns: true,
           },
           row: {
-            content: (cell) => <RowTooltip cell={cell} />,
+            content: (cell) => <StrategySheetRowTooltip cell={cell} />,
           },
           col: {
-            content: (cell) => <ColTooltip cell={cell} />,
+            content: (cell) => <StrategySheetColTooltip cell={cell} />,
           },
           data: {
             content: (cell, defaultTooltipShowOptions) => {
@@ -106,7 +107,7 @@ export const StrategySheet: React.FC<SheetComponentsProps> = React.memo(
 
               // 如果是数组, 说明是普通数值+同环比数据 或者 KPI数据, 显示普通数值 Tooltip
               if (isArray(fieldValue?.values)) {
-                return content ?? <DataTooltip cell={cell} />;
+                return content ?? <StrategySheetDataTooltip cell={cell} />;
               }
 
               return content ?? <></>;