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 { 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
|
||||
}
|
||||
]
|
||||
|
|
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -124,7 +124,7 @@ export default {
|
|||
notes
|
||||
updatedAt
|
||||
|
||||
stats(take: 50) {
|
||||
stats(take: 120) {
|
||||
id
|
||||
timestamp
|
||||
clients
|
||||
|
|
Loading…
Reference in New Issue
Block a user