2021-08-10 11:34:47 +00:00
|
|
|
<template>
|
2021-08-18 04:21:16 +00:00
|
|
|
<LineChart :chart-data="chartData" :options="chartOptions" />
|
2021-08-10 11:34:47 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-08-11 16:31:21 +00:00
|
|
|
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
|
2021-08-10 11:34:47 +00:00
|
|
|
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);
|
|
|
|
|
2021-08-11 16:31:21 +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-08-11 13:00:33 +00:00
|
|
|
chartPeriodHrs: 6,
|
2021-08-10 11:34:47 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
chartOptions() {
|
|
|
|
return {
|
|
|
|
responsive: true,
|
2021-08-18 04:21:16 +00:00
|
|
|
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: {
|
|
|
|
radius: 0,
|
|
|
|
},
|
|
|
|
},
|
2021-08-10 11:34:47 +00:00
|
|
|
scales: {
|
|
|
|
x: {
|
|
|
|
type: "time",
|
|
|
|
time: {
|
2021-08-16 15:58:02 +00:00
|
|
|
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,
|
2021-08-16 15:58:02 +00:00
|
|
|
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-08-16 15:58:02 +00:00
|
|
|
text: "Resp. Time (ms)",
|
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: {
|
2021-08-11 16:31:21 +00:00
|
|
|
mode: "nearest",
|
|
|
|
intersect: false,
|
|
|
|
padding: 10,
|
2021-08-11 13:00:33 +00:00
|
|
|
filter: function (tooltipItem) {
|
|
|
|
return tooltipItem.datasetIndex === 0;
|
|
|
|
},
|
2021-08-11 16:31:21 +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,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
chartData() {
|
2021-08-11 13:00:33 +00:00
|
|
|
let ping_data = [];
|
|
|
|
let down_data = [];
|
2021-08-10 11:34:47 +00:00
|
|
|
if (this.monitorId in this.$root.heartbeatList) {
|
2021-08-11 13:00:33 +00:00
|
|
|
ping_data = this.$root.heartbeatList[this.monitorId]
|
2021-08-10 11:34:47 +00:00
|
|
|
.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,
|
|
|
|
};
|
|
|
|
});
|
2021-08-11 13:00:33 +00:00
|
|
|
down_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.status === 0 ? 1 : 0,
|
|
|
|
};
|
|
|
|
});
|
2021-08-10 11:34:47 +00:00
|
|
|
}
|
|
|
|
return {
|
|
|
|
datasets: [
|
|
|
|
{
|
2021-08-11 13:00:33 +00:00
|
|
|
data: ping_data,
|
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",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: "bar",
|
|
|
|
data: down_data,
|
|
|
|
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
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|