diff --git a/assets/js/app.js b/assets/js/app.js index 283e16b..ea10bbf 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -189,11 +189,26 @@ Object.keys(WeatherChartHooks).forEach(hookName => { Hooks[hookName] = { ...originalHook, mounted() { - if (window.VendorLoader) { + const self = this; + if (window.VendorLoader && !window.chartBundleLoaded) { + // Load chart bundle and wait for it to complete window.VendorLoader.loadCharts(); - } - if (originalHook.mounted) { - originalHook.mounted.call(this); + // Wait a bit for charts to load, then call mounted + const checkChartLoaded = () => { + if (window.Chart) { + if (originalHook.mounted) { + originalHook.mounted.call(self); + } + } else { + setTimeout(checkChartLoaded, 50); + } + }; + setTimeout(checkChartLoaded, 100); + } else { + // Chart bundle already loaded or loading, call mounted + if (originalHook.mounted) { + originalHook.mounted.call(this); + } } } }; diff --git a/assets/js/features/weather_charts.ts b/assets/js/features/weather_charts.ts index a3d8e37..f4a81e5 100644 --- a/assets/js/features/weather_charts.ts +++ b/assets/js/features/weather_charts.ts @@ -1,5 +1,5 @@ // Chart.js and date adapter are loaded globally from vendor bundle -const Chart = window.Chart; +// We'll access it later when it's actually loaded import type { ChartConfiguration, ChartType } from 'chart.js'; import type { WeatherChartDataset, YAxisOptions } from '../types/chart-types'; @@ -301,6 +301,13 @@ function createChartHook(configKey: string): Hook { } }; + // Check if Chart.js is loaded + if (!window.Chart) { + console.warn('Chart.js not loaded yet, retrying...'); + setTimeout(() => self.renderChart(), 100); + return; + } + self.chart = new window.Chart(canvas, chartConfig); };