setaman/vue-ellipse-progress

NumberFormat

mjezegou opened this issue · 4 comments

mjezegou commented

How can we display digits separating thousands in legendValue like this :
new Intl.NumberFormat ('fr-FR'). format (Number)

100000 => display 1 00 000

setaman commented

Hey @mjezegou,
currently, no custom formatting is implemented for legendValue, except for , as delimiter. It must be a simple number, which is counted up and down. But you can use slot, where you can put anything you want:

<vue-ellipse-progress :legend="false">

    <p slot="legend-caption">{{ Intl.NumberFormat ('fr-FR').format(Number) }}</p>
  
</vue-ellipse-progress>

The only disadvantage is that the value in the slot is not animated.

I will keep custom formating for legendValue in mind and possibly implement it someday, that can be really useful.

Close the issue, if I could answer your question.

mjezegou commented

Thank you for your answer.
It's a shame, I would have really liked it to be animated in French format.
Notify me when it is available

setaman commented

OK, I leave this issue open as a reference and will see what I can do on it.

setaman commented

@mjezegou Hi, I just added the possibility to freely adjust the shown progress value. The changes will remain in beta at first, because I have not written any unit tests yet. But it would be nice if you could test the new version and give feedback.
In your case you can do now the following:

<vue-ellipse-progress 
   :legend-value="1000000" 
   :legend-formatter="({ currentValue }) => new Intl.NumberFormat('fr-FR').format(currentValue)">
</vue-ellipse-progress>

Alternatively you can use a scoped slot. Details are in the dev branch (legendFormatter, scoped slot). So feel free to run:

npm i vue-ellipse-progress@1.3.0-beta.1