Added client peak

web/src/views/WifiStats.vue

@@ -30,15 +30,32 @@
         >
           <v-card flat outlined>
             <v-card-title
-              class="title font-weight-light text-sm-body-1 pb-1 pt-2 px-2"
+              class="title font-weight-light text-sm-body-1 py-2 px-2"
             >
               {{ subnet.name }} - {{ subnet.cidr }}
               <v-spacer />
-              <v-chip small color="primary" outlined>
-                {{ subnet.stats[0].clients }}
-              </v-chip>
+              <v-tooltip top>
+                <template v-slot:activator="{ on }">
+                  <v-chip outlined small class="mr-2" v-on="on">
+                    <v-icon left small>mdi-chart-bell-curve</v-icon>
+                    {{ subnetPeakClients(subnet) }}
+                  </v-chip>
+                </template>
+                <span>Pico de clientes no intervalo</span>
+              </v-tooltip>
+
+              <v-tooltip top>
+                <template v-slot:activator="{ on }">
+                  <v-chip outlined small v-on="on">
+                    <v-icon left small>mdi-chart-bell-curve-cumulative</v-icon>
+
+                    {{ subnet.stats[0].clients }}
+                  </v-chip>
+                </template>
+                <span>Clientes atualmente</span>
+              </v-tooltip>
             </v-card-title>
-            <v-card-text>
+            <v-card-text class="pa-0">
               <ClientsChart
                 :stats="subnet.stats"
                 :subnet="subnet"
@@ -104,6 +121,13 @@ export default {
       return maxUsage || 0
     }
   },
+  methods: {
+    subnetPeakClients(subnet) {
+      return subnet.stats.reduce((max, stat) => {
+        return Math.max(max, stat.clients)
+      }, 0)
+    }
+  },
   apollo: {
     subnets: {
       pollInterval: 10000,