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

113
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,62 +146,60 @@ 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 chartHeight = chartArea.bottom - chartArea.top
if (
gradient === null ||
width !== chartWidth ||
height !== chartHeight
) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth
height = chartHeight
gradient = ctx.createLinearGradient(
0,
chartArea.bottom,
0,
chartArea.top
)
gradient.addColorStop(
0,
this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.success
: this.$vuetify.theme.themes.light.success
)
gradient.addColorStop( const chartWidth = chartArea.right - chartArea.left
0.4, const chartHeight = chartArea.bottom - chartArea.top
this.$vuetify.theme.isDark if (
? this.$vuetify.theme.themes.dark.success gradient === null ||
: this.$vuetify.theme.themes.light.success width !== chartWidth ||
) height !== chartHeight
) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth
height = chartHeight
gradient = ctx.createLinearGradient(
0,
chartArea.bottom,
0,
chartArea.top
)
gradient.addColorStop(
0,
this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.success
: this.$vuetify.theme.themes.light.success
)
gradient.addColorStop( gradient.addColorStop(
0.7, 0.4,
this.$vuetify.theme.isDark this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.warning ? this.$vuetify.theme.themes.dark.success
: this.$vuetify.theme.themes.light.warning : this.$vuetify.theme.themes.light.success
) )
gradient.addColorStop(
0.9,
this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.error
: this.$vuetify.theme.themes.light.error
)
}
return gradient gradient.addColorStop(
0.7,
this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.warning
: this.$vuetify.theme.themes.light.warning
)
gradient.addColorStop(
0.9,
this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.dark.error
: this.$vuetify.theme.themes.light.error
)
} }
return getGradient(ctx, chartArea) return gradient
}, },
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
}, },