From 209d7f0b5720186248e91e8d7f3e524dc486041d Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 5 Sep 2024 17:19:59 -0400
Subject: [PATCH] Fixed janky bar animations

---
 .../Charts/MonitorDetailsAreaChart/index.jsx  |  7 +++--
 .../Pages/Monitors/Details/Charts/index.jsx   | 30 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 4773b683c..cb01734fd 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -10,6 +10,7 @@ import {
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import "./index.css";
+import React, { useMemo } from "react";
 
 const CustomToolTip = ({ active, payload, label }) => {
   const theme = useTheme();
@@ -96,14 +97,16 @@ const MonitorDetailsAreaChart = ({ checks }) => {
     });
   };
 
+  const memoizedChecks = useMemo(() => checks, []);
+
   const theme = useTheme();
 
   return (
-    <ResponsiveContainer width="100%" height={220}>
+    <ResponsiveContainer width="100%" minWidth={25} height={220}>
       <AreaChart
         width="100%"
         height="100%"
-        data={checks}
+        data={memoizedChecks}
         margin={{
           top: 10,
           right: 0,
diff --git a/Client/src/Pages/Monitors/Details/Charts/index.jsx b/Client/src/Pages/Monitors/Details/Charts/index.jsx
index 5762d301a..cb0afb55b 100644
--- a/Client/src/Pages/Monitors/Details/Charts/index.jsx
+++ b/Client/src/Pages/Monitors/Details/Charts/index.jsx
@@ -9,7 +9,7 @@ import {
   RadialBar,
 } from "recharts";
 import { formatDate } from "../../../../Utils/timeUtils";
-import { useState } from "react";
+import { memo, useMemo, useState } from "react";
 
 const CustomLabels = ({
   x,
@@ -39,7 +39,7 @@ const CustomLabels = ({
   );
 };
 
-export const UpBarChart = ({ data, type, onBarHover }) => {
+export const UpBarChart = memo(({ data, type, onBarHover }) => {
   const theme = useTheme();
 
   const [chartHovered, setChartHovered] = useState(false);
@@ -54,10 +54,10 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
   };
 
   // TODO - REMOVE THIS LATER
-  let reversedData = [...data].reverse();
+  const reversedData = useMemo(() => [...data].reverse(), [data]);
 
   return (
-    <ResponsiveContainer width="100%" height={155}>
+    <ResponsiveContainer width="100%" minWidth={210} height={155}>
       <BarChart
         width="100%"
         height="100%"
@@ -120,19 +120,19 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
       </BarChart>
     </ResponsiveContainer>
   );
-};
+});
 
-export const DownBarChart = ({ data, type, onBarHover }) => {
+export const DownBarChart = memo(({ data, type, onBarHover }) => {
   const theme = useTheme();
 
   const [chartHovered, setChartHovered] = useState(false);
   const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
 
   // TODO - REMOVE THIS LATER
-  let reversedData = [...data].reverse();
+  const reversedData = useMemo(() => [...data].reverse(), [data]);
 
   return (
-    <ResponsiveContainer width="100%" height={155}>
+    <ResponsiveContainer width="100%" minWidth={250} height={155}>
       <BarChart
         width="100%"
         height="100%"
@@ -192,15 +192,19 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
       </BarChart>
     </ResponsiveContainer>
   );
-};
+});
 
 export const ResponseGaugeChart = ({ data }) => {
   const theme = useTheme();
 
   let max = 1000; // max ms
-  data = [{ response: max, fill: "transparent", background: false }, ...data];
 
-  let responseTime = Math.floor(data[1].response);
+  const memoizedData = useMemo(
+    () => [{ response: max, fill: "transparent", background: false }, ...data],
+    [data[0].response]
+  );
+
+  let responseTime = Math.floor(memoizedData[1].response);
   let responseProps =
     responseTime <= 200
       ? {
@@ -227,12 +231,12 @@ export const ResponseGaugeChart = ({ data }) => {
         };
 
   return (
-    <ResponsiveContainer width="100%" height={155}>
+    <ResponsiveContainer width="100%" minWidth={210} height={155}>
       <RadialBarChart
         width="100%"
         height="100%"
         cy="89%"
-        data={data}
+        data={memoizedData}
         startAngle={180}
         endAngle={0}
         innerRadius={100}