kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use roundOffFloat method to show decimal places in progressbar

Browse source
This commit is contained in:
Kushal Pandya 2018-07-23 15:10:47 +05:30
parent b487881494
commit d6ec3ac6ba
3 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
View file

@ -1,4 +1,5 @@
<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 {
}, },
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}%;`;

2
app/assets/stylesheets/framework/stacked_progress_bar.scss
View file

@ -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;

14
spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
View file

@ -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', () => {
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', () => {
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);
}); });
}); });