From 7e01006cef0438b40b224794b7d4d603a119f7a5 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 4 Sep 2024 21:09:18 -0400
Subject: [PATCH] Added gradient to area chart

---
 .../Charts/MonitorDetailsAreaChart/index.jsx  | 20 +++++++++++++++--
 .../Pages/Monitors/Details/Charts/index.jsx   | 22 ++++++++++++-------
 Client/src/Pages/Monitors/Details/index.jsx   |  8 +++----
 Server/db/mongo/modules/monitorModule.js      |  2 +-
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 4e5d1d7b0..5b6b0dd74 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -64,6 +64,8 @@ const MonitorDetailsAreaChart = ({ checks }) => {
     });
   };
 
+  const theme = useTheme();
+
   return (
     <ResponsiveContainer width="100%" height="100%">
       <AreaChart
@@ -77,6 +79,20 @@ const MonitorDetailsAreaChart = ({ checks }) => {
           bottom: 0,
         }}
       >
+        <defs>
+          <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+            <stop
+              offset="0%"
+              stopColor={theme.palette.primary.main}
+              stopOpacity={0.8}
+            />
+            <stop
+              offset="100%"
+              stopColor={theme.palette.primary.light}
+              stopOpacity={0}
+            />
+          </linearGradient>
+        </defs>
         <XAxis
           dataKey="createdAt"
           tickFormatter={formatDate}
@@ -87,8 +103,8 @@ const MonitorDetailsAreaChart = ({ checks }) => {
         <Area
           type="monotone"
           dataKey="responseTime"
-          stroke="#29afee"
-          fill="#eaf2fd"
+          stroke={theme.palette.primary.main}
+          fill="url(#colorUv)"
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/Client/src/Pages/Monitors/Details/Charts/index.jsx b/Client/src/Pages/Monitors/Details/Charts/index.jsx
index c390a3699..b0382f958 100644
--- a/Client/src/Pages/Monitors/Details/Charts/index.jsx
+++ b/Client/src/Pages/Monitors/Details/Charts/index.jsx
@@ -54,12 +54,15 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
       : { main: theme.palette.error.text, light: theme.palette.error.light };
   };
 
+  // TODO - REMOVE THIS LATER
+  let reversedData = [...data].reverse();
+
   return (
     <ResponsiveContainer width="100%" height={155}>
       <BarChart
         width="100%"
         height="100%"
-        data={data}
+        data={reversedData}
         onMouseEnter={() => {
           setChartHovered(true);
           onBarHover({ time: null, totalChecks: 0, uptimePercentage: 0 });
@@ -80,8 +83,8 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
               y={0}
               width="100%"
               height="100%"
-              firstDataPoint={data[0]}
-              lastDataPoint={data[data.length - 1]}
+              firstDataPoint={reversedData[0]}
+              lastDataPoint={reversedData[reversedData.length - 1]}
               type={type}
             />
           }
@@ -91,7 +94,7 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
           maxBarSize={7}
           background={{ fill: "transparent" }}
         >
-          {data.map((entry, index) => {
+          {reversedData.map((entry, index) => {
             let { main, light } = getColorRange(entry.uptimePercentage);
             return (
               <Cell
@@ -126,12 +129,15 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
   const [chartHovered, setChartHovered] = useState(false);
   const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
 
+  // TODO - REMOVE THIS LATER
+  let reversedData = [...data].reverse();
+
   return (
     <ResponsiveContainer width="100%" height={155}>
       <BarChart
         width="100%"
         height="100%"
-        data={data}
+        data={reversedData}
         onMouseEnter={() => {
           setChartHovered(true);
           onBarHover({ time: null, totalIncidents: 0 });
@@ -152,8 +158,8 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
               y={0}
               width="100%"
               height="100%"
-              firstDataPoint={data[0]}
-              lastDataPoint={data[data.length - 1]}
+              firstDataPoint={reversedData[0]}
+              lastDataPoint={reversedData[reversedData.length - 1]}
               type={type}
             />
           }
@@ -163,7 +169,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
           maxBarSize={7}
           background={{ fill: "transparent" }}
         >
-          {data.map((entry, index) => (
+          {reversedData.map((entry, index) => (
             <Cell
               key={`cell-${index}`}
               fill={
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index dff958dd6..b1b1820c1 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -481,11 +481,9 @@ const DetailsPage = ({ isAdmin }) => {
                     </IconBox>
                     <Typography component="h2">Response Times</Typography>
                   </Stack>
-                  <Box>
-                    {/* <MonitorDetailsAreaChart
-                  checks={[...monitor.checks].reverse()}
-                /> */}
-                  </Box>
+                  <MonitorDetailsAreaChart
+                    checks={[...monitor.checks].reverse()}
+                  />
                 </ChartBox>
                 <ChartBox
                   gap={theme.spacing(8)}
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 9451b6187..579b34b76 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -250,7 +250,7 @@ const getMonitorStatsById = async (req) => {
 
     // Normalize checks if requested
     if (normalize !== undefined) {
-      const normailzedChecks = NormalizeData(checksForDateRange, 1, 100);
+      const normailzedChecks = NormalizeData(nthChecks, 1, 100);
       monitorStats.checks = normailzedChecks;
     } else {
       monitorStats.checks = nthChecks;