From 71bec74081fcbc39fc5952becd6d04be0651debb Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 11 Aug 2021 21:00:33 +0800
Subject: [PATCH] Feat: Add down-ed bars, improve UI

---
 src/components/PingChart.vue | 65 ++++++++++++++++++++++++++++++++----
 1 file changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 0d2dc76f..69dc6293 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -24,7 +24,7 @@ export default {
     },
     data() {
         return {
-            chartPeriodHrs: 24,
+            chartPeriodHrs: 6,
         };
     },
     computed: {
@@ -39,11 +39,27 @@ export default {
                         bottom: 10,
                     },
                 },
+
+                elements: {
+                    point: {
+                        radius: 0,
+                    },
+                    bar: {
+                        barThickness: "flex",
+                    }
+                },
                 scales: {
                     x: {
                         type: "time",
                         time: {
-                            stepSize: 30,
+                            unit: "minute",
+                        },
+                        ticks: {
+                            maxRotation: 0,
+                            autoSkipPadding: 10,
+                        },
+                        grid: {
+                            color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
                         },
                     },
                     y: {
@@ -51,10 +67,29 @@ export default {
                             display: true,
                             text: "Response Time (ms)",
                         },
-                    }
+                        offset: false,
+                        grid: {
+                            color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
+                        },
+                    },
+                    y1: {
+                        display: false,
+                        position: "right",
+                        grid: {
+                            drawOnChartArea: false,
+                        },
+                        min: 0,
+                        max: 1,
+                        offset: false,
+                    },
                 },
                 bounds: "ticks",
                 plugins: {
+                    tooltip: {
+                        filter: function (tooltipItem) {
+                            return tooltipItem.datasetIndex === 0;
+                        },
+                    },
                     legend: {
                         display: false,
                     },
@@ -62,9 +97,10 @@ export default {
             }
         },
         chartData() {
-            let data = [];
+            let ping_data = [];
+            let down_data = [];
             if (this.monitorId in this.$root.heartbeatList) {
-                data = this.$root.heartbeatList[this.monitorId]
+                ping_data = this.$root.heartbeatList[this.monitorId]
                     .filter(
                         (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
                     .map((beat) => {
@@ -73,15 +109,32 @@ export default {
                             y: beat.ping,
                         };
                     });
+                down_data = this.$root.heartbeatList[this.monitorId]
+                    .filter(
+                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
+                    .map((beat) => {
+                        return {
+                            x: dayjs.utc(beat.time).tz(this.$root.timezone).format("YYYY-MM-DD HH:mm:ss"),
+                            y: beat.status === 0 ? 1 : 0,
+                        };
+                    });
             }
             return {
                 datasets: [
                     {
-                        data: data,
+                        data: ping_data,
                         fill: "origin",
                         tension: 0.2,
                         borderColor: "#5CDD8B",
                         backgroundColor: "#5CDD8B38",
+                        yAxisID: "y",
+                    },
+                    {
+                        type: "bar",
+                        data: down_data,
+                        borderColor: "#00000000",
+                        backgroundColor: "#DC354568",
+                        yAxisID: "y1",
                     },
                 ],
             };