Removed container

Client/src/Components/Charts/PagespeedLineChart/index.jsx

@@ -1,34 +1,7 @@
 import { LineChart } from "@mui/x-charts/LineChart";
-
-import data from "./dummy_data";
+import PropTypes from "prop-types";
 
 const PageSpeedLineChart = ({ pageSpeedChecks = [] }) => {
-  //   //   SQUASH ERROR, NOT PERMANENT SOLUTION
-  //   const error = console.error;
-  //   console.error = (...args) => {
-  //     if (/defaultProps/.test(args[0])) return;
-  //     error(...args);
-  //   };
-
-  //   //   END SQUASH ERROR, NOT PERMANENT SOLUTION
-  //   return (
-  //     <div style={{ width: "100vw", height: "80vw" }}>
-  //       <ResponsiveContainer width="100%" height="100%">
-  //         <LineChart width={500} height={300} data={data} margin={{}}>
-  //           <CartesianGrid strokeDasharray="3 3" />
-  //           <XAxis dataKey="name" />
-  //           <YAxis />
-  //           <Tooltip />
-  //           <Legend />
-  //           <Line type="monotone" dataKey="performance" stroke="#2aa02b" />
-  //           <Line type="monotone" dataKey="seo" stroke="#9467bd" />
-  //           <Line type="monotone" dataKey="bestPractices" stroke="#ff7f0e" />
-  //           <Line type="monotone" dataKey="accessibility" stroke="#1f76b3" />
-  //         </LineChart>
-  //       </ResponsiveContainer>
-  //     </div>
-  //   );
-
   const keyToLabel = {
     performance: "Performance",
     seo: "SEO",
@@ -44,26 +17,39 @@ const PageSpeedLineChart = ({ pageSpeedChecks = [] }) => {
   };
 
   const customize = {
-    // legend: { hidden: true },
-    // margin: { top: 5 },
-    // // stackingOrder: "descending",
+    legend: { position: { vertical: "bottom", horizontal: "middle" } },
+    margin: { bottom: 75 },
   };
 
+  const xLabels = pageSpeedChecks.map((check) => {
+    return check.createdAt;
+  });
+
   return (
-    <div style={{ height: "100vh", width: "100vw" }}>
-      <LineChart
-        series={Object.keys(keyToLabel).map((key) => ({
-          dataKey: key,
-          label: keyToLabel[key],
-          color: colors[key],
-          showMark: false,
-        }))}
-        dataset={data}
-        {...customize}
-        grid={{ vertical: true, horizontal: true }}
-      />
-    </div>
+    <LineChart
+      series={Object.keys(keyToLabel).map((key) => ({
+        dataKey: key,
+        label: keyToLabel[key],
+        color: colors[key],
+        showMark: false,
+      }))}
+      yAxis={[{ min: 0, max: 100 }]}
+      xAxis={[
+        {
+          scaleType: "point",
+          data: xLabels,
+          valueFormatter: (val) => new Date(val).toLocaleDateString(),
+        },
+      ]}
+      dataset={pageSpeedChecks}
+      {...customize}
+      grid={{ vertical: true, horizontal: true }}
+    />
   );
 };
 
+PageSpeedLineChart.propTypes = {
+  pageSpeedChecks: PropTypes.array.isRequired,
+};
+
 export default PageSpeedLineChart;