How to show values with their default format?

[Guisard]

Hello,

I am developing a custom card, but I found that the numbers displayed on my card will omit the format of the original data, such as the percent sign and currency symbol, as shown in the picture below, the right side is my card, and the left side is my desired effect.

Since I want the data to be displayed in French format (in general, replace all periods with commas), I wrote the following code to convert the numbers:

        //Get the data for each value

        let valueData = dataView.categorical.values[0]?.values[0];

        let value2Data = dataView.categorical.values[1]?.values[0];

        // Convert string to number for measureData

        const measureDataNumber: number = Number(valueData);

        let formattedMeasureData: string = "";

        if (measureDataNumber >= 1000000) {

            formattedMeasureData = (measureDataNumber / 1000000).toFixed(2).replace(".", ",") + "M";

        } else if (measureDataNumber >= 1000) {

            formattedMeasureData = (measureDataNumber / 1000).toFixed(2).replace(".", ",") + "K";

        } else if (measureDataNumber < 1) {

            formattedMeasureData = (measureDataNumber * 100).toFixed(2).replace(".", ",") + "%";

        } else {

            formattedMeasureData = measureDataNumber.toString();

        }

        // Convert string to number for value2Data

        const value2DataNumber: number = Number(value2Data);

        let formattedValue2Data: string = "";

        if (value2Data) { // Only display if value2Data exists

            if (value2DataNumber >= 1000000) {

                formattedValue2Data = (value2DataNumber / 1000000).toFixed(2).replace(".", ",") + "M";

            } else if (value2DataNumber >= 1000) {

                formattedValue2Data = (value2DataNumber / 1000).toFixed(2).replace(".", ",") + "K";

            } else if (value2DataNumber >= 1) {

                formattedValue2Data = value2DataNumber.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

            } else {

                formattedValue2Data = (value2DataNumber * 100).toFixed(2).replace(".", ",") + "%";

            }

        }

But I found that this method cannot handle special cases, such as percentages greater than 1 or less than negative 1, so I decided to read the format of the original data first and then modify it in French. And I'm stuck here, all I can find online is the method at 44 minutes in this video: https://www.youtube.com/watch?v=LQB-q9SVyY4&list=PLaTdKns4ZpMpDa6HORcolBKgzZL_FCph4&index=5&t=2666s. As shown below:

But when I try this method, the utils in "powerbi.extensibility.utils" always report an error:

I'm sure I've imported everything I need, has there been a change in the method of reading the metadata format? After all, this video tutorial is three years ago. Is there any way to read the format of the metadata with the latest version of api?

[dm-p · Accepted solution]

Hi @Guisard,

The metadata hasn't changed, but the powerbi-visuals-utils-formattingutils would have gone through a big change around the time this video was made (as they got moved to ES modules, which changes how they are imported).

The docs have an updated set of examples that you should be able to use in order to get the syntax you need to import and call the valueFormatter.

In short, you will need to create a formatter using the measure or column metadata's format property, e.g.:

If there is no format property, it will treat the format string as empty and just format it as a plain number.

If you want to auto-scale, you pass in the value parameter with the value of the number you wish to format. You can see examples of this in the linked doc under the thousand, million, billion and trillion examples. Formatting utils will apply the unit based on your locale. You can make this work as 'auto' (like core charts do) by passing in your measure value instead of a fixed value.

For percentages, as long as  your format property contains a valid format string, this will work also. Alternatively, you can construct a format string manually in your code and pass this to the valueFormatter.

Regards,

Daniel

[Guisard]

Thanks! It works with the IValueFormatter.

[smpa01]

@Guisard play around with this  if it works.

const locale = navigator.language;
const money = 100000;
new Intl.NumberFormat(locale,
  { style: 'currency', currency: 'USD', maximumFractionDigits: 0,notation: "compact" , compactDisplay: "short" } 
).format(money);

MDN