Fix intermittent chart rendering on dashboard and flux

window.Chart is set by app.js, a deferred module script whose
execution isn't ordered relative to Livewire's own script that fires
alpine:init. When Livewire won the race, Alpine's x-init called
new Chart() before window.Chart existed, silently failing with no
console output and leaving the canvas blank. Retry init() until
window.Chart is available instead of assuming it's ready.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

resources/views/livewire/dashboard/index.blade.php

@@ -157,6 +157,13 @@
                 Alpine.data('donutChart', (labels, data, palette) => ({
                     chart: null,
                     init() {
+                        // window.Chart comes from a separately deferred module script
+                        // (app.js) that isn't guaranteed to have run yet when Alpine
+                        // boots, so wait for it instead of racing.
+                        if (typeof window.Chart === 'undefined') {
+                            setTimeout(() => this.init(), 20);
+                            return;
+                        }
                         // Visible stroke between slices so adjacent segments stay
                         // distinguishable even when their fill colors are close (WCAG 1.4.11).
                         const surface = getComputedStyle(document.documentElement).getPropertyValue('--color-surface').trim();

resources/views/livewire/sankey/index.blade.php

@@ -81,6 +81,13 @@
                 Alpine.data('sankeyChart', (flows) => ({
                     chart: null,
                     init() {
+                        // window.Chart comes from a separately deferred module script
+                        // (app.js) that isn't guaranteed to have run yet when Alpine
+                        // boots, so wait for it instead of racing.
+                        if (typeof window.Chart === 'undefined') {
+                            setTimeout(() => this.init(), 20);
+                            return;
+                        }
                         const style = getComputedStyle(document.documentElement);
                         const surface = `rgb(${style.getPropertyValue('--color-surface').trim()})`;
                         const text = `rgb(${style.getPropertyValue('--color-text').trim()})`;