Unit tests

.eslintrc.js

@@ -11,7 +11,9 @@ module.exports = {
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-underscore-dangle": "off",
     "no-plusplus": "off",
-    "max-len": [2, 120, 8]
+    "max-len": [2, 120, 8],
+    "no-restricted-syntax": "off",
+    "guard-for-in": "off"
   },
   parserOptions: {
     parser: "babel-eslint"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.14",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

src/App.vue

@@ -19,36 +19,41 @@
           No DATA
           <input id="nodata" type="checkbox" v-model="noData" />
         </label>
+        <label for="animation">
+          Animation
+          <input v-model="animation" id="animation" />
+        </label>
+        <label for="line">
+          line
+          <input v-model="line" id="line" />
+        </label>
         <label for="determinate">
           Determinate
           <input id="determinate" type="checkbox" v-model="circles[0].determinate" />
           <input id="determinate2" type="checkbox" v-model="determinate" />
         </label>
       </div>
-      <div>
+      <!--<div>
         <input type="checkbox" v-model="circles[0].loading" />
         <input type="checkbox" v-model="circles[1].loading" />
         <input type="checkbox" v-model="circles[2].loading" />
         <input type="checkbox" v-model="circles[3].loading" />
-      </div>
+      </div>-->
       <vue-ellipse-progress
-        :gap="30"
+        :gap="5"
         color-fill="rgba(17,34,51,0.0)"
-        half
-        :data="circles"
-        :size="700"
-        :thickness="40"
-        :progress="progress"
+        :data="circlesTest"
+        :size="400"
+        :thickness="5"
         empty-color="rgba(17,34,51,0.66)"
-        animation="rs 1000 0"
-        :legend-value="10.45"
         :loading="loading"
         :no-data="noData"
       >
         <span slot="legend-value">/hui</span>
         <p slot="legend-caption" class="ma-0">This is caption slot</p>
       </vue-ellipse-progress>
-      <vue-ellipse-progress
+
+      <!--<vue-ellipse-progress
         id="timer-example"
         :progress="parseFloat(timerProgress)"
         :determinate="determinate"
@@ -66,29 +71,27 @@
         :noData="noData"
         animation="loop 700 300"
       >
+      </vue-ellipse-progress>-->
+      <vue-ellipse-progress
+        :progress="50"
+        :animation="animation"
+        :loading="loading"
+        emptyColor="red"
+        line-mode="out"
+        dash="strict 60 0.8"
+        :no-data="noData"
+        :line="line"
+      >
       </vue-ellipse-progress>
-      <vue-ellipse-progress :progress="67" line-mode="out 20" dash="strict 10 0.98"> </vue-ellipse-progress>
-      <!--<vue-ellipse-progress
+      <vue-ellipse-progress
         id="half-example"
-        :progress="parseFloat(timerProgress)"
-        :color="color"
-        :loading="loading"
-        :emptyColor="emptyColor"
-        emptyColorFill=""
-        thickness="10"
-        emptyThickness="10"
-        :size="size"
-        line="round"
-        :lineMode="{ mode: 'in', offset: 10 }"
-        :legend="true"
-        :legendValue="sec"
-        legendClass="legend-custom-style"
-        :noData="noData"
-        :animation="{ type: 'reverse', duration: 700, delay: 300 }"
-        fontSize="4rem"
-        fontColor="white"
-        angle="-90"
+        :progress="88"
+        :size="200"
+        line-mode="in-over 10"
         half
+        :thickness="20"
+        :empty-thickness="10"
+        :colorFill="emptyColorFill"
       >
         <span slot="legend-value"></span>
       </vue-ellipse-progress>
@@ -99,7 +102,7 @@
         <input v-model="tasks_done" max="200" min="0" type="number" id="tasks" />
         <button @click="updateTasksDone">Update Tasks</button>
       </div>
-      <vue-ellipse-progress
+      <!--<vue-ellipse-progress
         :progress="parseFloat(tasksDonePercent)"
         :color="color"
         :emptyColor="emptyColor"
@@ -140,42 +143,17 @@
   </div>
 </template>
 <script>
+const randomNumberInRange = (min = 0, max = 10) => Math.floor(Math.random() * (max - min + 1)) + min;
+
 export default {
   name: "app",
   components: {},
   data: () => ({
+    line: "round",
     circles: [
-      {
-        progress: 0,
-        thickness: 40,
-        animation: "rs 2000 2000",
-        loading: false,
-        half: true
-      },
-      {
-        progress: 55,
-        thickness: 40,
-        color: "blue",
-        // angle: "-90",
-        loading: false,
-        animation: "bounce 2000 400"
-      },
-      {
-        progress: 35,
-        thickness: 40,
-        color: "red",
-        // angle: "155",
-        loading: false,
-        animation: "loop 2000 600"
-      },
-      {
-        progress: 15,
-        thickness: 40,
-        color: "yellow",
-        // angle: "165",
-        loading: false,
-        animation: "reverse 2000 800"
-      }
+      { progress: 25, color: "red", gap: 25, thickness: 5 },
+      { progress: 35, color: "blue", gap: 10, thickness: 5 },
+      { progress: 55, color: "green" }
     ],
     determinate: false,
     loading: false,
@@ -229,11 +207,29 @@ export default {
         }
       ],
       radial: true
-    }
+    },
+    animation: "rs 200 5000"
   }),
   computed: {
     tasksDonePercent() {
       return (this.tasks_done * 100) / 200;
+    },
+    circlesTest() {
+      const data = [];
+      // generate random test data
+      for (let n = 0; n < 6; n++) {
+        data.push({
+          progress: 25,
+          gap: randomNumberInRange(),
+          thickness: randomNumberInRange()
+        });
+      }
+      // some special cases
+      data.push({ progress: 50, color: "red", thickness: 5 });
+      data.push({ progress: 50, gap: 5 });
+      data.push({ progress: 50, gap: 0 });
+      data.push({ progress: 50 });
+      return data;
     }
   },
   methods: {

src/components/Circle/EpCircleContainer.vue → src/components/Circle/CircleContainer.vue

@@ -6,28 +6,46 @@
       <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="_uid" />
       <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
     </defs>
-    <component :is="circleType" v-bind="$props" :multiple="multiple" :id="_uid" :index="index" />
+    <component :is="circleType" v-bind="$props" :id="_uid" />
   </g>
 </template>
 
 <script>
 import Gradient from "../Gradient.vue";
 import HalfCircleProgress from "./HalfCircleProgress.vue";
 import CircleProgress from "./CircleProgress.vue";
-import { getValueIfDefined } from "../../utils";
+import { getNumberIfValid } from "../../utils";
+import { simplifiedProps } from "../interface";
 
 export default {
   name: "EpCircleContainer",
   components: { CircleProgress, HalfCircleProgress, Gradient },
   props: {
-    ...CircleProgress.mixins[0].props
+    ...simplifiedProps,
+    index: {
+      type: Number,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      required: true
+    },
+    globalThickness: {
+      type: [Number, String],
+      required: false,
+      default: "5%"
+    },
+    globalGap: {
+      type: Number,
+      required: false
+    }
   },
   computed: {
     circleType() {
       return this.half ? "half-circle-progress" : "circle-progress";
     },
     startAngle() {
-      return getValueIfDefined(this.angle) || -90;
+      return getNumberIfValid(this.angle) || -90;
     },
     isColorGradient() {
       return Array.isArray(this.color.colors);

src/components/Circle/CircleProgress.vue

@@ -10,7 +10,7 @@
       :fill="computedEmptyColorFill"
       :style="{ transition: animationDuration }"
       :class="{ 'ep_circle--nodata': !dataIsAvailable }"
-      :stroke-width="emptyThickness"
+      :stroke-width="computedEmptyThickness"
     >
     </circle>
     <fade-in-transition>
@@ -58,7 +58,6 @@ export default {
   components: { FadeInTransition },
   mixins: [CircleMixin],
   computed: {
-    // only component specific props here, another props comes from the circleMixin
     progressOffset() {
       const offset = this.circumference - (this.computedProgress / 100) * this.circumference;
       if (offset <= 0) {

src/components/Circle/circleMixin.js

@@ -1,24 +1,33 @@
 import { isValidNumber } from "../../utils";
 import { animationParser, dashParser, lineModeParser } from "../optionsParser";
-import interfaceDefinition from "../interface";
+import { simplifiedProps } from "../interface";
 
 const wait = (ms = 400) => new Promise(resolve => setTimeout(() => resolve(), ms));
 
 export default {
   name: "CircleMixin",
   props: {
-    ...interfaceDefinition,
+    ...simplifiedProps,
     multiple: {
       type: Boolean,
       required: true
     },
     id: {
       type: Number,
-      required: false
+      required: true
     },
     index: {
       type: Number,
       required: true
+    },
+    globalThickness: {
+      type: [Number, String],
+      required: false,
+      default: "5%"
+    },
+    globalGap: {
+      type: Number,
+      required: false
     }
   },
   data() {
@@ -35,7 +44,7 @@ export default {
       const { offset } = this.parsedLineMode;
 
       if (this.multiple) {
-        return this.normalLineModeRadius - this.previousCirclesThickness;
+        return this.baseRadius - this.previousCirclesThickness;
       }
 
       switch (this.parsedLineMode.mode) {
@@ -61,7 +70,7 @@ export default {
       const { offset } = this.parsedLineMode;
 
       if (this.multiple) {
-        return this.normalLineModeRadius - this.previousCirclesThickness;
+        return this.baseRadius - this.previousCirclesThickness;
       }
 
       switch (this.parsedLineMode.mode) {
@@ -112,7 +121,7 @@ export default {
     animationClass() {
       return [
         `animation__${
-          !this.loading && this.dataIsAvailable && this.isInitialized ? this.parsedAnimation.type : "none"
+          !this.loading && this.dataIsAvailable && this.isInitialized ? this.parsedAnimation.type : "default"
         }`,
         `${this.loading ? "animation__loading" : ""}`
       ];
@@ -145,6 +154,9 @@ export default {
     computedThickness() {
       return this.calculateThickness(this.thickness.toString());
     },
+    computedGlobalThickness() {
+      return this.calculateThickness(this.globalThickness.toString());
+    },
     computedEmptyThickness() {
       return this.calculateThickness(this.emptyThickness.toString());
     },
@@ -166,10 +178,16 @@ export default {
     },
     previousCirclesThickness() {
       if (this.index === 0) return 0;
-      return this.data
+      const currentCircleGap = isValidNumber(this.data[this.index].gap) ? this.data[this.index].gap : this.gap;
+      const previousCirclesGap = this.data
         .filter((data, i) => i < this.index)
-        .map(data => (data.thickness || this.thickness) + (data.gap || this.gap))
+        .map(data => {
+          const thickness = isValidNumber(data.thickness) ? data.thickness : this.computedGlobalThickness;
+          const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
+          return thickness + gap;
+        })
         .reduce((acc, current) => acc + current);
+      return previousCirclesGap + currentCircleGap;
     },
     styles() {
       return {