Plot OK

server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ifms-pti-svr",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ifms-pti-svr",
-      "version": "3.4.9",
+      "version": "3.5.0",
       "license": "ISC",
       "dependencies": {
         "@prisma/client": "^4.7.1",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ifms-pti-svr",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "description": "Servidor do Portal de TI do IFMS",
   "main": "src/index.js",
   "prisma": {

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ifms-pti",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ifms-pti",
-      "version": "3.4.9",
+      "version": "3.5.0",
       "dependencies": {
         "@mdi/font": "^6.9.96",
         "apollo-link-ws": "^1.0.20",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ifms-pti",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

web/src/views/AccessPoints/stats.vue

@@ -33,19 +33,55 @@
         prepend-inner-icon="mdi-timer-outline"
       />
     </v-toolbar>
-
-    {{ accessPoints }}
+    <v-expand-transition>
+      <v-progress-linear
+        v-if="$apollo.queries.accessPoints.loading"
+        class="pa-0 ma-0"
+        indeterminate
+      />
+    </v-expand-transition>
+    <v-container fluid>
+      <v-row dense>
+        <v-col
+          v-for="ap in orderedAccessPoints"
+          :key="ap.id"
+          sm="12"
+          md="6"
+          lg="4"
+        >
+          <div class="font-weight-light">
+            {{ ap.name || ap.hostname }}
+            <span v-if="ap.local"> ({{ ap.local }}) </span>
+          </div>
+          <v-card class="mb-1" flat outlined>
+            <v-card-text class="pa-0">
+              <ClientsChart
+                :stats="ap.stats"
+                :subnet="ap.subnet"
+                :height="90"
+                hide-labels
+              />
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script>
 import gql from 'graphql-tag'
+import ClientsChart from '../../components/charts/ClientsChart.vue'
+
 export default {
   name: 'AccessPointsStats',
+  components: {
+    ClientsChart
+  },
   data() {
     return {
       subnet: null,
-      minutesIn: 1440,
+      minutesIn: 720,
       minutesInItems: [
         {
           text: 'Última hora',
@@ -80,7 +116,6 @@ export default {
         'Alfabética',
         'Clientes atualmente',
         'Pico de clientes',
-        'Menor quantidade de clientes',
         'Média de clientes'
       ],
       orderBy: 'Pico de clientes'
@@ -94,6 +129,60 @@ export default {
           value: network.shortName
         }
       })
+    },
+    orderedAccessPoints() {
+      const accessPoints = this.accessPoints
+      if (!accessPoints) return []
+
+      const orderBy = this.orderBy
+
+      if (orderBy === 'Alfabética') {
+        return accessPoints.sort((a, b) => {
+          const aName = a.name || a.hostname
+          const bName = b.name || b.hostname
+          return aName.localeCompare(bName)
+        })
+      }
+
+      if (orderBy === 'Clientes atualmente') {
+        return accessPoints.sort((a, b) => {
+          const aClients = a.clients || 0
+          const bClients = b.clients || 0
+          return bClients - aClients
+        })
+      }
+
+      if (orderBy === 'Pico de clientes') {
+        return accessPoints.sort((a, b) => {
+          const aStats = a.stats || []
+          const bStats = b.stats || []
+          const aMaxClients = aStats.reduce((max, stat) => {
+            return Math.max(max, stat.clients)
+          }, 0)
+          const bMaxClients = bStats.reduce((max, stat) => {
+            return Math.max(max, stat.clients)
+          }, 0)
+          return bMaxClients - aMaxClients
+        })
+      }
+
+      if (orderBy === 'Média de clientes') {
+        return accessPoints.sort((a, b) => {
+          const aStats = a.stats || []
+          const bStats = b.stats || []
+          const aAvgClients =
+            aStats.reduce((sum, stat) => {
+              return sum + stat.clients
+            }, 0) / aStats.length
+          const bAvgClients =
+            bStats.reduce((sum, stat) => {
+              return sum + stat.clients
+            }, 0) / bStats.length
+          return bAvgClients - aAvgClients
+        })
+      }
+
+      return accessPoints
     }
   },
 
@@ -122,6 +211,9 @@ export default {
       `
     },
     accessPoints: {
+      pollInterval: 10000,
+      debounce: 500,
+      cachePolicy: 'cache-and-network',
       skip() {
         return !this.subnet
       },
@@ -130,10 +222,14 @@ export default {
           accessPoints(networkShortName: $networkShortName) {
             id
             mac
+            name
+            hostname
+            clients
+            local
             subnetInfo {
               shortName
             }
-            stats(minutesIn: $minutesIn) {
+            stats(minutesIn: $minutesIn, take: 64) {
               timestamp
               id
               clients

web/src/views/WifiStats.vue

@@ -26,7 +26,7 @@
       <v-progress-linear
         v-if="$apollo.queries.subnets.loading"
         class="pa-0 ma-0"
-        :indeterminate="$apollo.queries.subnets.loading"
+        indeterminate
       />
     </v-expand-transition>
     <v-container fluid>