✨ Add some pies

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@apollo/client": "^3.5.8",
+        "@nivo/pie": "^0.79.1",
         "bootstrap": "^5.1.3",
         "bootstrap-icons": "^1.8.0",
         "clsx": "^1.1.1",
@@ -2346,6 +2347,108 @@
         "graphql": "^15.4.0 || ^16.0.0"
       }
     },
+    "node_modules/@nivo/arcs": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.79.1.tgz",
+      "integrity": "sha512-owScoElMv5EwDbZKJhns282MnXVM4rq9jYwBnFBx872Igi2r6HwKk1m4jDWGfDktJ7MyECvuVzxRaUImWQdufA==",
+      "dependencies": {
+        "@nivo/colors": "0.79.1",
+        "@react-spring/web": "9.3.1",
+        "d3-shape": "^1.3.5"
+      },
+      "peerDependencies": {
+        "@nivo/core": "0.79.0",
+        "react": ">= 16.14.0 < 18.0.0"
+      }
+    },
+    "node_modules/@nivo/colors": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.79.1.tgz",
+      "integrity": "sha512-45huBmz46OoQtfqzHrnqDJ9msebOBX84fTijyOBi8mn8iTDOK2xWgzT7cCYP3hKE58IclkibkzVyWCeJ+rUlqg==",
+      "dependencies": {
+        "d3-color": "^2.0.0",
+        "d3-scale": "^3.2.3",
+        "d3-scale-chromatic": "^2.0.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "@nivo/core": "0.79.0",
+        "prop-types": ">= 15.5.10 < 16.0.0",
+        "react": ">= 16.14.0 < 18.0.0"
+      }
+    },
+    "node_modules/@nivo/core": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.79.0.tgz",
+      "integrity": "sha512-e1iGodmGuXkF+QWAjhHVFc+lUnfBoUwaWqVcBXBfebzNc50tTJrTTMHyQczjgOIfTc8gEu23lAY4mVZCDKscig==",
+      "peer": true,
+      "dependencies": {
+        "@nivo/recompose": "0.79.0",
+        "@react-spring/web": "9.3.1",
+        "d3-color": "^2.0.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-scale-chromatic": "^2.0.0",
+        "d3-shape": "^1.3.5",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "@nivo/tooltip": "0.79.0",
+        "prop-types": ">= 15.5.10 < 16.0.0",
+        "react": ">= 16.14.0 < 18.0.0"
+      }
+    },
+    "node_modules/@nivo/legends": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.79.1.tgz",
+      "integrity": "sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig==",
+      "peerDependencies": {
+        "@nivo/core": "0.79.0",
+        "prop-types": ">= 15.5.10 < 16.0.0",
+        "react": ">= 16.14.0 < 18.0.0"
+      }
+    },
+    "node_modules/@nivo/pie": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/pie/-/pie-0.79.1.tgz",
+      "integrity": "sha512-Cm8I6/nrmcpJLwziUhZ3TtwRV6K/7qWJ6alN6bUh8z7w2nScSnD/PhmAPS89p3jzSUEBPOvCViKwdvyThJ8KCg==",
+      "dependencies": {
+        "@nivo/arcs": "0.79.1",
+        "@nivo/colors": "0.79.1",
+        "@nivo/legends": "0.79.1",
+        "@nivo/tooltip": "0.79.0",
+        "d3-shape": "^1.3.5"
+      },
+      "peerDependencies": {
+        "@nivo/core": "0.79.0",
+        "react": ">= 16.14.0 < 18.0.0"
+      }
+    },
+    "node_modules/@nivo/recompose": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.79.0.tgz",
+      "integrity": "sha512-2GFnOHfA2jzTOA5mdKMwJ6myCRGoXQQbQvFFQ7B/+hnHfU/yrOVpiGt6TPAn3qReC4dyDYrzy1hr9UeQh677ig==",
+      "peer": true,
+      "dependencies": {
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 18.0.0"
+      }
+    },
+    "node_modules/@nivo/tooltip": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.79.0.tgz",
+      "integrity": "sha512-hsJsvhDVR9P/QqIEDIttaA6aslR3tU9So1s/k2jMdppL7J9ZH/IrVx9TbIP7jDKmnU5AMIP5uSstXj9JiKLhQA==",
+      "dependencies": {
+        "@react-spring/web": "9.3.1"
+      },
+      "peerDependencies": {
+        "@nivo/core": "0.79.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2390,6 +2493,72 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.2.tgz",
+      "integrity": "sha512-pBvKydRHbTzuyaeHtxGIOvnskZxGo/S5/YK1rtYm88b9NQZuZa95Rgd3O0muFL+99nvBMBL8cvQGD0UJmsqQsg==",
+      "dependencies": {
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.3.2.tgz",
+      "integrity": "sha512-kMRjkgdQ6LJ0lmb/wQlONpghaMT83UxglXHJC6m9kZS/GKVmN//TYMEK85xN1rC5Gg+BmjG61DtLCSkkLDTfNw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.3.0",
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.3.2.tgz",
+      "integrity": "sha512-YtqNnAYp5bl6NdnDOD5TcYS40VJmB+Civ4LPtcWuRPKDAOa/XAf3nep48r0wPTmkK936mpX8aIm7h+luW59u5A=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.3.2.tgz",
+      "integrity": "sha512-ypGQQ8w7mWnrELLon4h6mBCBxdd8j1pgLzmHXLpTC/f4ya2wdP+0WIKBWXJymIf+5NiTsXgSJra5SnHP5FBY+A==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.3.2.tgz",
+      "integrity": "sha512-u+IK9z9Re4hjNkBYKebZr7xVDYTai2RNBsI4UPL/k0B6lCNSwuqWIXfKZUDVlMOeZHtDqayJn4xz6HcSkTj3FQ=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.3.1.tgz",
+      "integrity": "sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.3.0",
+        "@react-spring/core": "~9.3.0",
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz",
@@ -4157,6 +4326,82 @@
       "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
       "dev": true
     },
+    "node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "dependencies": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
+      "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+      "dependencies": {
+        "d3-color": "1 - 2",
+        "d3-interpolate": "1 - 2"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
     "node_modules/data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -6404,6 +6649,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -8207,8 +8457,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "node_modules/lodash.get": {
       "version": "4.4.2",
@@ -9708,6 +9957,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "peer": true
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13859,6 +14114,80 @@
       "dev": true,
       "requires": {}
     },
