From 7a4c6d6b9ddc0c26ac8f639c29636d58fd404c84 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Thu, 7 Jul 2022 19:02:07 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(strategysheet):=20=E8=B6=8B=E5=8A=BF?= =?UTF-8?q?=E5=88=86=E6=9E=90=E8=A1=A8=20Tooltip=20=E5=A2=9E=E5=8A=A0=20la?= =?UTF-8?q?bel=20=E5=B1=9E=E6=80=A7=E7=94=A8=E4=BA=8E=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit/components/sheets/index-spec.tsx | 28 +++++++++++++++++-- packages/s2-react/src/components/index.ts | 1 + .../custom-tooltip/custom-col-tooltip.tsx | 8 ++++-- .../custom-tooltip/custom-data-tooltip.tsx | 7 +++-- .../custom-tooltip/custom-row-tooltip.tsx | 9 ++++-- .../strategy-sheet/custom-tooltip/index.ts | 3 ++ .../custom-tooltip/interface.ts | 1 + .../sheets/strategy-sheet/index.tsx | 15 +++++----- 8 files changed, 56 insertions(+), 16 deletions(-) create mode 100644 packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.ts diff --git a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx index df629aa97f..81f7882fb4 100644 --- a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx +++ b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx @@ -1,11 +1,32 @@ 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(' Tests', () => { + describe('Render Tests', () => { + test.each(['pivot', 'table', 'strategy', 'grid'] as SheetType[])( + 'should render successfully with %s', + (sheetType) => { + function render() { + ReactDOM.render( + , + getContainer(), + ); + } + + expect(render).not.toThrowError(); + }, + ); + }); + describe(' Tests', () => { let s2: SpreadSheet; let container: HTMLDivElement; @@ -18,7 +39,10 @@ describe(' Tests', () => { ReactDOM.render( { s2 = instance; diff --git a/packages/s2-react/src/components/index.ts b/packages/s2-react/src/components/index.ts index d1d59b367a..1ffe7f2b8c 100644 --- 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 index 6649965721..8beba031a6 100644 --- 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 @@ -5,7 +5,10 @@ import type { CustomTooltipProps } from './interface'; import './index.less'; -export const ColTooltip: React.FC = ({ cell }) => { +export const StrategySheetColTooltip: React.FC = ({ + cell, + label, +}) => { const meta = cell.getMeta(); // 趋势分析表叶子节点显示是指标标题, tooltip 中没必要再显示了 @@ -14,10 +17,11 @@ export const ColTooltip: React.FC = ({ cell }) => { } const cellName = meta.spreadsheet.dataSet.getFieldName(meta.field); + const name = label ?? cellName; return (
- {cellName} + {name} {meta.value}
); diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx index 654d49d4a5..281ed2c7c4 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx @@ -14,11 +14,14 @@ import type { CustomTooltipProps } from './interface'; import './index.less'; -export const DataTooltip: React.FC = ({ cell }) => { +export const StrategySheetDataTooltip: React.FC = ({ + cell, + label, +}) => { const meta = cell.getMeta() as ViewMeta; const metaFieldValue = meta?.fieldValue as MultiData; - const rowName = getRowName(meta); + const rowName = label ?? getRowName(meta); const leftColNode = getLeafColNode(meta); const [, ...derivedLabels] = React.useMemo(() => { 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 index d1c33c81eb..e3f9e5a61f 100644 --- 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 @@ -6,15 +6,18 @@ import type { CustomTooltipProps } from './interface'; import './index.less'; -export const RowTooltip: React.FC = ({ cell }) => { +export const StrategySheetRowTooltip: React.FC = ({ + cell, + label, +}) => { const { field, spreadsheet, value, extra } = cell.getMeta() as Node; - + const rowName = label ?? value; const description = spreadsheet.dataSet.getFieldDescription(field) || extra?.description; return (
-
{value}
+
{rowName}
{description && (
{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 new file mode 100644 index 0000000000..5b3a0a672b --- /dev/null +++ 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 index 8eee6f8519..9da39781bb 100644 --- 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,5 @@ import type { Node, S2CellType, TooltipShowOptions, ViewMeta } from '@antv/s2'; export interface CustomTooltipProps { cell: S2CellType; defaultTooltipShowOptions?: TooltipShowOptions; + label?: 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 index 92c0fa0680..2497062337 100644 --- 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 = React.memo( hiddenColumns: true, }, row: { - content: (cell) => , + content: (cell) => , }, col: { - content: (cell) => , + content: (cell) => , }, data: { content: (cell, defaultTooltipShowOptions) => { @@ -106,7 +107,7 @@ export const StrategySheet: React.FC = React.memo( // 如果是数组, 说明是普通数值+同环比数据 或者 KPI数据, 显示普通数值 Tooltip if (isArray(fieldValue?.values)) { - return content ?? ; + return content ?? ; } return content ?? <>; From 974d7ee0170e1fd089d89a91258445a1acb0496f Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Thu, 7 Jul 2022 19:03:19 +0800 Subject: [PATCH 2/3] feat: update --- .../s2-react/__tests__/unit/components/sheets/index-spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx index 81f7882fb4..de633bfa10 100644 --- a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx +++ b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx @@ -8,7 +8,7 @@ import { getContainer } from '../../../util/helpers'; describe(' Tests', () => { describe('Render Tests', () => { - test.each(['pivot', 'table', 'strategy', 'grid'] as SheetType[])( + test.each(['pivot', 'table', 'strategy', 'gridAnalysis'] as SheetType[])( 'should render successfully with %s', (sheetType) => { function render() { From bb9206cbc5dce6a197a20a9f5abebcb33bd14a05 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 8 Jul 2022 11:14:49 +0800 Subject: [PATCH 3/3] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E6=B5=8B?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit/components/sheets/index-spec.tsx | 39 ++++++--------- .../custom-tooltip/index-spec.tsx | 48 +++++++++++++++++++ .../custom-tooltip/custom-col-tooltip.tsx | 4 +- .../custom-tooltip/custom-data-tooltip.tsx | 10 ++-- .../custom-tooltip/custom-row-tooltip.tsx | 4 +- .../custom-tooltip/interface.ts | 7 ++- 6 files changed, 80 insertions(+), 32 deletions(-) create mode 100644 packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/custom-tooltip/index-spec.tsx diff --git a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx index de633bfa10..07741a98ad 100644 --- a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx +++ b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx @@ -7,9 +7,21 @@ import { SheetComponent, SheetComponentsProps } from '../../../../src'; import { getContainer } from '../../../util/helpers'; describe(' Tests', () => { + 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 with %s', + 'should render successfully for %s sheet', (sheetType) => { function render() { ReactDOM.render( @@ -18,7 +30,7 @@ describe(' Tests', () => { options={{ width: 200, height: 200 }} dataCfg={null} />, - getContainer(), + container, ); } @@ -28,9 +40,6 @@ describe(' Tests', () => { }); describe(' Tests', () => { - let s2: SpreadSheet; - let container: HTMLDivElement; - const renderStrategySheet = ( options: SheetComponentsProps['options'], dataCfg: S2DataConfig = null, @@ -53,15 +62,6 @@ describe(' Tests', () => { }); }; - beforeEach(() => { - container = getContainer(); - }); - - afterEach(() => { - ReactDOM.unmountComponentAtNode(container); - container.remove(); - }); - test('should overwrite strategy sheet tooltip data cell content', () => { const content = 'custom'; @@ -121,16 +121,5 @@ describe(' 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/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/custom-tooltip/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/custom-tooltip/index-spec.tsx new file mode 100644 index 0000000000..fcc6cbe4b3 --- /dev/null +++ b/packages/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(); + expect(screen.getByText(label)).toBeDefined(); + }); +}); 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 index 8beba031a6..8d1fa7fc6b 100644 --- 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,6 +1,7 @@ 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'; @@ -17,7 +18,8 @@ export const StrategySheetColTooltip: React.FC = ({ } const cellName = meta.spreadsheet.dataSet.getFieldName(meta.field); - const name = label ?? cellName; + const customLabel = isFunction(label) ? label(cell, cellName) : label; + const name = customLabel ?? cellName; return (
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx index 281ed2c7c4..5a045a72d8 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx @@ -6,7 +6,7 @@ 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'; @@ -21,16 +21,18 @@ export const StrategySheetDataTooltip: React.FC = ({ const meta = cell.getMeta() as ViewMeta; const metaFieldValue = meta?.fieldValue as MultiData; - const rowName = label ?? 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 index e3f9e5a61f..9a7f93f5e4 100644 --- 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,6 +2,7 @@ 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'; @@ -11,7 +12,8 @@ export const StrategySheetRowTooltip: React.FC = ({ label, }) => { const { field, spreadsheet, value, extra } = cell.getMeta() as Node; - const rowName = label ?? value; + const customLabel = isFunction(label) ? label(cell, value) : label; + const rowName = customLabel ?? value; const description = spreadsheet.dataSet.getFieldDescription(field) || extra?.description; 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 index 9da39781bb..f9f3e12478 100644 --- 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,5 +3,10 @@ import type { Node, S2CellType, TooltipShowOptions, ViewMeta } from '@antv/s2'; export interface CustomTooltipProps { cell: S2CellType; defaultTooltipShowOptions?: TooltipShowOptions; - label?: React.ReactNode | (() => React.ReactNode); + label?: + | React.ReactNode + | (( + cell: S2CellType, + defaultLabel: React.ReactNode, + ) => React.ReactNode); }