Added gradient

web/src/components/Charts/AccessPointClientsChart.vue

@@ -87,7 +87,7 @@ export default {
           type: 'time',
           time: {
             unit: 'minute',
-            stepSize: 15,
+            stepSize: 20,
 
             displayFormats: {
               minute: 'HH:mm'
@@ -140,10 +140,67 @@ export default {
               ? this.$vuetify.theme.themes.dark.success
               : this.$vuetify.theme.themes.light.success,
 
-            backgroundColor: this.$vuetify.theme.isDark
+            backgroundColor: context => {
+              const chart = context.chart
+              const { ctx, chartArea } = chart
+
+              if (!chartArea) {
+                // This case happens on initial chart load
+                return null
+              }
+              let width, height, gradient
+              const getGradient = (ctx, chartArea) => {
+                const chartWidth = chartArea.right - chartArea.left
+                const chartHeight = chartArea.bottom - chartArea.top
+                if (
+                  gradient === null ||
+                  width !== chartWidth ||
+                  height !== chartHeight
+                ) {
+                  // Create the gradient because this is either the first render
+                  // or the size of the chart has changed
+                  width = chartWidth
+                  height = chartHeight
+                  gradient = ctx.createLinearGradient(
+                    0,
+                    chartArea.bottom,
+                    0,
+                    chartArea.top
+                  )
+                  gradient.addColorStop(
+                    0,
+                    this.$vuetify.theme.isDark
                       ? this.$vuetify.theme.themes.dark.success
-              : this.$vuetify.theme.themes.light.success,
+                      : this.$vuetify.theme.themes.light.success
-            borderWidth,
+                  )
+
+                  gradient.addColorStop(
+                    0.4,
+                    this.$vuetify.theme.isDark
+                      ? this.$vuetify.theme.themes.dark.success
+                      : this.$vuetify.theme.themes.light.success
+                  )
+
+                  gradient.addColorStop(
+                    0.7,
+                    this.$vuetify.theme.isDark
+                      ? this.$vuetify.theme.themes.dark.warning
+                      : this.$vuetify.theme.themes.light.warning
+                  )
+                  gradient.addColorStop(
+                    0.9,
+                    this.$vuetify.theme.isDark
+                      ? this.$vuetify.theme.themes.dark.error
+                      : this.$vuetify.theme.themes.light.error
+                  )
+                }
+
+                return gradient
+              }
+
+              return getGradient(ctx, chartArea)
+            },
+            borderWidth: 0,
             pointRadius,
 
             cubicInterpolationMode: 'default',