Skip to content

Commit 7b3fc6d

Browse files
asvaeasvae
committed
fix: progress bars issues
1 parent e295fe0 commit 7b3fc6d

File tree

7 files changed

+188
-87
lines changed

7 files changed

+188
-87
lines changed

‎src/components/statistics/progress-bars/Widgets/StandardBars.vue‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,52 @@
22
<vuestic-widget headerText="Progress Bars">
33
<div class="va-row">
44
<div class="flex sm4 md4">
5-
{{'progressBars.basic' | translate}}
6-
<vuestic-progress-bar :value="100" :animated="true"/>
5+
{{ $t('progressBars.basic') }}
6+
<vuestic-progress-bar :value="value" animated/>
77
</div>
88
<div class="flex sm4 md4">
9-
{{'progressBars.thin' | translate}}
10-
<vuestic-progress-bar :value="100" size="thin" :animated="true"/>
9+
{{ $t('progressBars.thin') }}
10+
<vuestic-progress-bar :value="value" size="thin" animated/>
1111
</div>
1212
<div class="flex sm4 md4">
13-
{{'progressBars.thick' | translate}}
14-
<vuestic-progress-bar :value="100" size="thick" :animated="true"/>
13+
{{ $t('progressBars.thick') }}
14+
<vuestic-progress-bar
15+
:value="value"
16+
size="thick"
17+
animated
18+
/>
1519
</div>
1620
</div>
1721
<div class="va-row">
1822
<div class="flex sm4 md4">
19-
{{'progressBars.basicVertical' | translate}}
23+
{{ $t('progressBars.basicVertical') }}
2024
<div class="pb-container">
21-
<vuestic-progress-bar :value="100" type="vertical" :animated="true"/>
25+
<vuestic-progress-bar
26+
:value="value"
27+
type="vertical"
28+
animated
29+
/>
2230
</div>
2331
</div>
2432
<div class="flex sm4 md4">
25-
{{'progressBars.thinVertical' | translate}}
33+
{{ $t('progressBars.thinVertical') }}
2634
<div class="pb-container">
27-
<vuestic-progress-bar :value="100" size="thin" type="vertical"
28-
:animated="true"/>
35+
<vuestic-progress-bar
36+
:value="value"
37+
size="thin"
38+
type="vertical"
39+
animated
40+
/>
2941
</div>
3042
</div>
3143
<div class="flex sm4 md4">
32-
{{'progressBars.circle' | translate}}
44+
{{ $t('progressBars.circle') }}
3345
<div class="pb-container">
34-
<vuestic-progress-bar :value="100" type="circle" :animated="true"/>
46+
<vuestic-progress-bar
47+
:value="value"
48+
type="circle"
49+
animated
50+
/>
3551
</div>
3652
</div>
3753
</div>
@@ -41,6 +57,14 @@
4157
<script>
4258
export default {
4359
name: 'standard-bars',
60+
data () {
61+
return {
62+
value: 0,
63+
}
64+
},
65+
mounted () {
66+
this.value = 100
67+
}
4468
}
4569
</script>
4670

‎src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/CircleProgressBar.demo.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="demo-container">
3+
<div class="demo-container__item">
4+
<circle-bar/>
5+
<circle-bar
6+
:value="value"
7+
/>
8+
</div>
9+
10+
<div class="demo-container__item">
11+
Disabled
12+
<circle-bar
13+
:value="value"
14+
disabled
15+
/>
16+
</div>
17+
18+
<div class="demo-container__item">
19+
Start animated
20+
<circle-bar
21+
:value="value"
22+
start-animated
23+
/>
24+
</div>
25+
26+
<div class="demo-container__item">
27+
No animation
28+
<circle-bar
29+
:value="value"
30+
no-animation
31+
/>
32+
</div>
33+
34+
<div class="demo-container__item">
35+
<circle-bar
36+
:value="value"
37+
text="some long text"
38+
background-theme="White"
39+
start-animated
40+
/>
41+
</div>
42+
43+
<div class="demo-container__item">
44+
{{ value }}
45+
<button @click="value -= 10">-10</button>
46+
<button @click="value += 10">+10</button>
47+
<button @click="value -= 100">-100</button>
48+
<button @click="value += 100">+100</button>
49+
</div>
50+
</div>
51+
</template>
52+
53+
<script>
54+
55+
import CircleBar from './../progress-types/CircleProgressBar'
56+
57+
export default {
58+
components: {
59+
CircleBar,
60+
},
61+
data () {
62+
return {
63+
value: 35
64+
}
65+
},
66+
}
67+
</script>

