Experimenting with ChartJS

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
           }
         ]

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
           }
         ]
       }

web/src/views/AccessPoints/clients.vue

@@ -124,7 +124,7 @@ export default {
             notes
             updatedAt
 
-            stats(take: 50) {
+            stats(take: 120) {
               id
               timestamp
               clients