Reorganize charts

web/src/components/charts/ClientsChart.vue

@@ -58,6 +58,14 @@ export default {
     plugins: {
       type: Array,
       default: () => []
+    },
+    suggestedMax0: {
+      type: Number,
+      default: 80
+    },
+    suggestedMax1: {
+      type: Number,
+      default: 80
     }
   },
   data: () => ({}),
@@ -76,7 +84,7 @@ export default {
           y: {
             beginAtZero: true,
             min: 0,
-            suggestedMax: 80,
+            suggestedMax: this.suggestedMax0,
 
             title: {
               display: true,
@@ -85,6 +93,7 @@ export default {
           },
           y1: {
             beginAtZero: true,
+            suggestedMax: this.suggestedMax1,
             position: 'right',
             title: {
               display: true

web/src/views/AccessPoints/clients.vue

@@ -46,7 +46,7 @@
       <v-container>
         <v-row>
           <v-col :md="6">
-            <AccessPointClientsChart
+            <ClientsChart
               :chart-id="`ap-clients-chart-${accessPoint.id}`"
               :stats="accessPoint.stats"
             />
@@ -76,7 +76,7 @@ import gql from 'graphql-tag'
 
 import ApIcon from '@/components/ApIcon.vue'
 import AccessPointClientsDataTable from '@/components/dataTables/AccessPointClientsDataTable.vue'
-import AccessPointClientsChart from '@/components/charts/AccessPointClientsChart.vue'
+import ClientsChart from '@/components/charts/ClientsChart.vue'
 import AccessPointSignalStrengthChart from '@/components/charts/AccessPointSignalStrengthChart.vue'
 
 export default {
@@ -84,7 +84,7 @@ export default {
   components: {
     ApIcon,
     AccessPointClientsDataTable,
-    AccessPointClientsChart,
+    ClientsChart,
     AccessPointSignalStrengthChart
   },
   data: () => ({

web/src/views/WifiStats.vue

@@ -1,7 +1,56 @@
 <template>
-  <v-container>stat</v-container>
+  <v-container>
+    <v-row>
+      <v-col v-for="subnet in subnets" :key="subnet.shortname" cols="4">
+        <v-card>
+          <v-card-title class="title font-weight-light text-sm-body-1">
+            {{ subnet.name }} - {{ subnet.cidr }}
+            <v-spacer />
+            <v-icon left> mdi-devices </v-icon>
+            {{ subnet.stats[0].clients }}
+          </v-card-title>
+          <v-card-text>
+            <ClientsChart
+              :stats="subnet.stats"
+              :subnet="subnet"
+              :suggested-max0="500"
+              :suggested-max1="500000000000"
+              :height="150"
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-export default {}
+import ClientsChart from '@/components/charts/ClientsChart.vue'
+import gql from 'graphql-tag'
+export default {
+  components: { ClientsChart },
+  apollo: {
+    subnets: {
+      pollInterval: 5000,
+      debounce: 500,
+      cachePolicy: 'cache-and-network',
+      query: gql`
+        {
+          subnets {
+            shortName
+            name
+            cidr
+            stats {
+              timestamp
+              id
+              clients
+              avgUsage
+              sumUsage
+            }
+          }
+        }
+      `
+    }
+  }
+}
 </script>