add heatmap chart

client/src/components/common/HeatmapResponseTime.tsx

@@ -2,13 +2,19 @@ import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
 import type { ICheck } from "@/types/check";
 import { getResponseColor } from "@/utils/DataUtils";
-import { HistogramResponseTimeTooltip } from "@/components/monitors/HistogramResponseTimeTooltip";
-
+import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
+import type { SxProps } from "@mui/material/styles";
 interface HeatmapResponseTimeProps {
   checks: ICheck[];
+  availabilityCellSx?: SxProps;
+  responseCellSx?: SxProps;
 }
 
-export const HeatmapResponseTime = ({ checks }: HeatmapResponseTimeProps) => {
+export const HeatmapResponseTime = ({
+  checks,
+  availabilityCellSx,
+  responseCellSx,
+}: HeatmapResponseTimeProps) => {
   const theme = useTheme();
 
   if (!checks || checks.length === 0) return null;
@@ -53,35 +59,41 @@ export const HeatmapResponseTime = ({ checks }: HeatmapResponseTimeProps) => {
                 });
 
           return (
-            <HistogramResponseTimeTooltip
-              key={`${check}-${index}`}
-              check={check}
-            >
+            <HeatmapResponseTimeTooltip key={`${check}-${index}`} check={check}>
               <Box
                 sx={{
                   display: "grid",
                   gridTemplateRows: "auto auto",
-                  gap: theme.spacing(0.5),
                 }}
               >
                 <Box
                   sx={{
-                    width: "100%",
-                    height: theme.spacing(0.75),
-                    borderRadius: theme.spacing(0.5),
-                    bgcolor: statusBg,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: theme.spacing(2),
                   }}
-                />
-                <Box
-                  sx={{
-                    width: "100%",
-                    aspectRatio: "1 / 1",
-                    borderRadius: theme.spacing(0.5),
-                    bgcolor: respBg,
-                  }}
-                />
+                >
+                  <Box
+                    sx={{
+                      width: "100%",
+                      aspectRatio: "10",
+                      bgcolor: statusBg,
+                      borderRadius: theme.spacing(0.5),
+                      ...availabilityCellSx,
+                    }}
+                  />
+                  <Box
+                    sx={{
+                      width: "100%",
+                      aspectRatio: "1 / 1",
+                      bgcolor: respBg,
+                      borderRadius: theme.spacing(0.5),
+                      ...responseCellSx,
+                    }}
+                  />
+                </Box>
               </Box>
-            </HistogramResponseTimeTooltip>
+            </HeatmapResponseTimeTooltip>
           );
         })}
       </Box>

client/src/components/common/HeatmapResponseTimeTooltip.tsx

@@ -0,0 +1,68 @@
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { formatDateWithTz } from "@/utils/TimeUtils";
+import { useAppSelector } from "@/hooks/AppHooks";
+import type { LatestCheck } from "@/types/check";
+import { useTheme } from "@mui/material/styles";
+
+export const HeatmapResponseTimeTooltip: React.FC<{
+  children: React.ReactElement;
+  check: LatestCheck;
+}> = ({ children, check }) => {
+  const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
+  const theme = useTheme();
+
+  const getColor = (status: string) => {
+    if (status === "up") return theme.palette.success.lowContrast;
+    if (status === "down") return theme.palette.error.lowContrast;
+  };
+
+  if (check.status === "placeholder") {
+    return children;
+  }
+  return (
+    <Tooltip
+      slotProps={{
+        tooltip: {
+          sx: {
+            backgroundColor: "transparent",
+            color: "inherit",
+            boxShadow: "none",
+          },
+        },
+      }}
+      title={
+        <Stack
+          sx={{
+            backgroundColor: theme.palette.secondary.main,
+            border: 1,
+            borderColor: theme.palette.primary.lowContrast,
+            borderRadius: theme.shape.borderRadius,
+            p: theme.spacing(4),
+          }}
+        >
+          <Typography>
+            {formatDateWithTz(
+              check?.checkedAt,
+              "ddd, MMMM D, YYYY, HH:mm A",
+              uiTimezone
+            )}
+          </Typography>
+          {check?.responseTime && (
+            <Typography>Response Time: {check.responseTime} ms</Typography>
+          )}
+
+          <Typography textTransform={"capitalize"}>
+            Status:{" "}
+            <span style={{ color: getColor(check?.status) }}>
+              {check?.status}
+            </span>
+          </Typography>
+        </Stack>
+      }
+    >
+      {children}
+    </Tooltip>
+  );
+};