Skip to content

Commit 7dab4f6

Browse files
ZeekoZhuZeekoZhu
authored
Merge pull request #1876 from merico-dev/echarts-rendered-trigger
feat(dashboard): refactor chart render notification
2 parents c02c382 + f673261 commit 7dab4f6

File tree

16 files changed

+307
-156
lines changed

16 files changed

+307
-156
lines changed

‎.github/workflows/CI.yml‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ jobs:
5757
settings-form/dist
5858
5959
publish_npm:
60-
if: github.ref == 'refs/heads/main'
6160
needs: build
6261
runs-on: ubuntu-latest
6362
permissions:
@@ -109,17 +108,29 @@ jobs:
109108

110109
# Publish dashboard to npm
111110
- name: Publish dashboard to npm
112-
if: steps.check_dashboard.outcome == 'success' && github.ref == 'refs/heads/main'
111+
if: steps.check_dashboard.outcome == 'success'
113112
run: |
114113
cd dashboard
115-
npm publish --provenance --access public
114+
VERSION=$(node -p "require('./package.json').version")
115+
if [[ "$VERSION" == *"-"* ]]; then
116+
TAG_FLAG="--tag next"
117+
else
118+
TAG_FLAG=""
119+
fi
120+
npm publish --provenance --access public $TAG_FLAG
116121
117122
# Publish settings-form to npm
118123
- name: Publish settings-form to npm
119-
if: steps.check_settings_form.outcome == 'success' && github.ref == 'refs/heads/main'
124+
if: steps.check_settings_form.outcome == 'success'
120125
run: |
121126
cd settings-form
122-
npm publish --provenance --access public
127+
VERSION=$(node -p "require('./package.json').version")
128+
if [[ "$VERSION" == *"-"* ]]; then
129+
TAG_FLAG="--tag next"
130+
else
131+
TAG_FLAG=""
132+
fi
133+
npm publish --provenance --access public $TAG_FLAG
123134
124135
build_images:
125136
needs: build

‎api/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/api",
3-
"version": "14.60.4",
3+
"version": "14.60.5",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

‎dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/dashboard",
3-
"version": "14.60.4",
3+
"version": "14.60.5",
44
"license": "Apache-2.0",
55
"repository": {
66
"url": "https://github.com/merico-dev/table"

‎dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { useLatest } from 'ahooks';
2+
import type { EChartsInstance } from 'echarts-for-react';
13
import ReactEChartsCore from 'echarts-for-react/lib/core';
24
import 'echarts-gl';
35
import * as echarts from 'echarts/core';
46
import { defaults, get, maxBy, minBy } from 'lodash';
5-
import { useMemo, useRef } from 'react';
7+
import { useCallback, useEffect, useMemo, useRef } from 'react';
68
import { useStorageData } from '~/components/plugins/hooks';
79
import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
810
import { VizViewProps } from '~/types/plugin';
@@ -38,17 +40,15 @@ export function VizBar3dChart({ context, instance }: VizViewProps) {
3840
};
3941
}, [queryData, z]);
4042

