Merge pull request #22 from Roslund/Channel-utilization

Add Channel utilization graf to status page

content/sv/status/index.md

@@ -87,6 +87,13 @@ Visar genomsnittlig batterinivå av de noder som rapporterat batteri nivå och i
 </div>
 
 
+## Channel Utilization
+Visar den genomsnittliga Channel Utilization, det vill säga hur mycket radiofrekvensen används, baserat på rapporter från enheter i meshen. Eftersom enheter inte skickar telemetri när kanalutnyttjandet är högt kan siffran bli missvisande. Detsamma gäller för portabla enheter eller enheter som är placerade inomhus. Förhoppningsvis ger grafen ändå ett värdefullt underlag för att förstå hur meshen mår.
+<div id="channelUtilizationContainer" class="stats-chart-container" style="min-height:300px;">
+    <canvas id="channelUtilizationChart"></canvas>
+</div>
+
+
 ## Hårdvarumodeller
 Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 dagarna.
 <div id="hardwareChartContainer" class="stats-chart-container">
@@ -102,6 +109,7 @@ Graferna baseras på data från [map.sthlm-mesh.se](https://map.sthlm-mesh.se),
 {{% /blocks/section %}}
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
 <script src="https://cdn.jsdelivr.net/npm/luxon"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
 <script src="/js/status/shared.js"></script>
@@ -113,4 +121,5 @@ Graferna baseras på data från [map.sthlm-mesh.se](https://map.sthlm-mesh.se),
 <script src="/js/status/device-roles.js"></script>
 <script src="/js/status/nodes-seen.js"></script>
 <script src="/js/status/firmware-versions.js"></script>
-<script src="/js/status/battery-stats.js"></script>
+<script src="/js/status/battery-stats.js"></script>
+<script src="/js/status/channel-utilization.js"></script>

static/js/status/channel-utilization.js

@@ -0,0 +1,87 @@
+async function channelUtilizationHourlyAverage() {
+  const canvas = document.getElementById('channelUtilizationChart');
+  const ctx = canvas.getContext('2d');
+
+  // show loading
+  ctx.font = '16px Arial';
+  ctx.fillStyle = 'gray';
+  ctx.textAlign = 'center';
+  ctx.fillText('Loading...', canvas.width/2, canvas.height/2);
+
+  try {
+    const response = await fetch('https://map.sthlm-mesh.se/api/v1/stats/channel-utilization-stats?days=7');
+    const data = await response.json();
+
+    const labels = data.map(entry => entry.recorded_at);
+    const values = data.map(entry => parseFloat(entry.avg_channel_utilization));
+
+    new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: [{
+          label: 'Hourly Avg Channel Utilization',
+          data: values,
+          borderColor: 'rgb(15, 169, 252)',
+          borderWidth: 2,
+          tension: 0.1,
+          pointRadius: 0,
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            type: 'time',
+            time: {
+              unit: 'day',
+              tooltipFormat: 'yyyy-MM-dd HH:mm',
+              displayFormats: { day: 'yyyy-MM-dd' }
+            },
+          },
+          y: {
+            min: 11,
+            max: 14,
+            title: { display: true, text: 'Avg. Channel Utilization (%)' }
+          }
+        },
+        plugins: {
+          legend: { display: false },
+          tooltip: { mode: 'index', intersect: false },
+          annotation: {
+            annotations: {
+              bad: {
+                type: 'box',
+                yMin: 13,
+                yMax: 15,
+                backgroundColor: 'rgba(255, 0, 0, 0.2)'
+              },
+              medium: {
+                type: 'box',
+                yMin: 12,
+                yMax: 13,
+                backgroundColor: 'rgba(234, 184, 57, 0.2)', //'rgba(255, 165, 0, 0.1)'
+              },
+              good: {
+                type: 'box',
+                yMin: 0,
+                yMax: 12,
+                backgroundColor: 'rgba(1, 163, 23, 0.1)', //'rgba(0, 128, 0, 0.1)'
+              }
+            }
+          }
+        }
+      }
+    });
+
+  } catch (err) {
+    console.error('Error loading channel utilization:', err);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = 'red';
+    ctx.fillText('Error loading data', canvas.width/2, canvas.height/2);
+  }
+
+}
+
+channelUtilizationHourlyAverage();