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: {
line: {
tension: 0,
tension: 0.3,
},
},
scales: {

View File

@ -54,26 +54,30 @@ const chartData = computed((): ChartData => {
data: mainData,
fill: true,
backgroundColor: 'rgba(226, 220, 255, .3)',
borderColor: '#c5baff',
borderColor: '#7B61FF',
pointHoverBackgroundColor: '#FFFFFF',
pointBorderColor: '#c5baff',
pointHoverBorderWidth: 4,
radius: xAxisDateLabels.length === 1 ? 10 : 0,
hoverRadius: 10,
hitRadius: 8,
pointBorderColor: '#7B61FF',
pointHoverBorderWidth: 3,
hoverRadius: 8,
hitRadius: 3,
pointRadius: 2,
pointBorderWidth: 1,
pointBackgroundColor: '#FFFFFF',
order: 0,
}, {
data: secondaryData,
fill: true,
backgroundColor: 'rgba(226, 220, 255, .7)',
borderColor: '#a18eff',
borderColor: '#E2DCFF',
pointHoverBackgroundColor: '#FFFFFF',
pointBorderColor: '#a18eff',
pointHoverBorderWidth: 4,
radius: xAxisDateLabels.length === 1 ? 10 : 0,
hoverRadius: 10,
hitRadius: 8,
order: 0,
pointBorderColor: '#E2DCFF',
pointHoverBorderWidth: 3,
hoverRadius: 8,
hitRadius: 3,
pointRadius: 2,
pointBorderWidth: 1,
pointBackgroundColor: '#FFFFFF',
order: 1,
}],
};
});

View File

@ -51,13 +51,15 @@ const chartData = computed((): ChartData => {
data,
fill: true,
backgroundColor: '#E6EDF7',
borderColor: '#D7E8FF',
borderColor: '#537CFF',
pointHoverBackgroundColor: '#FFFFFF',
pointBorderColor: '#003DC1',
pointHoverBorderWidth: 4,
radius: xAxisDateLabels.length === 1 ? 10 : 0,
hoverRadius: 10,
hitRadius: 8,
pointBorderColor: '#537CFF',
pointHoverBorderWidth: 3,
hoverRadius: 8,
hitRadius: 3,
pointRadius: 2,
pointBorderWidth: 1,
pointBackgroundColor: '#FFFFFF',
}],
};
});