From 8f27870d938e8fb241545e8fe9f71c8ea1226b62 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 30 Apr 2020 21:17:21 +0200
Subject: [PATCH 01/43] feat: add dot basic markup

---
 package.json                             |   2 +-
 src/App.vue                              | 115 +----------------------
 src/components/Circle/CircleDot.vue      |  46 +++++++++
 src/components/Circle/CircleProgress.vue |   4 +-
 4 files changed, 54 insertions(+), 113 deletions(-)
 create mode 100644 src/components/Circle/CircleDot.vue

diff --git a/package.json b/package.json
index f9ab8a1..5ecde26 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "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 -R travis-cov"
+    "test": "vue-cli-service test:unit"
   },
   "dependencies": {
     "countup.js": "^2.0.4",
diff --git a/src/App.vue b/src/App.vue
index e8a6d7d..006a88a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,125 +39,18 @@
         <input type="checkbox" v-model="circles[2].loading" />
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
-      <vue-ellipse-progress
-        :gap="5"
-        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>
-
-      <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"
-        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>-->
+      <vue-ellipse-progress :progress="50" :legend="false" :thickness="4" :empty-thickness="4"/>
     </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",
     circles: [
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
new file mode 100644
index 0000000..900d131
--- /dev/null
+++ b/src/components/Circle/CircleDot.vue
@@ -0,0 +1,46 @@
+<template>
+  <foreignObject
+    class="ep-circle--progress__dot-container"
+    :width="size"
+    :height="size"
+    :style="{ transform: `rotate(${angle * -1}deg) rotateX(0deg)` }"
+  >
+    <span class="ep-circle--progress__dot"> </span>
+    <!--<span class="ep-circle&#45;&#45;progress__dot-container" >
+    </span>-->
+    <!--:style="{ transform: `translateX(${radius}px) rotate(${150}deg)` }"-->
+  </foreignObject>
+</template>
+
+<script>
+import { simplifiedProps } from "../interface";
+
+export default {
+  props: { ...simplifiedProps, radius: Number },
+  name: "CircleDot",
+};
+</script>
+
+<style scoped>
+.ep-circle--progress__dot-container {
+  /*position: absolute;
+  width: 1px;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;*/
+  transform-origin: center center;
+}
+.ep-circle--progress__dot {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  background-color: #5c5cfa;
+  border-radius: 10px;
+  position: absolute;
+  margin: auto;
+  right: 0;
+  left: 0;
+}
+</style>
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index d196f4b..6d43b2f 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -46,16 +46,18 @@
       :style="styles"
     >
     </circle>
+    <circle-dot v-bind="$props" :radius="radius"/>
   </g>
 </template>
 
 <script>
 import CircleMixin from "./circleMixin";
 import FadeInTransition from "../FadeInTransition.vue";
+import CircleDot from "./CircleDot.vue";
 
 export default {
   name: "CircleProgress",
-  components: { FadeInTransition },
+  components: { CircleDot, FadeInTransition },
   mixins: [CircleMixin],
   computed: {
     progressOffset() {

From c25619e0c60b252af3a8989b42cd295830a5509f Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 15 May 2020 17:49:24 +0200
Subject: [PATCH 02/43] feat: add CircleDot.vue with basic markup

---
 src/App.vue                         |  8 +++++++-
 src/components/Circle/CircleDot.vue | 22 ++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 006a88a..185d235 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,7 +39,13 @@
         <input type="checkbox" v-model="circles[2].loading" />
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
-      <vue-ellipse-progress :progress="50" :legend="false" :thickness="4" :empty-thickness="4"/>
+      <vue-ellipse-progress
+        :loading="loading"
+        :progress="progress"
+        :legend="false"
+        :thickness="10"
+        :empty-thickness="4"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 900d131..6191f22 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -3,7 +3,7 @@
     class="ep-circle--progress__dot-container"
     :width="size"
     :height="size"
-    :style="{ transform: `rotate(${angle * -1}deg) rotateX(0deg)` }"
+    :style="{ transform: `rotate(${rotation}deg)`, transition: animationDuration }"
   >
     <span class="ep-circle--progress__dot"> </span>
     <!--<span class="ep-circle&#45;&#45;progress__dot-container" >
@@ -14,14 +14,22 @@
 
 <script>
 import { simplifiedProps } from "../interface";
+import CircleMixin from "./circleMixin";
 
 export default {
   props: { ...simplifiedProps, radius: Number },
   name: "CircleDot",
+  mixins: [CircleMixin],
+  computed: {
+    rotation() {
+      return this.angle * -1 + (parseFloat(this.progress) * 360) / 100;
+    },
+  },
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+$size: 10px;
 .ep-circle--progress__dot-container {
   /*position: absolute;
   width: 1px;
@@ -33,11 +41,13 @@ export default {
   transform-origin: center center;
 }
 .ep-circle--progress__dot {
+  box-sizing: border-box;
   display: inline-block;
-  height: 20px;
-  width: 20px;
-  background-color: #5c5cfa;
-  border-radius: 10px;
+  // border: 1px solid white;
+  height: $size;
+  width: $size;
+  background-color: #0000ff;
+  border-radius: $size / 2;
   position: absolute;
   margin: auto;
   right: 0;

From 0c0e621139dd475d4d946d73d72acac0881c4bd7 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 15 May 2020 19:05:44 +0200
Subject: [PATCH 03/43] fix: apply consistent animation easing

---
 src/App.vue                          |  2 ++
 src/components/Circle/CircleDot.vue  | 34 ++++++++++++----------------
 src/components/Circle/circleMixin.js |  3 ++-
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 185d235..4bab367 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,6 +42,8 @@
       <vue-ellipse-progress
         :loading="loading"
         :progress="progress"
+        animation="default 1500 1000"
+        :angle="-90"
         :legend="false"
         :thickness="10"
         :empty-thickness="4"
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 6191f22..8b28e36 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -1,14 +1,6 @@
 <template>
-  <foreignObject
-    class="ep-circle--progress__dot-container"
-    :width="size"
-    :height="size"
-    :style="{ transform: `rotate(${rotation}deg)`, transition: animationDuration }"
-  >
+  <foreignObject class="ep-circle--progress__dot-container" :width="size" :height="size" :style="dotContainerStyle">
     <span class="ep-circle--progress__dot"> </span>
-    <!--<span class="ep-circle&#45;&#45;progress__dot-container" >
-    </span>-->
-    <!--:style="{ transform: `translateX(${radius}px) rotate(${150}deg)` }"-->
   </foreignObject>
 </template>
 
@@ -17,12 +9,23 @@ import { simplifiedProps } from "../interface";
 import CircleMixin from "./circleMixin";
 
 export default {
-  props: { ...simplifiedProps, radius: Number },
+  props: { ...simplifiedProps },
   name: "CircleDot",
   mixins: [CircleMixin],
   computed: {
-    rotation() {
-      return this.angle * -1 + (parseFloat(this.progress) * 360) / 100;
+    dotContainerStyle() {
+      let rotation = 0;
+      if (this.isInitialized && !this.loading && this.dataIsAvailable) {
+        rotation = this.angle * -1 + (this.computedProgress * 360) / 100;
+      } else {
+        rotation = this.angle * -1;
+      }
+
+      return {
+        transform: `rotate(${rotation}deg)`,
+        transitionDuration: this.animationDuration,
+        transitionTimingFunction: "ease-in-out",
+      };
     },
   },
 };
@@ -31,13 +34,6 @@ export default {
 <style scoped lang="scss">
 $size: 10px;
 .ep-circle--progress__dot-container {
-  /*position: absolute;
-  width: 1px;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;*/
   transform-origin: center center;
 }
 .ep-circle--progress__dot {
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index cf5890b..55766e1 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -187,7 +187,8 @@ export default {
     styles() {
       return {
         strokeDashoffset: this.strokeDashOffset,
-        transition: this.animationDuration,
+        transitionDuration: this.animationDuration,
+        transitionTimingFunction: "ease-in-out",
         transformOrigin: this.transformOrigin,
         "--ep-circumference": this.circumference,
         "--ep-negative-circumference": this.getNegativeCircumference(),

From d8ce14dd6c4e216473331a87d9dd26b00ce22a9e Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 15 May 2020 19:29:52 +0200
Subject: [PATCH 04/43] feat: add dot loading/noData states handling

---
 src/App.vue                         |  3 ++-
 src/components/Circle/CircleDot.vue | 23 ++++++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4bab367..91ebcc9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,12 +41,13 @@
       </div>-->
       <vue-ellipse-progress
         :loading="loading"
+        :no-data="noData"
         :progress="progress"
         animation="default 1500 1000"
         :angle="-90"
         :legend="false"
         :thickness="10"
-        :empty-thickness="4"
+        :empty-thickness="10"
       />
     </div>
   </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 8b28e36..8471011 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -1,6 +1,6 @@
 <template>
-  <foreignObject class="ep-circle--progress__dot-container" :width="size" :height="size" :style="dotContainerStyle">
-    <span class="ep-circle--progress__dot"> </span>
+  <foreignObject class="ep-circle--progress__dot-container" :width="radius" :height="radius" :style="dotContainerStyle">
+    <span class="ep-circle--progress__dot" :class="{ hidden: isHidden }" :style="dotStyle"> </span>
   </foreignObject>
 </template>
 
@@ -23,10 +23,18 @@ export default {
 
       return {
         transform: `rotate(${rotation}deg)`,
-        transitionDuration: this.animationDuration,
+        transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
       };
     },
+    dotStyle() {
+      return {
+        transitionDuration: this.loading ? "0s" : this.animationDuration,
+      };
+    },
+    isHidden() {
+      return this.loading || !this.dataIsAvailable;
+    },
   },
 };
 </script>
@@ -34,9 +42,14 @@ export default {
 <style scoped lang="scss">
 $size: 10px;
 .ep-circle--progress__dot-container {
+  border: 2px red solid;
   transform-origin: center center;
+  &.hidden {
+    transition-duration: 0s;
+  }
 }
 .ep-circle--progress__dot {
+  transition-duration: 0.3s;
   box-sizing: border-box;
   display: inline-block;
   // border: 1px solid white;
@@ -48,5 +61,9 @@ $size: 10px;
   margin: auto;
   right: 0;
   left: 0;
+
+  &.hidden {
+    transform: scale(0);
+  }
 }
 </style>

From b0a8f18ba0aeae7c620b0ae613bcd75b83d6e509 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 15 May 2020 20:20:22 +0200
Subject: [PATCH 05/43] feat: add dot prop to interface

---
 src/App.vue                         |  2 +-
 src/components/Circle/CircleDot.vue | 14 ++++++++++++--
 src/components/interface.js         | 11 +++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 91ebcc9..7d01fd2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,7 @@
         animation="default 1500 1000"
         :angle="-90"
         :legend="false"
-        :thickness="10"
+        :thickness="20"
         :empty-thickness="10"
       />
     </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 8471011..deb3417 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -1,5 +1,12 @@
 <template>
-  <foreignObject class="ep-circle--progress__dot-container" :width="radius" :height="radius" :style="dotContainerStyle">
+  <foreignObject
+    :x="dotContainerPosition * 2"
+    :y="dotContainerPosition"
+    class="ep-circle--progress__dot-container"
+    :width="radius * 2"
+    :height="radius * 2"
+    :style="dotContainerStyle"
+  >
     <span class="ep-circle--progress__dot" :class="{ hidden: isHidden }" :style="dotStyle"> </span>
   </foreignObject>
 </template>
@@ -13,6 +20,9 @@ export default {
   name: "CircleDot",
   mixins: [CircleMixin],
   computed: {
+    dotContainerPosition() {
+      return (this.size - (this.radius + 5) * 2) / 2;
+    },
     dotContainerStyle() {
       let rotation = 0;
       if (this.isInitialized && !this.loading && this.dataIsAvailable) {
@@ -42,7 +52,7 @@ export default {
 <style scoped lang="scss">
 $size: 10px;
 .ep-circle--progress__dot-container {
-  border: 2px red solid;
+  border: 1px red solid;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
diff --git a/src/components/interface.js b/src/components/interface.js
index e5843f8..aa562cc 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -141,6 +141,17 @@ const props = {
     required: false,
     default: false,
   },
+  dot: {
+    type: [Number, Object],
+    required: false,
+    default: 0,
+    validator: (value) => {
+      if (typeof value === "object" && value.size) {
+        return !Number.isNaN(parseFloat(value.size));
+      }
+      return !Number.isNaN(parseFloat(value));
+    },
+  },
 };
 
 const simplifiedProps = {};

From 2a57ebaff80b939df2c40a7975e67fdcaeec5c9b Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 15 May 2020 20:56:08 +0200
Subject: [PATCH 06/43] feat: add base dot position calculation formula in
 normal mode

---
 src/App.vue                          |  6 ++++--
 src/components/Circle/CircleDot.vue  | 21 ++++++++++++---------
 src/components/Circle/circleMixin.js |  4 ++++
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7d01fd2..a96105b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,8 +46,10 @@
         animation="default 1500 1000"
         :angle="-90"
         :legend="false"
-        :thickness="20"
-        :empty-thickness="10"
+        :dot="20"
+        :thickness="10"
+        line-mode="out"
+        :empty-thickness="40"
       />
     </div>
   </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index deb3417..6603949 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -1,10 +1,10 @@
 <template>
   <foreignObject
-    :x="dotContainerPosition * 2"
+    :x="dotContainerPosition"
     :y="dotContainerPosition"
     class="ep-circle--progress__dot-container"
-    :width="radius * 2"
-    :height="radius * 2"
+    :width="dotContainerSize"
+    :height="dotContainerSize"
     :style="dotContainerStyle"
   >
     <span class="ep-circle--progress__dot" :class="{ hidden: isHidden }" :style="dotStyle"> </span>
@@ -21,7 +21,10 @@ export default {
   mixins: [CircleMixin],
   computed: {
     dotContainerPosition() {
-      return (this.size - (this.radius + 5) * 2) / 2;
+      return (this.size - this.radius * 2 - this.dotSize) / 2;
+    },
+    dotContainerSize() {
+      return this.radius * 2 + this.dotSize;
     },
     dotContainerStyle() {
       let rotation = 0;
@@ -40,6 +43,10 @@ export default {
     dotStyle() {
       return {
         transitionDuration: this.loading ? "0s" : this.animationDuration,
+        "--ep-dot-size": this.dotSize,
+        height: `${this.dotSize}px`,
+        width: `${this.dotSize}px`,
+        borderRadius: `${this.dotSize / 2}px`,
       };
     },
     isHidden() {
@@ -52,7 +59,7 @@ export default {
 <style scoped lang="scss">
 $size: 10px;
 .ep-circle--progress__dot-container {
-  border: 1px red solid;
+  border: 0px red solid;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
@@ -62,11 +69,7 @@ $size: 10px;
   transition-duration: 0.3s;
   box-sizing: border-box;
   display: inline-block;
-  // border: 1px solid white;
-  height: $size;
-  width: $size;
   background-color: #0000ff;
-  border-radius: $size / 2;
   position: absolute;
   margin: auto;
   right: 0;
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 55766e1..99c8bfa 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -184,6 +184,10 @@ export default {
       return previousCirclesGap + currentCircleGap;
     },
 
+    dotSize() {
+      return isValidNumber(this.dot.size) ? this.dot.size : this.dot;
+    },
+
     styles() {
       return {
         strokeDashoffset: this.strokeDashOffset,

From ae5f2352360db176c96a5934c1fa8022b497540c Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 15 May 2020 21:24:33 +0200
Subject: [PATCH 07/43] feat: include dot in line mode calculations

---
 src/App.vue                              |  6 +++---
 src/components/Circle/CircleProgress.vue |  1 +
 src/components/Circle/circleMixin.js     | 25 ++++++++++++++----------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a96105b..9c16f66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,10 +46,10 @@
         animation="default 1500 1000"
         :angle="-90"
         :legend="false"
-        :dot="20"
+        :dot="0"
         :thickness="10"
-        line-mode="out"
-        :empty-thickness="40"
+        line-mode=""
+        :empty-thickness="10"
       />
     </div>
   </div>
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index 6d43b2f..e08c5f5 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -1,5 +1,6 @@
 <template>
   <g class="ep-circle--container">
+    <!--TODO: fix transition timing function-->
     <circle
       class="ep-circle--empty"
       :r="emptyRadius"
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 99c8bfa..1526ca2 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -51,10 +51,10 @@ export default {
         case "in":
           return this.baseRadius - (this.computedEmptyThickness + offset);
         case "out-over":
-          if (this.computedEmptyThickness <= this.computedThickness) {
+          if (this.computedEmptyThickness <= this.thicknessWithDot) {
             return this.baseRadius;
           }
-          return this.emptyRadius - this.computedEmptyThickness / 2 + this.computedThickness / 2;
+          return this.emptyRadius - this.computedEmptyThickness / 2 + this.thicknessWithDot / 2;
         case "bottom":
           return this.emptyRadius - this.computedEmptyThickness / 2;
         case "top":
@@ -74,31 +74,31 @@ export default {
         case "normal":
           return this.normalLineModeRadius;
         case "out":
-          return this.baseRadius - (this.computedThickness / 2 + this.computedEmptyThickness / 2 + offset);
+          return this.baseRadius - (this.thicknessWithDot / 2 + this.computedEmptyThickness / 2 + offset);
         case "out-over":
-          if (this.computedEmptyThickness <= this.computedThickness) {
-            return this.baseRadius - this.computedThickness / 2 + this.computedEmptyThickness / 2;
+          if (this.computedEmptyThickness <= this.thicknessWithDot) {
+            return this.baseRadius - this.thicknessWithDot / 2 + this.computedEmptyThickness / 2;
           }
           return this.emptyBaseRadius;
         case "bottom":
-          if (this.computedEmptyThickness < this.computedThickness / 2) {
-            return this.emptyBaseRadius - (this.computedThickness / 2 - this.computedEmptyThickness);
+          if (this.computedEmptyThickness < this.thicknessWithDot / 2) {
+            return this.emptyBaseRadius - (this.thicknessWithDot / 2 - this.computedEmptyThickness);
           }
           return this.emptyBaseRadius;
         case "top":
-          return this.emptyBaseRadius - this.computedThickness / 2;
+          return this.emptyBaseRadius - this.thicknessWithDot / 2;
         default:
           return this.emptyBaseRadius;
       }
     },
     baseRadius() {
-      return this.size / 2 - this.computedThickness / 2;
+      return this.size / 2 - this.thicknessWithDot / 2;
     },
     emptyBaseRadius() {
       return this.size / 2 - this.computedEmptyThickness / 2;
     },
     normalLineModeRadius() {
-      if (this.computedThickness < this.computedEmptyThickness) {
+      if (this.thicknessWithDot < this.computedEmptyThickness) {
         return this.emptyBaseRadius;
       }
       return this.baseRadius;
@@ -147,6 +147,11 @@ export default {
     computedThickness() {
       return this.calculateThickness(this.thickness.toString());
     },
+
+    thicknessWithDot() {
+      return this.computedThickness < this.dotSize ? this.dotSize : this.computedThickness;
+    },
+
     computedGlobalThickness() {
       return this.calculateThickness(this.globalThickness.toString());
     },

From 4d744ca2292e5dd2d0f6f000a80e3f7be39a2c0e Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 16:45:35 +0200
Subject: [PATCH 08/43] chore: merge with master

---
 src/App.vue                              | 3 +--
 src/components/Circle/CircleProgress.vue | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9c16f66..8e0f811 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,12 +43,11 @@
         :loading="loading"
         :no-data="noData"
         :progress="progress"
-        animation="default 1500 1000"
         :angle="-90"
         :legend="false"
         :dot="0"
         :thickness="10"
-        line-mode=""
+        line-mode="normal"
         :empty-thickness="10"
       />
     </div>
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index 7b2a4c2..40b8a26 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -50,7 +50,7 @@
       :style="styles"
     >
     </circle>
-    <circle-dot v-bind="$props" :radius="radius"/>
+    <circle-dot v-bind="$props"/>
   </g>
 </template>
 

From f9b66fecce27dc5d0e45bdfe68e9cbaf525db75c Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 16:58:11 +0200
Subject: [PATCH 09/43] feat: add thickness like interface for dor prop

---
 src/App.vue                              | 4 +---
 src/components/Circle/CircleDot.vue      | 2 +-
 src/components/Circle/CircleProgress.vue | 2 +-
 src/components/Circle/circleMixin.js     | 5 +++--
 src/components/interface.js              | 2 +-
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e0f811..b30ba10 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,10 +45,8 @@
         :progress="progress"
         :angle="-90"
         :legend="false"
-        :dot="0"
-        :thickness="10"
+        dot="3%"
         line-mode="normal"
-        :empty-thickness="10"
       />
     </div>
   </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 6603949..0489f9a 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -69,7 +69,7 @@ $size: 10px;
   transition-duration: 0.3s;
   box-sizing: border-box;
   display: inline-block;
-  background-color: #0000ff;
+  background-color: #ffffff;
   position: absolute;
   margin: auto;
   right: 0;
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index 40b8a26..337d0b1 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -50,7 +50,7 @@
       :style="styles"
     >
     </circle>
-    <circle-dot v-bind="$props"/>
+    <circle-dot v-if="dotSize" v-bind="$props" :id="id" :index="index" :multiple="multiple"/>
   </g>
 </template>
 
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index e14678e..2752ba5 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -194,7 +194,8 @@ export default {
     },
 
     dotSize() {
-      return isValidNumber(this.dot.size) ? this.dot.size : this.dot;
+      const value = isValidNumber(this.dot.size) ? this.dot.size : this.dot;
+      return this.calculateThickness(value);
     },
 
     styles() {
@@ -224,7 +225,7 @@ export default {
     calculateThickness(thickness) {
       const value = parseFloat(thickness);
       switch (true) {
-        case thickness.includes("%"):
+        case thickness.toString().includes("%"):
           return (value * this.size) / 100;
         default:
           return value;
diff --git a/src/components/interface.js b/src/components/interface.js
index aa562cc..bf1b9e2 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -142,7 +142,7 @@ const props = {
     default: false,
   },
   dot: {
-    type: [Number, Object],
+    type: [String, Number, Object],
     required: false,
     default: 0,
     validator: (value) => {

From 41d45f307b69305a5c1be699d35a1f5e278b23ed Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 17:02:34 +0200
Subject: [PATCH 10/43] fix: empty circle transition values

---
 src/App.vue                              | 2 +-
 src/components/Circle/CircleProgress.vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b30ba10..0048740 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,7 +45,7 @@
         :progress="progress"
         :angle="-90"
         :legend="false"
-        dot="3%"
+        dot="10%"
         line-mode="normal"
       />
     </div>
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index 337d0b1..937caf0 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -3,7 +3,6 @@
     class="ep-circle--container"
     :style="{ transition: `${animationDuration}`, transform: `rotate(${computedAngle}deg)` }"
   >
-    <!--TODO: fix transition timing function-->
     <circle
       class="ep-circle--empty"
       :r="emptyRadius"
@@ -12,7 +11,10 @@
       :stroke="computedEmptyColor"
       :stroke-dasharray="emptyDasharray"
       :fill="computedEmptyColorFill"
-      :style="{ transition: animationDuration }"
+      :style="{
+        transitionDuration: styles.transitionDuration,
+        transitionTimingFunction: styles.transitionTimingFunction,
+      }"
       :class="{ 'ep_circle--nodata': !dataIsAvailable }"
       :stroke-width="computedEmptyThickness"
     >
@@ -50,7 +52,7 @@
       :style="styles"
     >
     </circle>
-    <circle-dot v-if="dotSize" v-bind="$props" :id="id" :index="index" :multiple="multiple"/>
+    <circle-dot v-if="dotSize" v-bind="$props" :id="id" :index="index" :multiple="multiple" />
   </g>
 </template>
 

From 15f10c9624ca96f161d45b81e05e7230a67062ca Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 17:08:16 +0200
Subject: [PATCH 11/43] feat: adjust #line.mode = normal calculations
 respecting dot

---
 src/App.vue                          | 4 ++--
 src/components/Circle/circleMixin.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0048740..d4caec3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,8 +45,8 @@
         :progress="progress"
         :angle="-90"
         :legend="false"
-        dot="10%"
-        line-mode="normal"
+        dot="16%"
+        line-mode="out"
       />
     </div>
   </div>
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 2752ba5..e2c753d 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -74,7 +74,7 @@ export default {
         case "normal":
           return this.normalLineModeRadius;
         case "out":
-          return this.baseRadius - (this.thicknessWithDot / 2 + this.computedEmptyThickness / 2 + offset);
+          return this.baseRadius - (this.computedThickness / 2 + this.computedEmptyThickness / 2 + offset);
         case "out-over":
           if (this.computedEmptyThickness <= this.thicknessWithDot) {
             return this.baseRadius - this.thicknessWithDot / 2 + this.computedEmptyThickness / 2;

From b760b06e24981df4e374beb55fd505e401f0225a Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 17:15:24 +0200
Subject: [PATCH 12/43] feat: adjust #line.mode = out-over calculations
 respecting dot

---
 src/App.vue                          | 6 ++++--
 src/components/Circle/circleMixin.js | 8 ++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4caec3..2c0014d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,8 +45,10 @@
         :progress="progress"
         :angle="-90"
         :legend="false"
-        dot="16%"
-        line-mode="out"
+        :thickness="20"
+        :empty-thickness="10"
+        dot="10"
+        line-mode="out-over"
       />
     </div>
   </div>
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index e2c753d..5d5a318 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -51,10 +51,10 @@ export default {
         case "in":
           return this.baseRadius - (this.computedEmptyThickness + offset);
         case "out-over":
-          if (this.computedEmptyThickness <= this.thicknessWithDot) {
+          if (this.computedEmptyThickness <= this.computedThickness) {
             return this.baseRadius;
           }
-          return this.emptyRadius - this.computedEmptyThickness / 2 + this.thicknessWithDot / 2;
+          return this.emptyRadius - this.computedEmptyThickness / 2 + this.computedThickness / 2;
         case "bottom":
           return this.emptyRadius - this.computedEmptyThickness / 2;
         case "top":
@@ -76,8 +76,8 @@ export default {
         case "out":
           return this.baseRadius - (this.computedThickness / 2 + this.computedEmptyThickness / 2 + offset);
         case "out-over":
-          if (this.computedEmptyThickness <= this.thicknessWithDot) {
-            return this.baseRadius - this.thicknessWithDot / 2 + this.computedEmptyThickness / 2;
+          if (this.computedEmptyThickness <= this.computedThickness) {
+            return this.baseRadius - this.computedThickness / 2 + this.computedEmptyThickness / 2;
           }
           return this.emptyBaseRadius;
         case "bottom":

From d05c729e531defec47beff0d73a139fba4e88ea3 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 18:00:28 +0200
Subject: [PATCH 13/43] feat: adjust #line.mode = in calculations respecting
 dot

---
 .eslintrc.js                         |  1 +
 src/App.vue                          |  7 ++++---
 src/components/Circle/CircleDot.vue  |  2 +-
 src/components/Circle/circleMixin.js | 11 ++++++++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e0bf101..35873a4 100644
--- a/.eslintrc.js
+++ b/.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",
diff --git a/src/App.vue b/src/App.vue
index 2c0014d..6029681 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,12 +43,13 @@
         :loading="loading"
         :no-data="noData"
         :progress="progress"
+        animation="rs 2000 500"
         :angle="-90"
         :legend="false"
-        :thickness="20"
+        :thickness="10"
         :empty-thickness="10"
-        dot="10"
-        line-mode="out-over"
+        :dot="60"
+        line-mode="in 5"
       />
     </div>
   </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 0489f9a..16e2083 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -69,7 +69,7 @@ $size: 10px;
   transition-duration: 0.3s;
   box-sizing: border-box;
   display: inline-block;
-  background-color: #ffffff;
+  background-color: #ff0000;
   position: absolute;
   margin: auto;
   right: 0;
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 5d5a318..7ab13b6 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -49,7 +49,7 @@ export default {
         case "normal":
           return this.normalLineModeRadius;
         case "in":
-          return this.baseRadius - (this.computedEmptyThickness + offset);
+          return this.emptyRadius - (this.computedEmptyThickness / 2 + this.computedThickness / 2 + offset);
         case "out-over":
           if (this.computedEmptyThickness <= this.computedThickness) {
             return this.baseRadius;
@@ -73,6 +73,12 @@ export default {
       switch (this.parsedLineMode.mode) {
         case "normal":
           return this.normalLineModeRadius;
+        case "in":
+          const dotSizeLimit = this.computedThickness / 2 + this.computedEmptyThickness + offset;
+          if (this.dotSize / 2 > dotSizeLimit) {
+            return this.emptyBaseRadius - (this.dotSize / 2 - dotSizeLimit);
+          }
+          return this.emptyBaseRadius;
         case "out":
           return this.baseRadius - (this.computedThickness / 2 + this.computedEmptyThickness / 2 + offset);
         case "out-over":
@@ -197,6 +203,9 @@ export default {
       const value = isValidNumber(this.dot.size) ? this.dot.size : this.dot;
       return this.calculateThickness(value);
     },
+    dotToThicknessDifference() {
+      return this.dotSize - this.computedThickness;
+    },
 
     styles() {
       return {

From 98ebdb21638df74b54feb25f6f456b8e5e5a5311 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 18:26:14 +0200
Subject: [PATCH 14/43] feat: adjust #line.mode = in-over calculations
 respecting dot

---
 src/App.vue                          | 6 +++---
 src/components/Circle/circleMixin.js | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6029681..1e275f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,10 +46,10 @@
         animation="rs 2000 500"
         :angle="-90"
         :legend="false"
-        :thickness="10"
+        :thickness="20"
         :empty-thickness="10"
-        :dot="60"
-        line-mode="in 5"
+        :dot="50"
+        line-mode="out-over"
       />
     </div>
   </div>
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 7ab13b6..8315251 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -79,6 +79,11 @@ export default {
             return this.emptyBaseRadius - (this.dotSize / 2 - dotSizeLimit);
           }
           return this.emptyBaseRadius;
+        case "in-over":
+          if (this.dotToThicknessDifference > 0) {
+            return this.emptyBaseRadius - this.dotToThicknessDifference / 2;
+          }
+          return this.emptyBaseRadius;
         case "out":
           return this.baseRadius - (this.computedThickness / 2 + this.computedEmptyThickness / 2 + offset);
         case "out-over":

From 05c91304d94ddb7a8d1cb960748d6e7a0c2b9c34 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 20:14:34 +0200
Subject: [PATCH 15/43] fix: dot rotation calculation based on #angle

---
 src/App.vue                               | 25 ++++++++++++-----------
 src/components/Circle/CircleContainer.vue |  4 +++-
 src/components/Circle/CircleDot.vue       | 17 +++++++--------
 src/components/Circle/CircleProgress.vue  | 10 +++++----
 4 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1e275f6..d4ed000 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,18 +39,19 @@
         <input type="checkbox" v-model="circles[2].loading" />
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
-      <vue-ellipse-progress
-        :loading="loading"
-        :no-data="noData"
-        :progress="progress"
-        animation="rs 2000 500"
-        :angle="-90"
-        :legend="false"
-        :thickness="20"
-        :empty-thickness="10"
-        :dot="50"
-        line-mode="out-over"
-      />
+      <div style="border: 1px solid red; display: inline-block">
+        <vue-ellipse-progress
+          :loading="loading"
+          :no-data="noData"
+          :progress="progress"
+          :angle="-90"
+          :legend="false"
+          :thickness="25"
+          :empty-thickness="10"
+          :dot="10"
+          line-mode="normal"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 9c87f4c..20ac2fd 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/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 "./HalfCircleProgress.vue";
 import CircleProgress from "./CircleProgress.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: {
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 16e2083..2164154 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -26,16 +26,16 @@ export default {
     dotContainerSize() {
       return this.radius * 2 + this.dotSize;
     },
-    dotContainerStyle() {
-      let rotation = 0;
+    dotContainerRotation() {
+      let rotation = this.angle + 90;
       if (this.isInitialized && !this.loading && this.dataIsAvailable) {
-        rotation = this.angle * -1 + (this.computedProgress * 360) / 100;
-      } else {
-        rotation = this.angle * -1;
+        rotation += (this.computedProgress * 360) / 100;
       }
-
+      return rotation;
+    },
+    dotContainerStyle() {
       return {
-        transform: `rotate(${rotation}deg)`,
+        transform: `rotate(${this.dotContainerRotation}deg)`,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
       };
@@ -44,6 +44,7 @@ export default {
       return {
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         "--ep-dot-size": this.dotSize,
+        "--ep-dot-rotation": this.dotContainerRotation,
         height: `${this.dotSize}px`,
         width: `${this.dotSize}px`,
         borderRadius: `${this.dotSize / 2}px`,
@@ -59,7 +60,7 @@ export default {
 <style scoped lang="scss">
 $size: 10px;
 .ep-circle--progress__dot-container {
-  border: 0px red solid;
+  border: 1px solid green;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index 937caf0..e3c3c12 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -1,7 +1,11 @@
 <template>
   <g
     class="ep-circle--container"
-    :style="{ transition: `${animationDuration}`, transform: `rotate(${computedAngle}deg)` }"
+    :style="{
+      transitionDuration: styles.transitionDuration,
+      transitionTimingFunction: styles.transitionTimingFunction,
+      transform: `rotate(${computedAngle}deg)`,
+    }"
   >
     <circle
       class="ep-circle--empty"
@@ -52,18 +56,16 @@
       :style="styles"
     >
     </circle>
-    <circle-dot v-if="dotSize" v-bind="$props" :id="id" :index="index" :multiple="multiple" />
   </g>
 </template>
 
 <script>
 import CircleMixin from "./circleMixin";
 import FadeInTransition from "../FadeInTransition.vue";
-import CircleDot from "./CircleDot.vue";
 
 export default {
   name: "CircleProgress",
-  components: { CircleDot, FadeInTransition },
+  components: { FadeInTransition },
   mixins: [CircleMixin],
   computed: {
     progressOffset() {

From 5da771f1ccd002cadddb083010d5d4491c180fdf Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 20:31:03 +0200
Subject: [PATCH 16/43] feat: add possibility to inject custom css to dot

---
 src/App.vue                         | 4 ++--
 src/components/Circle/CircleDot.vue | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ed000..eee3138 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,7 +39,7 @@
         <input type="checkbox" v-model="circles[2].loading" />
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
-      <div style="border: 1px solid red; display: inline-block">
+      <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
           :loading="loading"
           :no-data="noData"
@@ -48,7 +48,7 @@
           :legend="false"
           :thickness="25"
           :empty-thickness="10"
-          :dot="10"
+          :dot="{ size: 20 }"
           line-mode="normal"
         />
       </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 2164154..8a17c8f 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -42,12 +42,13 @@ export default {
     },
     dotStyle() {
       return {
+        borderRadius: `${this.dotSize / 2}px`,
+        width: `${this.dotSize}px`,
+        ...this.dot,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         "--ep-dot-size": this.dotSize,
         "--ep-dot-rotation": this.dotContainerRotation,
         height: `${this.dotSize}px`,
-        width: `${this.dotSize}px`,
-        borderRadius: `${this.dotSize / 2}px`,
       };
     },
     isHidden() {
@@ -60,7 +61,7 @@ export default {
 <style scoped lang="scss">
 $size: 10px;
 .ep-circle--progress__dot-container {
-  border: 1px solid green;
+  border: 0px solid green;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;

From 23d9eaf16811cb64fac92da0343853549c4e91d4 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 16 May 2020 21:09:11 +0200
Subject: [PATCH 17/43] feat: add dot parser

---
 src/App.vue                          |  6 +++---
 src/components/Circle/CircleDot.vue  |  1 +
 src/components/Circle/circleMixin.js | 11 ++++++++---
 src/components/optionsParser.js      | 21 ++++++++++++++++++++-
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index eee3138..39bafd0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,9 +46,9 @@
           :progress="progress"
           :angle="-90"
           :legend="false"
-          :thickness="25"
-          :empty-thickness="10"
-          :dot="{ size: 20 }"
+          :thickness="10"
+          :empty-thickness="4"
+          :dot="{ size: 10, backgroundColor: 'rgba(123,256,200,0.5)' }"
           line-mode="normal"
         />
       </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 8a17c8f..fa4588a 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -44,6 +44,7 @@ export default {
       return {
         borderRadius: `${this.dotSize / 2}px`,
         width: `${this.dotSize}px`,
+        backgroundColor: this.dotColor,
         ...this.dot,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         "--ep-dot-size": this.dotSize,
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 8315251..490b4f8 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -1,5 +1,5 @@
 import { isValidNumber } from "../../utils";
-import { animationParser, dashParser, lineModeParser } from "../optionsParser";
+import { animationParser, dashParser, lineModeParser, dotParser } from "../optionsParser";
 import { simplifiedProps } from "../interface";
 
 const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));
@@ -204,9 +204,14 @@ export default {
       return previousCirclesGap + currentCircleGap;
     },
 
+    parsedDot() {
+      return dotParser(this.dot);
+    },
     dotSize() {
-      const value = isValidNumber(this.dot.size) ? this.dot.size : this.dot;
-      return this.calculateThickness(value);
+      return this.calculateThickness(this.parsedDot.size);
+    },
+    dotColor() {
+      return this.parsedDot.color;
     },
     dotToThicknessDifference() {
       return this.dotSize - this.computedThickness;
diff --git a/src/components/optionsParser.js b/src/components/optionsParser.js
index 07b388e..c71d0bd 100644
--- a/src/components/optionsParser.js
+++ b/src/components/optionsParser.js
@@ -29,4 +29,23 @@ const dashParser = (dash) => {
   };
 };
 
-export { lineModeParser, animationParser, dashParser };
+const dotParser = (dot) => {
+  let dotSize = 0;
+  let dotColor = "white";
+  let styles = {};
+  if (typeof dot !== "object") {
+    const dotConfig = dot.toString().trim().split(" ");
+    dotSize = isValidNumber(dotConfig[0]) ? dotConfig[0] : 0;
+    dotColor = dotConfig[1] || "white";
+  } else {
+    dotSize = dot.size || 0;
+    styles = dot;
+  }
+  return {
+    ...styles,
+    size: dotSize,
+    color: dotColor,
+  };
+};
+
+export { lineModeParser, animationParser, dashParser, dotParser };

From 749ed2cf998a705ec90e64d96952ecfdc203e688 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergatam@yandex.com>
Date: Sat, 16 May 2020 21:19:44 +0200
Subject: [PATCH 18/43] doc: add bottom as value to #lineMode overview

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4950c0c..df567fb 100644
--- a/README.md
+++ b/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" |

From 0ee796ecd64d485112a358472c1cfe784620cf64 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 17 May 2020 12:38:07 +0200
Subject: [PATCH 19/43] fix: reduces produced CSS size by moving animations to
 circle container

---
 src/App.vue                                  |  1 +
 src/components/Circle/CircleContainer.vue    |  4 +++-
 src/components/Circle/CircleDot.vue          | 13 +++++++++---
 src/components/Circle/CircleProgress.vue     |  2 --
 src/components/Circle/HalfCircleProgress.vue |  2 --
 src/components/interface.js                  |  1 +
 src/styles/animations.scss                   | 14 +++++++++++++
 src/styles/animationsUsage.scss              | 21 +++++++++++++++-----
 8 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 39bafd0..84bc5d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,6 +48,7 @@
           :legend="false"
           :thickness="10"
           :empty-thickness="4"
+          animation="rs"
           :dot="{ size: 10, backgroundColor: 'rgba(123,256,200,0.5)' }"
           line-mode="normal"
         />
diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 20ac2fd..6f54d12 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/src/components/Circle/CircleContainer.vue
@@ -60,7 +60,9 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
+@import "~@/styles/animations.scss";
+@import "~@/styles/animationsUsage.scss";
 g.ep-circle {
   transition: inherit;
   transform-origin: 50% 50%;
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index fa4588a..8098f0a 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -3,6 +3,7 @@
     :x="dotContainerPosition"
     :y="dotContainerPosition"
     class="ep-circle--progress__dot-container"
+    :class="animationClass"
     :width="dotContainerSize"
     :height="dotContainerSize"
     :style="dotContainerStyle"
@@ -38,6 +39,9 @@ export default {
         transform: `rotate(${this.dotContainerRotation}deg)`,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
+        "--ep-dot-size": this.dotSize,
+        "--ep-dot-start": this.dotStart,
+        "--ep-dot-end": this.dotEnd,
       };
     },
     dotStyle() {
@@ -47,11 +51,15 @@ export default {
         backgroundColor: this.dotColor,
         ...this.dot,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
-        "--ep-dot-size": this.dotSize,
-        "--ep-dot-rotation": this.dotContainerRotation,
         height: `${this.dotSize}px`,
       };
     },
+    dotStart() {
+      return this.angle + 90;
+    },
+    dotEnd() {
+      return this.dotStart + (this.computedProgress * 360) / 100;
+    },
     isHidden() {
       return this.loading || !this.dataIsAvailable;
     },
@@ -60,7 +68,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$size: 10px;
 .ep-circle--progress__dot-container {
   border: 0px solid green;
   transform-origin: center center;
diff --git a/src/components/Circle/CircleProgress.vue b/src/components/Circle/CircleProgress.vue
index e3c3c12..9cd2c95 100644
--- a/src/components/Circle/CircleProgress.vue
+++ b/src/components/Circle/CircleProgress.vue
@@ -89,6 +89,4 @@ export default {
 .ep-circle--container {
   transform-origin: 50% 50%;
 }
-@import "~@/styles/animations.scss";
-@import "~@/styles/animationsUsage.scss";
 </style>
diff --git a/src/components/Circle/HalfCircleProgress.vue b/src/components/Circle/HalfCircleProgress.vue
index 1cd24e1..eac0d3b 100644
--- a/src/components/Circle/HalfCircleProgress.vue
+++ b/src/components/Circle/HalfCircleProgress.vue
@@ -88,6 +88,4 @@ export default {
 .ep-half-circle--container {
   transform-origin: 50% 50%;
 }
-@import "~@/styles/animations.scss";
-@import "~@/styles/animationsUsage.scss";
 </style>
diff --git a/src/components/interface.js b/src/components/interface.js
index bf1b9e2..239833e 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -83,6 +83,7 @@ const props = {
     validator: (value) => {
       const config = value.split(" ");
       const isValidType = ["default", "rs", "loop", "reverse", "bounce"].some((val) => val === config[0]);
+      // FIXME: config[1]
       const isValidDuration = config[0] ? parseFloat(config[1]) > 0 : true;
       const isValidDelay = config[2] ? parseFloat(config[2]) > 0 : true;
 
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index e8c1479..029e82a 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -121,3 +121,17 @@
     }
   }
 }
+
+@mixin ep-dot--init__rs ($dotStart, $dotEnd) {
+  @keyframes ep-dot--init__rs {
+    0% {
+      transform: rotate(#{$dotStart}deg);
+    }
+    50% {
+      transform: rotate(#{$dotStart + 360}deg);
+    }
+    100% {
+      transform: rotate(#{$dotEnd}deg);
+    }
+  }
+}
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 642938a..657f1af 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -1,22 +1,18 @@
 .ep-circle--progress {
+  animation-timing-function: ease-in-out;
   &.animation__default {
-    animation-timing-function: ease-in-out;
     animation-name: ep-progress--init__default;
   }
   &.animation__rs {
-    animation-timing-function: ease-out;
     animation-name: ep-progress--init__rs;
   }
   &.animation__bounce {
-    animation-timing-function: ease-out;
     animation-name: ep-progress--init__bounce;
   }
   &.animation__reverse {
-    animation-timing-function: ease-out;
     animation-name: ep-progress--init__reverse;
   }
   &.animation__loop {
-    animation-timing-function: ease-out;
     animation-name: ep-progress--init__loop;
   }
 }
@@ -45,6 +41,20 @@
   }
 }
 
+.ep-circle--progress__dot-container {
+  animation-duration: 2s !important;
+  animation-timing-function: ease-in-out;
+  &.animation__rs {
+    animation-name: ep-dot--init__rs;
+  }
+  &.animation__bounce {
+  }
+  &.animation__reverse {
+  }
+  &.animation__loop {
+  }
+}
+
 @include ep-progress--init__default(var(--ep-stroke-offset), var(--ep-circumference));
 @include ep-progress--init__rs(var(--ep-stroke-offset), var(--ep-circumference));
 @include ep-progress--init__bounce(
@@ -67,3 +77,4 @@
 @include ep-half-progress--loading(var(--ep-loading-stroke-offset), var(--ep-circumference),
                 var(--ep-negative-circumference));
 @include ep-progress--loading__rotation();
+@include ep-dot--init__rs(var(--ep-dot-start), var(--ep-dot-end));

From 7e26deafbc5c96a1bb4ce4cf2711e83526ed6624 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 17 May 2020 12:53:31 +0200
Subject: [PATCH 20/43] feat: add dot rs animation

---
 src/App.vue                         | 4 ++--
 src/components/Circle/CircleDot.vue | 5 +++--
 src/styles/animations.scss          | 8 ++++----
 src/styles/animationsUsage.scss     | 2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 84bc5d6..ab31ee7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,8 +48,8 @@
           :legend="false"
           :thickness="10"
           :empty-thickness="4"
-          animation="rs"
-          :dot="{ size: 10, backgroundColor: 'rgba(123,256,200,0.5)' }"
+          animation="rs 2000"
+          :dot="{ size: 20, backgroundColor: 'rgba(4,256,4,1)' }"
           line-mode="normal"
         />
       </div>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 8098f0a..8f51f9f 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -40,8 +40,9 @@ export default {
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
         "--ep-dot-size": this.dotSize,
-        "--ep-dot-start": this.dotStart,
-        "--ep-dot-end": this.dotEnd,
+        "--ep-dot-start": `${this.dotStart}deg`,
+        "--ep-dot-360": `${this.dotStart + 360}deg`,
+        "--ep-dot-end": `${this.dotEnd}deg`,
       };
     },
     dotStyle() {
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 029e82a..a56de13 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -122,16 +122,16 @@
   }
 }
 
-@mixin ep-dot--init__rs ($dotStart, $dotEnd) {
+@mixin ep-dot--init__rs ($dotStart, $dotEnd, $dot360) {
   @keyframes ep-dot--init__rs {
     0% {
-      transform: rotate(#{$dotStart}deg);
+      transform: rotate($dotStart);
     }
     50% {
-      transform: rotate(#{$dotStart + 360}deg);
+      transform: rotate($dot360);
     }
     100% {
-      transform: rotate(#{$dotEnd}deg);
+      transform: rotate($dotEnd);
     }
   }
 }
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 657f1af..89d8e1d 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -77,4 +77,4 @@
 @include ep-half-progress--loading(var(--ep-loading-stroke-offset), var(--ep-circumference),
                 var(--ep-negative-circumference));
 @include ep-progress--loading__rotation();
-@include ep-dot--init__rs(var(--ep-dot-start), var(--ep-dot-end));
+@include ep-dot--init__rs(var(--ep-dot-start), var(--ep-dot-end), var(--ep-dot-360));

From 42c0adf3295330fc1e89769c81c3ec63aac06cee Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 17 May 2020 13:13:54 +0200
Subject: [PATCH 21/43] feat: add dot loop animation

---
 src/App.vue                         |  2 +-
 src/components/Circle/CircleDot.vue | 14 +++++++++++++-
 src/styles/animations.scss          | 15 +++++++++++++++
 src/styles/animationsUsage.scss     |  1 +
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ab31ee7..2bf18e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,7 +48,7 @@
           :legend="false"
           :thickness="10"
           :empty-thickness="4"
-          animation="rs 2000"
+          animation="loop 2000"
           :dot="{ size: 20, backgroundColor: 'rgba(4,256,4,1)' }"
           line-mode="normal"
         />
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 8f51f9f..67d311b 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -41,10 +41,22 @@ export default {
         transitionTimingFunction: "ease-in-out",
         "--ep-dot-size": this.dotSize,
         "--ep-dot-start": `${this.dotStart}deg`,
-        "--ep-dot-360": `${this.dotStart + 360}deg`,
         "--ep-dot-end": `${this.dotEnd}deg`,
+        ...this.dotContainerAnimationStyle,
       };
     },
+    dotContainerAnimationStyle() {
+      const styles = {
+        rs: {
+          "--ep-dot-360": `${this.dotStart + 360}deg`,
+        },
+        loop: {
+          "--ep-dot-360": `${this.dotStart + 360}deg`,
+          "--ep-dot-loop-end": `${this.dotStart + 360 + this.dotEnd}deg`,
+        },
+      };
+      return styles[this.parsedAnimation.type];
+    },
     dotStyle() {
       return {
         borderRadius: `${this.dotSize / 2}px`,
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index a56de13..d2e8fe4 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -135,3 +135,18 @@
     }
   }
 }
+
+@keyframes ep-dot--init__loop {
+  0% {
+    transform: rotate(var(--ep-dot-start));
+  }
+  33% {
+    transform: rotate(var(--ep-dot-360));
+  }
+  66% {
+    transform: rotate(var(--ep-dot-360));
+  }
+  100% {
+    transform: rotate(var(--ep-dot-loop-end));
+  }
+}
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 89d8e1d..aa94f8f 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -52,6 +52,7 @@
   &.animation__reverse {
   }
   &.animation__loop {
+    animation-name: ep-dot--init__loop;
   }
 }
 

From 6fb1586bbe3af8041b275d520697a97156b131a4 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 17 May 2020 13:18:14 +0200
Subject: [PATCH 22/43] feat: add dot reverse animation

---
 src/App.vue                         |  2 +-
 src/components/Circle/CircleDot.vue |  5 +----
 src/styles/animations.scss          | 12 ++++++++++++
 src/styles/animationsUsage.scss     |  1 +
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2bf18e1..4f9aae4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,7 +48,7 @@
           :legend="false"
           :thickness="10"
           :empty-thickness="4"
-          animation="loop 2000"
+          animation="reverse 2000"
           :dot="{ size: 20, backgroundColor: 'rgba(4,256,4,1)' }"
           line-mode="normal"
         />
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 67d311b..74f37e7 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -42,16 +42,13 @@ export default {
         "--ep-dot-size": this.dotSize,
         "--ep-dot-start": `${this.dotStart}deg`,
         "--ep-dot-end": `${this.dotEnd}deg`,
+        "--ep-dot-360": `${this.dotStart + 360}deg`,
         ...this.dotContainerAnimationStyle,
       };
     },
     dotContainerAnimationStyle() {
       const styles = {
-        rs: {
-          "--ep-dot-360": `${this.dotStart + 360}deg`,
-        },
         loop: {
-          "--ep-dot-360": `${this.dotStart + 360}deg`,
           "--ep-dot-loop-end": `${this.dotStart + 360 + this.dotEnd}deg`,
         },
       };
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index d2e8fe4..103f9f9 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -150,3 +150,15 @@
     transform: rotate(var(--ep-dot-loop-end));
   }
 }
+
+@keyframes ep-dot--init__reverse {
+  0% {
+    transform: rotate(var(--ep-dot-360));
+  }
+  50% {
+    transform: rotate(var(--ep-dot-360));
+  }
+  100% {
+    transform: rotate(var(--ep-dot-end));
+  }
+}
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index aa94f8f..0899fef 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -50,6 +50,7 @@
   &.animation__bounce {
   }
   &.animation__reverse {
+    animation-name: ep-dot--init__reverse;
   }
   &.animation__loop {
     animation-name: ep-dot--init__loop;

From fd502a8d6ffc4768cd293907bf02d622d901a542 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 17 May 2020 13:57:47 +0200
Subject: [PATCH 23/43] feat: add dot bounce animation handling

---
 src/App.vue                         | 16 +++++++++++++++-
 src/components/Circle/CircleDot.vue |  5 +++++
 src/styles/animations.scss          | 12 ++++++++++++
 src/styles/animationsUsage.scss     |  3 ++-
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4f9aae4..8be13f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,11 +48,25 @@
           :legend="false"
           :thickness="10"
           :empty-thickness="4"
-          animation="reverse 2000"
+          animation="bounce 5000"
           :dot="{ size: 20, backgroundColor: 'rgba(4,256,4,1)' }"
           line-mode="normal"
         />
       </div>
+      <!--<vue-ellipse-progress
+        :loading="loading"
+        :no-data="noData"
+        :progress="progress"
+        :angle="-90"
+        :legend="false"
+        :thickness="100"
+        dash="strict 60 0.95"
+        :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>
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 74f37e7..024f406 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -39,6 +39,7 @@ export default {
         transform: `rotate(${this.dotContainerRotation}deg)`,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
+        "animation-duration": this.animationDuration,
         "--ep-dot-size": this.dotSize,
         "--ep-dot-start": `${this.dotStart}deg`,
         "--ep-dot-end": `${this.dotEnd}deg`,
@@ -51,6 +52,10 @@ export default {
         loop: {
           "--ep-dot-loop-end": `${this.dotStart + 360 + this.dotEnd}deg`,
         },
+        bounce: {
+          opacity: 0,
+          "animation-duration": `${this.parsedAnimation.duration + 500}ms`,
+        },
       };
       return styles[this.parsedAnimation.type];
     },
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 103f9f9..22de3fe 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -162,3 +162,15 @@
     transform: rotate(var(--ep-dot-end));
   }
 }
+
+@keyframes ep-dot--init__bounce {
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 0899fef..f45c577 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -42,12 +42,13 @@
 }
 
 .ep-circle--progress__dot-container {
-  animation-duration: 2s !important;
   animation-timing-function: ease-in-out;
   &.animation__rs {
     animation-name: ep-dot--init__rs;
   }
   &.animation__bounce {
+    opacity: 1 !important;
+    animation-name: ep-dot--init__bounce;
   }
   &.animation__reverse {
     animation-name: ep-dot--init__reverse;

From f5464f6bd9851ed7102f5d3e64ecbea045f2e2b5 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 18:01:19 +0200
Subject: [PATCH 24/43] feat: adjust dot for half circle

---
 src/App.vue                         | 11 ++++++-----
 src/components/Circle/CircleDot.vue | 27 +++++++++++++++------------
 src/styles/animations.scss          | 12 ++++++++++++
 src/styles/animationsUsage.scss     | 12 +++++++++++-
 4 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8be13f2..3766c87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,12 +44,13 @@
           :loading="loading"
           :no-data="noData"
           :progress="progress"
-          :angle="-90"
-          :legend="false"
+          :angle="190"
+          :legend="true"
           :thickness="10"
+          :animation="animation"
           :empty-thickness="4"
-          animation="bounce 5000"
-          :dot="{ size: 20, backgroundColor: 'rgba(4,256,4,1)' }"
+          half
+          :dot="{ size: 20 }"
           line-mode="normal"
         />
       </div>
@@ -138,7 +139,7 @@ export default {
       ],
       radial: true,
     },
-    animation: "rs 200 5000",
+    animation: "rs 1000 500",
   }),
   computed: {
     tasksDonePercent() {
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 024f406..429ffef 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -3,7 +3,7 @@
     :x="dotContainerPosition"
     :y="dotContainerPosition"
     class="ep-circle--progress__dot-container"
-    :class="animationClass"
+    :class="dotContainerClasses"
     :width="dotContainerSize"
     :height="dotContainerSize"
     :style="dotContainerStyle"
@@ -28,11 +28,13 @@ export default {
       return this.radius * 2 + this.dotSize;
     },
     dotContainerRotation() {
-      let rotation = this.angle + 90;
       if (this.isInitialized && !this.loading && this.dataIsAvailable) {
-        rotation += (this.computedProgress * 360) / 100;
+        return this.dotEnd;
       }
-      return rotation;
+      return this.dotStart;
+    },
+    dotContainerFullRotationDeg() {
+      return this.half ? 180 : 360;
     },
     dotContainerStyle() {
       return {
@@ -40,17 +42,20 @@ export default {
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
         "animation-duration": this.animationDuration,
-        "--ep-dot-size": this.dotSize,
         "--ep-dot-start": `${this.dotStart}deg`,
         "--ep-dot-end": `${this.dotEnd}deg`,
-        "--ep-dot-360": `${this.dotStart + 360}deg`,
+        "--ep-dot-360": `${this.dotStart + this.dotContainerFullRotationDeg}deg`,
         ...this.dotContainerAnimationStyle,
       };
     },
+    dotContainerClasses() {
+      return [this.animationClass, !this.half || "ep-half-circle-progress__dot"];
+    },
     dotContainerAnimationStyle() {
       const styles = {
         loop: {
-          "--ep-dot-loop-end": `${this.dotStart + 360 + this.dotEnd}deg`,
+          opacity: this.half ? 0 : 1,
+          "--ep-dot-loop-end": `${this.dotStart + this.dotContainerFullRotationDeg + this.dotEnd}deg`,
         },
         bounce: {
           opacity: 0,
@@ -70,10 +75,10 @@ export default {
       };
     },
     dotStart() {
-      return this.angle + 90;
+      return this.half ? this.angle - 90 : this.angle + 90;
     },
     dotEnd() {
-      return this.dotStart + (this.computedProgress * 360) / 100;
+      return this.dotStart + (this.computedProgress * this.dotContainerFullRotationDeg) / 100;
     },
     isHidden() {
       return this.loading || !this.dataIsAvailable;
@@ -84,7 +89,7 @@ export default {
 
 <style scoped lang="scss">
 .ep-circle--progress__dot-container {
-  border: 0px solid green;
+  // border: 0px solid green;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
@@ -93,8 +98,6 @@ export default {
 .ep-circle--progress__dot {
   transition-duration: 0.3s;
   box-sizing: border-box;
-  display: inline-block;
-  background-color: #ff0000;
   position: absolute;
   margin: auto;
   right: 0;
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 22de3fe..17604f9 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -174,3 +174,15 @@
     opacity: 1;
   }
 }
+
+@keyframes ep-dot--init__disabled {
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index f45c577..607ac32 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -48,7 +48,7 @@
   }
   &.animation__bounce {
     opacity: 1 !important;
-    animation-name: ep-dot--init__bounce;
+    animation-name: ep-dot--init__disabled;
   }
   &.animation__reverse {
     animation-name: ep-dot--init__reverse;
@@ -56,6 +56,16 @@
   &.animation__loop {
     animation-name: ep-dot--init__loop;
   }
+  &.ep-half-circle-progress__dot{
+    &.animation__reverse {
+      opacity: 1 !important;
+      animation-name: ep-dot--init__disabled;
+    }
+    &.animation__loop {
+      opacity: 1 !important;
+      animation-name: ep-dot--init__disabled;
+    }
+  }
 }
 
 @include ep-progress--init__default(var(--ep-stroke-offset), var(--ep-circumference));

From 2d56b3e79b6eaf122bebf5065cd2fa854e3d59bf Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 18:09:06 +0200
Subject: [PATCH 25/43] fix_ apply consistent animation options to half circle

---
 src/App.vue                                  |  2 +-
 src/components/Circle/HalfCircleProgress.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3766c87..3749556 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,7 +44,7 @@
           :loading="loading"
           :no-data="noData"
           :progress="progress"
-          :angle="190"
+          :angle="0"
           :legend="true"
           :thickness="10"
           :animation="animation"
diff --git a/src/components/Circle/HalfCircleProgress.vue b/src/components/Circle/HalfCircleProgress.vue
index eac0d3b..d3c53d6 100644
--- a/src/components/Circle/HalfCircleProgress.vue
+++ b/src/components/Circle/HalfCircleProgress.vue
@@ -1,7 +1,11 @@
 <template>
   <g
     class="ep-half-circle--container"
-    :style="{ transition: `${animationDuration}`, transform: `rotate(${computedAngle}deg)` }"
+    :style="{
+      transitionDuration: styles.transitionDuration,
+      transitionTimingFunction: styles.transitionTimingFunction,
+      transform: `rotate(${computedAngle}deg)`,
+    }"
   >
     <path
       :stroke-width="computedEmptyThickness"
@@ -11,7 +15,10 @@
       :d="emptyPath"
       :stroke-linecap="line"
       :stroke-dasharray="emptyDasharray"
-      :style="{ transition: animationDuration }"
+      :style="{
+        transitionDuration: styles.transitionDuration,
+        transitionTimingFunction: styles.transitionTimingFunction,
+      }"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
     >
     </path>

From edc1d5111cfc3f904478d53f02ea93c25887cb9e Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 19:27:12 +0200
Subject: [PATCH 26/43] fix: correct multiple circles alignment for thickness
 with percent value

---
 src/App.vue                          | 8 +++-----
 src/components/Circle/circleMixin.js | 5 ++++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3749556..3eef40e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,15 +42,13 @@
       <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
           :loading="loading"
+          :data="circles"
           :no-data="noData"
           :progress="progress"
           :angle="0"
           :legend="true"
-          :thickness="10"
           :animation="animation"
-          :empty-thickness="4"
           half
-          :dot="{ size: 20 }"
           line-mode="normal"
         />
       </div>
@@ -82,8 +80,8 @@ export default {
   data: () => ({
     line: "round",
     circles: [
-      { progress: 25, color: "red", thickness: 5 },
-      { progress: 35, color: "blue", gap: 0, thickness: 5 },
+      { progress: 25, color: "red" },
+      { progress: 35, color: "blue", gap: 0, thickness: "4%" },
       { progress: 55, color: "green" },
     ],
     determinate: false,
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 490b4f8..5814708 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -196,7 +196,10 @@ export default {
       const previousCirclesGap = this.data
         .filter((data, i) => i < this.index)
         .map((data, n) => {
-          const thickness = isValidNumber(data.thickness) ? data.thickness : this.computedGlobalThickness;
+          debugger;
+          const thickness = isValidNumber(data.thickness)
+            ? this.calculateThickness(data.thickness)
+            : this.computedGlobalThickness;
           const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
           return n > 0 ? thickness + gap : thickness;
         })

From 500d12e030e0a08d8d4cf6f2fd05c782296d420d Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 19:38:58 +0200
Subject: [PATCH 27/43] fix: improve multiple circles alignment calculation
 performance

---
 src/components/Circle/circleMixin.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 5814708..612114a 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -193,18 +193,16 @@ export default {
     previousCirclesThickness() {
       if (this.index === 0) return 0;
       const currentCircleGap = isValidNumber(this.gap) ? this.gap : this.globalGap;
-      const previousCirclesGap = this.data
-        .filter((data, i) => i < this.index)
-        .map((data, n) => {
-          debugger;
-          const thickness = isValidNumber(data.thickness)
-            ? this.calculateThickness(data.thickness)
-            : this.computedGlobalThickness;
-          const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
-          return n > 0 ? thickness + gap : thickness;
-        })
-        .reduce((acc, current) => acc + current);
-      return previousCirclesGap + currentCircleGap;
+      const previousCirclesThickness = [];
+      for (let i = 0; i < this.index; i++) {
+        const data = this.data[i];
+        const thickness = isValidNumber(data.thickness)
+          ? this.calculateThickness(data.thickness)
+          : this.computedGlobalThickness;
+        const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
+        previousCirclesThickness.push(i > 0 ? thickness + gap : thickness);
+      }
+      return previousCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
     },
 
     parsedDot() {

From da29e5886ccfbf67e6dc8804bff6c1f8d513a4ac Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 20:19:40 +0200
Subject: [PATCH 28/43] feat: integrate dot with multiple circles

---
 .eslintrc.js                              |  2 +-
 src/App.vue                               | 12 +++++++-----
 src/components/Circle/CircleContainer.vue |  4 ++++
 src/components/Circle/circleMixin.js      | 15 ++++++++++++---
 src/components/VueEllipseProgress.vue     |  1 +
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 35873a4..d31f6c5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,7 +14,7 @@ module.exports = {
     "max-len": [2, 120, 8],
     "no-restricted-syntax": "off",
     "guard-for-in": "off",
-    "no-case-declarations": "off"
+    "no-case-declarations": "off",
   },
   parserOptions: {
     parser: "babel-eslint",
diff --git a/src/App.vue b/src/App.vue
index 3eef40e..44834ba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,10 +45,12 @@
           :data="circles"
           :no-data="noData"
           :progress="progress"
-          :angle="0"
+          :angle="-90"
+          :gap="10"
           :legend="true"
+          dot="15 red"
           :animation="animation"
-          half
+          :half="false"
           line-mode="normal"
         />
       </div>
@@ -80,9 +82,9 @@ export default {
   data: () => ({
     line: "round",
     circles: [
-      { progress: 25, color: "red" },
-      { progress: 35, color: "blue", gap: 0, thickness: "4%" },
-      { progress: 55, color: "green" },
+      { progress: 50, color: "red" },
+      { progress: 50, color: "blue", gap: 10, thickness: "16%", dot: { size: 4 } },
+      { progress: 50, color: "green", gap: 0, dot: { size: "15%" } },
     ],
     determinate: false,
     loading: false,
diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 6f54d12..a038b89 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/src/components/Circle/CircleContainer.vue
@@ -40,6 +40,10 @@ export default {
       type: Number,
       required: false,
     },
+    globalDot: {
+      type: [Number, String, Object],
+      required: false,
+    },
   },
   computed: {
     circleType() {
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 612114a..07fe2e2 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -29,6 +29,10 @@ export default {
       type: Number,
       required: false,
     },
+    globalDot: {
+      type: [Number, String, Object],
+      required: false,
+    },
   },
   data: () => ({
     isInitialized: false,
@@ -164,10 +168,10 @@ export default {
     },
 
     computedGlobalThickness() {
-      return this.calculateThickness(this.globalThickness.toString());
+      return this.calculateThickness(this.globalThickness);
     },
     computedEmptyThickness() {
-      return this.calculateThickness(this.emptyThickness.toString());
+      return this.calculateThickness(this.emptyThickness);
     },
 
     computedAngle() {
@@ -196,11 +200,13 @@ export default {
       const previousCirclesThickness = [];
       for (let i = 0; i < this.index; i++) {
         const data = this.data[i];
+        const dot = data.dot ? this.calculateThickness(dotParser(data.dot).size) : this.globalDotSize;
         const thickness = isValidNumber(data.thickness)
           ? this.calculateThickness(data.thickness)
           : this.computedGlobalThickness;
         const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
-        previousCirclesThickness.push(i > 0 ? thickness + gap : thickness);
+        const completeThickness = Math.max(dot, thickness);
+        previousCirclesThickness.push(i > 0 ? completeThickness + gap : completeThickness);
       }
       return previousCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
     },
@@ -217,6 +223,9 @@ export default {
     dotToThicknessDifference() {
       return this.dotSize - this.computedThickness;
     },
+    globalDotSize() {
+      return this.calculateThickness(dotParser(this.globalDot).size);
+    },
 
     styles() {
       return {
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 7161c2d..8f08442 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -16,6 +16,7 @@
           :index="i"
           :globalThickness="thickness"
           :globalGap="gap"
+          :globalDot="dot"
         />
       </svg>
 

From e15bcaf80e5fd909a342bbb68f0fb4a22cce25b4 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 20:24:13 +0200
Subject: [PATCH 29/43] fix: dot reverse animation handling

---
 src/App.vue                     | 2 +-
 src/styles/animationsUsage.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 44834ba..bd6312c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,10 +47,10 @@
           :progress="progress"
           :angle="-90"
           :gap="10"
+          half
           :legend="true"
           dot="15 red"
           :animation="animation"
-          :half="false"
           line-mode="normal"
         />
       </div>
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 607ac32..73aa9ce 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -57,7 +57,7 @@
     animation-name: ep-dot--init__loop;
   }
   &.ep-half-circle-progress__dot{
-    &.animation__reverse {
+    &.animation__bounce {
       opacity: 1 !important;
       animation-name: ep-dot--init__disabled;
     }

From a6981c74efd996bbcc23f9344fe5da704d6900bd Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 19 May 2020 20:25:24 +0200
Subject: [PATCH 30/43] release: v1.1.0-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 50ba00a..9c1febd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.0.1",
+  "version": "1.1.0-beta.0",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

From 427593e8d72c77309bfb8d2ab6711ad43e4f4fa5 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 24 May 2020 21:24:28 +0200
Subject: [PATCH 31/43] test: refactor and extend animation tests

---
 package.json                               |   8 +-
 src/App.vue                                |   2 -
 tests/unit/circle/circle-animation.spec.js | 205 ++++++++++++---------
 3 files changed, 114 insertions(+), 101 deletions(-)

diff --git a/package.json b/package.json
index 2279c2f..3ce820a 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "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",
@@ -29,12 +29,6 @@
     "bar"
   ],
   "repository": "github:setaman/vue-ellipse-progress",
-  "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"
-  },
   "dependencies": {
     "countup.js": "^2.0.4",
     "vue": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index bd6312c..e391b5f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,10 +47,8 @@
           :progress="progress"
           :angle="-90"
           :gap="10"
-          half
           :legend="true"
           dot="15 red"
-          :animation="animation"
           line-mode="normal"
         />
       </div>
diff --git a/tests/unit/circle/circle-animation.spec.js b/tests/unit/circle/circle-animation.spec.js
index 492258f..58ff41c 100644
--- a/tests/unit/circle/circle-animation.spec.js
+++ b/tests/unit/circle/circle-animation.spec.js
@@ -2,9 +2,10 @@ import { expect } from "chai";
 import { mount } from "@vue/test-utils";
 import Vue from "vue";
 import Circle from "../../../src/components/Circle/Circle.vue";
+import HalfCircle from "../../../src/components/Circle/HalfCircle.vue";
 
-const factory = (propsData) => {
-  return mount(Circle, {
+const factory = (propsData, container = Circle) => {
+  return mount(container, {
     propsData: {
       index: 1,
       id: 2,
@@ -15,6 +16,110 @@ const factory = (propsData) => {
   });
 };
 
+const animationTypeTests = (container, circleClass, prefix = "circle |") => {
+  const wrapper = factory({}, container);
+  const circleProgressWrapper = wrapper.find(circleClass);
+  it(`${prefix} do not applies any animation type before delay`, () => {
+    expect(circleProgressWrapper.classes())
+      .to.be.an("array")
+      .that.not.include([
+        "animation__default",
+        "animation__bounce",
+        "animation__rs",
+        "animation__reverse",
+        "animation__loop",
+      ]);
+  });
+  it(`${prefix} applies @default animation class by default`, (done) => {
+    setTimeout(() => {
+      expect(wrapper.vm.parsedAnimation.type).to.equal("default");
+      expect(circleProgressWrapper.classes()).to.be.an("array").that.include("animation__default");
+      done();
+    }, 250);
+  });
+  it(`${prefix} applies @bounce animation class correctly`, async () => {
+    wrapper.setProps({ animation: "bounce 500 500" });
+    await Vue.nextTick();
+    expect(circleProgressWrapper.classes()).to.include("animation__bounce");
+  });
+  it(`${prefix} applies @loop animation class correctly`, async () => {
+    wrapper.setProps({ animation: "loop 500 500" });
+    await Vue.nextTick();
+    expect(circleProgressWrapper.classes()).to.include("animation__loop");
+  });
+  it(`${prefix} applies @reverse animation class correctly`, async () => {
+    wrapper.setProps({ animation: "reverse 500 500" });
+    await Vue.nextTick();
+    expect(circleProgressWrapper.classes()).to.include("animation__reverse");
+  });
+  it(`${prefix} applies @rs animation class correctly`, async () => {
+    wrapper.setProps({ animation: "rs 500 500" });
+    await Vue.nextTick();
+    expect(circleProgressWrapper.classes()).to.include("animation__rs");
+  });
+};
+const animationDurationTests = (container, circleClass, prefix = "circle | ") => {
+  it(`${prefix} applies default @1000 duration value as transition and animation duration`, () => {
+    const circleProgressWrapper = factory({}, container).find(circleClass);
+
+    expect(circleProgressWrapper.element.style.transitionDuration).to.equal("1000ms");
+    expect(circleProgressWrapper.element.style.animationDuration).to.equal("1000ms");
+  });
+  it(`${prefix} applies provided duration value as transition and animation duration`, () => {
+    const circleProgressWrapper = factory({ animation: "rs 500" }, container).find(circleClass);
+
+    expect(circleProgressWrapper.element.style.transitionDuration).to.equal("500ms");
+    expect(circleProgressWrapper.element.style.animationDuration).to.equal("500ms");
+  });
+  it(`${prefix} applies @0 duration value as transition and animation duration`, () => {
+    const circleProgressWrapper = factory({ animation: "rs 0" }, container).find(circleClass);
+
+    expect(circleProgressWrapper.element.style.transitionDuration).to.equal("0ms");
+    expect(circleProgressWrapper.element.style.animationDuration).to.equal("0ms");
+  });
+};
+const animationDelayTests = (container, circleClass, prefix = "circle | ") => {
+  it(`${prefix} applies default @400 delay value as initial animation delay`, () => {
+    expect(factory({}, container).vm.parsedAnimation.delay).to.equal(400);
+  });
+  it(`${prefix} applies @0 delay value as animation-delay`, () => {
+    expect(factory({ animation: "rs 0 0" }, container).vm.parsedAnimation.delay).to.equal(0);
+  });
+
+  const progress = 60;
+  const size = 200;
+  const thickness = 4;
+
+  const isHalfCircle = prefix.includes("half");
+
+  const radius = size / 2 - thickness / 2;
+  let circumference = radius * 2 * Math.PI;
+  circumference = isHalfCircle ? circumference / 2 : circumference;
+  const expectedOffset = circumference - (progress / 100) * circumference;
+
+  it(`${prefix} don not applies progress before delay`, () => {
+    const wrapper = factory(
+      { progress, size, thickness, emptyThickness: thickness, animation: "rs 500 100" },
+      container
+    );
+    const circleProgressWrapper = wrapper.find(circleClass);
+    expect(wrapper.vm.strokeDashOffset).to.equal(circumference);
+    expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${circumference}`);
+  });
+  it(`${prefix} applies the progress after delay`, (done) => {
+    const wrapper = factory(
+      { progress, size, thickness, emptyThickness: thickness, animation: "rs 500 100" },
+      container
+    );
+    const circleProgressWrapper = wrapper.find(circleClass);
+    setTimeout(() => {
+      expect(wrapper.vm.strokeDashOffset).to.equal(expectedOffset);
+      expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${expectedOffset}`);
+      done();
+    }, 150);
+  });
+};
+
 export default () => {
   describe("#animation", () => {
     it("it parses the #animation property correctly", () => {
@@ -25,100 +130,16 @@ export default () => {
       expect(wrapper.vm.parsedAnimation.delay).to.equal(200);
     });
     describe("#animation.type", () => {
-      const wrapper = factory();
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-      it("do not applies any animation type before delay", () => {
-        expect(circleProgressWrapper.classes())
-          .to.be.an("array")
-          .that.not.include([
-            "animation__default",
-            "animation__bounce",
-            "animation__rs",
-            "animation__reverse",
-            "animation__loop",
-          ]);
-      });
-      it("applies @default animation class by default", (done) => {
-        setTimeout(() => {
-          expect(wrapper.vm.parsedAnimation.type).to.equal("default");
-          expect(circleProgressWrapper.classes()).to.be.an("array").that.include("animation__default");
-          done();
-        }, 250);
-      });
-      it("applies @bounce animation class correctly", async () => {
-        wrapper.setProps({ animation: "bounce 500 500" });
-        await Vue.nextTick();
-        expect(circleProgressWrapper.classes()).to.include("animation__bounce");
-      });
-      it("applies @loop animation class correctly", async () => {
-        wrapper.setProps({ animation: "loop 500 500" });
-        await Vue.nextTick();
-        expect(circleProgressWrapper.classes()).to.include("animation__loop");
-      });
-      it("applies @reverse animation class correctly", async () => {
-        wrapper.setProps({ animation: "reverse 500 500" });
-        await Vue.nextTick();
-        expect(circleProgressWrapper.classes()).to.include("animation__reverse");
-      });
-      it("applies @rs animation class correctly", async () => {
-        wrapper.setProps({ animation: "rs 500 500" });
-        await Vue.nextTick();
-        expect(circleProgressWrapper.classes()).to.include("animation__rs");
-      });
+      animationTypeTests(Circle, "circle.ep-circle--progress");
+      animationTypeTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
     });
     describe("#animation.duration", () => {
-      it("applies default @1000 duration value as transition and animation duration", () => {
-        const circleProgressWrapper = factory().find("circle.ep-circle--progress");
-
-        expect(circleProgressWrapper.element.style.transition).to.include("1000ms");
-        expect(circleProgressWrapper.element.style.animationDuration).to.equal("1000ms");
-      });
-      it("applies provided duration value as transition and animation duration", () => {
-        const wrapper = factory({ animation: "rs 500" });
-        const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-
-        expect(circleProgressWrapper.element.style.transition).to.equal("500ms");
-        expect(circleProgressWrapper.element.style.animationDuration).to.equal("500ms");
-      });
-      it("applies @0 duration value as transition and animation duration", () => {
-        const wrapper = factory({ animation: "rs 0" });
-        const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-
-        expect(circleProgressWrapper.element.style.transition).to.equal("0ms");
-        expect(circleProgressWrapper.element.style.animationDuration).to.equal("0ms");
-      });
+      animationDurationTests(Circle, "circle.ep-circle--progress");
+      animationDurationTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
     });
     describe("#animation.delay", () => {
-      it("applies default @400 delay value as initial animation delay", () => {
-        expect(factory().vm.parsedAnimation.delay).to.equal(400);
-      });
-      it("applies @0 delay value as animation-delay", () => {
-        expect(factory({ animation: "rs 0 0" }).vm.parsedAnimation.delay).to.equal(0);
-      });
-
-      const progress = 60;
-      const size = 200;
-      const thickness = 4;
-
-      const radius = size / 2 - thickness / 2;
-      const circumference = radius * 2 * Math.PI;
-      const expectedOffset = circumference - (progress / 100) * circumference;
-
-      it("don not applies progress before delay", () => {
-        const wrapper = factory({ progress, size, thickness, emptyThickness: thickness, animation: "rs 500 100" });
-        const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-        expect(wrapper.vm.strokeDashOffset).to.equal(circumference);
-        expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${circumference}`);
-      });
-      it("applies the progress after delay", (done) => {
-        const wrapper = factory({ progress, size, thickness, emptyThickness: thickness, animation: "rs 500 100" });
-        const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-        setTimeout(() => {
-          expect(wrapper.vm.strokeDashOffset).to.equal(expectedOffset);
-          expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${expectedOffset}`);
-          done();
-        }, 150);
-      });
+      animationDelayTests(Circle, "circle.ep-circle--progress");
+      animationDelayTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
     });
   });
 };

From fb6d4e84ba82bc714521c914bcb59989697d7954 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 28 May 2020 19:47:24 +0200
Subject: [PATCH 32/43] test: fix #data tests

---
 tests/unit/circle/circle.spec.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 1621eef..7181c7d 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -247,6 +247,8 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     }
     // some special cases
     data.push({ progress: 50, thickness: 5 });
+    data.push({ progress: 50, thickness: "2%" });
+    data.push({ progress: 50, thickness: "4%", gap: 3 });
     data.push({ progress: 50, gap: 5 });
     data.push({ progress: 50, gap: 0 });
     data.push({ progress: 50 });
@@ -254,12 +256,16 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     const wrapper = factory({ data, gap: globalGap, thickness: globalThickness, size }, VueEllipseProgress);
     const circleWrappers = wrapper.findAll(Circle);
 
+    const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
+
     for (let i = 0; i < data.length; i++) {
       const circleData = data[i];
       it(`calculates the radius of circle #${i} correctly
         #thickness ${circleData.thickness} | #gap ${circleData.gap} `, () => {
         const circleGap = circleData.gap !== undefined ? circleData.gap : globalGap;
-        const circleThickness = circleData.thickness !== undefined ? circleData.thickness : globalThickness;
+        const circleThickness = calculateThickness(
+          circleData.thickness !== undefined ? circleData.thickness : globalThickness
+        );
 
         let radius;
         const baseRadius = size / 2 - circleThickness / 2;
@@ -268,7 +274,7 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
           const previousCirclesThickness = previousCirclesData
             .map(({ gap, thickness }, n) => {
               const g = gap !== undefined ? gap : globalGap;
-              const t = thickness !== undefined ? thickness : globalThickness;
+              const t = calculateThickness(thickness !== undefined ? thickness : globalThickness);
               return n > 0 ? g + t : t;
             })
             .reduce((acc, current) => acc + current);

From b0edd68316cc7c87d0defbcd3867294b031a31f4 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 28 May 2020 20:34:45 +0200
Subject: [PATCH 33/43] test: extend #data tests concerning #dot prop

---
 src/App.vue                      |  9 +++++----
 tests/unit/circle/circle.spec.js | 25 ++++++++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e391b5f..1c8e923 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,13 +42,14 @@
       <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
           :loading="loading"
-          :data="circles"
           :no-data="noData"
           :progress="progress"
-          :angle="-90"
-          :gap="10"
+          :thickness="3"
+          :empty-thickness="3"
+          :gap="5"
+          dot="2%"
+          :size="600"
           :legend="true"
-          dot="15 red"
           line-mode="normal"
         />
       </div>
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 7181c7d..d5e3550 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -9,6 +9,7 @@ import lineTest from "./circle-line.spec";
 import thicknessTest from "./circle-thickness.spec";
 import animationTest from "./circle-animation.spec";
 import colorsTest from "./circle-colors.spec";
+import { dotParser } from "../../../src/components/optionsParser";
 
 const factory = (propsData, container = Circle) => {
   return mount(container, {
@@ -232,9 +233,10 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     });
   });
   describe("#data", () => {
-    const size = 400;
+    const size = 600;
     const globalThickness = 5;
     const globalGap = 5;
+    const globalDot = "2%";
 
     const data = [];
     // generate random test data
@@ -247,13 +249,19 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     }
     // some special cases
     data.push({ progress: 50, thickness: 5 });
-    data.push({ progress: 50, thickness: "2%" });
+    data.push({ progress: 50, thickness: "2%", dot: 0 });
     data.push({ progress: 50, thickness: "4%", gap: 3 });
+    data.push({ progress: 50, thickness: "4%", gap: 3, dot: 5 });
+    data.push({ progress: 50, thickness: "0%", gap: 3, dot: "5% red" });
+    data.push({ progress: 50, thickness: 6, gap: 5, dot: "5 red" });
     data.push({ progress: 50, gap: 5 });
     data.push({ progress: 50, gap: 0 });
     data.push({ progress: 50 });
 
-    const wrapper = factory({ data, gap: globalGap, thickness: globalThickness, size }, VueEllipseProgress);
+    const wrapper = factory(
+      { data, gap: globalGap, thickness: globalThickness, size, dot: globalDot },
+      VueEllipseProgress
+    );
     const circleWrappers = wrapper.findAll(Circle);
 
     const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
@@ -261,21 +269,24 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     for (let i = 0; i < data.length; i++) {
       const circleData = data[i];
       it(`calculates the radius of circle #${i} correctly
-        #thickness ${circleData.thickness} | #gap ${circleData.gap} `, () => {
+        #thickness ${circleData.thickness} | #gap ${circleData.gap} | #dot ${circleData.dot} `, async () => {
         const circleGap = circleData.gap !== undefined ? circleData.gap : globalGap;
         const circleThickness = calculateThickness(
           circleData.thickness !== undefined ? circleData.thickness : globalThickness
         );
+        const circleDot = calculateThickness(dotParser(circleData.dot !== undefined ? circleData.dot : globalDot).size);
 
         let radius;
-        const baseRadius = size / 2 - circleThickness / 2;
+        const baseRadius = size / 2 - Math.max(circleThickness, circleDot) / 2;
         if (i > 0) {
           const previousCirclesData = data.filter((props, index) => index < i);
           const previousCirclesThickness = previousCirclesData
-            .map(({ gap, thickness }, n) => {
+            .map(({ gap, thickness, dot }, n) => {
               const g = gap !== undefined ? gap : globalGap;
               const t = calculateThickness(thickness !== undefined ? thickness : globalThickness);
-              return n > 0 ? g + t : t;
+              const d = calculateThickness(dotParser(dot !== undefined ? dot : globalDot).size);
+              const thicknessWithDot = Math.max(t, d);
+              return n > 0 ? g + thicknessWithDot : thicknessWithDot;
             })
             .reduce((acc, current) => acc + current);
 

From 9c8c333c4363f46c9a2292a621feb7308dda33ba Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 28 May 2020 21:09:07 +0200
Subject: [PATCH 34/43] test: add #data parser tests

---
 tests/unit/circle/circle.spec.js | 51 ++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index d5e3550..27f4142 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -269,7 +269,7 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     for (let i = 0; i < data.length; i++) {
       const circleData = data[i];
       it(`calculates the radius of circle #${i} correctly
-        #thickness ${circleData.thickness} | #gap ${circleData.gap} | #dot ${circleData.dot} `, async () => {
+        #thickness ${circleData.thickness} | #gap ${circleData.gap} | #dot ${circleData.dot} `, () => {
         const circleGap = circleData.gap !== undefined ? circleData.gap : globalGap;
         const circleThickness = calculateThickness(
           circleData.thickness !== undefined ? circleData.thickness : globalThickness
@@ -301,9 +301,54 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       });
     }
   });
+  describe("#dot", () => {
+    const progress = 50;
+    const size = 500;
+    const globalDot = "5%";
+
+    it(`parses property correctly`, () => {
+      const wrapper = factory({ progress, size });
+      let dot = 0;
+      expect(wrapper.vm.parsedDot.size).to.equal("0");
+      expect(wrapper.vm.parsedDot.color).to.equal("white");
+
+      dot = "5% red";
+      wrapper.setProps({ dot });
+      expect(wrapper.vm.parsedDot.size).to.equal("5%");
+      expect(wrapper.vm.parsedDot.color).to.equal("red");
+
+      dot = { size: 10, backgroundColor: "green" };
+      wrapper.setProps({ dot });
+      expect(wrapper.vm.parsedDot.size).to.equal(10);
+      expect(wrapper.vm.parsedDot.color).to.equal("white");
+      expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
+    });
+
+    const data = [
+      { progress, dot: 5 },
+      { progress, dot: "5" },
+      { progress, dot: "5%" },
+      { progress, dot: "5% red" },
+      { progress, dot: "5 blue" },
+      { progress, dot: { size: 5 } },
+      { progress, dot: { size: "5%" } },
+      { progress, dot: { size: 5, backgroundColor: "yellow" } },
+      { progress, dot: { size: "3%", backgroundColor: "green", borderRadius: "2px" } },
+    ];
+
+    /* for (let i = 0; i < data.length; i++) {
+      const circleData = data[i];
+      const wrapper = factory({ size, dot: globalDot, ...circleData }, VueEllipseProgress);
+
+      /!* it(`parses property correctly`, () => {
+        expect(wrapper.vm.parsedAnimation.type).to.equal("rs");
+
+      }); *!/
+    } */
+  });
 
-  thicknessTest();
+  /* thicknessTest();
   lineTest();
   animationTest();
-  colorsTest();
+  colorsTest(); */
 });

From 23d0f41ed8f10981410d9429b111efe5ed7520a0 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 28 May 2020 21:40:59 +0200
Subject: [PATCH 35/43] test: add more #data tests

---
 src/App.vue                      |  4 +--
 tests/unit/circle/circle.spec.js | 55 ++++++++++++++++++++++----------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1c8e923..7da31f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,8 +44,8 @@
           :loading="loading"
           :no-data="noData"
           :progress="progress"
-          :thickness="3"
-          :empty-thickness="3"
+          :thickness="30"
+          :empty-thickness="50"
           :gap="5"
           dot="2%"
           :size="600"
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 27f4142..7c04426 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -1,7 +1,9 @@
 import { expect } from "chai";
 import { mount } from "@vue/test-utils";
 import Vue from "vue";
+import CircleContainer from "../../../src/components/Circle/CircleContainer.vue";
 import Circle from "../../../src/components/Circle/Circle.vue";
+import CircleDot from "../../../src/components/Circle/CircleDot.vue";
 import HalfCircle from "../../../src/components/Circle/HalfCircle.vue";
 import VueEllipseProgress from "../../../src/components/VueEllipseProgress.vue";
 
@@ -303,9 +305,12 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
   });
   describe("#dot", () => {
     const progress = 50;
+    const thickness = 5;
     const size = 500;
     const globalDot = "5%";
 
+    const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
+
     it(`parses property correctly`, () => {
       const wrapper = factory({ progress, size });
       let dot = 0;
@@ -325,30 +330,46 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     });
 
     const data = [
-      { progress, dot: 5 },
-      { progress, dot: "5" },
-      { progress, dot: "5%" },
-      { progress, dot: "5% red" },
-      { progress, dot: "5 blue" },
-      { progress, dot: { size: 5 } },
-      { progress, dot: { size: "5%" } },
-      { progress, dot: { size: 5, backgroundColor: "yellow" } },
-      { progress, dot: { size: "3%", backgroundColor: "green", borderRadius: "2px" } },
+      { progress, thickness, dot: 5 },
+      { progress, thickness, dot: "5" },
+      { progress, thickness, dot: "5%" },
+      { progress, thickness, dot: "5% red" },
+      { progress, thickness, dot: "5 blue" },
+      { progress, thickness, dot: { size: 5 } },
+      { progress, thickness, dot: { size: "5%" } },
+      { progress, thickness, dot: { size: 5, backgroundColor: "yellow" } },
+      { progress, thickness, dot: { size: "3%", background: "green", borderRadius: "2px" } },
     ];
 
-    /* for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < data.length; i++) {
       const circleData = data[i];
-      const wrapper = factory({ size, dot: globalDot, ...circleData }, VueEllipseProgress);
+      const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
+      const circleDotsWrapper = wrapper.find("span.ep-circle--progress__dot");
+      const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
+      const parsedDotSize = calculateThickness(parsedDot.size);
+      const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
+
+      it(`renders dot component | #dot = ${circleData.dot}`, () => {
+        expect(wrapper.contains(CircleDot)).to.be.true;
+      });
 
-      /!* it(`parses property correctly`, () => {
-        expect(wrapper.vm.parsedAnimation.type).to.equal("rs");
+      it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
+        expect(circleDotsWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
+      });
 
-      }); *!/
-    } */
+      it(`applies the color of the dot correctly | #dot = ${circleData.dot}`, () => {
+        const { background } = circleDotsWrapper.element.style;
+        if (background) {
+          expect(circleDotsWrapper.element.style.background).to.equal(`${parsedDotColor}`);
+        } else {
+          expect(circleDotsWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
+        }
+      });
+    }
   });
 
-  /* thicknessTest();
+  thicknessTest();
   lineTest();
   animationTest();
-  colorsTest(); */
+  colorsTest();
 });

From de460891a22fec2dd97f7e397d2b3c1365e60cc6 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 29 May 2020 16:36:18 +0200
Subject: [PATCH 36/43] test: add #dot default value test

---
 src/App.vue                      |  1 -
 tests/unit/circle/circle.spec.js | 16 ++++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7da31f2..fac64f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,7 +47,6 @@
           :thickness="30"
           :empty-thickness="50"
           :gap="5"
-          dot="2%"
           :size="600"
           :legend="true"
           line-mode="normal"
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 7c04426..ec4b04f 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -329,6 +329,18 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
     });
 
+    it("applies default value correctly", () => {
+      const wrapper = factory({ progress }, VueEllipseProgress);
+      const circleWrapper = wrapper.find(Circle);
+      const circleContainerWrapper = wrapper.find(CircleContainer);
+
+      expect(wrapper.props("dot")).to.equal(0);
+      expect(circleContainerWrapper.props("dot")).to.equal(0);
+      expect(circleWrapper.vm.parsedDot.size).to.equal("0");
+      expect(circleWrapper.vm.parsedDot.color).to.equal("white");
+      expect(circleWrapper.vm.dotSize).to.equal(0);
+    });
+
     const data = [
       { progress, thickness, dot: 5 },
       { progress, thickness, dot: "5" },
@@ -368,8 +380,8 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     }
   });
 
-  thicknessTest();
+  /* thicknessTest();
   lineTest();
   animationTest();
-  colorsTest();
+  colorsTest(); */
 });

From 9f7c6022de4a7b4847c3a28c8f6cabc27f21fe43 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 29 May 2020 16:45:02 +0200
Subject: [PATCH 37/43] fix: #dot prop validation check

---
 package.json                | 2 +-
 src/App.vue                 | 3 ++-
 src/components/interface.js | 7 +++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 3ce820a..f31dbe4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0-beta.1",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/App.vue b/src/App.vue
index fac64f0..3d90f90 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,9 +47,10 @@
           :thickness="30"
           :empty-thickness="50"
           :gap="5"
+          dot="2%"
           :size="600"
           :legend="true"
-          line-mode="normal"
+          line-mode="in"
         />
       </div>
       <!--<vue-ellipse-progress
diff --git a/src/components/interface.js b/src/components/interface.js
index 239833e..3e587bf 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -147,8 +147,11 @@ const props = {
     required: false,
     default: 0,
     validator: (value) => {
-      if (typeof value === "object" && value.size) {
-        return !Number.isNaN(parseFloat(value.size));
+      if (typeof value === "object") {
+        if (value.size !== undefined) {
+          return !Number.isNaN(parseFloat(value.size));
+        }
+        return false;
       }
       return !Number.isNaN(parseFloat(value));
     },

From b1f759614622626744ee0e733c927303ec1aa5a1 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 29 May 2020 17:48:23 +0200
Subject: [PATCH 38/43] test: add more #dot tests

---
 src/App.vue                      |  5 ++-
 tests/unit/circle/circle.spec.js | 52 +++++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3d90f90..dbebfcb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,10 +44,13 @@
           :loading="loading"
           :no-data="noData"
           :progress="progress"
+          animation="default 1000 3000"
           :thickness="30"
           :empty-thickness="50"
           :gap="5"
-          dot="2%"
+          color-fill="red"
+          line="butt"
+          dot="10 green"
           :size="600"
           :legend="true"
           line-mode="in"
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index ec4b04f..bde39eb 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -341,6 +341,26 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       expect(circleWrapper.vm.dotSize).to.equal(0);
     });
 
+    it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
+      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
+      const circleDotWrapper = wrapper.find(CircleDot);
+      const rotationStart = wrapper.props("angle") + 90;
+      const rotation = rotationStart + (progress * 360) / 100;
+      setTimeout(() => {
+        expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotation}deg)`);
+        done();
+      }, 0);
+    });
+
+    it(`applies correct initial rotation of the dot container`, () => {
+      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
+      const circleDotWrapper = wrapper.find(CircleDot);
+      const angle = wrapper.props("angle");
+      const isHalf = wrapper.props("half");
+      const rotationStart = isHalf ? angle - 90 : angle + 90;
+      expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
+    });
+
     const data = [
       { progress, thickness, dot: 5 },
       { progress, thickness, dot: "5" },
@@ -356,9 +376,11 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     for (let i = 0; i < data.length; i++) {
       const circleData = data[i];
       const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
-      const circleDotsWrapper = wrapper.find("span.ep-circle--progress__dot");
+      const circleDotSpanWrapper = wrapper.find("span.ep-circle--progress__dot");
+      const circleDotWrapper = wrapper.find(CircleDot);
+      const circleWrapper = wrapper.find(Circle);
       const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
-      const parsedDotSize = calculateThickness(parsedDot.size);
+      const parsedDotSize = parseFloat(calculateThickness(parsedDot.size));
       const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
 
       it(`renders dot component | #dot = ${circleData.dot}`, () => {
@@ -366,22 +388,36 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       });
 
       it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
-        expect(circleDotsWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
+        expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
       });
 
       it(`applies the color of the dot correctly | #dot = ${circleData.dot}`, () => {
-        const { background } = circleDotsWrapper.element.style;
+        const { background } = circleDotSpanWrapper.element.style;
         if (background) {
-          expect(circleDotsWrapper.element.style.background).to.equal(`${parsedDotColor}`);
+          expect(circleDotSpanWrapper.element.style.background).to.equal(`${parsedDotColor}`);
         } else {
-          expect(circleDotsWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
+          expect(circleDotSpanWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
         }
       });
+
+      it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
+        const circleRadius = circleWrapper.vm.radius;
+        const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
+        expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
+        expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
+      });
+
+      it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
+        const circleRadius = circleWrapper.vm.radius;
+        const containerSize = circleRadius * 2 + parsedDotSize;
+        expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
+        expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
+      });
     }
   });
 
   /* thicknessTest();
   lineTest();
-  animationTest();
-  colorsTest(); */
+  colorsTest();
+  animationTest(); */
 });

From 13d2846efe19397c354ca5070a431665db9c4267 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 29 May 2020 17:52:52 +0200
Subject: [PATCH 39/43] test: move #dot tests to dedicated file

---
 tests/unit/circle/circle.spec.js     | 120 +-----------------------
 tests/unit/circle/cirlce-dot.spec.js | 133 +++++++++++++++++++++++++++
 2 files changed, 137 insertions(+), 116 deletions(-)
 create mode 100644 tests/unit/circle/cirlce-dot.spec.js

diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index bde39eb..27857e9 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -1,9 +1,7 @@
 import { expect } from "chai";
 import { mount } from "@vue/test-utils";
 import Vue from "vue";
-import CircleContainer from "../../../src/components/Circle/CircleContainer.vue";
 import Circle from "../../../src/components/Circle/Circle.vue";
-import CircleDot from "../../../src/components/Circle/CircleDot.vue";
 import HalfCircle from "../../../src/components/Circle/HalfCircle.vue";
 import VueEllipseProgress from "../../../src/components/VueEllipseProgress.vue";
 
@@ -11,6 +9,7 @@ import lineTest from "./circle-line.spec";
 import thicknessTest from "./circle-thickness.spec";
 import animationTest from "./circle-animation.spec";
 import colorsTest from "./circle-colors.spec";
+import dotTests from "./cirlce-dot.spec";
 import { dotParser } from "../../../src/components/optionsParser";
 
 const factory = (propsData, container = Circle) => {
@@ -303,121 +302,10 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       });
     }
   });
-  describe("#dot", () => {
-    const progress = 50;
-    const thickness = 5;
-    const size = 500;
-    const globalDot = "5%";
-
-    const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
-
-    it(`parses property correctly`, () => {
-      const wrapper = factory({ progress, size });
-      let dot = 0;
-      expect(wrapper.vm.parsedDot.size).to.equal("0");
-      expect(wrapper.vm.parsedDot.color).to.equal("white");
-
-      dot = "5% red";
-      wrapper.setProps({ dot });
-      expect(wrapper.vm.parsedDot.size).to.equal("5%");
-      expect(wrapper.vm.parsedDot.color).to.equal("red");
-
-      dot = { size: 10, backgroundColor: "green" };
-      wrapper.setProps({ dot });
-      expect(wrapper.vm.parsedDot.size).to.equal(10);
-      expect(wrapper.vm.parsedDot.color).to.equal("white");
-      expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
-    });
-
-    it("applies default value correctly", () => {
-      const wrapper = factory({ progress }, VueEllipseProgress);
-      const circleWrapper = wrapper.find(Circle);
-      const circleContainerWrapper = wrapper.find(CircleContainer);
-
-      expect(wrapper.props("dot")).to.equal(0);
-      expect(circleContainerWrapper.props("dot")).to.equal(0);
-      expect(circleWrapper.vm.parsedDot.size).to.equal("0");
-      expect(circleWrapper.vm.parsedDot.color).to.equal("white");
-      expect(circleWrapper.vm.dotSize).to.equal(0);
-    });
-
-    it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
-      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
-      const circleDotWrapper = wrapper.find(CircleDot);
-      const rotationStart = wrapper.props("angle") + 90;
-      const rotation = rotationStart + (progress * 360) / 100;
-      setTimeout(() => {
-        expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotation}deg)`);
-        done();
-      }, 0);
-    });
-
-    it(`applies correct initial rotation of the dot container`, () => {
-      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
-      const circleDotWrapper = wrapper.find(CircleDot);
-      const angle = wrapper.props("angle");
-      const isHalf = wrapper.props("half");
-      const rotationStart = isHalf ? angle - 90 : angle + 90;
-      expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
-    });
-
-    const data = [
-      { progress, thickness, dot: 5 },
-      { progress, thickness, dot: "5" },
-      { progress, thickness, dot: "5%" },
-      { progress, thickness, dot: "5% red" },
-      { progress, thickness, dot: "5 blue" },
-      { progress, thickness, dot: { size: 5 } },
-      { progress, thickness, dot: { size: "5%" } },
-      { progress, thickness, dot: { size: 5, backgroundColor: "yellow" } },
-      { progress, thickness, dot: { size: "3%", background: "green", borderRadius: "2px" } },
-    ];
-
-    for (let i = 0; i < data.length; i++) {
-      const circleData = data[i];
-      const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
-      const circleDotSpanWrapper = wrapper.find("span.ep-circle--progress__dot");
-      const circleDotWrapper = wrapper.find(CircleDot);
-      const circleWrapper = wrapper.find(Circle);
-      const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
-      const parsedDotSize = parseFloat(calculateThickness(parsedDot.size));
-      const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
-
-      it(`renders dot component | #dot = ${circleData.dot}`, () => {
-        expect(wrapper.contains(CircleDot)).to.be.true;
-      });
-
-      it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
-        expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
-      });
-
-      it(`applies the color of the dot correctly | #dot = ${circleData.dot}`, () => {
-        const { background } = circleDotSpanWrapper.element.style;
-        if (background) {
-          expect(circleDotSpanWrapper.element.style.background).to.equal(`${parsedDotColor}`);
-        } else {
-          expect(circleDotSpanWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
-        }
-      });
-
-      it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
-        const circleRadius = circleWrapper.vm.radius;
-        const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
-        expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
-        expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
-      });
-
-      it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
-        const circleRadius = circleWrapper.vm.radius;
-        const containerSize = circleRadius * 2 + parsedDotSize;
-        expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
-        expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
-      });
-    }
-  });
 
-  /* thicknessTest();
+  thicknessTest();
   lineTest();
   colorsTest();
-  animationTest(); */
+  animationTest();
+  dotTests();
 });
diff --git a/tests/unit/circle/cirlce-dot.spec.js b/tests/unit/circle/cirlce-dot.spec.js
new file mode 100644
index 0000000..6aa0b38
--- /dev/null
+++ b/tests/unit/circle/cirlce-dot.spec.js
@@ -0,0 +1,133 @@
+import { expect } from "chai";
+import { mount } from "@vue/test-utils";
+import CircleContainer from "../../../src/components/Circle/CircleContainer.vue";
+import VueEllipseProgress from "../../../src/components/VueEllipseProgress.vue";
+import Circle from "../../../src/components/Circle/Circle.vue";
+import CircleDot from "../../../src/components/Circle/CircleDot.vue";
+import { dotParser } from "../../../src/components/optionsParser";
+
+const factory = (propsData, container = Circle) => {
+  return mount(container, {
+    propsData: {
+      index: 0,
+      id: 123,
+      multiple: false,
+      ...propsData,
+    },
+  });
+};
+
+export default () => {
+  describe("#dot", () => {
+    const progress = 50;
+    const thickness = 5;
+    const size = 500;
+    const globalDot = "5%";
+
+    const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
+
+    it(`parses property correctly`, () => {
+      const wrapper = factory({ progress, size });
+      let dot = 0;
+      expect(wrapper.vm.parsedDot.size).to.equal("0");
+      expect(wrapper.vm.parsedDot.color).to.equal("white");
+
+      dot = "5% red";
+      wrapper.setProps({ dot });
+      expect(wrapper.vm.parsedDot.size).to.equal("5%");
+      expect(wrapper.vm.parsedDot.color).to.equal("red");
+
+      dot = { size: 10, backgroundColor: "green" };
+      wrapper.setProps({ dot });
+      expect(wrapper.vm.parsedDot.size).to.equal(10);
+      expect(wrapper.vm.parsedDot.color).to.equal("white");
+      expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
+    });
+
+    it("applies default value correctly", () => {
+      const wrapper = factory({ progress }, VueEllipseProgress);
+      const circleWrapper = wrapper.find(Circle);
+      const circleContainerWrapper = wrapper.find(CircleContainer);
+
+      expect(wrapper.props("dot")).to.equal(0);
+      expect(circleContainerWrapper.props("dot")).to.equal(0);
+      expect(circleWrapper.vm.parsedDot.size).to.equal("0");
+      expect(circleWrapper.vm.parsedDot.color).to.equal("white");
+      expect(circleWrapper.vm.dotSize).to.equal(0);
+    });
+
+    it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
+      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
+      const circleDotWrapper = wrapper.find(CircleDot);
+      const rotationStart = wrapper.props("angle") + 90;
+      const rotation = rotationStart + (progress * 360) / 100;
+      setTimeout(() => {
+        expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotation}deg)`);
+        done();
+      }, 0);
+    });
+
+    it(`applies correct initial rotation of the dot container`, () => {
+      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
+      const circleDotWrapper = wrapper.find(CircleDot);
+      const angle = wrapper.props("angle");
+      const isHalf = wrapper.props("half");
+      const rotationStart = isHalf ? angle - 90 : angle + 90;
+      expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
+    });
+
+    const data = [
+      { progress, thickness, dot: 5 },
+      { progress, thickness, dot: "5" },
+      { progress, thickness, dot: "5%" },
+      { progress, thickness, dot: "5% red" },
+      { progress, thickness, dot: "5 blue" },
+      { progress, thickness, dot: { size: 5 } },
+      { progress, thickness, dot: { size: "5%" } },
+      { progress, thickness, dot: { size: 5, backgroundColor: "yellow" } },
+      { progress, thickness, dot: { size: "3%", background: "green", borderRadius: "2px" } },
+    ];
+
+    for (let i = 0; i < data.length; i++) {
+      const circleData = data[i];
+      const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
+      const circleDotSpanWrapper = wrapper.find("span.ep-circle--progress__dot");
+      const circleDotWrapper = wrapper.find(CircleDot);
+      const circleWrapper = wrapper.find(Circle);
+      const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
+      const parsedDotSize = parseFloat(calculateThickness(parsedDot.size));
+      const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
+
+      it(`renders dot component | #dot = ${circleData.dot}`, () => {
+        expect(wrapper.contains(CircleDot)).to.be.true;
+      });
+
+      it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
+        expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
+      });
+
+      it(`applies the color of the dot correctly | #dot = ${circleData.dot}`, () => {
+        const { background } = circleDotSpanWrapper.element.style;
+        if (background) {
+          expect(circleDotSpanWrapper.element.style.background).to.equal(`${parsedDotColor}`);
+        } else {
+          expect(circleDotSpanWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
+        }
+      });
+
+      it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
+        const circleRadius = circleWrapper.vm.radius;
+        const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
+        expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
+        expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
+      });
+
+      it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
+        const circleRadius = circleWrapper.vm.radius;
+        const containerSize = circleRadius * 2 + parsedDotSize;
+        expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
+        expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
+      });
+    }
+  });
+};

From 54925ee1d79d939f6955a18dc6ac8d4ba43f21fa Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 29 May 2020 18:38:20 +0200
Subject: [PATCH 40/43] test: add #dot animation type and duration tests

---
 src/App.vue                                |  5 +++--
 tests/unit/circle/circle-animation.spec.js | 15 +++++++++++++++
 tests/unit/circle/circle.spec.js           |  5 +++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index dbebfcb..04d0317 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,14 +44,15 @@
           :loading="loading"
           :no-data="noData"
           :progress="progress"
-          animation="default 1000 3000"
+          animation="bounce 1000 3000"
           :thickness="30"
           :empty-thickness="50"
           :gap="5"
           color-fill="red"
           line="butt"
-          dot="10 green"
+          dot="15 yellow"
           :size="600"
+
           :legend="true"
           line-mode="in"
         />
diff --git a/tests/unit/circle/circle-animation.spec.js b/tests/unit/circle/circle-animation.spec.js
index 58ff41c..2b5ae15 100644
--- a/tests/unit/circle/circle-animation.spec.js
+++ b/tests/unit/circle/circle-animation.spec.js
@@ -3,6 +3,8 @@ import { mount } from "@vue/test-utils";
 import Vue from "vue";
 import Circle from "../../../src/components/Circle/Circle.vue";
 import HalfCircle from "../../../src/components/Circle/HalfCircle.vue";
+import CircleContainer from "../../../src/components/Circle/CircleContainer.vue";
+import CircleDot from "../../../src/components/Circle/CircleDot.vue";
 
 const factory = (propsData, container = Circle) => {
   return mount(container, {
@@ -132,6 +134,19 @@ export default () => {
     describe("#animation.type", () => {
       animationTypeTests(Circle, "circle.ep-circle--progress");
       animationTypeTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
+
+      const wrapper = factory({ progress: 50, dot: 5, animation: "rs 500 5" }, CircleContainer);
+      const circleDotWrapper = wrapper.find(CircleDot);
+      it("circle dot | applies animation class correctly", (done) => {
+        setTimeout(() => {
+          expect(circleDotWrapper.classes()).to.be.an("array").that.include("animation__rs");
+          done();
+        }, 5);
+      });
+      it(`circle dot | applies duration value as transition and animation duration`, () => {
+        expect(circleDotWrapper.element.style.transitionDuration).to.equal("500ms");
+        expect(circleDotWrapper.element.style.animationDuration).to.equal("500ms");
+      });
     });
     describe("#animation.duration", () => {
       animationDurationTests(Circle, "circle.ep-circle--progress");
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 27857e9..6a553c5 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -303,9 +303,10 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     }
   });
 
-  thicknessTest();
+  /* thicknessTest();
   lineTest();
   colorsTest();
+  */
   animationTest();
-  dotTests();
+  // dotTests();
 });

From 38f2a5ec86a3ee5c531d12c9c81a0fa3ae286548 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 29 May 2020 19:03:37 +0200
Subject: [PATCH 41/43] test: add #dot animation type and duration tests

---
 package.json                        | 2 +-
 src/App.vue                         | 5 ++---
 src/components/Circle/CircleDot.vue | 4 ++--
 src/styles/animationsUsage.scss     | 6 +++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index f31dbe4..75dd681 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.1.0-beta.1",
+  "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",
diff --git a/src/App.vue b/src/App.vue
index 04d0317..47f07b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,15 +44,14 @@
           :loading="loading"
           :no-data="noData"
           :progress="progress"
-          animation="bounce 1000 3000"
+          animation="rs 1000 3000"
           :thickness="30"
           :empty-thickness="50"
           :gap="5"
           color-fill="red"
-          line="butt"
           dot="15 yellow"
           :size="600"
-
+          half
           :legend="true"
           line-mode="in"
         />
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 429ffef..720cff8 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -81,7 +81,7 @@ export default {
       return this.dotStart + (this.computedProgress * this.dotContainerFullRotationDeg) / 100;
     },
     isHidden() {
-      return this.loading || !this.dataIsAvailable;
+      return !this.isInitialized || this.loading || !this.dataIsAvailable;
     },
   },
 };
@@ -96,7 +96,7 @@ export default {
   }
 }
 .ep-circle--progress__dot {
-  transition-duration: 0.3s;
+  transition-duration: 0.2s;
   box-sizing: border-box;
   position: absolute;
   margin: auto;
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 3a77799..5417e71 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -47,7 +47,7 @@
     animation-name: ep-dot--init__rs;
   }
   &.animation__bounce {
-    opacity: 1 !important;
+    animation-fill-mode: forwards;
     animation-name: ep-dot--init__disabled;
   }
   &.animation__reverse {
@@ -58,11 +58,11 @@
   }
   &.ep-half-circle-progress__dot{
     &.animation__bounce {
-      opacity: 1 !important;
+      animation-fill-mode: forwards;
       animation-name: ep-dot--init__disabled;
     }
     &.animation__loop {
-      opacity: 1 !important;
+      animation-fill-mode: forwards;
       animation-name: ep-dot--init__disabled;
     }
   }

From 93febd6ee429e20257cd8cc6225970b92f7de149 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 6 Jun 2020 20:54:58 +0200
Subject: [PATCH 42/43] test: refactor tests

---
 src/App.vue                                |  18 +-
 src/components/Circle/CircleDot.vue        |   1 -
 src/components/Circle/circleMixin.js       |   3 +-
 tests/unit/circle/circle-animation.spec.js | 100 +++--
 tests/unit/circle/circle-colors.spec.js    | 226 ++++++-----
 tests/unit/circle/circle-line.spec.js      | 414 ++++++++++-----------
 tests/unit/circle/circle-thickness.spec.js |  82 ++--
 tests/unit/circle/circle.spec.js           |  19 +-
 tests/unit/circle/cirlce-dot.spec.js       | 215 +++++------
 9 files changed, 553 insertions(+), 525 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 47f07b6..38c2d62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,22 +41,22 @@
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
+          :data="circles"
           :loading="loading"
           :no-data="noData"
-          :progress="progress"
-          animation="rs 1000 3000"
+          :progress="50"
+          animation="bounce 1000 3000"
           :thickness="30"
           :empty-thickness="50"
           :gap="5"
-          color-fill="red"
           dot="15 yellow"
           :size="600"
-          half
+
           :legend="true"
           line-mode="in"
         />
       </div>
-      <!--<vue-ellipse-progress
+      <vue-ellipse-progress
         :loading="loading"
         :no-data="noData"
         :progress="progress"
@@ -69,7 +69,7 @@
         animation="rs 1000"
         :dot="{ size: 100, backgroundColor: 'rgba(100,256,4,1)', width: '2px' }"
         line-mode="in-over"
-      />-->
+      />
     </div>
   </div>
 </template>
@@ -84,9 +84,9 @@ export default {
   data: () => ({
     line: "round",
     circles: [
-      { progress: 50, color: "red" },
-      { progress: 50, color: "blue", gap: 10, thickness: "16%", dot: { size: 4 } },
-      { progress: 50, color: "green", gap: 0, dot: { size: "15%" } },
+      { 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,
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index 720cff8..b328fb7 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -89,7 +89,6 @@ export default {
 
 <style scoped lang="scss">
 .ep-circle--progress__dot-container {
-  // border: 0px solid green;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 07fe2e2..edf0062 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -289,7 +289,8 @@ export default {
   async mounted() {
     if (!this.loading) {
       // await initial delay before applying animations
-      await wait(this.parsedAnimation.delay);
+      const a = this.parsedAnimation.delay;
+      await wait(a);
     }
     this.isInitialized = true;
   },
diff --git a/tests/unit/circle/circle-animation.spec.js b/tests/unit/circle/circle-animation.spec.js
index 2b5ae15..bc9b3fe 100644
--- a/tests/unit/circle/circle-animation.spec.js
+++ b/tests/unit/circle/circle-animation.spec.js
@@ -122,39 +122,77 @@ const animationDelayTests = (container, circleClass, prefix = "circle | ") => {
   });
 };
 
-export default () => {
-  describe("#animation", () => {
-    it("it parses the #animation property correctly", () => {
-      const wrapper = factory({ animation: "rs 2000 200" });
-
-      expect(wrapper.vm.parsedAnimation.type).to.equal("rs");
-      expect(wrapper.vm.parsedAnimation.duration).to.equal(2000);
-      expect(wrapper.vm.parsedAnimation.delay).to.equal(200);
+describe("#animation", () => {
+  const circleContainerWrapper = factory({ progress: 50, dot: 5, animation: "rs 500 5" }, CircleContainer);
+  const circleDotWrapper = circleContainerWrapper.find(CircleDot);
+
+  it("it parses the #animation property correctly", () => {
+    const wrapper = factory({ animation: "rs 2000 200" });
+
+    expect(wrapper.vm.parsedAnimation.type).to.equal("rs");
+    expect(wrapper.vm.parsedAnimation.duration).to.equal(2000);
+    expect(wrapper.vm.parsedAnimation.delay).to.equal(200);
+  });
+  describe("#animation.type", () => {
+    animationTypeTests(Circle, "circle.ep-circle--progress");
+    animationTypeTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
+
+    it("circle dot | applies animation class correctly", (done) => {
+      setTimeout(() => {
+        expect(circleDotWrapper.classes()).to.be.an("array").that.include("animation__rs");
+        done();
+      }, 5);
     });
-    describe("#animation.type", () => {
-      animationTypeTests(Circle, "circle.ep-circle--progress");
-      animationTypeTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
-
-      const wrapper = factory({ progress: 50, dot: 5, animation: "rs 500 5" }, CircleContainer);
-      const circleDotWrapper = wrapper.find(CircleDot);
-      it("circle dot | applies animation class correctly", (done) => {
-        setTimeout(() => {
-          expect(circleDotWrapper.classes()).to.be.an("array").that.include("animation__rs");
-          done();
-        }, 5);
-      });
-      it(`circle dot | applies duration value as transition and animation duration`, () => {
-        expect(circleDotWrapper.element.style.transitionDuration).to.equal("500ms");
-        expect(circleDotWrapper.element.style.animationDuration).to.equal("500ms");
-      });
+    /* it("circle dot | disables initial animation for @bounce/@loop types", (done) => {
+      const wrapper = factory({ progress: 50, dot: 5, animation: "bounce 500 0" }, CircleContainer);
+      const cDWrapper = wrapper.find(CircleDot);
+      setTimeout(() => {
+        expect(cDWrapper.classes()).to.be.an("array").that.include("animation__bounce");
+        const { animationName } = getComputedStyle(cDWrapper.element);
+        expect(animationName).to.equal("ep-dot--init__disabled");
+        done();
+      }, 10);
+    }); */
+  });
+
+  describe("#animation.duration", () => {
+    animationDurationTests(Circle, "circle.ep-circle--progress");
+    animationDurationTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
+
+    it(`circle dot | applies duration value as transition and animation duration`, () => {
+      expect(circleDotWrapper.element.style.transitionDuration).to.equal("500ms");
+      expect(circleDotWrapper.element.style.animationDuration).to.equal("500ms");
     });
-    describe("#animation.duration", () => {
-      animationDurationTests(Circle, "circle.ep-circle--progress");
-      animationDurationTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
+  });
+  describe("#animation.delay", () => {
+    animationDelayTests(Circle, "circle.ep-circle--progress");
+    animationDelayTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
+
+    const progress = 50;
+    const wrapper = factory({ dot: 5, animation: "rs 500 50" }, CircleContainer);
+    const cdWrapper = wrapper.find(CircleDot);
+    const startRotation = wrapper.props("angle") + 90;
+
+    it(`circle dot | do not applies any animation type before delay`, () => {
+      expect(cdWrapper.classes())
+        .to.be.an("array")
+        .that.not.include([
+          "animation__default",
+          "animation__bounce",
+          "animation__rs",
+          "animation__reverse",
+          "animation__loop",
+        ]);
     });
-    describe("#animation.delay", () => {
-      animationDelayTests(Circle, "circle.ep-circle--progress");
-      animationDelayTests(HalfCircle, "path.ep-half-circle--progress", "half circle |");
+    /* it(`circle dot | do not applies rotation before delay`, () => {
+      expect(cdWrapper.element.style.transform).to.equal(`rotate(${startRotation}deg)`);
+    }); */
+    it(`circle dot | applies rotation after delay`, (done) => {
+      const endRotation = startRotation + (progress * 360) / 100;
+      setTimeout(() => {
+        expect(cdWrapper.element.style.transform).to.equal(`rotate(${endRotation}deg)`);
+        done();
+      }, 50);
     });
   });
-};
+});
diff --git a/tests/unit/circle/circle-colors.spec.js b/tests/unit/circle/circle-colors.spec.js
index e8ea0c9..5c409bf 100644
--- a/tests/unit/circle/circle-colors.spec.js
+++ b/tests/unit/circle/circle-colors.spec.js
@@ -30,137 +30,135 @@ const gradientColor = {
   ],
 };
 
-export default () => {
-  describe("#color", () => {
-    describe("applies color as string", () => {
-      const color = "#ff0020";
-      const wrapper = factory({ color });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+describe("#color", () => {
+  describe("applies color as string", () => {
+    const color = "#ff0020";
+    const wrapper = factory({ color });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
 
-      it("do not recognize gradient colors", () => {
-        expect(wrapper.vm.isColorGradient).to.be.false;
-      });
+    it("do not recognize gradient colors", () => {
+      expect(wrapper.vm.isColorGradient).to.be.false;
+    });
 
-      it("applies color correctly to SVG stroke", () => {
-        expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`${color}`);
-      });
-    });
-    describe("applies gradient color correctly", () => {
-      const wrapper = factory({ color: gradientColor });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-      const id = wrapper.vm._uid;
+    it("applies color correctly to SVG stroke", () => {
+      expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`${color}`);
+    });
+  });
+  describe("applies gradient color correctly", () => {
+    const wrapper = factory({ color: gradientColor });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+    const id = wrapper.vm._uid;
 
-      it("recognizes gradient colors", () => {
-        expect(wrapper.vm.isColorGradient).to.be.true;
-      });
-      it("renders Gradient component", () => {
-        expect(wrapper.contains(Gradient)).to.be.true;
-      });
-      it("applies gradient URL to SVG stroke", () => {
-        expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`url(#ep-progress-gradient-${id})`);
-      });
-      it("renders corresponding amount of stop colors SVG elements", () => {
-        expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
-      });
+    it("recognizes gradient colors", () => {
+      expect(wrapper.vm.isColorGradient).to.be.true;
+    });
+    it("renders Gradient component", () => {
+      expect(wrapper.contains(Gradient)).to.be.true;
+    });
+    it("applies gradient URL to SVG stroke", () => {
+      expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`url(#ep-progress-gradient-${id})`);
+    });
+    it("renders corresponding amount of stop colors SVG elements", () => {
+      expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
     });
   });
-  describe("#emptyColor", () => {
-    describe("applies color as string", () => {
-      const emptyColor = "#a617ff";
-      const wrapper = factory({ emptyColor });
-      const emptyCircleWrapper = wrapper.find("circle.ep-circle--empty");
+});
+describe("#emptyColor", () => {
+  describe("applies color as string", () => {
+    const emptyColor = "#a617ff";
+    const wrapper = factory({ emptyColor });
+    const emptyCircleWrapper = wrapper.find("circle.ep-circle--empty");
 
-      it("do not recognize gradient colors", () => {
-        expect(wrapper.vm.isEmptyColorGradient).to.be.false;
-      });
+    it("do not recognize gradient colors", () => {
+      expect(wrapper.vm.isEmptyColorGradient).to.be.false;
+    });
 
-      it("applies color correctly to SVG stroke", () => {
-        expect(emptyCircleWrapper.element.getAttribute("stroke")).to.equal(`${emptyColor}`);
-      });
-    });
-    describe("applies gradient color correctly", () => {
-      const wrapper = factory({ emptyColor: gradientColor });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--empty");
-      const id = wrapper.vm._uid;
+    it("applies color correctly to SVG stroke", () => {
+      expect(emptyCircleWrapper.element.getAttribute("stroke")).to.equal(`${emptyColor}`);
+    });
+  });
+  describe("applies gradient color correctly", () => {
+    const wrapper = factory({ emptyColor: gradientColor });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--empty");
+    const id = wrapper.vm._uid;
 
-      it("recognizes gradient colors", () => {
-        expect(wrapper.vm.isEmptyColorGradient).to.be.true;
-      });
-      it("renders Gradient component", () => {
-        expect(wrapper.contains(Gradient)).to.be.true;
-      });
-      it("applies gradient URL to SVG stroke", () => {
-        expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`url(#ep-empty-gradient-${id})`);
-      });
-      it("renders corresponding amount of stop colors SVG elements", () => {
-        expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
-      });
+    it("recognizes gradient colors", () => {
+      expect(wrapper.vm.isEmptyColorGradient).to.be.true;
+    });
+    it("renders Gradient component", () => {
+      expect(wrapper.contains(Gradient)).to.be.true;
+    });
+    it("applies gradient URL to SVG stroke", () => {
+      expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`url(#ep-empty-gradient-${id})`);
+    });
+    it("renders corresponding amount of stop colors SVG elements", () => {
+      expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
     });
   });
-  describe("#colorFill", () => {
-    describe("applies color as string", () => {
-      const colorFill = "#fff149";
-      const wrapper = factory({ colorFill });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+});
+describe("#colorFill", () => {
+  describe("applies color as string", () => {
+    const colorFill = "#fff149";
+    const wrapper = factory({ colorFill });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
 
-      it("do not recognize gradient colors", () => {
-        expect(wrapper.vm.isColorGradient).to.be.false;
-      });
+    it("do not recognize gradient colors", () => {
+      expect(wrapper.vm.isColorGradient).to.be.false;
+    });
 
-      it("applies color correctly to SVG fill", () => {
-        expect(circleProgressWrapper.element.getAttribute("fill")).to.equal(`${colorFill}`);
-      });
-    });
-    describe("applies gradient color correctly", () => {
-      const wrapper = factory({ colorFill: gradientColor });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-      const id = wrapper.vm._uid;
+    it("applies color correctly to SVG fill", () => {
+      expect(circleProgressWrapper.element.getAttribute("fill")).to.equal(`${colorFill}`);
+    });
+  });
+  describe("applies gradient color correctly", () => {
+    const wrapper = factory({ colorFill: gradientColor });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+    const id = wrapper.vm._uid;
 
-      it("recognizes gradient colors", () => {
-        expect(wrapper.vm.isColorFillGradient).to.be.true;
-      });
-      it("renders Gradient component", () => {
-        expect(wrapper.contains(Gradient)).to.be.true;
-      });
-      it("applies gradient URL to SVG fill", () => {
-        expect(circleProgressWrapper.element.getAttribute("fill")).to.equal(`url(#ep-progress-fill-gradient-${id})`);
-      });
-      it("renders corresponding amount of stop colors SVG elements", () => {
-        expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
-      });
+    it("recognizes gradient colors", () => {
+      expect(wrapper.vm.isColorFillGradient).to.be.true;
+    });
+    it("renders Gradient component", () => {
+      expect(wrapper.contains(Gradient)).to.be.true;
+    });
+    it("applies gradient URL to SVG fill", () => {
+      expect(circleProgressWrapper.element.getAttribute("fill")).to.equal(`url(#ep-progress-fill-gradient-${id})`);
+    });
+    it("renders corresponding amount of stop colors SVG elements", () => {
+      expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
     });
   });
-  describe("#emptyColorFill", () => {
-    describe("applies color as string", () => {
-      const emptyColorFill = "#3f79ff";
-      const wrapper = factory({ emptyColorFill });
-      const emptyCircleWrapper = wrapper.find("circle.ep-circle--empty");
+});
+describe("#emptyColorFill", () => {
+  describe("applies color as string", () => {
+    const emptyColorFill = "#3f79ff";
+    const wrapper = factory({ emptyColorFill });
+    const emptyCircleWrapper = wrapper.find("circle.ep-circle--empty");
 
-      it("do not recognize gradient colors", () => {
-        expect(wrapper.vm.isEmptyColorGradient).to.be.false;
-      });
+    it("do not recognize gradient colors", () => {
+      expect(wrapper.vm.isEmptyColorGradient).to.be.false;
+    });
 
-      it("applies color correctly to SVG fill", () => {
-        expect(emptyCircleWrapper.element.getAttribute("fill")).to.equal(`${emptyColorFill}`);
-      });
-    });
-    describe("applies gradient color correctly", () => {
-      const wrapper = factory({ emptyColorFill: gradientColor });
-      const emptyCircleWrapper = wrapper.find("circle.ep-circle--empty");
-      const id = wrapper.vm._uid;
+    it("applies color correctly to SVG fill", () => {
+      expect(emptyCircleWrapper.element.getAttribute("fill")).to.equal(`${emptyColorFill}`);
+    });
+  });
+  describe("applies gradient color correctly", () => {
+    const wrapper = factory({ emptyColorFill: gradientColor });
+    const emptyCircleWrapper = wrapper.find("circle.ep-circle--empty");
+    const id = wrapper.vm._uid;
 
-      it("recognizes gradient colors", () => {
-        expect(wrapper.vm.isEmptyColorFillGradient).to.be.true;
-      });
-      it("renders Gradient component", () => {
-        expect(wrapper.contains(Gradient)).to.be.true;
-      });
-      it("applies gradient URL to SVG fill", () => {
-        expect(emptyCircleWrapper.element.getAttribute("fill")).to.equal(`url(#ep-empty-fill-gradient-${id})`);
-      });
-      it("renders corresponding amount of stop colors SVG elements", () => {
-        expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
-      });
+    it("recognizes gradient colors", () => {
+      expect(wrapper.vm.isEmptyColorFillGradient).to.be.true;
+    });
+    it("renders Gradient component", () => {
+      expect(wrapper.contains(Gradient)).to.be.true;
+    });
+    it("applies gradient URL to SVG fill", () => {
+      expect(emptyCircleWrapper.element.getAttribute("fill")).to.equal(`url(#ep-empty-fill-gradient-${id})`);
+    });
+    it("renders corresponding amount of stop colors SVG elements", () => {
+      expect(wrapper.findAll("stop").length).to.equal(gradientColor.colors.length);
     });
   });
-};
+});
diff --git a/tests/unit/circle/circle-line.spec.js b/tests/unit/circle/circle-line.spec.js
index 52f3797..3396a5e 100644
--- a/tests/unit/circle/circle-line.spec.js
+++ b/tests/unit/circle/circle-line.spec.js
@@ -31,249 +31,247 @@ const factory = (propsData) => {
   });
 };
 
-export default () => {
-  describe("#line", () => {
-    it("renders line type correctly", async () => {
-      let line = "round";
-
-      const wrapper = factory({ line });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-      expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
-
-      line = "butt";
-      wrapper.setProps({ line });
-      await Vue.nextTick();
-      expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
-
-      line = "square";
-      wrapper.setProps({ line });
-      await Vue.nextTick();
-      expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
-    });
+describe("#line", () => {
+  it("renders line type correctly", async () => {
+    let line = "round";
+
+    const wrapper = factory({ line });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+    expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
+
+    line = "butt";
+    wrapper.setProps({ line });
+    await Vue.nextTick();
+    expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
+
+    line = "square";
+    wrapper.setProps({ line });
+    await Vue.nextTick();
+    expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
   });
-  describe("#lineMode", () => {
-    it("it parses the #lineMode property correctly", () => {
-      const wrapper = factory({ lineMode: "normal 10" });
+});
+describe("#lineMode", () => {
+  it("it parses the #lineMode property correctly", () => {
+    const wrapper = factory({ lineMode: "normal 10" });
 
-      expect(wrapper.vm.parsedLineMode.mode).to.equal("normal");
-      expect(wrapper.vm.parsedLineMode.offset).to.equal(10);
-    });
-    it("it applies default value correctly", () => {
-      const wrapper = factory({ lineMode: "normal 10" });
+    expect(wrapper.vm.parsedLineMode.mode).to.equal("normal");
+    expect(wrapper.vm.parsedLineMode.offset).to.equal(10);
+  });
+  it("it applies default value correctly", () => {
+    const wrapper = factory({ lineMode: "normal 10" });
 
-      expect(wrapper.vm.parsedLineMode.mode).to.equal("normal");
-      expect(wrapper.vm.parsedLineMode.offset).to.equal(10);
-    });
-    describe("#lineMode.mode", () => {
-      describe("#lineMode.mode.normal", () => {
-        let thickness = 20;
-        let emptyThickness = 10;
-        const wrapper = factory({
-          thickness,
-          emptyThickness,
-          lineMode: "normal",
-          animation: "default 0 0",
-        });
+    expect(wrapper.vm.parsedLineMode.mode).to.equal("normal");
+    expect(wrapper.vm.parsedLineMode.offset).to.equal(10);
+  });
+  describe("#lineMode.mode", () => {
+    describe("#lineMode.mode.normal", () => {
+      let thickness = 20;
+      let emptyThickness = 10;
+      const wrapper = factory({
+        thickness,
+        emptyThickness,
+        lineMode: "normal",
+        animation: "default 0 0",
+      });
 
-        describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => {
-          it("in case #thickness >= #emptyThickness", async () => {
-            let expectedProgressCircleRadius = baseRadius - thickness / 2;
-            let expectedEmptyCircleRadius = expectedProgressCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-
-            thickness = emptyThickness = 10;
-
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
-
-            expectedProgressCircleRadius = baseRadius - thickness / 2;
-            expectedEmptyCircleRadius = expectedProgressCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
-          it("in case #thickness >= #emptyThickness and #lineMode.offset = 10", async () => {
-            // offset must be ignored in this mode
-            wrapper.setProps({ lineMode: "normal 10" });
-            await Vue.nextTick();
-
-            let expectedProgressCircleRadius = baseRadius - thickness / 2;
-            let expectedEmptyCircleRadius = expectedProgressCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-
-            thickness = emptyThickness = 10;
-
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
-
-            expectedProgressCircleRadius = baseRadius - thickness / 2;
-            expectedEmptyCircleRadius = expectedProgressCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
-          it("in case #thickness < #emptyThickness", async () => {
-            thickness = 10;
-            emptyThickness = 20;
-
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
-
-            const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-            const expectedProgressCircleRadius = expectedEmptyCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
-          it("in case #thickness < #emptyThickness and #lineMode.offset = 10", async () => {
-            // offset must be ignored in this mode
-            thickness = 10;
-            emptyThickness = 20;
-
-            wrapper.setProps({ thickness, emptyThickness, lineMode: "normal 10" });
-            await Vue.nextTick();
-
-            const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-            const expectedProgressCircleRadius = expectedEmptyCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
+      describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => {
+        it("in case #thickness >= #emptyThickness", async () => {
+          let expectedProgressCircleRadius = baseRadius - thickness / 2;
+          let expectedEmptyCircleRadius = expectedProgressCircleRadius;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+
+          thickness = emptyThickness = 10;
+
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
+
+          expectedProgressCircleRadius = baseRadius - thickness / 2;
+          expectedEmptyCircleRadius = expectedProgressCircleRadius;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
-      });
-      describe("#lineMode.mode.in", () => {
-        const offset = 10;
-        const thickness = 20;
-        const emptyThickness = 10;
-        const wrapper = factory({
-          thickness,
-          emptyThickness,
-          lineMode: `in ${offset}`,
+        it("in case #thickness >= #emptyThickness and #lineMode.offset = 10", async () => {
+          // offset must be ignored in this mode
+          wrapper.setProps({ lineMode: "normal 10" });
+          await Vue.nextTick();
+
+          let expectedProgressCircleRadius = baseRadius - thickness / 2;
+          let expectedEmptyCircleRadius = expectedProgressCircleRadius;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+
+          thickness = emptyThickness = 10;
+
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
+
+          expectedProgressCircleRadius = baseRadius - thickness / 2;
+          expectedEmptyCircleRadius = expectedProgressCircleRadius;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
+        it("in case #thickness < #emptyThickness", async () => {
+          thickness = 10;
+          emptyThickness = 20;
+
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
 
-        it("circles does not exceed the size and aligns properly in relation to each other", () => {
           const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-          const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 - thickness / 2 - offset;
+          const expectedProgressCircleRadius = expectedEmptyCircleRadius;
           compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
-      });
-      describe("#lineMode.mode.in-over", () => {
-        const offset = 10; // must be ignored in this mode
-        const thickness = 20;
-        const emptyThickness = 10;
-        const wrapper = factory({
-          thickness,
-          emptyThickness,
-          lineMode: `in-over ${offset}`,
-        });
+        it("in case #thickness < #emptyThickness and #lineMode.offset = 10", async () => {
+          // offset must be ignored in this mode
+          thickness = 10;
+          emptyThickness = 20;
+
+          wrapper.setProps({ thickness, emptyThickness, lineMode: "normal 10" });
+          await Vue.nextTick();
 
-        it("circles does not exceed the size and aligns properly in relation to each other", () => {
           const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-          const expectedProgressCircleRadius = baseRadius - thickness / 2;
+          const expectedProgressCircleRadius = expectedEmptyCircleRadius;
           compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
       });
-      describe("#lineMode.mode.out", () => {
-        const offset = 10;
-        const thickness = 10;
-        const emptyThickness = 10;
-        const wrapper = factory({
-          progress,
-          thickness,
-          emptyThickness,
-          lineMode: `out ${offset}`,
-        });
+    });
+    describe("#lineMode.mode.in", () => {
+      const offset = 10;
+      const thickness = 20;
+      const emptyThickness = 10;
+      const wrapper = factory({
+        thickness,
+        emptyThickness,
+        lineMode: `in ${offset}`,
+      });
 
-        it("circles does not exceed the size and aligns properly in relation to each other", () => {
-          const expectedProgressCircleRadius = baseRadius - emptyThickness / 2;
-          const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2 - thickness / 2 - offset;
-          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-        });
+      it("circles does not exceed the size and aligns properly in relation to each other", () => {
+        const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
+        const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 - thickness / 2 - offset;
+        compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+      });
+    });
+    describe("#lineMode.mode.in-over", () => {
+      const offset = 10; // must be ignored in this mode
+      const thickness = 20;
+      const emptyThickness = 10;
+      const wrapper = factory({
+        thickness,
+        emptyThickness,
+        lineMode: `in-over ${offset}`,
       });
-      describe("#lineMode.mode.out-over", () => {
-        const offset = 10; // must be ignored in this mode
-        let thickness = 20;
-        let emptyThickness = 10;
-        const wrapper = factory({
-          thickness,
-          emptyThickness,
-          lineMode: `out-over ${offset}`,
-        });
 
-        describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => {
-          it("in case #thickness >= #emptyThickness", async () => {
-            let expectedProgressCircleRadius = baseRadius - thickness / 2;
-            let expectedEmptyCircleRadius = expectedProgressCircleRadius - thickness / 2 + emptyThickness / 2;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+      it("circles does not exceed the size and aligns properly in relation to each other", () => {
+        const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
+        const expectedProgressCircleRadius = baseRadius - thickness / 2;
+        compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+      });
+    });
+    describe("#lineMode.mode.out", () => {
+      const offset = 10;
+      const thickness = 10;
+      const emptyThickness = 10;
+      const wrapper = factory({
+        progress,
+        thickness,
+        emptyThickness,
+        lineMode: `out ${offset}`,
+      });
 
-            thickness = emptyThickness = 10;
+      it("circles does not exceed the size and aligns properly in relation to each other", () => {
+        const expectedProgressCircleRadius = baseRadius - emptyThickness / 2;
+        const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2 - thickness / 2 - offset;
+        compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+      });
+    });
+    describe("#lineMode.mode.out-over", () => {
+      const offset = 10; // must be ignored in this mode
+      let thickness = 20;
+      let emptyThickness = 10;
+      const wrapper = factory({
+        thickness,
+        emptyThickness,
+        lineMode: `out-over ${offset}`,
+      });
 
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
+      describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => {
+        it("in case #thickness >= #emptyThickness", async () => {
+          let expectedProgressCircleRadius = baseRadius - thickness / 2;
+          let expectedEmptyCircleRadius = expectedProgressCircleRadius - thickness / 2 + emptyThickness / 2;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
 
-            expectedProgressCircleRadius = baseRadius - thickness / 2;
-            expectedEmptyCircleRadius = expectedProgressCircleRadius;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
-          it("in case #thickness < #emptyThickness", async () => {
-            thickness = 10;
-            emptyThickness = 20;
+          thickness = emptyThickness = 10;
 
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
 
-            const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-            const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 + thickness / 2;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
-        });
-      });
-      describe("#lineMode.mode.top", () => {
-        const offset = 10; // must be ignored in this mode
-        const thickness = 20;
-        const emptyThickness = 20;
-        const wrapper = factory({
-          thickness,
-          emptyThickness,
-          lineMode: `top ${offset}`,
+          expectedProgressCircleRadius = baseRadius - thickness / 2;
+          expectedEmptyCircleRadius = expectedProgressCircleRadius;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
+        it("in case #thickness < #emptyThickness", async () => {
+          thickness = 10;
+          emptyThickness = 20;
 
-        it("circles does not exceed the size and aligns properly in relation to each other", () => {
-          const expectedProgressCircleRadius = baseRadius - thickness / 2;
-          const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2;
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
+
+          const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
+          const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 + thickness / 2;
           compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
       });
-      describe("#lineMode.mode.bottom", () => {
-        const offset = 10; // must be ignored in this mode
-        let thickness = 40;
-        let emptyThickness = 10;
-        const wrapper = factory({
-          thickness,
-          emptyThickness,
-          lineMode: `bottom ${offset}`,
-        });
+    });
+    describe("#lineMode.mode.top", () => {
+      const offset = 10; // must be ignored in this mode
+      const thickness = 20;
+      const emptyThickness = 20;
+      const wrapper = factory({
+        thickness,
+        emptyThickness,
+        lineMode: `top ${offset}`,
+      });
+
+      it("circles does not exceed the size and aligns properly in relation to each other", () => {
+        const expectedProgressCircleRadius = baseRadius - thickness / 2;
+        const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2;
+        compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+      });
+    });
+    describe("#lineMode.mode.bottom", () => {
+      const offset = 10; // must be ignored in this mode
+      let thickness = 40;
+      let emptyThickness = 10;
+      const wrapper = factory({
+        thickness,
+        emptyThickness,
+        lineMode: `bottom ${offset}`,
+      });
 
-        describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => {
-          it("in case #thickness * 2 > #emptyThickness", () => {
-            const expectedProgressCircleRadius = baseRadius - thickness / 2;
-            const expectedEmptyCircleRadius = expectedProgressCircleRadius + emptyThickness / 2;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
-          it("in case #thickness * 2 <= #emptyThickness", async () => {
-            thickness = 10;
-            emptyThickness = 20;
+      describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => {
+        it("in case #thickness * 2 > #emptyThickness", () => {
+          const expectedProgressCircleRadius = baseRadius - thickness / 2;
+          const expectedEmptyCircleRadius = expectedProgressCircleRadius + emptyThickness / 2;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+        });
+        it("in case #thickness * 2 <= #emptyThickness", async () => {
+          thickness = 10;
+          emptyThickness = 20;
 
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
 
-            let expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-            let expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
+          let expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
+          let expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
 
-            thickness = emptyThickness = 20;
+          thickness = emptyThickness = 20;
 
-            wrapper.setProps({ thickness, emptyThickness });
-            await Vue.nextTick();
+          wrapper.setProps({ thickness, emptyThickness });
+          await Vue.nextTick();
 
-            expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
-            expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2;
-            compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
-          });
+          expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
+          expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2;
+          compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
         });
       });
     });
   });
-};
+});
diff --git a/tests/unit/circle/circle-thickness.spec.js b/tests/unit/circle/circle-thickness.spec.js
index 2c7e313..6886d3d 100644
--- a/tests/unit/circle/circle-thickness.spec.js
+++ b/tests/unit/circle/circle-thickness.spec.js
@@ -14,47 +14,45 @@ const factory = (propsData) => {
   });
 };
 
-export default () => {
-  describe("#thickness", () => {
-    it("renders the progress circle line stroke thickness correctly", () => {
-      const thickness = 4;
-
-      const wrapper = factory({ thickness });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-
-      expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${thickness}`);
-    });
-    it("renders and calculates the progress circle line stroke relative thickness correctly", () => {
-      const size = 200;
-      const thickness = "5%";
-      const relativeThickness = (parseInt(thickness, 10) * size) / 100;
-
-      const wrapper = factory({ thickness });
-      const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
-
-      expect(wrapper.vm.computedThickness).to.equal(relativeThickness);
-      expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`);
-    });
+describe("#thickness", () => {
+  it("renders the progress circle line stroke thickness correctly", () => {
+    const thickness = 4;
+
+    const wrapper = factory({ thickness });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+
+    expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${thickness}`);
   });
-  describe("#emptyTthickness", () => {
-    it("renders the empty circle line stroke thickness correctly", () => {
-      const emptyThickness = 4;
-
-      const wrapper = factory({ emptyThickness });
-      const circleEmptyWrapper = wrapper.find("circle.ep-circle--empty");
-
-      expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${emptyThickness}`);
-    });
-    it("renders and calculates the empty circle line stroke relative thickness correctly", () => {
-      const size = 200;
-      const emptyThickness = "5%";
-      const relativeThickness = (parseInt(emptyThickness, 10) * size) / 100;
-
-      const wrapper = factory({ emptyThickness });
-      const circleEmptyWrapper = wrapper.find("circle.ep-circle--empty");
-
-      expect(wrapper.vm.computedEmptyThickness).to.equal(relativeThickness);
-      expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`);
-    });
+  it("renders and calculates the progress circle line stroke relative thickness correctly", () => {
+    const size = 200;
+    const thickness = "5%";
+    const relativeThickness = (parseInt(thickness, 10) * size) / 100;
+
+    const wrapper = factory({ thickness });
+    const circleProgressWrapper = wrapper.find("circle.ep-circle--progress");
+
+    expect(wrapper.vm.computedThickness).to.equal(relativeThickness);
+    expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`);
   });
-};
+});
+describe("#emptyTthickness", () => {
+  it("renders the empty circle line stroke thickness correctly", () => {
+    const emptyThickness = 4;
+
+    const wrapper = factory({ emptyThickness });
+    const circleEmptyWrapper = wrapper.find("circle.ep-circle--empty");
+
+    expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${emptyThickness}`);
+  });
+  it("renders and calculates the empty circle line stroke relative thickness correctly", () => {
+    const size = 200;
+    const emptyThickness = "5%";
+    const relativeThickness = (parseInt(emptyThickness, 10) * size) / 100;
+
+    const wrapper = factory({ emptyThickness });
+    const circleEmptyWrapper = wrapper.find("circle.ep-circle--empty");
+
+    expect(wrapper.vm.computedEmptyThickness).to.equal(relativeThickness);
+    expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`);
+  });
+});
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 6a553c5..4d6b201 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -4,14 +4,14 @@ import Vue from "vue";
 import Circle from "../../../src/components/Circle/Circle.vue";
 import HalfCircle from "../../../src/components/Circle/HalfCircle.vue";
 import VueEllipseProgress from "../../../src/components/VueEllipseProgress.vue";
-
-import lineTest from "./circle-line.spec";
-import thicknessTest from "./circle-thickness.spec";
-import animationTest from "./circle-animation.spec";
-import colorsTest from "./circle-colors.spec";
-import dotTests from "./cirlce-dot.spec";
 import { dotParser } from "../../../src/components/optionsParser";
 
+import "./circle-line.spec";
+import "./circle-thickness.spec";
+import "./circle-animation.spec";
+import "./circle-colors.spec";
+import "./cirlce-dot.spec";
+
 const factory = (propsData, container = Circle) => {
   return mount(container, {
     propsData: {
@@ -302,11 +302,4 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       });
     }
   });
-
-  /* thicknessTest();
-  lineTest();
-  colorsTest();
-  */
-  animationTest();
-  // dotTests();
 });
diff --git a/tests/unit/circle/cirlce-dot.spec.js b/tests/unit/circle/cirlce-dot.spec.js
index 6aa0b38..d6dadca 100644
--- a/tests/unit/circle/cirlce-dot.spec.js
+++ b/tests/unit/circle/cirlce-dot.spec.js
@@ -1,5 +1,6 @@
 import { expect } from "chai";
 import { mount } from "@vue/test-utils";
+import Vue from "vue";
 import CircleContainer from "../../../src/components/Circle/CircleContainer.vue";
 import VueEllipseProgress from "../../../src/components/VueEllipseProgress.vue";
 import Circle from "../../../src/components/Circle/Circle.vue";
@@ -17,117 +18,119 @@ const factory = (propsData, container = Circle) => {
   });
 };
 
-export default () => {
-  describe("#dot", () => {
-    const progress = 50;
-    const thickness = 5;
-    const size = 500;
-    const globalDot = "5%";
-
-    const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
-
-    it(`parses property correctly`, () => {
-      const wrapper = factory({ progress, size });
-      let dot = 0;
-      expect(wrapper.vm.parsedDot.size).to.equal("0");
-      expect(wrapper.vm.parsedDot.color).to.equal("white");
-
-      dot = "5% red";
-      wrapper.setProps({ dot });
-      expect(wrapper.vm.parsedDot.size).to.equal("5%");
-      expect(wrapper.vm.parsedDot.color).to.equal("red");
-
-      dot = { size: 10, backgroundColor: "green" };
-      wrapper.setProps({ dot });
-      expect(wrapper.vm.parsedDot.size).to.equal(10);
-      expect(wrapper.vm.parsedDot.color).to.equal("white");
-      expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
-    });
+describe("#dot", () => {
+  const progress = 50;
+  const thickness = 5;
+  const size = 500;
+  const globalDot = "5%";
+
+  const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
+
+  it(`parses property correctly`, () => {
+    const wrapper = factory({ progress, size });
+    let dot = 0;
+    expect(wrapper.vm.parsedDot.size).to.equal("0");
+    expect(wrapper.vm.parsedDot.color).to.equal("white");
+
+    dot = "5% red";
+    wrapper.setProps({ dot });
+    expect(wrapper.vm.parsedDot.size).to.equal("5%");
+    expect(wrapper.vm.parsedDot.color).to.equal("red");
+
+    dot = { size: 10, backgroundColor: "green" };
+    wrapper.setProps({ dot });
+    expect(wrapper.vm.parsedDot.size).to.equal(10);
+    expect(wrapper.vm.parsedDot.color).to.equal("white");
+    expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
+  });
 
-    it("applies default value correctly", () => {
-      const wrapper = factory({ progress }, VueEllipseProgress);
-      const circleWrapper = wrapper.find(Circle);
-      const circleContainerWrapper = wrapper.find(CircleContainer);
+  it("applies default value correctly", () => {
+    const wrapper = factory({ progress }, VueEllipseProgress);
+    const circleWrapper = wrapper.find(Circle);
+    const circleContainerWrapper = wrapper.find(CircleContainer);
+
+    expect(wrapper.props("dot")).to.equal(0);
+    expect(circleContainerWrapper.props("dot")).to.equal(0);
+    expect(circleWrapper.vm.parsedDot.size).to.equal("0");
+    expect(circleWrapper.vm.parsedDot.color).to.equal("white");
+    expect(circleWrapper.vm.dotSize).to.equal(0);
+  });
 
-      expect(wrapper.props("dot")).to.equal(0);
-      expect(circleContainerWrapper.props("dot")).to.equal(0);
-      expect(circleWrapper.vm.parsedDot.size).to.equal("0");
-      expect(circleWrapper.vm.parsedDot.color).to.equal("white");
-      expect(circleWrapper.vm.dotSize).to.equal(0);
+  it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
+    const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
+    const circleDotWrapper = wrapper.find(CircleDot);
+    const rotationStart = wrapper.props("angle") + 90;
+    const rotation = rotationStart + (progress * 360) / 100;
+    setTimeout(() => {
+      expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotation}deg)`);
+      done();
+    }, 0);
+  });
+
+  it(`applies correct initial rotation of the dot container`, async () => {
+    const wrapper = factory({ progress, dot: 5, animation: "default 0 1000" }, CircleContainer);
+    const circleDotWrapper = wrapper.find(CircleDot);
+    const angle = wrapper.props("angle");
+    const rotationStart = angle + 90;
+    expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
+
+    wrapper.setProps({ half: true });
+    const halfRotationStart = angle - 90;
+    await Vue.nextTick();
+    expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${halfRotationStart}deg)`);
+  });
+
+  const data = [
+    { progress, thickness, dot: 5 },
+    { progress, thickness, dot: "5" },
+    { progress, thickness, dot: "5%" },
+    { progress, thickness, dot: "5% red" },
+    { progress, thickness, dot: "5 blue" },
+    { progress, thickness, dot: { size: 5 } },
+    { progress, thickness, dot: { size: "5%" } },
+    { progress, thickness, dot: { size: 5, backgroundColor: "yellow" } },
+    { progress, thickness, dot: { size: "3%", background: "green", borderRadius: "2px" } },
+  ];
+
+  for (let i = 0; i < data.length; i++) {
+    const circleData = data[i];
+    const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
+    const circleDotSpanWrapper = wrapper.find("span.ep-circle--progress__dot");
+    const circleDotWrapper = wrapper.find(CircleDot);
+    const circleWrapper = wrapper.find(Circle);
+    const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
+    const parsedDotSize = parseFloat(calculateThickness(parsedDot.size));
+    const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
+
+    it(`renders dot component | #dot = ${circleData.dot}`, () => {
+      expect(wrapper.contains(CircleDot)).to.be.true;
     });
 
-    it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
-      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
-      const circleDotWrapper = wrapper.find(CircleDot);
-      const rotationStart = wrapper.props("angle") + 90;
-      const rotation = rotationStart + (progress * 360) / 100;
-      setTimeout(() => {
-        expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotation}deg)`);
-        done();
-      }, 0);
+    it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
+      expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
     });
 
-    it(`applies correct initial rotation of the dot container`, () => {
-      const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
-      const circleDotWrapper = wrapper.find(CircleDot);
-      const angle = wrapper.props("angle");
-      const isHalf = wrapper.props("half");
-      const rotationStart = isHalf ? angle - 90 : angle + 90;
-      expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
+    it(`applies the color of the dot correctly | #dot = ${circleData.dot}`, () => {
+      const { background } = circleDotSpanWrapper.element.style;
+      if (background) {
+        expect(circleDotSpanWrapper.element.style.background).to.equal(`${parsedDotColor}`);
+      } else {
+        expect(circleDotSpanWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
+      }
     });
 
-    const data = [
-      { progress, thickness, dot: 5 },
-      { progress, thickness, dot: "5" },
-      { progress, thickness, dot: "5%" },
-      { progress, thickness, dot: "5% red" },
-      { progress, thickness, dot: "5 blue" },
-      { progress, thickness, dot: { size: 5 } },
-      { progress, thickness, dot: { size: "5%" } },
-      { progress, thickness, dot: { size: 5, backgroundColor: "yellow" } },
-      { progress, thickness, dot: { size: "3%", background: "green", borderRadius: "2px" } },
-    ];
-
-    for (let i = 0; i < data.length; i++) {
-      const circleData = data[i];
-      const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
-      const circleDotSpanWrapper = wrapper.find("span.ep-circle--progress__dot");
-      const circleDotWrapper = wrapper.find(CircleDot);
-      const circleWrapper = wrapper.find(Circle);
-      const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
-      const parsedDotSize = parseFloat(calculateThickness(parsedDot.size));
-      const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
-
-      it(`renders dot component | #dot = ${circleData.dot}`, () => {
-        expect(wrapper.contains(CircleDot)).to.be.true;
-      });
-
-      it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
-        expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
-      });
-
-      it(`applies the color of the dot correctly | #dot = ${circleData.dot}`, () => {
-        const { background } = circleDotSpanWrapper.element.style;
-        if (background) {
-          expect(circleDotSpanWrapper.element.style.background).to.equal(`${parsedDotColor}`);
-        } else {
-          expect(circleDotSpanWrapper.element.style.backgroundColor).to.equal(`${parsedDotColor}`);
-        }
-      });
-
-      it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
-        const circleRadius = circleWrapper.vm.radius;
-        const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
-        expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
-        expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
-      });
-
-      it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
-        const circleRadius = circleWrapper.vm.radius;
-        const containerSize = circleRadius * 2 + parsedDotSize;
-        expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
-        expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
-      });
-    }
-  });
-};
+    it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
+      const circleRadius = circleWrapper.vm.radius;
+      const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
+      expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
+      expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
+    });
+
+    it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
+      const circleRadius = circleWrapper.vm.radius;
+      const containerSize = circleRadius * 2 + parsedDotSize;
+      expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
+      expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
+    });
+  }
+});

From df3bf42f09b3d59cd574e99c9aea5dc076b17a5b Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 6 Jun 2020 20:59:41 +0200
Subject: [PATCH 43/43] test: add #dot size percent value to pixel conversion
 test

---
 src/components/Circle/circleMixin.js | 3 +--
 tests/unit/circle/cirlce-dot.spec.js | 7 +++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index edf0062..07fe2e2 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -289,8 +289,7 @@ export default {
   async mounted() {
     if (!this.loading) {
       // await initial delay before applying animations
-      const a = this.parsedAnimation.delay;
-      await wait(a);
+      await wait(this.parsedAnimation.delay);
     }
     this.isInitialized = true;
   },
diff --git a/tests/unit/circle/cirlce-dot.spec.js b/tests/unit/circle/cirlce-dot.spec.js
index d6dadca..818669e 100644
--- a/tests/unit/circle/cirlce-dot.spec.js
+++ b/tests/unit/circle/cirlce-dot.spec.js
@@ -44,6 +44,13 @@ describe("#dot", () => {
     expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
   });
 
+  it(`converts the size percent value to pixel correctly`, () => {
+    const dot = "5%";
+    const wrapper = factory({ progress, size, dot });
+    const dotPixelSize = calculateThickness(dot);
+    expect(wrapper.vm.dotSize).to.equal(dotPixelSize);
+  });
+
   it("applies default value correctly", () => {
     const wrapper = factory({ progress }, VueEllipseProgress);
     const circleWrapper = wrapper.find(Circle);