83 - Add Chart.js and register the trend chart component

package.json

@@ -15,6 +15,7 @@
         "vite": "^6.2.4"
     },
     "dependencies": {
-        "axios": "^1.8.0"
+        "axios": "^1.8.0",
+        "chart.js": "^4.5.1"
     }
 }

resources/js/app.js

@@ -1,4 +1,7 @@
-import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';
+import { Alpine, Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';
 import './bootstrap';
+import trendChart from './chart';
+
+Alpine.data('trendChart', trendChart);
 
 Livewire.start();

resources/js/chart.js

@@ -0,0 +1,66 @@
+import {
+    CategoryScale,
+    Chart,
+    Filler,
+    Legend,
+    LinearScale,
+    LineController,
+    LineElement,
+    PointElement,
+    Tooltip,
+} from 'chart.js';
+
+Chart.register(
+    CategoryScale,
+    Filler,
+    Legend,
+    LinearScale,
+    LineController,
+    LineElement,
+    PointElement,
+    Tooltip,
+);
+
+export default function trendChart({ labels = [], series = [] } = {}) {
+    return {
+        chart: null,
+
+        init() {
+            this.chart = new Chart(this.$refs.canvas, {
+                type: 'line',
+                data: this.data(labels, series),
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: { mode: 'index', intersect: false },
+                    scales: {
+                        y: { beginAtZero: true, ticks: { precision: 0 } },
+                    },
+                },
+            });
+        },
+
+        data(labels, series) {
+            return {
+                labels,
+                datasets: series.map((one, index) => ({
+                    label: one.name,
+                    data: one.values,
+                    borderColor: this.palette(index),
+                    backgroundColor: this.palette(index),
+                    spanGaps: false,
+                    tension: 0.3,
+                })),
+            };
+        },
+
+        palette(index) {
+            return ['#3b82f6', '#10b981'][index % 2];
+        },
+
+        destroy() {
+            this.chart?.destroy();
+            this.chart = null;
+        },
+    };
+}