From 7336287a9cd1ccd4805ad4549eda14bdd9842ba8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 13 Aug 2024 12:36:19 -0700
Subject: [PATCH] implement 60 min history chart

---
 .../Charts/MonitorDetails60MinChart/index.jsx | 62 +++++++++++++++++++
 Client/src/Pages/Monitors/Details/index.jsx   | 10 ++-
 Server/db/mongo/modules/monitorModule.js      | 12 +++-
 3 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx

diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
new file mode 100644
index 000000000..2c181eaec
--- /dev/null
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -0,0 +1,62 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Cell,
+  ResponsiveContainer,
+  ReferenceLine,
+  Label,
+} from "recharts";
+
+import PropTypes from "prop-types";
+
+const MonitorDetails60MinChart = ({ data }) => {
+  const labelStyle = {
+    fontSize: "8px",
+    fill: "black",
+  };
+  return (
+    <ResponsiveContainer width="100%" height={50}>
+      <BarChart
+        height={20}
+        data={data}
+        margin={{ top: 15, left: 15, right: 15, bottom: 0 }}
+      >
+        <XAxis hide={true} />
+        <YAxis hide={true} domain={[0, 100]} />
+        <Bar dataKey="value" barSize={15}>
+          {data.map((check, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={
+                check.status === true
+                  ? "var(--env-var-color-23)"
+                  : "var(--env-var-color-24)"
+              }
+            />
+          ))}
+        </Bar>
+        <ReferenceLine x={0} stroke="black" strokeDasharray="3 3">
+          <Label value="60 mins" position="top" style={labelStyle} />
+        </ReferenceLine>
+        <ReferenceLine
+          x={Math.floor(data.length * (2 / 3))}
+          stroke="black"
+          strokeDasharray="3 3"
+        >
+          <Label value="20 mins" position="top" style={labelStyle} />
+        </ReferenceLine>
+        <ReferenceLine x={data.length - 1} stroke="black" strokeDasharray="3 3">
+          <Label value="Now" position="top" style={labelStyle} />
+        </ReferenceLine>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
+
+MonitorDetails60MinChart.propTypes = {
+  data: PropTypes.array.isRequired,
+};
+
+export default MonitorDetails60MinChart;
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 5f3ddf9fc..a8b75e6cc 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -17,6 +17,7 @@ import {
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
 import "./index.css";
+import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -178,10 +179,13 @@ const DetailsPage = () => {
           <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
             <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
+              <Typography component="h1" sx={{ lineHeight: 1 }}>
+                {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+              </Typography>
+              <MonitorDetails60MinChart data={monitor.statusBar} />
+            </Stack>
+            <Stack direction="row" gap={theme.gap.small}>
               <Box>
-                <Typography component="h1" sx={{ lineHeight: 1 }}>
-                  {monitor.url?.replace(/^https?:\/\//, "") || "..."}
-                </Typography>
                 <Typography mt={theme.gap.small}>
                   <Typography
                     component="span"
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 1d53db978..44a1d6132 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -127,9 +127,15 @@ const getIncidents = (checks) => {
  * @returns {Array<Boolean>}  Array of booleans representing up/down.
  */
 const getStatusBarValues = (checks) => {
-  return checks.map((check) => {
-    return check.status;
-  });
+  return checks
+    .map((check) => {
+      return {
+        status: check.status,
+        responseTime: check.responseTime,
+        value: 75,
+      };
+    })
+    .reverse();
 };
 /**
  * Get stats by monitor ID