implement 60 min history chart

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;

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"