fix: changes fixing type errors and adding colorFn comment

client/src/Components/design-elements/Gauge.tsx

@@ -3,7 +3,7 @@ import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
-import { useTheme } from "@mui/material/styles";
+import { useTheme, type Theme } from "@mui/material/styles";
 import { useMemo, useState, useEffect } from "react";
 import { getInfraGaugeColor } from "@/Utils/MonitorUtils";
 
@@ -17,6 +17,9 @@ export const Gauge = ({
 	strokeWidth = 15,
 	precision = 1,
 	unit = "%",
+	// colorFn lets callers override the default color logic.
+	// The Gauge was originally designed for metrics where higher values are worse (e.g., CPU usage).
+	// PageSpeed scores are the opposite—higher is better—so a custom colorFn can be used to invert the behavior.
 	colorFn,
 }: {
 	isLoading?: boolean;
@@ -25,7 +28,7 @@ export const Gauge = ({
 	strokeWidth?: number;
 	precision?: number;
 	unit?: string;
-	colorFn?: (val: number, theme: any) => string;
+	colorFn?: (val: number, theme: Theme) => string;
 }) => {
 	const theme = useTheme();
 	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));