+    "@nivo/arcs": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.79.1.tgz",
+      "integrity": "sha512-owScoElMv5EwDbZKJhns282MnXVM4rq9jYwBnFBx872Igi2r6HwKk1m4jDWGfDktJ7MyECvuVzxRaUImWQdufA==",
+      "requires": {
+        "@nivo/colors": "0.79.1",
+        "@react-spring/web": "9.3.1",
+        "d3-shape": "^1.3.5"
+      }
+    },
+    "@nivo/colors": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.79.1.tgz",
+      "integrity": "sha512-45huBmz46OoQtfqzHrnqDJ9msebOBX84fTijyOBi8mn8iTDOK2xWgzT7cCYP3hKE58IclkibkzVyWCeJ+rUlqg==",
+      "requires": {
+        "d3-color": "^2.0.0",
+        "d3-scale": "^3.2.3",
+        "d3-scale-chromatic": "^2.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "@nivo/core": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.79.0.tgz",
+      "integrity": "sha512-e1iGodmGuXkF+QWAjhHVFc+lUnfBoUwaWqVcBXBfebzNc50tTJrTTMHyQczjgOIfTc8gEu23lAY4mVZCDKscig==",
+      "peer": true,
+      "requires": {
+        "@nivo/recompose": "0.79.0",
+        "@react-spring/web": "9.3.1",
+        "d3-color": "^2.0.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-scale-chromatic": "^2.0.0",
+        "d3-shape": "^1.3.5",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "@nivo/legends": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.79.1.tgz",
+      "integrity": "sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig==",
+      "requires": {}
+    },
+    "@nivo/pie": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/pie/-/pie-0.79.1.tgz",
+      "integrity": "sha512-Cm8I6/nrmcpJLwziUhZ3TtwRV6K/7qWJ6alN6bUh8z7w2nScSnD/PhmAPS89p3jzSUEBPOvCViKwdvyThJ8KCg==",
+      "requires": {
+        "@nivo/arcs": "0.79.1",
+        "@nivo/colors": "0.79.1",
+        "@nivo/legends": "0.79.1",
+        "@nivo/tooltip": "0.79.0",
+        "d3-shape": "^1.3.5"
+      }
+    },
+    "@nivo/recompose": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.79.0.tgz",
+      "integrity": "sha512-2GFnOHfA2jzTOA5mdKMwJ6myCRGoXQQbQvFFQ7B/+hnHfU/yrOVpiGt6TPAn3qReC4dyDYrzy1hr9UeQh677ig==",
+      "peer": true,
+      "requires": {
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "@nivo/tooltip": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.79.0.tgz",
+      "integrity": "sha512-hsJsvhDVR9P/QqIEDIttaA6aslR3tU9So1s/k2jMdppL7J9ZH/IrVx9TbIP7jDKmnU5AMIP5uSstXj9JiKLhQA==",
+      "requires": {
+        "@react-spring/web": "9.3.1"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -13890,6 +14219,55 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
       "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
     },
+    "@react-spring/animated": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.2.tgz",
+      "integrity": "sha512-pBvKydRHbTzuyaeHtxGIOvnskZxGo/S5/YK1rtYm88b9NQZuZa95Rgd3O0muFL+99nvBMBL8cvQGD0UJmsqQsg==",
+      "requires": {
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.3.2.tgz",
+      "integrity": "sha512-kMRjkgdQ6LJ0lmb/wQlONpghaMT83UxglXHJC6m9kZS/GKVmN//TYMEK85xN1rC5Gg+BmjG61DtLCSkkLDTfNw==",
+      "requires": {
+        "@react-spring/animated": "~9.3.0",
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.3.2.tgz",
+      "integrity": "sha512-YtqNnAYp5bl6NdnDOD5TcYS40VJmB+Civ4LPtcWuRPKDAOa/XAf3nep48r0wPTmkK936mpX8aIm7h+luW59u5A=="
+    },
+    "@react-spring/shared": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.3.2.tgz",
+      "integrity": "sha512-ypGQQ8w7mWnrELLon4h6mBCBxdd8j1pgLzmHXLpTC/f4ya2wdP+0WIKBWXJymIf+5NiTsXgSJra5SnHP5FBY+A==",
+      "requires": {
+        "@react-spring/rafz": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.3.2.tgz",
+      "integrity": "sha512-u+IK9z9Re4hjNkBYKebZr7xVDYTai2RNBsI4UPL/k0B6lCNSwuqWIXfKZUDVlMOeZHtDqayJn4xz6HcSkTj3FQ=="
+    },
+    "@react-spring/web": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.3.1.tgz",
+      "integrity": "sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==",
+      "requires": {
+        "@react-spring/animated": "~9.3.0",
+        "@react-spring/core": "~9.3.0",
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
     "@rollup/pluginutils": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz",
@@ -15261,6 +15639,82 @@
       "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
       "dev": true
     },
+    "d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "requires": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "requires": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
+      "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+      "requires": {
+        "d3-color": "1 - 2",
+        "d3-interpolate": "1 - 2"
+      }
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "requires": {
+        "d3-array": "2"
+      }
+    },
+    "d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "requires": {
+        "d3-time": "1 - 2"
+      }
+    },
     "data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -16914,6 +17368,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -18300,8 +18759,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "lodash.get": {
       "version": "4.4.2",
