Added color range to uptime chart

Client/src/Components/Animated/PulseDot.jsx

@@ -41,8 +41,8 @@ const PulseDot = ({ color }) => {
           "&::after": {
             content: `""`,
             position: "absolute",
-            width: "6px",
-            height: "6px",
+            width: "7px",
+            height: "7px",
             borderRadius: "50%",
             backgroundColor: "white",
             top: "50%",

Client/src/Pages/Monitors/Details/Charts/index.jsx

@@ -44,6 +44,14 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
   const [chartHovered, setChartHovered] = useState(false);
   const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
 
+  const getColorRange = (uptime) => {
+    return uptime > 80
+      ? { main: theme.palette.success.main, light: theme.palette.success.light }
+      : uptime > 50
+      ? { main: theme.palette.warning.main, light: theme.palette.warning.light }
+      : { main: theme.palette.error.text, light: theme.palette.error.light };
+  };
+
   return (
     <ResponsiveContainer width="100%" height={155}>
       <BarChart
@@ -52,7 +60,7 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
         data={data}
         onMouseEnter={() => {
           setChartHovered(true);
-          onBarHover({ time: null, totalChecks: null });
+          onBarHover({ time: null, totalChecks: 0, uptimePercentage: 0 });
         }}
         onMouseLeave={() => {
           setChartHovered(false);
@@ -78,29 +86,32 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
         />
         <Bar
           dataKey="totalChecks"
-          barSize={5}
+          maxBarSize={7}
           background={{ fill: "transparent" }}
         >
-          {data.map((entry, index) => (
-            <Cell
-              key={`cell-${index}`}
-              fill={
-                hoveredBarIndex === index
-                  ? theme.palette.success.main
-                  : chartHovered
-                  ? theme.palette.success.light
-                  : theme.palette.success.main
-              }
-              onMouseEnter={() => {
-                setHoveredBarIndex(index);
-                onBarHover(entry);
-              }}
-              onMouseLeave={() => {
-                setHoveredBarIndex(null);
-                onBarHover({ time: null, totalChecks: null });
-              }}
-            />
-          ))}
+          {data.map((entry, index) => {
+            let { main, light } = getColorRange(entry.uptimePercentage);
+            return (
+              <Cell
+                key={`cell-${index}`}
+                fill={
+                  hoveredBarIndex === index ? main : chartHovered ? light : main
+                }
+                onMouseEnter={() => {
+                  setHoveredBarIndex(index);
+                  onBarHover(entry);
+                }}
+                onMouseLeave={() => {
+                  setHoveredBarIndex(null);
+                  onBarHover({
+                    time: null,
+                    totalChecks: 0,
+                    uptimePercentage: 0,
+                  });
+                }}
+              />
+            );
+          })}
         </Bar>
       </BarChart>
     </ResponsiveContainer>
@@ -121,7 +132,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
         data={data}
         onMouseEnter={() => {
           setChartHovered(true);
-          onBarHover({ time: null, totalIncidents: null });
+          onBarHover({ time: null, totalIncidents: 0 });
         }}
         onMouseLeave={() => {
           setChartHovered(false);
@@ -147,7 +158,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
         />
         <Bar
           dataKey="totalIncidents"
-          barSize={5}
+          maxBarSize={7}
           background={{ fill: "transparent" }}
         >
           {data.map((entry, index) => (
@@ -166,7 +177,7 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
               }}
               onMouseLeave={() => {
                 setHoveredBarIndex(null);
-                onBarHover({ time: null, totalIncidents: null });
+                onBarHover({ time: null, totalIncidents: 0 });
               }}
             />
           ))}

Client/src/Pages/Monitors/Details/index.jsx

@@ -118,57 +118,9 @@ const DetailsPage = ({ isAdmin }) => {
 
   let loading = Object.keys(monitor).length === 0;
 
-  const [aggregateStats, setAggregateStats] = useState({});
-  useEffect(() => {
-    const fetchAggregateStats = async () => {
-      try {
-        const res = await networkService.getAggregateStatsById(
-          authToken,
-          monitorId,
-          dateRange
-        );
-
-        setAggregateStats(res?.data?.data);
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    fetchAggregateStats();
-  }, [monitorId, dateRange]);
-
-  const calculateStats = () => {
-    let totalChecks = 0;
-    let totalIncidents = 0;
-    let totalResponseTime = 0;
-
-    Object.keys(aggregateStats).forEach((entry) => {
-      totalChecks += aggregateStats[entry].totalChecks;
-      totalIncidents += aggregateStats[entry].totalIncidents;
-      totalResponseTime += aggregateStats[entry].avgResponseTime;
-    });
-
-    let uptime =
-      dateRange === "day"
-        ? monitor.uptime24Hours
-        : dateRange === "week"
-        ? monitor.uptime7Days
-        : dateRange === "month" && monitor.uptime30Days;
-
-    return {
-      totalChecks: totalChecks,
-      totalIncidents: totalIncidents,
-      averageResponseTime:
-        Math.floor((totalResponseTime / aggregateStats.length) * 100) / 100,
-      uptime: Math.floor(uptime),
-    };
-  };
-
-  const monitorStats = calculateStats();
-
   const [hoveredUptimeData, setHoveredUptimeData] = useState(null);
   const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null);
 
-
   const statusColor = {
     true: theme.palette.success.main,
     false: theme.palette.error.main,
@@ -181,6 +133,8 @@ const DetailsPage = ({ isAdmin }) => {
     undefined: "Pending...",
   };
 
+  console.log(monitor);
+
   return (
     <Box className="monitor-details">
       {loading ? (
@@ -339,7 +293,13 @@ const DetailsPage = ({ isAdmin }) => {
             <Stack direction="row" gap={theme.spacing(8)}>
               <StatBox
                 sx={
-                  monitor?.status
+                  monitor?.status === undefined
+                    ? {
+                        backgroundColor: theme.palette.warning.light,
+                        borderColor: theme.palette.warning.border,
+                        "& h2": { color: theme.palette.warning.main },
+                      }
+                    : monitor?.status
                     ? {
                         backgroundColor: theme.palette.success.bg,
                         borderColor: theme.palette.success.light,
@@ -426,8 +386,8 @@ const DetailsPage = ({ isAdmin }) => {
                       <Typography>Total Checks</Typography>
                       <Typography component="span">
                         {hoveredUptimeData !== null
-                          ? hoveredUptimeData.totalChecks || 0
-                          : monitorStats.totalChecks}
+                          ? hoveredUptimeData.totalChecks
+                          : monitor?.periodTotalChecks}
                       </Typography>
                       {hoveredUptimeData !== null &&
                         hoveredUptimeData.time !== null && (
@@ -450,13 +410,17 @@ const DetailsPage = ({ isAdmin }) => {
                     <Box>
                       <Typography>Uptime Percentage</Typography>
                       <Typography component="span">
-                        {monitorStats.uptime}
+                        {hoveredUptimeData !== null
+                          ? Math.floor(
+                              hoveredUptimeData.uptimePercentage * 10
+                            ) / 10
+                          : Math.floor(monitor?.periodUptime * 10) / 10}
                         <Typography component="span">%</Typography>
                       </Typography>
                     </Box>
                   </Stack>
                   <UpBarChart
-                    data={aggregateStats}
+                    data={monitor?.aggregateData}
                     type={dateRange}
                     onBarHover={setHoveredUptimeData}
                   />
@@ -472,8 +436,8 @@ const DetailsPage = ({ isAdmin }) => {
                     <Typography>Total Incidents</Typography>
                     <Typography component="span">
                       {hoveredIncidentsData !== null
-                        ? hoveredIncidentsData.totalIncidents || 0
-                        : monitorStats.totalIncidents}
+                        ? hoveredIncidentsData.totalIncidents
+                        : monitor?.periodIncidents}
                     </Typography>
                     {hoveredIncidentsData !== null &&
                       hoveredIncidentsData.time !== null && (
@@ -494,7 +458,7 @@ const DetailsPage = ({ isAdmin }) => {
                       )}
                   </Box>
                   <DownBarChart
-                    data={aggregateStats}
+                    data={monitor?.aggregateData}
                     type={dateRange}
                     onBarHover={setHoveredIncidentsData}
                   />

Client/src/Pages/Monitors/Details/styled.jsx

@@ -33,6 +33,9 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
     flexDirection: "row",
     gap: theme.spacing(6),
   },
+  "& .MuiStack-root:first-of-type": {
+    alignItems: "center",
+  },
   "& tspan, & text": {
     fontSize: 11,
     fill: theme.palette.text.tertiary,

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -213,7 +213,7 @@ const PageSpeedDetails = () => {
           monitorId,
           "desc",
           50,
-          null,
+          "day",
           null,
           null
         );