Use date-fns adapter

This commit is contained in:
Douglas Barone 2022-06-15 19:17:01 +00:00
parent d94dd3895e
commit 04032e944c
4 changed files with 47 additions and 26 deletions

15
web/package-lock.json generated
View File

@ -12,6 +12,7 @@
"apollo-link-ws": "^1.0.20",
"apollo-utilities": "^1.3.4",
"chart.js": "^3.8.0",
"chartjs-adapter-date-fns": "^2.0.0",
"date-fns": "^2.28.0",
"eslint": "^6.8.0",
"qrcode.vue": "^1.7.0",
@ -8796,6 +8797,14 @@
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz",
"integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg=="
},
"node_modules/chartjs-adapter-date-fns": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
"integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
"peerDependencies": {
"chart.js": "^3.0.0"
}
},
"node_modules/check-types": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@ -31294,6 +31303,12 @@
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz",
"integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg=="
},
"chartjs-adapter-date-fns": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
"integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
"requires": {}
},
"check-types": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",

View File

@ -13,6 +13,7 @@
"apollo-link-ws": "^1.0.20",
"apollo-utilities": "^1.3.4",
"chart.js": "^3.8.0",
"chartjs-adapter-date-fns": "^2.0.0",
"date-fns": "^2.28.0",
"eslint": "^6.8.0",
"qrcode.vue": "^1.7.0",

View File

@ -16,7 +16,7 @@
<script>
import { Line as LineChart } from 'vue-chartjs/legacy'
import { time } from '../../plugins/date'
import 'chartjs-adapter-date-fns'
import { Chart as ChartJS, registerables } from 'chart.js'
@ -74,11 +74,18 @@ export default {
}
},
x: {
type: 'time',
time: {
unit: 'minute'
unit: 'minute',
stepSize: 15,
displayFormats: {
minute: 'HH:mm'
}
},
title: {
display: true,
display: false,
text: 'Data'
}
}
@ -92,9 +99,7 @@ export default {
const tension = 0.1
return {
labels: this.stats.map(stat =>
time(new Date(stat.timestamp).getTime())
),
labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
datasets: [
{
label: 'Clientes conectados',

View File

@ -18,26 +18,10 @@
import { Line as LineChart } from 'vue-chartjs/legacy'
import { time } from '../../plugins/date'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
CategoryScale,
PointElement
} from 'chart.js'
import { Chart as ChartJS, registerables } from 'chart.js'
import 'chartjs-adapter-date-fns'
ChartJS.register(
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
CategoryScale,
PointElement
)
ChartJS.register(...registerables)
export default {
components: { LineChart },
@ -89,6 +73,22 @@ export default {
display: true,
text: 'dBm'
}
},
x: {
type: 'time',
time: {
unit: 'minute',
stepSize: 15,
displayFormats: {
minute: 'HH:mm'
}
},
title: {
display: false,
text: 'Data'
}
}
}
}
@ -100,7 +100,7 @@ export default {
const tension = 0.2
return {
labels: this.stats.map(stat => time(stat.timestamp)),
labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
datasets: [
{