From 54983913e16894894137f74427c41102d1466bb9 Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Fri, 11 Oct 2024 22:35:12 +0200
Subject: [PATCH] Fix: Chart JS

---
 basicswap/static/js/pricechart.js | 145 ++++++++++++++----------------
 1 file changed, 69 insertions(+), 76 deletions(-)

diff --git a/basicswap/static/js/pricechart.js b/basicswap/static/js/pricechart.js
index 50a91a2..5583f7d 100644
--- a/basicswap/static/js/pricechart.js
+++ b/basicswap/static/js/pricechart.js
@@ -866,76 +866,70 @@ const app = {
   },
   
   init: () => {
-    window.addEventListener('load', async () => {
-      ui.showLoader();
-      try {
-        volumeToggle.init();
-        await app.updateBTCPrice();
-
-          chartModule.initChart();
-          chartModule.showChartLoader();
-        } else {
-          console.warn('Chart container not found, skipping chart initialization');
-        }
-
-        const coinDataPromises = config.coins.map(coin => app.loadCoinData(coin));
-        await Promise.all(coinDataPromises);
-
-        if (chartModule.chart) {
-          config.currentResolution = 'month';
-          await chartModule.updateChart('BTC');
-          app.updateResolutionButtons('BTC');
-        }
-
-        ui.setActiveContainer('btc-container');
-
-        // Set up event listeners for coin containers
-        config.coins.forEach(coin => {
-          const container = document.getElementById(`${coin.symbol.toLowerCase()}-container`);
-          if (container) {
-            container.addEventListener('click', () => {
-              ui.setActiveContainer(`${coin.symbol.toLowerCase()}-container`);
-              if (chartModule.chart) {
-                if (coin.symbol === 'WOW') {
-                  config.currentResolution = 'day';
-                }
-                chartModule.updateChart(coin.symbol);
-                app.updateResolutionButtons(coin.symbol);
-              }
-            });
-          }
-        });
-
-        app.initializeSelectImages();
-        app.initAutoRefresh();
-
-        const refreshAllButton = document.getElementById('refresh-all');
-        if (refreshAllButton) {
-          refreshAllButton.addEventListener('click', app.refreshAllData);
-        }
-
-        const headers = document.querySelectorAll('th');
-        headers.forEach((header, index) => {
-          header.addEventListener('click', () => app.sortTable(index, header.classList.contains('disabled')));
-        });
-
-        const closeErrorButton = document.getElementById('close-error');
-        if (closeErrorButton) {
-          closeErrorButton.addEventListener('click', ui.hideErrorMessage);
-        }
-
-      } catch (error) {
-        console.error('Error during initialization:', error);
-        ui.displayErrorMessage('Failed to initialize the dashboard. Please try refreshing the page.');
-      } finally {
-        ui.hideLoader();
-        if (chartModule.chart) {
-          chartModule.hideChartLoader();
-        }
-      }
-    });
+    window.addEventListener('load', app.onLoad);
     app.loadLastRefreshedTime();
   },
+  
+  onLoad: async () => {
+    ui.showLoader();
+    try {
+      volumeToggle.init();
+      await app.updateBTCPrice();
+      const chartContainer = document.getElementById('coin-chart');
+      if (chartContainer) {
+        chartModule.initChart();
+        chartModule.showChartLoader();
+      } else {
+        console.warn('Chart container not found, skipping chart initialization');
+      }
+      for (const coin of config.coins) {
+        await app.loadCoinData(coin);
+      }
+      if (chartModule.chart) {
+        config.currentResolution = 'month';
+        await chartModule.updateChart('BTC');
+        app.updateResolutionButtons('BTC');
+      }
+      ui.setActiveContainer('btc-container');
+      config.coins.forEach(coin => {
+        const container = document.getElementById(`${coin.symbol.toLowerCase()}-container`);
+        if (container) {
+          container.addEventListener('click', () => {
+            ui.setActiveContainer(`${coin.symbol.toLowerCase()}-container`);
+            if (chartModule.chart) {
+              if (coin.symbol === 'WOW') {
+                config.currentResolution = 'day';
+              }
+              chartModule.updateChart(coin.symbol);
+              app.updateResolutionButtons(coin.symbol);
+            }
+          });
+        }
+      });     
+      const refreshAllButton = document.getElementById('refresh-all');
+      if (refreshAllButton) {
+        refreshAllButton.addEventListener('click', app.refreshAllData);
+      }
+      app.initializeSelectImages();
+      const headers = document.querySelectorAll('th');
+      headers.forEach((header, index) => {
+        header.addEventListener('click', () => app.sortTable(index, header.classList.contains('disabled')));
+      });
+      const closeErrorButton = document.getElementById('close-error');
+      if (closeErrorButton) {
+        closeErrorButton.addEventListener('click', ui.hideErrorMessage);
+      }
+      app.initAutoRefresh();
+    } catch (error) {
+      console.error('Error during initialization:', error);
+      ui.displayErrorMessage('Failed to initialize the dashboard. Please try refreshing the page.');
+    } finally {
+      ui.hideLoader();
+      if (chartModule.chart) {
+        chartModule.hideChartLoader();
+      }
+    }
+  },
 
   loadCoinData: async (coin) => {
     const cacheKey = `coinData_${coin.symbol}`;
@@ -1029,14 +1023,13 @@ const app = {
   },
 
   toggleAutoRefresh: () => {
-  if (app.isAutoRefreshEnabled) {
-    app.stopAutoRefresh();
-  } else {
-    app.startAutoRefresh();
-    app.startSpinAnimation();
-  }
-  app.updateAutoRefreshButton();
-},
+    if (app.isAutoRefreshEnabled) {
+      app.stopAutoRefresh();
+    } else {
+      app.startAutoRefresh();
+    }
+    app.updateAutoRefreshButton();
+  },
   
   updateNextRefreshTime: () => {
     const nextRefreshSpan = document.getElementById('next-refresh-time');