✨ Split out stats into multiple sub views

frontend/src/features/stats/OrderStats.tsx

@@ -0,0 +1,79 @@
+import { useQuery } from "@apollo/client";
+import { Bar, BarDatum } from "@nivo/bar";
+import React from "react";
+
+import { OrderStatsDocument, OrderStatsByTime } from "../../types";
+import { StatsView } from "./StatsView";
+
+const days = { 1: "Mandag", 2: "Tirsdag", 3: "Onsdag", 4: "Torsdag", 5: "Fredag", 6: "Lørdag", 7: "Søndag" };
+
+const months = {
+  1: "Januar",
+  2: "Februar",
+  3: "Mars",
+  4: "April",
+  5: "Mai",
+  6: "Juni",
+  7: "Juli",
+  8: "August",
+  9: "September",
+  10: "Oktober",
+  11: "November",
+  12: "Desember",
+};
+
+const OrderBar = ({ data }: { data: BarDatum[] }) => (
+  <Bar
+    data={data}
+    margin={{ left: 60, bottom: 40 }}
+    width={1200}
+    height={400}
+    colorBy="indexValue"
+    enableLabel={false}
+    tooltipLabel={(d) => d.id.toString()}
+    axisLeft={{ legend: "Ordre", legendPosition: "middle", legendOffset: -50 }}
+  />
+);
+
+export const OrderStats = () => {
+  const { data, loading } = useQuery(OrderStatsDocument);
+
+  return (
+    <StatsView loading={loading}>
+      <h3>Ordre per time</h3>
+      <OrderBar
+        data={(data?.orderStats?.hourly || []).map((stat: OrderStatsByTime) => ({
+          id: `${stat.period.toString().padStart(2, "0")}:00`,
+          label: stat.period,
+          value: stat.count,
+        }))}
+      />
+      <h3>Ordre per ukedag</h3>
+      <OrderBar
+        data={(data?.orderStats?.daily || []).map((stat: OrderStatsByTime) => ({
+          /* @ts-expect-error Here, stat.period can only be a key in days range. */
+          id: days[stat.period],
+          label: stat.period,
+          value: stat.count,
+        }))}
+      />
+      <h3>Ordre per måned</h3>
+      <OrderBar
+        data={(data?.orderStats?.monthly || []).map((stat: OrderStatsByTime) => ({
+          /* @ts-expect-error Here, stat.period can only be a key in months range. */
+          id: months[stat.period],
+          label: stat.period,
+          value: stat.count,
+        }))}
+      />
+      <h3>Ordre per år</h3>
+      <OrderBar
+        data={(data?.orderStats?.yearly || []).map((stat: OrderStatsByTime) => ({
+          id: stat.period,
+          label: stat.period,
+          value: stat.count,
+        }))}
+      />
+    </StatsView>
+  );
+};