Skip to content

Feat/react vchart morphing #3262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xile611 merged 2 commits into from
Sep 25, 2024
Merged

Feat/react vchart morphing #3262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06fa910
feat(react-vchart): support `morphConfig` of react-vchart, close #3219
xile611 Sep 14, 2024
ef5c43b
docs: update changlog of rush
xile611 Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
76 changes: 43 additions & 33 deletions docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
}
```

Expand Down Expand Up @@ -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 |
| ---------------------------- | ---------------- | ------------------------------------ |
| `<LineChart/>` | Cartesian Charts | `registerLabel` |
| `<AreaChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
| `<BarChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
| `<Bar3dChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
| `<BoxPlotChart/>` | Cartesian Charts | `registerLabel`, |
| `<HeatmapChart/>` | Cartesian Charts | `registerLabel` |
| `<Histogram3dChart/>` | Cartesian Charts | `registerLabel` |
| `<HistogramChart/>` | Cartesian Charts | `registerLabel` |
| `<LinearProgressChart/>` | Cartesian Charts | `registerLabel` |
| `<RangeColumnChart/>` | Cartesian Charts | `registerLabel` |
| `<RangeColumn3dChart/>` | Cartesian Charts | `registerLabel` |
| `<ScatterChart/>` | Cartesian Charts | `registerLabel` |
| `<SequenceChart/>` | Cartesian Charts | `registerLabel` |
| `<WaterfallChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
| `<RadarChart/>` | Polar Charts | `registerLabel` |
| `<RoseChart/>` | Polar Charts | `registerLabel` |
| `<CircularProgressChart/>` | Polar Charts | `registerLabel`, `registerIndicator` |
| `<Pie3dChart/>` | General Charts | `registerLabel`, `registerIndicator` |
| `<PieChart/>` | General Charts | `registerLabel`, `registerIndicator` |
| `<CirclePackingChart/>` | General Charts | None |
| `<FunnelChart/>` | General Charts | `registerLabel` |
| `<Funnel3dChart/>` | General Charts | `registerLabel` |
| `<GaugeChart/>` | General Charts | None |
| `<MapChart/>` | General Charts | `registerLabel` |
| `<SankeyChart/>` | General Charts | None |
| `<SunburstChart/>` | General Charts | None |
| `<TreemapChart/>` | General Charts | None |
| `<VennChart/>` | General Charts | None |
| `<WordCloud3dChart/>` | General Charts | None |
| `<WordCloudChart/>` | General Charts | None |
| `<LiquidChart/>` | General Charts | `registerIndicator` |
| Chart | Category | Additional Registered Components |
| -------------------------- | ---------------- | ------------------------------------- |
| `<LineChart/>` | Cartesian Charts | `registerLabel` |
| `<AreaChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
| `<BarChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
| `<Bar3dChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
| `<BoxPlotChart/>` | Cartesian Charts | `registerLabel`, |
| `<HeatmapChart/>` | Cartesian Charts | `registerLabel` |
| `<Histogram3dChart/>` | Cartesian Charts | `registerLabel` |
| `<HistogramChart/>` | Cartesian Charts | `registerLabel` |
| `<LinearProgressChart/>` | Cartesian Charts | `registerLabel` |
| `<RangeColumnChart/>` | Cartesian Charts | `registerLabel` |
| `<RangeColumn3dChart/>` | Cartesian Charts | `registerLabel` |
| `<ScatterChart/>` | Cartesian Charts | `registerLabel` |
| `<SequenceChart/>` | Cartesian Charts | `registerLabel` |
| `<WaterfallChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
| `<RadarChart/>` | Polar Charts | `registerLabel` |
| `<RoseChart/>` | Polar Charts | `registerLabel` |
| `<CircularProgressChart/>` | Polar Charts | `registerLabel`, `registerIndicator` |
| `<Pie3dChart/>` | General Charts | `registerLabel`, `registerIndicator` |
| `<PieChart/>` | General Charts | `registerLabel`, `registerIndicator` |
| `<CirclePackingChart/>` | General Charts | None |
| `<FunnelChart/>` | General Charts | `registerLabel` |
| `<Funnel3dChart/>` | General Charts | `registerLabel` |
| `<GaugeChart/>` | General Charts | None |
| `<MapChart/>` | General Charts | `registerLabel` |
| `<SankeyChart/>` | General Charts | None |
| `<SunburstChart/>` | General Charts | None |
| `<TreemapChart/>` | General Charts | None |
| `<VennChart/>` | General Charts | None |
| `<WordCloud3dChart/>` | General Charts | None |
| `<WordCloudChart/>` | General Charts | None |
| `<LiquidChart/>` | General Charts | `registerIndicator` |

For Cartesian charts, the default registered components are as follows:

Expand Down
9 changes: 9 additions & 0 deletions docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
}
```

Expand Down
40 changes: 26 additions & 14 deletions packages/react-vchart/src/charts/BaseChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 */
Expand All @@ -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);
Expand All @@ -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);
}
}
});
Expand Down Expand Up @@ -214,10 +232,7 @@ const BaseChart: React.FC<Props> = 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) {
Expand All @@ -237,10 +252,7 @@ const BaseChart: React.FC<Props> = 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;
}
Expand Down