add most-active-nodes stats

content/sv/status/index.md

@@ -13,17 +13,15 @@ Antalet meddelande per timme senaste 7 dygnen.
     <canvas id="messagesChart"></canvas>
 </div>
 
-## Skapade paket per nod
-Grafen nedan visar vilka noder som har skickat flest paket under det senaste dygnet. Vidarebefordrade meddelanden och krypterade paket är inte medräknade.
-Datat i grafen är endast en uppskattning och bör inte ses som exakt. Graferna bygger på MQTT-data från ett begränsat antal noder.
-Eftersom vi har begränsad bandbredd är det viktigt att hålla nere trafiken. En sändningsvolym på max 50–100 paket per dygn är önskvärd.
-{{< lazy-img max-width="800px" aspect-ratio="1/1"
-src="https://dash.roslund.cloud/render/d-solo/aedo2cbpvy800a/sthlm-mesh?orgId=1&theme=light&panelId=7&width=1000&height=1000&scale=1" >}}
 
-## Packet typer
-Fördelningen av olika pakettyper i nätverket under de senaste dygnet. Diagrammet visar hur nätverket används, inklusive meddelanden, positionstelemetri och andra systempaket.
-{{< lazy-img max-width="774px" aspect-ratio="774/387"
-src="https://dash.roslund.cloud/render/d-solo/aedo2cbpvy800a/sthlm-mesh?orgId=1&theme=light&panelId=6&width=1000&height=500&scale=1" >}}
+## Skapade paket per nod
+Grafen nedan visar vilka noder som har skickat flest paket under det senaste dygnet. 
+Graferna bygger på MQTT-data från ett begränsat antal noder.
+Eftersom vi har begränsad bandbredd är det viktigt att hålla nere trafiken. En sändningsvolym på max 100 paket per dygn är önskvärd.
+<div id="mostActiveNodesContainer" style="min-height: 300px;width: 100%;max-width: 1000px;">
+    <canvas id="mostActiveNodes"></canvas>
+</div>
+
 
 ## Position Precision
 Grafen visar position precision, eller noggrannhet, på de noder som rapporterat sin position de senaste 7 dagarna. 
@@ -40,6 +38,12 @@ Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 daga
     <canvas id="hardwareChart"></canvas>
 </div>
 
+
+## Packet typer
+Fördelningen av olika pakettyper i nätverket under de senaste dygnet. Diagrammet visar hur nätverket används, inklusive meddelanden, positionstelemetri och andra systempaket.
+{{< lazy-img max-width="774px" aspect-ratio="774/387"
+src="https://dash.roslund.cloud/render/d-solo/aedo2cbpvy800a/sthlm-mesh?orgId=1&theme=light&panelId=6&width=1000&height=500&scale=1" >}}
+
 {{% /blocks/section %}}
 
 {{% blocks/section color=info %}}
@@ -51,5 +55,6 @@ Vissa av graferna är genererade av  [Meshtastic-metrics-exporter](https://githu
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="/js/status/messagesChart.js"></script>
+<script src="/js/status/most-active-nodes.js"></script>
 <script src="/js/status/hardwareChart.js"></script>
 <script src="/js/status/position-precision-chart.js"></script>

static/js/status/most-active-nodes.js

@@ -0,0 +1,62 @@
+async function mostActiveNodesGraph() {
+    const canvas = document.getElementById('mostActiveNodes');
+    const ctx = canvas.getContext('2d');
+
+    // Show "Loading..." message
+    ctx.font = '16px Arial';
+    ctx.fillStyle = 'gray';
+    ctx.textAlign = 'center';
+    ctx.fillText('Loading data...', canvas.width / 2, canvas.height / 2);
+
+    try {
+        const response = await fetch('https://map.sthlm-mesh.se/api/v1/stats/most-active-nodes');
+        const data = await response.json();
+
+        const labels = data.map(entry => entry.long_name);
+        const counts = data.map(entry => entry.count);
+
+        // Adjust chart height based on number of items
+        const chartContainer = document.getElementById('mostActiveNodesContainer');
+        chartContainer.style.height = `${labels.length * 25}px`;
+
+        const backgroundColors = counts.map(count => {
+            if (count < 100) return '#7EB26D';     // Green
+            if (count < 200) return '#EAB839';     // Yellow
+                             return '#BF1B00';     // Red
+        });
+
+
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Packages originated',
+                    data: counts,
+                    backgroundColor: backgroundColors,
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                indexAxis: 'y', // horizontal bars
+                scales: {
+                    y: {
+                        ticks: { autoSkip: false, font: { size: 12 } }
+                    }
+                },
+                plugins: {
+                    legend: { display: false },
+                }
+            }
+        });
+    } catch (error) {
+        console.error('Error fetching data:', error);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+mostActiveNodesGraph();