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>
This commit is contained in:
@@ -50,6 +50,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
// Prevent multiple initializations with Turbolinks
|
||||||
|
if (typeof window.performanceChartLoaded === 'undefined') {
|
||||||
|
window.performanceChartLoaded = false;
|
||||||
|
}
|
||||||
|
|
||||||
function drawChart2() {
|
function drawChart2() {
|
||||||
// Guard against calling before Google Charts is loaded
|
// Guard against calling before Google Charts is loaded
|
||||||
@@ -58,6 +62,12 @@ function drawChart2() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var chartElement = document.getElementById('line_chart');
|
||||||
|
if (!chartElement) {
|
||||||
|
console.warn('Chart element not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var data = google.visualization.arrayToDataTable([
|
var data = google.visualization.arrayToDataTable([
|
||||||
['Year', 'Score'],
|
['Year', 'Score'],
|
||||||
<% @perf.each do |p| %>
|
<% @perf.each do |p| %>
|
||||||
@@ -112,7 +122,7 @@ function drawChart2() {
|
|||||||
lineWidth: 2,
|
lineWidth: 2,
|
||||||
};
|
};
|
||||||
|
|
||||||
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
|
var chart = new google.visualization.LineChart(chartElement);
|
||||||
chart.draw(data, options);
|
chart.draw(data, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -121,21 +131,32 @@ function makeActive(){
|
|||||||
};
|
};
|
||||||
|
|
||||||
function initializeChart() {
|
function initializeChart() {
|
||||||
// Check if element exists before drawing
|
|
||||||
if (document.getElementById('line_chart')) {
|
|
||||||
drawChart2();
|
|
||||||
}
|
|
||||||
makeActive();
|
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
|
// Initialize immediately (page is already loaded with Turbolinks)
|
||||||
if (typeof google !== 'undefined' && google.load) {
|
initializeChart();
|
||||||
google.load("visualization", "1", {
|
|
||||||
packages: ["corechart"],
|
// Handle Turbolinks page loads
|
||||||
callback: initializeChart
|
$(document).on('turbolinks:load', function() {
|
||||||
});
|
initializeChart();
|
||||||
} else {
|
});
|
||||||
console.error('Google JSAPI not loaded');
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user