Refactor charts

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -12,12 +12,12 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz, toTimeStamp } from "../../../Utils/timeUtils";
 import "./index.css";
 
 const CustomToolTip = ({ active, payload, label }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
-
+	const dateFormat = label?.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
 	const theme = useTheme();
 	if (active && payload && payload.length) {
 		return (
@@ -39,7 +39,11 @@ const CustomToolTip = ({ active, payload, label }) => {
 						fontWeight: 500,
 					}}
 				>
-					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+					{formatDateWithTz(
+						toTimeStamp(label, dateFormat),
+						"ddd, MMMM D, YYYY, h:mm A",
+						uiTimezone
+					)}
 				</Typography>
 				<Box mt={theme.spacing(1)}>
 					<Box
@@ -69,7 +73,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 							Response Time
 						</Typography>{" "}
 						<Typography component="span">
-							{payload[0].payload.originalResponseTime}
+							{Math.floor(payload[0].payload.originalAvgResponseTime)}
 							<Typography
 								component="span"
 								sx={{ opacity: 0.8 }}
@@ -87,11 +91,24 @@ const CustomToolTip = ({ active, payload, label }) => {
 	return null;
 };
 
+CustomToolTip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.arrayOf(
+		PropTypes.shape({
+			payload: PropTypes.shape({
+				_id: PropTypes.string.isRequired, // Add this line to validate _id
+				originalResponseTime: PropTypes.number.isRequired,
+			}).isRequired,
+		})
+	),
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
 const CustomTick = ({ x, y, payload, index }) => {
 	const theme = useTheme();
 
 	const uiTimezone = useSelector((state) => state.ui.timezone);
-
+	const dateFormat = payload?.value.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
 	// Render nothing for the first tick
 	if (index === 0) return null;
 	return (
@@ -103,7 +120,7 @@ const CustomTick = ({ x, y, payload, index }) => {
 			fontSize={11}
 			fontWeight={400}
 		>
-			{formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
+			{formatDateWithTz(toTimeStamp(payload?.value, dateFormat), "h:mm a", uiTimezone)}
 		</Text>
 	);
 };
@@ -168,7 +185,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 				</defs>
 				<XAxis
 					stroke={theme.palette.border.dark}
-					dataKey="createdAt"
+					dataKey="_id"
 					tick={<CustomTick />}
 					minTickGap={0}
 					axisLine={false}
@@ -183,7 +200,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 				/>
 				<Area
 					type="monotone"
-					dataKey="responseTime"
+					dataKey="avgResponseTime"
 					stroke={theme.palette.primary.main}
 					fill="url(#colorUv)"
 					strokeWidth={isHovered ? 2.5 : 1.5}
@@ -203,7 +220,7 @@ CustomToolTip.propTypes = {
 	payload: PropTypes.arrayOf(
 		PropTypes.shape({
 			payload: PropTypes.shape({
-				originalResponseTime: PropTypes.number.isRequired,
+				originalAvgResponseTime: PropTypes.number,
 			}).isRequired,
 		})
 	),

Client/src/Pages/Uptime/Details/Charts/CustomLabels.jsx

@@ -0,0 +1,51 @@
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { formatDateWithTz, toTimeStamp } from "../../../../Utils/timeUtils";
+
+const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const formatString = type === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
+	const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
+
+	return (
+		<>
+			<text
+				x={x}
+				y={height}
+				dy={-3}
+				textAnchor="start"
+				fontSize={11}
+			>
+				{formatDateWithTz(
+					toTimeStamp(firstDataPoint._id, formatString),
+					dateFormat,
+					uiTimezone
+				)}
+			</text>
+			<text
+				x={width}
+				y={height}
+				dy={-3}
+				textAnchor="end"
+				fontSize={11}
+			>
+				{formatDateWithTz(
+					toTimeStamp(lastDataPoint._id, formatString),
+					dateFormat,
+					uiTimezone
+				)}
+			</text>
+		</>
+	);
+};
+
+CustomLabels.propTypes = {
+	x: PropTypes.number.isRequired,
+	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	firstDataPoint: PropTypes.object.isRequired,
+	lastDataPoint: PropTypes.object.isRequired,
+	type: PropTypes.string.isRequired,
+};
+
+export default CustomLabels;

Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx

@@ -0,0 +1,89 @@
+import { memo, useState } from "react";
+import { useTheme } from "@mui/material";
+import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts";
+import PropTypes from "prop-types";
+import CustomLabels from "./CustomLabels";
+
+const DownBarChart = memo(({ stats, type, onBarHover }) => {
+	const theme = useTheme();
+
+	const [chartHovered, setChartHovered] = useState(false);
+	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={250}
+			height={155}
+		>
+			<BarChart
+				width="100%"
+				height="100%"
+				data={stats.downChecks}
+				onMouseEnter={() => {
+					setChartHovered(true);
+					onBarHover({ time: null, totalChecks: 0 });
+				}}
+				onMouseLeave={() => {
+					setChartHovered(false);
+					setHoveredBarIndex(null);
+					onBarHover(null);
+				}}
+			>
+				<XAxis
+					stroke={theme.palette.border.dark}
+					height={15}
+					tick={false}
+					label={
+						<CustomLabels
+							x={0}
+							y={0}
+							width="100%"
+							height="100%"
+							firstDataPoint={stats.downChecks?.[0] ?? {}}
+							lastDataPoint={stats.downChecks?.[stats.downChecks.length - 1] ?? {}}
+							type={type}
+						/>
+					}
+				/>
+				<Bar
+					dataKey="avgResponseTime"
+					maxBarSize={7}
+					background={{ fill: "transparent" }}
+				>
+					{stats.downChecks.map((entry, index) => (
+						<Cell
+							key={`cell-${entry.time}`}
+							fill={
+								hoveredBarIndex === index
+									? theme.palette.error.main
+									: chartHovered
+										? theme.palette.error.light
+										: theme.palette.error.main
+							}
+							onMouseEnter={() => {
+								setHoveredBarIndex(index);
+								onBarHover(entry);
+							}}
+							onMouseLeave={() => {
+								setHoveredBarIndex(null);
+								onBarHover({ time: null, totalChecks: 0 });
+							}}
+						/>
+					))}
+				</Bar>
+			</BarChart>
+		</ResponsiveContainer>
+	);
+});
+
+DownBarChart.displayName = "DownBarChart";
+DownBarChart.propTypes = {
+	stats: PropTypes.shape({
+		downChecks: PropTypes.arrayOf(PropTypes.object),
+		downChecksAggregate: PropTypes.object,
+	}),
+	type: PropTypes.string,
+	onBarHover: PropTypes.func,
+};
+export default DownBarChart;

Client/src/Pages/Uptime/Details/Charts/ResponseGaugeChart.jsx

@@ -0,0 +1,117 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+import { ResponsiveContainer, RadialBarChart, RadialBar, Cell } from "recharts";
+
+const ResponseGaugeChart = ({ avgResponseTime }) => {
+	const theme = useTheme();
+
+	let max = 1000; // max ms
+
+	const data = [
+		{ response: max, fill: "transparent", background: false },
+		{ response: avgResponseTime, background: true },
+	];
+	let responseTime = Math.floor(avgResponseTime);
+	let responseProps =
+		responseTime <= 200
+			? {
+					category: "Excellent",
+					main: theme.palette.success.main,
+					bg: theme.palette.success.contrastText,
+				}
+			: responseTime <= 500
+				? {
+						category: "Fair",
+						main: theme.palette.success.main,
+						bg: theme.palette.success.contrastText,
+					}
+				: responseTime <= 600
+					? {
+							category: "Acceptable",
+							main: theme.palette.warning.main,
+							bg: theme.palette.warning.dark,
+						}
+					: {
+							category: "Poor",
+							main: theme.palette.error.main,
+							bg: theme.palette.error.light,
+						};
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={210}
+			height={155}
+		>
+			<RadialBarChart
+				width="100%"
+				height="100%"
+				cy="89%"
+				data={data}
+				startAngle={180}
+				endAngle={0}
+				innerRadius={100}
+				outerRadius={150}
+			>
+				<text
+					x={0}
+					y="100%"
+					dx="5%"
+					dy={-2}
+					textAnchor="start"
+					fontSize={11}
+				>
+					low
+				</text>
+				<text
+					x="100%"
+					y="100%"
+					dx="-3%"
+					dy={-2}
+					textAnchor="end"
+					fontSize={11}
+				>
+					high
+				</text>
+				<text
+					x="50%"
+					y="45%"
+					textAnchor="middle"
+					dominantBaseline="middle"
+					fontSize={18}
+					fontWeight={400}
+				>
+					{responseProps.category}
+				</text>
+				<text
+					x="50%"
+					y="55%"
+					textAnchor="middle"
+					dominantBaseline="hanging"
+					fontSize={25}
+				>
+					<tspan fontWeight={600}>{responseTime}</tspan> <tspan opacity={0.8}>ms</tspan>
+				</text>
+				<RadialBar
+					background={{ fill: responseProps.bg }}
+					clockWise
+					dataKey="response"
+					stroke="none"
+				>
+					<Cell
+						fill="transparent"
+						background={false}
+						barSize={0}
+					/>
+					<Cell fill={responseProps.main} />
+				</RadialBar>
+			</RadialBarChart>
+		</ResponsiveContainer>
+	);
+};
+
+ResponseGaugeChart.propTypes = {
+	avgResponseTime: PropTypes.number.isRequired,
+};
+
+export default ResponseGaugeChart;

Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx

@@ -0,0 +1,100 @@
+import { memo, useState } from "react";
+import { useTheme } from "@mui/material";
+import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts";
+import PropTypes from "prop-types";
+import CustomLabels from "./CustomLabels";
+
+const UpBarChart = memo(({ stats, type, onBarHover }) => {
+	const theme = useTheme();
+	const [chartHovered, setChartHovered] = useState(false);
+	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
+
+	const getColorRange = (responseTime) => {
+		return responseTime < 200
+			? { main: theme.palette.success.main, light: theme.palette.success.light }
+			: responseTime < 300
+				? { main: theme.palette.warning.main, light: theme.palette.warning.light }
+				: { main: theme.palette.error.contrastText, light: theme.palette.error.light };
+	};
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={210}
+			height={155}
+		>
+			<BarChart
+				width="100%"
+				height="100%"
+				data={stats.upChecks}
+				onMouseEnter={() => {
+					setChartHovered(true);
+					onBarHover({ time: null, totalChecks: 0, avgResponseTime: 0 });
+				}}
+				onMouseLeave={() => {
+					setChartHovered(false);
+					setHoveredBarIndex(null);
+					onBarHover(null);
+				}}
+			>
+				<XAxis
+					stroke={theme.palette.border.dark}
+					height={15}
+					tick={false}
+					label={
+						<CustomLabels
+							x={0}
+							y={0}
+							width="100%"
+							height="100%"
+							firstDataPoint={stats.upChecks[0]}
+							lastDataPoint={stats.upChecks[stats.upChecks.length - 1]}
+							type={type}
+						/>
+					}
+				/>
+				<Bar
+					dataKey="avgResponseTime"
+					maxBarSize={7}
+					background={{ fill: "transparent" }}
+				>
+					{stats.upChecks.map((entry, index) => {
+						let { main, light } = getColorRange(entry.avgResponseTime);
+						return (
+							<Cell
+								key={`cell-${entry.time}`}
+								fill={hoveredBarIndex === index ? main : chartHovered ? light : main}
+								onMouseEnter={() => {
+									setHoveredBarIndex(index);
+									onBarHover(entry);
+								}}
+								onMouseLeave={() => {
+									setHoveredBarIndex(null);
+									onBarHover({
+										time: null,
+										totalChecks: 0,
+										groupUptimePercentage: 0,
+									});
+								}}
+							/>
+						);
+					})}
+				</Bar>
+			</BarChart>
+		</ResponsiveContainer>
+	);
+});
+
+// Add display name for the component
+UpBarChart.displayName = "UpBarChart";
+
+// Validate props using PropTypes
+UpBarChart.propTypes = {
+	stats: PropTypes.shape({
+		upChecks: PropTypes.array,
+		upChecksAggregate: PropTypes.object,
+	}),
+	type: PropTypes.string,
+	onBarHover: PropTypes.func,
+};
+export default UpBarChart;

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

@@ -1,350 +0,0 @@
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
-import {
-	BarChart,
-	Bar,
-	XAxis,
-	ResponsiveContainer,
-	Cell,
-	RadialBarChart,
-	RadialBar,
-} from "recharts";
-import { memo, useMemo, useState } from "react";
-import { useSelector } from "react-redux";
-import { formatDateWithTz, toTimeStamp } from "../../../../Utils/timeUtils";
-
-const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => {
-	const uiTimezone = useSelector((state) => state.ui.timezone);
-	const formatString = type === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
-	const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
-
-	return (
-		<>
-			<text
-				x={x}
-				y={height}
-				dy={-3}
-				textAnchor="start"
-				fontSize={11}
-			>
-				{formatDateWithTz(
-					toTimeStamp(firstDataPoint._id, formatString),
-					dateFormat,
-					uiTimezone
-				)}
-			</text>
-			<text
-				x={width}
-				y={height}
-				dy={-3}
-				textAnchor="end"
-				fontSize={11}
-			>
-				{formatDateWithTz(
-					toTimeStamp(lastDataPoint._id, formatString),
-					dateFormat,
-					uiTimezone
-				)}
-			</text>
-		</>
-	);
-};
-
-CustomLabels.propTypes = {
-	x: PropTypes.number.isRequired,
-	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	firstDataPoint: PropTypes.object.isRequired,
-	lastDataPoint: PropTypes.object.isRequired,
-	type: PropTypes.string.isRequired,
-};
-
-const UpBarChart = memo(({ data, type, onBarHover }) => {
-	const theme = useTheme();
-
-	const [chartHovered, setChartHovered] = useState(false);
-	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
-
-	const getColorRange = (uptime) => {
-		return uptime > 0.8
-			? { main: theme.palette.success.main, light: theme.palette.success.light }
-			: uptime > 0.5
-				? { main: theme.palette.warning.main, light: theme.palette.warning.light }
-				: { main: theme.palette.error.contrastText, light: theme.palette.error.light };
-	};
-
-	// TODO - REMOVE THIS LATER
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			minWidth={210}
-			height={155}
-		>
-			<BarChart
-				width="100%"
-				height="100%"
-				data={data}
-				onMouseEnter={() => {
-					setChartHovered(true);
-					onBarHover({ time: null, totalChecks: 0, groupUptimePercentage: 0 });
-				}}
-				onMouseLeave={() => {
-					setChartHovered(false);
-					setHoveredBarIndex(null);
-					onBarHover(null);
-				}}
-			>
-				<XAxis
-					stroke={theme.palette.border.dark}
-					height={15}
-					tick={false}
-					label={
-						<CustomLabels
-							x={0}
-							y={0}
-							width="100%"
-							height="100%"
-							firstDataPoint={data[0]}
-							lastDataPoint={data[data.length - 1]}
-							type={type}
-						/>
-					}
-				/>
-				<Bar
-					dataKey="avgResponseTime"
-					maxBarSize={7}
-					background={{ fill: "transparent" }}
-				>
-					{data.map((entry, index) => {
-						let { main, light } = getColorRange(entry.groupUptimePercentage);
-						return (
-							<Cell
-								key={`cell-${entry.time}`}
-								fill={hoveredBarIndex === index ? main : chartHovered ? light : main}
-								onMouseEnter={() => {
-									setHoveredBarIndex(index);
-									onBarHover(entry);
-								}}
-								onMouseLeave={() => {
-									setHoveredBarIndex(null);
-									onBarHover({
-										time: null,
-										totalChecks: 0,
-										groupUptimePercentage: 0,
-									});
-								}}
-							/>
-						);
-					})}
-				</Bar>
-			</BarChart>
-		</ResponsiveContainer>
-	);
-});
-
-// Add display name for the component
-UpBarChart.displayName = "UpBarChart";
-
-// Validate props using PropTypes
-UpBarChart.propTypes = {
-	data: PropTypes.arrayOf(PropTypes.object),
-	type: PropTypes.string,
-	onBarHover: PropTypes.func,
-};
-export { UpBarChart };
-
-const DownBarChart = memo(({ data, type, onBarHover }) => {
-	const theme = useTheme();
-
-	const [chartHovered, setChartHovered] = useState(false);
-	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			minWidth={250}
-			height={155}
-		>
-			<BarChart
-				width="100%"
-				height="100%"
-				data={data}
-				onMouseEnter={() => {
-					setChartHovered(true);
-					onBarHover({ time: null, totalChecks: 0 });
-				}}
-				onMouseLeave={() => {
-					setChartHovered(false);
-					setHoveredBarIndex(null);
-					onBarHover(null);
-				}}
-			>
-				<XAxis
-					stroke={theme.palette.border.dark}
-					height={15}
-					tick={false}
-					label={
-						<CustomLabels
-							x={0}
-							y={0}
-							width="100%"
-							height="100%"
-							firstDataPoint={data?.[0] ?? {}}
-							lastDataPoint={data?.[data.length - 1] ?? {}}
-							type={type}
-						/>
-					}
-				/>
-				<Bar
-					dataKey="avgResponseTime"
-					maxBarSize={7}
-					background={{ fill: "transparent" }}
-				>
-					{data.map((entry, index) => (
-						<Cell
-							key={`cell-${entry.time}`}
-							fill={
-								hoveredBarIndex === index
-									? theme.palette.error.contrastText
-									: chartHovered
-										? theme.palette.error.light
-										: theme.palette.error.main
-							}
-							onMouseEnter={() => {
-								setHoveredBarIndex(index);
-								onBarHover(entry);
-							}}
-							onMouseLeave={() => {
-								setHoveredBarIndex(null);
-								onBarHover({ time: null, totalChecks: 0 });
-							}}
-						/>
-					))}
-				</Bar>
-			</BarChart>
-		</ResponsiveContainer>
-	);
-});
-
-DownBarChart.displayName = "DownBarChart";
-DownBarChart.propTypes = {
-	data: PropTypes.arrayOf(PropTypes.object),
-	type: PropTypes.string,
-	onBarHover: PropTypes.func,
-};
-export { DownBarChart };
-
-const ResponseGaugeChart = ({ avgResponseTime }) => {
-	const theme = useTheme();
-
-	let max = 1000; // max ms
-
-	const data = [
-		{ response: max, fill: "transparent", background: false },
-		{ response: avgResponseTime, background: true },
-	];
-	let responseTime = Math.floor(avgResponseTime);
-	let responseProps =
-		responseTime <= 200
-			? {
-					category: "Excellent",
-					main: theme.palette.success.main,
-					bg: theme.palette.success.contrastText,
-				}
-			: responseTime <= 500
-				? {
-						category: "Fair",
-						main: theme.palette.success.main,
-						bg: theme.palette.success.contrastText,
-					}
-				: responseTime <= 600
-					? {
-							category: "Acceptable",
-							main: theme.palette.warning.main,
-							bg: theme.palette.warning.dark,
-						}
-					: {
-							category: "Poor",
-							main: theme.palette.error.main,
-							bg: theme.palette.error.light,
-						};
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			minWidth={210}
-			height={155}
-		>
-			<RadialBarChart
-				width="100%"
-				height="100%"
-				cy="89%"
-				data={data}
-				startAngle={180}
-				endAngle={0}
-				innerRadius={100}
-				outerRadius={150}
-			>
-				<text
-					x={0}
-					y="100%"
-					dx="5%"
-					dy={-2}
-					textAnchor="start"
-					fontSize={11}
-				>
-					low
-				</text>
-				<text
-					x="100%"
-					y="100%"
-					dx="-3%"
-					dy={-2}
-					textAnchor="end"
-					fontSize={11}
-				>
-					high
-				</text>
-				<text
-					x="50%"
-					y="45%"
-					textAnchor="middle"
-					dominantBaseline="middle"
-					fontSize={18}
-					fontWeight={400}
-				>
-					{responseProps.category}
-				</text>
-				<text
-					x="50%"
-					y="55%"
-					textAnchor="middle"
-					dominantBaseline="hanging"
-					fontSize={25}
-				>
-					<tspan fontWeight={600}>{responseTime}</tspan> <tspan opacity={0.8}>ms</tspan>
-				</text>
-				<RadialBar
-					background={{ fill: responseProps.bg }}
-					clockWise
-					dataKey="response"
-					stroke="none"
-				>
-					<Cell
-						fill="transparent"
-						background={false}
-						barSize={0}
-					/>
-					<Cell fill={responseProps.main} />
-				</RadialBar>
-			</RadialBarChart>
-		</ResponsiveContainer>
-	);
-};
-
-ResponseGaugeChart.propTypes = {
-	data: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-export { ResponseGaugeChart };

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

@@ -17,7 +17,6 @@ import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import { ChartBox } from "./styled";
-import { DownBarChart, ResponseGaugeChart, UpBarChart } from "./Charts";
 import SkeletonLayout from "./skeleton";
 import "./index.css";
 import useUtils from "../utils";
@@ -26,7 +25,9 @@ import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import IconBox from "../../../Components/IconBox";
 import StatBox from "../../../Components/StatBox";
 import { toTimeStamp } from "../../../Utils/timeUtils";
-
+import UpBarChart from "./Charts/UpBarChart";
+import DownBarChart from "./Charts/DownBarChart";
+import ResponseGaugeChart from "./Charts/ResponseGaugeChart";
 /**
  * Details page component displaying monitor details and related information.
  * @component
@@ -54,7 +55,6 @@ const DetailsPage = () => {
 				dateRange: dateRange,
 				normalize: true,
 			});
-			console.log(res?.data?.data);
 			setMonitor(res?.data?.data ?? {});
 		} catch (error) {
 			logger.error(error);
@@ -105,10 +105,6 @@ const DetailsPage = () => {
 	const [hoveredUptimeData, setHoveredUptimeData] = useState(null);
 	const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null);
 
-	useEffect(() => {
-		console.log(hoveredUptimeData);
-	}, [hoveredUptimeData]);
-
 	const BREADCRUMBS = [
 		{ name: "uptime", path: "/uptime" },
 		{ name: "details", path: `/uptime/${monitorId}` },
@@ -226,17 +222,17 @@ const DetailsPage = () => {
 							<StatBox
 								sx={statusStyles[determineState(monitor)]}
 								heading={"active for"}
-								subHeading={splitDuration(monitor?.aggregateData?.uptimeDuration)}
+								subHeading={splitDuration(monitor?.stats?.timeSinceLastFalseCheck)}
 							/>
 							<StatBox
 								heading="last check"
-								subHeading={splitDuration(monitor?.aggregateData?.timeSinceLastCheck)}
+								subHeading={splitDuration(monitor?.stats?.timeSinceLastCheck)}
 							/>
 							<StatBox
 								heading="last response time"
 								subHeading={
 									<>
-										{monitor?.aggregateData?.latestResponseTime}
+										{monitor?.stats?.latestResponseTime}
 										<Typography component="span">{"ms"}</Typography>
 									</>
 								}
@@ -313,7 +309,7 @@ const DetailsPage = () => {
 											<Typography component="span">
 												{hoveredUptimeData !== null
 													? hoveredUptimeData.totalChecks
-													: (monitor.groupUpChecks[0]?.upChecksCount ?? 0)}
+													: (monitor.stats?.totalChecks ?? 0)}
 											</Typography>
 											{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
 												<Typography
@@ -335,20 +331,27 @@ const DetailsPage = () => {
 											)}
 										</Box>
 										<Box>
-											<Typography>Uptime Percentage</Typography>
+											<Typography>
+												{hoveredUptimeData !== null
+													? "Avg Response Time"
+													: "Uptime Percentage"}
+											</Typography>
 											<Typography component="span">
 												{hoveredUptimeData !== null
-													? Math.floor(hoveredUptimeData.groupUptimePercentage * 100)
+													? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
 													: Math.floor(
-															(monitor?.groupUpChecks[0]?.overallUptimePercentage ?? 0) *
+															((monitor?.stats?.upChecksAggregate.totalChecks ?? 0) /
+																(monitor?.stats?.totalChecks ?? 1)) *
 																100
 														)}
-												<Typography component="span">%</Typography>
+												<Typography component="span">
+													{hoveredUptimeData !== null ? " ms" : " %"}
+												</Typography>
 											</Typography>
 										</Box>
 									</Stack>
 									<UpBarChart
-										data={monitor?.groupUpChecks}
+										stats={monitor?.stats}
 										type={dateRange}
 										onBarHover={setHoveredUptimeData}
 									/>
@@ -365,7 +368,7 @@ const DetailsPage = () => {
 										<Typography component="span">
 											{hoveredIncidentsData !== null
 												? hoveredIncidentsData.totalChecks
-												: (monitor.groupDownChecks[0]?.downChecksCount ?? 0)}
+												: (monitor.stats?.downChecksAggregate.totalChecks ?? 0)}
 										</Typography>
 										{hoveredIncidentsData !== null &&
 											hoveredIncidentsData.time !== null && (
@@ -388,7 +391,7 @@ const DetailsPage = () => {
 											)}
 									</Box>
 									<DownBarChart
-										data={monitor?.groupDownChecks}
+										stats={monitor?.stats}
 										type={dateRange}
 										onBarHover={setHoveredIncidentsData}
 									/>
@@ -401,7 +404,7 @@ const DetailsPage = () => {
 										<Typography component="h2">Average Response Time</Typography>
 									</Stack>
 									<ResponseGaugeChart
-										avgResponseTime={monitor?.aggregateData?.averageResponseTime ?? 0}
+										avgResponseTime={monitor?.stats?.groupAggregate.avgResponseTime ?? 0}
 									/>
 								</ChartBox>
 								<ChartBox sx={{ padding: 0 }}>
@@ -414,7 +417,7 @@ const DetailsPage = () => {
 										</IconBox>
 										<Typography component="h2">Response Times</Typography>
 									</Stack>
-									{/* <MonitorDetailsAreaChart checks={[...monitor.checks].reverse()} /> */}
+									<MonitorDetailsAreaChart checks={monitor?.stats?.groupChecks ?? []} />
 								</ChartBox>
 								<ChartBox
 									gap={theme.spacing(8)}
@@ -435,10 +438,10 @@ const DetailsPage = () => {
 											History
 										</Typography>
 									</Stack>
-									{/* <PaginationTable
+									<PaginationTable
 										monitorId={monitorId}
 										dateRange={dateRange}
-									/> */}
+									/>
 								</ChartBox>
 							</Stack>
 						</Box>