Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-20 21:24:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

add simple loading chart effect

Browse Source
This commit is contained in:
Louis Lam 2021-10-26 12:48:21 +08:00
parent f8055ed03d
commit 78424b4f2d
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/PingChart.vue
View File

@ -10,7 +10,7 @@
</li>
</ul>
</div>
<div class="chart-wrapper">
<div class="chart-wrapper" :class="{ loading : loading}">
<LineChart :chart-data="chartData" :options="chartOptions" />
</div>
</div>
@ -42,6 +42,9 @@ export default {
},
data() {
return {
loading: false,
// Configurable filtering on top of the returned data
chartPeriodHrs: 0,
@ -218,12 +221,15 @@ export default {
newPeriod = null;
this.heartbeatList = null;
} else {
this.loading = true;
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) {
toast.error(res.msg);
} else {
this.heartbeatList = res.data;
}
this.loading = false;
});
}
}
@ -309,5 +315,9 @@ export default {
.chart-wrapper {
margin-bottom: 0.5em;
&.loading {
filter: blur(10px);
}
}
</style>