From 06fa9108d93fdfd315612255d3d4113a66e67aca Mon Sep 17 00:00:00 2001 From: xile611 Date: Sat, 14 Sep 2024 10:31:24 +0800 Subject: [PATCH 1/2] feat(react-vchart): support `morphConfig` of react-vchart, close #3219 --- .../react.md | 76 +++++++++++-------- .../react.md | 9 +++ .../react-vchart/src/charts/BaseChart.tsx | 40 ++++++---- 3 files changed, 78 insertions(+), 47 deletions(-) diff --git a/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md b/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md index 847d8ad552..572c94f2f3 100644 --- a/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md +++ b/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md @@ -177,6 +177,16 @@ interface VChartProps extends EventsProps { * @since 1.6.5 **/ skipFunctionDiff?: boolean; + /** + * The animation configuration for chart updates, with morph animations disabled by default. The default values are: + * { + * morph: false, + * enableExitAnimation: false + * } + * @since 1.12.7 + */ + + morphConfig?: IVChartRenderOption['morphConfig']; } ``` @@ -448,39 +458,39 @@ interface VChartSimpleProps extends EventsProps { - Use semantic tags, from version **1.11.0**, all semantic tags support on-demand loading by default, with the default registered components for each type of chart as follows: -| Chart | Category | Additional Registered Components | -| ---------------------------- | ---------------- | ------------------------------------ | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel`| -| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel`| -| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel`| -| `` | Cartesian Charts | `registerLabel`, | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel` | -| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel`| -| `` | Polar Charts | `registerLabel` | -| `` | Polar Charts | `registerLabel` | -| `` | Polar Charts | `registerLabel`, `registerIndicator` | -| `` | General Charts | `registerLabel`, `registerIndicator` | -| `` | General Charts | `registerLabel`, `registerIndicator` | -| `` | General Charts | None | -| `` | General Charts | `registerLabel` | -| `` | General Charts | `registerLabel` | -| `` | General Charts | None | -| `` | General Charts | `registerLabel` | -| `` | General Charts | None | -| `` | General Charts | None | -| `` | General Charts | None | -| `` | General Charts | None | -| `` | General Charts | None | -| `` | General Charts | None | -| `` | General Charts | `registerIndicator` | +| Chart | Category | Additional Registered Components | +| -------------------------- | ---------------- | ------------------------------------- | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel` | +| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel` | +| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel` | +| `` | Cartesian Charts | `registerLabel`, | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel` | +| `` | Cartesian Charts | `registerLabel`, `registerTotalLabel` | +| `` | Polar Charts | `registerLabel` | +| `` | Polar Charts | `registerLabel` | +| `` | Polar Charts | `registerLabel`, `registerIndicator` | +| `` | General Charts | `registerLabel`, `registerIndicator` | +| `` | General Charts | `registerLabel`, `registerIndicator` | +| `` | General Charts | None | +| `` | General Charts | `registerLabel` | +| `` | General Charts | `registerLabel` | +| `` | General Charts | None | +| `` | General Charts | `registerLabel` | +| `` | General Charts | None | +| `` | General Charts | None | +| `` | General Charts | None | +| `` | General Charts | None | +| `` | General Charts | None | +| `` | General Charts | None | +| `` | General Charts | `registerIndicator` | For Cartesian charts, the default registered components are as follows: diff --git a/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md b/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md index 907385ef26..420962d8cb 100644 --- a/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md +++ b/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md @@ -177,6 +177,15 @@ interface VChartProps extends EventsProps { * @since 1.6.5 **/ skipFunctionDiff?: boolean; + /** + * 图表更新的动画配置，默认会关闭morph动画，默认值为： + * { + * morph: false, + * enableExitAnimation: false + * } + * @since 1.12.6 + */ + morphConfig?: IVChartRenderOption['morphConfig']; } ``` diff --git a/packages/react-vchart/src/charts/BaseChart.tsx b/packages/react-vchart/src/charts/BaseChart.tsx index 4662ddca6f..b0c3d35805 100644 --- a/packages/react-vchart/src/charts/BaseChart.tsx +++ b/packages/react-vchart/src/charts/BaseChart.tsx @@ -1,4 +1,12 @@ -import type { IVChart, IData, IInitOption, ISpec, IVChartConstructor, IHierarchyData } from '@visactor/vchart'; +import type { + IVChart, + IData, + IInitOption, + ISpec, + IVChartConstructor, + IHierarchyData, + IVChartRenderOption +} from '@visactor/vchart'; import type { ReactNode } from 'react'; import React, { useState, useEffect, useRef, useImperativeHandle } from 'react'; import type { ContainerProps } from '../containers/withContainer'; @@ -56,6 +64,11 @@ export interface BaseChartProps options?: ChartOptions; /** skip function diff when component update */ skipFunctionDiff?: boolean; + /** + * add `morphConfig` for chart + * @since 1.12.7 + */ + morphConfig?: IVChartRenderOption['morphConfig']; /** 图表渲染完成事件 */ onReady?: (instance: IVChart, isInitial: boolean) => void; /** throw error when chart run into an error */ @@ -81,8 +94,13 @@ const notSpecKeys = [ 'onReady', 'spec', 'container', - 'options' + 'options', + 'morphConfig' ]; +const defaultMorphConfig = { + morph: false, + enableExitAnimation: false +}; const getComponentId = (child: React.ReactNode, index: number) => { const componentName = child && (child as any).type && ((child as any).type.displayName || (child as any).type.name); @@ -106,13 +124,13 @@ const parseSpecFromChildren = (props: Props) => { const specResult = parseSpec(childProps); if (specResult.isSingle) { - specFromChildren[specResult.specName] = specResult.spec; + (specFromChildren as any)[specResult.specName] = specResult.spec; } else { - if (!specFromChildren[specResult.specName]) { - specFromChildren[specResult.specName] = []; + if (!(specFromChildren as any)[specResult.specName]) { + (specFromChildren as any)[specResult.specName] = []; } - specFromChildren[specResult.specName].push(specResult.spec); + (specFromChildren as any)[specResult.specName].push(specResult.spec); } } }); @@ -214,10 +232,7 @@ const BaseChart: React.FC = React.forwardRef((props, ref) => { if (hasSpec) { if (!isEqual(eventsBinded.current.spec, props.spec, { skipFunction: skipFunctionDiff })) { - chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, { - morph: false, - enableExitAnimation: false - }); + chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, props.morphConfig ?? defaultMorphConfig); handleChartRender(); eventsBinded.current = props; } else if (eventsBinded.current.data !== props.data) { @@ -237,10 +252,7 @@ const BaseChart: React.FC = React.forwardRef((props, ref) => { prevSpec.current = newSpec; specFromChildren.current = newSpecFromChildren; - chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, { - morph: false, - enableExitAnimation: false - }); + chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, props.morphConfig ?? defaultMorphConfig); handleChartRender(); eventsBinded.current = props; } From ef5c43b17751607656f3994501c59cbdc9479ba8 Mon Sep 17 00:00:00 2001 From: xile611 Date: Sat, 14 Sep 2024 10:31:41 +0800 Subject: [PATCH 2/2] docs: update changlog of rush --- .../feat-react-vchart-morphing_2024-09-14-02-31.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json diff --git a/common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json b/common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json new file mode 100644 index 0000000000..dae1756144 --- /dev/null +++ b/common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat(react-vchart): support `morphConfig` of react-vchart, close #3219\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file