From b0a3f1fe525f4cb53fb0bcd21db8dcc93a737187 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 6 Aug 2024 13:39:24 -0400
Subject: [PATCH] Initial changes

---
 Client/src/Components/Charts/PagespeedLineChart/index.jsx | 2 +-
 Client/src/Pages/PageSpeed/Details/index.jsx              | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Charts/PagespeedLineChart/index.jsx b/Client/src/Components/Charts/PagespeedLineChart/index.jsx
index de01e35ad..c3f974f0d 100644
--- a/Client/src/Components/Charts/PagespeedLineChart/index.jsx
+++ b/Client/src/Components/Charts/PagespeedLineChart/index.jsx
@@ -49,7 +49,7 @@ const PageSpeedLineChart = ({ pageSpeedChecks = [] }) => {
 };
 
 PageSpeedLineChart.propTypes = {
-  pageSpeedChecks: PropTypes.array.isRequired,
+  pageSpeedChecks: PropTypes.array,
 };
 
 export default PageSpeedLineChart;
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index ac455cd16..dc183bac6 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -18,6 +18,7 @@ import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 
 import "./index.css";
+import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 
 /**
  * Displays a box with an icon, title, and value.
@@ -142,11 +143,12 @@ const PageSpeedDetails = () => {
           },
         }
       );
+      console.log(monitor);
       setMonitor(res.data.data);
     };
 
     fetchMonitor();
-  }, []);
+  }, [monitorId]);
 
   const data = {
     _id: "66ad34001d483d284550e8cb",
@@ -421,6 +423,9 @@ const PageSpeedDetails = () => {
         ></StatBox>
       </Stack>
       <Typography component="h2">Score history</Typography>
+      <Box height="300px">
+        <PageSpeedLineChart pageSpeedChecks={monitor?.checks?.slice(0, 25)} />
+      </Box>
       <Typography component="h2">Performance report</Typography>
       <Stack direction="row" alignItems="center" overflow="hidden">
         <Stack