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

Chart styling

Browse Source
This commit is contained in:
Douglas Barone 2022-06-22 15:02:26 +00:00
parent 70ac29ea11
commit 8510e79c1a
1 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@
<script>
import { Line as LineChart } from 'vue-chartjs/legacy'
import colors from 'vuetify/lib/util/colors'
import { Chart as ChartJS, registerables } from 'chart.js'
import 'chartjs-adapter-date-fns'
@ -66,11 +67,11 @@ export default {
scales: {
y: {
beginAtZero: true,
min: -100,
max: 0,
min: 0,
max: 110,
title: {
display: true,
text: 'dBm'
text: '- dBm '
}
},
x: {
@ -98,7 +99,7 @@ export default {
},
chartData() {
const pointRadius = 0
const borderWidth = 3
const borderWidth = 2
const tension = 0.2
return {
@ -107,13 +108,9 @@ export default {
datasets: [
{
label: 'Média do sinal',
backgroundColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.light.accent
: this.$vuetify.theme.themes.dark.accent,
borderColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.light.accent
: this.$vuetify.theme.themes.dark.accent,
data: this.stats.map(stat => stat.avgSignalStrength),
borderColor: colors.orange.base,
data: this.stats.map(stat => stat.avgSignalStrength * -1),
borderWidth,
pointRadius,
cubicInterpolationMode: 'default',
@ -121,14 +118,10 @@ export default {
},
{
label: 'Pior sinal',
backgroundColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.light.error
: this.$vuetify.theme.themes.dark.error,
borderColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.light.error
: this.$vuetify.theme.themes.dark.error,
data: this.stats.map(stat => stat.minSignalStrength),
borderColor: colors.red.base,
data: this.stats.map(stat => stat.minSignalStrength * -1),
borderWidth,
pointRadius,
cubicInterpolationMode: 'default',
@ -136,18 +129,15 @@ export default {
},
{
label: 'Melhor sinal',
backgroundColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.light.success
: this.$vuetify.theme.themes.dark.success,
borderColor: this.$vuetify.theme.isDark
? this.$vuetify.theme.themes.light.success
: this.$vuetify.theme.themes.dark.success,
data: this.stats.map(stat => stat.maxSignalStrength),
borderColor: colors.green.base,
data: this.stats.map(stat => stat.maxSignalStrength * -1),
borderWidth,
pointRadius,
cubicInterpolationMode: 'default',
tension
tension,
fill: true
}
]
}