Unit tests

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     "max-len": [2, 120, 8],
     "no-restricted-syntax": "off",
     "guard-for-in": "off",
+    "no-case-declarations": "off",
   },
   parserOptions: {
     parser: "babel-eslint",

README.md

@@ -83,7 +83,7 @@ This table below provides a quick overview over all available options. To gain m
 | **[`size`](#size)** | Number | >=0 |  200       |     |     
 | **[`line`](#line)** | String | "round \| square \| butt" |  "round"|   
 | **[`thickness`](#thickness)** | Number \| String | \>=0 as Number or percent value as String|  "5%" |      
-| **[`lineMode`](#linemode)** | String | "normal \| out \| out-over \| in \| in-over \| top [offset]" | "normal 0" |   
+| **[`lineMode`](#linemode)** | String | "normal \| out \| out-over \| in \| in-over \| top \| bottom [offset]" | "normal 0" |   
 | **[`emptyThickness`](#emptythickness)** | Number \| String | \>=0 as Number or percent value as String |  "5%" |     
 | **[`color`](#color)** | String \| Object | any color as String or Object to specify gradient (see details) |  "#3f79ff" |   
 | **[`colorFill`](#colorfill)** | String \| Object | same as `color` |  "transparent" |

package.json

@@ -1,14 +1,14 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.0.2",
+  "version": "1.1.0-beta.2",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --formats umd-min --name vue-ellipse-progress ./src/plugin.js",
     "lint": "vue-cli-service lint --fix",
-    "test": "vue-cli-service test:unit"
+    "test": "vue-cli-service test:unit --colors"
   },
   "author": {
     "name": "Sergej Atamantschuk",

src/App.vue

@@ -27,10 +27,6 @@
           line
           <input v-model="line" id="line" />
         </label>
-        <label for="angle">
-          Angle
-          <input v-model="angle" id="angle" type="number" />
-        </label>
         <label for="determinate">
           Determinate
           <input id="determinate" type="checkbox" v-model="circles[0].determinate" />
@@ -43,134 +39,54 @@
         <input type="checkbox" v-model="circles[2].loading" />
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
-      <vue-ellipse-progress
-        :gap="5"
-        half
-        :angle="angle"
-        color-fill="rgba(17,34,51,0.0)"
-        :data="circlesTest"
-        :size="400"
-        :thickness="5"
-        empty-color="rgba(17,34,51,0.66)"
-        :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>
+      <div style="border: 1px solid red; display: inline-block;">
+        <vue-ellipse-progress
+          :data="circles"
+          :loading="loading"
+          :no-data="noData"
+          :progress="50"
+          animation="bounce 1000 3000"
+          :thickness="30"
+          :empty-thickness="50"
+          :gap="5"
+          dot="15 yellow"
+          :size="600"
 
+          :legend="true"
+          line-mode="in"
+        />
+      </div>
       <vue-ellipse-progress
-        :progress="50"
-        :gap="10"
-        :data="circles"
         :loading="loading"
-        emptyColor="red"
-        line-mode="out"
         :no-data="noData"
-        :line="line"
-      >
-      </vue-ellipse-progress>
-
-      <!--<vue-ellipse-progress
-        id="timer-example"
-        :progress="parseFloat(timerProgress)"
-        :determinate="determinate"
-        :loading="loading"
-        :emptyColorFill="emptyColorFill"
-        thickness="2%"
-        emptyThickness="5%"
-        :size="size"
-        line="round"
+        :progress="progress"
+        :angle="-90"
+        :legend="false"
+        :thickness="100"
         dash="strict 60 0.95"
-        lineMode="top"
-        :legend="true"
-        :legendValue="sec"
-        legendClass="legend-custom-style"
-        :noData="noData"
-        animation="loop 700 300"
-      >
-      </vue-ellipse-progress>-->
-      <vue-ellipse-progress
-        :progress="50"
-        :animation="animation"
-        :loading="loading"
-        emptyColor="red"
-        dash="strict 60 0.8"
-        :no-data="noData"
-        :line="line"
-      >
-      </vue-ellipse-progress>
-      <vue-ellipse-progress
-        id="half-example"
-        :progress="0"
-        :size="200"
-        animation="default 500 500"
-        :thickness="4"
-        :empty-thickness="4"
-        :colorFill="emptyColorFill"
-      >
-        <span slot="legend-value"></span>
-      </vue-ellipse-progress>
-      <div>
-        <label for="tasks">
-          Tasks
-        </label>
-        <input v-model="tasks_done" max="200" min="0" type="number" id="tasks" />
-        <button @click="updateTasksDone">Update Tasks</button>
-      </div>
-      <!--<vue-ellipse-progress
-        :progress="parseFloat(tasksDonePercent)"
-        :color="color"
-        :emptyColor="emptyColor"
-        :size="size"
-        :thickness="21"
-        angle=""
-        :loading="false"
-        :emptyThickness="20"
-        :lineMode="{ mode: 'normal', offset: 10 }"
-        :legendValue="tasks_done"
-        fontColor="white"
-        :animation="{ type: 'loop', duration: 1000 }"
-        fontSize="4rem"
-        :noData="noData"
-      >
-        <span slot="legend-value">/200</span>
-        <p slot="legend-capture">GOOD JOB</p>
-      </vue-ellipse-progress>
-      <vue-ellipse-progress
-        :progress="parseFloat(tasksDonePercent)"
-        :color="color"
-        :emptyColor="emptyColor"
-        :size="size"
-        :thickness="21"
-        angle=""
-        :loading="loading"
-        :emptyThickness="20"
-        :lineMode="{ mode: 'normal', offset: 10 }"
-        :legendValue="tasks_done"
-        fontColor="white"
-        :animation="{ type: 'bounce', duration: 1000 }"
-        fontSize="2rem"
-      >
-        <span slot="legend-value">/200</span>
-        <p style="margin-bottom: 0" slot="legend-capture">GOOD JOB</p>
-      </vue-ellipse-progress>-->
+        :empty-thickness="100"
+        line="butt"
+        animation="rs 1000"
+        :dot="{ size: 100, backgroundColor: 'rgba(100,256,4,1)', width: '2px' }"
+        line-mode="in-over"
+      />
     </div>
   </div>
 </template>
 <script>
+import VueEllipseProgress from "./components/VueEllipseProgress.vue";
+
 const randomNumberInRange = (min = 0, max = 10) => Math.floor(Math.random() * (max - min + 1)) + min;
 
 export default {
   name: "app",
-  components: {},
+  components: { VueEllipseProgress },
   data: () => ({
     line: "round",
-    angle: 90,
     circles: [
-      { progress: 25, color: "red", thickness: 5 },
-      { progress: 35, color: "blue", gap: 0, thickness: 5 },
-      { progress: 55, color: "green" },
+      { progress: 50, color: "red", animation: "bounce 3000" },
+      { progress: 50, color: "blue", animation: "loop 2000", gap: 10, dot: { size: 4 } },
+      { progress: 50, color: "green", gap: 0, animation: "reverse 5000", dot: { size: "15%" } },
     ],
     determinate: false,
     loading: false,
@@ -225,7 +141,7 @@ export default {
       ],
       radial: true,
     },
-    animation: "rs 200 5000",
+    animation: "rs 1000 500",
   }),
   computed: {
     tasksDonePercent() {

src/components/Circle/Circle.vue

@@ -1,5 +1,12 @@
 <template>
-  <g class="ep-circle" :style="{ transition: `${animationDuration}`, transform: `rotate(${computedAngle}deg)` }">
+  <g
+    class="ep-circle"
+    :style="{
+      transitionDuration: styles.transitionDuration,
+      transitionTimingFunction: styles.transitionTimingFunction,
+      transform: `rotate(${computedAngle}deg)`,
+    }"
+  >
     <circle
       class="ep-circle--empty"
       :r="emptyRadius"
@@ -8,8 +15,11 @@
       :stroke="computedEmptyColor"
       :stroke-dasharray="emptyDasharray"
       :fill="computedEmptyColorFill"
-      :style="{ transition: animationDuration }"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
+      :style="{
+        transitionDuration: styles.transitionDuration,
+        transitionTimingFunction: styles.transitionTimingFunction,
+      }"
       :stroke-width="computedEmptyThickness"
     >
     </circle>
@@ -79,6 +89,4 @@ export default {
 .ep-circle {
   transform-origin: 50% 50%;
 }
-@import "~@/styles/animations.scss";
-@import "~@/styles/animationsUsage.scss";
 </style>

src/components/Circle/CircleContainer.vue

@@ -7,6 +7,7 @@
       <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
     </defs>
     <component :is="circleType" v-bind="$props" :id="_uid" />
+    <circle-dot v-if="dot" v-bind="$props" :id="_uid" :index="index" :multiple="multiple" />
   </g>
 </template>
 
@@ -15,10 +16,11 @@ import Gradient from "../Gradient.vue";
 import HalfCircleProgress from "./HalfCircle.vue";
 import CircleProgress from "./Circle.vue";
 import { simplifiedProps } from "../interface";
+import CircleDot from "./CircleDot.vue";
 
 export default {
   name: "EpCircleContainer",
-  components: { CircleProgress, HalfCircleProgress, Gradient },
+  components: { CircleDot, CircleProgress, HalfCircleProgress, Gradient },
   props: {
     ...simplifiedProps,
     index: {
@@ -38,6 +40,10 @@ export default {
       type: Number,
       required: false,
     },
+    globalDot: {
+      type: [Number, String, Object],
+      required: false,
+    },
   },
   computed: {
     circleType() {
@@ -58,7 +64,9 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
+@import "~@/styles/animations.scss";
+@import "~@/styles/animationsUsage.scss";
 g.ep-circle--container {
   transition: inherit;
   transform-origin: 50% 50%;