Add device role chart

content/sv/status/index.md

@@ -22,12 +22,18 @@ Eftersom vi har begränsad bandbredd är det viktigt att hålla nere trafiken. E
     <canvas id="mostActiveNodes"></canvas>
 </div>
 
+## Enhetsroll
+Antalet enheter av respektive Enhetsroll som synts i meshet de senaste 30 dagarna. I större mesh så som Stockholm bör i princip all noder vara `Client` eller `Client Mute`. Enbart ett fåtal `Router` eller `Repeater` behövs. Dessa måste vara placerade extremt strategiskt, till exempel högst upp i en skidbacke. `Router Client` är en avvecklad roll som inte finns längre, men i meshen lever det kvar några noder som inte blivit uppdaterade. För med info see vår [dokumentation]({{<ref device_role.md>}}).
+<div id="deviceRolesContainer" style="min-height: 200px;width: 100%;max-width: 1000px;">
+    <canvas id="deviceRoles"></canvas>
+</div>
+
 
 ## Position Precision
 Grafen visar position precision, eller noggrannhet, på de noder som rapporterat sin position de senaste 7 dagarna. 
 Vi ser gärna att man använder en noggrannhet på ±182m eller noggrannare. Detta är dock inte möjligt att ställa in i iPhone Appen.
 För mer info se vår [dokumentation]({{<ref position.md>}}#position-precision).
-<div style="min-height: 300px;width: 100%;max-width: 1000px;">
+<div id="positionPrecisionContainer" style="min-height: 200px;width: 100%;max-width: 1000px;">
     <canvas id="positionPrecisionChart"></canvas>
 </div>
 
@@ -58,4 +64,5 @@ Graferna baseras på data från [map.sthlm-mesh.se](https://map.sthlm-mesh.se),
 <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>
-<script src="/js/status/portnum-distribution-chart.js"></script>
+<script src="/js/status/portnum-distribution-chart.js"></script>
+<script src="/js/status/device-roles.js"></script>

static/js/status/device-roles.js

@@ -0,0 +1,75 @@
+async function deviceRolesChart() {
+    const canvas = document.getElementById('deviceRoles');
+    const ctx = canvas.getContext('2d');
+
+    // 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/nodes/');
+        const data = await response.json();
+
+        const predefinedLabels = ['CLIENT', 'CLIENT_MUTE', 'CLIENT_HIDDEN', 'ROUTER_LATE', 'ROUTER', 'ROUTER_CLIENT'];
+
+        // Count role occurrences
+        const roleCounts = {};
+        data.nodes.forEach(node => {
+          const role = node.role_name || "UNKNOWN";
+          roleCounts[role] = (roleCounts[role] || 0) + 1;
+        });
+        
+        // Add extra roles not in predefined list
+        const extraLabels = Object.keys(roleCounts).filter(role => !predefinedLabels.includes(role)).sort();
+        const labels = [...predefinedLabels, ...extraLabels];
+        const counts = labels.map(label => roleCounts[label] || 0);
+
+
+        // Dynamically size the container based on the number of elements
+        const chartContainer = document.getElementById('deviceRolesContainer');
+        chartContainer.style.height = `${labels.length *35}px`;
+
+        const backgroundColors = labels.map(label => {
+            if (label == "ROUTER_CLIENT") return 'rgb(196, 36, 18)';
+            if (label == "ROUTER")        return 'rgb(242, 161, 67)';
+            if (label == "ROUTER_LATE")   return 'rgb(229, 189, 82)';
+                                          return 'rgb(41, 156, 70)';
+        });
+
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Count',
+                    data: counts,
+                    backgroundColor: backgroundColors,
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                indexAxis: 'y',
+                scales: {
+                    y: {
+                        ticks: { autoSkip: false, font: { size: 12 } }
+                    },
+                    x: { beginAtZero: true },
+                },
+                plugins: {
+                    legend: { display: false },
+                }
+            }
+        });
+    } catch (error) {
+        console.error('Error loading portnum data:', error);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+deviceRolesChart();