Reorganize charts
This commit is contained in:
parent
c38af654fa
commit
590ac4870d
|
@ -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
|
|
@ -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: () => ({
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user