deploy: 1e9b5aad1f

2026-07-06 01:41:36 +02:00 · 2025-08-09 10:21:37 +00:00
parent 6e9d14b999
commit ee6642ad75
23 changed files with 189 additions and 24 deletions
@@ -0,0 +1,80 @@
+async function isOkToMqttGraph() {
+    const canvas = document.getElementById('isOkToMqttChart');
+    const ctx = canvas.getContext('2d');
+
+    // Show "Loading..." message
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.font = '16px Arial';
+    ctx.fillStyle = 'gray';
+    ctx.textAlign = 'center';
+    ctx.fillText('Loading data...', canvas.width / 2, canvas.height / 2);
+
+    try {
+        await fetchNodes();
+        // Filter nodes to only include those updated within the last 30 days
+        const recentNodes = nodes.filter(node => new Date(node.updated_at) >= new Date(Date.now() - 30 * 24 * 60 * 60 * 1000));
+
+        let countTrue = 0;
+        let countFalse = 0;
+        let countNull = 0;
+
+        for (const node of recentNodes) {
+            const val = node.ok_to_mqtt;
+            if (val === true) countTrue++;
+            else if (val === false) countFalse++;
+            else countNull++;
+        }
+
+        const container = canvas.parentElement;
+        if (container) container.style.height = `${2 * 35 + 50}px`;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['True', 'False'],
+
+                datasets: [
+                    {
+                        label: 'true',
+                        data: [countTrue, 0,],
+                        backgroundColor: '#7EB26D', // blue
+                    },
+                                        {
+                        label: 'false',
+                        data: [0, countFalse],
+                        backgroundColor: '#BF1B00', // green
+                    },
+                    {
+                        label: 'unset',
+                        data: [0, countNull],
+                        backgroundColor: '#808080', // grey
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                indexAxis: 'y',
+                plugins: {
+                    legend: { display: false }
+                },
+                scales: {
+                    x: { beginAtZero: true, stacked: true },
+                    y: { stacked: true }
+                }
+            }
+        });
+
+    } catch (error) {
+        console.error('Error building ok_to_mqtt chart:', error);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+isOkToMqttGraph();
+
+
@@ -0,0 +1,84 @@
+async function isUnmessagableGraph() {
+    const canvas = document.getElementById('isUnmessagableChart');
+    const ctx = canvas.getContext('2d');
+
+    // Show "Loading..." message
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.font = '16px Arial';
+    ctx.fillStyle = 'gray';
+    ctx.textAlign = 'center';
+    ctx.fillText('Loading data...', canvas.width / 2, canvas.height / 2);
+
+    try {
+        await fetchNodes();
+        // Filter nodes to only include those updated within the last 30 days
+        const recentNodes = nodes.filter(node => new Date(node.updated_at) >= new Date(Date.now() - 30 * 24 * 60 * 60 * 1000));
+
+        let countTrue = 0;
+        let countFalse = 0;
+        let countNull = 0;
+
+
+        for (const node of recentNodes) {
+            const val = node.is_unmessagable;
+            if (val === true) countTrue++;
+            else if (val === false) countFalse++;
+            else countNull++;
+        }
+
+        const container = canvas.parentElement;
+        if (container) container.style.height = `${2 * 35 + 50}px`;
+
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['unmessagable', 'messagable'],
+                datasets: [
+                    {
+                        label: 'true',
+                        data: [countTrue, 0,],
+                        backgroundColor: '#0d6efd', // blue
+                    },
+                                        {
+                        label: 'false',
+                        data: [0, countFalse],
+                        backgroundColor: '#7EB26D', // green
+                    },
+                    {
+                        label: 'unset',
+                        data: [0, countNull],
+                        backgroundColor: '#808080', // grey
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                indexAxis: 'y',
+                plugins: {
+                    legend: { display: false }
+                },
+                scales: {
+                    x: {
+                        beginAtZero: true,
+                        stacked: true,
+                    },
+                    y: {
+                        stacked: true,
+                    }
+                }
+            }
+        });
+
+    } catch (error) {
+        console.error('Error building is_unmessagable chart:', error);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'red';
+        ctx.fillText('Error loading data', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+isUnmessagableGraph();