From b4ae4a31dd162b3c301de9d99264273f1844ee3e Mon Sep 17 00:00:00 2001
From: Anton Roslund <enari@minit.nu>
Date: Mon, 14 Apr 2025 23:39:09 +0200
Subject: [PATCH] add firmware version graph

---
 content/sv/status/index.md            |  9 +++-
 static/js/status/firmware-versions.js | 74 +++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 static/js/status/firmware-versions.js

diff --git a/content/sv/status/index.md b/content/sv/status/index.md
index 52972c9..636b157 100644
--- a/content/sv/status/index.md
+++ b/content/sv/status/index.md
@@ -55,6 +55,12 @@ För mer info se vår [dokumentation]({{<ref position.md>}}#position-precision).
     <canvas id="positionPrecisionChart"></canvas>
 </div>
 
+## Firmware versioner
+Antalet enheter av firmware version som synts i meshet de senaste 30 dagarna. Information om firmware information skickas inte över meshet. Men vi kan se om en enhet kör en gammal firmware version genom att kolla efter ["ok_to_mqtt" bitten](https://github.com/meshtastic/firmware/pull/4643)  som infördes i [2.5.0.9ac0e26](https://github.com/meshtastic/firmware/releases/tag/v2.5.0.9ac0e26).
+<div id="firmwareVersionContainer" style="min-height: 100px;width: 100%;max-width: 1000px;">
+    <canvas id="firmwareVersionChart"></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. Sökrutan till höger kan användas för att visa antalet paket av respektive typ för en given nod.
@@ -95,4 +101,5 @@ Graferna baseras på data från [map.sthlm-mesh.se](https://map.sthlm-mesh.se),
 <script src="/js/status/position-precision-chart.js"></script>
 <script src="/js/status/portnum-distribution-chart.js"></script>
 <script src="/js/status/device-roles.js"></script>
-<script src="/js/status/nodes-seen.js"></script>
\ No newline at end of file
+<script src="/js/status/nodes-seen.js"></script>
+<script src="/js/status/firmware-versions.js"></script>
\ No newline at end of file
diff --git a/static/js/status/firmware-versions.js b/static/js/status/firmware-versions.js
new file mode 100644
index 0000000..f008455
--- /dev/null
+++ b/static/js/status/firmware-versions.js
@@ -0,0 +1,74 @@
+async function firmwareVersionGraph() {
+    const canvas = document.getElementById('firmwareVersionChart');
+    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 {
+        await fetchNodes();
+
+        const countsByVersion = {};
+
+        // Filter out nodes without firmware_version
+        const nodesWithVersion = nodes.filter(node => node.firmware_version != null);
+
+        // Count how many nodes have each firmware version
+        for (const node of nodesWithVersion) {
+            const version = node.firmware_version;
+            if(version != '2.4.3 or older') {
+                countsByVersion['2.5.0 or newer'] = (countsByVersion['2.5.0 or newer'] || 0) + 1;
+            }
+            else {
+                countsByVersion[version] = (countsByVersion[version] || 0) + 1;
+            }
+        }
+
+        // Convert to array of { version, count }
+        const statsArray = Object.entries(countsByVersion).map(([version, count]) => ({
+            version,
+            count
+        }));
+
+        console.log(statsArray)
+
+        // Sort by count ascending
+        const sorted = statsArray.sort((a, b) => a.count - b.count);
+
+        const labels = sorted.map(entry => entry.version);
+        const counts = sorted.map(entry => entry.count);
+
+        const chartContainer = document.getElementById('firmwareVersionContainer');
+        chartContainer.style.height = `${labels.length * 35}px`;
+
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Firmware Version',
+                    data: counts,
+                    backgroundColor: ['#7EB26D', '#BF1B00']
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                barPercentage: 0.8,
+                indexAxis: 'y',
+                y: { ticks: { autoSkip: false, font: { size: 12 } } },
+                plugins: { legend: { display: false } }
+            }
+        });
+    } catch (error) {
+        console.error('Error fetching firmware version data:', error);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+firmwareVersionGraph();