From debffdf3455f6e01ecec76dff6a031c835f3f21d Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 20 Jun 2022 13:04:04 +0000
Subject: [PATCH] Added usage chart

---
 .../Charts/AccessPointClientsChart.vue        | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Charts/AccessPointClientsChart.vue b/web/src/components/Charts/AccessPointClientsChart.vue
index 914a09c..eb15837 100644
--- a/web/src/components/Charts/AccessPointClientsChart.vue
+++ b/web/src/components/Charts/AccessPointClientsChart.vue
@@ -73,6 +73,16 @@ export default {
             text: 'Quantidade de clientes'
           }
         },
+        y1: {
+          beginAtZero: true,
+          min: 0,
+
+          position: 'right',
+          title: {
+            display: true,
+            text: 'MB'
+          }
+        },
         x: {
           type: 'time',
           time: {
@@ -95,12 +105,30 @@ export default {
   computed: {
     chartData() {
       const pointRadius = 0
-      const borderWidth = 1
+      const borderWidth = 3
       const tension = 0.2
 
       return {
         labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
         datasets: [
+          {
+            label: 'Uso médio de banda',
+            data: this.stats.map(stat => stat.avgUsage / 1024 / 1024),
+
+            borderColor: this.$vuetify.theme.isDark
+              ? this.$vuetify.theme.themes.dark.error
+              : this.$vuetify.theme.themes.light.error,
+
+            backgroundColor: this.$vuetify.theme.isDark
+              ? this.$vuetify.theme.themes.dark.error
+              : this.$vuetify.theme.themes.light.error,
+            borderWidth,
+            pointRadius,
+
+            cubicInterpolationMode: 'default',
+            tension,
+            yAxisID: 'y1'
+          },
           {
             label: 'Clientes conectados',
             data: this.stats.map(stat => stat.clients),