From f2c88cfd23e45691d5da45d20379a14e3b94c098 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 21 Feb 2026 21:05:51 +0000
Subject: [PATCH] fe

---
 .../monitors/charts/HistogramPageSpeedDetails.tsx        | 6 +++---
 client/src/Pages/PageSpeed/Details/index.tsx             | 5 +++--
 client/src/Types/Check.ts                                | 9 +++++++++
 client/src/Types/Monitor.ts                              | 6 +++++-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx b/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx
index 8df491197..f89994437 100644
--- a/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx
+++ b/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}
diff --git a/client/src/Pages/PageSpeed/Details/index.tsx b/client/src/Pages/PageSpeed/Details/index.tsx
index f7b647e15..48a9ba99c 100644
--- a/client/src/Pages/PageSpeed/Details/index.tsx
+++ b/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
diff --git a/client/src/Types/Check.ts b/client/src/Types/Check.ts
index f204ab2ca..c69fe7972 100644
--- a/client/src/Types/Check.ts
+++ b/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;
diff --git a/client/src/Types/Monitor.ts b/client/src/Types/Monitor.ts
index dab6dd734..636e632e2 100644
--- a/client/src/Types/Monitor.ts
+++ b/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;
 }