Charts adjustments

web/src/components/Charts/AccessPointClientsChart.vue

@@ -1,5 +1,4 @@
 <template>
-  <v-card>
   <LineChart
     :chart-options="chartOptions"
     :chart-data="chartData"
@@ -11,14 +10,15 @@
     :width="width"
     :height="height"
   />
-  </v-card>
 </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,
+            display: true
-            text: 'MB'
+          },
+          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 } = context.chart
-              const { ctx, chartArea } = chart
 
-              if (!chartArea) {
+              if (!chartArea) return null // This case happens on initial chart load
-                // This case happens on initial chart load
-                return null
-              }
-              let width, height, gradient
 
-              const chartWidth = chartArea.right - chartArea.left
+              const gradient = ctx.createLinearGradient(
-              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(
+              gradient.addColorStop(0, colors.cyan.base)
-                  0.4,
+              gradient.addColorStop(0.05, colors.green.base)
-                  this.$vuetify.theme.isDark
+              gradient.addColorStop(0.3, colors.green.base)
-                    ? this.$vuetify.theme.themes.dark.success
+              gradient.addColorStop(0.7, colors.orange.base)
-                    : this.$vuetify.theme.themes.light.success
+              gradient.addColorStop(0.9, colors.red.base)
-                )
-
-                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 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
           }
         ]

web/src/components/Charts/AccessPointSignalStrengthChart.vue

@@ -1,5 +1,4 @@
 <template>
-  <v-card>
   <LineChart
     :chart-options="chartOptions"
     :chart-data="chartData"
@@ -11,7 +10,6 @@
     :width="width"
     :height="height"
   />
-  </v-card>
 </template>
 
 <script>

web/src/views/AccessPoints/clients.vue

@@ -36,7 +36,8 @@
       <v-divider />
 
       <v-card-text>
-        <v-container fluid>
+        <v-card>
+          <v-card-text>
             <v-row>
               <v-col :md="6">
                 <AccessPointClientsChart
@@ -51,7 +52,8 @@
                 />
               </v-col>
             </v-row>
-        </v-container>
+          </v-card-text>
+        </v-card>
         <v-divider />
         <AccessPointClientsDataTable
           :wifi-devices="accessPoint.wifiDevices"