JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: add data dimension label to charts on project dashboard

Browse Source 
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:
Vitalii 2023-06-21 14:44:53 +03:00 committed by Storj Robot
parent 05f92fed11
commit 1712e69f0c
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -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;
} }