From 88dc2f409649a1cc4d50ba23bdbc1bc2676cc064 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 18 Dec 2025 12:57:05 -0800
Subject: [PATCH] format x-axis

---
 .../src/components/monitors/HistogramPageSpeedScores.tsx  | 8 +++++++-
 client/src/pages/pagespeed/PageSpeedDetails.tsx           | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/monitors/HistogramPageSpeedScores.tsx b/client/src/components/monitors/HistogramPageSpeedScores.tsx
index 6bc5ca19b..8e8d410de 100644
--- a/client/src/components/monitors/HistogramPageSpeedScores.tsx
+++ b/client/src/components/monitors/HistogramPageSpeedScores.tsx
@@ -1,5 +1,6 @@
 import { BaseChart } from "@/components/monitors/Chart";
 import { TrendingUp } from "lucide-react";
+import { XTick } from "./ChartResponseTime";
 import {
   XAxis,
   AreaChart,
@@ -49,8 +50,10 @@ const config: Record<string, ConfigItem> = {
 
 export const HistogramPageSpeedScores = ({
   checks,
+  range,
 }: {
   checks: GroupedCheck[];
+  range: string;
 }) => {
   const theme = useTheme();
   return (
@@ -60,7 +63,10 @@ export const HistogramPageSpeedScores = ({
     >
       <ResponsiveContainer width="100%" minWidth={25} height={215}>
         <AreaChart data={checks}>
-          <XAxis dataKey={"_id"} />
+          <XAxis
+            dataKey={"_id"}
+            tick={(props) => <XTick {...props} range={range} />}
+          />
           <CartesianGrid
             stroke={theme.palette.divider}
             strokeWidth={1}
diff --git a/client/src/pages/pagespeed/PageSpeedDetails.tsx b/client/src/pages/pagespeed/PageSpeedDetails.tsx
index ca2bb1409..8f79c3ef0 100644
--- a/client/src/pages/pagespeed/PageSpeedDetails.tsx
+++ b/client/src/pages/pagespeed/PageSpeedDetails.tsx
@@ -87,7 +87,7 @@ const PageSpeedDetailsPage = () => {
         />
       </Stack>
       <HeaderRange loading={isValidating} range={range} setRange={setRange} />
-      <HistogramPageSpeedScores checks={checks} />
+      <HistogramPageSpeedScores checks={checks} range={range} />
       <Stack direction={isSmall ? "column" : "row"} gap={theme.spacing(10)}>
         <ChartPageSpeedReport latestCheck={checks?.[0]} />
         <ChartPageSpeedReportLegend latestCheck={checks?.[0]} />