Merge pull request #93 from setaman/v2-stroke-alignment

V2 stroke alignment

Author: setaman

package.json

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

src/App.vue

@@ -39,29 +39,15 @@
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
         <ve-progress
-          :size="200"
+          :size="600"
+          :angle="0"
+          line-position="out 26"
+          empty-line-position="out 20"
+          empty-color-fill="transparent"
+          color-fill="red"
           :progress="progress"
-          :legendValue="1315.56"
-          animation="rs 2000 500"
-          :loading="loading"
-          :reverse="true"
-          :thickness="20"
-          :empty-thickness="10"
-          dot="10 red"
-          :loader="{ thickness: 40, color: 'red' }"
-          line-mode="bottom"
           :no-data="noData"
-          :determinate="determinate"
         >
-          <template v-slot:default="{ counterTick }">
-            <span
-              :style="` transition: 0.5s; font-weight: bold; font-size: 1.6rem; color: ${
-                counterTick.currentValue < 600 ? 'red' : 'yellow'
-              };`"
-            >
-              {{ formattedPrice(counterTick.currentValue) }}
-            </span>
-          </template>
         </ve-progress>
       </div>
       <ve-progress

src/components/Circle/Circle.vue

@@ -7,14 +7,27 @@
       transform: `rotate(${angle}deg)`,
     }"
   >
+    <circle
+      class="ep-circle--empty__fill"
+      :r="emptyFillRadius"
+      :cx="position"
+      :cy="position"
+      :fill="computedEmptyColorFill"
+      :class="{ 'ep-circle--nodata': !dataIsAvailable }"
+      :style="{
+        transitionDuration: animationDuration,
+        transitionTimingFunction: styles.transitionTimingFunction,
+      }"
+    >
+    </circle>
     <circle
       class="ep-circle--empty"
       :r="emptyRadius"
       :cx="position"
       :cy="position"
       :stroke="computedEmptyColor"
       :stroke-dasharray="emptyDasharray"
-      :fill="computedEmptyColorFill"
+      fill="transparent"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{
         transitionDuration: animationDuration,
@@ -28,13 +41,23 @@
         <circle-loader :options="options.loader" />
       </g>
     </fade-in-transition>
+    <circle
+      class="ep-circle--progress__fill"
+      :r="fillRadius"
+      :cx="position"
+      :cy="position"
+      :fill="computedColorFill"
+      :class="{ 'ep-circle--nodata': !dataIsAvailable }"
+      :style="{ transition: styles.transition }"
+    >
+    </circle>
     <circle
       class="ep-circle--progress"
       :class="animationClass"
       :r="radius"
       :cx="position"
       :cy="position"
-      :fill="computedColorFill"
+      fill="transparent"
       :stroke="computedColor"
       :stroke-width="thickness"
       :stroke-linecap="options.line"

src/components/Circle/HalfCircle.vue

@@ -7,9 +7,18 @@
       transform: `rotate(${angle}deg)`,
     }"
   >
+    <path
+      :fill="computedEmptyColorFill"
+      :d="emptyFillPath"
+      :style="{
+        transition: styles.transition,
+      }"
+      :class="{ 'ep-circle--nodata': !dataIsAvailable }"
+    >
+    </path>
     <path
       :stroke-width="emptyThickness"
-      :fill="computedColorFill"
+      fill="transparent"
       :stroke="computedEmptyColor"
       class="ep-half-circle--empty"
       :d="emptyPath"
@@ -28,12 +37,19 @@
       </g>
     </fade-in-transition>
 
+    <path
+      class="ep-half-circle--progress__fill"
+      :d="fillPath"
+      :fill="computedColorFill"
+      :style="{ transition: styles.transition }"
+    >
+    </path>
     <path
       :stroke-width="thickness"
       class="ep-half-circle--progress ep-circle--progress"
       :class="animationClass"
       :d="path"
-      :fill="computedColorFill"
+      fill="transparent"
       :stroke="computedColor"
       :stroke-dasharray="circumference"
       :stroke-linecap="options.line"
@@ -56,18 +72,24 @@ export default {
       return (this.radius * 2 * Math.PI) / 2;
     },
     path() {
-      return ` M ${this.position}, ${this.options.size / 2} a ${this.radius},${this.radius} 0 1,1 ${this.radius * 2},0`;
+      return this.getPath(this.radius);
+    },
+    fillPath() {
+      return this.getPath(this.fillRadius);
     },
     emptyPath() {
-      return ` M ${this.emptyPosition}, ${this.options.size / 2} a ${this.emptyRadius},${this.emptyRadius} 0 1,1 ${
-        this.emptyRadius * 2
-      },0`;
+      return this.getPath(this.emptyRadius);
+    },
+    emptyFillPath() {
+      return this.getPath(this.emptyFillRadius);
     },
-    position() {
-      return this.options.size / 2 - this.radius;
+  },
+  methods: {
+    getPosition(radius) {
+      return this.options.size / 2 - radius;
     },
-    emptyPosition() {
-      return this.options.size / 2 - this.emptyRadius;
+    getPath(radius) {
+      return ` M ${this.getPosition(radius)}, ${this.options.size / 2} a ${radius},${radius} 0 1,1 ${radius * 2},0`;
     },
   },
 };

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));
@@ -32,9 +32,15 @@ export default {
     radius() {
       return radius(this.options);
     },
+    fillRadius() {
+      return fillRadius(this.options.linePosition, this.thickness, this.radius);
+    },
     emptyRadius() {
       return emptyRadius(this.options);
     },
+    emptyFillRadius() {
+      return fillRadius(this.options.emptyLinePosition, this.emptyThickness, this.emptyRadius);
+    },
 
     dataIsAvailable() {
       return isValidNumber(this.computedProgress) && !this.options.noData;

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;
+};

src/components/interface.js

@@ -14,7 +14,18 @@ const colorConfig = (defaultColor = "transparent") => ({
 });
 
 const validateLoaderProps = (loaderOptions) =>
-  Object.keys(loaderOptions).every((p) => options[p].validator(loaderOptions[p]));
+  Object.keys(loaderOptions).every((option) => options[option].validator(loaderOptions[option]));
+
+const linePosition = {
+  type: String,
+  required: false,
+  default: "center",
+  validator: (value) => {
+    const [position, offset] = value.toString().split(" ");
+    const isValidOffset = offset ? !Number.isNaN(parseFloat(offset)) : true;
+    return ["center", "out", "in"].includes(position) && isValidOffset;
+  },
+};
 
 const options = {
   data: {
@@ -68,6 +79,8 @@ const options = {
       return isValidType && isValidOffset;
     },
   },
+  linePosition,
+  emptyLinePosition: linePosition,
   color: colorConfig("#3f79ff"),
   emptyColor: colorConfig("#e6e9f0"),
   colorFill: colorConfig(),

src/components/optionsParser.js

@@ -54,6 +54,14 @@ export const calcThickness = (thickness, size) => {
   return thickness.toString().includes("%") ? (value * size) / 100 : value;
 };
 
+const parseLinePosition = (linePosition) => {
+  const [position, offset] = linePosition.toString().split(" ");
+  return {
+    position,
+    offset: offset || 0,
+  };
+};
+
 export const parseOptions = (options) => {
   const dot = dotParser(options.dot);
   const globalDot = dotParser(options.globalDot);
@@ -66,6 +74,8 @@ export const parseOptions = (options) => {
     globalDot: { ...globalDot, size: calcThickness(globalDot.size, options.size) },
     dash: dashParser(options.dash),
     lineMode: lineModeParser(options),
+    linePosition: parseLinePosition(options.linePosition),
+    emptyLinePosition: parseLinePosition(options.emptyLinePosition),
     animation: animationParser(options.animation),
   };
 };

src/styles/animationsUsage.scss

@@ -35,7 +35,7 @@
   }
 }
 
-.ep-half-circle--empty, .ep-circle--empty {
+.ep-half-circle--empty, .ep-half-circle--empty__fill, .ep-circle--empty, .ep-circle--empty__fill {
   &.ep-circle--nodata {
     opacity: 0.5;
   }

vue.config.js

@@ -3,4 +3,15 @@ module.exports = {
     extract: false,
   },
   productionSourceMap: false,
+  // see issue https://github.com/vuejs/vue-loader/issues/1734
+  chainWebpack: (config) => {
+    config.module
+      .rule("vue")
+      .use("vue-loader")
+      .loader("vue-loader")
+      .tap((options) => {
+        options.isServerBuild = false;
+        return options;
+      });
+  },
 };