From 36936cbc7e79e4eef2f2e49432eeb31e4198e5bd Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Tue, 20 Oct 2020 21:53:57 +0200
Subject: Quick and dirty participation statistics
---
admin/public/index.html | 1 +
admin/public/participation.html | 30 ++++++++++++++++++++++++
admin/public/participation.js | 52 +++++++++++++++++++++++++++++++++++++++++
3 files changed, 83 insertions(+)
create mode 100644 admin/public/participation.html
create mode 100644 admin/public/participation.js
(limited to 'admin/public')
diff --git a/admin/public/index.html b/admin/public/index.html
index 389157c..d88d38d 100644
--- a/admin/public/index.html
+++ b/admin/public/index.html
@@ -24,6 +24,7 @@
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="ranking.html" class="pure-menu-link">Ranking</a></li>
<li class="pure-menu-item"><a href="votes.html" class="pure-menu-link">Votes</a></li>
+ <li class="pure-menu-item"><a href="participation.html" class="pure-menu-link">Teilnahme</a></li>
</ul>
</div>
</div>
diff --git a/admin/public/participation.html b/admin/public/participation.html
new file mode 100644
index 0000000..2b132f2
--- /dev/null
+++ b/admin/public/participation.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link
+ rel="stylesheet"
+ href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
+ integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
+ crossorigin="anonymous"
+ />
+ <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+
+ <title>Participation</title>
+ </head>
+ <body>
+ <div class="pure-menu pure-menu-horizontal">
+ <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+ <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+ </div>
+ <div class="card">
+ <button class="pure-button" id="switch">Switch</button>
+ <br />
+ <canvas id="participation" width="400" height="400"></canvas>
+ </div>
+
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
+ <script src="participation.js"></script>
+ </body>
+</html>
diff --git a/admin/public/participation.js b/admin/public/participation.js
new file mode 100644
index 0000000..84525a4
--- /dev/null
+++ b/admin/public/participation.js
@@ -0,0 +1,52 @@
+let date;
+let chart;
+
+fetch("api/participation")
+ .then((response) => response.json())
+ .then((response) => {
+ data = response;
+ console.log(data);
+ render("bar");
+ });
+
+function render(type) {
+ const ctx = document.getElementById("participation").getContext("2d");
+ chart = new Chart(ctx, {
+ type,
+ data: {
+ labels: data.map((v) => v.name),
+ datasets: [
+ {
+ label: "% of Participation",
+ data: data.map((v) => Math.round(v.percentage * 100) / 100 || 0),
+ backgroundColor: () => "#" + (Math.random().toString(16) + "0000000").slice(2, 8),
+ borderWidth: 1,
+ },
+ ],
+ },
+ options: {
+ legend: {
+ display: false,
+ },
+ scales: {
+ yAxes: [
+ {
+ ticks: {
+ beginAtZero: true,
+ precision: 0,
+ },
+ },
+ ],
+ },
+ },
+ });
+}
+
+let index = 0;
+const types = ["pie", "doughnut", "polarArea", "radar", "line", "bar"];
+document.getElementById("switch").addEventListener("click", () => {
+ chart.destroy();
+ render(types[index]);
+ if (index + 1 < types.length) index++;
+ else index = 0;
+});
--
cgit v1.2.3