mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-17 03:34:51 -05:00
Merge pull request #253 from chakflying/chart-fix
Fix: More Chart improvements
This commit is contained in:
commit
a7cd70f7de
@ -24,6 +24,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// Configurable filtering on top of the returned data
|
||||
chartPeriodHrs: 6,
|
||||
};
|
||||
},
|
||||
@ -55,11 +56,10 @@ export default {
|
||||
|
||||
elements: {
|
||||
point: {
|
||||
// Hide points on chart unless mouse-over
|
||||
radius: 0,
|
||||
hitRadius: 100,
|
||||
},
|
||||
bar: {
|
||||
barThickness: "flex",
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
@ -77,9 +77,9 @@ export default {
|
||||
maxRotation: 0,
|
||||
autoSkipPadding: 30,
|
||||
},
|
||||
bounds: "ticks",
|
||||
grid: {
|
||||
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
|
||||
offset: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
@ -109,8 +109,11 @@ export default {
|
||||
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)",
|
||||
filter: function (tooltipItem) {
|
||||
return tooltipItem.datasetIndex === 0;
|
||||
return tooltipItem.datasetIndex === 0; // Hide tooltip on Bar Chart
|
||||
},
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
@ -125,32 +128,29 @@ export default {
|
||||
}
|
||||
},
|
||||
chartData() {
|
||||
let ping_data = [];
|
||||
let down_data = [];
|
||||
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
|
||||
if (this.monitorId in this.$root.heartbeatList) {
|
||||
ping_data = this.$root.heartbeatList[this.monitorId]
|
||||
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"),
|
||||
const x = this.$root.datetime(beat.time);
|
||||
pingData.push({
|
||||
x,
|
||||
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"),
|
||||
});
|
||||
downData.push({
|
||||
x,
|
||||
y: beat.status === 0 ? 1 : 0,
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
data: ping_data,
|
||||
// Line Chart
|
||||
data: pingData,
|
||||
fill: "origin",
|
||||
tension: 0.2,
|
||||
borderColor: "#5CDD8B",
|
||||
@ -158,11 +158,15 @@ export default {
|
||||
yAxisID: "y",
|
||||
},
|
||||
{
|
||||
// Bar Chart
|
||||
type: "bar",
|
||||
data: down_data,
|
||||
data: downData,
|
||||
borderColor: "#00000000",
|
||||
backgroundColor: "#DC354568",
|
||||
yAxisID: "y1",
|
||||
barThickness: "flex",
|
||||
barPercentage: 1,
|
||||
categoryPercentage: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user