TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tooltips

Browse Source
This commit is contained in:
Alex Holliday committed 2026-07-31 11:41:18 -07:00
1 parent ac251c4d3f
commit 98e0ffc983
3 files changed
+32 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx
+28
View File
@@ -0,0 +1,28 @@
import type { CheckSnapshot } from "@/Types/Check";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import prettyMilliseconds from "pretty-ms";
import { formatDateWithTz } from "@/Utils/TimeUtils";
import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
const { timezone } = useStatusPageTheme();
return (
<Stack gap={0.25}>
<Typography
variant="caption"
fontWeight={600}
>
{check.status
? `${prettyMilliseconds(check.responseTime, { compact: true })}`
: t("pages.statusPages.monitorsList.chart.downTooltip")}
</Typography>
<Typography
variant="caption"
sx={{ opacity: 0.8 }}
>
{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
</Typography>
</Stack>
);
};
client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx
+2 -18
View File
@@ -9,6 +9,7 @@ import { formatDateWithTz } from "@/Utils/TimeUtils";
import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
import { useStatusPageTheme } from "../StatusPageThemeProvider";
import prettyMilliseconds from "pretty-ms";
import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
const CELLS = MAX_RECENT_CHECKS;
@@ -54,24 +55,7 @@ export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
);
}
const kind = classify(check);
const tooltipContent = (
<Stack gap={0.25}>
<Typography
variant="caption"
fontWeight={600}
>
{check.status
? `${prettyMilliseconds(check.responseTime, { compact: true })}`
: t("pages.statusPages.monitorsList.chart.downTooltip")}
</Typography>
<Typography
variant="caption"
sx={{ opacity: 0.8 }}
>
{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
</Typography>
</Stack>
);
const tooltipContent = <ThemedChartTooltip check={check} />;
return (
<Tooltip
key={check.id ?? i}
client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx
+2 -22
View File
@@ -11,6 +11,7 @@ import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
import { useStatusPageTheme } from "../StatusPageThemeProvider";
import { computeBarHeights } from "@/Utils/DataUtils";
import prettyMilliseconds from "pretty-ms";
import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
const CELLS = MAX_RECENT_CHECKS;
const MIN_HEIGHT_PCT = 6;
@@ -65,28 +66,7 @@ export const ThemedHistogram = ({
);
}
const height = heights[i] ?? MIN_HEIGHT_PCT;
const tooltipContent = (
<Stack gap={0.25}>
<Typography
variant="caption"
fontWeight={600}
>
{check.status
? `${prettyMilliseconds(check.responseTime, { compact: true })}`
: t("pages.statusPages.monitorsList.chart.downTooltip")}
</Typography>
<Typography
variant="caption"
sx={{ opacity: 0.8 }}
>
{formatDateWithTz(
check.createdAt,
"ddd, MMMM D, YYYY, HH:mm A",
timezone
)}
</Typography>
</Stack>
);
const tooltipContent = <ThemedChartTooltip check={check} />;
return (
<Tooltip
key={check.id ?? i}