diff --git a/backend/public/dashboard.js b/backend/public/dashboard.js index e09fd77a7b75b8dcc1a87e846797373a94ccc935..5326d0e74c180dba79459507e41449d12c45d14d 100644 --- a/backend/public/dashboard.js +++ b/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, +); diff --git a/backend/src/index.ts b/backend/src/index.ts index f69aecb56b5c182df2bafd33c7ae66a7f1c5a20f..47eb190bc27fee83e5faf238d7dc2ce8ba83e256 100644 --- a/backend/src/index.ts +++ b/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, }); }); diff --git a/backend/templates/dashboard.ejs b/backend/templates/dashboard.ejs index 669bee2c75625b62be53d04c529530b8679394b7..20dd2f73e830cd7b28700548b02dd871c6830d5b 100644 --- a/backend/templates/dashboard.ejs +++ b/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>