From beb22f743df742b96f2721ab703a9ba74331757c Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Thu, 2 Mar 2023 04:47:51 +0800
Subject: [PATCH] Chore: Update chart.js & improve perf.

---
 package-lock.json            | 136 +++++++++++++++--------------------
 package.json                 |   6 +-
 src/components/PingChart.vue |  13 ++--
 3 files changed, 69 insertions(+), 86 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9d636ba91..4bdcdfe38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,8 +83,8 @@
                 "aedes": "^0.46.3",
                 "babel-plugin-rewire": "~1.2.0",
                 "bootstrap": "5.1.3",
-                "chart.js": "~3.6.2",
-                "chartjs-adapter-dayjs": "~1.0.0",
+                "chart.js": "~4.2.1",
+                "chartjs-adapter-dayjs-4": "~1.0.4",
                 "concurrently": "^7.1.0",
                 "core-js": "~3.26.1",
                 "cross-env": "~7.0.3",
@@ -114,7 +114,7 @@
                 "vite": "~3.1.0",
                 "vite-plugin-compression": "^0.5.1",
                 "vue": "next",
-                "vue-chart-3": "3.0.9",
+                "vue-chartjs": "~5.2.0",
                 "vue-confirm-dialog": "~1.0.2",
                 "vue-contenteditable": "~3.0.4",
                 "vue-i18n": "~9.2.2",
@@ -4212,6 +4212,12 @@
             "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.2.tgz",
             "integrity": "sha512-retLUN4TwCJ0QJDi9OCJwYVaXAz93NeOkEtEQL98M2bykBOxmURlP0YlfsuE46kItOOVZIWRYC3KsSLhQ1R2Qw=="
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+            "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+            "dev": true
+        },
         "node_modules/@louislam/ping": {
             "version": "0.4.2-mod.1",
             "resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.2-mod.1.tgz",
@@ -6449,19 +6455,28 @@
             "integrity": "sha512-NpwMDdSIprbYx1CLnfbxEIarI0Z+s9MssEgggMNheGM+WD68yOhV7IEA/3r6tr0yTRgQD0HuZJDw32s99i6L+A=="
         },
         "node_modules/chart.js": {
-            "version": "3.6.2",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.2.tgz",
-            "integrity": "sha512-Xz7f/fgtVltfQYWq0zL1Xbv7N2inpG+B54p3D5FSvpCdy3sM+oZhbqa42eNuYXltaVvajgX5UpKCU2GeeJIgxg==",
-            "dev": true
-        },
-        "node_modules/chartjs-adapter-dayjs": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs/-/chartjs-adapter-dayjs-1.0.0.tgz",
-            "integrity": "sha512-EnbVqTJGFKLpg1TROLdCEufrzbmIa2oeLGx8O2Wdjw2EoMudoOo9+YFu+6CM0Z0hQ/v3yq/e/Y6efQMu22n8Jg==",
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz",
+            "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==",
             "dev": true,
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": "^7.0.0"
+            }
+        },
+        "node_modules/chartjs-adapter-dayjs-4": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
+            "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
             "peerDependencies": {
-                "chart.js": ">= 2.8.0 < 3",
-                "dayjs": "^1.8.15"
+                "chart.js": ">=4.0.1",
+                "dayjs": "^1.9.7"
             }
         },
         "node_modules/check-more-types": {
@@ -18355,39 +18370,14 @@
                 "@vue/shared": "3.2.36"
             }
         },
-        "node_modules/vue-chart-3": {
-            "version": "3.0.9",
-            "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.0.9.tgz",
-            "integrity": "sha512-RyVaOhSem0v4v645zAkdi1mgZjuD3KMQr11KrEZGFupoHzV2qn/sBpEDvplR9i57YnRxZ3KDnKqw/1rx2CkOZA==",
+        "node_modules/vue-chartjs": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
+            "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
             "dev": true,
-            "dependencies": {
-                "@vue/runtime-core": "latest",
-                "@vue/runtime-dom": "latest",
-                "csstype": "3.0.10",
-                "lodash": "latest",
-                "nanoid": "3.1.31"
-            },
             "peerDependencies": {
-                "chart.js": "=> ^3.1.0",
-                "vue": ">= 3"
-            }
-        },
-        "node_modules/vue-chart-3/node_modules/csstype": {
-            "version": "3.0.10",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-            "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-            "dev": true
-        },
-        "node_modules/vue-chart-3/node_modules/nanoid": {
-            "version": "3.1.31",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.31.tgz",
-            "integrity": "sha512-ZivnJm0o9bb13p2Ot5CpgC2rQdzB9Uxm/mFZweqm5eMViqOJe3PV6LU2E30SiLgheesmcPrjquqraoolONSA0A==",
-            "dev": true,
-            "bin": {
-                "nanoid": "bin/nanoid.cjs"
-            },
-            "engines": {
-                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+                "chart.js": "^4.1.1",
+                "vue": "^3.0.0-0 || ^2.7.0"
             }
         },
         "node_modules/vue-confirm-dialog": {
@@ -22230,6 +22220,12 @@
             "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.2.tgz",
             "integrity": "sha512-retLUN4TwCJ0QJDi9OCJwYVaXAz93NeOkEtEQL98M2bykBOxmURlP0YlfsuE46kItOOVZIWRYC3KsSLhQ1R2Qw=="
         },
