Add battery stats

content/sv/status/index.md

@@ -81,17 +81,12 @@ Antalet enheter av firmware version som synts i meshet de senaste 30 dagarna. In
 
 
 ## Batteri
+Visar genomsnittlig batterinivå av de noder som rapporterat batteri nivå och inte har fast strömförsörjning.
 <div id="batteryContainer" class="stats-chart-container" style="min-height:300px;">
     <canvas id="batteryChart"></canvas>
 </div>
 
 
-## Channel Utilization
-<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">
@@ -118,5 +113,4 @@ 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/channel-utilization.js"></script>
+<script src="/js/status/battery-stats.js"></script>

static/js/status/battery-stats.js

@@ -0,0 +1,74 @@
+async function batteryStatsGraph() {
+    const canvas = document.getElementById('batteryChart');
+    const ctx = canvas.getContext('2d');
+
+    // Show "Loading..." message
+    ctx.font = '16px Arial';
+    ctx.fillStyle = 'gray';
+    ctx.textAlign = 'center';
+    ctx.fillText('Loading battery data...', canvas.width / 2, canvas.height / 2);
+
+    try {
+        const response = await fetch('https://map.sthlm-mesh.se/api/v1/stats/battery-stats?days=7');
+        const data = await response.json();
+
+        const labels = data.map(entry => entry.recorded_at);
+        const values = data.map(entry => parseFloat(entry.avg_battery_level));
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Average Battery Level',
+                    data: values,
+                    borderColor: 'rgba(1, 163, 23, 1.0)',
+                    backgroundColor: 'rgba(1, 163, 23, 0.1)',
+                    borderWidth: 2,
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                aspectRatio: 2.5,
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'day',
+                            tooltipFormat: 'MMM d, HH:mm',
+                            displayFormats: {
+                                day: 'yyyy-MM-dd'
+                            }
+                        },
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'Battery Level (%)'
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        });
+    } catch (error) {
+        console.error('Error loading battery stats:', error);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+batteryStatsGraph();