feat: add simple legend formatting

Author: setaman

src/App.vue

@@ -38,7 +38,9 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress :progress="progress" animation="rs 2000 2000" :legend-formatter="customFormatter"> </ve-progress>
+        <!--        <ve-progress :progress="progress" animation="rs 2000 2000" :legend-formatter="customFormatter">
+        </ve-progress>-->
+        <ve-progress :progress="progress" animation="default 2500 1000" legend="0001239,5465"></ve-progress>
       </div>
     </div>
   </div>
@@ -142,7 +144,7 @@ export default {
       return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(value);
     },
     customFormatter(c) {
-      console.log(c);
+      // console.log(c);
       const f = "0000";
       const f2 = "00";
       const cv = (c.currentRawValue || 0.0).toFixed(2).toString().split(".");

src/components/Counter.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { isString } from "../utils";
+
 export default {
   name: "Counter",
   props: {
@@ -50,9 +52,18 @@ export default {
       return this.duration === 0 ? this.difference : this.difference / this.duration;
     },
     delimiter() {
-      return this.value.toString().search(",") >= 0 ? "," : ".";
+      return this.value.toString().includes(",") ? "," : ".";
     },
     formattedValue() {
+      if (isString(this.value)) {
+        let [preFormat] = this.value.toString().replace(/\s/g, "").split(this.delimiter);
+        preFormat = [...preFormat].fill("0").join("");
+        const [pre, post] = this.currentValue
+          .toFixed(this.decimalsCount)
+          .replace(".", this.delimiter)
+          .split(this.delimiter);
+        return `${preFormat.slice(pre.length)}${pre}${post ? this.delimiter + post : ""}`;
+      }
       return this.currentValue.toFixed(this.countDecimals()).replace(".", this.delimiter);
     },
     delay() {
@@ -64,6 +75,10 @@ export default {
     countProgress() {
       return (Math.abs(this.currentDifference - this.difference) * 100) / (this.difference || 1);
     },
+    decimalsCount() {
+      if (!isString(this.value) && this.value % 1 === 0) return 0;
+      return this.value.toString().replace(/\s/g, "").split(this.delimiter)[1].length;
+    },
     counterProps() {
       return {
         currentValue: parseFloat(this.formattedValue),
@@ -85,7 +100,7 @@ export default {
   methods: {
     countDecimals() {
       if (this.value % 1 === 0) return 0;
-      return this.value.toString().split(this.delimiter)[1].length;
+      return this.value.toString().replace(/\s/g, "").split(this.delimiter)[1].length;
     },
     count(timeStamp) {
       if (!this.startTime) {

src/utils.js

@@ -1,4 +1,5 @@
 const isValidNumber = (prop) => prop !== undefined && prop !== "" && prop !== null && !Number.isNaN(parseFloat(prop));
+export const isString = (prop) => typeof prop === "string" || prop instanceof String;
 
 const getNumberIfValid = (prop) => {
   if (isValidNumber(prop)) {