mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-09-07 01:41:57 +00:00
Chore: Add comments, improve performance & styling
This commit is contained in:
parent
9442c3fa05
commit
2d20634738
@ -24,6 +24,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// Configurable filtering on top of the returned data
|
||||||
chartPeriodHrs: 6,
|
chartPeriodHrs: 6,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -55,7 +56,9 @@ export default {
|
|||||||
|
|
||||||
elements: {
|
elements: {
|
||||||
point: {
|
point: {
|
||||||
|
// Hide points on chart unless mouse-over
|
||||||
radius: 0,
|
radius: 0,
|
||||||
|
hitRadius: 100,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
@ -106,8 +109,11 @@ export default {
|
|||||||
mode: "nearest",
|
mode: "nearest",
|
||||||
intersect: false,
|
intersect: false,
|
||||||
padding: 10,
|
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)",
|
||||||
filter: function (tooltipItem) {
|
filter: function (tooltipItem) {
|
||||||
return tooltipItem.datasetIndex === 0;
|
return tooltipItem.datasetIndex === 0; // Hide tooltip on Bar Chart
|
||||||
},
|
},
|
||||||
callbacks: {
|
callbacks: {
|
||||||
label: (context) => {
|
label: (context) => {
|
||||||
@ -122,32 +128,29 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
chartData() {
|
chartData() {
|
||||||
let ping_data = [];
|
let pingData = []; // Ping Data for Line Chart, y-axis contains ping time
|
||||||
let down_data = [];
|
let downData = []; // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
|
||||||
if (this.monitorId in this.$root.heartbeatList) {
|
if (this.monitorId in this.$root.heartbeatList) {
|
||||||
ping_data = this.$root.heartbeatList[this.monitorId]
|
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) => {
|
||||||
return {
|
const x = this.$root.datetime(beat.time);
|
||||||
x: dayjs.utc(beat.time).tz(this.$root.timezone).format("YYYY-MM-DD HH:mm:ss"),
|
pingData.push({
|
||||||
|
x,
|
||||||
y: beat.ping,
|
y: beat.ping,
|
||||||
};
|
|
||||||
});
|
});
|
||||||
down_data = this.$root.heartbeatList[this.monitorId]
|
downData.push({
|
||||||
.filter(
|
x,
|
||||||
(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,
|
y: beat.status === 0 ? 1 : 0,
|
||||||
};
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
data: ping_data,
|
// Line Chart
|
||||||
|
data: pingData,
|
||||||
fill: "origin",
|
fill: "origin",
|
||||||
tension: 0.2,
|
tension: 0.2,
|
||||||
borderColor: "#5CDD8B",
|
borderColor: "#5CDD8B",
|
||||||
@ -155,8 +158,9 @@ export default {
|
|||||||
yAxisID: "y",
|
yAxisID: "y",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
// Bar Chart
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: down_data,
|
data: downData,
|
||||||
borderColor: "#00000000",
|
borderColor: "#00000000",
|
||||||
backgroundColor: "#DC354568",
|
backgroundColor: "#DC354568",
|
||||||
yAxisID: "y1",
|
yAxisID: "y1",
|
||||||
|
Loading…
Reference in New Issue
Block a user