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' } },