feat: clues screen time statistics

backend/public/dashboard.js

@@ -66,6 +66,58 @@ const gamesByDateConfig = {
 
 new Chart(document.getElementById("gamesByDateChart"), gamesByDateConfig);
 
+//=[ Clues by duration ]========================================================
+
+const cluesByDurationData = JSON.parse(
+  document.getElementById("cluesByDurationData").textContent,
+).filter((item) => item.bucket != null);
+
+const cluesByDurationConfig = {
+  type: "bar",
+  data: {
+    datasets: [
+      {
+        data: cluesByDurationData,
+        backgroundColor: [
+          ...Array(cluesByDurationData.length - 1).fill("blue"),
+          "red",
+        ],
+      },
+    ],
+  },
+  options: {
+    scales: {
+      x: {
+        type: "linear",
+        min: 0,
+        max: 15000,
+      },
+      y: {},
+    },
+    plugins: {
+      legend: { display: false },
+      title: {
+        display: true,
+        text: "Clues screen time [ms] distribution",
+      },
+
+      subtitle: {
+        display: true,
+        text: "Bins are 150ms wide, labeled by upper bound; clues >15s are lumped in the last bar.",
+      },
+    },
+    parsing: {
+      xAxisKey: "bucket",
+      yAxisKey: "count",
+    },
+  },
+};
+
+new Chart(
+  document.getElementById("cluesByDurationChart"),
+  cluesByDurationConfig,
+);
+
 //=[ Shots by duration ]========================================================
 
 const shotsByDurationData = JSON.parse(
@@ -86,7 +138,6 @@ const shotsByDurationConfig = {
     ],
   },
   options: {
-    title: "ASD",
     scales: {
       x: {
         type: "linear",

backend/src/dashboard.ts

@@ -66,6 +66,16 @@ const dashboardPlugin: FastifyPluginCallback = (fastify, options, next) => {
         )
         .groupByRaw("DATE(began_at), ended");
 
+      const cluesByDuration = await connection
+        .table("clues")
+        .select(
+          connection.raw(
+            "width_bucket(ended_at_gmtm - began_at_gmtm, 0, 150*100, 100)*150 as bucket, count(*)",
+          ),
+        )
+        .groupBy("bucket")
+        .orderBy("bucket");
+
       const shotsByDuration = await connection
         .table("shots")
         .select(
@@ -121,6 +131,7 @@ const dashboardPlugin: FastifyPluginCallback = (fastify, options, next) => {
         shotsCount,
         devicesByDate,
         gamesByDate,
+        cluesByDuration,
         shotsByDuration,
         shotsBySimilarity,
         devicesBehaviour,

backend/templates/dashboard.ejs

@@ -86,6 +86,11 @@
                 <script id="devicesByDateData" type="application/json"><%- JSON.stringify(devicesByDate) %></script>
                 <canvas id="gamesByDateChart"></canvas>
 
+                <h1>Clues statistics</h1>
+
+                <script id="cluesByDurationData" type="application/json"><%- JSON.stringify(cluesByDuration) %></script>
+                <canvas id="cluesByDurationChart"></canvas>
+
                 <h1>Shots statistics</h1>
 
                 <script id="shotsByDurationData" type="application/json"><%- JSON.stringify(shotsByDuration) %></script>