Implemented score chart filter

Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx

@@ -45,7 +45,7 @@ const config = {
  * @returns {JSX.Element|null} The tooltip element or null if not active.
  */
 
-const CustomToolTip = ({ active, payload, label }) => {
+const CustomToolTip = ({ active, payload, label, config }) => {
   const theme = useTheme();
 
   if (active && payload && payload.length) {
@@ -213,13 +213,20 @@ CustomTick.propTypes = {
  * @returns {JSX.Element} The area chart component.
  */
 
-const PagespeedDetailsAreaChart = ({ data, interval }) => {
+const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
   const theme = useTheme();
   const memoizedData = useMemo(
     () => processDataWithGaps(data, interval),
-    [data]
+    [data[0]]
   );
 
+  const filteredConfig = Object.keys(config).reduce((result, key) => {
+    if (metrics[key]) {
+      result[key] = config[key];
+    }
+    return result;
+  }, {});
+
   return (
     <ResponsiveContainer width="100%" minWidth={25} height={215}>
       <AreaChart
@@ -247,10 +254,10 @@ const PagespeedDetailsAreaChart = ({ data, interval }) => {
         />
         <Tooltip
           cursor={{ stroke: theme.palette.border.light }}
-          content={<CustomToolTip />}
+          content={<CustomToolTip config={filteredConfig} />}
         />
         <defs>
-          {Object.values(config).map(({ id, color }) => {
+          {Object.values(filteredConfig).map(({ id, color }) => {
             const startColor = theme.palette[color].main;
             const endColor = theme.palette[color].light;
 
@@ -262,8 +269,8 @@ const PagespeedDetailsAreaChart = ({ data, interval }) => {
             );
           })}
         </defs>
-        {Object.keys(config).map((key) => {
-          const { color } = config[key];
+        {Object.keys(filteredConfig).map((key) => {
+          const { color } = filteredConfig[key];
           const strokeColor = theme.palette[color].main;
           const bgColor = theme.palette.background.main;
 
@@ -275,7 +282,7 @@ const PagespeedDetailsAreaChart = ({ data, interval }) => {
               stackId={1}
               stroke={strokeColor}
               strokeWidth={1.5}
-              fill={`url(#${config[key].id})`}
+              fill={`url(#${filteredConfig[key].id})`}
               activeDot={{ stroke: bgColor, fill: strokeColor, r: 4.5 }}
             />
           );

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -1,5 +1,12 @@
 import PropTypes from "prop-types";
-import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Divider,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
 import { useEffect, useState } from "react";
@@ -22,6 +29,7 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import PagespeedDetailsAreaChart from "./Charts/AreaChart";
 import "./index.css";
+import Checkbox from "../../../Components/Inputs/Checkbox";
 
 /**
  * Renders a centered label within a pie chart.
@@ -275,6 +283,16 @@ const PageSpeedDetails = () => {
     );
   };
 
+  const [metrics, setMetrics] = useState({
+    accessibility: true,
+    bestPractices: true,
+    performance: true,
+    seo: true,
+  });
+  const handleMetrics = (id) => {
+    setMetrics((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
+
   return (
     <Stack className="page-speed-details" gap={theme.spacing(10)}>
       {loading ? (
@@ -420,6 +438,7 @@ const PageSpeedDetails = () => {
                 <PagespeedDetailsAreaChart
                   data={data}
                   interval={monitor?.interval}
+                  metrics={metrics}
                 />
               </Box>
               <Box>
@@ -433,6 +452,48 @@ const PageSpeedDetails = () => {
                   </IconBox>
                   <Typography component="h2">Metrics</Typography>
                 </Stack>
+                <Stack
+                  gap={theme.spacing(4)}
+                  mt={theme.spacing(16)}
+                  sx={{
+                    "& label": { pl: theme.spacing(6) },
+                  }}
+                >
+                  <Box>
+                    <Typography fontSize={11} fontWeight={500}>
+                      Shown
+                    </Typography>
+                    <Divider sx={{ mt: theme.spacing(2) }} />
+                  </Box>
+                  <Checkbox
+                    id="accessibility-toggle"
+                    label="Accessibility"
+                    isChecked={metrics.accessibility}
+                    onChange={() => handleMetrics("accessibility")}
+                  />
+                  <Divider />
+                  <Checkbox
+                    id="best-practices-toggle"
+                    label="Best Practices"
+                    isChecked={metrics.bestPractices}
+                    onChange={() => handleMetrics("bestPractices")}
+                  />
+                  <Divider />
+                  <Checkbox
+                    id="performance-toggle"
+                    label="Performance"
+                    isChecked={metrics.performance}
+                    onChange={() => handleMetrics("performance")}
+                  />
+                  <Divider />
+                  <Checkbox
+                    id="seo-toggle"
+                    label="Search Engine Optimization"
+                    isChecked={metrics.seo}
+                    onChange={() => handleMetrics("seo")}
+                  />
+                  <Divider />
+                </Stack>
               </Box>
             </ChartBox>
           </Box>