Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Update chart.js & improve perf.

Browse Source
pull/2868/head
Nelson Chan 1 year ago
parent beafbf27ad
commit beb22f743d
3 changed files with 68 additions and 85 deletions
Show Stats Download Patch File Download Diff File

134
package-lock.json generated
Unescape View File

@ -83,8 +83,8 @@
"aedes": "^0.46.3", "aedes": "^0.46.3",
"babel-plugin-rewire": "~1.2.0", "babel-plugin-rewire": "~1.2.0",
"bootstrap": "5.1.3", "bootstrap": "5.1.3",
"chart.js": "~3.6.2", "chart.js": "~4.2.1",
"chartjs-adapter-dayjs": "~1.0.0", "chartjs-adapter-dayjs-4": "~1.0.4",
"concurrently": "^7.1.0", "concurrently": "^7.1.0",
"core-js": "~3.26.1", "core-js": "~3.26.1",
"cross-env": "~7.0.3", "cross-env": "~7.0.3",
@ -114,7 +114,7 @@
"vite": "~3.1.0", "vite": "~3.1.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vue": "next", "vue": "next",
"vue-chart-3": "3.0.9", "vue-chartjs": "~5.2.0",
"vue-confirm-dialog": "~1.0.2", "vue-confirm-dialog": "~1.0.2",
"vue-contenteditable": "~3.0.4", "vue-contenteditable": "~3.0.4",
"vue-i18n": "~9.2.2", "vue-i18n": "~9.2.2",
@ -4212,6 +4212,12 @@
"resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.2.tgz", "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.2.tgz",
"integrity": "sha512-retLUN4TwCJ0QJDi9OCJwYVaXAz93NeOkEtEQL98M2bykBOxmURlP0YlfsuE46kItOOVZIWRYC3KsSLhQ1R2Qw==" "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": { "node_modules/@louislam/ping": {
"version": "0.4.2-mod.1", "version": "0.4.2-mod.1",
"resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.2-mod.1.tgz", "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==" "integrity": "sha512-NpwMDdSIprbYx1CLnfbxEIarI0Z+s9MssEgggMNheGM+WD68yOhV7IEA/3r6tr0yTRgQD0HuZJDw32s99i6L+A=="
}, },
"node_modules/chart.js": { "node_modules/chart.js": {
"version": "3.6.2", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.2.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz",
"integrity": "sha512-Xz7f/fgtVltfQYWq0zL1Xbv7N2inpG+B54p3D5FSvpCdy3sM+oZhbqa42eNuYXltaVvajgX5UpKCU2GeeJIgxg==", "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==",
"dev": true "dev": true,
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": "^7.0.0"
}
}, },
"node_modules/chartjs-adapter-dayjs": { "node_modules/chartjs-adapter-dayjs-4": {
"version": "1.0.0", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs/-/chartjs-adapter-dayjs-1.0.0.tgz", "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
"integrity": "sha512-EnbVqTJGFKLpg1TROLdCEufrzbmIa2oeLGx8O2Wdjw2EoMudoOo9+YFu+6CM0Z0hQ/v3yq/e/Y6efQMu22n8Jg==", "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
"dev": true, "dev": true,
"engines": {
"node": ">=10"
},
"peerDependencies": { "peerDependencies": {
"chart.js": ">= 2.8.0 < 3", "chart.js": ">=4.0.1",
"dayjs": "^1.8.15" "dayjs": "^1.9.7"
} }
}, },
"node_modules/check-more-types": { "node_modules/check-more-types": {
@ -18355,39 +18370,14 @@
"@vue/shared": "3.2.36" "@vue/shared": "3.2.36"
} }
}, },
"node_modules/vue-chart-3": { "node_modules/vue-chartjs": {
"version": "3.0.9", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.0.9.tgz", "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
"integrity": "sha512-RyVaOhSem0v4v645zAkdi1mgZjuD3KMQr11KrEZGFupoHzV2qn/sBpEDvplR9i57YnRxZ3KDnKqw/1rx2CkOZA==", "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
"dev": true, "dev": true,
"dependencies": {
"@vue/runtime-core": "latest",
"@vue/runtime-dom": "latest",
"csstype": "3.0.10",
"lodash": "latest",
"nanoid": "3.1.31"
},
"peerDependencies": { "peerDependencies": {
"chart.js": "=> ^3.1.0", "chart.js": "^4.1.1",
"vue": ">= 3" "vue": "^3.0.0-0 || ^2.7.0"
}
},
"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"
} }
}, },
"node_modules/vue-confirm-dialog": { "node_modules/vue-confirm-dialog": {
@ -22230,6 +22220,12 @@
"resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.2.tgz", "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.2.tgz",
"integrity": "sha512-retLUN4TwCJ0QJDi9OCJwYVaXAz93NeOkEtEQL98M2bykBOxmURlP0YlfsuE46kItOOVZIWRYC3KsSLhQ1R2Qw==" "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": { "@louislam/ping": {
"version": "0.4.2-mod.1", "version": "0.4.2-mod.1",
"resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.2-mod.1.tgz", "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==" "integrity": "sha512-NpwMDdSIprbYx1CLnfbxEIarI0Z+s9MssEgggMNheGM+WD68yOhV7IEA/3r6tr0yTRgQD0HuZJDw32s99i6L+A=="
}, },
"chart.js": { "chart.js": {
"version": "3.6.2", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.2.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz",
"integrity": "sha512-Xz7f/fgtVltfQYWq0zL1Xbv7N2inpG+B54p3D5FSvpCdy3sM+oZhbqa42eNuYXltaVvajgX5UpKCU2GeeJIgxg==", "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==",
"dev": true "dev": true,
"requires": {
"@kurkle/color": "^0.3.0"
}
}, },
"chartjs-adapter-dayjs": { "chartjs-adapter-dayjs-4": {
"version": "1.0.0", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs/-/chartjs-adapter-dayjs-1.0.0.tgz", "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
"integrity": "sha512-EnbVqTJGFKLpg1TROLdCEufrzbmIa2oeLGx8O2Wdjw2EoMudoOo9+YFu+6CM0Z0hQ/v3yq/e/Y6efQMu22n8Jg==", "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
"dev": true "dev": true
}, },
"check-more-types": { "check-more-types": {
@ -33031,32 +33030,11 @@
} }
} }
}, },
"vue-chart-3": { "vue-chartjs": {
"version": "3.0.9", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.0.9.tgz", "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
"integrity": "sha512-RyVaOhSem0v4v645zAkdi1mgZjuD3KMQr11KrEZGFupoHzV2qn/sBpEDvplR9i57YnRxZ3KDnKqw/1rx2CkOZA==", "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
"dev": true, "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-confirm-dialog": { "vue-confirm-dialog": {
"version": "1.0.2", "version": "1.0.2",

6
package.json
Unescape View File

@ -141,8 +141,8 @@
"aedes": "^0.46.3", "aedes": "^0.46.3",
"babel-plugin-rewire": "~1.2.0", "babel-plugin-rewire": "~1.2.0",
"bootstrap": "5.1.3", "bootstrap": "5.1.3",
"chart.js": "~3.6.2", "chart.js": "~4.2.1",
"chartjs-adapter-dayjs": "~1.0.0", "chartjs-adapter-dayjs-4": "~1.0.4",
"concurrently": "^7.1.0", "concurrently": "^7.1.0",
"core-js": "~3.26.1", "core-js": "~3.26.1",
"cross-env": "~7.0.3", "cross-env": "~7.0.3",
@ -172,7 +172,7 @@
"vite": "~3.1.0", "vite": "~3.1.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vue": "next", "vue": "next",
"vue-chart-3": "3.0.9", "vue-chartjs": "~5.2.0",
"vue-confirm-dialog": "~1.0.2", "vue-confirm-dialog": "~1.0.2",
"vue-contenteditable": "~3.0.4", "vue-contenteditable": "~3.0.4",
"vue-i18n": "~9.2.2", "vue-i18n": "~9.2.2",

13
src/components/PingChart.vue
Unescape View File

@ -11,16 +11,16 @@
</ul> </ul>
</div> </div>
<div class="chart-wrapper" :class="{ loading : loading}"> <div class="chart-wrapper" :class="{ loading : loading}">
<LineChart :chart-data="chartData" :options="chartOptions" /> <Line :data="chartData" :options="chartOptions" />
</div> </div>
</div> </div>
</template> </template>
<script lang="js"> <script lang="js">
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.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 dayjs from "dayjs";
import { LineChart } from "vue-chart-3"; import { Line } from "vue-chartjs";
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts"; 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); Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
export default { export default {
components: { LineChart }, components: { Line },
props: { props: {
/** ID of monitor */ /** ID of monitor */
monitorId: { monitorId: {
@ -104,8 +104,10 @@ export default {
} }
}, },
ticks: { ticks: {
sampleSize: 3,
maxRotation: 0, maxRotation: 0,
autoSkipPadding: 30, autoSkipPadding: 30,
padding: 3,
}, },
grid: { grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)", 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", borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B38", backgroundColor: "#5CDD8B38",
yAxisID: "y", yAxisID: "y",
label: "ping",
}, },
{ {
// Bar Chart // Bar Chart
@ -208,6 +211,8 @@ export default {
barThickness: "flex", barThickness: "flex",
barPercentage: 1, barPercentage: 1,
categoryPercentage: 1, categoryPercentage: 1,
inflateAmount: 0.05,
label: "status",
}, },
], ],
}; };

Write Preview
Loading…
Cancel
Save