From f577aacc34350d2d4c3255ff704e119e7cf4b2f5 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 12 Dec 2022 08:30:39 -0400
Subject: [PATCH] Added client peak

---
 web/src/views/WifiStats.vue | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/web/src/views/WifiStats.vue b/web/src/views/WifiStats.vue
index 4a283cb..48c7509 100644
--- a/web/src/views/WifiStats.vue
+++ b/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,