Merge branch 'kp-stacked-progress-bar-decimal-places' into 'master'

Show decimal place up to single digit in Stacked Progress Bar

Closes gitlab-ee#6028

See merge request gitlab-org/gitlab-ce!20776

6 files changed, 56 insertions, 7 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 6b7550efff8..2f3dd6f6cbc 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -541,6 +541,26 @@ export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
   });
 };
 
+/**
+ * Method to round of values with decimal places
+ * with provided precision.
+ *
+ * Taken from https://stackoverflow.com/a/7343013/414749
+ *
+ * Eg; roundOffFloat(3.141592, 3) = 3.142
+ *
+ * Refer to spec/javascripts/lib/utils/common_utils_spec.js for
+ * more supported examples.
+ *
+ * @param {Float} number
+ * @param {Number} precision
+ */
+export const roundOffFloat = (number, precision = 0) => {
+  // eslint-disable-next-line no-restricted-properties
+  const multiplier = Math.pow(10, precision);
+  return Math.round(number * multiplier) / multiplier;
+};
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index b1c2df54ef6..f44d361c47e 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -1,4 +1,5 @@
 <script>
+import { roundOffFloat } from '~/lib/utils/common_utils';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -70,7 +71,7 @@ export default {
   },
   methods: {
     getPercent(count) {
-      return Math.ceil((count / this.totalCount) * 100);
+      return roundOffFloat((count / this.totalCount) * 100, 1);
     },
     barStyle(percent) {
       return `width: ${percent}%;`;
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index 528ba53a48b..29a2d5881f7 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -10,7 +10,7 @@
   .status-neutral,
   .status-red, {
     height: 100%;
-    min-width: 30px;
+    min-width: 40px;
     padding: 0 5px;
     font-size: $tooltip-font-size;
     font-weight: normal;
diff --git a/changelogs/unreleased/kp-stacked-progress-bar-decimal-places.yml b/changelogs/unreleased/kp-stacked-progress-bar-decimal-places.yml
new file mode 100644
index 00000000000..a2fca4c5b91
--- /dev/null
+++ b/changelogs/unreleased/kp-stacked-progress-bar-decimal-places.yml
@@ -0,0 +1,5 @@
+---
+title: Show decimal place up to single digit in Stacked Progress Bar
+merge_request: 20776
+author:
+type: changed
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 41ff59949e5..71b26a315af 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -627,4 +627,23 @@ describe('common_utils', () => {
       });
     });
   });
+
+  describe('roundOffFloat', () => {
+    it('Rounds off decimal places of a float number with provided precision', () => {
+      expect(commonUtils.roundOffFloat(3.141592, 3)).toBe(3.142);
+    });
+
+    it('Rounds off a float number to a whole number when provided precision is zero', () => {
+      expect(commonUtils.roundOffFloat(3.141592, 0)).toBe(3);
+      expect(commonUtils.roundOffFloat(3.5, 0)).toBe(4);
+    });
+
+    it('Rounds off float number to nearest 0, 10, 100, 1000 and so on when provided precision is below 0', () => {
+      expect(commonUtils.roundOffFloat(34567.14159, -1)).toBe(34570);
+      expect(commonUtils.roundOffFloat(34567.14159, -2)).toBe(34600);
+      expect(commonUtils.roundOffFloat(34567.14159, -3)).toBe(35000);
+      expect(commonUtils.roundOffFloat(34567.14159, -4)).toBe(30000);
+      expect(commonUtils.roundOffFloat(34567.14159, -5)).toBe(0);
+    });
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
index de3bf667fb3..076d940961d 100644
--- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
@@ -10,9 +10,9 @@ const createComponent = (config) => {
     successLabel: 'Synced',
     failureLabel: 'Failed',
     neutralLabel: 'Out of sync',
-    successCount: 10,
-    failureCount: 5,
-    totalCount: 20,
+    successCount: 25,
+    failureCount: 10,
+    totalCount: 5000,
   }, config);
 
   return mountComponent(Component, defaultConfig);
@@ -32,7 +32,7 @@ describe('StackedProgressBarComponent', () => {
   describe('computed', () => {
     describe('neutralCount', () => {
       it('returns neutralCount based on totalCount, successCount and failureCount', () => {
-        expect(vm.neutralCount).toBe(5); // 20 - 10 - 5
+        expect(vm.neutralCount).toBe(4965); // 5000 - 25 - 10
       });
     });
   });
@@ -40,7 +40,11 @@ describe('StackedProgressBarComponent', () => {
   describe('methods', () => {
     describe('getPercent', () => {
       it('returns percentage from provided count based on `totalCount`', () => {
-        expect(vm.getPercent(10)).toBe(50);
+        expect(vm.getPercent(500)).toBe(10);
+      });
+
+      it('returns percentage with decimal place from provided count based on `totalCount`', () => {
+        expect(vm.getPercent(10)).toBe(0.2);
       });
     });