219 lines
5.3 KiB
HTML
219 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Internet Speed Dashboard</title>
|
|
|
|
<!-- DataTables CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
|
|
/>
|
|
|
|
<!-- jQuery + DataTables JS -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
|
|
|
<!-- Chart.js core (umd build) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
|
|
|
|
<!-- date adapter (Moment.js + Chart.js adapter) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment/dist/chartjs-adapter-moment.min.js"></script>
|
|
|
|
<!-- zoom & pan plugin -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
|
|
|
|
<style>
|
|
body { font-family: sans-serif; margin: 2rem; }
|
|
#speedChart { max-width: 100%; margin-bottom: 2rem; }
|
|
table.dataTable { width: 100% !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>90th-Percentile Speeds (Aggregated every {{ aggregation }})</h1>
|
|
|
|
<!-- Chart -->
|
|
<canvas id="speedChart" width="800" height="300"></canvas>
|
|
|
|
<script>
|
|
var chartData = {{ chart_data | tojson }};
|
|
|
|
const acceptableDownloadRange = {
|
|
min: 600,
|
|
max: 1000
|
|
};
|
|
|
|
const acceptableUploadRange = {
|
|
min: 15,
|
|
max: 50
|
|
};
|
|
|
|
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
|
|
});
|
|
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>
|
|
|
|
<!-- Data table -->
|
|
<h2>Raw Data</h2>
|
|
<table id="speedTable" class="display">
|
|
<thead>
|
|
<tr>
|
|
<th>Recorded At</th>
|
|
<th>Download (90th)</th>
|
|
<th>Upload (90th)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in data %}
|
|
<tr>
|
|
<td>{{ row.datetime }}</td>
|
|
<td>{{ row.down_90th }}</td>
|
|
<td>{{ row.up_90th }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#speedTable').DataTable({
|
|
pageLength: 50,
|
|
order: [[0, 'desc']]
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|