web/satellite: add data dimension label to charts on project dashboard
Added data dimension label to chart y-axis on project dashboard Issue: https://github.com/storj/storj/issues/5926 Change-Id: I03a3a12211b1a20f76e3a8291f349675956ff598
This commit is contained in:
parent
05f92fed11
commit
1712e69f0c
@ -52,6 +52,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
|
<VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
<h2 class="project-dashboard__charts__container__dimension">{{ getDimension(storageUsage) }}</h2>
|
||||||
<StorageChart
|
<StorageChart
|
||||||
:width="chartWidth"
|
:width="chartWidth"
|
||||||
:height="170"
|
:height="170"
|
||||||
@ -91,6 +92,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
|
<VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
<h2 class="project-dashboard__charts__container__dimension">
|
||||||
|
{{ getDimension([...settledBandwidthUsage, ...allocatedBandwidthUsage]) }}
|
||||||
|
</h2>
|
||||||
<BandwidthChart
|
<BandwidthChart
|
||||||
:width="chartWidth"
|
:width="chartWidth"
|
||||||
:height="170"
|
:height="170"
|
||||||
@ -386,6 +390,14 @@ function recalculateChartWidth(): void {
|
|||||||
chartWidth.value = chartContainer.value?.getBoundingClientRect().width || 0;
|
chartWidth.value = chartContainer.value?.getBoundingClientRect().width || 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns dimension for given data values.
|
||||||
|
*/
|
||||||
|
function getDimension(dataStamps: DataStamp[]): Dimensions {
|
||||||
|
const maxValue = Math.max(...dataStamps.map(s => s.value));
|
||||||
|
return new Size(maxValue).label;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds on upgrade button click logic.
|
* Holds on upgrade button click logic.
|
||||||
*/
|
*/
|
||||||
@ -684,6 +696,12 @@ onBeforeUnmount((): void => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__dimension {
|
||||||
|
font-family: 'font_medium', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 10px 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
&__loader {
|
&__loader {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user