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

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"

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">

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-title="`${limits.segmentUsed.toLocaleString()} Used`"
-            :used-info="`Segment limit: ${limits.segmentLimit}`"
+            :used-info="`Segment limit: ${limits.segmentLimit.toLocaleString()}`"
-            :available-title="`${segmentsAvailable} Available`"
+            :available-title="`${segmentsAvailable.toLocaleString()} Available`"
             :action-title="usageActionTitle(segmentUsed, true)"
             :on-action="startUpgradeFlow"
             :is-loading="isLoading"

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>