💄 Improve product pies

frontend/src/features/stats/Stats.module.css

@@ -1,5 +1,5 @@
 .products {
   display: grid;
   gap: 1rem;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
 }

frontend/src/features/stats/Stats.tsx

@@ -5,8 +5,13 @@ import React from "react";
 import { ProductStatsDocument } from "../../types";
 import styles from "./Stats.module.css";
 
+type UserCount = {
+  name: string;
+  count: number;
+};
+
 export const Stats = () => {
-  const { data, loading } = useQuery(ProductStatsDocument, { variables: { active: true } });
+  const { data, loading } = useQuery(ProductStatsDocument);
   if (loading) {
     return <div>Loading...</div>;
   }
@@ -15,19 +20,19 @@ export const Stats = () => {
       <h2>Stats</h2>
       <h3>Produkter</h3>
       <div className={styles.products}>
-        {data.allProducts.map((product) => {
+        {(data?.allProducts || []).map((product) => {
           return (
             <div key={product.id}>
               {product.name}
               <Pie
-                margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
-                data={product.userCounts.map((uc) => ({
+                margin={{ top: 40, right: 120, bottom: 40, left: 120 }}
+                data={product.userCounts.map((uc: UserCount) => ({
                   id: uc.name,
                   label: uc.name,
                   value: uc.count,
                 }))}
                 width={400}
-                height={400}
+                height={300}
               />
             </div>
           );

frontend/src/features/stats/productStats.graphql

@@ -1,4 +1,4 @@
-query productStats($active: Boolean!) {
+query productStats($active: Boolean) {
   allProducts(filters: {active: $active}) {
     id
     name