From d9fcbab5ba74838fd15481dcf1fabc505a443a05 Mon Sep 17 00:00:00 2001 From: Blackwhitebear8 Date: Thu, 18 Sep 2025 10:15:16 +0200 Subject: [PATCH] Update static/js/pages/history.js --- static/js/pages/history.js | 160 +++++++++++++++++++------------------ 1 file changed, 82 insertions(+), 78 deletions(-) diff --git a/static/js/pages/history.js b/static/js/pages/history.js index 7422f9f..74e9dc0 100644 --- a/static/js/pages/history.js +++ b/static/js/pages/history.js @@ -1,6 +1,7 @@ document.addEventListener('DOMContentLoaded', function () { - const ctx = document.getElementById('totalRoutesChart').getContext('2d'); - let chart; + const ipv4Ctx = document.getElementById('ipv4RoutesChart').getContext('2d'); + 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); - - let pointsForScaling = []; - visibleDatasets.forEach(dataset => { - const validData = (dataset.data || []).filter(val => typeof val === 'number'); - pointsForScaling.push(...validData); - }); + const dataset = chartInstance.data.datasets[0]; + const validData = (dataset.data || []).filter(val => typeof val === 'number'); let suggestedMin, suggestedMax; - if (pointsForScaling.length > 0) { - const minValue = Math.min(...pointsForScaling); - const maxValue = Math.max(...pointsForScaling); + if (validData.length > 0) { + const minValue = Math.min(...validData); + 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'); - if (chartContainer) { - chartContainer.innerHTML = '

Could not load chart data.

'; + const chartContainers = document.querySelectorAll('.achart-wrapper-chart'); + if (chartContainers) { + chartContainers.forEach(container => { + container.innerHTML = '

Could not load chart data.

'; + }); } } } - function renderChart(data) { - if (chart) { - chart.destroy(); - } + function renderCharts(data) { + if (ipv4Chart) ipv4Chart.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: { - 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; - } - } - } - } - } + options: { ...commonOptions } }); - updateChartScale(chart); + updateChartScale(ipv4Chart); + updateChartScale(ipv6Chart); } - fetchDataAndRenderChart(currentRange); + fetchDataAndRenderCharts(currentRange); }); \ No newline at end of file