Custom Visual - Display Units - Auto not working

[AdamWhittaker]

Hello,

I installed the formatting utils from here:

https://github.com/microsoft/powerbi-visuals-utils-formattingutils

I added `

(to the capabilities.json)

"displayUnit": {
					"displayName": "Display Units",
					"description": "Specify display unit.",
					"type": {
						"formatting": {
							"labelDisplayUnits": true
						}
					}
				},

In the visual i added:

const formatter: IValueFormatter = valueFormatter.create({
                value: this.visualSettings.value.displayUnit,
                precision: this.visualSettings.value.measurePrecision,
                cultureSelector: "en-US"
            });

formatter.format(value);

This seems to work perfectly if i change the drop down to Thousands, Millions etc. but doesnt seem to do anything if i set it to auto.

I tried the same setting on the default MS Card and with auto set and the value changes to 119.42K but in my custom card it stays at 119416. If i set the dropdown to thousands in my custom card  it shows at 119.42k (like auto on the official card).

Is there something special I have to do in my code for the auto to work?
I believe auto sends back a value of 0 for this.visualSettings.value.displayUnit which doesnt seem to do anything and 1000 for thousands which works, the MS doc site for this also doesnt mention auto:

https://learn.microsoft.com/en-us/power-bi/developer/visuals/utils-formatting

Thanks,

Adam

[dm-p · Accepted solution]

Hi @AdamWhittaker,

It's been a while since I've looked into this (I've been looking for some code where I've resolved it that I could copy/paste in here but don't have anything to hand), so I'm working from memory (and hopefully it might be close to correct).

If you want auto formatting to work, I believe you'll need to substitute the measure value into the value property when displayUnit is 0, as this property represents the scale that Power BI needs to consider when formatting.

Based on your example, something like the following should work:

const formatter: IValueFormatter = valueFormatter.create({
    value: this.visualSettings.value.displayUnit || value,
    precision: this.visualSettings.value.measurePrecision,
    cultureSelector: "en-US"
});

formatter.format(value);

This change (on line 2) will coalesce the displayUnit (which would be 0 if auto) to the measure value, which would then be used to derive whether the value should be formatted as none, thousands, millions etc.

This would be equaivalent to:

const formatter: IValueFormatter = valueFormatter.create({
    value: this.visualSettings.value.displayUnit !== 0 ? this.visualSettings.value.displayUnit : value,
    precision: this.visualSettings.value.measurePrecision,
    cultureSelector: "en-US"
});

formatter.format(value);

Regards,

Daniel

[AdamWhittaker]

Thank you very much for the info, that worked great. Now i understand what the documentation was trying to communicate; their docs mention to pass 1001 for K and i just assumed it was a typo and they meant 1000 (which is mentioned lower down).. but they were just demonstrating that 1001 would automatically be converted for you (i think they should explain that)

Thanks again.