Chart styling
This commit is contained in:
parent
8510e79c1a
commit
81ddd54bbf
|
@ -158,7 +158,7 @@ export default {
|
||||||
chartArea.top
|
chartArea.top
|
||||||
)
|
)
|
||||||
|
|
||||||
const hexTransparency = '55'
|
const hexTransparency = '33'
|
||||||
|
|
||||||
gradient.addColorStop(0, colors.cyan.base + hexTransparency)
|
gradient.addColorStop(0, colors.cyan.base + hexTransparency)
|
||||||
gradient.addColorStop(0.05, colors.green.base + hexTransparency)
|
gradient.addColorStop(0.05, colors.green.base + hexTransparency)
|
||||||
|
|
|
@ -64,14 +64,15 @@ export default {
|
||||||
return {
|
return {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
|
|
||||||
scales: {
|
scales: {
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
min: 0,
|
min: -110,
|
||||||
max: 110,
|
max: 0,
|
||||||
title: {
|
title: {
|
||||||
display: true,
|
display: true,
|
||||||
text: '- dBm '
|
text: 'dBm '
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
x: {
|
x: {
|
||||||
|
@ -99,30 +100,20 @@ export default {
|
||||||
},
|
},
|
||||||
chartData() {
|
chartData() {
|
||||||
const pointRadius = 0
|
const pointRadius = 0
|
||||||
const borderWidth = 2
|
|
||||||
const tension = 0.2
|
const tension = 0.1
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
|
labels: this.stats.map(stat => new Date(stat.timestamp).getTime()),
|
||||||
|
|
||||||
datasets: [
|
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',
|
label: 'Pior sinal',
|
||||||
|
|
||||||
borderColor: colors.red.base,
|
borderColor: colors.red.base,
|
||||||
|
|
||||||
data: this.stats.map(stat => stat.minSignalStrength * -1),
|
data: this.stats.map(stat => stat.minSignalStrength),
|
||||||
borderWidth,
|
borderWidth: 1,
|
||||||
pointRadius,
|
pointRadius,
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension
|
tension
|
||||||
|
@ -132,8 +123,39 @@ export default {
|
||||||
|
|
||||||
borderColor: colors.green.base,
|
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,
|
pointRadius,
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
tension,
|
tension,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user