Add proper Turbolinks handling for Google Charts

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

@@ -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();
-}
 
-// Load Google Charts and set callback
-if (typeof google !== 'undefined' && google.load) {
+  // 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: initializeChart
+      callback: function() {
+        drawChart2();
+        window.performanceChartLoaded = true;
+      }
     });
-} else {
-  console.error('Google JSAPI not loaded');
+  } else {
+    console.error('Google JSAPI not available');
+  }
 }
 
+// Initialize immediately (page is already loaded with Turbolinks)
+initializeChart();
+
+// Handle Turbolinks page loads
+$(document).on('turbolinks:load', function() {
+  initializeChart();
+});
+
 </script>