From 445674aacb0c58ca5eb96dc2c7c033a4d70c8670 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 22 Oct 2021 18:44:11 +0800
Subject: [PATCH] Chore: Improve code formatting & comments

---
 src/components/PingChart.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 0c76721c..cd5e239c 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -1,7 +1,12 @@
 <template>
     <div>
         <div class="period-options">
-            {{ $t("show") }}: <select id="chart-period-select" v-model="chartPeriodHrs" class="form-select form-select-sm ms-1">
+            {{ $t("show") }}:
+            <select
+                id="chart-period-select"
+                v-model="chartPeriodHrs"
+                class="form-select form-select-sm ms-1"
+            >
                 <option value="0">{{ $t("recent") }}</option>
                 <option value="3">3h</option>
                 <option value="6">6h</option>
@@ -44,9 +49,8 @@ export default {
             // Configurable filtering on top of the returned data
             chartPeriodHrs: 0,
 
-            // Just Draft:
             // A heartbeatList for 3h, 6h, 24h, 1w
-            // Set it to null, switch back to realtime (last 100 beats)
+            // Uses the $root.heartbeatList when value is null
             heartbeatList: null
         };
     },
@@ -161,7 +165,10 @@ export default {
                 .filter(
                     // Filtering as data gets appended
                     // not the most efficient, but works for now
-                    (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")))
+                    (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(
+                        dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")
+                    )
+                )
                 .map((beat) => {
                     const x = this.$root.datetime(beat.time);
                     pingData.push({
@@ -201,6 +208,7 @@ export default {
         },
     },
     watch: {
+        // Update chart data when the selected chart period changes
         chartPeriodHrs: function (newPeriod) {
             if (newPeriod == "0") {
                 newPeriod = null;
@@ -219,11 +227,14 @@ export default {
     created() {
         // Setup Watcher on the root heartbeatList,
         // And mirror latest change to this.heartbeatList
-        this.$watch(() => this.$root.heartbeatList[this.monitorId], (heartbeatList) => {
-            if (this.chartPeriodHrs != 0) {
-                this.heartbeatList.push(heartbeatList.at(-1));
-            }
-        }, { deep: true });
+        this.$watch(() => this.$root.heartbeatList[this.monitorId],
+            (heartbeatList) => {
+                if (this.chartPeriodHrs != 0) {
+                    this.heartbeatList.push(heartbeatList.at(-1));
+                }
+            },
+            { deep: true }
+        );
     }
 };
 </script>