From 6ed1d8cb2f7f8a2dd466ae73614bb96adb02584f Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Thu, 12 Aug 2021 00:31:21 +0800
Subject: [PATCH] Feat: Use selective import, improve tooltip UI

---
 src/components/PingChart.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 69dc6293a..0b41aa0d5 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Chart, registerables } from "chart.js";
+import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
@@ -12,7 +12,7 @@ import { LineChart } from "vue-chart-3";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
-Chart.register(...registerables);
+Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
 
 export default {
     components: { LineChart },
@@ -86,9 +86,17 @@ export default {
                 bounds: "ticks",
                 plugins: {
                     tooltip: {
+                        mode: "nearest",
+                        intersect: false,
+                        padding: 10,
                         filter: function (tooltipItem) {
                             return tooltipItem.datasetIndex === 0;
                         },
+                        callbacks: {
+                            label: (context) => {
+                                return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`
+                            },
+                        }
                     },
                     legend: {
                         display: false,