Chart improvements
This commit is contained in:
parent
8d0c0da141
commit
eb3725f78a
|
@ -59,54 +59,54 @@ export default {
|
||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({}),
|
||||||
chartOptions: {
|
computed: {
|
||||||
responsive: true,
|
chartOptions() {
|
||||||
maintainAspectRatio: false,
|
return {
|
||||||
scales: {
|
responsive: true,
|
||||||
y: {
|
maintainAspectRatio: false,
|
||||||
beginAtZero: true,
|
scales: {
|
||||||
min: 0,
|
y: {
|
||||||
suggestedMax: 80,
|
beginAtZero: true,
|
||||||
|
min: 0,
|
||||||
|
suggestedMax: 80,
|
||||||
|
|
||||||
title: {
|
title: {
|
||||||
display: true,
|
display: true,
|
||||||
text: 'Clientes'
|
text: 'Clientes'
|
||||||
}
|
|
||||||
},
|
|
||||||
y1: {
|
|
||||||
beginAtZero: true,
|
|
||||||
position: 'right',
|
|
||||||
title: {
|
|
||||||
display: true
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, values) {
|
|
||||||
const bytes = destructedBytes(value)
|
|
||||||
return `${bytes.amount} ${bytes.unit}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
unit: 'minute',
|
|
||||||
stepSize: 20,
|
|
||||||
|
|
||||||
displayFormats: {
|
|
||||||
minute: 'H:mm'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
y1: {
|
||||||
|
beginAtZero: true,
|
||||||
|
position: 'right',
|
||||||
|
title: {
|
||||||
|
display: true
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: function (value, index, values) {
|
||||||
|
const bytes = destructedBytes(value)
|
||||||
|
return `${bytes.amount} ${bytes.unit}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
unit: 'minute',
|
||||||
|
|
||||||
title: {
|
displayFormats: {
|
||||||
display: false,
|
minute: 'H:mm'
|
||||||
text: 'Data'
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
display: false,
|
||||||
|
text: 'Data'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}),
|
|
||||||
computed: {
|
|
||||||
chartData() {
|
chartData() {
|
||||||
const pointRadius = 0
|
const pointRadius = 0
|
||||||
|
|
||||||
|
|
|
@ -57,40 +57,41 @@ export default {
|
||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({}),
|
||||||
chartOptions: {
|
computed: {
|
||||||
responsive: true,
|
chartOptions() {
|
||||||
maintainAspectRatio: false,
|
return {
|
||||||
scales: {
|
responsive: true,
|
||||||
y: {
|
maintainAspectRatio: false,
|
||||||
beginAtZero: true,
|
scales: {
|
||||||
min: -100,
|
y: {
|
||||||
max: 0,
|
beginAtZero: true,
|
||||||
title: {
|
min: -100,
|
||||||
display: true,
|
max: 0,
|
||||||
text: 'dBm'
|
title: {
|
||||||
}
|
display: true,
|
||||||
},
|
text: 'dBm'
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
unit: 'minute',
|
|
||||||
stepSize: 15,
|
|
||||||
|
|
||||||
displayFormats: {
|
|
||||||
minute: 'H:mm'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
x: {
|
||||||
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
unit: 'minute',
|
||||||
|
// stepSize: 15,
|
||||||
|
|
||||||
title: {
|
displayFormats: {
|
||||||
display: false,
|
minute: 'H:mm'
|
||||||
text: 'Data'
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
display: false,
|
||||||
|
text: 'Data'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}),
|
|
||||||
computed: {
|
|
||||||
chartData() {
|
chartData() {
|
||||||
const pointRadius = 0
|
const pointRadius = 0
|
||||||
const borderWidth = 3
|
const borderWidth = 3
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
/>
|
/>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
||||||
<v-card v-else :loading="!accessPoint">
|
<v-card v-else :elevation="0" :loading="!accessPoint">
|
||||||
<v-card-title class="font-weight-regular">
|
<v-card-title class="font-weight-regular">
|
||||||
<v-btn class="ml-1" left icon @click="() => $router.back()">
|
<v-btn class="ml-1" left icon @click="() => $router.back()">
|
||||||
<v-icon>mdi-arrow-left</v-icon>
|
<v-icon>mdi-arrow-left</v-icon>
|
||||||
|
@ -22,6 +22,7 @@
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="filter"
|
v-model="filter"
|
||||||
label="Filtro"
|
label="Filtro"
|
||||||
|
@ -35,32 +36,28 @@
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
|
|
||||||
<v-card-text>
|
<v-row>
|
||||||
<v-card>
|
<v-col :md="6">
|
||||||
<v-card-text>
|
<AccessPointClientsChart
|
||||||
<v-row>
|
:chart-id="`ap-clients-chart-${accessPoint.id}`"
|
||||||
<v-col :md="6">
|
:stats="accessPoint.stats"
|
||||||
<AccessPointClientsChart
|
/>
|
||||||
:chart-id="`ap-clients-chart-${accessPoint.id}`"
|
</v-col>
|
||||||
:stats="accessPoint.stats"
|
<v-col :md="6">
|
||||||
/>
|
<AccessPointSignalStrengthChart
|
||||||
</v-col>
|
:chart-id="`ap-signal-chart-${accessPoint.id}`"
|
||||||
<v-col :md="6">
|
:stats="accessPoint.stats"
|
||||||
<AccessPointSignalStrengthChart
|
/>
|
||||||
:chart-id="`ap-signal-chart-${accessPoint.id}`"
|
</v-col>
|
||||||
:stats="accessPoint.stats"
|
</v-row>
|
||||||
/>
|
|
||||||
</v-col>
|
<v-divider />
|
||||||
</v-row>
|
<AccessPointClientsDataTable
|
||||||
</v-card-text>
|
:wifi-devices="accessPoint.wifiDevices"
|
||||||
</v-card>
|
:filter="filter"
|
||||||
<v-divider />
|
paginate
|
||||||
<AccessPointClientsDataTable
|
/>
|
||||||
:wifi-devices="accessPoint.wifiDevices"
|
|
||||||
:filter="filter"
|
|
||||||
paginate
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
|
||||||
<v-divider />
|
<v-divider />
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user