Metrics toggle

Author: davidsklar99

pages/metrics/+Page.client.ts

@@ -1,18 +1,20 @@
 import { useState } from 'react';
 import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
 import {
     XAxis,
     YAxis,
     CartesianGrid,
     Tooltip,
     Area,
     AreaChart,
+    Bar,
+    BarChart,
     ResponsiveContainer,
   } from "recharts";
 import { Footer } from "~/components/general";
 import h from "./main.module.sass";
 import { useData } from "vike-react/useData";
+import { Switch } from '@blueprintjs/core';
 
 
 function getDateFromYearAndWeek(year: number, week: number): Date {
@@ -38,6 +40,7 @@ export function Page() {
     const [checkinBound, setCheckin] = useState([lower, upper]);    
     const [signupBound, setSignup] = useState([lower, upper]);
     const [activeBound, setActive] = useState([lower, upper]);
+    const [showBar, setShowBar] = useState(false);
 
     // new API doesn't return all data
     const { data } = useData();
@@ -145,15 +148,32 @@ export function Page() {
     console.log("Scaled the month: ", currentName)
 
     // chart array
-    let areaArr = [
+    const areaArr = [
         h(CartesianGrid, { strokeDasharray: "3 3" }),
         h(XAxis, { dataKey: "name", stroke: "var(--text-emphasized-color)" }),
         h(YAxis, { stroke: "var(--text-emphasized-color)" }),
         h(Tooltip),
         h(Area, { type: "monotone", dataKey: "Total", stroke: "#8884d8", fill: "#8884d8" }),
     ]
 
+    const barArr = [
+        h(CartesianGrid, { strokeDasharray: "3 3" }),
+        h(XAxis, { dataKey: "name", stroke: "var(--text-emphasized-color)" }),
+        h(YAxis, { stroke: "var(--text-emphasized-color)" }),
+        h(Tooltip),
+        h(Bar, { dataKey: "Total", fill: "#8884d8" }),
+    ];
+
+    const arr = showBar ? barArr : areaArr;
+    const ChartComponent = showBar ? BarChart : AreaChart;
+
     return h('div', { className: "container" }, [
+        h(Switch, {
+            className: "switch",
+            value: showBar,
+            label: "Show bar charts",
+            onChange: () => setShowBar(!showBar)
+        }),
         h("div", { className: 'metrics' }, [
             h("div", { className: 'header' }, [
                 h("h1", "Metrics"),
@@ -188,7 +208,7 @@ export function Page() {
                 h("div", { className: 'checkins_week' }, [
                     h("h2", "Checkins by week"),
                     h(ResponsiveContainer, { width: "100%", height: 300 }, [
-                        h(AreaChart, { className: "chart", data: checkins_by_week }, areaArr),
+                        h(ChartComponent, { className: "chart", data: checkins_by_week }, arr),
                     ]),
                     h('div', { className: 'date-picker' }, [
                         h('p', 'Select date range:'),
@@ -200,13 +220,13 @@ export function Page() {
                 h("div", { className: 'checkins_month' }, [
                     h("h2", "Checkins by month"),
                     h(ResponsiveContainer, { width: "100%", height: 300 }, [
-                        h(AreaChart, { className: "chart", data: checkins_by_month }, areaArr)
+                        h(ChartComponent, { className: "chart", data: checkins_by_month }, arr)
                     ]),
                 ]),
                 h("div", { className: 'signups_week' }, [
                     h("h2", "Signups by week"),
                     h(ResponsiveContainer, { width: "100%", height: 300 }, [
-                        h(AreaChart, { className: "chart", data: signups_by_week }, areaArr),
+                        h(ChartComponent, { className: "chart", data: signups_by_week }, arr),
                     ]),
                     h('div', { className: 'date-picker' }, [
                         h('p', 'Select date range:'),
@@ -218,13 +238,13 @@ export function Page() {
                 h("div", { className: 'signups_month' }, [
                     h("h2", "Signups by month"),
                     h(ResponsiveContainer, { width: "100%", height: 300 }, [
-                        h(AreaChart, { className: "chart", data: signups_by_month }, areaArr)
+                        h(ChartComponent, { className: "chart", data: signups_by_month }, arr)
                     ]),
                 ]),
                 h("div", { className: 'users_week' }, [
                     h("h2", "Active Users by week"),
                     h(ResponsiveContainer, { width: "100%", height: 300 }, [
-                        h(AreaChart, { className: "chart", data: active_users_by_week }, areaArr),
+                        h(ChartComponent, { className: "chart", data: active_users_by_week }, arr),
                     ]),
                     h('div', { className: 'date-picker' }, [
                         h('p', 'Select date range:'),
@@ -236,7 +256,7 @@ export function Page() {
                 h("div", { className: 'users_month' }, [
                     h("h2", "Active Users by month"),
                     h(ResponsiveContainer, { width: "100%", height: 300 }, [
-                        h(AreaChart, { className: "chart", data: active_users_by_month }, areaArr)
+                        h(ChartComponent, { className: "chart", data: active_users_by_month }, arr)
                     ]),
                 ]),
             ])

pages/metrics/main.module.sass

@@ -101,4 +101,9 @@ body
   position: relative
 
 g
-  color: green
+  color: green
+
+.switch
+  position: absolute
+  top: 2em
+  right: 2em