pagespeed

client/src/components/design-elements/Table.tsx

@@ -96,7 +96,7 @@ export function DataTable<
                 return (
                   <Grid container key={header.id}>
                     <Grid size={3} display={"flex"} alignItems={"center"}>
-                      <Typography color={theme.palette.text.primary}>
+                      <Typography component="div" color={theme.palette.text.primary}>
                         {header.content}
                       </Typography>
                     </Grid>

client/src/components/monitors/ChartPageSpeedReport.tsx

@@ -2,9 +2,12 @@ import { BaseChart } from "@/components/monitors/Chart";
 import { FileText } from "lucide-react";
 import { Pie, PieChart, ResponsiveContainer, Label } from "recharts";
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 import { getPageSpeedPalette } from "@/utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
 import { alpha } from "@mui/material/styles";
+import { useState } from "react";
+import Tooltip from "@mui/material/Tooltip";
 
 const CenterLabel = ({ viewBox, value }: any) => {
   const { cx, cy } = viewBox;
@@ -19,6 +22,15 @@ const CenterLabel = ({ viewBox, value }: any) => {
 
 export const ChartPageSpeedReport = ({ latestCheck }: { latestCheck: any }) => {
   const theme = useTheme();
+  const [hoverTitle, setHoverTitle] = useState<string | null>(null);
+
+  const LABELS: Record<string, string> = {
+    FCP: "First Contentful Paint",
+    SI: "Speed Index",
+    LCP: "Largest Contentful Paint",
+    TBT: "Total Blocking Time",
+    CLS: "Cumulative Layout Shift",
+  };
   const metrics = [
     { key: "fcp", color: alpha("#1DE9B6", 0.6), weight: 0.1 },
     { key: "si", color: alpha("#7C4DFF", 0.6), weight: 0.1 },
@@ -60,33 +72,71 @@ export const ChartPageSpeedReport = ({ latestCheck }: { latestCheck: any }) => {
   const score = [
     {
       value: 100,
-      fill: alpha(
-        theme.palette[pageSpeedPalette].light || "#ffffff",
-        0.6
-      ),
+      fill: alpha(theme.palette[pageSpeedPalette].light || "#ffffff", 0.6),
       stroke: "none",
     },
   ];
 
   return (
-    <BaseChart icon={<FileText size={20} strokeWidth={1.5} />} title="Average PageSpeed score">
-      <ResponsiveContainer width="100%" height={250}>
-        <PieChart>
-          <Pie data={score} dataKey="value" cx="50%" cy="50%" outerRadius="65%">
-            <Label
-              position={"center"}
-              content={<CenterLabel value={Math.floor(totalScore * 100)} />}
-            />
-          </Pie>
-          <Pie
-            data={scores}
-            innerRadius="70%"
-            outerRadius="80%"
-            label={({ name, value }) => `${name}: ${Math.round(value)}`}
-            dataKey="value"
-          />
-        </PieChart>
-      </ResponsiveContainer>
+    <BaseChart
+      icon={<FileText size={20} strokeWidth={1.5} />}
+      title="Average PageSpeed score"
+    >
+      <Tooltip
+        open={Boolean(hoverTitle)}
+        title={hoverTitle || ""}
+        arrow
+        followCursor
+        placement="top"
+      >
+        <Box
+          sx={{
+            "& .recharts-wrapper:focus, & .recharts-surface:focus": {
+              outline: "none",
+            },
+            "& .recharts-wrapper *:focus": { outline: "none" },
+            "& svg:focus, & g:focus, & path:focus": { outline: "none" },
+            position: "relative",
+          }}
+        >
+          <ResponsiveContainer width="100%" height={250}>
+            <PieChart>
+              <Pie
+                data={score}
+                dataKey="value"
+                cx="50%"
+                cy="50%"
+                outerRadius="65%"
+              >
+                <Label
+                  position={"center"}
+                  content={<CenterLabel value={Math.floor(totalScore * 100)} />}
+                />
+              </Pie>
+              <Pie
+                data={scores}
+                innerRadius="70%"
+                outerRadius="80%"
+                label={({ name, value }) => `${name}: ${Math.round(value)}`}
+                dataKey="value"
+                stroke="none"
+                onMouseEnter={(_, index: number) => {
+                  const d = scores[index];
+                  if (!d) return;
+                  const isInverse = String(d.name).includes("Inverse");
+                  const pair =
+                    isInverse && scores[index + 1] ? scores[index + 1] : d;
+                  const base = String(pair.name).replace(" Inverse", "");
+                  const full = LABELS[base] ?? base;
+                  const displayVal = Math.round(Number(pair.value) || 0);
+                  setHoverTitle(`${full}: ${displayVal}`);
+                }}
+                onMouseLeave={() => setHoverTitle(null)}
+              />
+            </PieChart>
+          </ResponsiveContainer>
+        </Box>
+      </Tooltip>
     </BaseChart>
   );
 };

client/src/components/monitors/HistogramPageSpeedScoresTooltip.tsx

@@ -24,7 +24,7 @@ export const HistogramPageSpeedScoresTooltip = ({
     return (
       <Box
         sx={{
-          backgroundColor: theme.palette.primary.main,
+          backgroundColor: theme.palette.background.paper,
           border: 1,
           borderColor: theme.palette.divider,
           borderRadius: theme.shape.borderRadius,