Merge pull request #3 from Brian54309/dashboard

fixed chartjs
Brian54309 · Aug 28, 2024 · a7ae9be · a7ae9be
2 parents a599f4b + eaaae55
commit a7ae9be
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/src/components/Dashboard/dashboard.jsx b/src/components/Dashboard/dashboard.jsx
@@ -1,16 +1,23 @@
-import "./dashboard.css"
+import "./dashboard.css";
 
-function Dashboard(){
-    return(
-        <div className="dashboard">
-        <div className="dashboard-top">
-            Dashboard
-        </div>
-        <div className="dashboard-bot">
-            Dashboard
-        </div>
-        </div>
-    )
+// eslint-disable-next-line react/prop-types
+function Dashboard({ dashboard, car }) {
+  return (
+    <div className="dashboard">
+      {dashboard && (
+        <>
+          <div className="dashboard-top">Dashboard</div>
+          <div className="dashboard-bot">Dashboard</div>
+        </>
+      )}
+      {car && (
+        <>
+          <div className="dashboard-top">Cars</div>
+          <div className="dashboard-bot">List Car</div>
+        </>
+      )}
+    </div>
+  );
 }
 
-export default Dashboard
+export default Dashboard;
diff --git a/src/components/Visual/visual.jsx b/src/components/Visual/visual.jsx
@@ -1,3 +1,15 @@
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+} from "chart.js";
+
 import { Bar } from "react-chartjs-2";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -13,6 +25,16 @@ const july = {
   start: "2024-07-01",
   end: "2024-07-31",
 };
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement
+);
 function Visual() {
   const dispatch = useDispatch();
   const reportData = useSelector((state) => state.report.data);

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
@@ -9,7 +9,7 @@ function DashboardMain() {
       <Header></Header>
       <div style={{ display: "flex" }}>
         <div>
-          <Dashboard></Dashboard>
+          <Dashboard dashboard></Dashboard>
         </div>
         <div>
           <Visual></Visual>