From 4d2493470b177fa0b9bd27ad7e2f858de9e4578e Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 21 Jun 2022 12:58:26 +0000
Subject: [PATCH] Charts adjustments

---
 .../Charts/AccessPointClientsChart.vue        | 142 +++++++-----------
 .../Charts/AccessPointSignalStrengthChart.vue |  24 ++-
 web/src/views/AccessPoints/clients.vue        |  34 +++--
 3 files changed, 82 insertions(+), 118 deletions(-)

diff --git a/web/src/components/Charts/AccessPointClientsChart.vue b/web/src/components/Charts/AccessPointClientsChart.vue
index c7cf4d5..f6a5204 100644
--- a/web/src/components/Charts/AccessPointClientsChart.vue
+++ b/web/src/components/Charts/AccessPointClientsChart.vue
@@ -1,24 +1,24 @@
 <template>
-  <v-card>
-    <LineChart
-      :chart-options="chartOptions"
-      :chart-data="chartData"
-      :chart-id="chartId"
-      :dataset-id-key="datasetIdKey"
-      :plugins="plugins"
-      :css-classes="cssClasses"
-      :styles="styles"
-      :width="width"
-      :height="height"
-    />
-  </v-card>
+  <LineChart
+    :chart-options="chartOptions"
+    :chart-data="chartData"
+    :chart-id="chartId"
+    :dataset-id-key="datasetIdKey"
+    :plugins="plugins"
+    :css-classes="cssClasses"
+    :styles="styles"
+    :width="width"
+    :height="height"
+  />
 </template>
 
 <script>
 import { Line as LineChart } from 'vue-chartjs/legacy'
 import 'chartjs-adapter-date-fns'
+import colors from 'vuetify/lib/util/colors'
 
 import { Chart as ChartJS, registerables } from 'chart.js'
+import { destructedBytes } from '../../plugins/format-bytes'
 
 ChartJS.register(...registerables)
 
@@ -67,10 +67,11 @@ export default {
         y: {
           beginAtZero: true,
           min: 0,
-          max: 100,
+          suggestedMax: 100,
+
           title: {
             display: true,
-            text: 'Quantidade de clientes'
+            text: 'Clientes'
           }
         },
         y1: {
@@ -79,8 +80,13 @@ export default {
 
           position: 'right',
           title: {
-            display: true,
-            text: 'MB'
+            display: true
+          },
+          ticks: {
+            callback: function (value, index, values) {
+              const bytes = destructedBytes(value)
+              return `${bytes.amount} ${bytes.unit}`
+            }
           }
         },
         x: {
@@ -105,92 +111,34 @@ export default {
   computed: {
     chartData() {
       const pointRadius = 0
-      const borderWidth = 3
+
       const tension = 0.2
 
       return {
         labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
         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.info
-              : this.$vuetify.theme.themes.light.info,
-
-            backgroundColor: undefined,
-            borderWidth,
-            pointRadius,
-
-            cubicInterpolationMode: 'default',
-            tension,
-            yAxisID: 'y1',
-            fill: true
-          },
-
           {
             label: 'Clientes conectados',
 
             data: this.stats.map(stat => stat.clients),
 
             borderColor: context => {
-              const chart = context.chart
-              const { ctx, chartArea } = chart
+              const { ctx, chartArea } = context.chart
 
-              if (!chartArea) {
-                // This case happens on initial chart load
-                return null
-              }
-              let width, height, gradient
+              if (!chartArea) return null // This case happens on initial chart load
 
-              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
-                )
+              const gradient = ctx.createLinearGradient(
+                0,
+                chartArea.bottom,
+                0,
+                chartArea.top
+              )
 
-                gradient.addColorStop(
-                  0.4,
-                  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, colors.cyan.base)
+              gradient.addColorStop(0.05, colors.green.base)
+              gradient.addColorStop(0.3, colors.green.base)
+              gradient.addColorStop(0.7, colors.orange.base)
+              gradient.addColorStop(0.9, colors.red.base)
 
               return gradient
             },
@@ -200,6 +148,22 @@ export default {
             cubicInterpolationMode: 'default',
             tension,
 
+            fill: true
+          },
+          {
+            label: 'Uso de banda',
+
+            data: this.stats.map(stat => stat.avgUsage * stat.clients),
+
+            borderColor: colors.blue.base,
+
+            backgroundColor: undefined,
+            borderWidth: 1,
+            pointRadius,
+
+            cubicInterpolationMode: 'default',
+            tension,
+            yAxisID: 'y1',
             fill: true
           }
         ]
diff --git a/web/src/components/Charts/AccessPointSignalStrengthChart.vue b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
index 6e298eb..c9b65be 100644
--- a/web/src/components/Charts/AccessPointSignalStrengthChart.vue
+++ b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
@@ -1,17 +1,15 @@
 <template>
-  <v-card>
-    <LineChart
-      :chart-options="chartOptions"
-      :chart-data="chartData"
-      :chart-id="chartId"
-      :dataset-id-key="datasetIdKey"
-      :plugins="plugins"
-      :css-classes="cssClasses"
-      :styles="styles"
-      :width="width"
-      :height="height"
-    />
-  </v-card>
+  <LineChart
+    :chart-options="chartOptions"
+    :chart-data="chartData"
+    :chart-id="chartId"
+    :dataset-id-key="datasetIdKey"
+    :plugins="plugins"
+    :css-classes="cssClasses"
+    :styles="styles"
+    :width="width"
+    :height="height"
+  />
 </template>
 
 <script>
diff --git a/web/src/views/AccessPoints/clients.vue b/web/src/views/AccessPoints/clients.vue
index 16ab5b9..b49dfa3 100644
--- a/web/src/views/AccessPoints/clients.vue
+++ b/web/src/views/AccessPoints/clients.vue
@@ -36,22 +36,24 @@
       <v-divider />
 
       <v-card-text>
-        <v-container fluid>
-          <v-row>
-            <v-col :md="6">
-              <AccessPointClientsChart
-                :chart-id="`ap-clients-chart-${accessPoint.id}`"
-                :stats="accessPoint.stats"
-              />
-            </v-col>
-            <v-col :md="6">
-              <AccessPointSignalStrengthChart
-                :chart-id="`ap-signal-chart-${accessPoint.id}`"
-                :stats="accessPoint.stats"
-              />
-            </v-col>
-          </v-row>
-        </v-container>
+        <v-card>
+          <v-card-text>
+            <v-row>
+              <v-col :md="6">
+                <AccessPointClientsChart
+                  :chart-id="`ap-clients-chart-${accessPoint.id}`"
+                  :stats="accessPoint.stats"
+                />
+              </v-col>
+              <v-col :md="6">
+                <AccessPointSignalStrengthChart
+                  :chart-id="`ap-signal-chart-${accessPoint.id}`"
+                  :stats="accessPoint.stats"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
         <v-divider />
         <AccessPointClientsDataTable
           :wifi-devices="accessPoint.wifiDevices"