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

242
templates/index.html
View File

@@ -33,109 +33,153 @@
<script>
var chartData = {{ chart_data | tojson }};
Chart.register(window['chartjs-plugin-annotation']);
const acceptableDownloadRange = {
min: 600, // Replace with your desired range
max: 1000
};
var chartData = {{ chart_data | tojson }};
const acceptableUploadRange = {
min: 15,
max: 50
};
const acceptableDownloadRange = {
min: 600,
max: 1000
};
const times = chartData.times;
const downloadMinBand = times.map(() => acceptableDownloadRange.min);
const downloadMaxBand = times.map(() => acceptableDownloadRange.max);
const uploadMinBand = times.map(() => acceptableUploadRange.min);
const uploadMaxBand = times.map(() => acceptableUploadRange.max);
const acceptableUploadRange = {
min: 15,
max: 50
};
var ctx = document.getElementById('speedChart').getContext('2d');
var speedChart = new Chart(ctx, {
type: 'line',
data: {
labels: times,
datasets: [
{
label: 'Download Speed',
data: chartData.down_90th,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
},
{
label: 'Upload Speed',
data: chartData.up_90th,
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
},
// Acceptable download range band
{
label: 'Acceptable Download Range',
data: downloadMinBand,
borderColor: 'rgba(0, 200, 0, 0.1)',
backgroundColor: 'rgba(0, 200, 0, 0.1)',
fill: '+1',
pointRadius: 0,
borderWidth: 0
},
{
data: downloadMaxBand,
borderColor: 'rgba(0, 200, 0, 0.1)',
backgroundColor: 'rgba(0, 200, 0, 0.1)',
fill: false,
pointRadius: 0,
borderWidth: 0
},
// Acceptable upload range band
{
label: 'Acceptable Upload Range',
data: uploadMinBand,
borderColor: 'rgba(255, 165, 0, 0.1)',
backgroundColor: 'rgba(255, 165, 0, 0.1)',
fill: '+1',
pointRadius: 0,
borderWidth: 0
},
{
data: uploadMaxBand,
borderColor: 'rgba(255, 165, 0, 0.1)',
backgroundColor: 'rgba(255, 165, 0, 0.1)',
fill: false,
pointRadius: 0,
borderWidth: 0
}
]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
filter: function(item, chart) {
// Hide max band labels
return item.text !== undefined;
}
}
}
},
scales: {
x: {
type: 'category',
title: {
display: true,
text: 'Time'
}
},
y: {
title: {
display: true,
text: 'Speed (Mbps)'
}
}
}
}
const times = chartData.times;
const downloadMinBand = times.map(() => acceptableDownloadRange.min);
const downloadMaxBand = times.map(() => acceptableDownloadRange.max);
const uploadMinBand = times.map(() => acceptableUploadRange.min);
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
});
</script>
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 speedChart = new Chart(ctx, {
type: 'line',
data: {
labels: times,
datasets: [
{
label: 'Download Speed',
data: chartData.down_90th,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
},
{
label: 'Upload Speed',
data: chartData.up_90th,
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
},
{
label: 'Acceptable Download Range',
data: downloadMinBand,
borderColor: 'rgba(0, 200, 0, 0.1)',
backgroundColor: 'rgba(0, 200, 0, 0.1)',
fill: '+1',
pointRadius: 0,
borderWidth: 0
},
{
data: downloadMaxBand,
borderColor: 'rgba(0, 200, 0, 0.1)',
backgroundColor: 'rgba(0, 200, 0, 0.1)',
fill: false,
pointRadius: 0,
borderWidth: 0
},
{
label: 'Acceptable Upload Range',
data: uploadMinBand,
borderColor: 'rgba(255, 165, 0, 0.1)',
backgroundColor: 'rgba(255, 165, 0, 0.1)',
fill: '+1',
pointRadius: 0,
borderWidth: 0
},
{
data: uploadMaxBand,
borderColor: 'rgba(255, 165, 0, 0.1)',
backgroundColor: 'rgba(255, 165, 0, 0.1)',
fill: false,
pointRadius: 0,
borderWidth: 0
}
]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
filter: function(item) {
return item.text !== undefined;
}
}
},
annotation: {
annotations: annotations
}
},
scales: {
x: {
type: 'category',
title: {
display: true,
text: 'Time'
}
},
y: {
title: {
display: true,
text: 'Speed (Mbps)'
},
min: 0
}
}
}
});
</script>
{% endblock %}

1
templates/layout.html
View File

@@ -6,6 +6,7 @@
<title>Speed Test Results</title>
<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/chartjs-plugin-annotation"></script>
</head>
<body>
<header>