Update static/js/pages/history.js

static/js/pages/history.js

@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', function () {
-    const ctx = document.getElementById('totalRoutesChart').getContext('2d');
+    const ipv4Ctx = document.getElementById('ipv4RoutesChart').getContext('2d');
-    let chart;
+    const ipv6Ctx = document.getElementById('ipv6RoutesChart').getContext('2d');
+    let ipv4Chart, ipv6Chart;
     let currentRange = '24h';
 
     const timeRangeButtons = document.querySelectorAll('.btn-group .btn');
@@ -10,24 +11,19 @@ document.addEventListener('DOMContentLoaded', function () {
             currentRange = button.getAttribute('data-range');
             timeRangeButtons.forEach(btn => btn.classList.remove('active'));
             button.classList.add('active');
-            fetchDataAndRenderChart(currentRange);
+            fetchDataAndRenderCharts(currentRange);
         });
     });
 
     function updateChartScale(chartInstance) {
-        const visibleDatasets = chartInstance.data.datasets.filter(dataset => !dataset.hidden);
+        const dataset = chartInstance.data.datasets[0];
-        
-        let pointsForScaling = [];
-        visibleDatasets.forEach(dataset => {
         const validData = (dataset.data || []).filter(val => typeof val === 'number');
-            pointsForScaling.push(...validData);
-        });
 
         let suggestedMin, suggestedMax;
 
-        if (pointsForScaling.length > 0) {
+        if (validData.length > 0) {
-            const minValue = Math.min(...pointsForScaling);
+            const minValue = Math.min(...validData);
-            const maxValue = Math.max(...pointsForScaling);
+            const maxValue = Math.max(...validData);
             const padding = (maxValue - minValue) * 0.1 || 200;
 
             suggestedMin = Math.floor(minValue - padding);
@@ -42,25 +38,26 @@ document.addEventListener('DOMContentLoaded', function () {
         chartInstance.update();
     }
 
-    async function fetchDataAndRenderChart(range) {
+    async function fetchDataAndRenderCharts(range) {
         try {
             const response = await fetch(`/history/api/total-routes?range=${range}`);
             if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
             const data = await response.json();
-            renderChart(data);
+            renderCharts(data);
         } catch (error) {
             console.error('Error fetching chart data:', error);
-            const chartContainer = document.querySelector('.achart-wrapper-chart');
+            const chartContainers = document.querySelectorAll('.achart-wrapper-chart');
-            if (chartContainer) {
+            if (chartContainers) {
-                 chartContainer.innerHTML = '<p class="text-danger text-center">Could not load chart data.</p>';
+                 chartContainers.forEach(container => {
+                    container.innerHTML = '<p class="text-danger text-center">Could not load chart data.</p>';
+                 });
             }
         }
     }
 
-    function renderChart(data) {
+    function renderCharts(data) {
-        if (chart) {
+        if (ipv4Chart) ipv4Chart.destroy();
-            chart.destroy();
+        if (ipv6Chart) ipv6Chart.destroy();
-        }
 
         const findLastValue = (arr) => {
             for (let i = arr.length - 1; i >= 0; i--) {
@@ -77,36 +74,7 @@ document.addEventListener('DOMContentLoaded', function () {
         const ipv4Label = `Total IPv4 Routes: ${ipv4LastValue.toLocaleString()}`;
         const ipv6Label = `Total IPv6 Routes: ${ipv6LastValue.toLocaleString()}`;
 
-        chart = new Chart(ctx, {
+        const commonOptions = {
-            type: 'line',
-            data: {
-                labels: data.labels,
-                datasets: [
-                    {
-                        label: ipv4Label,
-                        data: data.ipv4_routes,
-                        borderColor: 'rgb(54, 162, 235)',
-                        borderWidth: 1.5,
-                        pointRadius: 2,
-                        pointHoverRadius: 5,
-                        spanGaps: true,
-                        fill: true,
-                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
-                    },
-                    {
-                        label: ipv6Label,
-                        data: data.ipv6_routes,
-                        borderColor: 'rgb(255, 99, 132)',
-                        borderWidth: 1.5,
-                        pointRadius: 2,
-                        pointHoverRadius: 5,
-                        spanGaps: true,
-                        fill: true,
-                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
-                    }
-                ]
-            },
-            options: {
             responsive: true,
             maintainAspectRatio: false,
             interaction: {
@@ -130,12 +98,6 @@ document.addEventListener('DOMContentLoaded', function () {
             plugins: {
                 legend: {
                     position: 'top',
-                        onClick: (e, legendItem, legend) => {
-                            const chartInstance = legend.chart;
-                            const index = legendItem.datasetIndex;
-                            chartInstance.data.datasets[index].hidden = !chartInstance.data.datasets[index].hidden;
-                            updateChartScale(chartInstance);
-                        }
                 },
                 tooltip: {
                     callbacks: {
@@ -157,11 +119,53 @@ document.addEventListener('DOMContentLoaded', function () {
                     }
                 }
             }
+        };
+
+        ipv4Chart = new Chart(ipv4Ctx, {
+            type: 'line',
+            data: {
+                labels: data.labels,
+                datasets: [
+                    {
+                        label: ipv4Label,
+                        data: data.ipv4_routes,
+                        borderColor: 'rgb(54, 162, 235)',
+                        borderWidth: 1.5,
+                        pointRadius: 2,
+                        pointHoverRadius: 5,
+                        spanGaps: true,
+                        fill: true,
+                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
                     }
+                ]
+            },
+            options: { ...commonOptions }
         });
 
-        updateChartScale(chart);
+        ipv6Chart = new Chart(ipv6Ctx, {
+            type: 'line',
+            data: {
+                labels: data.labels,
+                datasets: [
+                    {
+                        label: ipv6Label,
+                        data: data.ipv6_routes,
+                        borderColor: 'rgb(255, 99, 132)',
+                        borderWidth: 1.5,
+                        pointRadius: 2,
+                        pointHoverRadius: 5,
+                        spanGaps: true,
+                        fill: true,
+                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
+                    }
+                ]
+            },
+            options: { ...commonOptions }
+        });
+
+        updateChartScale(ipv4Chart);
+        updateChartScale(ipv6Chart);
     }
 
-    fetchDataAndRenderChart(currentRange);
+    fetchDataAndRenderCharts(currentRange);
 });