mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-05-19 07:58:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: unnecessary custom styling and originalResponseTime usage

Browse Source
This commit is contained in:
mannilakash
2026-02-17 10:27:22 -05:00
parent 566fded55c
commit 7d66bb5668
1 changed files with 24 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/Components/v2/common/charts/HistogramResponseTime.tsx
+24 -50
View File
@@ -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>
);
};