1839811/ifms-pti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chart styling

Browse Source
This commit is contained in:
Douglas Barone 2022-06-22 16:48:06 +00:00
parent 8510e79c1a
commit 81ddd54bbf
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Charts/AccessPointClientsChart.vue
View File

@ -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)

60
web/src/components/Charts/AccessPointSignalStrengthChart.vue
View File

@ -64,14 +64,15 @@ export default {
return {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
min: 0,
max: 110,
min: -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),
borderWidth,
data: this.stats.map(stat => stat.minSignalStrength),
borderWidth: 1,
pointRadius,
cubicInterpolationMode: 'default',
tension
@ -132,8 +123,39 @@ export default {
borderColor: colors.green.base,
data: this.stats.map(stat => stat.maxSignalStrength * -1),
borderWidth,
data: this.stats.map(stat => stat.maxSignalStrength),
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,