Commit 7dabb48e authored by Phil Hughes's avatar Phil Hughes

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
parents 1c24eafb 32dffd46
...@@ -541,6 +541,26 @@ export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => { ...@@ -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 = window.gl || {};
window.gl.utils = { window.gl.utils = {
...(window.gl.utils || {}), ...(window.gl.utils || {}),
......
<script> <script>
import { roundOffFloat } from '~/lib/utils/common_utils';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
export default { export default {
...@@ -70,7 +71,7 @@ export default { ...@@ -70,7 +71,7 @@ export default {
}, },
methods: { methods: {
getPercent(count) { getPercent(count) {
return Math.ceil((count / this.totalCount) * 100); return roundOffFloat((count / this.totalCount) * 100, 1);
}, },
barStyle(percent) { barStyle(percent) {
return `width: ${percent}%;`; return `width: ${percent}%;`;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.status-neutral, .status-neutral,
.status-red, { .status-red, {
height: 100%; height: 100%;
min-width: 30px; min-width: 40px;
padding: 0 5px; padding: 0 5px;
font-size: $tooltip-font-size; font-size: $tooltip-font-size;
font-weight: normal; font-weight: normal;
......
---
title: Show decimal place up to single digit in Stacked Progress Bar
merge_request: 20776
author:
type: changed
...@@ -627,4 +627,23 @@ describe('common_utils', () => { ...@@ -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);
});
});
}); });
...@@ -10,9 +10,9 @@ const createComponent = (config) => { ...@@ -10,9 +10,9 @@ const createComponent = (config) => {
successLabel: 'Synced', successLabel: 'Synced',
failureLabel: 'Failed', failureLabel: 'Failed',
neutralLabel: 'Out of sync', neutralLabel: 'Out of sync',
successCount: 10, successCount: 25,
failureCount: 5, failureCount: 10,
totalCount: 20, totalCount: 5000,
}, config); }, config);
return mountComponent(Component, defaultConfig); return mountComponent(Component, defaultConfig);
...@@ -32,7 +32,7 @@ describe('StackedProgressBarComponent', () => { ...@@ -32,7 +32,7 @@ describe('StackedProgressBarComponent', () => {
describe('computed', () => { describe('computed', () => {
describe('neutralCount', () => { describe('neutralCount', () => {
it('returns neutralCount based on totalCount, successCount and failureCount', () => { 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', () => { ...@@ -40,7 +40,11 @@ describe('StackedProgressBarComponent', () => {
describe('methods', () => { describe('methods', () => {
describe('getPercent', () => { describe('getPercent', () => {
it('returns percentage from provided count based on `totalCount`', () => { 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);
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment