85 lines
No EOL
3 KiB
JavaScript
85 lines
No EOL
3 KiB
JavaScript
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);
|
|
}); |