vinvoor: show the user's most common days

ZeusWPI · Jul 6, 2024 · 41e16cc · 41e16cc
1 parent ed6d70a
commit 41e16cc
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 8 deletions.
diff --git a/vinvoor/package.json b/vinvoor/package.json
@@ -25,6 +25,7 @@
     "mdi-material-ui": "^7.9.1",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",

diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx
@@ -7,6 +7,7 @@ import { LoadingSkeleton } from "../components/LoadingSkeleton";
 import { useFetch } from "../hooks/useFetch";
 import { convertScanJSON, Scan } from "../types/scans";
 import { CheckIn } from "./checkin/CheckIn";
+import { Days } from "./days/Days";
 import { Heatmap, HeatmapVariant } from "./heatmap/Heatmap";
 import { Streak } from "./streak/Streak";
 
@@ -75,6 +76,11 @@ export const Overview = () => {
                             <Tooltip id="heatmap" />
                         </Paper>
                     </Grid>
+                    <Grid item xs={12} md={4}>
+                        <Paper elevation={4}>
+                            <Days />
+                        </Paper>
+                    </Grid>
                 </Grid>
             </ScanContext.Provider>
         </LoadingSkeleton>

diff --git a/vinvoor/src/overview/days/Days.tsx b/vinvoor/src/overview/days/Days.tsx
@@ -0,0 +1,58 @@
+import { ApexOptions } from "apexcharts";
+import { useContext } from "react";
+import Chart from "react-apexcharts";
+import { Scan } from "../../types/scans";
+import { ScanContext } from "../Overview";
+
+const getDayCount = (scans: readonly Scan[]) => {
+    const days = [0, 0, 0, 0, 0, 0, 0];
+    scans.forEach((scan) => {
+        days[scan.scanTime.getDay() - 1]++;
+    });
+    return days.slice(0, -2);
+};
+
+export const Days = () => {
+    const { scans } = useContext(ScanContext);
+
+    const state = {
+        options: {
+            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
+            fill: {
+                opacity: 1,
+            },
+            yaxis: {
+                show: false,
+            },
+            legend: {
+                position: "bottom",
+                labels: {
+                    useSeriesColors: true,
+                },
+            },
+            plotOptions: {
+                polarArea: {
+                    rings: {
+                        strokeWidth: 0,
+                    },
+                    spokes: {
+                        strokeWidth: 0,
+                    },
+                },
+            },
+            theme: {
+                monochrome: {
+                    enabled: true,
+                    color: "#ff7f00",
+                    shadeTo: "light",
+                    shadeIntensity: 1,
+                },
+            },
+        } as ApexOptions,
+        series: getDayCount(scans),
+    };
+
+    return (
+        <Chart options={state.options} series={state.series} type="polarArea" />
+    );
+};
diff --git a/vinvoor/src/overview/streak/Streak.tsx b/vinvoor/src/overview/streak/Streak.tsx
@@ -60,7 +60,7 @@ export const Streak = () => {
     const [isOnStreak, streak] = getStreak(scans);
 
     return isOnStreak ? (
-        <Box display="flex" alignItems="flex-end">
+        <Box display="flex" alignItems="flex-end" justifyContent="center">
             <Typography
                 variant="h2"
                 color="primary"
@@ -74,13 +74,7 @@ export const Streak = () => {
             </Typography>
         </Box>
     ) : (
-        <Box
-            display="flex"
-            alignItems="flex-end"
-            justifyItems="center"
-            justifyContent="center"
-            // sx={{ border: 1, borderColor: "primary.secondary" }}
-        >
+        <Box display="flex" alignItems="flex-end" justifyContent="center">
             <Typography
                 variant="h2"
                 color="error"

diff --git a/vinvoor/yarn.lock b/vinvoor/yarn.lock
@@ -1795,6 +1795,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-apexcharts@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-apexcharts/-/react-apexcharts-1.4.1.tgz#95ab31e4d2201308f59f3d2a4b65d10d9d0ea4bb"
+  integrity sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-device-detect@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"