41-
const echartsInstanceRef = useRef<ReactEChartsCore>(null);
42-
const handleEvents = useMemo(
43-
() => ({
44-
finished: () => {
45-
const chart = echartsInstanceRef.current?.getEchartsInstance();
46-
if (!chart) return;
47-
notifyVizRendered(instance, chart.getOption());
48-
},
49-
}),
50-
[],
43+
const echartsRef = useRef<EChartsInstance>();
44+
const handleChartRenderFinished = useCallback(
45+
(chartOptions: unknown) => {
46+
notifyVizRendered(instance, chartOptions);
47+
},
48+
[instance],
5149
);
50+
const onRenderFinishedRef = useLatest(handleChartRenderFinished);
51+
5252
const option = {
5353
tooltip: {},
5454
backgroundColor: '#fff',
@@ -100,6 +100,16 @@ export function VizBar3dChart({ context, instance }: VizViewProps) {
100100
],
101101
};
102102

103+
useEffect(() => {
104+
setTimeout(() => {
105+
onRenderFinishedRef.current?.(echartsRef.current?.getOption());
106+
}, 100);
107+
}, [option]);
108+
109+
const handleChartReady = (echartsInstance: EChartsInstance) => {
110+
echartsRef.current = echartsInstance;
111+
};
112+
103113
if (!conf) {
104114
return null;
105115
}
@@ -108,11 +118,10 @@ export function VizBar3dChart({ context, instance }: VizViewProps) {
108118
<DefaultVizBox width={width} height={height}>
109119
<ReactEChartsCore
110120
echarts={echarts}
111-
ref={echartsInstanceRef}
121+
onChartReady={handleChartReady}
112122
option={option}
113123
style={getBoxContentStyle(width, height)}
114124
notMerge
115-
onEvents={handleEvents}
116125
theme="merico-light"
117126
/>
118127
</DefaultVizBox>

‎dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { useLatest } from 'ahooks';
2+
import type { EChartsInstance } from 'echarts-for-react';
13
import ReactEChartsCore from 'echarts-for-react/lib/core';
24
import 'echarts-gl';
35
import * as echarts from 'echarts/core';
46
import _, { defaults } from 'lodash';
5-
import { useCallback, useMemo, useRef } from 'react';
7+
import { useCallback, useEffect, useMemo, useRef } from 'react';
68
import { useStorageData } from '~/components/plugins/hooks';
79
import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
810
import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
@@ -51,21 +53,33 @@ export function VizBoxplotChart({ context, instance }: VizViewProps) {
5153
[rowDataMap, triggers, interactionManager],
5254
);
5355

54-
const echartsInstanceRef = useRef<ReactEChartsCore>(null);
55-
const handleFinished = useCallback(() => {
56-
const chart = echartsInstanceRef.current?.getEchartsInstance();
57-
if (!chart) return;
58-
notifyVizRendered(instance, chart.getOption());
59-
}, []);
56+
const handleChartRenderFinished = useCallback(
57+
(chartOptions: unknown) => {
58+
notifyVizRendered(instance, chartOptions);
59+
},
60+
[instance],
61+
);
62+
63+
const option = useMemo(() => getOption({ config, data, variables, t }), [config, data, variables, t]);
64+
65+
const echartsRef = useRef<EChartsInstance>();
66+
const onRenderFinishedRef = useLatest(handleChartRenderFinished);
67+
68+
useEffect(() => {
69+
setTimeout(() => {
70+
onRenderFinishedRef.current?.(echartsRef.current?.getOption());
71+
}, 100);
72+
}, [option]);
6073

6174
const onEvents = useMemo(() => {
6275
return {
6376
click: handleSeriesClick,
64-
finished: handleFinished,
6577
};
66-
}, [handleSeriesClick, handleFinished]);
78+
}, [handleSeriesClick]);
6779

68-
const option = useMemo(() => getOption({ config, data, variables, t }), [config, data, variables, t]);
80+
const handleChartReady = (echartsInstance: EChartsInstance) => {
81+
echartsRef.current = echartsInstance;
82+
};
6983

