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",