cap values at p95 on client

client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx

@@ -7,6 +7,7 @@ import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { useTranslation } from "react-i18next";
+import prettyMilliseconds from "pretty-ms";
 
 type HeatmapCheck =
 	| CheckSnapshot
@@ -58,7 +59,9 @@ export const HeatmapResponseTimeTooltip = ({
 					</Typography>
 					<Typography>
 						{t("common.labels.responseTime")}:{" "}
-						{check?.originalResponseTime?.toFixed() ?? "N/A"} ms
+						{check?.responseTime
+							? prettyMilliseconds(check.responseTime, { compact: true })
+							: "N/A"}
 					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}

client/src/Components/common/charts/HistogramResponseTime.tsx

@@ -8,6 +8,7 @@ import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+import { computeBarHeights } from "@/Utils/DataUtils";
 
 interface HistogramResponseTimeProps {
 	checks: CheckSnapshot[];
@@ -29,12 +30,12 @@ const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats
 		return { max: "-", avg: "-" };
 	}
 
-	const validChecks = checks.filter((check) => check.originalResponseTime != null);
+	const validChecks = checks.filter((check) => check.responseTime != null);
 	if (validChecks.length === 0) {
 		return { max: "-", avg: "-" };
 	}
 
-	const responseTimes = validChecks.map((check) => check.originalResponseTime);
+	const responseTimes = validChecks.map((check) => check.responseTime);
 	const max = Math.round(Math.max(...responseTimes));
 	const avg = Math.round(
 		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
@@ -54,7 +55,7 @@ export const HistogramResponseTime = ({
 	const { t } = useTranslation();
 
 	const stats = useMemo(() => calculateResponseTimeStats(checks), [checks]);
-
+	const barHeights = useMemo(() => computeBarHeights(checks), [checks]);
 	if (!Array.isArray(checks) || checks.length === 0) return null;
 
 	const data =
@@ -111,7 +112,7 @@ export const HistogramResponseTime = ({
 				>
 					{data.map((check, index) => {
 						const isPlaceholder = (check as any).status === "placeholder";
-						const heightPct = `${Math.max(0, Math.min(100, (check as any).responseTime ?? 0))}%`;
+						const heightPct = `${barHeights[index] ?? 0}%`;
 						const barColor =
 							check.status === true
 								? theme.palette.success.light

client/src/Pages/Settings/DummyChart.tsx

@@ -13,13 +13,12 @@ const generateDummyChecks = (): CheckSnapshot[] => {
 	const checks: CheckSnapshot[] = [];
 	for (let i = 0; i < MAX_RECENT_CHECKS; i++) {
 		const isUp = Math.random() > 0.1;
-		const responseTime = Math.floor(Math.random() * 80) + 20;
+		const responseTime = Math.floor(Math.random() * 800) + 20;
 		checks.push({
 			id: `dummy-${i}`,
 			status: isUp,
 			statusCode: isUp ? 200 : 500,
 			responseTime: responseTime,
-			originalResponseTime: responseTime,
 			message: "",
 			createdAt: new Date(Date.now() - i * 60000).toISOString(),
 		});

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

@@ -29,7 +29,7 @@ import {
 import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
 import { formatPercentage } from "@/Utils/FormatUtils";
 
-type StatusPageMonitor = Monitor & { checks?: Monitor["recentChecks"] };
+type StatusPageMonitor = Monitor;
 
 export interface BaseStyles {
 	page: SxProps<Theme>;

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

@@ -8,6 +8,7 @@ import type { CheckSnapshot } from "@/Types/Check";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { useStatusPageTheme } from "../StatusPageThemeProvider";
+import prettyMilliseconds from "pretty-ms";
 
 const CELLS = MAX_RECENT_CHECKS;
 
@@ -60,7 +61,7 @@ export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
 							fontWeight={600}
 						>
 							{check.status
-								? `${check.responseTime} ms`
+								? `${prettyMilliseconds(check.responseTime, { compact: true })}`
 								: t("pages.statusPages.monitorsList.chart.downTooltip")}
 						</Typography>
 						<Typography

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

@@ -9,6 +9,8 @@ import type { CheckSnapshot } from "@/Types/Check";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { useStatusPageTheme } from "../StatusPageThemeProvider";
+import { computeBarHeights } from "@/Utils/DataUtils";
+import prettyMilliseconds from "pretty-ms";
 const CELLS = MAX_RECENT_CHECKS;
 const MIN_HEIGHT_PCT = 6;
 
@@ -35,18 +37,19 @@ export const ThemedHistogram = ({
 	const { t } = useTranslation();
 	const { timezone } = useStatusPageTheme();
 
-	const { padded, max, avg, peak } = useMemo(() => {
+	const { padded, heights, avg, peak } = useMemo(() => {
 		const source = checks.slice(-CELLS);
 		const out: (CheckSnapshot | null)[] = [
 			...source,
 			...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
 		];
+		const heights = computeBarHeights(source);
 		const valid = out.filter((c): c is CheckSnapshot => c !== null && c.responseTime > 0);
 		const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 1;
 		const avgRt = valid.length
 			? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length)
 			: 0;
-		return { padded: out, max: maxRt, avg: avgRt, peak: valid.length ? maxRt : 0 };
+		return { padded: out, heights, avg: avgRt, peak: maxRt };
 	}, [checks]);
 
 	return (
@@ -61,10 +64,7 @@ export const ThemedHistogram = ({
 							/>
 						);
 					}
-					const height = Math.max(
-						MIN_HEIGHT_PCT,
-						Math.round((check.responseTime / max) * 100)
-					);
+					const height = heights[i] ?? MIN_HEIGHT_PCT;
 					const tooltipContent = (
 						<Stack gap={0.25}>
 							<Typography
@@ -72,7 +72,7 @@ export const ThemedHistogram = ({
 								fontWeight={600}
 							>
 								{check.status
-									? `${check.responseTime} ms`
+									? `${prettyMilliseconds(check.responseTime, { compact: true })}`
 									: t("pages.statusPages.monitorsList.chart.downTooltip")}
 							</Typography>
 							<Typography

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

@@ -18,7 +18,7 @@ export interface InfraSx {
 }
 
 interface Props {
-	monitor: Monitor & { checks?: Monitor["recentChecks"] };
+	monitor: Monitor;
 	sxApi: InfraSx;
 }
 
@@ -36,7 +36,7 @@ const heatLevel = (value: number): GaugeFillLevel =>
 
 export const ThemedInfrastructure = ({ monitor, sxApi }: Props) => {
 	const { t } = useTranslation();
-	const latest = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
+	const latest = monitor.recentChecks?.[0];
 
 	const renderEmpty = () => (
 		<Box sx={sxApi.emptySx}>{t("pages.statusPages.monitorsList.noData")}</Box>

client/src/Types/Check.ts

@@ -250,14 +250,7 @@ export interface ChecksSummary {
 	downChecks: number;
 }
 
-export type CheckSnapshot = Omit<Check, "metadata" | "__v" | "updatedAt"> & {
-	originalResponseTime: number;
-};
-
+export type CheckSnapshot = Omit<Check, "metadata" | "__v" | "updatedAt">;
 export interface HasResponseTime {
 	responseTime: number;
 }
-
-export type NormalizedCheck<T extends HasResponseTime = Check> = T & {
-	originalResponseTime: number;
-};

client/src/Utils/DataUtils.ts

@@ -1,47 +1,3 @@
-const MIN_OUT = 10;
-const MAX_OUT = 100;
-
-export const normalizeResponseTimes = <T, K extends keyof T>(
-	checks: T[],
-	key: K
-): (T & { normalResponseTime: number })[] => {
-	if (!Array.isArray(checks) || checks.length === 0)
-		return checks as (T & {
-			normalResponseTime: number;
-		})[];
-
-	if (checks.length === 1) {
-		return [
-			{
-				...checks[0],
-				normalResponseTime: 50,
-			},
-		];
-	}
-
-	const getVal = (check: T): number => {
-		const v = check[key] as unknown;
-		return typeof v === "number" && Number.isFinite(v) ? v : 0;
-	};
-
-	const { min, max } = checks.reduce(
-		(acc, check) => {
-			const v = getVal(check);
-			if (v > acc.max) acc.max = v;
-			if (v < acc.min) acc.min = v;
-			return acc;
-		},
-		{ max: -Infinity, min: Infinity }
-	);
-
-	const range = max - min || 1;
-
-	return checks.map((check) => ({
-		...check,
-		normalResponseTime: MIN_OUT + ((getVal(check) - min) * (MAX_OUT - MIN_OUT)) / range,
-	}));
-};
-
 // Interpolate color between three theme colors over 0-100 range.
 // 0-50 => start (success.light), 50-75 => mid (warning.light), 75-100 => end (error.light)
 export const getResponseColor = (
@@ -129,3 +85,32 @@ export const getResponseColor = (
 	}
 	return normalizeToHex(safe.end);
 };
+
+const MIN_HEIGHT_PCT = 8;
+const CAP_PERCENTILE = 95;
+
+const percentile = (sortedValues: number[], p: number): number => {
+	const index = (p / 100) * (sortedValues.length - 1);
+	const lower = Math.floor(index);
+	const upper = lower + 1;
+	const weight = index % 1;
+	if (upper >= sortedValues.length) return sortedValues[lower];
+	return sortedValues[lower] * (1 - weight) + sortedValues[upper] * weight;
+};
+
+export const computeBarHeights = (
+	checks: { responseTime?: number | null }[]
+): number[] => {
+	const values = checks.map((check) => {
+		return typeof check.responseTime === "number" && Number.isFinite(check.responseTime)
+			? Math.max(0, check.responseTime)
+			: 0;
+	});
+
+	const sorted = values.slice().sort((a, b) => a - b);
+	const cap = percentile(sorted, CAP_PERCENTILE);
+	if (cap <= 0) return values.map(() => MIN_HEIGHT_PCT);
+	return values.map((value) => {
+		return Math.max(MIN_HEIGHT_PCT, Math.min(100, (value / cap) * 100));
+	});
+};