7084
if (!conf || !width || !height) {
7185
return null;
@@ -75,7 +89,7 @@ export function VizBoxplotChart({ context, instance }: VizViewProps) {
7589
<ReactEChartsCore
7690
echarts={echarts}
7791
option={option}
78-
ref={echartsInstanceRef}
92+
onChartReady={handleChartReady}
7993
style={getBoxContentStyle(width, height)}
8094
onEvents={onEvents}
8195
notMerge

‎dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { useLatest } from 'ahooks';
2+
import type { EChartsInstance } from 'echarts-for-react';
13
import ReactEChartsCore from 'echarts-for-react/lib/core';
24
import * as echarts from 'echarts/core';
35
import _ from 'lodash';
4-
import React, { useCallback, useMemo, useRef } from 'react';
6+
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
57
import { useStorageData } from '~/components/plugins/hooks';
68
import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
79
import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
@@ -68,30 +70,43 @@ function Chart({
6870
},
6971
[rowDataMap, triggers, interactionManager],
7072
);
71-
const echartsInstanceRef = useRef<ReactEChartsCore>(null);
72-
const handleFinished = useCallback(() => {
73-
const chart = echartsInstanceRef.current?.getEchartsInstance();
74-
if (!chart) return;
75-
notifyVizRendered(instance, chart.getOption());
76-
}, [instance]);
73+
74+
const handleChartRenderFinished = useCallback(
75+
(chartOptions: unknown) => {
76+
notifyVizRendered(instance, chartOptions);
77+
},
78+
[instance],
79+
);
80+
81+
const option = React.useMemo(() => {
82+
return getOption(conf, data, variables);
83+
}, [conf, data]);
84+
85+
const echartsRef = useRef<EChartsInstance>();
86+
const onRenderFinishedRef = useLatest(handleChartRenderFinished);
87+
88+
useEffect(() => {
89+
setTimeout(() => {
90+
onRenderFinishedRef.current?.(echartsRef.current?.getOption());
91+
}, 100);
92+
}, [option]);
7793

7894
const onEvents = useMemo(() => {
7995
return {
8096
click: handleHeatBlockClick,
8197
legendselectchanged: handleLegendSelected,
82-
finished: handleFinished,
8398
};
84-
}, [handleHeatBlockClick, handleFinished]);
99+
}, [handleHeatBlockClick]);
85100

86-
const option = React.useMemo(() => {
87-
return getOption(conf, data, variables);
88-
}, [conf, data]);
101+
const handleChartReady = (echartsInstance: EChartsInstance) => {
102+
echartsRef.current = echartsInstance;
103+
};
89104

