From 209235adec6d9e301ef2779524634174c3362081 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 20 Jun 2022 19:25:38 +0000
Subject: [PATCH] Tweak charts

---
 .../Charts/AccessPointClientsChart.vue        | 113 +++++++++---------
 .../Charts/AccessPointSignalStrengthChart.vue |   4 +-
 web/src/views/AccessPoints/index.vue          |   2 +-
 3 files changed, 57 insertions(+), 62 deletions(-)

diff --git a/web/src/components/Charts/AccessPointClientsChart.vue b/web/src/components/Charts/AccessPointClientsChart.vue
index 3a4edf3..c7cf4d5 100644
--- a/web/src/components/Charts/AccessPointClientsChart.vue
+++ b/web/src/components/Charts/AccessPointClientsChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-card>
     <LineChart
       :chart-options="chartOptions"
       :chart-data="chartData"
@@ -11,7 +11,7 @@
       :width="width"
       :height="height"
     />
-  </div>
+  </v-card>
 </template>
 
 <script>
@@ -113,34 +113,31 @@ export default {
         datasets: [
           {
             label: 'Uso de banda',
+
             data: this.stats.map(
               stat => (stat.avgUsage * stat.clients) / 1024 / 1024
             ),
 
             borderColor: this.$vuetify.theme.isDark
-              ? this.$vuetify.theme.themes.dark.error
-              : this.$vuetify.theme.themes.light.error,
+              ? this.$vuetify.theme.themes.dark.info
+              : this.$vuetify.theme.themes.light.info,
 
-            backgroundColor: this.$vuetify.theme.isDark
-              ? this.$vuetify.theme.themes.dark.error
-              : this.$vuetify.theme.themes.light.error,
+            backgroundColor: undefined,
             borderWidth,
             pointRadius,
 
             cubicInterpolationMode: 'default',
             tension,
-            yAxisID: 'y1'
+            yAxisID: 'y1',
+            fill: true
           },
 
           {
             label: 'Clientes conectados',
+
             data: this.stats.map(stat => stat.clients),
 
-            borderColor: this.$vuetify.theme.isDark
-              ? this.$vuetify.theme.themes.dark.success
-              : this.$vuetify.theme.themes.light.success,
-
-            backgroundColor: context => {
+            borderColor: context => {
               const chart = context.chart
               const { ctx, chartArea } = chart
 
@@ -149,62 +146,60 @@ export default {
                 return null
               }
               let width, height, gradient
-              const getGradient = (ctx, chartArea) => {
-                const chartWidth = chartArea.right - chartArea.left
-                const chartHeight = chartArea.bottom - chartArea.top
-                if (
-                  gradient === null ||
-                  width !== chartWidth ||
-                  height !== chartHeight
-                ) {
-                  // Create the gradient because this is either the first render
-                  // or the size of the chart has changed
-                  width = chartWidth
-                  height = chartHeight
-                  gradient = ctx.createLinearGradient(
-                    0,
-                    chartArea.bottom,
-                    0,
-                    chartArea.top
-                  )
-                  gradient.addColorStop(
-                    0,
-                    this.$vuetify.theme.isDark
-                      ? this.$vuetify.theme.themes.dark.success
-                      : this.$vuetify.theme.themes.light.success
-                  )
 
-                  gradient.addColorStop(
-                    0.4,
-                    this.$vuetify.theme.isDark
-                      ? this.$vuetify.theme.themes.dark.success
-                      : this.$vuetify.theme.themes.light.success
-                  )
+              const chartWidth = chartArea.right - chartArea.left
+              const chartHeight = chartArea.bottom - chartArea.top
+              if (
+                gradient === null ||
+                width !== chartWidth ||
+                height !== chartHeight
+              ) {
+                // Create the gradient because this is either the first render
+                // or the size of the chart has changed
+                width = chartWidth
+                height = chartHeight
+                gradient = ctx.createLinearGradient(
+                  0,
+                  chartArea.bottom,
+                  0,
+                  chartArea.top
+                )
+                gradient.addColorStop(
+                  0,
+                  this.$vuetify.theme.isDark
+                    ? this.$vuetify.theme.themes.dark.success
+                    : this.$vuetify.theme.themes.light.success
+                )
 
-                  gradient.addColorStop(
-                    0.7,
-                    this.$vuetify.theme.isDark
-                      ? this.$vuetify.theme.themes.dark.warning
-                      : this.$vuetify.theme.themes.light.warning
-                  )
-                  gradient.addColorStop(
-                    0.9,
-                    this.$vuetify.theme.isDark
-                      ? this.$vuetify.theme.themes.dark.error
-                      : this.$vuetify.theme.themes.light.error
-                  )
-                }
+                gradient.addColorStop(
+                  0.4,
+                  this.$vuetify.theme.isDark
+                    ? this.$vuetify.theme.themes.dark.success
+                    : this.$vuetify.theme.themes.light.success
+                )
 
-                return gradient
+                gradient.addColorStop(
+                  0.7,
+                  this.$vuetify.theme.isDark
+                    ? this.$vuetify.theme.themes.dark.warning
+                    : this.$vuetify.theme.themes.light.warning
+                )
+                gradient.addColorStop(
+                  0.9,
+                  this.$vuetify.theme.isDark
+                    ? this.$vuetify.theme.themes.dark.error
+                    : this.$vuetify.theme.themes.light.error
+                )
               }
 
-              return getGradient(ctx, chartArea)
+              return gradient
             },
-            borderWidth: 0,
+            borderWidth: 3,
             pointRadius,
 
             cubicInterpolationMode: 'default',
             tension,
+
             fill: true
           }
         ]
diff --git a/web/src/components/Charts/AccessPointSignalStrengthChart.vue b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
index 58d7d62..6e298eb 100644
--- a/web/src/components/Charts/AccessPointSignalStrengthChart.vue
+++ b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-card>
     <LineChart
       :chart-options="chartOptions"
       :chart-data="chartData"
@@ -11,7 +11,7 @@
       :width="width"
       :height="height"
     />
-  </div>
+  </v-card>
 </template>
 
 <script>
diff --git a/web/src/views/AccessPoints/index.vue b/web/src/views/AccessPoints/index.vue
index 515106e..04919f0 100644
--- a/web/src/views/AccessPoints/index.vue
+++ b/web/src/views/AccessPoints/index.vue
@@ -263,7 +263,7 @@ export default {
       return Math.floor(uptime / 3600)
     },
     load(connectedClients) {
-      const MAX_LOAD = 60
+      const MAX_LOAD = 80
       const load = Math.floor((connectedClients / MAX_LOAD) * 100)
       return load < 100 ? load : 100
     },