diff --git a/web/src/components/Charts/AccessPointClientsChart.vue b/web/src/components/Charts/AccessPointClientsChart.vue index 3f39bb6..3f373dd 100644 --- a/web/src/components/Charts/AccessPointClientsChart.vue +++ b/web/src/components/Charts/AccessPointClientsChart.vue @@ -18,28 +18,9 @@ import { Line as LineChart } from 'vue-chartjs/legacy' import { time } from '../../plugins/date' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineElement, - LinearScale, - CategoryScale, - PointElement, - Filler -} from 'chart.js' +import { Chart as ChartJS, registerables } from 'chart.js' -ChartJS.register( - Title, - Tooltip, - Legend, - LineElement, - LinearScale, - CategoryScale, - PointElement, - Filler -) +ChartJS.register(...registerables) export default { components: { LineChart }, @@ -87,16 +68,33 @@ export default { beginAtZero: true, min: 0, max: 100, - labels: 'test' + title: { + display: true, + text: 'Quantidade de clientes' + } }, - x: {} + x: { + time: { + unit: 'minute' + }, + title: { + display: true, + text: 'Data' + } + } } } }), computed: { chartData() { + const pointRadius = 0 + const borderWidth = 3 + const tension = 0.1 + return { - labels: this.stats.map(stat => time(stat.timestamp)), + labels: this.stats.map(stat => + time(new Date(stat.timestamp).getTime()) + ), datasets: [ { label: 'Clientes conectados', @@ -109,11 +107,11 @@ export default { backgroundColor: this.$vuetify.theme.isDark ? this.$vuetify.theme.themes.dark.success : this.$vuetify.theme.themes.light.success, - borderWidth: 3, - pointRadius: 1, + borderWidth, + pointRadius, cubicInterpolationMode: 'default', - tension: 0.4, + tension, fill: true } ] diff --git a/web/src/components/Charts/AccessPointSignalStrengthChart.vue b/web/src/components/Charts/AccessPointSignalStrengthChart.vue index c139aa7..1a7ff4a 100644 --- a/web/src/components/Charts/AccessPointSignalStrengthChart.vue +++ b/web/src/components/Charts/AccessPointSignalStrengthChart.vue @@ -84,13 +84,21 @@ export default { y: { beginAtZero: true, min: -100, - max: 0 + max: 0, + title: { + display: true, + text: 'dBm' + } } } } }), computed: { chartData() { + const pointRadius = 0 + const borderWidth = 3 + const tension = 0.2 + return { labels: this.stats.map(stat => time(stat.timestamp)), @@ -103,12 +111,11 @@ export default { borderColor: this.$vuetify.theme.isDark ? this.$vuetify.theme.themes.light.accent : this.$vuetify.theme.themes.dark.accent, - borderWidth: 1, data: this.stats.map(stat => stat.avgSignalStrength), - borderWidth: 3, - pointRadius: 1, + borderWidth, + pointRadius, cubicInterpolationMode: 'default', - tension: 0.4 + tension }, { label: 'Pior sinal', @@ -118,12 +125,12 @@ export default { borderColor: this.$vuetify.theme.isDark ? this.$vuetify.theme.themes.light.error : this.$vuetify.theme.themes.dark.error, - borderWidth: 1, + data: this.stats.map(stat => stat.minSignalStrength), - borderWidth: 3, - pointRadius: 1, + borderWidth, + pointRadius, cubicInterpolationMode: 'default', - tension: 0.4 + tension }, { label: 'Melhor sinal', @@ -133,12 +140,12 @@ export default { borderColor: this.$vuetify.theme.isDark ? this.$vuetify.theme.themes.light.success : this.$vuetify.theme.themes.dark.success, - borderWidth: 1, + data: this.stats.map(stat => stat.maxSignalStrength), - borderWidth: 3, - pointRadius: 1, + borderWidth, + pointRadius, cubicInterpolationMode: 'default', - tension: 0.4 + tension } ] } diff --git a/web/src/views/AccessPoints/clients.vue b/web/src/views/AccessPoints/clients.vue index 13d7a49..fd26519 100644 --- a/web/src/views/AccessPoints/clients.vue +++ b/web/src/views/AccessPoints/clients.vue @@ -124,7 +124,7 @@ export default { notes updatedAt - stats(take: 50) { + stats(take: 120) { id timestamp clients