90105
return (
91106
<ReactEChartsCore
92107
echarts={echarts}
93108
option={option}
94-
ref={echartsInstanceRef}
109+
onChartReady={handleChartReady}
95110
style={{ width, height }}
96111
onEvents={onEvents}
97112
notMerge

‎dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { useLatest } from 'ahooks';
2+
import type { EChartsInstance } from 'echarts-for-react';
13
import ReactEChartsCore from 'echarts-for-react/lib/core';
24
import * as echarts from 'echarts/core';
35
import { defaults } from 'lodash';
4-
import React, { useMemo } from 'react';
6+
import React, { useCallback, useEffect, useMemo } from 'react';
57
import { useStorageData } from '~/components/plugins/hooks';
68
import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
79
import { VizInstance, VizViewProps } from '~/types/plugin';
@@ -26,23 +28,29 @@ function Chart({
2628
return getOption(conf, data);
2729
}, [conf, data]);
2830

29-
const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
30-
const handleFinished = React.useCallback(() => {
31-
const chart = echartsInstanceRef.current?.getEchartsInstance();
32-
if (!chart) return;
33-
notifyVizRendered(instance, chart.getOption());
34-
}, [instance]);
35-
const onEvents = useMemo(
36-
() => ({
37-
finished: handleFinished,
38-
}),
39-
[handleFinished],
31+
const handleChartRenderFinished = useCallback(
32+
(chartOptions: unknown) => {
33+
notifyVizRendered(instance, chartOptions);
34+
},
35+
[instance],
4036
);
4137

38+
const echartsRef = React.useRef<EChartsInstance>();
39+
const onRenderFinishedRef = useLatest(handleChartRenderFinished);
40+
41+
useEffect(() => {
42+
setTimeout(() => {
43+
onRenderFinishedRef.current?.(echartsRef.current?.getOption());
44+
}, 100);
45+
}, [option]);
46+
47+
const handleChartReady = (echartsInstance: EChartsInstance) => {
48+
echartsRef.current = echartsInstance;
49+
};
50+
4251
return (
4352
<ReactEChartsCore
44-
ref={echartsInstanceRef}
45-
onEvents={onEvents}
53+
onChartReady={handleChartReady}
4654
echarts={echarts}
4755
option={option}
4856
style={{ width, height }}

‎dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { EChartsInstance } from 'echarts-for-react';
33
import ReactEChartsCore from 'echarts-for-react/lib/core';
44
import * as echarts from 'echarts/core';
55
import _, { defaults } from 'lodash';
6-
import React, { useCallback, useMemo, useState } from 'react';
6+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
77
import { useHandleChartRenderFinished, useStorageData } from '~/components/plugins/hooks';
88
import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
99
import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
@@ -55,15 +55,19 @@ function Chart({ conf, data, width, height, interactionManager, variables, onCha
5555

5656
const echartsRef = React.useRef<EChartsInstance>();
5757
const onRenderFinishedRef = useLatest(onChartRenderFinished);
58-
const handleEChartsFinished = useCallback(() => {
59-
onRenderFinishedRef.current(echartsRef.current?.getOption());
60-
}, []);
58+
59+
useEffect(() => {
60+
setTimeout(() => {
61+
onRenderFinishedRef.current?.(echartsRef.current?.getOption());
62+
}, 100);
63+
}, [option]);
64+
6165
const onEvents = useMemo(() => {
6266
return {
6367
click: handleSeriesClick,
64-
finished: handleEChartsFinished,
6568
};
6669
}, [handleSeriesClick]);
70+
6771
const handleChartReady = (echartsInstance: EChartsInstance) => {
6872
echartsRef.current = echartsInstance;
6973
};

‎dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { Box } from '@mantine/core';
2+
import { useLatest } from 'ahooks';
3+
import type { EChartsInstance } from 'echarts-for-react';
24
import ReactEChartsCore from 'echarts-for-react/lib/core';
35
import * as echarts from 'echarts/core';
46
import { defaults } from 'lodash';
5-
import React, { useEffect, useMemo, useState } from 'react';
7+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
68
import { useStorageData } from '~/components/plugins/hooks';
79
import { getBoxContentHeight, getBoxContentWidth, paddings } from '~/styles/viz-box';
810
import { VizInstance, VizViewProps } from '~/types/plugin';
@@ -30,21 +32,29 @@ function Chart({
3032
return getOption(conf, metricKey, data);
3133
}, [conf, data, metricKey]);
3234

33-
const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
34-
const handleFinished = React.useCallback(() => {
35-
const chart = echartsInstanceRef.current?.getEchartsInstance();
36-
if (!chart) return;
37-
notifyVizRendered(instance, chart.getOption());
38-
}, [instance]);
39-
const onEvents = useMemo(() => {
40-
return {
41-
finished: handleFinished,
42-
};
43-
}, [handleFinished]);
35+
const handleChartRenderFinished = useCallback(
36+
(chartOptions: unknown) => {
37+
notifyVizRendered(instance, chartOptions);
38+
},
39+
[instance],
40+
);
41+
42+
const echartsRef = React.useRef<EChartsInstance>();
43+
const onRenderFinishedRef = useLatest(handleChartRenderFinished);
44+
45+
useEffect(() => {
46+
setTimeout(() => {
47+
onRenderFinishedRef.current?.(echartsRef.current?.getOption());
48+
}, 100);
49+
}, [option]);
50+
51+
const handleChartReady = (echartsInstance: EChartsInstance) => {
52+
echartsRef.current = echartsInstance;
53+
};
54+
4455
return (
4556
<ReactEChartsCore
46-
ref={echartsInstanceRef}
47-
onEvents={onEvents}
57+
onChartReady={handleChartReady}
4858
echarts={echarts}
4959
option={option}
5060
style={{ width, height }}

0 commit comments

Comments
 (0)