PixelHosting/Router-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update static/js/pages/history.js

Browse source
This commit is contained in:
Blackwhitebear8 2025-09-18 10:15:16 +02:00
parent b8984f62a6
commit d9fcbab5ba
1 changed files with 82 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

122
static/js/pages/history.js
View file

@ -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 dataset = chartInstance.data.datasets[0];
const validData = (dataset.data || []).filter(val => typeof val === 'number');
pointsForScaling.push(...validData);
});
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 = '<p class="text-danger text-center">Could not load chart data.</p>';
const chartContainers = document.querySelectorAll('.achart-wrapper-chart');
if (chartContainers) {
chartContainers.forEach(container => {
container.innerHTML = '<p class="text-danger text-center">Could not load chart data.</p>';
});
}
}
}
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,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, {
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: {
const commonOptions = {
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);
});