From 86f2a86a4ebcea6d8681723b30b18759cb9dc41c Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Sat, 6 Jan 2024 23:32:19 +0800
Subject: [PATCH] Feat: Periodic refresh chart data

---
 src/components/PingChart.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 7a0d5f07..1ea1028c 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -57,7 +57,8 @@ export default {
                 168: "1w",
             },
 
-            chartRawData: null
+            chartRawData: null,
+            chartDataFetchInterval: null,
         };
     },
     computed: {
@@ -315,6 +316,10 @@ export default {
     watch: {
         // Update chart data when the selected chart period changes
         chartPeriodHrs: function (newPeriod) {
+            if (this.chartDataFetchInterval) {
+                clearInterval(this.chartDataFetchInterval);
+                this.chartDataFetchInterval = null;
+            }
 
             // eslint-disable-next-line eqeqeq
             if (newPeriod == "0") {
@@ -340,6 +345,14 @@ export default {
                     }
                     this.loading = false;
                 });
+
+                this.chartDataFetchInterval = setInterval(() => {
+                    this.$root.getMonitorChartData(this.monitorId, period, (res) => {
+                        if (res.ok) {
+                            this.chartRawData = res.data;
+                        }
+                    });
+                }, 5 * 60 * 1000);
             }
         }
     },
@@ -354,6 +367,11 @@ export default {
             this.chartPeriodHrs = period;
         }
     },
+    beforeUnmount() {
+        if (this.chartDataFetchInterval) {
+            clearInterval(this.chartDataFetchInterval);
+        }
+    },
     methods: {
         // Get color of bar chart for this datapoint
         getBarColorForDatapoint(datapoint) {