Added usage chart

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),