nre layouts

2026-06-11 17:52:58 +01:00
parent 809e57cc28
commit 254810b90a
4 changed files with 334 additions and 86 deletions
@@ -1 +1,95 @@
 import '@fortawesome/fontawesome-free/css/all.min.css';
+import Chart from 'chart.js/auto';
+
+const chartColours = [
+    'rgb(8, 145, 178)',
+    'rgb(37, 99, 235)',
+    'rgb(79, 70, 229)',
+    'rgb(14, 116, 144)',
+];
+
+function parseJsonAttribute(element, attribute, fallback = []) {
+    try {
+        return JSON.parse(element.getAttribute(attribute) || JSON.stringify(fallback));
+    } catch (error) {
+        return fallback;
+    }
+}
+
+function renderWmsCharts() {
+    document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
+        if (canvas.dataset.rendered === 'true') {
+            return;
+        }
+
+        const type = canvas.getAttribute('data-wms-chart');
+        const labels = parseJsonAttribute(canvas, 'data-labels');
+        const series = parseJsonAttribute(canvas, 'data-series');
+        const values = parseJsonAttribute(canvas, 'data-values');
+
+        const datasets = series.length
+            ? series.map((item, index) => ({
+                label: item.label,
+                data: item.data,
+                backgroundColor: chartColours[index % chartColours.length],
+                borderColor: chartColours[index % chartColours.length],
+                borderWidth: 2,
+                borderRadius: 8,
+            }))
+            : [{
+                label: 'Total',
+                data: values,
+                backgroundColor: chartColours,
+                borderColor: 'rgb(255, 255, 255)',
+                borderWidth: 2,
+            }];
+
+        new Chart(canvas, {
+            type,
+            data: {
+                labels,
+                datasets,
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: document.documentElement.classList.contains('dark') ? '#e4e4e7' : '#3f3f46',
+                            boxWidth: 12,
+                            boxHeight: 12,
+                        },
+                    },
+                },
+                scales: type === 'doughnut'
+                    ? {}
+                    : {
+                        x: {
+                            ticks: {
+                                color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
+                            },
+                            grid: {
+                                color: 'rgba(113, 113, 122, 0.18)',
+                            },
+                        },
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                precision: 0,
+                                color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
+                            },
+                            grid: {
+                                color: 'rgba(113, 113, 122, 0.18)',
+                            },
+                        },
+                    },
+            },
+        });
+
+        canvas.dataset.rendered = 'true';
+    });
+}
+
+document.addEventListener('DOMContentLoaded', renderWmsCharts);
+document.addEventListener('livewire:navigated', renderWmsCharts);