diff options
| author | Marvin Borner | 2020-10-20 21:53:57 +0200 |
|---|---|---|
| committer | Marvin Borner | 2020-10-20 21:54:15 +0200 |
| commit | 36936cbc7e79e4eef2f2e49432eeb31e4198e5bd (patch) | |
| tree | 8f54b905a24c92aff95957c867891a37d11e8723 /admin/public | |
| parent | 5e345852a79e7f803d7796cb14c0c13a5be3ad14 (diff) | |
Quick and dirty participation statistics
Diffstat (limited to 'admin/public')
| -rw-r--r-- | admin/public/index.html | 1 | ||||
| -rw-r--r-- | admin/public/participation.html | 30 | ||||
| -rw-r--r-- | admin/public/participation.js | 52 |
3 files changed, 83 insertions, 0 deletions
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; +}); |