From c3f964a2e2e5b0ad51b617c841fde627a40b5ee8 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 19:36:48 -0400
Subject: [PATCH] Implemented basic bar chart

---
 Client/src/Components/Animated/PulseDot.jsx   |  4 +-
 Client/src/Components/BasicTable/index.css    |  1 +
 .../src/Components/Charts/BarChart/index.jsx  | 40 +++++++++++++++++++
 Client/src/Components/Sidebar/index.jsx       |  2 +-
 Client/src/Pages/Monitors/index.jsx           |  3 +-
 Client/src/index.css                          |  2 +-
 6 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 Client/src/Components/Charts/BarChart/index.jsx

diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx
index 1b196426a..38e956b50 100644
--- a/Client/src/Components/Animated/PulseDot.jsx
+++ b/Client/src/Components/Animated/PulseDot.jsx
@@ -23,8 +23,8 @@ const PulseDot = ({ color }) => {
       justifyContent="center"
     >
       <Box
-        minWidth="16px"
-        minHeight="16px"
+        minWidth="18px"
+        minHeight="18px"
         sx={{
           position: "relative",
           backgroundColor: color,
diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 604dc412e..8c16dd744 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -128,6 +128,7 @@
 .MuiTablePagination-root p {
   color: var(--env-var-color-2);
   font-weight: 500;
+  font-size: var(--env-var-font-size-small-plus);
 }
 .MuiTablePagination-root button,
 .MuiTablePagination-root .MuiSelect-select {
diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx
new file mode 100644
index 000000000..6af3180a9
--- /dev/null
+++ b/Client/src/Components/Charts/BarChart/index.jsx
@@ -0,0 +1,40 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+
+const BarChart = ({ checks = [] }) => {
+  const theme = useTheme();
+
+  return (
+    <Stack direction="row" flexWrap="nowrap" gap={theme.gap.xs} height="50px">
+      {checks.map((check) => (
+        <Box
+          key={`check-${check?._id}`}
+          position="relative"
+          width="8px"
+          height="100%"
+          backgroundColor="#f4f4f4"
+          sx={{
+            borderRadius: theme.gap.xs,
+          }}
+        >
+          <Box
+            position="absolute"
+            bottom={0}
+            width="100%"
+            height={`${check.responseTime}%`}
+            backgroundColor={
+              check.status === true
+                ? "var(--env-var-color-23)"
+                : "var(--env-var-color-24)"
+            }
+            sx={{
+              borderRadius: theme.gap.xs,
+            }}
+          />
+        </Box>
+      ))}
+    </Stack>
+  );
+};
+
+export default BarChart;
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index f1bfcb719..1033ec0e6 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -310,7 +310,7 @@ function Sidebar() {
                         gap: theme.gap.small,
                         borderRadius: `${theme.shape.borderRadius}px`,
                         pl: theme.gap.small,
-                        mb:"1px"
+                        mb: "1px",
                       }}
                     >
                       {child.icon}
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 15c98ce24..0d559da13 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -28,6 +28,7 @@ import {
 
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
+import BarChart from "../../Components/Charts/BarChart";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -357,7 +358,7 @@ const Monitors = () => {
             />
           ),
         },
-        { id: idx + 2, data: <ResponseTimeChart checks={reversedChecks} /> },
+        { id: idx + 2, data: <BarChart checks={reversedChecks} /> },
         {
           id: idx + 3,
           data: (
diff --git a/Client/src/index.css b/Client/src/index.css
index d62f4b48f..887d7da07 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -67,7 +67,7 @@
   --env-var-width-2: 360px;
 
   --env-var-height-1: 100vh;
-  --env-var-height-2: 36px;
+  --env-var-height-2: 34px;
 
   --env-var-nav-bar-height: 70px;
   --env-var-side-bar-width: 250px;