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