1 files changed, 76 insertions, 0 deletions
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>
+	)
+}