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:
Vitalii 2023-05-02 15:14:26 +03:00 committed by Storj Robot
parent 511d74a76d
commit 73898e0d86
3 changed files with 26 additions and 20 deletions

View File

@ -82,7 +82,7 @@ const chartOptions = computed((): ChartOptions => {
}, },
elements: { elements: {
line: { line: {
tension: 0, tension: 0.3,
}, },
}, },
scales: { scales: {

View File

@ -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,
}], }],
}; };
}); });

View File

@ -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',
}], }],
}; };
}); });