Fix usage graph not exceeding 100%

By using `toFixed` we were rounding the percentages which could
lead to undesired behaviour where the accumulated percentages were
above 100%.

We are now not rounding the numbers anymore and use `flex` which
accepts floating pointing numbers.

ee/app/assets/javascripts/storage_counter/components/usage_graph.vue

@@ -31,31 +31,31 @@ export default {
       return [
         {
           name: s__('UsageQuota|Repositories'),
-          style: this.usageStyle(this.sizePercentage(repositorySize)),
+          style: this.usageStyle(this.barRatio(repositorySize)),
           class: 'gl-bg-data-viz-blue-500',
           size: repositorySize,
         },
         {
           name: s__('UsageQuota|LFS Objects'),
-          style: this.usageStyle(this.sizePercentage(lfsObjectsSize)),
+          style: this.usageStyle(this.barRatio(lfsObjectsSize)),
           class: 'gl-bg-data-viz-orange-600',
           size: lfsObjectsSize,
         },
         {
           name: s__('UsageQuota|Packages'),
-          style: this.usageStyle(this.sizePercentage(packagesSize)),
+          style: this.usageStyle(this.barRatio(packagesSize)),
           class: 'gl-bg-data-viz-aqua-500',
           size: packagesSize,
         },
         {
           name: s__('UsageQuota|Build Artifacts'),
-          style: this.usageStyle(this.sizePercentage(buildArtifactsSize)),
+          style: this.usageStyle(this.barRatio(buildArtifactsSize)),
           class: 'gl-bg-data-viz-green-600',
           size: buildArtifactsSize,
         },
         {
           name: s__('UsageQuota|Wikis'),
-          style: this.usageStyle(this.sizePercentage(wikiSize)),
+          style: this.usageStyle(this.barRatio(wikiSize)),
           class: 'gl-bg-data-viz-magenta-500',
           size: wikiSize,
         },
@@ -68,24 +68,24 @@ export default {
     formatSize(size) {
       return numberToHumanSize(size);
     },
-    usageStyle(percentage) {
-      return { width: `${percentage.toFixed()}%` };
+    usageStyle(ratio) {
+      return { flex: ratio };
     },
-    sizePercentage(size) {
+    barRatio(size) {
       let max = this.rootStorageStatistics.storageSize;
 
       if (this.limit !== 0 && max <= this.limit) {
         max = this.limit;
       }
 
-      return (size / max) * 100;
+      return size / max;
     },
   },
 };
 </script>
 <template>
   <div v-if="storageTypes" class="gl-display-flex gl-flex-direction-column w-100">
-    <div class="gl-h-6 my-3 gl-bg-gray-50 gl-rounded-base">
+    <div class="gl-h-6 gl-my-5 gl-bg-gray-50 gl-rounded-base gl-display-flex">
       <div
         v-for="storageType in storageTypes"
         :key="storageType.name"

ee/changelogs/unreleased/nicolas-fix-usage-graph-overflow.yml

+---
+title: Fix usage graph not exceeding 100%
+merge_request: 35758
+author:
+type: fixed

ee/spec/frontend/storage_counter/components/usage_graph_spec.js

@@ -16,7 +16,7 @@ function mountComponent({ rootStorageStatistics, limit }) {
 function findStorageTypeUsagesSerialized() {
   return wrapper
     .findAll('[data-testid="storage-type-usage"]')
-    .wrappers.map(wp => wp.element.style.width);
+    .wrappers.map(wp => wp.element.style.flex);
 }
 
 describe('Storage Counter usage graph component', () => {
@@ -93,8 +93,14 @@ describe('Storage Counter usage graph component', () => {
       mountComponent(data);
     });
 
-    it('sets correct width values', () => {
-      expect(findStorageTypeUsagesSerialized()).toStrictEqual(['33%', '27%', '20%', '13%', '7%']);
+    it('sets correct flex values', () => {
+      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
+        '0.3333333333333333',
+        '0.26666666666666666',
+        '0.2',
+        '0.13333333333333333',
+        '0.06666666666666667',
+      ]);
     });
   });
 
@@ -105,7 +111,13 @@ describe('Storage Counter usage graph component', () => {
     });
 
     it('it does render correclty', () => {
-      expect(findStorageTypeUsagesSerialized()).toStrictEqual(['33%', '27%', '20%', '13%', '7%']);
+      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
+        '0.3333333333333333',
+        '0.26666666666666666',
+        '0.2',
+        '0.13333333333333333',
+        '0.06666666666666667',
+      ]);
     });
   });
 });