From ec79bcd500c7b1a6d920956cb2f0c8b78997ee4b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 20:15:49 -0400
Subject: [PATCH] Added tooltips to each individual bar

---
 .../src/Components/Charts/BarChart/index.css  | 19 ++++
 .../src/Components/Charts/BarChart/index.jsx  | 93 +++++++++++++++----
 Client/src/Utils/timeUtils.js                 |  3 +-
 3 files changed, 97 insertions(+), 18 deletions(-)
 create mode 100644 Client/src/Components/Charts/BarChart/index.css

diff --git a/Client/src/Components/Charts/BarChart/index.css b/Client/src/Components/Charts/BarChart/index.css
new file mode 100644
index 000000000..e386aef1c
--- /dev/null
+++ b/Client/src/Components/Charts/BarChart/index.css
@@ -0,0 +1,19 @@
+.bar-tooltip .MuiTooltip-tooltip {
+  background-color: white;
+  border: solid 1px black;
+  box-shadow: var(--env-var-shadow-1);
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+  padding: 4px 8px;
+}
+
+.bar-tooltip .MuiTooltip-tooltip p {
+  font-size: var(--env-var-font-size-small-plus);
+  color: var(--env-var-color-2);
+  font-weight: 500;
+}
+.bar-tooltip .MuiTooltip-tooltip span {
+  font-size: var(--env-var-font-size-small);
+  color: var(--env-var-color-2);
+  font-weight: 600;
+}
diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx
index 6af3180a9..8ab54e8a8 100644
--- a/Client/src/Components/Charts/BarChart/index.jsx
+++ b/Client/src/Components/Charts/BarChart/index.jsx
@@ -1,5 +1,7 @@
 import { useTheme } from "@emotion/react";
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { formatDate } from "../../../Utils/timeUtils";
+import "./index.css";
 
 const BarChart = ({ checks = [] }) => {
   const theme = useTheme();
@@ -7,31 +9,88 @@ const BarChart = ({ checks = [] }) => {
   return (
     <Stack direction="row" flexWrap="nowrap" gap={theme.gap.xs} height="50px">
       {checks.map((check) => (
-        <Box
+        <Tooltip
+          title={
+            <>
+              <Typography>
+                {formatDate(new Date(check.createdAt), { year: undefined })}
+              </Typography>
+              <Box mt={theme.gap.xs}>
+                <Box
+                  display="inline-block"
+                  width={theme.gap.small}
+                  height={theme.gap.small}
+                  backgroundColor={
+                    check.status
+                      ? theme.label.up.dotColor
+                      : theme.label.down.dotColor
+                  }
+                  sx={{ borderRadius: "50%" }}
+                />
+                <Stack
+                  display="inline-flex"
+                  direction="row"
+                  justifyContent="space-between"
+                  ml={theme.gap.xs}
+                  gap={theme.gap.large}
+                >
+                  <Typography component="span" sx={{ opacity: 0.8 }}>
+                    Response Time
+                  </Typography>
+                  <Typography component="span">
+                    {check.originalResponseTime}
+                    <Typography component="span" sx={{ opacity: 0.8 }}>
+                      {" "}
+                      ms
+                    </Typography>
+                  </Typography>
+                </Stack>
+              </Box>
+            </>
+          }
+          placement="top"
           key={`check-${check?._id}`}
-          position="relative"
-          width="8px"
-          height="100%"
-          backgroundColor="#f4f4f4"
-          sx={{
-            borderRadius: theme.gap.xs,
+          slotProps={{
+            popper: {
+              className: "bar-tooltip",
+              modifiers: [
+                {
+                  name: "offset",
+                  options: {
+                    offset: [0, -12],
+                  },
+                },
+              ],
+            },
           }}
         >
           <Box
-            position="absolute"
-            bottom={0}
-            width="100%"
-            height={`${check.responseTime}%`}
+            position="relative"
+            width="8px"
+            height="100%"
             backgroundColor={
-              check.status === true
-                ? "var(--env-var-color-23)"
-                : "var(--env-var-color-24)"
+              check.status ? theme.label.up.bgColor : theme.label.down.bgColor
             }
             sx={{
               borderRadius: theme.gap.xs,
             }}
-          />
-        </Box>
+          >
+            <Box
+              position="absolute"
+              bottom={0}
+              width="100%"
+              height={`${check.responseTime}%`}
+              backgroundColor={
+                check.status
+                  ? theme.label.up.dotColor
+                  : theme.label.down.dotColor
+              }
+              sx={{
+                borderRadius: theme.gap.xs,
+              }}
+            />
+          </Box>
+        </Tooltip>
       ))}
     </Stack>
   );
diff --git a/Client/src/Utils/timeUtils.js b/Client/src/Utils/timeUtils.js
index f7742dbaf..2d1a2f180 100644
--- a/Client/src/Utils/timeUtils.js
+++ b/Client/src/Utils/timeUtils.js
@@ -43,7 +43,7 @@ export const formatDurationRounded = (ms) => {
   return time;
 };
 
-export const formatDate = (date) => {
+export const formatDate = (date, customOptions) => {
   const options = {
     year: "numeric",
     month: "long",
@@ -51,6 +51,7 @@ export const formatDate = (date) => {
     hour: "numeric",
     minute: "numeric",
     hour12: true,
+    ...customOptions
   };
 
   // Return the date using the specified options