Components: LineGraph: Fetch data from DB

2 files changed, 60 insertions, 23 deletions

diff --git a/src/components/Graphs/LineGraph.tsx b/src/components/Graphs/LineGraph.tsx
index f16cc40..36629ca 100644
--- a/src/components/Graphs/LineGraph.tsx
+++ b/src/components/Graphs/LineGraph.tsx
@@ -6,6 +6,7 @@ import {
 	LineElement,
 	Tooltip,
 } from 'chart.js';
+import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
 
 ChartJS.register(
@@ -16,7 +17,7 @@ ChartJS.register(
 	Tooltip
 );
 
-export default function LineGraph() {
+export default function LineGraph(props: any) {
 	const options = {
 		responsive: true,
 		scales: {
@@ -26,10 +27,12 @@ export default function LineGraph() {
 				}
 			},
 			y: {
+				min: 0,
 				ticks: {
+					stepSize: 1,
 					callback: function(value: any, _index: any, _ticks: any) {
 						return value + "wps";
-					}
+					},
 				},
 				grid: {
 					display: false
@@ -38,29 +41,63 @@ export default function LineGraph() {
 		}
 	};
 
-	const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+	const [data, setData] = useState({
+		labels: [],
+		datasets: []
+	});
 
-	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)',
-			},
-		],
-	};
+	useEffect(() => {
+		const fetchData = async () => {
+			const timeframeEnd = new Date();
+			const timeframeStart = new Date();
+			timeframeStart.setHours(timeframeStart.getHours() - 12)
+			const numDatapoints = 12;
+
+			const { data: rawData } = await props.supabase
+				.from('file')
+				.select().gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString());
+			console.log(rawData)
+
+			const startDate = new Date(timeframeStart);
+			const endDate = new Date(timeframeEnd);
+
+			const intervalDuration = (endDate - startDate) / numDatapoints;
+
+			let labels = Array(numDatapoints).fill("");
+			let points = Array(numDatapoints).fill(0);
+			for (let i = 0; i < numDatapoints; i++) {
+				const intervalStart = new Date(startDate.getTime() + i * intervalDuration);
+				const intervalEnd = new Date(startDate.getTime() + (i + 1) * intervalDuration);
+
+				// Format the interval start and end as strings for labeling
+				labels[i] = `${intervalStart.getHours().toString()}:${intervalStart.getMinutes().toString()}h`;
+
+				// Count the number of entries within the current interval
+				points[i] = rawData.filter(entry => {
+					const entryDate = new Date(entry.timestamp);
+					return entryDate >= intervalStart && entryDate < intervalEnd;
+				}).length;
+			}
+
+			console.log("LABELS", labels)
+			console.log("POINTS", points)
+
+			setData({
+				labels: labels,
+				datasets: [{
+					label: 'Dataset',
+					data: points,
+					borderColor: 'rgb(53, 162, 235)',
+					backgroundColor: 'rgba(53, 162, 235, 0.5)',
+				}]
+			})
+		}
+		fetchData()
+	}, [])
 
 	return (
 		<div>
-			<p className="text-center">File writes per second</p>
+			<p className="text-center">{props.name}</p>
 			<Line data={data} options={options} />
 		</div>
 	)
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 37b97c3..8c3e23c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -55,12 +55,12 @@ export default function Home(props: any) {
                 </div>
               </div>
               <div className="w-1/2 ml-auto">
-                <LineGraph />
+                <LineGraph name="File writes per second" supabase={props.supabase} />
               </div>
             </div>
             <div className="flex flex-row gap-7 mb-5 flex-grow">
               <div className="w-1/2 mr-auto">
-                <LineGraph />
+                <LineGraph name="caca" supabase={props.supabase} />
               </div>
               <div className="w-1/2 flex flex-col">
                 <p className="text-center">Most edited files</p>