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
This commit is contained in:
commit
7dabb48e9b
|
@ -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 || {}),
|
||||
|
|
|
@ -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}%;`;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
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', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
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) => {
|
|||
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);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue