cato447/speed-logger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated graph

Browse Source
This commit is contained in:
Simon Bußmann
2025-05-05 01:55:04 +02:00
parent dcb8d082f4
commit 0787efb76d
2 changed files with 144 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/index.html
View File

@@ -33,10 +33,12 @@
<script> <script>
Chart.register(window['chartjs-plugin-annotation']);
var chartData = {{ chart_data | tojson }}; var chartData = {{ chart_data | tojson }};
const acceptableDownloadRange = { const acceptableDownloadRange = {
min: 600, // Replace with your desired range min: 600,
max: 1000 max: 1000
}; };
@@ -46,11 +48,52 @@
}; };
const times = chartData.times; const times = chartData.times;
const downloadMinBand = times.map(() => acceptableDownloadRange.min); const downloadMinBand = times.map(() => acceptableDownloadRange.min);
const downloadMaxBand = times.map(() => acceptableDownloadRange.max); const downloadMaxBand = times.map(() => acceptableDownloadRange.max);
const uploadMinBand = times.map(() => acceptableUploadRange.min); const uploadMinBand = times.map(() => acceptableUploadRange.min);
const uploadMaxBand = times.map(() => acceptableUploadRange.max); const uploadMaxBand = times.map(() => acceptableUploadRange.max);
// --- Build annotation boxes for NaN spans ---
const annotations = [];
let inGap = false;
let gapStart = null;
for (let i = 0; i < times.length; i++) {
const down = chartData.down_90th[i];
const up = chartData.up_90th[i];
const isNan = isNaN(down) || isNaN(up);
if (!inGap && isNan) {
inGap = true;
gapStart = times[i];
}
if (inGap && !isNan) {
const gapEnd = times[i];
annotations.push({
type: 'box',
xMin: gapStart,
xMax: gapEnd,
backgroundColor: 'rgba(255, 0, 0, 0.15)',
borderWidth: 0
});
inGap = false;
}
}
// Close trailing gap if it reaches the end
if (inGap) {
annotations.push({
type: 'box',
xMin: gapStart,
xMax: times[times.length - 1],
backgroundColor: 'rgba(255, 0, 0, 0.15)',
borderWidth: 0
});
}
var ctx = document.getElementById('speedChart').getContext('2d'); var ctx = document.getElementById('speedChart').getContext('2d');
var speedChart = new Chart(ctx, { var speedChart = new Chart(ctx, {
type: 'line', type: 'line',
@@ -69,7 +112,6 @@
borderColor: 'rgba(153, 102, 255, 1)', borderColor: 'rgba(153, 102, 255, 1)',
fill: false fill: false
}, },
// Acceptable download range band
{ {
label: 'Acceptable Download Range', label: 'Acceptable Download Range',
data: downloadMinBand, data: downloadMinBand,
@@ -87,7 +129,6 @@
pointRadius: 0, pointRadius: 0,
borderWidth: 0 borderWidth: 0
}, },
// Acceptable upload range band
{ {
label: 'Acceptable Upload Range', label: 'Acceptable Upload Range',
data: uploadMinBand, data: uploadMinBand,
@@ -112,11 +153,13 @@
plugins: { plugins: {
legend: { legend: {
labels: { labels: {
filter: function(item, chart) { filter: function(item) {
// Hide max band labels
return item.text !== undefined; return item.text !== undefined;
} }
} }
},
annotation: {
annotations: annotations
} }
}, },
scales: { scales: {
@@ -131,7 +174,8 @@
title: { title: {
display: true, display: true,
text: 'Speed (Mbps)' text: 'Speed (Mbps)'
} },
min: 0
} }
} }
} }

1
templates/layout.html
View File

@@ -6,6 +6,7 @@
<title>Speed Test Results</title> <title>Speed Test Results</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
</head> </head>
<body> <body>
<header> <header>