QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(plugin-chart-echarts): layout broken when resizing (#20783)

Browse Source 
* fix(plugin-chart-echarts): layout broken when resizing

* use useLayoutEffect
This commit is contained in:
Stephen Liu
2022-07-20 23:40:39 +08:00
committed by GitHub
parent d925b0c883
commit d90b973235
1 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
View File

@@ -22,6 +22,8 @@ import React, {
useMemo,
forwardRef,
useImperativeHandle,
useLayoutEffect,
useCallback,
} from 'react';
import { styled } from '@superset-ui/core';
import { ECharts, init } from 'echarts';
@@ -92,11 +94,23 @@ function Echart(
previousSelection.current = currentSelection;
}, [currentSelection]);
const handleSizeChange = useCallback(
({ width, height }: { width: number; height: number }) => {
if (chartRef.current) {
chartRef.current.resize({ width, height });
}
},
[],
);
// did mount
useEffect(() => {
if (chartRef.current) {
chartRef.current.resize({ width, height });
}
}, [width, height]);
handleSizeChange({ width, height });
}, []);
useLayoutEffect(() => {
handleSizeChange({ width, height });
}, [width, height, handleSizeChange]);
return <Styles ref={divRef} height={height} width={width} />;
}