Build live HickLab3D overview dashboard

2026-10-10 19:29:34 +01:00
parent 88dcf5101b
commit 1c72937f9a
6 changed files with 386 additions and 19 deletions
@@ -1 +1,63 @@
-//
+const chartBase = {
+    chart: {
+        background: 'transparent',
+        foreColor: '#b8bec4',
+        fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
+        toolbar: { show: false },
+        zoom: { enabled: false },
+    },
+    theme: { mode: 'dark' },
+    grid: { borderColor: '#292c30', strokeDashArray: 4 },
+    tooltip: { theme: 'dark' },
+    noData: { text: 'No data yet' },
+};
+
+if (document.querySelector('[data-dashboard-chart]')) {
+    import('apexcharts').then(({ default: ApexCharts }) => {
+        document.querySelectorAll('[data-dashboard-chart]').forEach((element) => {
+            let data;
+
+            try {
+                data = JSON.parse(element.dataset.chart);
+            } catch (error) {
+                console.error('Dashboard chart data is invalid', error);
+                return;
+            }
+
+            const height = element.clientHeight || 256;
+            let options;
+
+            if (element.dataset.dashboardChart === 'orders') {
+                options = {
+                    ...chartBase,
+                    chart: { ...chartBase.chart, type: 'area', height },
+                    colors: ['#e3f504'],
+                    series: [{ name: 'Awaiting dispatch', data: data.series }],
+                    xaxis: { categories: data.labels, labels: { rotate: -45, hideOverlappingLabels: true } },
+                    yaxis: { min: 0, forceNiceScale: true, labels: { formatter: (value) => Number.isInteger(value) ? value.toString() : '' } },
+                    stroke: { curve: 'smooth', width: 3 },
+                    fill: { type: 'gradient', gradient: { opacityFrom: 0.35, opacityTo: 0.02 } },
+                    dataLabels: { enabled: false },
+                    markers: { size: 3 },
+                    legend: { show: false },
+                };
+            } else if (element.dataset.dashboardChart === 'materials') {
+                options = {
+                    ...chartBase,
+                    chart: { ...chartBase.chart, type: 'donut', height },
+                    labels: data.map((item) => item.label),
+                    series: data.map((item) => item.count),
+                    colors: ['#e3f504', '#7dd3a3', '#8b9df0', '#f0a46b', '#cc9df0', '#66cbd1', '#f17fa5'],
+                    legend: { position: 'bottom', fontSize: '12px', labels: { colors: '#b8bec4' } },
+                    plotOptions: { pie: { donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Spools' } } } } },
+                    dataLabels: { enabled: false },
+                    stroke: { colors: ['#17191b'], width: 2 },
+                };
+            }
+
+            if (options) {
+                new ApexCharts(element, options).render();
+            }
+        });
+    });
+}