Chart styling
This commit is contained in:
parent
70ac29ea11
commit
8510e79c1a
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user