ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 01:04:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #253 from chakflying/chart-fix

Browse source 
Fix: More Chart improvements
This commit is contained in:
Louis Lam 2021-08-25 17:35:25 +08:00 committed by GitHub
commit a7cd70f7de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/PingChart.vue
View file

@ -24,6 +24,7 @@ export default {
}, },
data() { data() {
return { return {
// Configurable filtering on top of the returned data
chartPeriodHrs: 6, chartPeriodHrs: 6,
}; };
}, },
@ -55,11 +56,10 @@ export default {
elements: { elements: {
point: { point: {
// Hide points on chart unless mouse-over
radius: 0, radius: 0,
hitRadius: 100,
}, },
bar: {
barThickness: "flex",
}
}, },
scales: { scales: {
x: { x: {
@ -77,9 +77,9 @@ export default {
maxRotation: 0, maxRotation: 0,
autoSkipPadding: 30, autoSkipPadding: 30,
}, },
bounds: "ticks",
grid: { grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)", color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
offset: false,
}, },
}, },
y: { y: {
@ -109,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) => {
@ -125,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,
}; });
}); downData.push({
down_data = this.$root.heartbeatList[this.monitorId] x,
.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, 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",
@ -158,11 +158,15 @@ 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",
barThickness: "flex",
barPercentage: 1,
categoryPercentage: 1,
}, },
], ],
}; };