mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 05:22:27 +03:00
Code Issues Projects Releases Packages Wiki Activity

Feat: Use selective import, improve tooltip UI

Browse source
This commit is contained in:
Nelson Chan 2021-08-12 00:31:21 +08:00
parent 71bec74081
commit 6ed1d8cb2f
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/PingChart.vue
View file

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