1839811/ifms-pti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chart improvements

Browse Source
This commit is contained in:
Douglas Barone 2022-06-21 18:22:38 +00:00
parent 8d0c0da141
commit eb3725f78a
3 changed files with 94 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
web/src/components/Charts/AccessPointClientsChart.vue
View File

@ -59,54 +59,54 @@ export default {
default: () => []
}
},
data: () => ({
chartOptions: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
min: 0,
suggestedMax: 80,
data: () => ({}),
computed: {
chartOptions() {
return {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
min: 0,
suggestedMax: 80,
title: {
display: true,
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'
title: {
display: true,
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',
title: {
display: false,
text: 'Data'
displayFormats: {
minute: 'H:mm'
}
},
title: {
display: false,
text: 'Data'
}
}
}
}
}
}),
computed: {
},
chartData() {
const pointRadius = 0

57
web/src/components/Charts/AccessPointSignalStrengthChart.vue
View File

@ -57,40 +57,41 @@ export default {
default: () => []
}
},
data: () => ({
chartOptions: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
min: -100,
max: 0,
title: {
display: true,
text: 'dBm'
}
},
x: {
type: 'time',
time: {
unit: 'minute',
stepSize: 15,
displayFormats: {
minute: 'H:mm'
data: () => ({}),
computed: {
chartOptions() {
return {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
min: -100,
max: 0,
title: {
display: true,
text: 'dBm'
}
},
x: {
type: 'time',
time: {
unit: 'minute',
// stepSize: 15,
title: {
display: false,
text: 'Data'
displayFormats: {
minute: 'H:mm'
}
},
title: {
display: false,
text: 'Data'
}
}
}
}
}
}),
computed: {
},
chartData() {
const pointRadius = 0
const borderWidth = 3

51
web/src/views/AccessPoints/clients.vue
View File

@ -6,7 +6,7 @@
/>
</v-card>
<v-card v-else :loading="!accessPoint">
<v-card v-else :elevation="0" :loading="!accessPoint">
<v-card-title class="font-weight-regular">
<v-btn class="ml-1" left icon @click="() => $router.back()">
<v-icon>mdi-arrow-left</v-icon>
@ -22,6 +22,7 @@
<br />
</div>
<v-spacer />
<v-text-field
v-model="filter"
label="Filtro"
@ -35,32 +36,28 @@
</v-card-title>
<v-divider />
<v-card-text>
<v-card>
<v-card-text>
<v-row>
<v-col :md="6">
<AccessPointClientsChart
:chart-id="`ap-clients-chart-${accessPoint.id}`"
:stats="accessPoint.stats"
/>
</v-col>
<v-col :md="6">
<AccessPointSignalStrengthChart
:chart-id="`ap-signal-chart-${accessPoint.id}`"
:stats="accessPoint.stats"
/>
</v-col>
</v-row>
</v-card-text>
</v-card>
<v-divider />
<AccessPointClientsDataTable
:wifi-devices="accessPoint.wifiDevices"
:filter="filter"
paginate
/>
</v-card-text>
<v-row>
<v-col :md="6">
<AccessPointClientsChart
:chart-id="`ap-clients-chart-${accessPoint.id}`"
:stats="accessPoint.stats"
/>
</v-col>
<v-col :md="6">
<AccessPointSignalStrengthChart
:chart-id="`ap-signal-chart-${accessPoint.id}`"
:stats="accessPoint.stats"
/>
</v-col>
</v-row>
<v-divider />
<AccessPointClientsDataTable
:wifi-devices="accessPoint.wifiDevices"
:filter="filter"
paginate
/>
<v-divider />
</v-card>
</div>