uptime-kuma/src/components/PingChart.vue

92 lines
2.6 KiB
Vue
Raw Normal View History

2021-08-10 11:34:47 +00:00
<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>