From 6e3370f164dd53a5c2d2c2500aaf7bfba7b89945 Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Thu, 12 Aug 2021 19:46:17 +0200
Subject: [PATCH] sources chart - fix loading when longer load time

---
 components/Chart.vue | 23 +++++++++++++++--------
 src/helpers.js       |  4 ++++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/Chart.vue b/components/Chart.vue
index 4bd188f5..15290915 100644
--- a/components/Chart.vue
+++ b/components/Chart.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script>
+    import {sleep} from "../src/helpers";
+
     export default {
         props: {
             label: { required: true },
@@ -10,17 +12,22 @@
             cumulative: { type: Boolean },
         },
         async created() {
-            await this.$loadScript('charts', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js');
         },
-        mounted() {
-            if (process.client) {
-                setTimeout(_ => {
-                    this.drawChart();
-                }, 1000);
-            }
+        async mounted() {
+            if (!process.client) { return; }
+
+            await this.$loadScript('charts', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js');
+            this.drawChart();
         },
         methods: {
-            drawChart() {
+            async drawChart() {
+                let tries = 0;
+                while (window.Chart === undefined) {
+                    await sleep(100);
+                    if (tries++ > 1000) {
+                        return;
+                    }
+                }
                 new Chart(this.$el.getContext('2d'), {
                     type: 'line',
                     data: {
diff --git a/src/helpers.js b/src/helpers.js
index d4a1a5a5..03db3e02 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -212,3 +212,7 @@ export const clearKey = (key) => {
     if (!key) { return null; }
     return key.replace(/'/g, '_');
 }
+
+export const sleep = (milliseconds) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds));
+}