Experimenting with ChartJS
This commit is contained in:
parent
a8d4ddd077
commit
88b7bef469
|
@ -18,28 +18,9 @@
|
||||||
import { Line as LineChart } from 'vue-chartjs/legacy'
|
import { Line as LineChart } from 'vue-chartjs/legacy'
|
||||||
import { time } from '../../plugins/date'
|
import { time } from '../../plugins/date'
|
||||||
|
|
||||||
import {
|
import { Chart as ChartJS, registerables } from 'chart.js'
|
||||||
Chart as ChartJS,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
LineElement,
|
|
||||||
LinearScale,
|
|
||||||
CategoryScale,
|
|
||||||
PointElement,
|
|
||||||
Filler
|
|
||||||
} from 'chart.js'
|
|
||||||
|
|
||||||
ChartJS.register(
|
ChartJS.register(...registerables)
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
LineElement,
|
|
||||||
LinearScale,
|
|
||||||
CategoryScale,
|
|
||||||
PointElement,
|
|
||||||
Filler
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { LineChart },
|
components: { LineChart },
|
||||||
|
@ -87,16 +68,33 @@ export default {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100,
|
max: 100,
|
||||||
labels: 'test'
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Quantidade de clientes'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
x: {}
|
x: {
|
||||||
|
time: {
|
||||||
|
unit: 'minute'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Data'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
chartData() {
|
chartData() {
|
||||||
|
const pointRadius = 0
|
||||||
|
const borderWidth = 3
|
||||||
|
const tension = 0.1
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labels: this.stats.map(stat => time(stat.timestamp)),
|
labels: this.stats.map(stat =>
|
||||||
|
time(new Date(stat.timestamp).getTime())
|
||||||
|
),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: 'Clientes conectados',
|
label: 'Clientes conectados',
|
||||||
|
@ -109,11 +107,11 @@ export default {
|
||||||
backgroundColor: this.$vuetify.theme.isDark
|
backgroundColor: this.$vuetify.theme.isDark
|
||||||
? this.$vuetify.theme.themes.dark.success
|
? this.$vuetify.theme.themes.dark.success
|
||||||
: this.$vuetify.theme.themes.light.success,
|
: this.$vuetify.theme.themes.light.success,
|
||||||
borderWidth: 3,
|
borderWidth,
|
||||||
pointRadius: 1,
|
pointRadius,
|
||||||
|
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension: 0.4,
|
tension,
|
||||||
fill: true
|
fill: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -84,13 +84,21 @@ export default {
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
min: -100,
|
min: -100,
|
||||||
max: 0
|
max: 0,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'dBm'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
chartData() {
|
chartData() {
|
||||||
|
const pointRadius = 0
|
||||||
|
const borderWidth = 3
|
||||||
|
const tension = 0.2
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labels: this.stats.map(stat => time(stat.timestamp)),
|
labels: this.stats.map(stat => time(stat.timestamp)),
|
||||||
|
|
||||||
|
@ -103,12 +111,11 @@ export default {
|
||||||
borderColor: this.$vuetify.theme.isDark
|
borderColor: this.$vuetify.theme.isDark
|
||||||
? this.$vuetify.theme.themes.light.accent
|
? this.$vuetify.theme.themes.light.accent
|
||||||
: this.$vuetify.theme.themes.dark.accent,
|
: this.$vuetify.theme.themes.dark.accent,
|
||||||
borderWidth: 1,
|
|
||||||
data: this.stats.map(stat => stat.avgSignalStrength),
|
data: this.stats.map(stat => stat.avgSignalStrength),
|
||||||
borderWidth: 3,
|
borderWidth,
|
||||||
pointRadius: 1,
|
pointRadius,
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension: 0.4
|
tension
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Pior sinal',
|
label: 'Pior sinal',
|
||||||
|
@ -118,12 +125,12 @@ export default {
|
||||||
borderColor: this.$vuetify.theme.isDark
|
borderColor: this.$vuetify.theme.isDark
|
||||||
? this.$vuetify.theme.themes.light.error
|
? this.$vuetify.theme.themes.light.error
|
||||||
: this.$vuetify.theme.themes.dark.error,
|
: this.$vuetify.theme.themes.dark.error,
|
||||||
borderWidth: 1,
|
|
||||||
data: this.stats.map(stat => stat.minSignalStrength),
|
data: this.stats.map(stat => stat.minSignalStrength),
|
||||||
borderWidth: 3,
|
borderWidth,
|
||||||
pointRadius: 1,
|
pointRadius,
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension: 0.4
|
tension
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Melhor sinal',
|
label: 'Melhor sinal',
|
||||||
|
@ -133,12 +140,12 @@ export default {
|
||||||
borderColor: this.$vuetify.theme.isDark
|
borderColor: this.$vuetify.theme.isDark
|
||||||
? this.$vuetify.theme.themes.light.success
|
? this.$vuetify.theme.themes.light.success
|
||||||
: this.$vuetify.theme.themes.dark.success,
|
: this.$vuetify.theme.themes.dark.success,
|
||||||
borderWidth: 1,
|
|
||||||
data: this.stats.map(stat => stat.maxSignalStrength),
|
data: this.stats.map(stat => stat.maxSignalStrength),
|
||||||
borderWidth: 3,
|
borderWidth,
|
||||||
pointRadius: 1,
|
pointRadius,
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension: 0.4
|
tension
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -124,7 +124,7 @@ export default {
|
||||||
notes
|
notes
|
||||||
updatedAt
|
updatedAt
|
||||||
|
|
||||||
stats(take: 50) {
|
stats(take: 120) {
|
||||||
id
|
id
|
||||||
timestamp
|
timestamp
|
||||||
clients
|
clients
|
||||||
|
|
Loading…
Reference in New Issue
Block a user