@@ -19428,6 +19886,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "peer": true
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

frontend/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.8",
+    "@nivo/pie": "^0.79.1",
     "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.8.0",
     "clsx": "^1.1.1",

frontend/src/Routes.tsx

@@ -4,11 +4,13 @@ import { Route, Routes as ReactRouterRoutes } from "react-router-dom";
 import { Deposit } from "./features/deposit/Deposit";
 import { Log } from "./features/log/Log";
 import { Register } from "./features/register/Register";
+import { Stats } from "./features/stats/Stats";
 
 export const Routes: React.FC = () => (
   <ReactRouterRoutes>
     <Route path="/deposit" element={<Deposit />} />
     <Route path="/log" element={<Log />} />
+    <Route path="/stats" element={<Stats />} />
     <Route path="/" element={<Register />} />
   </ReactRouterRoutes>
 );

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

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

frontend/src/features/stats/Stats.tsx

@@ -0,0 +1,42 @@
+import { useQuery } from "@apollo/client";
+import { Pie } from "@nivo/pie";
+import React from "react";
+
+import { ProductStatsDocument } from "../../types";
+import styles from "./Stats.module.css";
+
+export const Stats = () => {
+  const { data, loading } = useQuery(ProductStatsDocument, { variables: { active: true } });
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+  return (
+    <div className={styles.stats}>
+      <h2>Stats</h2>
+      <h3>Produkter</h3>
+      <div className={styles.products}>
+        {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) => ({
+                  id: uc.name,
+                  label: uc.name,
+                  value: uc.count,
+                }))}
+                width={400}
+                height={400}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <h3>Hourly</h3>
+      <h3>Daily</h3>
+      <h3>Monthly</h3>
+      <h3>Yearly</h3>
+    </div>
+  );
+};

