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];
-        
+        const validData = (dataset.data || []).filter(val => typeof val === 'number');
-        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,7 +74,54 @@ document.addEventListener('DOMContentLoaded', function () {
         const ipv4Label = `Total IPv4 Routes: ${ipv4LastValue.toLocaleString()}`;
         const ipv6Label = `Total IPv6 Routes: ${ipv6LastValue.toLocaleString()}`;
 
-        chart = new Chart(ctx, {
+        const commonOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: {
+                intersect: false,
+                mode: 'index',
+            },
+            scales: {
+                x: {
+                    type: 'time',
+                    time: {
+                        unit: 'minute',
+                        stepSize: 30,
+                        displayFormats: {
+                            minute: 'HH:mm',
+                            hour: 'HH:mm'
+                        }
+                    }
+                },
+                y: { }
+            },
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        title: function(context) {
+                            if (!context[0]) return '';
+                            return new Date(context[0].parsed.x).toLocaleString([], {
+                                year: 'numeric', month: 'short', day: 'numeric',
+                                hour: '2-digit', minute: '2-digit', hour12: false
+                            });
+                        },
+                        label: function(context) {
+                            let label = context.dataset.label.split(':')[0] || '';
+                            if (label) label += ': ';
+                            if (context.parsed.y !== null) {
+                                label += context.parsed.y.toLocaleString();
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        };
+
+        ipv4Chart = new Chart(ipv4Ctx, {
             type: 'line',
             data: {
                 labels: data.labels,
@@ -92,7 +136,17 @@ document.addEventListener('DOMContentLoaded', function () {
                         spanGaps: true,
                         fill: true,
                         backgroundColor: 'rgba(54, 162, 235, 0.1)',
-                    },
+                    }
+                ]
+            },
+            options: { ...commonOptions }
+        });
+
+        ipv6Chart = new Chart(ipv6Ctx, {
+            type: 'line',
+            data: {
+                labels: data.labels,
+                datasets: [
                     {
                         label: ipv6Label,
                         data: data.ipv6_routes,
@@ -106,62 +160,12 @@ document.addEventListener('DOMContentLoaded', function () {
                     }
                 ]
             },
-            options: {
+            options: { ...commonOptions }
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: {
-                    intersect: false,
-                    mode: 'index',
-                },
-                scales: {
-                    x: {
-                        type: 'time',
-                        time: {
-                            unit: 'minute',
-                            stepSize: 30,
-                            displayFormats: {
-                                minute: 'HH:mm',
-                                hour: 'HH:mm'
-                            }
-                        }
-                    },
-                    y: { }
-                },
-                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: {
-                            title: function(context) {
-                                if (!context[0]) return '';
-                                return new Date(context[0].parsed.x).toLocaleString([], {
-                                    year: 'numeric', month: 'short', day: 'numeric',
-                                    hour: '2-digit', minute: '2-digit', hour12: false
-                                });
-                            },
-                            label: function(context) {
-                                let label = context.dataset.label.split(':')[0] || '';
-                                if (label) label += ': ';
-                                if (context.parsed.y !== null) {
-                                    label += context.parsed.y.toLocaleString();
-                                }
-                                return label;
-                            }
-                        }
-                    }
-                }
-            }
         });
 
-        updateChartScale(chart);
+        updateChartScale(ipv4Chart);
+        updateChartScale(ipv6Chart);
     }
 
-    fetchDataAndRenderChart(currentRange);
+    fetchDataAndRenderCharts(currentRange);
 });