diff --git a/client/src/Components/v2/common/charts/HeatmapResponseTimeTooltip.tsx b/client/src/Components/v2/common/charts/HeatmapResponseTimeTooltip.tsx index 448a60e49..7e9ae4470 100644 --- a/client/src/Components/v2/common/charts/HeatmapResponseTimeTooltip.tsx +++ b/client/src/Components/v2/common/charts/HeatmapResponseTimeTooltip.tsx @@ -6,7 +6,7 @@ import type { Check } from "@/Types/Check"; import { useTheme } from "@mui/material/styles"; import { useSelector } from "react-redux"; import type { RootState } from "@/Types/state"; - +import { useTranslation } from "react-i18next"; type HeatmapCheck = Check | { status: "placeholder"; responseTime: 0; createdAt: "" }; export const HeatmapResponseTimeTooltip = ({ @@ -16,6 +16,7 @@ export const HeatmapResponseTimeTooltip = ({ children: React.ReactElement; check: HeatmapCheck; }) => { + const { t } = useTranslation(); const uiTimezone = useSelector((state: RootState) => state.ui.timezone); const theme = useTheme(); @@ -54,13 +55,17 @@ export const HeatmapResponseTimeTooltip = ({ {check?.originalResponseTime && ( - Response Time: {check.originalResponseTime.toFixed()} ms + {t("common.labels.responseTime")}: {check.originalResponseTime.toFixed()} ms )} Status:{" "} - {check?.status} + + {check?.status === true + ? t("pages.common.monitors.status.up") + : t("pages.common.monitors.status.down")} + } diff --git a/client/src/Components/v2/monitors/charts/HistogramPageSpeed.tsx b/client/src/Components/v2/monitors/charts/HistogramPageSpeed.tsx index d8d3b9829..1bcceebd1 100644 --- a/client/src/Components/v2/monitors/charts/HistogramPageSpeed.tsx +++ b/client/src/Components/v2/monitors/charts/HistogramPageSpeed.tsx @@ -1,7 +1,6 @@ import Stack from "@mui/material/Stack"; import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts"; import { HistogramPageSpeedTooltip } from "@/Components/v2/monitors/charts/HistogramPageSpeedTooltip"; - import { useTheme } from "@mui/material/styles"; import type { Check } from "@/Types/Check"; import type { MonitorStatus } from "@/Types/Monitor"; @@ -17,7 +16,7 @@ const processData = (checks: Check[]) => { const bestPractices = entry?.bestPractices || 0; const performance = entry?.performance || 0; const seo = entry?.seo || 0; - return Math.floor(((accessibility + bestPractices + performance + seo) / 4) * 100); + return Math.floor((accessibility + bestPractices + performance + seo) / 4); }; checks.forEach((entry) => { diff --git a/client/src/Components/v2/monitors/charts/HistogramPageSpeedTooltip.tsx b/client/src/Components/v2/monitors/charts/HistogramPageSpeedTooltip.tsx index 6fd18251c..28d43a66e 100644 --- a/client/src/Components/v2/monitors/charts/HistogramPageSpeedTooltip.tsx +++ b/client/src/Components/v2/monitors/charts/HistogramPageSpeedTooltip.tsx @@ -7,16 +7,21 @@ import { useSelector } from "react-redux"; import type { RootState } from "@/Types/state"; export const HistogramPageSpeedTooltip = ({ + active, payload, -}: TooltipProps) => { +}: TooltipProps) => { const uiTimezone = useSelector((state: RootState) => state.ui.timezone); const theme = useTheme(); + + if (!active || !payload || payload.length === 0) { + return null; + } + + const data = payload[0]?.payload; + return ( - - {formatDateWithTz( - payload?.[0]?.payload?.date ?? 0, - "MMMM D, YYYY, HH:mm A", - uiTimezone - )} - - - Score: {payload?.[0]?.payload?.score} + + {formatDateWithTz(data?.date, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)} + Score: {data?.score} ); }; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index d8d5c84a1..7386ced7d 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -2,6 +2,9 @@ "common": { "appName": "Checkmate", "monitoringAgentName": "Capture", + "labels": { + "responseTime": "Response time" + }, "buttons": { "toggleTheme": "Toggles light & dark", "testNotifications": "Test notifications",