From 70ac29ea11e95e8552dae2fc3e373faa7da56221 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 22 Jun 2022 14:51:04 +0000
Subject: [PATCH] Chart styling

---
 .../Charts/AccessPointClientsChart.vue        | 24 ++++++++++++++++++-
 .../Charts/AccessPointSignalStrengthChart.vue |  5 ++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Charts/AccessPointClientsChart.vue b/web/src/components/Charts/AccessPointClientsChart.vue
index 95e093c..83ba999 100644
--- a/web/src/components/Charts/AccessPointClientsChart.vue
+++ b/web/src/components/Charts/AccessPointClientsChart.vue
@@ -146,7 +146,29 @@ export default {
 
               return gradient
             },
-            borderWidth: 3,
+            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 = '55'
+
+              gradient.addColorStop(0, colors.cyan.base + hexTransparency)
+              gradient.addColorStop(0.05, colors.green.base + hexTransparency)
+              gradient.addColorStop(0.3, colors.green.base + hexTransparency)
+              gradient.addColorStop(0.7, colors.orange.base + hexTransparency)
+              gradient.addColorStop(0.9, colors.red.base + hexTransparency)
+
+              return gradient
+            },
+            borderWidth: 2,
             pointRadius,
 
             cubicInterpolationMode: 'default',
diff --git a/web/src/components/Charts/AccessPointSignalStrengthChart.vue b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
index 20272ce..1cb5fac 100644
--- a/web/src/components/Charts/AccessPointSignalStrengthChart.vue
+++ b/web/src/components/Charts/AccessPointSignalStrengthChart.vue
@@ -78,14 +78,13 @@ export default {
             ticks: {
               maxRotation: 0,
               minRotation: 0,
-              autoSkipPadding: 16
+              autoSkipPadding: 24
             },
             time: {
               unit: 'minute',
-              // stepSize: 15,
 
               displayFormats: {
-                minute: 'H:mm'
+                minute: 'd/M HH:mm'
               }
             },