Ticks adjust
This commit is contained in:
parent
772b5c7d9d
commit
c486ac9fea
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<LineChart
|
||||
v-if="stats"
|
||||
:chart-options="chartOptions"
|
||||
:chart-data="chartData"
|
||||
:chart-id="chartId"
|
||||
|
@ -91,11 +92,16 @@ export default {
|
|||
},
|
||||
x: {
|
||||
type: 'time',
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
autoSkipPadding: 16
|
||||
},
|
||||
time: {
|
||||
unit: 'minute',
|
||||
|
||||
displayFormats: {
|
||||
minute: 'H:mm'
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -75,6 +75,11 @@ export default {
|
|||
},
|
||||
x: {
|
||||
type: 'time',
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
autoSkipPadding: 16
|
||||
},
|
||||
time: {
|
||||
unit: 'minute',
|
||||
// stepSize: 15,
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card v-if="!accessPoint">
|
||||
<div v-if="!accessPoint">
|
||||
<v-card>
|
||||
<v-skeleton-loader
|
||||
type="table-heading, list-item-two-line, image, table-tfoot"
|
||||
/>
|
||||
</v-card>
|
||||
|
||||
<v-card v-else :elevation="0" :loading="!accessPoint">
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-card
|
||||
:elevation="0"
|
||||
:loading="$apollo.queries.accessPoint.loading"
|
||||
:disabled="$apollo.queries.accessPoint.loading"
|
||||
>
|
||||
<v-card-title class="font-weight-regular">
|
||||
<v-btn class="ml-1" left icon @click="() => $router.back()">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
|
@ -22,8 +27,8 @@
|
|||
<br />
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-chip class="mr-2" outlined>
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
<v-chip color="grey" class="mr-2" outlined>
|
||||
<v-icon left>mdi-devices</v-icon>
|
||||
{{ accessPoint.clients }} clientes conectados
|
||||
</v-chip>
|
||||
<v-text-field
|
||||
|
@ -38,29 +43,29 @@
|
|||
/>
|
||||
</v-card-title>
|
||||
<v-divider />
|
||||
|
||||
<v-row>
|
||||
<v-col :md="6">
|
||||
<AccessPointClientsChart
|
||||
:chart-id="`ap-clients-chart-${accessPoint.id}`"
|
||||
:stats="accessPoint.stats"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :md="6">
|
||||
<AccessPointSignalStrengthChart
|
||||
:chart-id="`ap-signal-chart-${accessPoint.id}`"
|
||||
:stats="accessPoint.stats"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider />
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col :md="6">
|
||||
<AccessPointClientsChart
|
||||
:chart-id="`ap-clients-chart-${accessPoint.id}`"
|
||||
:stats="accessPoint.stats"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :md="6">
|
||||
<AccessPointSignalStrengthChart
|
||||
:chart-id="`ap-signal-chart-${accessPoint.id}`"
|
||||
:stats="accessPoint.stats"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<v-card>
|
||||
<AccessPointClientsDataTable
|
||||
:wifi-devices="accessPoint.wifiDevices"
|
||||
:filter="filter"
|
||||
paginate
|
||||
/>
|
||||
|
||||
<v-divider />
|
||||
</v-card>
|
||||
</div>
|
||||
|
@ -83,16 +88,18 @@ export default {
|
|||
AccessPointSignalStrengthChart
|
||||
},
|
||||
data: () => ({
|
||||
filter: ''
|
||||
filter: '',
|
||||
take: 128
|
||||
}),
|
||||
watch: {},
|
||||
|
||||
apollo: {
|
||||
accessPoint: {
|
||||
pollInterval: 10000,
|
||||
debounce: 500,
|
||||
cachePolicy: 'cache-and-network',
|
||||
query: gql`
|
||||
query accessPoint($id: ID!) {
|
||||
query accessPoint($id: ID!, $take: Int!) {
|
||||
accessPoint(id: $id) {
|
||||
id
|
||||
name
|
||||
|
@ -107,7 +114,7 @@ export default {
|
|||
notes
|
||||
updatedAt
|
||||
|
||||
stats(take: 128) {
|
||||
stats(take: $take) {
|
||||
id
|
||||
timestamp
|
||||
clients
|
||||
|
@ -145,7 +152,8 @@ export default {
|
|||
`,
|
||||
variables() {
|
||||
return {
|
||||
id: this.$route.params.id
|
||||
id: this.$route.params.id,
|
||||
take: this.take
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user