Home: Start setting up graphs

2 files changed, 76 insertions, 2 deletions

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>