Fix/bugs 2.0: update progress bar presentation (epicmaxco#690)

* fix(bugs-2.0): change progress bar presentation

* fix(bugs-2.0): change progress bar presentation

* fix(bugs-2.0): minor changes

src/components/statistics/progress-bars/ProgressBars.vue

@@ -5,6 +5,11 @@
         <horizontal-bars/>
       </div>
     </div>
+    <div class="row">
+      <div class="flex xs12">
+        <bars-state/>
+      </div>
+    </div>
     <div class="row">
       <div class="flex xs12">
         <circle-bars/>
@@ -21,10 +26,11 @@
 <script>
 import HorizontalBars from './Widgets/HorizontalBars'
 import CircleBars from './Widgets/CircleBars'
+import BarsState from './Widgets/BarsState'
 import ColorfulBars from './Widgets/ColorfulBars'
 
 export default {
   name: 'progress-bars',
-  components: { HorizontalBars, CircleBars, ColorfulBars },
+  components: { HorizontalBars, CircleBars, BarsState, ColorfulBars },
 }
 </script>

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

@@ -0,0 +1,58 @@
+<template>
+  <va-card
+    class="bars-state"
+    :title="$t('progressBars.state')"
+  >
+    <div class="row">
+      <div class="flex md4 xs12">
+        <va-progress-bar :value="value2">66%</va-progress-bar>
+      </div>
+      <div class="flex md4 xs12">
+        <va-progress-bar
+          :value="bufferValues.value"
+          :buffer="bufferValues.buffer"
+        >Buffering
+        </va-progress-bar>
+      </div>
+      <div class="flex md4 xs12">
+        <va-progress-bar indeterminate>Loading</va-progress-bar>
+      </div>
+    </div>
+  </va-card>
+</template>
+
+<script>
+export default {
+  name: 'bars-state',
+  data () {
+    return {
+      value2: 66,
+      bufferValues: {
+        value: 0,
+        buffer: 0,
+      },
+    }
+  },
+  mounted () {
+    this.animateValue()
+    this.animateBufferValues()
+  },
+  methods: {
+    animateValue () {
+      setTimeout(() => {
+        this.value = 100
+      })
+    },
+    animateBufferValues () {
+      const interval = setInterval(() => {
+        this.bufferValues.value += 2 + Math.floor(Math.random() * 2)
+        this.bufferValues.buffer += 2 + Math.floor(Math.random() * 4)
+
+        if (this.bufferValues.value >= 100) {
+          clearInterval(interval)
+        }
+      }, 400)
+    },
+  },
+}
+</script>

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

@@ -3,23 +3,6 @@
     class="circle-bars"
     :title="$t('progressBars.circle')"
   >
-    <div class="row">
-      <div v-for="n in 10" :key="n" class="flex xs4 sm2 lg1">
-        <div class="d-flex justify--center">
-          <div>
-            <va-progress-circle :value="value * n / 10"/>
-          </div>
-        </div>
-      </div>
-      <div class="flex xs4 sm2 lg1">
-        <div class="d-flex justify--center">
-          <div>
-            <va-progress-circle indeterminate/>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <div class="row">
       <div v-for="n in 10" :key="n" class="flex xs4 sm2 lg1">
         <div class="d-flex justify--center">

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

@@ -4,15 +4,20 @@
     :title="$t('progressBars.colors')"
   >
     <div class="row">
-      <div v-for="n in 3" :key="n" class="flex md3 xs12">
+      <div v-for="n in 6" :key="n" class="flex md4 xs12">
         <va-progress-bar
-          :value="value * n / 4"
+          :value="value * n / 6"
           :color="colors[n - 1]"
         >{{ colors[n - 1] }}
         </va-progress-bar>
       </div>
-      <div class="flex md3 xs12">
-        <va-progress-bar indeterminate color="black">Black</va-progress-bar>
+      <div v-for="n in 6" :key="n" class="flex md2 xs6">
+        <va-progress-circle
+          class="ma-auto"
+          :value="value * n / 6"
+          :color="colors[n - 1]"
+        >{{ colors[n - 1] }}
+        </va-progress-circle>
       </div>
     </div>
   </va-card>
@@ -23,7 +28,7 @@ export default {
   data () {
     return {
       value: 0,
-      colors: ['danger', 'success', 'warning'],
+      colors: ['danger', 'success', 'info', 'gray', 'warning', 'black'],
     }
   },
   mounted () {

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

@@ -8,25 +8,10 @@
         <va-progress-bar :value="value / 3"/>
       </div>
       <div class="flex md4 xs12">
-        <va-progress-bar :value="bufferValues.value" :buffer="bufferValues.buffer"/>
+        <va-progress-bar :value="value2"/>
       </div>
       <div class="flex md4 xs12">
-        <va-progress-bar indeterminate/>
-      </div>
-    </div>
-    <div class="row">
-      <div class="flex md4 xs12">
-        <va-progress-bar :value="value * 2 / 3">66%</va-progress-bar>
-      </div>
-      <div class="flex md4 xs12">
-        <va-progress-bar
-          :value="bufferValues.value"
-          :buffer="bufferValues.buffer"
-        >Buffering
-        </va-progress-bar>
-      </div>
-      <div class="flex md4 xs12">
-        <va-progress-bar indeterminate>Loading...</va-progress-bar>
+        <va-progress-bar :value="value3"/>
       </div>
     </div>
   </va-card>
@@ -38,32 +23,9 @@ export default {
   data () {
     return {
       value: 0,
-      bufferValues: {
-        value: 0,
-        buffer: 0,
-      },
+      value2: 66,
+      value3: 100,
     }
   },
-  mounted () {
-    this.animateValue()
-    this.animateBufferValues()
-  },
-  methods: {
-    animateValue () {
-      setTimeout(() => {
-        this.value = 100
-      })
-    },
-    animateBufferValues () {
-      const interval = setInterval(() => {
-        this.bufferValues.value += 2 + Math.floor(Math.random() * 2)
-        this.bufferValues.buffer += 2 + Math.floor(Math.random() * 4)
-
-        if (this.bufferValues.value >= 100) {
-          clearInterval(interval)
-        }
-      }, 400)
-    },
-  },
 }
 </script>