Increase max recent checks limit from 25 -> 50, extract constants

client/src/Pages/Settings/DummyChart.tsx

@@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { HeatmapResponseTime, HistogramResponseTime } from "@/Components/common";
 import type { CheckSnapshot } from "@/Types/Check";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 interface DummyChartProps {
 	chartType: string;
@@ -10,7 +11,7 @@ interface DummyChartProps {
 
 const generateDummyChecks = (): CheckSnapshot[] => {
 	const checks: CheckSnapshot[] = [];
-	for (let i = 0; i < 25; i++) {
+	for (let i = 0; i < MAX_RECENT_CHECKS; i++) {
 		const isUp = Math.random() > 0.1;
 		const responseTime = Math.floor(Math.random() * 80) + 20;
 		checks.push({

client/src/Pages/StatusPage/Status/themes/bold/styles.ts

@@ -2,6 +2,7 @@ import type { SxProps, Theme } from "@mui/material/styles";
 import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty";
 export type BoldBarKind = "up" | "down" | "empty";
@@ -297,7 +298,7 @@ export const boldStyles = (
 		heatmap: {
 			padding: "0 28px 22px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "3px",
 			height: 48,
 		},
@@ -313,7 +314,7 @@ export const boldStyles = (
 		histogram: {
 			padding: "0 28px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "3px",
 			alignItems: "flex-end",
 			height: 48,

client/src/Pages/StatusPage/Status/themes/editorial/styles.ts

@@ -6,6 +6,7 @@ import {
 	MONO_STACK,
 	SERIF_STACK,
 } from "../shared/fontStacks";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty";
 export type EditorialBarKind = "up" | "down" | "empty";
@@ -245,7 +246,7 @@ export const editorialStyles = (tokens: StatusPageThemeTokens): EditorialStyles
 		heatmap: {
 			mt: "16px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "2px",
 			height: 40,
 		},
@@ -257,7 +258,7 @@ export const editorialStyles = (tokens: StatusPageThemeTokens): EditorialStyles
 		histogram: {
 			mt: "16px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "2px",
 			alignItems: "flex-end",
 			height: 40,

client/src/Pages/StatusPage/Status/themes/modern/styles.ts

@@ -3,6 +3,7 @@ import { keyframes } from "@mui/system";
 import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty";
 export type ModernBarKind = "up" | "down" | "empty";
@@ -320,7 +321,7 @@ export const modernStyles = (
 		heatmap: {
 			padding: "0 24px 20px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "3px",
 			height: 46,
 		},
@@ -335,7 +336,7 @@ export const modernStyles = (
 		histogram: {
 			padding: "0 24px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "3px",
 			alignItems: "flex-end",
 			height: 46,

client/src/Pages/StatusPage/Status/themes/refined/styles.ts

@@ -6,6 +6,7 @@ import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 export type RefinedHeatCell = "fast" | "med" | "slow" | "down" | "empty";
 export type RefinedBarKind = "up" | "down" | "empty";
 export type RefinedGaugeFill = "ok" | "warm" | "hot";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 export interface RefinedStyles {
 	page: SxProps<Theme>;
@@ -259,7 +260,7 @@ export const refinedStyles = (tokens: StatusPageThemeTokens): RefinedStyles => {
 		heatmap: {
 			padding: "0 20px 16px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "3px",
 			height: 42,
 		},
@@ -274,7 +275,7 @@ export const refinedStyles = (tokens: StatusPageThemeTokens): RefinedStyles => {
 		histogram: {
 			padding: "0 20px",
 			display: "grid",
-			gridTemplateColumns: "repeat(25, 1fr)",
+			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 			gap: "3px",
 			alignItems: "flex-end",
 			height: 42,

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -8,8 +8,9 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/store";
 import type { CheckSnapshot } from "@/Types/Check";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-const CELLS = 25;
+const CELLS = MAX_RECENT_CHECKS;
 
 export type HeatCellKind = "fast" | "med" | "slow" | "down" | "empty";
 

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -9,8 +9,8 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/store";
 import type { CheckSnapshot } from "@/Types/Check";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
-
-const CELLS = 25;
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+const CELLS = MAX_RECENT_CHECKS;
 const MIN_HEIGHT_PCT = 6;
 
 export type BarKind = "up" | "down" | "empty";