Implemented basic bar chart

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,

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 {

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;

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}

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: (

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;