Charts adjustments
This commit is contained in:
parent
e65b0c83d0
commit
4d2493470b
|
@ -1,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card>
|
|
||||||
<LineChart
|
<LineChart
|
||||||
:chart-options="chartOptions"
|
:chart-options="chartOptions"
|
||||||
:chart-data="chartData"
|
:chart-data="chartData"
|
||||||
|
@ -11,14 +10,15 @@
|
||||||
:width="width"
|
:width="width"
|
||||||
:height="height"
|
:height="height"
|
||||||
/>
|
/>
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Line as LineChart } from 'vue-chartjs/legacy'
|
import { Line as LineChart } from 'vue-chartjs/legacy'
|
||||||
import 'chartjs-adapter-date-fns'
|
import 'chartjs-adapter-date-fns'
|
||||||
|
import colors from 'vuetify/lib/util/colors'
|
||||||
|
|
||||||
import { Chart as ChartJS, registerables } from 'chart.js'
|
import { Chart as ChartJS, registerables } from 'chart.js'
|
||||||
|
import { destructedBytes } from '../../plugins/format-bytes'
|
||||||
|
|
||||||
ChartJS.register(...registerables)
|
ChartJS.register(...registerables)
|
||||||
|
|
||||||
|
@ -67,10 +67,11 @@ export default {
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100,
|
suggestedMax: 100,
|
||||||
|
|
||||||
title: {
|
title: {
|
||||||
display: true,
|
display: true,
|
||||||
text: 'Quantidade de clientes'
|
text: 'Clientes'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
y1: {
|
y1: {
|
||||||
|
@ -79,8 +80,13 @@ export default {
|
||||||
|
|
||||||
position: 'right',
|
position: 'right',
|
||||||
title: {
|
title: {
|
||||||
display: true,
|
display: true
|
||||||
text: 'MB'
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: function (value, index, values) {
|
||||||
|
const bytes = destructedBytes(value)
|
||||||
|
return `${bytes.amount} ${bytes.unit}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
x: {
|
x: {
|
||||||
|
@ -105,92 +111,34 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
chartData() {
|
chartData() {
|
||||||
const pointRadius = 0
|
const pointRadius = 0
|
||||||
const borderWidth = 3
|
|
||||||
const tension = 0.2
|
const tension = 0.2
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
|
labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
|
||||||
label: 'Uso de banda',
|
|
||||||
|
|
||||||
data: this.stats.map(
|
|
||||||
stat => (stat.avgUsage * stat.clients) / 1024 / 1024
|
|
||||||
),
|
|
||||||
|
|
||||||
borderColor: this.$vuetify.theme.isDark
|
|
||||||
? this.$vuetify.theme.themes.dark.info
|
|
||||||
: this.$vuetify.theme.themes.light.info,
|
|
||||||
|
|
||||||
backgroundColor: undefined,
|
|
||||||
borderWidth,
|
|
||||||
pointRadius,
|
|
||||||
|
|
||||||
cubicInterpolationMode: 'default',
|
|
||||||
tension,
|
|
||||||
yAxisID: 'y1',
|
|
||||||
fill: true
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
label: 'Clientes conectados',
|
label: 'Clientes conectados',
|
||||||
|
|
||||||
data: this.stats.map(stat => stat.clients),
|
data: this.stats.map(stat => stat.clients),
|
||||||
|
|
||||||
borderColor: context => {
|
borderColor: context => {
|
||||||
const chart = context.chart
|
const { ctx, chartArea } = context.chart
|
||||||
const { ctx, chartArea } = chart
|
|
||||||
|
|
||||||
if (!chartArea) {
|
if (!chartArea) return null // This case happens on initial chart load
|
||||||
// This case happens on initial chart load
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
let width, height, gradient
|
|
||||||
|
|
||||||
const chartWidth = chartArea.right - chartArea.left
|
const gradient = ctx.createLinearGradient(
|
||||||
const chartHeight = chartArea.bottom - chartArea.top
|
|
||||||
if (
|
|
||||||
gradient === null ||
|
|
||||||
width !== chartWidth ||
|
|
||||||
height !== chartHeight
|
|
||||||
) {
|
|
||||||
// Create the gradient because this is either the first render
|
|
||||||
// or the size of the chart has changed
|
|
||||||
width = chartWidth
|
|
||||||
height = chartHeight
|
|
||||||
gradient = ctx.createLinearGradient(
|
|
||||||
0,
|
0,
|
||||||
chartArea.bottom,
|
chartArea.bottom,
|
||||||
0,
|
0,
|
||||||
chartArea.top
|
chartArea.top
|
||||||
)
|
)
|
||||||
gradient.addColorStop(
|
|
||||||
0,
|
|
||||||
this.$vuetify.theme.isDark
|
|
||||||
? this.$vuetify.theme.themes.dark.success
|
|
||||||
: this.$vuetify.theme.themes.light.success
|
|
||||||
)
|
|
||||||
|
|
||||||
gradient.addColorStop(
|
gradient.addColorStop(0, colors.cyan.base)
|
||||||
0.4,
|
gradient.addColorStop(0.05, colors.green.base)
|
||||||
this.$vuetify.theme.isDark
|
gradient.addColorStop(0.3, colors.green.base)
|
||||||
? this.$vuetify.theme.themes.dark.success
|
gradient.addColorStop(0.7, colors.orange.base)
|
||||||
: this.$vuetify.theme.themes.light.success
|
gradient.addColorStop(0.9, colors.red.base)
|
||||||
)
|
|
||||||
|
|
||||||
gradient.addColorStop(
|
|
||||||
0.7,
|
|
||||||
this.$vuetify.theme.isDark
|
|
||||||
? this.$vuetify.theme.themes.dark.warning
|
|
||||||
: this.$vuetify.theme.themes.light.warning
|
|
||||||
)
|
|
||||||
gradient.addColorStop(
|
|
||||||
0.9,
|
|
||||||
this.$vuetify.theme.isDark
|
|
||||||
? this.$vuetify.theme.themes.dark.error
|
|
||||||
: this.$vuetify.theme.themes.light.error
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return gradient
|
return gradient
|
||||||
},
|
},
|
||||||
|
@ -200,6 +148,22 @@ export default {
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension,
|
tension,
|
||||||
|
|
||||||
|
fill: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Uso de banda',
|
||||||
|
|
||||||
|
data: this.stats.map(stat => stat.avgUsage * stat.clients),
|
||||||
|
|
||||||
|
borderColor: colors.blue.base,
|
||||||
|
|
||||||
|
backgroundColor: undefined,
|
||||||
|
borderWidth: 1,
|
||||||
|
pointRadius,
|
||||||
|
|
||||||
|
cubicInterpolationMode: 'default',
|
||||||
|
tension,
|
||||||
|
yAxisID: 'y1',
|
||||||
fill: true
|
fill: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card>
|
|
||||||
<LineChart
|
<LineChart
|
||||||
:chart-options="chartOptions"
|
:chart-options="chartOptions"
|
||||||
:chart-data="chartData"
|
:chart-data="chartData"
|
||||||
|
@ -11,7 +10,6 @@
|
||||||
:width="width"
|
:width="width"
|
||||||
:height="height"
|
:height="height"
|
||||||
/>
|
/>
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -36,7 +36,8 @@
|
||||||
<v-divider />
|
<v-divider />
|
||||||
|
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-container fluid>
|
<v-card>
|
||||||
|
<v-card-text>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col :md="6">
|
<v-col :md="6">
|
||||||
<AccessPointClientsChart
|
<AccessPointClientsChart
|
||||||
|
@ -51,7 +52,8 @@
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<AccessPointClientsDataTable
|
<AccessPointClientsDataTable
|
||||||
:wifi-devices="accessPoint.wifiDevices"
|
:wifi-devices="accessPoint.wifiDevices"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user