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

web/satellite/vuetify-poc: tiny changes for project dashboard

Browse Source 
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
This commit is contained in:
Vitalii 2023-10-09 18:03:25 +03:00 committed by Vitalii Shpital
parent b6b9cccb72
commit 0db898b0a8
3 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -599,7 +599,7 @@ onBeforeUnmount((): void => {
width: 10px;
height: 10px;
border-radius: 2px;
background: var(--c-purple-3);
background: #929fb1;
}
&__allocated-label {

4
web/satellite/src/types/chart.ts
View File

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

12
web/satellite/vuetify-poc/src/views/Dashboard.vue
View File

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