From 2fd7af1a90eedcc55ab069e5e8d7b6812bd602ff Mon Sep 17 00:00:00 2001
From: c9s <yoanlin93@gmail.com>
Date: Mon, 27 Jun 2022 01:42:12 +0800
Subject: [PATCH] fix resizeObserver clean up issue

---
 .../components/TradingViewChart.tsx           | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/backtest-report/components/TradingViewChart.tsx b/apps/backtest-report/components/TradingViewChart.tsx
index 01849f5e9..7bc573de2 100644
--- a/apps/backtest-report/components/TradingViewChart.tsx
+++ b/apps/backtest-report/components/TradingViewChart.tsx
@@ -412,11 +412,6 @@ const TradingViewChart = (props: TradingViewChartProps) => {
 
     Promise.all(fetchers).then(() => {
       console.log("createChart")
-
-      if (chart.current) {
-        chart.current.remove();
-      }
-
       chart.current = createBaseChart(chartContainerRef);
 
       const series = chart.current.addCandlestickSeries({
@@ -493,40 +488,45 @@ const TradingViewChart = (props: TradingViewChartProps) => {
         }
       }
 
+
       chart.current.timeScale().fitContent();
+
+      // see:
+      // https://codesandbox.io/s/9inkb?file=/src/styles.css
+      resizeObserver.current = new ResizeObserver(entries => {
+        if (!chart.current) {
+          return;
+        }
+
+        const {width, height} = entries[0].contentRect;
+        chart.current.applyOptions({width, height});
+
+        setTimeout(() => {
+          if (chart.current) {
+            chart.current.timeScale().fitContent();
+          }
+        }, 0);
+      });
+
+      resizeObserver.current.observe(chartContainerRef.current);
     });
 
     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])
 
-  // see:
-  // https://codesandbox.io/s/9inkb?file=/src/styles.css
-  useEffect(() => {
-    resizeObserver.current = new ResizeObserver(entries => {
-      if (!chart.current) {
-        return;
-      }
-
-      const {width, height} = entries[0].contentRect;
-      chart.current.applyOptions({width, height});
-
-      setTimeout(() => {
-        chart.current.timeScale().fitContent();
-      }, 0);
-    });
-
-    resizeObserver.current.observe(chartContainerRef.current);
-    return () => resizeObserver.current.disconnect();
-  }, []);
-
-
   return (
     <div>
       <Group>