feat: #be add shot count to dashboard

backend/public/dashboard.js

+//=[ Games by date ]============================================================
+
 const gamesByDateData = JSON.parse(
   document.getElementById("gamesByDateData").textContent,
 ).filter((item) => item.date != null);
@@ -39,3 +41,42 @@ const gamesByDateConfig = {
 };
 
 new Chart(document.getElementById("gamesByDateChart"), gamesByDateConfig);
+
+//=[ Shots by duration ]========================================================
+
+const shotsByDurationData = JSON.parse(
+  document.getElementById("shotsByDurationData").textContent,
+);
+
+const shotsByDurationConfig = {
+  type: "bar",
+  data: {
+    datasets: [
+      {
+        data: shotsByDurationData,
+        backgroundColor: "blue",
+      },
+    ],
+  },
+  options: {
+    scales: {
+      x: {
+        type: "linear",
+        min: 0,
+      },
+      y: {},
+    },
+    plugins: {
+      legend: { display: false },
+    },
+    parsing: {
+      xAxisKey: "bucket",
+      yAxisKey: "count",
+    },
+  },
+};
+
+new Chart(
+  document.getElementById("shotsByDurationChart"),
+  shotsByDurationConfig,
+);

backend/src/index.ts

@@ -65,14 +65,26 @@ server.get("/", async (request, reply) => {
     )
     .groupByRaw("DATE(began_at), ended");
 
+  const shotsByDuration = await connection
+    .table("shots")
+    .select(
+      connection.raw(
+        "width_bucket(extract(epoch from ended_at - began_at)*1000, 0, 60*1000, 60*10)*100 as bucket, count(*)",
+      ),
+    )
+    .groupBy("bucket")
+    .orderBy("bucket");
+
   reply.view("/templates/dashboard.ejs", {
-    gamesByDate: gamesByDate,
+    gamesByDate,
+    shotsByDuration,
   });
 });
 
 // TODO: this is an horrible kludge
 import fastifyStatic from "fastify-static";
 import path from "path";
+import { connect } from "http2";
 server.register(fastifyStatic, {
   root: path.join(__dirname, "../public"),
   prefix: "/public/",

backend/templates/dashboard.ejs

@@ -31,10 +31,13 @@
 
     <div class="container-fluid">
         <div class="row">
-            <main class="col-lg-12 ms-sm-auto p-md-4">
-                <h1>Games by date</h1>
+            <main class="col-lg-8 col-md-10 mx-auto p-md-4">
+                <h1>Game count by date</h1>
                 <script id="gamesByDateData" type="application/json"><%- JSON.stringify(gamesByDate) %></script>
                 <canvas id="gamesByDateChart"></canvas>
+                <h1>Shot count by duration [ms]</h1>
+                <script id="shotsByDurationData" type="application/json"><%- JSON.stringify(shotsByDuration) %></script>
+                <canvas id="shotsByDurationChart"></canvas>
             </main>
         </div>
     </div>