frontend/src/features/stats/productStats.graphql

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

frontend/src/types.ts

@@ -13,6 +13,8 @@ export type Scalars = {
   Float: number;
   /** Date with time (isoformat) */
   DateTime: any;
+  /** The GenericScalar scalar type represents a generic GraphQL scalar value that could be: List or Object. */
+  JSONScalar: any;
 };
 
 export type AboveMaxSaldo = Error & {
@@ -127,6 +129,7 @@ export type Product = {
   name: Scalars['String'];
   salePriceExt: Scalars['Float'];
   salePriceInt: Scalars['Float'];
+  userCounts: Scalars['JSONScalar'];
 };
 
 export type ProductFilter = {
@@ -233,6 +236,13 @@ export type CreateOrderMutationVariables = Exact<{
 
 export type CreateOrderMutation = { __typename?: 'Mutation', createOrder: { __typename?: 'CreateOrderSuccess', order: { __typename?: 'Order', id: string, isExternal: boolean, orderSum: number, customer?: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number } | null } | null, orderlines?: Array<{ __typename?: 'OrderLine', id: string, amount: number, unitPrice: number, product: { __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number } }> | null } } | { __typename?: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename?: 'FieldError', field: string, message: string }> } | { __typename?: 'InsufficientFunds', error: boolean, message: string, amountLacking: number } };
 
+export type ProductStatsQueryVariables = Exact<{
+  active: Scalars['Boolean'];
+}>;
+
+
+export type ProductStatsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, userCounts: any }> };
+
 
 export const CreateDepositDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateDeposit"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createDeposit"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}},{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CreateDepositSuccess"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"transaction"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"amount"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"balance"}}]}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AboveMaxSaldo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"maxSaldo"}},{"kind":"Field","name":{"kind":"Name","value":"above"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FormErrors"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateDepositMutation, CreateDepositMutationVariables>;
 export const OrderListDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"orderList"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"10"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"offset"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"orderList"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"order"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"created"},"value":{"kind":"EnumValue","value":"DESC"}}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"offset"},"value":{"kind":"Variable","name":{"kind":"Name","value":"offset"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"isExternal"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"orderSum"}},{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"balance"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"orderlines"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"amount"}},{"kind":"Field","name":{"kind":"Name","value":"unitPrice"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceExt"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceInt"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OrderListQuery, OrderListQueryVariables>;
@@ -240,3 +250,4 @@ export const TransactionListDocument = {"kind":"Document","definitions":[{"kind"
 export const AllProductsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allProducts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"active"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allProducts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"active"},"value":{"kind":"Variable","name":{"kind":"Name","value":"active"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceExt"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceInt"}}]}}]}}]} as unknown as DocumentNode<AllProductsQuery, AllProductsQueryVariables>;
 export const AllUsersDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allUsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allUsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"balance"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"lastPurchaseDate"}}]}}]}}]}}]} as unknown as DocumentNode<AllUsersQuery, AllUsersQueryVariables>;
 export const CreateOrderDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOrder"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"customerId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderLines"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"OrderLineInput"}}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"isExternal"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOrder"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"customerId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"customerId"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderLines"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderLines"}}},{"kind":"Argument","name":{"kind":"Name","value":"isExternal"},"value":{"kind":"Variable","name":{"kind":"Name","value":"isExternal"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOrderSuccess"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"order"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"isExternal"}},{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"balance"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"orderlines"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"amount"}},{"kind":"Field","name":{"kind":"Name","value":"unitPrice"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceExt"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceInt"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"orderSum"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InsufficientFunds"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"amountLacking"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FormErrors"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateOrderMutation, CreateOrderMutationVariables>;
+export const ProductStatsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"productStats"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"active"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allProducts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"active"},"value":{"kind":"Variable","name":{"kind":"Name","value":"active"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"userCounts"}}]}}]}}]} as unknown as DocumentNode<ProductStatsQuery, ProductStatsQueryVariables>;

