an0n.eu/sthlm-mesh
1
0
Fork 0
forked from iarv/sthlm-mesh
Code Pull Requests Activity

Add channel utilization period selection

Browse Source
This commit is contained in:
Anton Roslund
2025-12-29 11:02:05 +01:00
parent 110f317909
commit 3fd22b0f9f
2 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
content/sv/status/index.md
View File

@@ -48,6 +48,16 @@ Kanalutnyttjande (Channel Utilization) visar hur mycket av radiokanalen som är
</div>
</div>
</div>
<div class="btn-group btn-group-sm mb-1" role="group" aria-label="Channel utilization period">
<input type="radio" class="btn-check" name="chUtilPeriod" id="chUtil7" value="7" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="chUtil7">7 dagar</label>
<input type="radio" class="btn-check" name="chUtilPeriod" id="chUtil14" value="14" autocomplete="off">
<label class="btn btn-outline-primary" for="chUtil14">14 dagar</label>
<input type="radio" class="btn-check" name="chUtilPeriod" id="chUtil30" value="30" autocomplete="off">
<label class="btn btn-outline-primary" for="chUtil30">30 dagar</label>
<input type="radio" class="btn-check" name="chUtilPeriod" id="chUtil60" value="60" autocomplete="off">
<label class="btn btn-outline-primary" for="chUtil60">60 dagar</label>
</div>
<div id="channelUtilizationContainer" class="stats-chart-container" style="min-height:300px;">
<canvas id="channelUtilizationChart"></canvas>
</div>

19
static/js/status/channel-utilization.js
View File

@@ -1,7 +1,15 @@
async function channelUtilizationHourlyAverage() {
let chUtilChart = null;
async function channelUtilizationHourlyAverage(days = 7) {
const canvas = document.getElementById('channelUtilizationChart');
const ctx = canvas.getContext('2d');
// Destroy existing chart if any
if (chUtilChart) {
chUtilChart.destroy();
chUtilChart = null;
}
// show loading
ctx.font = '16px Arial';
ctx.fillStyle = 'gray';
@@ -9,8 +17,7 @@ async function channelUtilizationHourlyAverage() {
ctx.fillText('Loading...', canvas.width/2, canvas.height/2);
try {
// Fetch data for MediumFast over the last 7 days
const response = await fetch('https://map.sthlm-mesh.se/api/v1/stats/channel-utilization-stats?days=7&channel_id=MediumFast');
const response = await fetch(`https://map.sthlm-mesh.se/api/v1/stats/channel-utilization-stats?days=${days}&channel_id=MediumFast`);
const allData = await response.json();
// Single dataset containing all points
@@ -32,7 +39,7 @@ async function channelUtilizationHourlyAverage() {
fill: false,
});
new Chart(ctx, {
chUtilChart = new Chart(ctx, {
type: 'line',
data: {
datasets: datasets
@@ -95,4 +102,8 @@ async function channelUtilizationHourlyAverage() {
}
document.querySelectorAll('input[name="chUtilPeriod"]').forEach(radio => {
radio.addEventListener('change', e => channelUtilizationHourlyAverage(e.target.value));
});
channelUtilizationHourlyAverage();