From 1ea5ad4551d6211aaf42497521c769b09f7cba5f Mon Sep 17 00:00:00 2001
From: Blackwhitebear8 <blackwhitebear8@git@pixelhosting.nl>
Date: Sat, 21 Jun 2025 14:29:14 +0200
Subject: [PATCH] Add static/js/pages/akvorado.js

---
 static/js/pages/akvorado.js | 85 +++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 static/js/pages/akvorado.js

diff --git a/static/js/pages/akvorado.js b/static/js/pages/akvorado.js
new file mode 100644
index 0000000..4e28f47
--- /dev/null
+++ b/static/js/pages/akvorado.js
@@ -0,0 +1,85 @@
+const chartInstances = {};
+
+async function loadPieChart(endpoint, canvasId, legendId) {
+    try {
+        const res = await fetch(endpoint);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json = await res.json();
+
+        const canvas = document.getElementById(canvasId);
+        const legend = document.getElementById(legendId);
+
+        if (!json.top || json.top.length === 0) {
+            legend.innerHTML = "<p>Geen data ontvangen.</p>";
+            return;
+        }
+
+        const totalPercent = json.top.reduce((sum, item) => sum + item.percent, 0);
+        let topData = [...json.top];
+        if (totalPercent < 100) {
+            topData.push({ name: "Other", percent: 100 - totalPercent });
+        }
+
+        const labels = topData.map(item => item.name);
+        const data = topData.map(item => item.percent);
+        const colors = labels.map((label, i) =>
+            label === "Other" ? "#888888" : `hsl(${i * 57 % 360}, 70%, 60%)`
+        );
+
+        if (!chartInstances[canvasId]) {
+            const ctx = canvas.getContext("2d");
+            chartInstances[canvasId] = new Chart(ctx, {
+                type: "pie",
+                data: {
+                    labels,
+                    datasets: [{
+                        data,
+                        backgroundColor: colors
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        tooltip: {
+                            callbacks: {
+                                label: ctx => `${ctx.label}: ${ctx.parsed.toFixed(2)}%`
+                            }
+                        },
+                        legend: { display: false }
+                    }
+                }
+            });
+        } else {
+            const chart = chartInstances[canvasId];
+            chart.data.labels = labels;
+            chart.data.datasets[0].data = data;
+            chart.data.datasets[0].backgroundColor = colors;
+            chart.update();
+        }
+
+        legend.innerHTML = "";
+        const ul = document.createElement("ul");
+        topData.forEach((item, i) => {
+            const label = item.name === "Other" ? "Other" : item.name.split(":")[0].trim();
+            ul.innerHTML += `<li><span class="alegend-color" style="background:${colors[i]}"></span>${label}</li>`;
+        });
+        legend.appendChild(ul);
+
+    } catch (err) {
+        console.error(err);
+        document.getElementById(legendId).innerHTML = `<p style="color:red">Fout bij ophalen van data: ${err.message}</p>`;
+    }
+}
+
+function loadAllCharts() {
+    loadPieChart("/stats/src-as", "pieChart1", "legend1");
+    loadPieChart("/stats/src-ports", "pieChart2", "legend2");
+    loadPieChart("/stats/protocol", "pieChart3", "legend3");
+    loadPieChart("/stats/src-country", "pieChart4", "legend4");
+    loadPieChart("/stats/etype", "pieChart5", "legend5");
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    loadAllCharts();
+    setInterval(loadAllCharts, 60000);
+});
\ No newline at end of file