switched to intelligent check for chartjs chart

web/static/chart_functions.js

@@ -144,6 +144,11 @@ function sparkline_summary_chart(jsonData, element) {
 
 function fill_charts() {
     document.querySelectorAll(".chartjs-chart").forEach(function (el) {
+        fill_chart(el);
+    });
+}
+
+function fill_chart(el) {
     var url = el.dataset.chartEndpoint;
     var type = el.dataset.chartType;
 
@@ -163,8 +168,6 @@ function fill_charts() {
     }).catch(error => {
         console.error("Unable to set up chart: ", error)
     });
-        
-    });
 }
 
-export {fill_charts}
+export {fill_charts, fill_chart}

web/static/index.js

@@ -1,4 +1,4 @@
-import {fill_charts} from "./chart_functions.js";
+import {fill_charts, fill_chart} from "./chart_functions.js";
 import {register_dropdowns} from "./dropdowns.js";
 
 
@@ -33,7 +33,7 @@ function register_nav_links() {
 
 function register_handlers() {
     register_nav_links();
-    fill_charts();
+    //fill_charts();
     register_dropdowns();
 }
 
@@ -57,4 +57,4 @@ const trigger_table_animation = debounce(load_in_table, 100);
 
 const trigger_reset_handlers = debounce(register_handlers, 200);
 
-export {trigger_reset_handlers, trigger_table_animation};
+export {trigger_reset_handlers, trigger_table_animation, fill_chart};

web/templates/index.html

@@ -61,15 +61,34 @@
     </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script type="module">
-            import {trigger_reset_handlers, trigger_table_animation} from "/static/index.js";
-            feather.replace();
+            import {trigger_reset_handlers, trigger_table_animation, fill_chart} from "/static/index.js";
             htmx.onLoad(function (element) {
-                if (element.localName === "tr") {
-                    trigger_table_animation();
-                } else {
+                feather.replace();
+                if (element.dataset.mainBody) {
                     trigger_reset_handlers();
                 }
+                if (element.localName === "tr") {
+                    trigger_table_animation();
+                } 
+                
+                if (element.querySelectorAll("canvas").length > 0) {
+                    element.querySelectorAll("canvas").forEach(function (el) {
+                        fill_chart(el);
                     });
+                }
+            });
+            document.body.addEventListener('htmx:beforeSwap', function (event) {
+                // Get the target element where content will be replaced
+                var target = event.detail.target;
+
+                // Check if the target has Chart.js charts
+                var charts = target.querySelectorAll('.chartjs-chart');
+                charts.forEach(function (chart) {
+                    // Destroy each Chart.js chart before swapping content
+                    Chart.getChart(chart).destroy();
+                });
+            });
+            trigger_reset_handlers();
         </script>
 </body>
 </html>