Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
3 years ago
Solved

How to show values with their default format?

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's avatar
    dm-p
    3 years ago

    Hi Anonymous,

    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

3 Replies

  • smpa01's avatar
    smpa01
    Community Champion
    3 years ago

    Anonymous 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 

     

  • dm-p's avatar
    dm-p
    Super User
    3 years ago

    Hi Anonymous,

    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

    • Anonymous's avatar
      Anonymous
      Not applicable
      3 years ago

      Thanks! It works with the IValueFormatter.