From 02d9879b79ceea197bf77b24e113bb4eb6eed4fc Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Sun, 27 Jul 2025 16:35:24 -0500
Subject: [PATCH] Fix Chart.js loading issue in weather charts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added check for Chart.js availability before rendering
- Updated chart hooks to wait for Chart.js to load completely
- Prevents 'window.Chart is not a constructor' errors

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/js/app.js                     | 23 +++++++++++++++++++----
 assets/js/features/weather_charts.ts |  9 ++++++++-
 2 files changed, 27 insertions(+), 5 deletions(-)

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);
             };