webinno/monitolite
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Adding date selector

Browse source
This commit is contained in:
Axel 2021-12-23 16:42:48 +01:00
parent 4067a8448b
commit 3981724c86
2 changed files with 59 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/js/app.js
View file

File diff suppressed because one or more lines are too long

57
resources/views/taskdetails.vue
View file

@ -8,6 +8,15 @@
<!-- <p class="context-menu"><img src="/img/menu.svg" width="40" /></p> --> <!-- <p class="context-menu"><img src="/img/menu.svg" width="40" /></p> -->
</h1> </h1>
Show:
<select
v-model="chart.days"
@change="refreshGraph"
>
<option value="7">7 days</option>
<option value="15">15 days</option>
<option value="30">30 days</option>
</select>
<h3>Uptime: past {{ chart.days }} days</h3> <h3>Uptime: past {{ chart.days }} days</h3>
<div id="chart"> <div id="chart">
<apexchart v-if="chart.render" type="bar" height="350" :options="chartOptions" :series="series"></apexchart> <apexchart v-if="chart.render" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
@ -71,12 +80,6 @@
text: 'Loading...' text: 'Loading...'
}, },
chartOptions: { chartOptions: {
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
responsive: [{ responsive: [{
breakpoint: 480, breakpoint: 480,
options: { options: {
@ -113,18 +116,9 @@
default: default:
return 'unknown'; return 'unknown';
} }
}
}, },
mounted: function() { refreshGraph: function() {
let task_id = this.$route.params.id ?? null this.$http.post('/api/getTaskGraph/'+this.task.id, {
if (task_id != null) {
this.$http.post('/api/getTask/'+task_id, {
days: this.chart.days
})
.then(response => this.task = response.data)
.then(() => {
this.$http.post('/api/getTaskGraph/'+task_id, {
days: this.chart.days days: this.chart.days
}) })
.then(response => { .then(response => {
@ -139,7 +133,22 @@
new_data_b.push(response.data[date]['down']) new_data_b.push(response.data[date]['down'])
} }
this.chartOptions.xaxis.categories = xaxis; this.chartOptions = {
xaxis: {
categories: xaxis,
labels: {
show: true,
rotate: -45,
rotateAlways: true,
}
},
chart: {
type: 'bar',
height: 300,
stacked: true,
stackType: '100%'
},
}
this.series = [{ this.series = [{
name: 'UP', name: 'UP',
data: new_data_a, data: new_data_a,
@ -153,6 +162,18 @@
this.chart.render = true this.chart.render = true
}) })
}
},
mounted: function() {
let task_id = this.$route.params.id ?? null
if (task_id != null) {
this.$http.post('/api/getTask/'+task_id, {
days: this.chart.days
})
.then(response => this.task = response.data)
.then(() => {
this.refreshGraph()
}) })
} }
} }