Home: Start setting up graphs

4 files changed, 105 insertions, 2 deletions

diff --git a/package-lock.json b/package-lock.json
index 3b35097..4eec2a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
       "dependencies": {
         "@react-oauth/google": "^0.12.1",
         "@supabase/supabase-js": "^2.43.4",
+        "chart.js": "^4.4.3",
         "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.23.1"
       },
@@ -630,6 +632,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -1341,6 +1348,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2977,6 +2995,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "license": "MIT",
diff --git a/package.json b/package.json
index c924f79..19fe8fe 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,9 @@
   "dependencies": {
     "@react-oauth/google": "^0.12.1",
     "@supabase/supabase-js": "^2.43.4",
+    "chart.js": "^4.4.3",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1"
   },
diff --git a/src/components/Graphs/LineGraph.tsx b/src/components/Graphs/LineGraph.tsx
new file mode 100644
index 0000000..c48c51b
--- /dev/null
+++ b/src/components/Graphs/LineGraph.tsx
@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+
+import {
+	Chart as ChartJS,
+	CategoryScale,
+	LinearScale,
+	PointElement,
+	LineElement,
+	Title,
+	Tooltip,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+ChartJS.register(
+	CategoryScale,
+	LinearScale,
+	PointElement,
+	LineElement,
+	Title,
+	Tooltip
+);
+
+export default function LineGraph() {
+	const options = {
+		responsive: true,
+		plugins: {
+			title: {
+				display: true,
+				text: 'File writes per second',
+			},
+		},
+		scales: {
+			x: {
+				grid: {
+					display: false
+				}
+			},
+			y: {
+				ticks: {
+					callback: function(value: any, _index: any, _ticks: any) {
+						return value + "wps";
+					}
+				},
+				grid: {
+					display: false
+				}
+			},
+		}
+	};
+
+	const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+	const data = {
+		labels,
+		datasets: [
+			{
+				label: 'Dataset 1',
+				data: labels.map(() => Math.random() * 1000),
+				borderColor: 'rgb(255, 99, 132)',
+				backgroundColor: 'rgba(255, 99, 132, 0.5)',
+			},
+			{
+				label: 'Dataset 2',
+				data: labels.map(() => Math.random() * 1000),
+				borderColor: 'rgb(53, 162, 235)',
+				backgroundColor: 'rgba(53, 162, 235, 0.5)',
+			},
+		],
+	};
+
+	return (
+		<Line data={data} options={options} />
+	)
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 422090f..ae1ffdc 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback } from "react"
 
 import { useNavigate } from "react-router-dom"
 import SideBar from "../components/Sidebar/Sidebar"
+import LineGraph from "../components/Graphs/LineGraph"
 
 export default function Home(props: any) {
   const navigate = useNavigate()
@@ -36,8 +37,7 @@ export default function Home(props: any) {
       <div className="flex h-screen">
         <SideBar />
         <main className="flex-1 overflow-y-auto">
-          <h1 className="font-bold">Home</h1>
-          <p>Logged in!</p>
+          <LineGraph />
           {files.map((file: any) => (
             <div key={file.id}>
               <p className="underline">file: {file.absolute_path}</p>