feat: #be chart word performance

backend/public/dashboard.js

@@ -156,3 +156,61 @@ new Chart(
   document.getElementById("devicesBehaviourChart"),
   devicesBehaviourConfig,
 );
+
+//=[ Words performance ]========================================================
+
+const wordsPerformanceData = JSON.parse(
+  document.getElementById("wordsPerformanceData").textContent,
+);
+
+const wordsPerformanceConfig = {
+  type: "scatter",
+  data: {
+    datasets: [
+      {
+        data: wordsPerformanceData,
+        backgroundColor: "blue",
+      },
+    ],
+  },
+  pointDot: true,
+  options: {
+    maintainAspectRatio: true,
+    aspectRatio: 1,
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "OCR confidence",
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: "Avg shot similarity",
+        },
+      },
+    },
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        callbacks: {
+          label: (context) => {
+            return `[${context.raw.ocr_transcript}](${context.parsed.x.toFixed(
+              2,
+            )};${context.parsed.y.toFixed(2)})`;
+          },
+        },
+      },
+    },
+    parsing: {
+      xAxisKey: "ocr_confidence",
+      yAxisKey: "avg_similarity",
+    },
+  },
+};
+
+new Chart(
+  document.getElementById("wordsPerformanceChart"),
+  wordsPerformanceConfig,
+);

backend/src/index.ts

@@ -83,6 +83,18 @@ server.get("/", async (request, reply) => {
     .from(normalizedGames.as("g"))
     .groupBy("device_id");
 
+  const wordsPerformance = await connection
+    .select(
+      connection.raw(
+        "words.id, words.ocr_transcript, words.ocr_confidence, AVG(shots.similarity) as avg_similarity",
+      ),
+    )
+    .from("shots")
+    .join("clues", "clues.id", "shots.clue_id")
+    .join("words", "words.id", "clues.word_id")
+    .whereNotNull("shots.similarity")
+    .groupBy("words.id");
+
   const devicesByDate = await connection
     .table("games")
     .select(connection.raw("COUNT(DISTINCT device_id), DATE(began_at)"))
@@ -116,6 +128,7 @@ server.get("/", async (request, reply) => {
     gamesByDate,
     shotsByDuration,
     devicesBehaviour,
+    wordsPerformance,
   });
 });
 

backend/templates/dashboard.ejs

@@ -93,6 +93,11 @@
                 <script id="devicesBehaviourData"
                     type="application/json"><%- JSON.stringify(devicesBehaviour) %></script>
                 <canvas id="devicesBehaviourChart"></canvas>
+
+                <h1>Words performance</h1>
+                <script id="wordsPerformanceData"
+                    type="application/json"><%- JSON.stringify(wordsPerformance) %></script>
+                <canvas id="wordsPerformanceChart"></canvas>
             </main>
         </div>
     </div>