+        "@kurkle/color": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+            "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+            "dev": true
+        },
         "@louislam/ping": {
             "version": "0.4.2-mod.1",
             "resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.2-mod.1.tgz",
@@ -24096,15 +24092,18 @@
             "integrity": "sha512-NpwMDdSIprbYx1CLnfbxEIarI0Z+s9MssEgggMNheGM+WD68yOhV7IEA/3r6tr0yTRgQD0HuZJDw32s99i6L+A=="
         },
         "chart.js": {
-            "version": "3.6.2",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.2.tgz",
-            "integrity": "sha512-Xz7f/fgtVltfQYWq0zL1Xbv7N2inpG+B54p3D5FSvpCdy3sM+oZhbqa42eNuYXltaVvajgX5UpKCU2GeeJIgxg==",
-            "dev": true
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz",
+            "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==",
+            "dev": true,
+            "requires": {
+                "@kurkle/color": "^0.3.0"
+            }
         },
-        "chartjs-adapter-dayjs": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs/-/chartjs-adapter-dayjs-1.0.0.tgz",
-            "integrity": "sha512-EnbVqTJGFKLpg1TROLdCEufrzbmIa2oeLGx8O2Wdjw2EoMudoOo9+YFu+6CM0Z0hQ/v3yq/e/Y6efQMu22n8Jg==",
+        "chartjs-adapter-dayjs-4": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
+            "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
             "dev": true
         },
         "check-more-types": {
@@ -33031,32 +33030,11 @@
                 }
             }
         },
-        "vue-chart-3": {
-            "version": "3.0.9",
-            "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.0.9.tgz",
-            "integrity": "sha512-RyVaOhSem0v4v645zAkdi1mgZjuD3KMQr11KrEZGFupoHzV2qn/sBpEDvplR9i57YnRxZ3KDnKqw/1rx2CkOZA==",
-            "dev": true,
-            "requires": {
-                "@vue/runtime-core": "latest",
-                "@vue/runtime-dom": "latest",
-                "csstype": "3.0.10",
-                "lodash": "latest",
-                "nanoid": "3.1.31"
-            },
-            "dependencies": {
-                "csstype": {
-                    "version": "3.0.10",
-                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-                    "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-                    "dev": true
-                },
-                "nanoid": {
-                    "version": "3.1.31",
-                    "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.31.tgz",
-                    "integrity": "sha512-ZivnJm0o9bb13p2Ot5CpgC2rQdzB9Uxm/mFZweqm5eMViqOJe3PV6LU2E30SiLgheesmcPrjquqraoolONSA0A==",
-                    "dev": true
-                }
-            }
+        "vue-chartjs": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
+            "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
+            "dev": true
         },
         "vue-confirm-dialog": {
             "version": "1.0.2",
diff --git a/package.json b/package.json
index 8f808687f..b34b44075 100644
--- a/package.json
+++ b/package.json
@@ -141,8 +141,8 @@
         "aedes": "^0.46.3",
         "babel-plugin-rewire": "~1.2.0",
         "bootstrap": "5.1.3",
-        "chart.js": "~3.6.2",
-        "chartjs-adapter-dayjs": "~1.0.0",
+        "chart.js": "~4.2.1",
+        "chartjs-adapter-dayjs-4": "~1.0.4",
         "concurrently": "^7.1.0",
         "core-js": "~3.26.1",
         "cross-env": "~7.0.3",
@@ -172,7 +172,7 @@
         "vite": "~3.1.0",
         "vite-plugin-compression": "^0.5.1",
         "vue": "next",
-        "vue-chart-3": "3.0.9",
+        "vue-chartjs": "~5.2.0",
         "vue-confirm-dialog": "~1.0.2",
         "vue-contenteditable": "~3.0.4",
         "vue-i18n": "~9.2.2",
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 2733e68c9..9502eb84c 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -11,16 +11,16 @@
             </ul>
         </div>
         <div class="chart-wrapper" :class="{ loading : loading}">
-            <LineChart :chart-data="chartData" :options="chartOptions" />
+            <Line :data="chartData" :options="chartOptions" />
         </div>
     </div>
 </template>
 
 <script lang="js">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
-import "chartjs-adapter-dayjs";
+import "chartjs-adapter-dayjs-4";
 import dayjs from "dayjs";
-import { LineChart } from "vue-chart-3";
+import { Line } from "vue-chartjs";
 import { useToast } from "vue-toastification";
 import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
 
@@ -29,7 +29,7 @@ const toast = useToast();
 Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
 
 export default {
-    components: { LineChart },
+    components: { Line },
     props: {
         /** ID of monitor */
         monitorId: {
@@ -104,8 +104,10 @@ export default {
                             }
                         },
                         ticks: {
+                            sampleSize: 3,
                             maxRotation: 0,
                             autoSkipPadding: 30,
+                            padding: 3,
                         },
                         grid: {
                             color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
@@ -197,6 +199,7 @@ export default {
                         borderColor: "#5CDD8B",
                         backgroundColor: "#5CDD8B38",
                         yAxisID: "y",
+                        label: "ping",
                     },
                     {
                         // Bar Chart
@@ -208,6 +211,8 @@ export default {
                         barThickness: "flex",
                         barPercentage: 1,
                         categoryPercentage: 1,
+                        inflateAmount: 0.05,
+                        label: "status",
                     },
                 ],
             };