From 198f072a49c6cc76bfdb109fd8da5087ee70d7d9 Mon Sep 17 00:00:00 2001
From: Paolo Brasolin <paolo.brasolin@eurac.edu>
Date: Wed, 30 Mar 2022 14:57:00 +0200
Subject: [PATCH] feat: #be add shot count to dashboard
---
backend/public/dashboard.js | 41 +++++++++++++++++++++++++++++++++
backend/src/index.ts | 14 ++++++++++-
backend/templates/dashboard.ejs | 7 ++++--
3 files changed, 59 insertions(+), 3 deletions(-)
diff --git a/backend/public/dashboard.js b/backend/public/dashboard.js
index 5caea6f..a5625cf 100644
--- a/backend/public/dashboard.js
+++ b/backend/public/dashboard.js
@@ -1,3 +1,5 @@
+//=[ 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,
+);
diff --git a/backend/src/index.ts b/backend/src/index.ts
index cf1e0c4..9253cb7 100644
--- a/backend/src/index.ts
+++ b/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/",
diff --git a/backend/templates/dashboard.ejs b/backend/templates/dashboard.ejs
index 79a5234..9cadcd8 100644
--- a/backend/templates/dashboard.ejs
+++ b/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>
--
GitLab