add charts.js graph for messages

2026-08-07 09:23:02 +02:00 · 2025-03-27 09:40:17 +01:00
parent e647251561
commit 3ffb566b50
2 changed files with 70 additions and 13 deletions
@@ -4,15 +4,14 @@ linkTitle: Status
 menu: {main: {weight: 60}}
 draft: false
 ---
-{{% blocks/cover title="Mesh Status Metrics" image_anchor="top" height="min" %}}
-Grafer och statistik specifikt för Stockholm's meshen.
-{{% /blocks/cover %}}
-
+<br/>
 {{% blocks/section color="white"  %}}

-{{% alert title="Uppmärksamma" color="warning" %}}
-Vi hade problem med datainsamlingen den 8/3 vilket påverkar graferna och statistiken.
-{{% /alert %}}
+## Text Meddelanden
+Antalet meddelande per timme senaste 7 dygnen.
+<div style="min-height: 300px;width: 100%;max-width: 1000px;">
+  <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.
@@ -32,12 +31,6 @@ Den genomsnittliga kanalutnyttjandet i Stockholm under de senaste 7 dygnen. Obse
 {{< lazy-img max-width="774px" aspect-ratio="774/387"
 src="https://dash.roslund.cloud/render/d-solo/edqkge9mf7v28g/main-dashboard?orgId=1&from=now-7d&to=now&theme=light&panelId=23&width=774&height=387&scale=1&tz=Europe%2FStockholm" >}}

-## Text Meddelanden
-Antalet meddelande per timme senaste 7 dygnen.
-
-{{< lazy-img max-width="774px" aspect-ratio="774/387"
-src="https://dash.roslund.cloud/render/d-solo/aedo2cbpvy800a/sthlm-mesh?orgId=&from=now-7d&to=now&theme=light&panelId=4&width=1000&height=500&scale=1&tz=Europe%2FStockholm" >}}
-
 ## Batteri
 Visar den genomsnittliga batteri-nivån i meshet senaste 7 dygnen. Grafen försöker exkludera noder som är inkopplade till en strömkälla och som således inte går på batteri.
 {{< lazy-img max-width="774px" aspect-ratio="774/387"
@@ -53,3 +46,6 @@ Denna sida använder [Meshtastic-metrics-exporter](https://github.com/tcivie/mes
 Graferna laddas från en separat server. Med hjälp av Nginx så cacheas bilderna för att inte överbelasta Grafana instansen. 
 Om graferna inte laddas så är det troligtvis för att vi har problem, eller så tror servern att du ansluter från ett annat land, då enbart ett fåtal länder är white-listade.
 {{% /blocks/section %}}
+
+<script src="/js/status/messagesChart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -0,0 +1,61 @@
+const canvas = document.getElementById('messagesChart');
+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);
+
+fetch('http://127.0.0.1:8080/api/v1/messages-per-hour')
+    .then(response => response.json())
+    .then(data => {
+        const labels = data.map(entry => entry.hour);
+        const counts = data.map(entry => entry.count);
+
+        // Clear the canvas before drawing the chart
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Messages Per Hour',
+                    data: counts,
+                    backgroundColor: 'rgb(1, 163, 23)',
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                aspectRatio: 2.5,
+                scales: {
+                    x: {
+                        ticks: {
+                            callback: function(value, index) {
+                                return labels[index].endsWith('00') ? labels[index].split('T')[0] : null;
+                            },
+                            autoSkip: false
+                        }
+                    },
+                    y: {
+                        beginAtZero: true
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false // Hides the dataset label
+                    }
+                },
+            }
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching data:', error);
+
+        // Clear the canvas before showing an error message
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    });