Merge pull request #3191 from bluewave-labs/fix/pagespeed-tooltip

fix tooltip styling

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 = ({
 					</Typography>
 					{check?.originalResponseTime && (
 						<Typography>
-							Response Time: {check.originalResponseTime.toFixed()} ms
+							{t("common.labels.responseTime")}: {check.originalResponseTime.toFixed()} ms
 						</Typography>
 					)}
 
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}
-						<span style={{ color: getColor(check?.status) }}>{check?.status}</span>
+						<span style={{ color: getColor(check?.status) }}>
+							{check?.status === true
+								? t("pages.common.monitors.status.up")
+								: t("pages.common.monitors.status.down")}
+						</span>
 					</Typography>
 				</Stack>
 			}

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) => {

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<string | number, string>) => {
+}: TooltipProps<number, string>) => {
 	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 (
 		<Stack
-			alignItems={"flex-start"}
-			top={0}
-			left={0}
-			zIndex={10}
+			alignItems="flex-start"
 			sx={{
 				backgroundColor: theme.palette.secondary.main,
 				border: 1,
@@ -25,16 +30,10 @@ export const HistogramPageSpeedTooltip = ({
 				p: theme.spacing(4),
 			}}
 		>
-			<Typography color={theme.palette.primary.contrastText}>
-				{formatDateWithTz(
-					payload?.[0]?.payload?.date ?? 0,
-					"MMMM D, YYYY, HH:mm A",
-					uiTimezone
-				)}
-			</Typography>
-			<Typography color={theme.palette.primary.contrastText}>
-				Score: {payload?.[0]?.payload?.score}
+			<Typography>
+				{formatDateWithTz(data?.date, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)}
 			</Typography>
+			<Typography>Score: {data?.score}</Typography>
 		</Stack>
 	);
 };

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