Components: LineGraph: Use timeframe for fetching data

4 files changed, 20 insertions, 7 deletions

diff --git a/package-lock.json b/package-lock.json
index 08a16c3..d35775b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@supabase/supabase-js": "^2.43.4",
         "@uidotdev/usehooks": "^2.4.1",
         "chart.js": "^4.4.3",
+        "date-fns": "^3.6.0",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
@@ -4532,6 +4533,15 @@
       "version": "3.1.3",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.5",
       "dev": true,
diff --git a/package.json b/package.json
index 4c6cea5..9dfeb81 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@supabase/supabase-js": "^2.43.4",
     "@uidotdev/usehooks": "^2.4.1",
     "chart.js": "^4.4.3",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Graphs/LineGraph.tsx b/src/components/Graphs/LineGraph.tsx
index 36629ca..eba4680 100644
--- a/src/components/Graphs/LineGraph.tsx
+++ b/src/components/Graphs/LineGraph.tsx
@@ -6,6 +6,8 @@ import {
 	LineElement,
 	Tooltip,
 } from 'chart.js';
+import { format } from 'date-fns'
+
 import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
 
@@ -48,14 +50,14 @@ export default function LineGraph(props: any) {
 
 	useEffect(() => {
 		const fetchData = async () => {
-			const timeframeEnd = new Date();
-			const timeframeStart = new Date();
+			const timeframeEnd = props.timeframe.end.toDate();
+			const timeframeStart = props.timeframe.start.toDate();
 			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());
+				.select('timestamp').gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString());
 			console.log(rawData)
 
 			const startDate = new Date(timeframeStart);
@@ -70,7 +72,7 @@ export default function LineGraph(props: any) {
 				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`;
+				labels[i] = format(intervalEnd, 'MM/dd - HH:mm');
 
 				// Count the number of entries within the current interval
 				points[i] = rawData.filter(entry => {
@@ -93,7 +95,7 @@ export default function LineGraph(props: any) {
 			})
 		}
 		fetchData()
-	}, [])
+	}, [props.timeframe])
 
 	return (
 		<div>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 2ff9954..1a02702 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 name="File writes per second" supabase={props.supabase} />
+                <LineGraph name="File writes per second" supabase={props.supabase} timeframe={props.timeframe} />
               </div>
             </div>
             <div className="flex flex-row gap-7 mb-5 flex-grow">
               <div className="w-1/2 mr-auto">
-                <LineGraph name="caca" supabase={props.supabase} />
+                <LineGraph name="caca" supabase={props.supabase} timeframe={props.timeframe} />
               </div>
               <div className="w-1/2 flex flex-col">
                 <p className="text-center">Most edited files</p>