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: #6378 Change-Id: I6a4eb544cecaeabab6856acf6e272784f2a1c802
storj · Oct 10, 2023 · 0db898b · 0db898b
1 parent b6b9ccc
commit 0db898b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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;
 }
 
 /**