Add static/js/pages/akvorado.js

2025-06-21 14:29:14 +02:00 · 2025-06-21 14:29:14 +02:00 · 1ea5ad4551
commit 1ea5ad4551
parent 1fee2e3dcf
1 changed files with 85 additions and 0 deletions
--- a/static/js/pages/akvorado.js
+++ 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);
+});