ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-01-18 18:38:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Feat: Add down-ed bars, improve UI

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

65
src/components/PingChart.vue
View file

@ -24,7 +24,7 @@ export default {
}, },
data() { data() {
return { return {
chartPeriodHrs: 24, chartPeriodHrs: 6,
}; };
}, },
computed: { computed: {
@ -39,11 +39,27 @@ export default {
bottom: 10, bottom: 10,
}, },
}, },
elements: {
point: {
radius: 0,
},
bar: {
barThickness: "flex",
}
},
scales: { scales: {
x: { x: {
type: "time", type: "time",
time: { time: {
stepSize: 30, unit: "minute",
},
ticks: {
maxRotation: 0,
autoSkipPadding: 10,
},
grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
}, },
}, },
y: { y: {
@ -51,10 +67,29 @@ export default {
display: true, display: true,
text: "Response Time (ms)", text: "Response Time (ms)",
}, },
} 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,
},
}, },
bounds: "ticks", bounds: "ticks",
plugins: { plugins: {
tooltip: {
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0;
},
},
legend: { legend: {
display: false, display: false,
}, },
@ -62,9 +97,10 @@ export default {
} }
}, },
chartData() { chartData() {
let data = []; let ping_data = [];
let down_data = [];
if (this.monitorId in this.$root.heartbeatList) { if (this.monitorId in this.$root.heartbeatList) {
data = this.$root.heartbeatList[this.monitorId] ping_data = this.$root.heartbeatList[this.monitorId]
.filter( .filter(
(beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours"))) (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
.map((beat) => { .map((beat) => {
@ -73,15 +109,32 @@ export default {
y: beat.ping, y: beat.ping,
}; };
}); });
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,
};
});
} }
return { return {
datasets: [ datasets: [
{ {
data: data, data: ping_data,
fill: "origin", fill: "origin",
tension: 0.2, tension: 0.2,
borderColor: "#5CDD8B", borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B38", backgroundColor: "#5CDD8B38",
yAxisID: "y",
},
{
type: "bar",
data: down_data,
borderColor: "#00000000",
backgroundColor: "#DC354568",
yAxisID: "y1",
}, },
], ],
}; };