main/api/types.py

@@ -1,4 +1,6 @@
+import json
 from datetime import datetime
+from typing import Any, NewType
 
 import strawberry
 import strawberry_django
@@ -9,6 +11,13 @@ from main import models
 
 UserModel = get_user_model()
 
+JSONScalar = strawberry.scalar(
+    NewType("JSONScalar", Any),
+    serialize=lambda v: v,
+    parse_value=lambda v: json.loads(v),
+    description="The GenericScalar scalar type represents a generic GraphQL scalar value that could be: List or Object.",
+)
+
 
 @strawberry_django.filters.filter(models.Product)
 class ProductFilter:
@@ -23,6 +32,8 @@ class Product:
     image_url: str
     sale_price_int: auto
     sale_price_ext: auto
+    # FIXME: stricter types
+    user_counts: JSONScalar
 
 
 @strawberry_django.type(models.UserProfile)

main/models.py

@@ -2,8 +2,25 @@ from datetime import datetime
 
 from django.conf import settings
 from django.db import models
+from django.db.models import Sum
 from django.templatetags.static import static
 
+EXTERNAL_USER = "Ekstern"
+
+
+def _format_counts(per_user):
+    per_user = list(per_user)
+    for row in per_user:
+        if row.get("order__customer__first_name") is None:
+            who = EXTERNAL_USER
+        else:
+            first = row.pop("order__customer__first_name")
+            last_initial = row.pop("order__customer__last_name")[0]
+            who = f"{first} {last_initial}"
+        row["name"] = who
+
+    return per_user
+
 
 class Product(models.Model):
     name = models.CharField(max_length=64)
@@ -47,6 +64,13 @@ class Product(models.Model):
     def image_url(self):
         return self.image.url if self.image else ""
 
+    def user_counts(self):
+        name_fields = ["order__customer__first_name", "order__customer__last_name"]
+        per_user = OrderLine.objects.filter(product=self)
+        per_user = per_user.values(*name_fields).annotate(count=Sum("amount")).order_by("-count")
+
+        return _format_counts(per_user)
+
     def __str__(self):
         return self.name
 

schema.graphql

@@ -43,6 +43,11 @@ type InsufficientFunds implements Error {
   amountLacking: Float!
 }
 
+"""
+The GenericScalar scalar type represents a generic GraphQL scalar value that could be: List or Object.
+"""
+scalar JSONScalar
+
 type Mutation {
   createOrder(customerId: ID!, orderLines: [OrderLineInput!]!, isExternal: Boolean! = false): CreateOrderResponse!
   createDeposit(userId: ID!, amount: Int!): CreateDepositResponse!
@@ -90,6 +95,7 @@ type Product {
   imageUrl: String!
   salePriceInt: Float!
   salePriceExt: Float!
+  userCounts: JSONScalar!
 }
 
 input ProductFilter {