search

ashish-chopra / angular-gauge

A reusable gauge directive for Angular 1.x apps and dashboards
https://ashish-chopra.github.io/angular-gauge/
MIT License
95 stars 36 forks source link

Can't be use with angular-i18n #24

Closed TakeshiDaveau closed 7 years ago

TakeshiDaveau commented 7 years ago

When I try to use the angular-gauge directive 

<ng-gauge size="150" type="arch" thick="10" value="(60 | number:2)" cap="round" foreground-color="#e85656" background-color="#f5f5f5" append="%"></ng-gauge>

If I add angular-i18n in my index.html : 

<!-- I18N -->
<script src="vendor/angular-i18n/angular-locale_fr.js"></script>

The gauge is empty. It renders everything but the foreground color.

ashish-chopra commented 7 years ago

@TakeshiDaveau Thanks for pointing this out. While writing this library, i did not even thought of this. And, it is good to see that such extensions are coming through people who are trying to use it.

Well there are two things:

  1. value attribute of the ng-gauge directive expects a variable or a value which has to be numeric (without doubt). But, when we apply number filter on any number before passing it into value attribute, it converts it into a string. Although string representation of a number is also a number so this would work even but since in French locale, decimal is represented with , like 60,22 so this value when goes inside the gauge, it is considered as NaN. That is why gauge is not showing anything, simply it breaks. So always provide raw numeric input to value attribute.

  2. Now when it comes to supporting the display of this value (either by number filter or internationalization); ethically it should be handled from gauge's code. The user should not modify the value and then send it inside gauge. So here is a quick fix for your problem: there is a template variable tpl that displays the value, so add your number filter with precision 2 there, atleast for your solution, as shown below.

capture

I will later on expose an attribute on directive to set the precision of displayed value, default being zero.

like: 

 <ng-gauge value="89.3465" precision="2" ></ng-gauge>   <!-- just a thought -->

let me know how does it sound? And, are you okay with a quick fix?

TakeshiDaveau commented 7 years ago

@ashish-chopra Thx for the quick answer, and you did a good analysis of the problem.

I tried to understand what's wrong when adding french local before creating my issue here, but I didn't spotted the problem.

And yes this quick fix is alright for me.

ashish-chopra commented 7 years ago

@TakeshiDaveau i have added the fix in the latest major release 2.0. Take an update and enjoy more stable, better performing and more configurable version of angular-gauge with i18n support. Thanks for this issue, btw.