✨ Add stats for all purchases over time

frontend/src/features/stats/ProductStats.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
 import { Pie } from "@nivo/pie";
 import React from "react";
 
-import { ProductStatsDocument } from "../../types";
+import { AllProductStatsDocument } from "../../types";
 import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 
@@ -12,7 +12,7 @@ type UserCount = {
 };
 
 export const ProductStats = () => {
-  const { data, loading } = useQuery(ProductStatsDocument, {
+  const { data, loading } = useQuery(AllProductStatsDocument, {
     variables: { active: true },
   });
 

frontend/src/features/stats/Stats.tsx

@@ -1,8 +1,70 @@
+import { useQuery } from "@apollo/client";
+import { Line } from "@nivo/line";
 import React from "react";
 
+import { ProductStatsDocument } from "../../types";
 import { StatsView } from "./StatsView";
-export const Stats = () => {
-  const loading = false;
 
-  return <StatsView loading={loading}>TODO</StatsView>;
+export const Stats = () => {
+  const { data, loading } = useQuery(ProductStatsDocument);
+
+  const series: any[] = [];
+  (data?.productStats || [])?.forEach(({ productName: id, data }) => {
+    const lineData: any[] = [];
+    data.forEach((point, index) => {
+      lineData.push({ x: point.x, y: point.y + (lineData?.[index - 1]?.y || 0) });
+    });
+    series.push({ id, data: lineData });
+  });
+
+  return (
+    <StatsView loading={loading}>
+      <h2>Kjøp over tid</h2>
+      <Line
+        data={series}
+        width={1000}
+        height={400}
+        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+        xScale={{
+          type: "time",
+          format: "%Y-%m-%d",
+          useUTC: false,
+          precision: "day",
+        }}
+        xFormat="time:%Y-%m-%d"
+        yScale={{
+          type: "linear",
+          stacked: false,
+        }}
+        axisLeft={{
+          legend: "Purchases",
+          legendOffset: 12,
+        }}
+        axisBottom={{
+          format: "%b %Y",
+          legend: "Date",
+          legendOffset: -40,
+        }}
+        useMesh
+        pointLabelYOffset={0}
+        tooltip={({ point }) => (
+          <div
+            style={{
+              background: "white",
+              padding: "9px 12px",
+              border: "1px solid #ccc",
+            }}
+          >
+            <div>
+              <strong>{point.data.xFormatted}</strong>
+            </div>
+            <div>
+              <span style={{ background: point.serieColor, width: 13, height: 13, display: "inline-block" }} />{" "}
+              <strong>{point.data.yFormatted}</strong> {point.serieId}
+            </div>
+          </div>
+        )}
+      />
+    </StatsView>
+  );
 };

frontend/src/features/stats/allProductUserCounts.graphql

@@ -0,0 +1,7 @@
+query allProductStats($active: Boolean) {
+  allProducts(filters: {active: $active}) {
+    id
+    name
+    userCounts
+  }
+}

frontend/src/features/stats/productStats.graphql

@@ -1,7 +1,9 @@
-query productStats($active: Boolean) {
-  allProducts(filters: {active: $active}) {
-    id
-    name
-    userCounts
-  }
-}
+query productStats {
+    productStats {
+        productName
+        data {
+            x
+            y
+        }
+    }
+}