Ticks adjust

web/src/components/Charts/AccessPointClientsChart.vue

@@ -1,5 +1,6 @@
 <template>
   <LineChart
+    v-if="stats"
     :chart-options="chartOptions"
     :chart-data="chartData"
     :chart-id="chartId"
@@ -91,11 +92,16 @@ export default {
           },
           x: {
             type: 'time',
+            ticks: {
+              maxRotation: 0,
+              minRotation: 0,
+              autoSkipPadding: 16
+            },
             time: {
               unit: 'minute',
 
               displayFormats: {
-                minute: 'H:mm'
+                minute: 'HH:mm'
               }
             },
 

web/src/components/Charts/AccessPointSignalStrengthChart.vue

@@ -75,6 +75,11 @@ export default {
           },
           x: {
             type: 'time',
+            ticks: {
+              maxRotation: 0,
+              minRotation: 0,
+              autoSkipPadding: 16
+            },
             time: {
               unit: 'minute',
               // stepSize: 15,

web/src/views/AccessPoints/clients.vue

@@ -1,12 +1,17 @@
 <template>
-  <div>
-    <v-card v-if="!accessPoint">
+  <div v-if="!accessPoint">
+    <v-card>
       <v-skeleton-loader
         type="table-heading, list-item-two-line, image, table-tfoot"
       />
     </v-card>
-
-    <v-card v-else :elevation="0" :loading="!accessPoint">
+  </div>
+  <div v-else>
+    <v-card
+      :elevation="0"
+      :loading="$apollo.queries.accessPoint.loading"
+      :disabled="$apollo.queries.accessPoint.loading"
+    >
       <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,8 +27,8 @@
           <br />
         </div>
         <v-spacer />
-        <v-chip class="mr-2" outlined>
-          <v-icon left>mdi-account-group</v-icon>
+        <v-chip color="grey" class="mr-2" outlined>
+          <v-icon left>mdi-devices</v-icon>
           {{ accessPoint.clients }} clientes conectados
         </v-chip>
         <v-text-field
@@ -38,29 +43,29 @@
         />
       </v-card-title>
       <v-divider />
-
-      <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-divider />
+      <v-container>
+        <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>
       <AccessPointClientsDataTable
         :wifi-devices="accessPoint.wifiDevices"
         :filter="filter"
         paginate
       />
-
       <v-divider />
     </v-card>
   </div>
@@ -83,16 +88,18 @@ export default {
     AccessPointSignalStrengthChart
   },
   data: () => ({
-    filter: ''
+    filter: '',
+    take: 128
   }),
   watch: {},
 
   apollo: {
     accessPoint: {
       pollInterval: 10000,
+      debounce: 500,
       cachePolicy: 'cache-and-network',
       query: gql`
-        query accessPoint($id: ID!) {
+        query accessPoint($id: ID!, $take: Int!) {
           accessPoint(id: $id) {
             id
             name
@@ -107,7 +114,7 @@ export default {
             notes
             updatedAt
 
-            stats(take: 128) {
+            stats(take: $take) {
               id
               timestamp
               clients
@@ -145,7 +152,8 @@ export default {
       `,
       variables() {
         return {
-          id: this.$route.params.id
+          id: this.$route.params.id,
+          take: this.take
         }
       }
     }