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