Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
d6ec3ac6
Commit
d6ec3ac6
authored
Jul 23, 2018
by
Kushal Pandya
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Use `roundOffFloat` method to show decimal places in progressbar
parent
b4878814
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
12 additions
and
7 deletions
+12
-7
app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
...avascripts/vue_shared/components/stacked_progress_bar.vue
+2
-1
app/assets/stylesheets/framework/stacked_progress_bar.scss
app/assets/stylesheets/framework/stacked_progress_bar.scss
+1
-1
spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
...cripts/vue_shared/components/stacked_progress_bar_spec.js
+9
-5
No files found.
app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
View file @
d6ec3ac6
<
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
}
%;`
;
...
...
app/assets/stylesheets/framework/stacked_progress_bar.scss
View file @
d6ec3ac6
...
@@ -10,7 +10,7 @@
...
@@ -10,7 +10,7 @@
.status-neutral
,
.status-neutral
,
.status-red
,
{
.status-red
,
{
height
:
100%
;
height
:
100%
;
min-width
:
3
0px
;
min-width
:
4
0px
;
padding
:
0
5px
;
padding
:
0
5px
;
font-size
:
$tooltip-font-size
;
font-size
:
$tooltip-font-size
;
font-weight
:
normal
;
font-weight
:
normal
;
...
...
spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
View file @
d6ec3ac6
...
@@ -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
:
2
0
,
totalCount
:
500
0
,
},
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
);
});
});
});
});
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment