From 8510e79c1a6d4dd0b7f77341a0a73b1edf3b0c08 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 22 Jun 2022 15:02:26 +0000
Subject: [PATCH] Chart styling

---
 .../Charts/AccessPointSignalStrengthChart.vue | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/web/src/components/Charts/AccessPointSignalStrengthChart.vue b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
index 1cb5fac..935f436 100644
--- a/web/src/components/Charts/AccessPointSignalStrengthChart.vue
+++ b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
@@ -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
           }
         ]
       }