fix resizeObserver clean up issue

This commit is contained in:
c9s 2022-06-27 01:42:12 +08:00
parent 8f04423ee6
commit 2fd7af1a90
No known key found for this signature in database
GPG Key ID: 7385E7E464CB0A54

View File

@ -412,11 +412,6 @@ const TradingViewChart = (props: TradingViewChartProps) => {
Promise.all(fetchers).then(() => { Promise.all(fetchers).then(() => {
console.log("createChart") console.log("createChart")
if (chart.current) {
chart.current.remove();
}
chart.current = createBaseChart(chartContainerRef); chart.current = createBaseChart(chartContainerRef);
const series = chart.current.addCandlestickSeries({ const series = chart.current.addCandlestickSeries({
@ -493,22 +488,11 @@ const TradingViewChart = (props: TradingViewChartProps) => {
} }
} }
chart.current.timeScale().fitContent();
});
return () => { chart.current.timeScale().fitContent();
if (chart.current) {
chart.current.remove();
}
if (chartContainerRef.current) {
chartContainerRef.current.replaceChildren();
}
};
}, [props.runID, props.reportSummary, currentInterval, showPositionBase, showPositionAverageCost])
// see: // see:
// https://codesandbox.io/s/9inkb?file=/src/styles.css // https://codesandbox.io/s/9inkb?file=/src/styles.css
useEffect(() => {
resizeObserver.current = new ResizeObserver(entries => { resizeObserver.current = new ResizeObserver(entries => {
if (!chart.current) { if (!chart.current) {
return; return;
@ -518,14 +502,30 @@ const TradingViewChart = (props: TradingViewChartProps) => {
chart.current.applyOptions({width, height}); chart.current.applyOptions({width, height});
setTimeout(() => { setTimeout(() => {
if (chart.current) {
chart.current.timeScale().fitContent(); chart.current.timeScale().fitContent();
}
}, 0); }, 0);
}); });
resizeObserver.current.observe(chartContainerRef.current); resizeObserver.current.observe(chartContainerRef.current);
return () => resizeObserver.current.disconnect(); });
}, []);
return () => {
console.log("removeChart")
resizeObserver.current.disconnect();
if (chart.current) {
chart.current.remove();
}
if (chartContainerRef.current) {
// remove all the children because we created the legend elements
chartContainerRef.current.replaceChildren();
}
};
}, [props.runID, props.reportSummary, currentInterval, showPositionBase, showPositionAverageCost])
return ( return (
<div> <div>