✨ User product purchases over time

frontend/src/features/users/UserDetail.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@apollo/client";
+import { Line } from "@nivo/line";
 import React from "react";
 import { useParams } from "react-router-dom";
 
@@ -14,6 +15,15 @@ export const UserDetail = () => {
 
   const user = data?.user as User;
   const profile = user?.profile as UserProfile;
+  // FIXME: types
+  const series: any[] = [];
+  (profile?.productOrderStats || [])?.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 (
     <div className={styles.userDetail}>
       <div>
@@ -47,7 +57,53 @@ export const UserDetail = () => {
           </ul>
         </div>
       </div>
-      <div>TODO: produktgraf</div>
+      <div>
+        <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: -12,
+          }}
+          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>
+          )}
+        />
+      </div>
     </div>
   );
 };