Feat/progress bars (epicmaxco#458)

* feat(progress-bar): remove redundant styles

* feat(progress-bar): reimplement circle progress bar

* feat(progress-bar): remove old styles

* feat(progress-bar): remove vertical progress bar

* feat(progress-bar): fix code style

* feat(progress-bar): fix code style

* feat(progress-bar): reimplement horizontal progress bar

* feat(progress-bar): remove 'vuestic-progress-bar' component

* feat(progress-bar): move common logic into utils

* feat(progress-bar): reimplement presentation

* feat(progress-bar): use new circle progress on dashboard

* feat(progress-bar): add colors presentation

* feat(progress-bar): remove unused prop

* feat(progress-bar): minor code chnages

* feat(progress-bar): fix code style

* feat(progress-bar): remove demo styles

* feat(progress-bar): remove unused styles

* feat(progress-bar): fix minor xs screen issues

* feat(progress-bar): create mixin for common functionality

* feat(progress-bar): final minor fixes

* make naming consistent for styles, components
* tweak demos, add several checks
* use more & in scss
* move intermediate class to root div
* use relative routes for imports

* feat(progress-bar): rename progress components

* VaCircleProgressBar -> VaProgressCircle
* VaVarticalProgressBar -> VaProgressBar

package.json

@@ -34,7 +34,7 @@
     "v-tooltip": "^2.0.0-rc.30",
     "vee-validate": "2.0.9",
     "vue": "^2.5.17",
-    "vue-book": "0.1.0-alpha.9",
+    "vue-book": "0.1.0-alpha.12",
     "vue-bulma-expanding": "0.0.1",
     "vue-chartjs": "^3.4.0",
     "vue-clipboard2": "^0.2.1",

src/components/dashboard/DashboardInfoWidgets.vue

@@ -37,8 +37,9 @@
               <div class="stats-title">Commits</div>
             </div>
             <div class="chart-container">
-              <vuestic-progress-bar type="circle" :value="70" theme="White"
-                                    backgroundTheme="Danger"/>
+              <va-progress-circle :value="70" theme="White">
+                70%
+              </va-progress-circle>
             </div>
           </div>
         </div>

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

@@ -1,24 +1,30 @@
 <template>
   <div class="progress-bars">
     <div class="va-row">
-      <div class="flex md12">
-        <standard-bars/>
+      <div class="flex md12 xs12">
+        <horizontal-bars/>
       </div>
     </div>
     <div class="va-row">
-      <div class="flex md12">
+      <div class="flex md12 xs12">
+        <circle-bars/>
+      </div>
+    </div>
+    <div class="va-row">
+      <div class="flex md12 xs12">
         <colorful-bars/>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import HorizontalBars from './Widgets/HorizontalBars'
+import CircleBars from './Widgets/CircleBars'
 import ColorfulBars from './Widgets/ColorfulBars'
-import StandardBars from './Widgets/StandardBars'
 
 export default {
   name: 'progress-bars',
-  components: { StandardBars, ColorfulBars },
+  components: { HorizontalBars, CircleBars, ColorfulBars }
 }
 </script>

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

@@ -0,0 +1,40 @@
+<template>
+  <vuestic-widget class="progress-bar-widget" :headerText="$t('progressBars.circle')">
+    <div class="va-row">
+      <div v-for="n in 10" :key="n" class="flex xs2 md1">
+        <va-progress-circle :value="value * n / 10"/>
+      </div>
+      <div class="flex xs2 md1">
+        <va-progress-circle indeterminate/>
+      </div>
+    </div>
+    <div class="va-row">
+      <div v-for="n in 10" :key="n" class="flex xs2 md1">
+        <va-progress-circle :value="value * n / 10" theme="Info">{{ value * n / 10 }}%</va-progress-circle>
+      </div>
+      <div class="flex xs2 md1">
+        <va-progress-circle indeterminate theme="Info"/>
+      </div>
+    </div>
+  </vuestic-widget>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: 0
+    }
+  },
+  mounted () {
+    this.animateValue()
+  },
+  methods: {
+    animateValue () {
+      setTimeout(() => {
+        this.value = 100
+      })
+    }
+  }
+}
+</script>

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

@@ -1,45 +1,34 @@
 <template>
-  <vuestic-widget headerText="Colorful Bars">
+  <vuestic-widget class="progress-bar-widget" :headerText="$t('progressBars.colors')">
     <div class="va-row">
-      <div class="flex sm4 md4">
-        {{'progressBars.basic' | translate}}
-        <vuestic-progress-bar :value="100" theme="Danger"/>
+      <div v-for="n in 3" :key="n" class="flex md3 xs12">
+        <va-progress-bar
+          :value="value * n / 4"
+          :theme="themes[n - 1]"
+        >{{ themes[n - 1] }}</va-progress-bar>
       </div>
