Chart improvements

web/src/components/Charts/AccessPointClientsChart.vue

@@ -59,54 +59,54 @@ export default {
       default: () => []
     }
   },
-  data: () => ({
+  data: () => ({}),
-    chartOptions: {
+  computed: {
-      responsive: true,
+    chartOptions() {
-      maintainAspectRatio: false,
+      return {
-      scales: {
+        responsive: true,
-        y: {
+        maintainAspectRatio: false,
-          beginAtZero: true,
+        scales: {
-          min: 0,
+          y: {
-          suggestedMax: 80,
+            beginAtZero: true,
+            min: 0,
+            suggestedMax: 80,
 
-          title: {
+            title: {
-            display: true,
+              display: true,
-            text: 'Clientes'
+              text: 'Clientes'
-          }
-        },
-        y1: {
-          beginAtZero: true,
-          position: 'right',
-          title: {
-            display: true
-          },
-          ticks: {
-            callback: function (value, index, values) {
-              const bytes = destructedBytes(value)
-              return `${bytes.amount} ${bytes.unit}`
-            }
-          }
-        },
-        x: {
-          type: 'time',
-          time: {
-            unit: 'minute',
-            stepSize: 20,
-
-            displayFormats: {
-              minute: 'H:mm'
             }
           },
+          y1: {
+            beginAtZero: true,
+            position: 'right',
+            title: {
+              display: true
+            },
+            ticks: {
+              callback: function (value, index, values) {
+                const bytes = destructedBytes(value)
+                return `${bytes.amount} ${bytes.unit}`
+              }
+            }
+          },
+          x: {
+            type: 'time',
+            time: {
+              unit: 'minute',
 
-          title: {
+              displayFormats: {
-            display: false,
+                minute: 'H:mm'
-            text: 'Data'
+              }
+            },
+
+            title: {
+              display: false,
+              text: 'Data'
+            }
           }
         }
       }
-    }
+    },
-  }),
-  computed: {
     chartData() {
       const pointRadius = 0
 

web/src/components/Charts/AccessPointSignalStrengthChart.vue

@@ -57,40 +57,41 @@ export default {
       default: () => []
     }
   },
-  data: () => ({
+  data: () => ({}),
-    chartOptions: {
+  computed: {
-      responsive: true,
+    chartOptions() {
-      maintainAspectRatio: false,
+      return {
-      scales: {
+        responsive: true,
-        y: {
+        maintainAspectRatio: false,
-          beginAtZero: true,
+        scales: {
-          min: -100,
+          y: {
-          max: 0,
+            beginAtZero: true,
-          title: {
+            min: -100,
-            display: true,
+            max: 0,
-            text: 'dBm'
+            title: {
-          }
+              display: true,
-        },
+              text: 'dBm'
-        x: {
-          type: 'time',
-          time: {
-            unit: 'minute',
-            stepSize: 15,
-
-            displayFormats: {
-              minute: 'H:mm'
             }
           },
+          x: {
+            type: 'time',
+            time: {
+              unit: 'minute',
+              // stepSize: 15,
 
-          title: {
+              displayFormats: {
-            display: false,
+                minute: 'H:mm'
-            text: 'Data'
+              }
+            },
+
+            title: {
+              display: false,
+              text: 'Data'
+            }
           }
         }
       }
-    }
+    },
-  }),
-  computed: {
     chartData() {
       const pointRadius = 0
       const borderWidth = 3

web/src/views/AccessPoints/clients.vue

@@ -6,7 +6,7 @@
       />
     </v-card>
 
-    <v-card v-else :loading="!accessPoint">
+    <v-card v-else :elevation="0" :loading="!accessPoint">
       <v-card-title class="font-weight-regular">
         <v-btn class="ml-1" left icon @click="() => $router.back()">
           <v-icon>mdi-arrow-left</v-icon>
@@ -22,6 +22,7 @@
           <br />
         </div>
         <v-spacer />
+
         <v-text-field
           v-model="filter"
           label="Filtro"
@@ -35,32 +36,28 @@
       </v-card-title>
       <v-divider />
 
-      <v-card-text>
+      <v-row>
-        <v-card>
+        <v-col :md="6">
-          <v-card-text>
+          <AccessPointClientsChart
-            <v-row>
+            :chart-id="`ap-clients-chart-${accessPoint.id}`"
-              <v-col :md="6">
+            :stats="accessPoint.stats"
-                <AccessPointClientsChart
+          />
-                  :chart-id="`ap-clients-chart-${accessPoint.id}`"
+        </v-col>
-                  :stats="accessPoint.stats"
+        <v-col :md="6">
-                />
+          <AccessPointSignalStrengthChart
-              </v-col>
+            :chart-id="`ap-signal-chart-${accessPoint.id}`"
-              <v-col :md="6">
+            :stats="accessPoint.stats"
-                <AccessPointSignalStrengthChart
+          />
-                  :chart-id="`ap-signal-chart-${accessPoint.id}`"
+        </v-col>
-                  :stats="accessPoint.stats"
+      </v-row>
-                />
+
-              </v-col>
+      <v-divider />
-            </v-row>
+      <AccessPointClientsDataTable
-          </v-card-text>
+        :wifi-devices="accessPoint.wifiDevices"
-        </v-card>
+        :filter="filter"
-        <v-divider />
+        paginate
-        <AccessPointClientsDataTable
+      />
-          :wifi-devices="accessPoint.wifiDevices"
+
-          :filter="filter"
-          paginate
-        />
-      </v-card-text>
       <v-divider />
     </v-card>
   </div>