From 102a879a3ab5dc34d7c32d8fa13baf73ad79ed7a Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 00:57:54 -0500
Subject: [PATCH] Fix EasyPieChart errors on admin dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed "Cannot read properties of undefined (reading 'update')" errors
caused by chart setTimeout callbacks persisting across Turbolinks page
navigations.

Changes:
- Add existence checks before initializing charts
- Guard all .update() calls with element and instance checks
- Track all setTimeout IDs in chartTimeouts array
- Clear timeouts on Turbolinks navigation events
- Clear timeouts at start of pieChartHome() to prevent duplicates

This ensures chart update callbacks only run when chart elements exist
on the page, preventing errors when navigating to pages without charts.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/dashboard/pie_charts.html.erb | 232 ++++++++++++++++--------
 1 file changed, 154 insertions(+), 78 deletions(-)

diff --git a/app/views/dashboard/pie_charts.html.erb b/app/views/dashboard/pie_charts.html.erb
index e4059da..eb98bcb 100755
--- a/app/views/dashboard/pie_charts.html.erb
+++ b/app/views/dashboard/pie_charts.html.erb
@@ -48,8 +48,18 @@
 <% end %>
 <script type="text/javascript">
 
+// Store timeout IDs so we can clear them on page navigation
+var chartTimeouts = [];
+
 function pieChartHome() {
+  // Clear any existing timeouts first
+  chartTimeouts.forEach(function(id) { clearTimeout(id); });
+  chartTimeouts = [];
+
   $(function () {
+    // Only initialize if chart elements exist
+    if ($('.chart1').length === 0) return;
+
     //create instance
     $('.chart1').easyPieChart({
       animate: 2000,
@@ -60,24 +70,37 @@ function pieChartHome() {
       lineWidth: 7,
     });
     //update instance after 5 sec
-    setTimeout(function () {
-      $('.chart1').data('easyPieChart').update(50);
-    }, 5000);
-    setTimeout(function () {
-      $('.chart1').data('easyPieChart').update(70);
-    }, 10000);
-    setTimeout(function () {
-      $('.chart1').data('easyPieChart').update(30);
-    }, 15000);
-    setTimeout(function () {
-      $('.chart1').data('easyPieChart').update(90);
-    }, 19000);
-    setTimeout(function () {
-      $('.chart1').data('easyPieChart').update(40);
-    }, 32000);
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
+        $('.chart1').data('easyPieChart').update(50);
+      }
+    }, 5000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
+        $('.chart1').data('easyPieChart').update(70);
+      }
+    }, 10000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
+        $('.chart1').data('easyPieChart').update(30);
+      }
+    }, 15000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
+        $('.chart1').data('easyPieChart').update(90);
+      }
+    }, 19000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
+        $('.chart1').data('easyPieChart').update(40);
+      }
+    }, 32000));
   });
 
   $(function () {
+    // Only initialize if chart elements exist
+    if ($('.chart2').length === 0) return;
+
     //create instance
     $('.chart2').easyPieChart({
       animate: 2000,
@@ -88,24 +111,37 @@ function pieChartHome() {
       lineWidth: 7,
     });
     //update instance after 5 sec
-    setTimeout(function () {
-      $('.chart2').data('easyPieChart').update(90);
-    }, 10000);
-    setTimeout(function () {
-      $('.chart2').data('easyPieChart').update(40);
-    }, 18000);
-    setTimeout(function () {
-      $('.chart2').data('easyPieChart').update(70);
-    }, 28000);
-    setTimeout(function () {
-      $('.chart2').data('easyPieChart').update(50);
-    }, 32000);
-    setTimeout(function () {
-      $('.chart2').data('easyPieChart').update(80);
-    }, 40000);
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
+        $('.chart2').data('easyPieChart').update(90);
+      }
+    }, 10000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
+        $('.chart2').data('easyPieChart').update(40);
+      }
+    }, 18000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
+        $('.chart2').data('easyPieChart').update(70);
+      }
+    }, 28000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
+        $('.chart2').data('easyPieChart').update(50);
+      }
+    }, 32000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
+        $('.chart2').data('easyPieChart').update(80);
+      }
+    }, 40000));
   });
 
   $(function () {
+    // Only initialize if chart elements exist
+    if ($('.chart3').length === 0) return;
+
     //create instance
     $('.chart3').easyPieChart({
       animate: 2000,
@@ -116,24 +152,37 @@ function pieChartHome() {
       lineWidth: 7,
     });
     //update instance after 5 sec
-    setTimeout(function () {
-      $('.chart3').data('easyPieChart').update(20);
-    }, 9000);
-    setTimeout(function () {
-      $('.chart3').data('easyPieChart').update(59);
-    }, 20000);
-    setTimeout(function () {
-      $('.chart3').data('easyPieChart').update(38);
-    }, 35000);
-    setTimeout(function () {
-      $('.chart3').data('easyPieChart').update(79);
-    }, 49000);
-    setTimeout(function () {
-      $('.chart3').data('easyPieChart').update(96);
-    }, 52000);
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
+        $('.chart3').data('easyPieChart').update(20);
+      }
+    }, 9000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
+        $('.chart3').data('easyPieChart').update(59);
+      }
+    }, 20000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
+        $('.chart3').data('easyPieChart').update(38);
+      }
+    }, 35000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
+        $('.chart3').data('easyPieChart').update(79);
+      }
+    }, 49000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
+        $('.chart3').data('easyPieChart').update(96);
+      }
+    }, 52000));
   });
 
   $(function () {
+    // Only initialize if chart elements exist
+    if ($('.chart4').length === 0) return;
+
     //create instance
     $('.chart4').easyPieChart({
       animate: 2000,
@@ -144,24 +193,37 @@ function pieChartHome() {
       lineWidth: 7,
     });
     //update instance after 5 sec
-    setTimeout(function () {
-      $('.chart4').data('easyPieChart').update(40);
-    }, 6000);
-    setTimeout(function () {
-      $('.chart4').data('easyPieChart').update(67);
-    }, 14000);
-    setTimeout(function () {
-      $('.chart4').data('easyPieChart').update(43);
-    }, 23000);
-    setTimeout(function () {
-      $('.chart4').data('easyPieChart').update(80);
-    }, 36000);
-    setTimeout(function () {
-      $('.chart4').data('easyPieChart').update(66);
-    }, 41000);
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
+        $('.chart4').data('easyPieChart').update(40);
+      }
+    }, 6000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
+        $('.chart4').data('easyPieChart').update(67);
+      }
+    }, 14000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
+        $('.chart4').data('easyPieChart').update(43);
+      }
+    }, 23000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
+        $('.chart4').data('easyPieChart').update(80);
+      }
+    }, 36000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
+        $('.chart4').data('easyPieChart').update(66);
+      }
+    }, 41000));
   });
 
   $(function () {
+    // Only initialize if chart elements exist
+    if ($('.chart5').length === 0) return;
+
     //create instance
     $('.chart5').easyPieChart({
       animate: 3000,
@@ -172,28 +234,42 @@ function pieChartHome() {
       lineWidth: 7,
     });
     //update instance after 5 sec
-    setTimeout(function () {
-      $('.chart5').data('easyPieChart').update(30);
-    }, 9000);
-    setTimeout(function () {
-      $('.chart5').data('easyPieChart').update(87);
-    }, 19000);
-    setTimeout(function () {
-      $('.chart5').data('easyPieChart').update(28);
-    }, 27000);
-    setTimeout(function () {
-      $('.chart5').data('easyPieChart').update(69);
-    }, 39000);
-    setTimeout(function () {
-      $('.chart5').data('easyPieChart').update(99);
-    }, 47000);
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
+        $('.chart5').data('easyPieChart').update(30);
+      }
+    }, 9000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
+        $('.chart5').data('easyPieChart').update(87);
+      }
+    }, 19000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
+        $('.chart5').data('easyPieChart').update(28);
+      }
+    }, 27000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
+        $('.chart5').data('easyPieChart').update(69);
+      }
+    }, 39000));
+    chartTimeouts.push(setTimeout(function () {
+      if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
+        $('.chart5').data('easyPieChart').update(99);
+      }
+    }, 47000));
   });
 
 }
 
-$(document).ready(
-  pieChartHome()
-);
+$(document).ready(pieChartHome);
+
+// Clear timeouts when navigating away with Turbolinks
+$(document).on('turbolinks:before-visit', function() {
+  chartTimeouts.forEach(function(id) { clearTimeout(id); });
+  chartTimeouts = [];
+});
 </script>