Add "export CSV" button to dashboard (#158)

package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-navigation-menu": "^1.1.2",
     "animate.css": "^4.1.1",
     "dayjs": "^1.11.7",
+    "file-saver": "^2.0.5",
     "firebase": "^9.17.1",
     "react": "^18.2.0",
     "react-animation-on-scroll": "^5.1.0",

src/Components/GraphContainer.jsx

@@ -4,11 +4,9 @@ import { db } from '../firebase';
 import GraphCard from "./GraphCard";
 import { Grid, Alert, Typography } from "@mui/material";
 import { systemStatMeta } from "../systemMeta";
-import { useTrackStats } from "../Hooks/useTracksStats";
 import { Fade } from 'react-awesome-reveal';
 
-const GraphContainer = ({ timescale, zoom }) => {
-	const { loading, stats, tolerances } = useTrackStats(timescale);
+const GraphContainer = ({ timescale, zoom, stats, loading, tolerances }) => {
 
 	// idiocy ensues
 	const [doxxedPpl, setDoxxedPpl] = useState([]);

src/Pages/Dashboard.jsx

@@ -1,7 +1,9 @@
-import { Box, FormControlLabel, Stack, Switch, Typography } from "@mui/material";
+import { Box, FormControlLabel, Stack, Switch, Typography, Button } from "@mui/material";
 import { useState, useTransition } from "react";
 import SelectMenu from "../Components/SelectMenu";
 import GraphContainer from "../Components/GraphContainer";
+import { saveAs } from 'file-saver';
+import { useTrackStats } from '../Hooks/useTracksStats';
 
 const timescaleOptions = [ // in seconds, not milliseconds
 	{ value: 60 * 60, display: "1 hour" },
@@ -12,6 +14,21 @@ const timescaleOptions = [ // in seconds, not milliseconds
 const Dashboard = () => {
 	const [zoom, setZoom] = useState(false); // whether to zoom in on available portion of graph
 	const [timescale, setTimescale] = useState(timescaleOptions[0].value);
+	const { loading, stats, tolerances } = useTrackStats(timescale); // fetch the stats using the useTrackStats hook
+
+	const downloadCSV = () => {
+		if (!stats || stats.length === 0) {
+			// Handle the case where stats is empty or not loaded
+			console.error('No data available to download');
+			return;
+		}
+
+		let csvContent = "data:text/csv;charset=utf-8,\n";
+		csvContent += ["unixTime", ...Object.keys(stats[0].stats)].join(",") + "\n";
+		csvContent += stats.map(row => [row.unixTime, ...Object.values(row.stats)].join(",")).join("\n");
+		const blob = new Blob([csvContent], { type: 'text/csv' });
+		saveAs(blob, 'exportedData.csv');
+	};
 
 	return (
 		<Box>
@@ -33,11 +50,14 @@ const Dashboard = () => {
 					checked={zoom}
 					onChange={() => setZoom(!zoom)}
 				/>
+				<Button onClick={downloadCSV} variant="contained" color="primary">
+					Export as CSV
+				</Button>
 			</Stack>
-			<GraphContainer timescale = {timescale} zoom={zoom} />
+			<GraphContainer timescale={timescale} zoom={zoom} stats={stats} loading={loading} tolerances={tolerances}/>
 		</Box>
 	);
 };
 
 
-export default Dashboard;
+export default Dashboard;