web/satellite: make graph line more smooth
Made lines to be more smooth and also updates points styling Issue: https://github.com/storj/storj/issues/5826 Change-Id: I34229e772ceee5e48330f5662a584cd9dcd8c63d
This commit is contained in:
parent
511d74a76d
commit
73898e0d86
@ -82,7 +82,7 @@ const chartOptions = computed((): ChartOptions => {
|
|||||||
},
|
},
|
||||||
elements: {
|
elements: {
|
||||||
line: {
|
line: {
|
||||||
tension: 0,
|
tension: 0.3,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
|
@ -54,26 +54,30 @@ const chartData = computed((): ChartData => {
|
|||||||
data: mainData,
|
data: mainData,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: 'rgba(226, 220, 255, .3)',
|
backgroundColor: 'rgba(226, 220, 255, .3)',
|
||||||
borderColor: '#c5baff',
|
borderColor: '#7B61FF',
|
||||||
pointHoverBackgroundColor: '#FFFFFF',
|
pointHoverBackgroundColor: '#FFFFFF',
|
||||||
pointBorderColor: '#c5baff',
|
pointBorderColor: '#7B61FF',
|
||||||
pointHoverBorderWidth: 4,
|
pointHoverBorderWidth: 3,
|
||||||
radius: xAxisDateLabels.length === 1 ? 10 : 0,
|
hoverRadius: 8,
|
||||||
hoverRadius: 10,
|
hitRadius: 3,
|
||||||
hitRadius: 8,
|
pointRadius: 2,
|
||||||
|
pointBorderWidth: 1,
|
||||||
|
pointBackgroundColor: '#FFFFFF',
|
||||||
order: 0,
|
order: 0,
|
||||||
}, {
|
}, {
|
||||||
data: secondaryData,
|
data: secondaryData,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: 'rgba(226, 220, 255, .7)',
|
backgroundColor: 'rgba(226, 220, 255, .7)',
|
||||||
borderColor: '#a18eff',
|
borderColor: '#E2DCFF',
|
||||||
pointHoverBackgroundColor: '#FFFFFF',
|
pointHoverBackgroundColor: '#FFFFFF',
|
||||||
pointBorderColor: '#a18eff',
|
pointBorderColor: '#E2DCFF',
|
||||||
pointHoverBorderWidth: 4,
|
pointHoverBorderWidth: 3,
|
||||||
radius: xAxisDateLabels.length === 1 ? 10 : 0,
|
hoverRadius: 8,
|
||||||
hoverRadius: 10,
|
hitRadius: 3,
|
||||||
hitRadius: 8,
|
pointRadius: 2,
|
||||||
order: 0,
|
pointBorderWidth: 1,
|
||||||
|
pointBackgroundColor: '#FFFFFF',
|
||||||
|
order: 1,
|
||||||
}],
|
}],
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -51,13 +51,15 @@ const chartData = computed((): ChartData => {
|
|||||||
data,
|
data,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: '#E6EDF7',
|
backgroundColor: '#E6EDF7',
|
||||||
borderColor: '#D7E8FF',
|
borderColor: '#537CFF',
|
||||||
pointHoverBackgroundColor: '#FFFFFF',
|
pointHoverBackgroundColor: '#FFFFFF',
|
||||||
pointBorderColor: '#003DC1',
|
pointBorderColor: '#537CFF',
|
||||||
pointHoverBorderWidth: 4,
|
pointHoverBorderWidth: 3,
|
||||||
radius: xAxisDateLabels.length === 1 ? 10 : 0,
|
hoverRadius: 8,
|
||||||
hoverRadius: 10,
|
hitRadius: 3,
|
||||||
hitRadius: 8,
|
pointRadius: 2,
|
||||||
|
pointBorderWidth: 1,
|
||||||
|
pointBackgroundColor: '#FFFFFF',
|
||||||
}],
|
}],
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user