fe

client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx

@@ -12,7 +12,7 @@ import {
 import { HistogramPageSpeedScoresTooltip } from "@/Components/monitors";
 
 import { useTheme } from "@mui/material/styles";
-import type { CheckSnapshot } from "@/Types/Check";
+import type { PageSpeedGroupedCheck } from "@/Types/Check";
 import type { Palette } from "@mui/material/styles";
 type PaletteColorKey = Extract<
 	keyof Palette,
@@ -52,7 +52,7 @@ export const HistogramPageSpeedDetails = ({
 	checks,
 	range,
 }: {
-	checks: CheckSnapshot[];
+	checks: PageSpeedGroupedCheck[];
 	range: string;
 }) => {
 	const theme = useTheme();
@@ -73,7 +73,7 @@ export const HistogramPageSpeedDetails = ({
 			>
 				<AreaChart data={checks}>
 					<XAxis
-						dataKey={"createdAt"}
+						dataKey={"bucketDate"}
 						tick={(props) => (
 							<XTick
 								{...props}

client/src/Pages/PageSpeed/Details/index.tsx

@@ -42,7 +42,8 @@ const PageSpeedDetails = () => {
 		{ keepPreviousData: true, refreshInterval: 30000 }
 	);
 
-	const monitor = monitorData?.monitor;
+	const monitor = monitorData?.monitorData?.monitor;
+	const groupedChecks = monitorData?.monitorData?.groupedChecks || [];
 	const monitorStats = monitorData?.monitorStats || null;
 
 	return (
@@ -67,7 +68,7 @@ const PageSpeedDetails = () => {
 				setDateRange={setDateRange}
 			/>
 			<HistogramPageSpeedDetails
-				checks={monitor?.recentChecks || []}
+				checks={groupedChecks}
 				range={dateRange}
 			/>
 			<Stack

client/src/Types/Check.ts

@@ -151,6 +151,15 @@ export interface GroupedCheck {
 	totalChecks: number;
 }
 
+export interface PageSpeedGroupedCheck {
+	bucketDate: string;
+	performance: number;
+	accessibility: number;
+	bestPractices: number;
+	seo: number;
+	totalChecks: number;
+}
+
 export interface LatestCheck {
 	status: boolean;
 	responseTime: number;

client/src/Types/Monitor.ts

@@ -1,4 +1,5 @@
 import type { GroupedCheck, CheckSnapshot } from "@/Types/Check";
+import type { PageSpeedGroupedCheck } from "@/Types/Check";
 
 export const MonitorTypes = [
 	"http",
@@ -112,7 +113,10 @@ export interface MonitorDetailsResponse {
 }
 
 export interface PageSpeedDetailsResponse {
-	monitor: MonitorWithChecks;
+	monitorData: {
+		monitor: Monitor;
+		groupedChecks: PageSpeedGroupedCheck[];
+	};
 	monitorStats: MonitorStats | null;
 }