diff --git a/src/app/Components/Charts/Bar/BotPerformanceBar.tsx b/src/app/Components/Charts/Bar/BotPerformanceBar.tsx index 427aaf31..0df6ae58 100644 --- 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([]) + const [chartHeight, updateChartHeight] = useState(300) + useEffect(() => { - updateLocalData(data) + if (data && data != []) updateLocalData(data) }, [data]) - const [newData, updateNewData] = useState([]) - const [chartHeight, updateChartHeight] = useState(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 index bc72c6d7..14590b02 100644 --- 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(() => data) - useEffect(() => { - if (data && data != []) updateLocalData(data) - }, [data]) - - // const [newData, updateNewData] = useState([]) const [chartHeight, updateChartHeight] = useState(300) const [newData, updateNewData] = useState([]) - 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 (