delowardev / vue3-circle-progress

Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable
https://codesandbox.io/s/determined-dawn-3ybev?file=/src/App.vue
MIT License
36 stars 14 forks source link

Chart displays -1 when initialized with (and not changed) percentage of 0 #4

Closed af-lsh closed 2 years ago

af-lsh commented 2 years ago

You may like to check if the step is !== 0 in your animateValue function

For example:

function animateValue(to) {
      const step = to - currentPercent.value;
      if (step) {
        const delay = props.transition / Math.abs(step);
        const counter = setInterval(() => {
          if (step > 0) {
            currentPercent.value += 1;
            if (currentPercent.value >= to) {
              clearInterval(counter);
            }
          } else {
            currentPercent.value -= 1;
            if (currentPercent.value <= to) {
              clearInterval(counter);
            }
          }
        }, delay);
      }
    }
delowardev commented 2 years ago

@af-lsh thanks for bringing it up, I will update it soon. Also, you can make a pull request if you want to.

af-lsh commented 2 years ago

@delowardev Would you mind to create a new version of the module with this fix to publish it to the package managers?

delowardev commented 2 years ago

@delowardev Would you mind to create a new version of the module with this fix to publish it to the package managers?

Hi @af-lsh, I will push an update by tomorrow with the latest changes. Thanks.

af-lsh commented 2 years ago

Thank you very much 👍