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

Tweak charts

Browse Source
This commit is contained in:
Douglas Barone 2022-06-20 19:25:38 +00:00
parent 1d678e216e
commit 209235adec
3 changed files with 57 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div> <v-card>
<LineChart <LineChart
:chart-options="chartOptions" :chart-options="chartOptions"
:chart-data="chartData" :chart-data="chartData"
@ -11,7 +11,7 @@
:width="width" :width="width"
:height="height" :height="height"
/> />
</div> </v-card>
</template> </template>
<script> <script>
@ -113,34 +113,31 @@ export default {
datasets: [ datasets: [
{ {
label: 'Uso de banda', label: 'Uso de banda',
data: this.stats.map( data: this.stats.map(
stat => (stat.avgUsage * stat.clients) / 1024 / 1024 stat => (stat.avgUsage * stat.clients) / 1024 / 1024
), ),
borderColor: this.$vuetify.theme.isDark borderColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.error ? this.$vuetify.theme.themes.dark.info
: this.$vuetify.theme.themes.light.error, : this.$vuetify.theme.themes.light.info,
backgroundColor: this.$vuetify.theme.isDark backgroundColor: undefined,
? this.$vuetify.theme.themes.dark.error
: this.$vuetify.theme.themes.light.error,
borderWidth, borderWidth,
pointRadius, pointRadius,
cubicInterpolationMode: 'default', cubicInterpolationMode: 'default',
tension, tension,
yAxisID: 'y1' yAxisID: 'y1',
fill: true
}, },
{ {
label: 'Clientes conectados', label: 'Clientes conectados',
data: this.stats.map(stat => stat.clients), data: this.stats.map(stat => stat.clients),
borderColor: this.$vuetify.theme.isDark borderColor: context => {
? this.$vuetify.theme.themes.dark.success
: this.$vuetify.theme.themes.light.success,
backgroundColor: context => {
const chart = context.chart const chart = context.chart
const { ctx, chartArea } = chart const { ctx, chartArea } = chart
@ -149,7 +146,7 @@ export default {
return null return null
} }
let width, height, gradient let width, height, gradient
const getGradient = (ctx, chartArea) => {
const chartWidth = chartArea.right - chartArea.left const chartWidth = chartArea.right - chartArea.left
const chartHeight = chartArea.bottom - chartArea.top const chartHeight = chartArea.bottom - chartArea.top
if ( if (
@ -196,15 +193,13 @@ export default {
} }
return gradient return gradient
}
return getGradient(ctx, chartArea)
}, },
borderWidth: 0, borderWidth: 3,
pointRadius, pointRadius,
cubicInterpolationMode: 'default', cubicInterpolationMode: 'default',
tension, tension,
fill: true fill: true
} }
] ]

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

@ -1,5 +1,5 @@
<template> <template>
<div> <v-card>
<LineChart <LineChart
:chart-options="chartOptions" :chart-options="chartOptions"
:chart-data="chartData" :chart-data="chartData"
@ -11,7 +11,7 @@
:width="width" :width="width"
:height="height" :height="height"
/> />
</div> </v-card>
</template> </template>
<script> <script>

2
web/src/views/AccessPoints/index.vue
View File

@ -263,7 +263,7 @@ export default {
return Math.floor(uptime / 3600) return Math.floor(uptime / 3600)
}, },
load(connectedClients) { load(connectedClients) {
const MAX_LOAD = 60 const MAX_LOAD = 80
const load = Math.floor((connectedClients / MAX_LOAD) * 100) const load = Math.floor((connectedClients / MAX_LOAD) * 100)
return load < 100 ? load : 100 return load < 100 ? load : 100
}, },