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

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

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

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

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