Fixed render issues with adjustable height pair / bot charts

SaintPepsi · Oct 5, 2021 · ab9811a · ab9811a
1 parent 3df0827
commit ab9811a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 16 deletions.
diff --git a/src/app/Components/Charts/Bar/BotPerformanceBar.tsx b/src/app/Components/Charts/Bar/BotPerformanceBar.tsx
@@ -57,19 +57,20 @@ const BotPerformanceBar = ({ data = [], defaultCurrency }: Type_BotPerformanceCh
     }
 
     const [localData, updateLocalData] = useState(data)
+    const [newData, updateNewData] = useState<any[]>([])
+    const [chartHeight, updateChartHeight] = useState<number>(300)
+
     useEffect(() => {
-        updateLocalData(data)
+        if (data && data != []) updateLocalData(data)
     }, [data])
 
-    const [newData, updateNewData] = useState<any[]>([])
-    const [chartHeight, updateChartHeight] = useState<number>(300)
-    useLayoutEffect(() => {
+
+    useEffect(() => {
         if (localData) updateNewData(() =>{
             const newData = filterData(localData, filter).sort(dynamicSort(sort))
             updateChartHeight((newData.length * 15) + 250)
             return newData
         })
-        console.log('rerendered bots')
 
         // adjusting the chart height based on the number of data points include.d 15px is rougly the width required, 200px is for the other chart elements.
     }, [localData, filter, sort])

diff --git a/src/app/Components/Charts/Bar/PairPerformanceBar.tsx b/src/app/Components/Charts/Bar/PairPerformanceBar.tsx
@@ -57,22 +57,20 @@ const PairPerformanceBar = ({ data = [], defaultCurrency }: Type_Pair_Performanc
 
 
     const [localData, updateLocalData] = useState<any[]>(() => data)
-    useEffect(() => {
-        if (data && data != []) updateLocalData(data)
-    }, [data])
-
-    // const [newData, updateNewData] = useState<any[]>([])
     const [chartHeight, updateChartHeight] = useState<number>(300)
     const [newData, updateNewData] = useState<any[]>([])
-
     useEffect(() => {
-        if (data && data != []) updateNewData(filterData(localData, filter).sort(dynamicSort(sort)))
-    }, [filter, sort, localData])
-
+        if (data && data != []) updateLocalData(data)
+    }, [data])   
 
+    // useLayoutEffect here works only for the bot perf bar. Runs into rerender issues with pair performance
     useEffect(() => {
-        updateChartHeight((newData.length * 15) + 250)
-    }, [newData])
+        if (data && data != []) updateNewData(() => {
+            const newData = filterData(localData, filter).sort(dynamicSort(sort))
+            updateChartHeight((newData.length * 15) + 250)
+            return newData
+        })
+    }, [filter, sort, localData])
 
     return (
         <div className="boxData stat-chart ">