"Tob dich aus, Marvin!"

2 files changed, 45 insertions, 29 deletions

diff --git a/admin/public/votes.html b/admin/public/votes.html
index cd9563c..b700ed9 100644
--- a/admin/public/votes.html
+++ b/admin/public/votes.html
@@ -19,6 +19,8 @@
             <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="votes" width="400" height="400"></canvas>
         </div>
 
diff --git a/admin/public/votes.js b/admin/public/votes.js
index 3f1284c..62ff374 100644
--- a/admin/public/votes.js
+++ b/admin/public/votes.js
@@ -1,37 +1,51 @@
+let date;
+let chart;
+
 fetch("api/votes")
     .then((response) => response.json())
     .then((response) => {
-        const ctx = document.getElementById("votes").getContext("2d");
-        new Chart(ctx, {
-            type: "bar",
-            data: {
-                labels: response.map((v) => v.name),
-                datasets: [
+        data = response;
+        render("bar");
+    });
+
+function render(type) {
+    const ctx = document.getElementById("votes").getContext("2d");
+    chart = new Chart(ctx, {
+        type,
+        data: {
+            labels: data.map((v) => v.name),
+            datasets: [
+                {
+                    label: "# of Votes",
+                    data: data.map((v) => v.votes || 0),
+                    backgroundColor: () => "#" + (Math.random().toString(16) + "0000000").slice(2, 8),
+                    borderWidth: 1,
+                },
+            ],
+        },
+        options: {
+            legend: {
+                display: false,
+            },
+            scales: {
+                yAxes: [
                     {
-                        label: "# of Votes",
-                        data: response.map((v) => v.votes || 0),
-                        backgroundColor: () => "#" + (Math.random().toString(16) + "0000000").slice(2, 8),
-                        borderWidth: 1,
+                        ticks: {
+                            beginAtZero: true,
+                            precision: 0,
+                        },
                     },
                 ],
             },
-            options: {
-                legend: {
-                    display: false,
-                },
-                tooltips: {
-                    enabled: 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;
+});