From 1bc835c4c9a0e11f55ca2b9d0c8ef39ab22982ee Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:10:44 -0500
Subject: [PATCH] Add proper Turbolinks handling for Google Charts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added comprehensive Turbolinks event handling and duplicate load
prevention for Google Charts on performance page.

Changes:
- Add turbolinks:load event listener for page navigations
- Prevent multiple google.load() calls with flag
- Check if visualization already loaded before loading again
- Add chart element existence check before drawing
- Call initializeChart() immediately for initial load
- Better error messages for debugging

This ensures charts render on both initial page load and Turbolinks
navigation, while preventing duplicate library loads.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/performance/index.html.erb | 49 ++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/app/views/performance/index.html.erb b/app/views/performance/index.html.erb
index d5aa3a5..65b0d6f 100644
--- a/app/views/performance/index.html.erb
+++ b/app/views/performance/index.html.erb
@@ -50,6 +50,10 @@
 </div>
 
 <script type="text/javascript">
+// Prevent multiple initializations with Turbolinks
+if (typeof window.performanceChartLoaded === 'undefined') {
+  window.performanceChartLoaded = false;
+}
 
 function drawChart2() {
   // Guard against calling before Google Charts is loaded
@@ -58,6 +62,12 @@ function drawChart2() {
     return;
   }
 
+  var chartElement = document.getElementById('line_chart');
+  if (!chartElement) {
+    console.warn('Chart element not found');
+    return;
+  }
+
   var data = google.visualization.arrayToDataTable([
     ['Year', 'Score'],
     <% @perf.each do |p| %>
@@ -112,7 +122,7 @@ function drawChart2() {
     lineWidth: 2,
   };
 
-  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
+  var chart = new google.visualization.LineChart(chartElement);
   chart.draw(data, options);
 }
 
@@ -121,21 +131,32 @@ function makeActive(){
 };
 
 function initializeChart() {
-  // Check if element exists before drawing
-  if (document.getElementById('line_chart')) {
-    drawChart2();
-  }
   makeActive();
+
+  // Check if Google Charts visualization is already loaded
+  if (typeof google !== 'undefined' && google.visualization && google.visualization.LineChart) {
+    drawChart2();
+    window.performanceChartLoaded = true;
+  } else if (typeof google !== 'undefined' && google.load && !window.performanceChartLoaded) {
+    // Load Google Charts
+    google.load("visualization", "1", {
+      packages: ["corechart"],
+      callback: function() {
+        drawChart2();
+        window.performanceChartLoaded = true;
+      }
+    });
+  } else {
+    console.error('Google JSAPI not available');
+  }
 }
 
-// Load Google Charts and set callback
-if (typeof google !== 'undefined' && google.load) {
-  google.load("visualization", "1", {
-    packages: ["corechart"],
-    callback: initializeChart
-  });
-} else {
-  console.error('Google JSAPI not loaded');
-}
+// Initialize immediately (page is already loaded with Turbolinks)
+initializeChart();
+
+// Handle Turbolinks page loads
+$(document).on('turbolinks:load', function() {
+  initializeChart();
+});
 
 </script>
\ No newline at end of file