refac: fill circles radius calculation

Author: setaman

src/App.vue

@@ -40,13 +40,12 @@
       <div style="border: 1px solid red; display: inline-block">
         <ve-progress
           :size="600"
-          half
           :angle="0"
-          line-position="out 70"
+          line-position="out 26"
           empty-line-position="out 20"
           empty-color-fill="red"
-          color-fill="green"
-          empty-color="transparent"
+          color-fill="#273266"
+          empty-color="blue"
           :progress="progress"
           :no-data="noData"
         >

src/components/Circle/circleMixin.js

@@ -1,4 +1,4 @@
-import { emptyRadius, radius } from "@/components/Circle/radiusCalculation";
+import { emptyRadius, fillRadius, radius } from "@/components/Circle/radiusCalculation";
 import { isValidNumber } from "../../utils";
 
 const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));
@@ -33,23 +33,13 @@ export default {
       return radius(this.options);
     },
     fillRadius() {
-      const { offset, position } = this.options.linePosition;
-      if (position === "center") {
-        return this.radius;
-      }
-      return position === "out" ? this.radius - offset - this.thickness / 2 : this.radius + this.thickness / 2;
+      return fillRadius(this.options.linePosition, this.thickness, this.radius);
     },
     emptyRadius() {
       return emptyRadius(this.options);
     },
     emptyFillRadius() {
-      const { offset, position } = this.options.emptyLinePosition;
-      if (position === "center") {
-        return this.emptyRadius;
-      }
-      return position === "out"
-        ? this.emptyRadius - offset - this.emptyThickness / 2
-        : this.emptyRadius + this.emptyThickness / 2;
+      return fillRadius(this.options.emptyLinePosition, this.emptyThickness, this.emptyRadius);
     },
 
     dataIsAvailable() {

src/components/Circle/radiusCalculation.js

@@ -105,3 +105,11 @@ export const emptyRadius = (options) => {
   const modeHandler = modes[options.lineMode.mode];
   return modeHandler ? modeHandler() : emptyBaseRadius(options);
 };
+
+export const fillRadius = (linePosition, thickness, lineCircleRadius) => {
+  const { position, offset } = linePosition;
+  if (position === "center") {
+    return lineCircleRadius;
+  }
+  return position === "out" ? lineCircleRadius - offset - thickness / 2 : lineCircleRadius + thickness / 2;
+};