How to format percent number with three significant digits?

[rabestro]

I have a value from 0 to 1. I would like to format it with three significant digits as a percent. So for value = 1 it will be 100%, for 0.9563 it will be 95.6% and for 0.02641 it will be 2.64%.

I found that in JavaScript this works fine:

new Intl.NumberFormat('en-us', {
  style: 'percent', 
  minimumSignificantDigits: 3 
}).format(value);

For NativeScript I realize that this object is not supported directly but I have to install the plug-in.

So, I did it by the command: tns plugin add nativescript-intl.

After I added the code to view-model file:

const intl = require("nativescript-intl");

const percentConverter = {
    toView(value) {
        return new intl.NumberFormat('en-IN',{ 
            style: 'percent', 
            maximumSignificantDigits: 3
        }).format(value);
    },
}

...
    const viewModel = observableModule.fromObject({
        /* Add your view model properties here */
        percentConverter: percentConverter,
...

Also, I changed the XML file:

<Label text="{{ value, value | percentConverter() }}"/>

Now the value displayed as percent but absolutely without fraction digits. So for value = 0.9643 it shows 96%, for value = 0.0025 it shows 0%.

How to do to shows three significant digits?

[jasonturner26]

@rabestro Not sure if you figured it out but if you add the option minimumFractionDigits: 3 you'll see 96.430% and 0.250%.

[rabestro]

@rabestro Not sure if you figured it out but if you add the option minimumFractionDigits: 3 you'll see 96.430% and 0.250%.

It’s not the same as minimumSignificantDigits. The minimumSignificantDigits=3 produce 96.4% and the value fit in the field. But the minimumFractionDigits produce 96.430% and it is too long for the small field and will be cut off. On the other side if I specify minimumFractionDigits=1 it shows 0.0% instead of desired 0.09% that is shows with minimumSignificantDigits=3.