From 1712e69f0c101e38d662d2f3b0b32ecdb05ddb8d Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Wed, 21 Jun 2023 14:44:53 +0300
Subject: [PATCH] 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
---
 .../project/dashboard/ProjectDashboard.vue     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
index 2f92b69b1..729e192d7 100644
--- a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
+++ b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
@@ -52,6 +52,7 @@
                 </div>
                 <VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
                 <template v-else>
+                    <h2 class="project-dashboard__charts__container__dimension">{{ getDimension(storageUsage) }}</h2>
                     <StorageChart
                         :width="chartWidth"
                         :height="170"
@@ -91,6 +92,9 @@
                 </div>
                 <VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
                 <template v-else>
+                    <h2 class="project-dashboard__charts__container__dimension">
+                        {{ getDimension([...settledBandwidthUsage, ...allocatedBandwidthUsage]) }}
+                    </h2>
                     <BandwidthChart
                         :width="chartWidth"
                         :height="170"
@@ -386,6 +390,14 @@ function recalculateChartWidth(): void {
     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.
  */
@@ -684,6 +696,12 @@ onBeforeUnmount((): void => {
                     }
                 }
 
+                &__dimension {
+                    font-family: 'font_medium', sans-serif;
+                    font-size: 14px;
+                    margin: 10px 0 0 12px;
+                }
+
                 &__loader {
                     margin-bottom: 15px;
                 }