From 2a4c1fa41e2b63b3df0509e35e996f8a0273ccf3 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Fri, 9 Jun 2023 15:55:51 +0300
Subject: [PATCH] web/satellite: add delimiters to large numbers on project
 dashboard

Added delimiters to large numbers on project dashboard based on user location.
So in US and EU there should be different strings.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

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

Change-Id: I94a0a703c2b301de422c5103e71becfbf5aa7e79
---
 .../src/components/modals/ChangeProjectLimitModal.vue       | 4 +++-
 .../project/dashboard/DashboardFunctionalHeader.vue         | 4 ++--
 .../src/components/project/dashboard/LimitsArea.vue         | 6 +++---
 .../src/components/project/dashboard/ProjectDashboard.vue   | 6 +++---
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/satellite/src/components/modals/ChangeProjectLimitModal.vue b/web/satellite/src/components/modals/ChangeProjectLimitModal.vue
index 076960824..29bd44ef5 100644
--- a/web/satellite/src/components/modals/ChangeProjectLimitModal.vue
+++ b/web/satellite/src/components/modals/ChangeProjectLimitModal.vue
@@ -60,7 +60,9 @@
                     <div class="modal__functional__range">
                         <div class="modal__functional__range__labels">
                             <p>0 {{ activeMeasurement }}</p>
-                            <p>{{ isBandwidthUpdating ? paidBandwidthLimit : paidStorageLimit }} {{ activeMeasurement }}</p>
+                            <p>
+                                {{ isBandwidthUpdating ? paidBandwidthLimit.toLocaleString() : paidStorageLimit.toLocaleString() }} {{ activeMeasurement }}
+                            </p>
                         </div>
                         <input
                             ref="rangeInput"
diff --git a/web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue b/web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
index 54800d99d..33feb56cb 100644
--- a/web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
+++ b/web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
@@ -37,9 +37,9 @@
             <template v-else>
                 <p class="dashboard-header__subtitle" aria-roledescription="with-usage-title">
                     Your
-                    <span class="dashboard-header__subtitle__value">{{ limits.objectCount }} objects</span>
+                    <span class="dashboard-header__subtitle__value">{{ limits.objectCount.toLocaleString() }} objects</span>
                     are stored <br>in
-                    <span class="dashboard-header__subtitle__value">{{ limits.segmentCount }} segments</span>
+                    <span class="dashboard-header__subtitle__value">{{ limits.segmentCount.toLocaleString() }} segments</span>
                     around the world
                 </p>
                 <p class="dashboard-header__limits">
diff --git a/web/satellite/src/components/project/dashboard/LimitsArea.vue b/web/satellite/src/components/project/dashboard/LimitsArea.vue
index c319d4047..8aec04520 100644
--- a/web/satellite/src/components/project/dashboard/LimitsArea.vue
+++ b/web/satellite/src/components/project/dashboard/LimitsArea.vue
@@ -34,9 +34,9 @@
             title="Segments"
             color="#003dc1"
             :used-value="segmentUsed"
-            :used-title="`${limits.segmentUsed} Used`"
-            :used-info="`Segment limit: ${limits.segmentLimit}`"
-            :available-title="`${segmentsAvailable} Available`"
+            :used-title="`${limits.segmentUsed.toLocaleString()} Used`"
+            :used-info="`Segment limit: ${limits.segmentLimit.toLocaleString()}`"
+            :available-title="`${segmentsAvailable.toLocaleString()} Available`"
             :action-title="usageActionTitle(segmentUsed, true)"
             :on-action="startUpgradeFlow"
             :is-loading="isLoading"
diff --git a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
index 340599c87..2f92b69b1 100644
--- a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
+++ b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
@@ -108,7 +108,7 @@
                 :icon="BucketsIcon"
                 title="Buckets"
                 :subtitle="`Last update ${now}`"
-                :value="bucketsCount.toString()"
+                :value="bucketsCount.toLocaleString()"
                 :is-data-fetching="areBucketsFetching"
             >
                 <template #side-value>
@@ -121,7 +121,7 @@
                 :icon="GrantsIcon"
                 title="Access Grants"
                 :subtitle="`Last update ${now}`"
-                :value="accessGrantsCount.toString()"
+                :value="accessGrantsCount.toLocaleString()"
                 :is-data-fetching="isDataFetching"
             >
                 <template #side-value>
@@ -134,7 +134,7 @@
                 :icon="TeamIcon"
                 title="Users"
                 :subtitle="`Last update ${now}`"
-                :value="teamSize.toString()"
+                :value="teamSize.toLocaleString()"
                 :is-data-fetching="isDataFetching"
             >
                 <template #side-value>