fix: progress bars issues

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

@@ -2,36 +2,52 @@
   <vuestic-widget headerText="Progress Bars">
     <div class="va-row">
       <div class="flex sm4 md4">
-        {{'progressBars.basic' | translate}}
-        <vuestic-progress-bar :value="100" :animated="true"/>
+        {{ $t('progressBars.basic') }}
+        <vuestic-progress-bar :value="value" animated/>
       </div>
       <div class="flex sm4 md4">
-        {{'progressBars.thin' | translate}}
-        <vuestic-progress-bar :value="100" size="thin" :animated="true"/>
+        {{ $t('progressBars.thin') }}
+        <vuestic-progress-bar :value="value" size="thin" animated/>
       </div>
       <div class="flex sm4 md4">
-        {{'progressBars.thick' | translate}}
-        <vuestic-progress-bar :value="100" size="thick" :animated="true"/>
+        {{ $t('progressBars.thick') }}
+        <vuestic-progress-bar
+          :value="value"
+          size="thick"
+          animated
+        />
       </div>
     </div>
     <div class="va-row">
       <div class="flex sm4 md4">
-        {{'progressBars.basicVertical' | translate}}
+        {{ $t('progressBars.basicVertical') }}
         <div class="pb-container">
-          <vuestic-progress-bar :value="100" type="vertical" :animated="true"/>
+          <vuestic-progress-bar
+            :value="value"
+            type="vertical"
+            animated
+          />
         </div>
       </div>
       <div class="flex sm4 md4">
-        {{'progressBars.thinVertical' | translate}}
+        {{ $t('progressBars.thinVertical') }}
         <div class="pb-container">
-          <vuestic-progress-bar :value="100" size="thin" type="vertical"
-                                :animated="true"/>
+          <vuestic-progress-bar
+            :value="value"
+            size="thin"
+            type="vertical"
+            animated
+          />
         </div>
       </div>
       <div class="flex sm4 md4">
-        {{'progressBars.circle' | translate}}
+        {{ $t('progressBars.circle') }}
         <div class="pb-container">
-          <vuestic-progress-bar :value="100" type="circle" :animated="true"/>
+          <vuestic-progress-bar
+            :value="value"
+            type="circle"
+            animated
+          />
         </div>
       </div>
     </div>
@@ -41,6 +57,14 @@
 <script>
 export default {
   name: 'standard-bars',
+  data () {
+    return {
+      value: 0,
+    }
+  },
+  mounted () {
+    this.value = 100
+  }
 }
 </script>
 

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <circle-bar/>
+      <circle-bar
+        :value="value"
+      />
+    </div>
+
+    <div class="demo-container__item">
+      Disabled
+      <circle-bar
+        :value="value"
+        disabled
+      />
+    </div>
+
+    <div class="demo-container__item">
+      Start animated
+      <circle-bar
+        :value="value"
+        start-animated
+      />
+    </div>
+
+    <div class="demo-container__item">
+      No animation
+      <circle-bar
+        :value="value"
+        no-animation
+      />
+    </div>
+
+    <div class="demo-container__item">
+      <circle-bar
+        :value="value"
+        text="some long text"
+        background-theme="White"
+        start-animated
+      />
+    </div>
+
+    <div class="demo-container__item">
+      {{ value }}
+      <button @click="value -= 10">-10</button>
+      <button @click="value += 10">+10</button>
+      <button @click="value -= 100">-100</button>
+      <button @click="value += 100">+100</button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import CircleBar from './../progress-types/CircleProgressBar'
+
+export default {
+  components: {
+    CircleBar,
+  },
+  data () {
+    return {
+      value: 35
+    }
+  },
+}
+</script>

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

@@ -1,6 +1,9 @@
 <template>
-  <div class="circle-bar circle-bar__progress-bar" :class="circleBarType"
-       :style="'background-image: ' + backgroundImage">
+  <div
+    class="circle-bar circle-bar__progress-bar"
+    :class="computedClass"
+    :style="'background-image: ' + backgroundImage"
+  >
     <div class="circle-bar__overlay" :style="circleBarStyle">
       <span v-if="!text">{{value + '%'}}</span>
       <span v-else>{{text}}</span>
