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