From 0db898b0a861cf6ce162081509352a578926153c Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Mon, 9 Oct 2023 18:03:25 +0300
Subject: [PATCH] web/satellite/vuetify-poc: tiny changes for project dashboard

Download card: added 'per month' to Limit value.
Coupon card: replaced 'Limit' label with 'Included free usage'.
Also, fixed chart tooltip positioning.

Issue:
https://github.com/storj/storj/issues/6378

Change-Id: I6a4eb544cecaeabab6856acf6e272784f2a1c802
---
 .../project/dashboard/ProjectDashboard.vue           |  2 +-
 web/satellite/src/types/chart.ts                     |  4 ++--
 web/satellite/vuetify-poc/src/views/Dashboard.vue    | 12 +++++-------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
index 5cd48ba7cda7..491216090b4d 100644
--- a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
+++ b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
@@ -599,7 +599,7 @@ onBeforeUnmount((): void => {
                             width: 10px;
                             height: 10px;
                             border-radius: 2px;
-                            background: var(--c-purple-3);
+                            background: #929fb1;
                         }
 
                         &__allocated-label {
diff --git a/web/satellite/src/types/chart.ts b/web/satellite/src/types/chart.ts
index d0f68b739f54..e7c63f124537 100644
--- a/web/satellite/src/types/chart.ts
+++ b/web/satellite/src/types/chart.ts
@@ -37,7 +37,7 @@ class Styling {
         public element: HTMLElement,
         public topPosition: number,
         public leftPosition: number,
-        public chartPosition: ClientRect,
+        public chartPosition: DOMRect,
     ) {}
 }
 
@@ -94,7 +94,7 @@ export class Tooltip {
         elemStyling.element.style.opacity = StylingConstants.tooltipOpacity;
         elemStyling.element.style.position = StylingConstants.tooltipPosition;
         elemStyling.element.style.left = `${elemStyling.chartPosition.left + elemStyling.tooltipModel.caretX - elemStyling.leftPosition}px`;
-        elemStyling.element.style.top = `${elemStyling.chartPosition.top + window.pageYOffset + elemStyling.tooltipModel.caretY - elemStyling.topPosition}px`;
+        elemStyling.element.style.top = `${elemStyling.chartPosition.top + window.scrollY + elemStyling.tooltipModel.caretY - elemStyling.topPosition}px`;
     }
 }
 
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index 1dc430f78d22..e3f7bafc2010 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -79,7 +79,7 @@
                     title="Download"
                     :progress="egressUsedPercent"
                     :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`"
-                    :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)}`"
+                    :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)} per month`"
                     :available="`${usedLimitFormatted(availableEgress)} Available`"
                     cta="Need more?"
                     @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
@@ -89,7 +89,7 @@
 
         <v-row class="d-flex align-center justify-center mt-2">
             <v-col cols="12" md="6">
-                <v-card ref="chartContainer" variant="flat" :border="true" rounded="xlg">
+                <v-card ref="chartContainer" class="pb-4" variant="flat" :border="true" rounded="xlg">
                     <template #title>
                         <v-card-title class="d-flex align-center">
                             <IconCloud class="mr-2" width="16" height="16" />
@@ -103,12 +103,11 @@
                         :data="storageUsage"
                         :since="chartsSinceDate"
                         :before="chartsBeforeDate"
-                        class="pr-4 pb-4"
                     />
                 </v-card>
             </v-col>
             <v-col cols="12" md="6">
-                <v-card variant="flat" :border="true" rounded="xlg">
+                <v-card class="pb-4" variant="flat" :border="true" rounded="xlg">
                     <template #title>
                         <v-card-title class="d-flex align-center">
                             <IconArrowDown class="mr-2" width="16" height="16" />
@@ -122,7 +121,6 @@
                         :data="allocatedBandwidthUsage"
                         :since="chartsSinceDate"
                         :before="chartsBeforeDate"
-                        class="pr-4 pb-4"
                     />
                 </v-card>
             </v-col>
@@ -148,7 +146,7 @@
                     :title="isFreeTierCoupon ? 'Free Usage' : 'Coupon'"
                     :progress="couponProgress"
                     :used="`${couponProgress}% Used`"
-                    :limit="`Limit: ${couponValue}`"
+                    :limit="`Included free usage: ${couponValue}`"
                     :available="`${couponRemainingPercent}% Available`"
                     :cta="isFreeTierCoupon ? 'Learn more' : 'View Coupons'"
                     @cta-click="onCouponCTAClicked"
@@ -415,7 +413,7 @@ const promptForPassphrase = computed((): boolean => {
  * Used container size recalculation for charts resizing.
  */
 function recalculateChartWidth(): void {
-    chartWidth.value = chartContainer.value?.$el.getBoundingClientRect().width || 0;
+    chartWidth.value = chartContainer.value?.$el.getBoundingClientRect().width - 16 || 0;
 }
 
 /**