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