Chart styling

web/src/components/Charts/AccessPointClientsChart.vue

@@ -158,7 +158,7 @@ export default {
                 chartArea.top
               )
 
-              const hexTransparency = '55'
+              const hexTransparency = '33'
 
               gradient.addColorStop(0, colors.cyan.base + hexTransparency)
               gradient.addColorStop(0.05, colors.green.base + hexTransparency)

web/src/components/Charts/AccessPointSignalStrengthChart.vue

@@ -64,14 +64,15 @@ export default {
       return {
         responsive: true,
         maintainAspectRatio: false,
+
         scales: {
           y: {
             beginAtZero: true,
-            min: 0,
+            min: -110,
-            max: 110,
+            max: 0,
             title: {
               display: true,
-              text: '- dBm '
+              text: 'dBm '
             }
           },
           x: {
@@ -99,30 +100,20 @@ export default {
     },
     chartData() {
       const pointRadius = 0
-      const borderWidth = 2
+
-      const tension = 0.2
+      const tension = 0.1
 
       return {
         labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
 
         datasets: [
-          {
-            label: 'Média do sinal',
-
-            borderColor: colors.orange.base,
-            data: this.stats.map(stat => stat.avgSignalStrength * -1),
-            borderWidth,
-            pointRadius,
-            cubicInterpolationMode: 'default',
-            tension
-          },
           {
             label: 'Pior sinal',
 
             borderColor: colors.red.base,
 
-            data: this.stats.map(stat => stat.minSignalStrength * -1),
+            data: this.stats.map(stat => stat.minSignalStrength),
-            borderWidth,
+            borderWidth: 1,
             pointRadius,
             cubicInterpolationMode: 'default',
             tension
@@ -132,8 +123,39 @@ export default {
 
             borderColor: colors.green.base,
 
-            data: this.stats.map(stat => stat.maxSignalStrength * -1),
+            data: this.stats.map(stat => stat.maxSignalStrength),
-            borderWidth,
+            borderWidth: 1,
+            pointRadius,
+            cubicInterpolationMode: 'default',
+            tension
+          },
+
+          {
+            label: 'Média do sinal',
+            backgroundColor: context => {
+              const { ctx, chartArea } = context.chart
+
+              if (!chartArea) return null // This case happens on initial chart load
+
+              const gradient = ctx.createLinearGradient(
+                0,
+                chartArea.bottom,
+                0,
+                chartArea.top
+              )
+
+              const hexTransparency = '33'
+
+              gradient.addColorStop(1, colors.green.base + hexTransparency)
+              gradient.addColorStop(0.7, colors.green.base + hexTransparency)
+              gradient.addColorStop(0.5, colors.orange.base + hexTransparency)
+              gradient.addColorStop(0, colors.red.base + hexTransparency)
+
+              return gradient
+            },
+            borderColor: colors.blue.base,
+            data: this.stats.map(stat => stat.avgSignalStrength),
+            borderWidth: 2,
             pointRadius,
             cubicInterpolationMode: 'default',
             tension,