-      <div class="flex sm4 md4">
-        {{'progressBars.thin' | translate}}
-        <vuestic-progress-bar :value="100" size="thin" theme="Info"/>
-      </div>
-      <div class="flex sm4 md4">
-        {{'progressBars.thick' | translate}}
-        <vuestic-progress-bar :value="100" size="thick" theme="Warning"/>
-      </div>
-    </div>
-    <div class="va-row">
-      <div class="flex sm4 md4">
-        {{'progressBars.basicVertical' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar :value="100" type="vertical" theme="Success"/>
-        </div>
-      </div>
-      <div class="flex sm4 md4">
-        {{'progressBars.thinVertical' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar :value="100" size="thin" type="vertical"
-                                theme="Black"/>
-        </div>
-      </div>
-      <div class="flex sm4 md4">
-        {{'progressBars.circle' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar :value="100" type="circle"/>
-        </div>
+      <div class="flex md3 xs12">
+        <va-progress-bar indeterminate theme="Black">Black</va-progress-bar>
       </div>
     </div>
   </vuestic-widget>
 </template>
 
 <script>
 export default {
-  name: 'standard-bars',
+  data () {
+    return {
+      value: 0,
+      themes: ['Danger', 'Success', 'Warning']
+    }
+  },
+  mounted () {
+    this.animateValue()
+  },
+  methods: {
+    animateValue () {
+      setTimeout(() => (this.value = 100))
+    }
+  }
 }
 </script>

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

@@ -0,0 +1,65 @@
+<template>
+  <vuestic-widget class="progress-bar-widget" :headerText="$t('progressBars.horizontal')">
+    <div class="va-row">
+      <div class="flex md4 xs12">
+        <va-progress-bar :value="value / 3"/>
+      </div>
+      <div class="flex md4 xs12">
+        <va-progress-bar :value="bufferValues.value" :buffer="bufferValues.buffer"/>
+      </div>
+      <div class="flex md4 xs12">
+        <va-progress-bar indeterminate/>
+      </div>
+    </div>
+    <div class="va-row">
+      <div class="flex md4 xs12">
+        <va-progress-bar :value="value * 2 / 3" theme="Info">66%</va-progress-bar>
+      </div>
+      <div class="flex md4 xs12">
+        <va-progress-bar
+          :value="bufferValues.value"
+          :buffer="bufferValues.buffer"
+          theme="Info"
+        >Buffering</va-progress-bar>
+      </div>
+      <div class="flex md4 xs12">
+        <va-progress-bar indeterminate theme="Info">Loading...</va-progress-bar>
+      </div>
+    </div>
+  </vuestic-widget>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: 0,
+      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/i18n/en.json

@@ -283,14 +283,9 @@
     "verticalSimpleCardsSecondInfo": "However, various anthropogenic factors have had a severe impact on zebra populations"
   },
   "progressBars": {
-    "basic": "Basic",
-    "basicVertical": "Basic Vertical",
     "circle": "Circle",
-    "colorFulTitle": "Colorful Bars",
-    "thin": "Thin",
-    "thinVertical": "Thin Vertical",
-    "thick": "Thick",
-    "title": "Progress Bars"
+    "horizontal": "Horizontal",
+    "colors": "Colors"
   },
   "tables": {
     "basic": "Basic Table",

src/i18n/es.json

@@ -220,14 +220,9 @@
     "startedTopic": "{name} ha creado una tema nueva"
   },
   "progressBars": {
-    "basic": "Basico",
-    "basicVertical": "Basico y Vertical",
-    "circle": "Circular",
-    "colorFulTitle": "Barras Coloridas",
-    "thin": "Delgado",
-    "thinVertical": "Delgado Vertical",
-    "thick": "Grueso",
-    "title": "Barras de Progresso"
+    "circle": "Circulo",
+    "horizontal": "Horizontal",
+    "colors": "Colores"
   },
   "tables": {
     "basic": "Tabla basica",

src/i18n/pt_br.json

@@ -214,14 +214,9 @@
     "startedTopic": "{name} iniciou um novo tópico"
   },
   "progressBars": {
-    "basic": "Básico",
-    "basicVertical": "Básico Vertical",
     "circle": "Círculo",
-    "colorFulTitle": "Barra Colorida completa",
-    "thin": "Fina",
-    "thinVertical": "Fina Vertical",
-    "thick": "Grosso",
-    "title": "Barra de Progresso"
+    "horizontal": "Horizontal",
+    "colors": "Cores"
   },
   "tables": {
     "basic": "Tabela Básico",

src/services/utils.js

@@ -29,4 +29,16 @@ export default {
 
     return rgb
   },
+
+  normalizeValue (value, minValue = 0, maxValue = 100) {
+    if (value <= minValue) {
+      return minValue
+    }
+
+    if (value >= maxValue) {
+      return maxValue
+    }
+
+    return value
+  }
 }