From a9f81737d5ddbd2cc9b52627b05e4a9a9e22f433 Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nrk@kindly.ai>
Date: Tue, 8 Feb 2022 22:10:27 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=20Refactor=20Bar=20charts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/stats/Stats.tsx | 52 ++++++++++-----------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/frontend/src/features/stats/Stats.tsx b/frontend/src/features/stats/Stats.tsx
index 5dcc33f..d765341 100644
--- a/frontend/src/features/stats/Stats.tsx
+++ b/frontend/src/features/stats/Stats.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Bar } from "@nivo/bar";
+import { Bar, BarDatum } from "@nivo/bar";
 import { Pie } from "@nivo/pie";
 import React from "react";
 
@@ -27,6 +27,20 @@ const months = {
   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 Stats = () => {
   const { data: productData, loading: productLoading } = useQuery(ProductStatsDocument, {
     variables: { active: true },
@@ -61,66 +75,38 @@ export const Stats = () => {
         ))}
       </div>
       <h3>Ordre per time</h3>
-      <Bar
+      <OrderBar
         data={(orderData?.orderStats?.hourly || []).map((stat: OrderStatsByTime) => ({
           id: `${stat.period.toString().padStart(2, "0")}:00`,
           label: stat.period,
           value: stat.count,
         }))}
-        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 }}
       />
       <h3>Ordre per ukedag</h3>
-      <Bar
+      <OrderBar
         data={(orderData?.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,
         }))}
-        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 }}
       />
       <h3>Ordre per måned</h3>
-      <Bar
+      <OrderBar
         data={(orderData?.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,
         }))}
-        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 }}
       />
       <h3>Ordre per år</h3>
-      <Bar
+      <OrderBar
         data={(orderData?.orderStats?.yearly || []).map((stat: OrderStatsByTime) => ({
           id: stat.period,
           label: stat.period,
           value: stat.count,
         }))}
-        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 }}
       />
     </div>
   );