1839811/ifms-pti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Charts adjustments

Browse Source
This commit is contained in:
Douglas Barone 2022-06-21 12:58:26 +00:00
parent e65b0c83d0
commit 4d2493470b
3 changed files with 82 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
web/src/components/Charts/AccessPointClientsChart.vue
View File

@ -1,24 +1,24 @@
<template>
<v-card>
<LineChart
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</v-card>
<LineChart
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</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(
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
)
const gradient = ctx.createLinearGradient(
0,
chartArea.bottom,
0,
chartArea.top
)
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
}
]

24
web/src/components/Charts/AccessPointSignalStrengthChart.vue
View File

@ -1,17 +1,15 @@
<template>
<v-card>
<LineChart
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</v-card>
<LineChart
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>

34
web/src/views/AccessPoints/clients.vue
View File

@ -36,22 +36,24 @@
<v-divider />
<v-card-text>
<v-container fluid>
<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-text>
<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-card-text>
</v-card>
<v-divider />
<AccessPointClientsDataTable
:wifi-devices="accessPoint.wifiDevices"