@@ -15,6 +18,12 @@ import {
 } from './../../vuestic-color-picker/VuesticTheme'
 
 export default {
+  data () {
+    return {
+      animatedValue: 0,
+      animateValueInterval: null
+    }
+  },
   props: {
     value: {
       type: Number,
@@ -30,53 +39,90 @@ export default {
     },
     backgroundTheme: {
       type: String,
+      default: 'White',
     },
     disabled: {
       type: Boolean,
       default: false,
     },
-    animated: {
+    noAnimation: {
+      type: Boolean,
+      default: false,
+    },
+    startAnimated: {
       type: Boolean,
       default: false,
     },
+    // Time it would take for animation to go from 0 to 100.
+    animationInterval: {
+      type: Number,
+      default: 2000,
+    }
   },
-  mounted () {
-    this.animateValue()
+  created () {
+    if (!this.startAnimated) {
+      this.setAnimatedValue(Math.round(this.value))
+    }
   },
-  methods: {
-    animateValue () {
-      let valueMsecs = this.valueAnimationInterval / 100
-      let delta = Math.sign(this.value - this.transformedValue)
-      let valueInterval = setInterval(() => {
-        if (this.transformedValue === this.value) {
-          clearInterval(valueInterval)
-        } else {
-          this.transformedValue += delta
+  watch: {
+    value: {
+      immediate: true,
+      handler () {
+        // Only one such interval is meant to be on.
+        if (this.animateValueInterval) {
+          return
         }
-      }, valueMsecs)
-    },
+        // 100 ms is not exactly no animation, but close enough.
+        // TODO Split value tracker into separate class. Add some tests.
+        const animationInterval = this.noAnimation ? 100 : this.animationInterval
+        this.animateValueInterval = setInterval(() => {
+          if (this.value === this.animatedValue) {
+            clearInterval(this.animateValueInterval)
+            this.animateValueInterval = null
+            return
+          }
+          const deltaValue = this.value < this.animatedValue ? -1 : 1
+          this.setAnimatedValue(this.animatedValue + deltaValue)
+        }, animationInterval / 100)
+      }
+    }
+  },
+  methods: {
+    setAnimatedValue (value) {
+      if (value < 0) {
+        this.animatedValue = 0
+        return
+      }
+      if (value > 100) {
+        this.animatedValue = 100
+        return
+      }
+      this.animatedValue = value
+    }
   },
   computed: {
     backgroundImage () {
-      let result = {}
       const theme = colorConfig[VuesticTheme[this.theme]]
+      const value = this.animatedValue
       const backgroundTheme = colorConfig[VuesticTheme[this.backgroundTheme]]
-      if (this.value < 50) {
-        let nextDeg = 90 + (3.6 * this.value) + 'deg'
-        result = `linear-gradient(90deg, ${backgroundTheme} 50%, transparent 50%, transparent), linear-gradient(${nextDeg}, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
+
+      if (value < 50) {
+        const nextDeg = 90 + (3.6 * value) + 'deg'
+        return `linear-gradient(90deg, ${backgroundTheme} 50%, transparent 50%, transparent), ` +
+        `linear-gradient(${nextDeg}, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
       } else {
-        let nextDeg = -90 + (3.6 * (this.value - 50)) + 'deg'
-        result = `linear-gradient(${nextDeg}, ${theme} 50%, transparent 50%, transparent), linear-gradient(270deg, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
+        const nextDeg = -90 + (3.6 * (value - 50)) + 'deg'
+        return `linear-gradient(${nextDeg}, ${theme} 50%, transparent 50%, transparent), ` +
+        `linear-gradient(270deg, ${theme} 50%, ${backgroundTheme} 50%, ${backgroundTheme})`
       }
-      return result
     },
-    circleBarStyle: function () {
+    circleBarStyle () {
       return {
         backgroundColor: colorConfig[VuesticTheme[this.backgroundTheme]],
         color: colorConfig[VuesticTheme[this.theme]],
       }
     },
-    circleBarType: function () {
+    computedClass () {
       return {
         'circle-bar--disabled': this.disabled,
       }
@@ -88,7 +134,7 @@ export default {
 <style lang="scss">
 .circle-bar {
   $step: 1;
-  $loops: round(100 / $step);
+  $loops: 100 / $step;
   $increment: 360 / $loops;
   $half: round($loops / 2);
 
@@ -116,9 +162,8 @@ export default {
     height: $progress-bar-circle-diameter - 2*$progress-bar-circle-bw;
     border-radius: 50%;
     border-width: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @include va-flex-center();
+    text-align: center;
   }
 
   & &--disabled {

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

@@ -1,14 +1,16 @@
 <template>
   <div class="horizontal-bar">
-    <div v-if="size != 'thick'" class="horizontal-bar__value">
+    <div v-if="size !== 'thick'" class="horizontal-bar__value">
       <span v-if="!text">{{value + '%'}}</span>
       <span v-else>{{text}}</span>
     </div>
     <div class="progress" :class="horizontalBarType">
-      <div class="progress-bar horizontal-bar__progress-bar"
-           :class="horizontalBarAnimation"
-           :style="horizontalBarStyle">
-        <span v-if="size == 'thick'" :class="{hidden: value == 0}"
+      <div
+        class="progress-bar horizontal-bar__progress-bar"
+        :class="horizontalBarAnimation"
+        :style="horizontalBarStyle"
+      >
+        <span v-if="size === 'thick'" :class="{hidden: value == 0}"
               class="horizontal-bar__value">
           <span v-if="!text">{{value + '%'}}</span>
           <span v-else>{{text}}</span>
@@ -88,6 +90,7 @@ export default {
 
   .horizontal-bar__value {
     text-align: center;
+
     &.hidden {
       visibility: hidden;
     }
@@ -96,6 +99,7 @@ export default {
   &--basic {
     border-radius: $progress-bar-width-basic;
     height: $progress-bar-width-basic;
+
     .horizontal-bar__progress-bar {
       border-radius: inherit;
     }
@@ -110,6 +114,7 @@ export default {
     border-radius: $progress-bar-width-thick;
     height: $progress-bar-width-thick;
     margin-top: calc(#{$progress-bar-width-thick} / 2 - .125rem);
+
     .horizontal-bar__progress-bar {
       display: flex;
       justify-content: center;