From 7d66bb5668688a8702c44719c79af02737bc8985 Mon Sep 17 00:00:00 2001
From: mannilakash <mannilakash@gmail.com>
Date: Tue, 17 Feb 2026 10:27:22 -0500
Subject: [PATCH] fix: unnecessary custom styling and originalResponseTime
 usage

---
 .../common/charts/HistogramResponseTime.tsx   | 74 ++++++-------------
 1 file changed, 24 insertions(+), 50 deletions(-)

diff --git a/client/src/Components/v2/common/charts/HistogramResponseTime.tsx b/client/src/Components/v2/common/charts/HistogramResponseTime.tsx
index 75ae25001..1ef400daf 100644
--- a/client/src/Components/v2/common/charts/HistogramResponseTime.tsx
+++ b/client/src/Components/v2/common/charts/HistogramResponseTime.tsx
@@ -17,31 +17,23 @@ interface HistogramResponseTimeProps {
 }
 
 interface ResponseTimeStats {
-	max: number;
-	avg: number;
+	max: number | string;
+	avg: number | string;
 }
 
 const DEFAULT_HEIGHT = 50;
 
 const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats => {
 	if (!Array.isArray(checks) || checks.length === 0) {
-		return { max: 0, avg: 0 };
+		return { max: "-", avg: "-" };
 	}
 
-	const validChecks = checks.filter(
-		(check) =>
-			(check as any).status !== "placeholder" &&
-			(check.originalResponseTime != null || check.responseTime != null)
-	);
-
+	const validChecks = checks.filter((check) => check.originalResponseTime != null);
 	if (validChecks.length === 0) {
-		return { max: 0, avg: 0 };
+		return { max: "-", avg: "-" };
 	}
 
-	const responseTimes = validChecks.map(
-		(check) => check.originalResponseTime ?? check.responseTime ?? 0
-	);
-
+	const responseTimes = validChecks.map((check) => check.originalResponseTime);
 	const max = Math.max(...responseTimes);
 	const avg = Math.round(
 		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
@@ -72,48 +64,30 @@ export const HistogramResponseTime = ({
 	const chartHeight = typeof height === "number" ? `${height}px` : height;
 	const gridGap = gap ?? theme.spacing(0.5);
 
-	const statsContent = showStats && (stats.max > 0 || stats.avg > 0) && (
-		<Stack
-			justifyContent="center"
-			alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
-			sx={{
-				minWidth: 70,
-				pr: statsPosition === "left" ? theme.spacing(8) : 0,
-				pl: statsPosition === "right" ? theme.spacing(8) : 0,
-			}}
-		>
-			<Typography
-				variant="caption"
-				sx={{
-					color: theme.palette.text.secondary,
-					fontSize: "0.65rem",
-					fontWeight: 500,
-					pt: theme.spacing(2),
-				}}
+	const statsContent = showStats &&
+		(typeof stats.max === "number" || typeof stats.avg === "number") && (
+			<Stack
+				justifyContent="center"
+				alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
+				minWidth={70}
+				pr={statsPosition === "left" ? theme.spacing(8) : 0}
+				pl={statsPosition === "right" ? theme.spacing(8) : 0}
 			>
-				{t("common.charts.histogram.avg", { value: stats.avg })}
-			</Typography>
-			<Typography
-				variant="caption"
-				sx={{
-					color: theme.palette.text.secondary,
-					fontSize: "0.65rem",
-					fontWeight: 500,
-					pt: theme.spacing(2),
-				}}
-			>
-				{t("common.charts.histogram.max", { value: stats.max })}
-			</Typography>
-		</Stack>
-	);
+				<Typography variant="body2">
+					{t("common.charts.histogram.avg", { value: stats.avg })}
+				</Typography>
+				<Typography variant="body2">
+					{t("common.charts.histogram.max", { value: stats.max })}
+				</Typography>
+			</Stack>
+		);
 
 	return (
 		<Stack
-			direction="row"
+			direction={statsPosition === "left" ? "row-reverse" : "row"}
 			alignItems="center"
 			sx={{ width: "100%" }}
 		>
-			{statsPosition === "left" && statsContent}
 			<Box sx={{ flex: 1 }}>
 				<Box
 					sx={{
@@ -175,7 +149,7 @@ export const HistogramResponseTime = ({
 					})}
 				</Box>
 			</Box>
-			{statsPosition === "right" && statsContent}
+			{statsContent}
 		</Stack>
 	);
 };