Components: DonutChart: Add file writes size percentiles graph

6 files changed, 92 insertions, 3 deletions

diff --git a/TODO b/TODO
index 0054846..26f68ca 100644
--- a/TODO
+++ b/TODO
@@ -1 +1,2 @@
 Deploy somewhere
+we can save the time it takes to execute syscalls
diff --git a/package-lock.json b/package-lock.json
index d35775b..e4b1b64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.23.1"
+        "react-router-dom": "^6.23.1",
+        "simple-statistics": "^7.8.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -6470,6 +6471,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-statistics": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/simple-statistics/-/simple-statistics-7.8.3.tgz",
+      "integrity": "sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "dev": true,
diff --git a/package.json b/package.json
index 9dfeb81..dc235b9 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "simple-statistics": "^7.8.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/components/Graphs/DonutChart.tsx b/src/components/Graphs/DonutChart.tsx
new file mode 100644
index 0000000..a80876e
--- /dev/null
+++ b/src/components/Graphs/DonutChart.tsx
@@ -0,0 +1,76 @@
+import {
+	Chart as ChartJS,
+	CategoryScale,
+	LinearScale,
+	PointElement,
+	LineElement,
+	Tooltip,
+} from 'chart.js';
+import 'chart.js/auto';
+
+import { useEffect, useState } from 'react';
+import { PolarArea } from 'react-chartjs-2';
+
+import * as ss from 'simple-statistics';
+
+ChartJS.register(
+	CategoryScale,
+	LinearScale,
+	PointElement,
+	LineElement,
+	Tooltip
+);
+
+export default function LineGraph(props: any) {
+	const options = {
+		responsive: true,
+	};
+
+	const [data, setData] = useState({
+		labels: [],
+		datasets: []
+	});
+
+	useEffect(() => {
+		const fetchData = async () => {
+			const timeframeEnd = props.timeframe.end.toDate();
+			const timeframeStart = props.timeframe.start.toDate();
+			timeframeStart.setHours(timeframeStart.getHours() - 12)
+
+			const { data: rawData } = await props.supabase
+				.from('file')
+				.select('contents').gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString());
+			console.log("RAWDATA", rawData)
+
+			if (rawData.length === 0) {
+				return;
+			}
+
+			let sortedLengths = rawData.map((element) => element.contents.length).sort((a, b) => a - b);
+			console.log("TOP LENGTHS", sortedLengths)
+			let p25Value = ss.quantileSorted(sortedLengths, 0.25);
+			let p50Value = ss.quantileSorted(sortedLengths, 0.50);
+			let p75Value = ss.quantileSorted(sortedLengths, 0.75);
+			let p100Value = ss.quantileSorted(sortedLengths, 1.00);
+			console.log("p25: ", p25Value)
+			console.log("p50: ", p50Value)
+			console.log("p75: ", p75Value)
+			console.log("p100: ", p100Value)
+
+			setData({
+				labels: ['p25', 'p50', 'p75', 'p100'],
+				datasets: [{
+					data: [p25Value, p50Value, p75Value, p100Value]
+				}]
+			})
+		}
+		fetchData()
+	}, [props.timeframe]);
+
+	return (
+		<div>
+			<p className="text-center">{props.name}</p>
+			<PolarArea data={data} options={options} />
+		</div>
+	)
+}
diff --git a/src/components/Graphs/LineGraph.tsx b/src/components/Graphs/LineGraph.tsx
index eba4680..6ef1f89 100644
--- a/src/components/Graphs/LineGraph.tsx
+++ b/src/components/Graphs/LineGraph.tsx
@@ -6,6 +6,7 @@ import {
 	LineElement,
 	Tooltip,
 } from 'chart.js';
+import 'chart.js/auto';
 import { format } from 'date-fns'
 
 import { useEffect, useState } from 'react';
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 1a02702..3d4d2c7 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom"
 import SideBar from "../components/Sidebar/Sidebar"
 import LineGraph from "../components/Graphs/LineGraph"
 import TimePicker from "../components/TimePicker/TimePicker"
+import DonutChart from "../components/Graphs/DonutChart"
 
 export default function Home(props: any) {
   const navigate = useNavigate()
@@ -60,7 +61,7 @@ export default function Home(props: any) {
             </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} timeframe={props.timeframe} />
+                <DonutChart name="File writes size percentiles" supabase={props.supabase} timeframe={props.timeframe} />
               </div>
               <div className="w-1/2 flex flex-col">
                 <p className="text-center">Most edited files</p>