Feat: Display recent ping chart

src/components/PingChart.vue

@@ -0,0 +1,91 @@
+<template>
+    <LineChart :chart-data="chartData" :height="100" :options="chartOptions" />
+</template>
+
+<script>
+import { Chart, registerables } from "chart.js";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import "chartjs-adapter-dayjs";
+import { LineChart } from "vue-chart-3";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+Chart.register(...registerables);
+
+export default {
+    components: { LineChart },
+    props: {
+        monitorId: {
+            type: Number,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            chartPeriodHrs: 24,
+        };
+    },
+    computed: {
+        chartOptions() {
+            return {
+                responsive: true,
+                layout: {
+                    padding: {
+                        left: 10,
+                        right: 30,
+                        top: 30,
+                        bottom: 10,
+                    },
+                },
+                scales: {
+                    x: {
+                        type: "time",
+                        time: {
+                            stepSize: 30,
+                        },
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: "Response Time (ms)",
+                        },
+                    }
+                },
+                bounds: "ticks",
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                },
+            }
+        },
+        chartData() {
+            let data = [];
+            if (this.monitorId in this.$root.heartbeatList) {
+                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.ping,
+                        };
+                    });
+            }
+            return {
+                datasets: [
+                    {
+                        data: data,
+                        fill: "origin",
+                        tension: 0.2,
+                        borderColor: "#5CDD8B",
+                        backgroundColor: "#5CDD8B38",
+                    },
+                ],
+            };
+        },
+    },
+};
+</script>

src/pages/Details.vue

@@ -42,7 +42,11 @@
             <div class="col">
                 <h4>{{ pingTitle }}</h4>
                 <p>(Current)</p>
-                <span class="num"><CountUp :value="ping" /></span>
+                <span class="num">
+                    <a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
+                        <CountUp :value="ping" />
+                    </a>
+                </span>
             </div>
             <div class="col">
                 <h4>Avg. {{ pingTitle }}</h4>
@@ -70,6 +74,14 @@
         </div>
     </div>
 
+    <div v-if="showPingChartBox" class="shadow-box big-padding text-center">
+        <div class="row">
+            <div class="col">
+                <PingChart :monitor-id="monitor.id" />
+            </div>
+        </div>
+    </div>
+
     <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
         <div class="row">
             <div class="col">
@@ -164,6 +176,7 @@ import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
 import Pagination from "v-pagination-3";
+import PingChart from "../components/PingChart.vue";
 
 export default {
     components: {
@@ -174,6 +187,7 @@ export default {
         Confirm,
         Status,
         Pagination,
+        PingChart,
     },
     data() {
         return {
@@ -181,6 +195,7 @@ export default {
             perPage: 25,
             heartBeatList: [],
             toggleCertInfoBox: false,
+            showPingChartBox: false,
         }
     },
     computed: {