mudhorn/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-10 07:34:07 -08:00
Code Issues Actions 5 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> </li>
</ul> </ul>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper" :class="{ loading : loading}">
<LineChart :chart-data="chartData" :options="chartOptions" /> <LineChart :chart-data="chartData" :options="chartOptions" />
</div> </div>
</div> </div>
@ -42,6 +42,9 @@ export default {
}, },
data() { data() {
return { return {
loading: false,
// Configurable filtering on top of the returned data // Configurable filtering on top of the returned data
chartPeriodHrs: 0, chartPeriodHrs: 0,
@ -218,12 +221,15 @@ export default {
newPeriod = null; newPeriod = null;
this.heartbeatList = null; this.heartbeatList = null;
} else { } else {
this.loading = true;
this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => { this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
if (!res.ok) { if (!res.ok) {
toast.error(res.msg); toast.error(res.msg);
} else { } else {
this.heartbeatList = res.data; this.heartbeatList = res.data;
} }
this.loading = false;
}); });
} }
} }
@ -309,5 +315,9 @@ export default {
.chart-wrapper { .chart-wrapper {
margin-bottom: 0.5em; margin-bottom: 0.5em;
&.loading {
filter: blur(10px);
}
} }
</style> </style>