‎src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/CircleProgressBar.vue‎

Lines changed: 74 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
2-
<div class="circle-bar circle-bar__progress-bar" :class="circleBarType"
3-
:style="'background-image: ' + backgroundImage">
2+
<div
3+
class="circle-bar circle-bar__progress-bar"
4+
:class="computedClass"
5+
:style="'background-image: ' + backgroundImage"
6+
>
47
<div class="circle-bar__overlay" :style="circleBarStyle">
58
<span v-if="!text">{{value + '%'}}</span>
69
<span v-else>{{text}}</span>
@@ -15,6 +18,12 @@ import {
1518
} from './../../vuestic-color-picker/VuesticTheme'
1619
1720
export default {
21+
data () {
22+
return {
23+
animatedValue: 0,
24+
animateValueInterval: null
25+
}
26+
},
1827
props: {
1928
value: {
2029
type: Number,
@@ -30,53 +39,90 @@ export default {
3039
},
3140
backgroundTheme: {
3241
type: String,
42+
default: 'White',
3343
},
3444
disabled: {
3545
type: Boolean,
3646
default: false,
3747
},
38-
animated: {
48+
noAnimation: {
49+
type: Boolean,
50+
default: false,
51+
},
52+
startAnimated: {
3953
type: Boolean,
4054
default: false,
4155
},
56+
// Time it would take for animation to go from 0 to 100.
57+
animationInterval: {
58+
type: Number,
59+
default: 2000,
60+
}
4261
},
43-
mounted () {
44-
this.animateValue()
62+
created () {
63+
if (!this.startAnimated) {
64+
this.setAnimatedValue(Math.round(this.value))
65+
}
4566
},
46-
methods: {
47-
animateValue () {
48-
let valueMsecs = this.valueAnimationInterval / 100
49-
let delta = Math.sign(this.value - this.transformedValue)
50-
let valueInterval = setInterval(() => {
51-
if (this.transformedValue === this.value) {
52-
clearInterval(valueInterval)
53-
} else {
54-
this.transformedValue += delta
67+
watch: {
68+
value: {
69+
immediate: true,
70+
handler () {
71+
// Only one such interval is meant to be on.
72+
if (this.animateValueInterval) {
73+
return
5574
}
56-
}, valueMsecs)
57-
},
75+
// 100 ms is not exactly no animation, but close enough.
76+
// TODO Split value tracker into separate class. Add some tests.
77+
const animationInterval = this.noAnimation ? 100 : this.animationInterval
78+
this.animateValueInterval = setInterval(() => {
79+
if (this.value === this.animatedValue) {
80+
clearInterval(this.animateValueInterval)
81+
this.animateValueInterval = null
82+
return
83+
}
84+
const deltaValue = this.value < this.animatedValue ? -1 : 1
85+
this.setAnimatedValue(this.animatedValue + deltaValue)
86+
}, animationInterval / 100)
87+
}
88+
}
89+
},
90+
methods: {
91+
setAnimatedValue (value) {
92+
if (value < 0) {
93+
this.animatedValue = 0
94+
return
95+
}
96+
if (value > 100) {
97+
this.animatedValue = 100
98+
return
99+
}
100+
this.animatedValue = value
101+
}
58102
},
59103
computed: {
60104
backgroundImage () {
61-
let result = {}
62105
const theme = colorConfig[VuesticTheme[this.theme]]
106+
const value = this.animatedValue
63107
const backgroundTheme = colorConfig[VuesticTheme[this.backgroundTheme]]
64-
if (this.value < 50) {
65-
let nextDeg = 90 + (3.6 * this.value) + 'deg'
66-
result = `linear-gradient(90deg, ${backgroundTheme} 50%, transparent 50%, transparent), linear-gradient(${nextDeg}, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
108+
109+
if (value < 50) {
110+
const nextDeg = 90 + (3.6 * value) + 'deg'
111+
return `linear-gradient(90deg, ${backgroundTheme} 50%, transparent 50%, transparent), ` +
112+
`linear-gradient(${nextDeg}, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
67113
} else {
68-
let nextDeg = -90 + (3.6 * (this.value - 50)) + 'deg'
69-
result = `linear-gradient(${nextDeg}, ${theme} 50%, transparent 50%, transparent), linear-gradient(270deg, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
114+
const nextDeg = -90 + (3.6 * (value - 50)) + 'deg'
115+
return `linear-gradient(${nextDeg}, ${theme} 50%, transparent 50%, transparent), ` +
116+
`linear-gradient(270deg, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
70117
}
71-
return result
72118
},
73-
circleBarStyle: function () {
119+
circleBarStyle () {
74120
return {
75121
backgroundColor: colorConfig[VuesticTheme[this.backgroundTheme]],
76122
color: colorConfig[VuesticTheme[this.theme]],
77123
}
78124
},
79-
circleBarType: function () {
125+
computedClass () {
80126
return {
81127
'circle-bar--disabled': this.disabled,
82128
}
@@ -88,7 +134,7 @@ export default {
88134
<style lang="scss">
89135
.circle-bar {
90136
$step: 1;
91-
$loops: round(100 / $step);
137+
$loops: 100 / $step;
92138
$increment: 360 / $loops;
93139
$half: round($loops / 2);
94140
@@ -116,9 +162,8 @@ export default {
116162
height: $progress-bar-circle-diameter - 2*$progress-bar-circle-bw;
117163
border-radius: 50%;
118164
border-width: 0;
119-
display: flex;
120-
justify-content: center;
121-
align-items: center;
165+
@include va-flex-center();
166+
text-align: center;
122167
}
123168
124169
& &--disabled {

src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VuesticHorizontalBar.demo.vue renamed to src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.demo.vue

File renamed without changes.

‎src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
22
<div class="horizontal-bar">
3-
<div v-if="size != 'thick'" class="horizontal-bar__value">
3+
<div v-if="size !== 'thick'" class="horizontal-bar__value">
44
<span v-if="!text">{{value + '%'}}</span>
55
<span v-else>{{text}}</span>
66
</div>
77
<div class="progress" :class="horizontalBarType">
8-
<div class="progress-bar horizontal-bar__progress-bar"
9-
:class="horizontalBarAnimation"
10-
:style="horizontalBarStyle">
11-
<span v-if="size == 'thick'" :class="{hidden: value == 0}"
8+
<div
9+
class="progress-bar horizontal-bar__progress-bar"
10+
:class="horizontalBarAnimation"
11+
:style="horizontalBarStyle"
12+
>
13+
<span v-if="size === 'thick'" :class="{hidden: value == 0}"
1214
class="horizontal-bar__value">
1315
<span v-if="!text">{{value + '%'}}</span>
1416
<span v-else>{{text}}</span>
@@ -88,6 +90,7 @@ export default {
8890
8991
.horizontal-bar__value {
9092
text-align: center;
93+
9194
&.hidden {
9295
visibility: hidden;
9396
}
@@ -96,6 +99,7 @@ export default {
9699
&--basic {
97100
border-radius: $progress-bar-width-basic;
98101
height: $progress-bar-width-basic;
102+
99103
.horizontal-bar__progress-bar {
100104
border-radius: inherit;
101105
}
@@ -110,6 +114,7 @@ export default {
110114
border-radius: $progress-bar-width-thick;
111115
height: $progress-bar-width-thick;
112116
margin-top: calc(#{$progress-bar-width-thick} / 2 - .125rem);
117+
113118
.horizontal-bar__progress-bar {
114119
display: flex;
115120
justify-content: center;

src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VuesticVerticalBar.demo.vue renamed to src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.demo.vue

File renamed without changes.

‎src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VuesticCircleBar.demo.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)