uptime-kuma/src/components/PingChart.vue

333 lines
11 KiB
Vue
Raw Normal View History

2021-08-10 11:34:47 +00:00
<template>
<div>
<div class="period-options">
2021-10-23 17:26:56 +00:00
<button type="button" class="btn btn-light dropdown-toggle btn-period-toggle" data-bs-toggle="dropdown" aria-expanded="false">
{{ chartPeriodOptions[chartPeriodHrs] }}&nbsp;
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li v-for="(item, key) in chartPeriodOptions" :key="key">
<a class="dropdown-item" :class="{ active: chartPeriodHrs == key }" href="#" @click="chartPeriodHrs = key">{{ item }}</a>
</li>
</ul>
</div>
2021-10-26 04:48:21 +00:00
<div class="chart-wrapper" :class="{ loading : loading}">
<LineChart :chart-data="chartData" :options="chartOptions" />
</div>
</div>
2021-08-10 11:34:47 +00:00
</template>
<script lang="ts">
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
2022-04-25 23:26:57 +00:00
import "chartjs-adapter-dayjs";
2021-08-10 11:34:47 +00:00
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
2022-04-25 23:26:57 +00:00
import utc from "dayjs/plugin/utc";
2021-08-10 11:34:47 +00:00
import { LineChart } from "vue-chart-3";
import { useToast } from "vue-toastification";
2022-04-13 16:30:32 +00:00
import { DOWN } from "../util.ts";
2021-08-10 11:34:47 +00:00
dayjs.extend(utc);
dayjs.extend(timezone);
const toast = useToast();
2021-08-10 11:34:47 +00:00
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
2021-08-10 11:34:47 +00:00
export default {
components: { LineChart },
props: {
monitorId: {
type: Number,
required: true,
},
},
data() {
return {
2021-10-26 04:48:21 +00:00
loading: false,
// Configurable filtering on top of the returned data
chartPeriodHrs: 0,
2021-10-23 17:26:56 +00:00
chartPeriodOptions: {
0: this.$t("recent"),
3: "3h",
6: "6h",
24: "24h",
168: "1w",
},
// A heartbeatList for 3h, 6h, 24h, 1w
// Uses the $root.heartbeatList when value is null
heartbeatList: null
2021-08-10 11:34:47 +00:00
};
},
computed: {
chartOptions() {
return {
responsive: true,
maintainAspectRatio: false,
onResize: (chart) => {
chart.canvas.parentNode.style.position = "relative";
if (screen.width < 576) {
chart.canvas.parentNode.style.height = "275px";
} else if (screen.width < 768) {
chart.canvas.parentNode.style.height = "320px";
} else if (screen.width < 992) {
chart.canvas.parentNode.style.height = "300px";
} else {
chart.canvas.parentNode.style.height = "250px";
}
},
2021-08-10 11:34:47 +00:00
layout: {
padding: {
left: 10,
right: 30,
top: 30,
bottom: 10,
},
},
2021-08-11 13:00:33 +00:00
elements: {
point: {
// Hide points on chart unless mouse-over
2021-08-11 13:00:33 +00:00
radius: 0,
hitRadius: 100,
2021-08-11 13:00:33 +00:00
},
},
2021-08-10 11:34:47 +00:00
scales: {
x: {
type: "time",
time: {
minUnit: "minute",
round: "second",
tooltipFormat: "YYYY-MM-DD HH:mm:ss",
displayFormats: {
minute: "HH:mm",
hour: "MM-DD HH:mm",
}
2021-08-11 13:00:33 +00:00
},
ticks: {
maxRotation: 0,
autoSkipPadding: 30,
2021-08-11 13:00:33 +00:00
},
grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
2021-08-24 15:34:48 +00:00
offset: false,
2021-08-10 11:34:47 +00:00
},
},
y: {
title: {
display: true,
2021-09-01 19:17:50 +00:00
text: this.$t("respTime"),
2021-08-10 11:34:47 +00:00
},
2021-08-11 13:00:33 +00:00
offset: false,
grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
},
},
y1: {
display: false,
position: "right",
grid: {
drawOnChartArea: false,
},
min: 0,
max: 1,
offset: false,
},
2021-08-10 11:34:47 +00:00
},
bounds: "ticks",
plugins: {
2021-08-11 13:00:33 +00:00
tooltip: {
mode: "nearest",
intersect: false,
padding: 10,
backgroundColor: this.$root.theme === "light" ? "rgba(212,232,222,1.0)" : "rgba(32,42,38,1.0)",
bodyColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
titleColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
2021-08-11 13:00:33 +00:00
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0; // Hide tooltip on Bar Chart
2021-08-11 13:00:33 +00:00
},
callbacks: {
label: (context) => {
return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
},
}
2021-08-11 13:00:33 +00:00
},
2021-08-10 11:34:47 +00:00
legend: {
display: false,
},
},
};
2021-08-10 11:34:47 +00:00
},
chartData() {
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
let downData = []; // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
let heartbeatList = this.heartbeatList ||
(this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
[];
heartbeatList
.filter(
// Filtering as data gets appended
// not the most efficient, but works for now
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(
dayjs().subtract(Math.max(this.chartPeriodHrs, 6), "hours")
)
)
.map((beat) => {
const x = this.$root.datetime(beat.time);
pingData.push({
x,
y: beat.ping,
2021-08-11 13:00:33 +00:00
});
downData.push({
x,
y: beat.status === DOWN ? 1 : 0,
});
});
2021-08-10 11:34:47 +00:00
return {
datasets: [
{
// Line Chart
data: pingData,
2021-08-10 11:34:47 +00:00
fill: "origin",
tension: 0.2,
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B38",
2021-08-11 13:00:33 +00:00
yAxisID: "y",
},
{
// Bar Chart
2021-08-11 13:00:33 +00:00
type: "bar",
data: downData,
2021-08-11 13:00:33 +00:00
borderColor: "#00000000",
backgroundColor: "#DC354568",
yAxisID: "y1",
2021-08-24 15:34:48 +00:00
barThickness: "flex",
barPercentage: 1,
categoryPercentage: 1,
2021-08-10 11:34:47 +00:00
},
],
};
},
},
watch: {
// Update chart data when the selected chart period changes
chartPeriodHrs: function (newPeriod) {
2022-04-25 23:26:57 +00:00
if (newPeriod === "0") {
newPeriod = null;
this.heartbeatList = null;
this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
} else {
2021-10-26 04:48:21 +00:00
this.loading = true;
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) {
toast.error(res.msg);
} else {
this.heartbeatList = res.data;
2021-12-06 04:05:26 +00:00
this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
}
2021-10-26 04:48:21 +00:00
this.loading = false;
});
}
}
},
created() {
// Setup Watcher on the root heartbeatList,
// And mirror latest change to this.heartbeatList
this.$watch(() => this.$root.heartbeatList[this.monitorId],
(heartbeatList) => {
2022-04-25 23:26:57 +00:00
if (this.chartPeriodHrs !== 0) {
const newBeat = heartbeatList.at(-1);
if (newBeat && dayjs.utc(newBeat.time) > dayjs.utc(this.heartbeatList.at(-1)?.time)) {
this.heartbeatList.push(heartbeatList.at(-1));
}
}
},
{ deep: true }
);
2021-12-06 04:05:26 +00:00
// Load chart period from storage if saved
let period = this.$root.storage()[`chart-period-${this.monitorId}`];
if (period != null) {
this.chartPeriodHrs = Math.min(period, 6);
2021-12-06 04:05:26 +00:00
}
}
2021-08-10 11:34:47 +00:00
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.form-select {
width: unset;
display: inline-flex;
}
.period-options {
2021-10-26 04:33:46 +00:00
padding: 0.1em 1em;
margin-bottom: -1.2em;
float: right;
position: relative;
z-index: 10;
2021-10-23 17:26:56 +00:00
.dropdown-menu {
padding: 0;
min-width: 50px;
font-size: 0.9em;
.dark & {
background: $dark-bg;
}
.dropdown-item {
border-radius: 0.3rem;
padding: 2px 16px 4px;
2021-10-23 17:26:56 +00:00
.dark & {
background: $dark-bg;
}
.dark &:hover {
background: $dark-font-color;
color: $dark-font-color2;
2021-10-23 17:26:56 +00:00
}
}
.dark & .dropdown-item.active {
background: $primary;
color: $dark-font-color2;
}
}
.btn-period-toggle {
padding: 2px 15px;
background: transparent;
border: 0;
color: $link-color;
opacity: 0.7;
font-size: 0.9em;
&::after {
vertical-align: 0.155em;
}
.dark & {
color: $dark-font-color;
}
}
}
.chart-wrapper {
2021-10-23 17:26:56 +00:00
margin-bottom: 0.5em;
2021-10-26 04:48:21 +00:00
&.loading {
filter: blur(10px);
}
}
</style>