Update static/js/pages/akvorado.js

static/js/pages/akvorado.js

@@ -82,4 +82,92 @@ function loadAllCharts() {
 window.addEventListener("DOMContentLoaded", () => {
     loadAllCharts();
     setInterval(loadAllCharts, 60000);
+});
+
+let chart;
+
+async function fetchData() {
+  const response = await fetch('/stats/graph');
+  const jsonData = await response.json();
+
+  const labels = jsonData.data.map(item => {
+    const date = new Date(item.t);
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${day}/${month}/${year} ${hours}:${minutes}`;
+  });
+
+  const rawData = jsonData.data.map(item => item.gbps);
+  const maxVal = Math.max(...rawData);
+  const scaleFactor = maxVal < 1 ? 1000 : 1;
+  const unitLabel = maxVal < 1 ? 'Mbit/s' : 'Gbit/s';
+  const data = rawData.map(v => v * scaleFactor);
+
+  return { labels, data, unitLabel };
+}
+
+async function initChart() {
+  const ctx = document.getElementById('liveChart').getContext('2d');
+  const { labels, data, unitLabel } = await fetchData();
+
+  chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [{
+        label: `Network traffic (${unitLabel})`,
+        data,
+        borderColor: 'blue',
+        backgroundColor: 'rgba(0,0,255,0.1)',
+        fill: true,
+        pointRadius: 0,
+        pointHoverRadius: 5
+      }]
+    },
+    options: {
+      responsive: true,
+      scales: {
+        y: {
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: unitLabel
+          }
+        },
+        x: {
+          title: {
+            display: true,
+            text: 'Time'
+          }
+        }
+      },
+      interaction: {
+        mode: 'index',
+        intersect: false
+      },
+      plugins: {
+        tooltip: { enabled: true },
+        legend: { display: true }
+      }
+    }
+  });
+}
+
+async function updateChart() {
+  const { labels, data, unitLabel } = await fetchData();
+  chart.data.labels = labels;
+  chart.data.datasets[0].data = data;
+  chart.options.scales.y.title.text = unitLabel;
+  chart.data.datasets[0].label = `Network traffic (${unitLabel})`;
+  chart.update();
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  loadAllCharts();
+  initChart();
+  setInterval(loadAllCharts, 60000);
+  setInterval(updateChart, 60000);
 });