Locale.md

Localizing your Custom Visuals

Visuals can now know PowerBI's locale, so they can display localized information (read more about Supported languages and countries/regions for Power BI).
The locale string is passed on IVisualHost.

See commit for what was added at this step.

Localizing the tooltips

In the sample we display the current locale in the tooltip.

Each of these bar charts was created under different locale (English, Basque and Hindi).

The BarChart constructor now has a locale member which is instantiated in the constructor with the host locale instance.

    private locale: string;
    ...
    this.locale = options.host.locale;

A LocalizationResources interface was added, which helps in localizing strings. It defines the required string for each locale, and also the 'defaultValue', which will be displayed if the visual wasn't adapted to this locale.
myResources is an instance of this interface, which holds the localized strings:

module powerbi.extensibility.visual {

    export var myResources: Resources = {};
    myResources["LanguageKey"] = {
        defaultValue: "English(English)",
        localization: {
            "ar-SA": "العربية (Arabic)",
            "bg-BG": "български (Bulgarian)",
            ...,
            "zh-CN": "中国 (Chinese-Simplified)",
            "zh-TW": "中國 (Chinese-Tranditional)"
        }
    };

}

Getting a localized string is easy using getLocalizedString.

    /**
     * Returns the localized string in the locale transferred using the key that was given to search the resources
     * 
     * @param {string} locale - the locale in which PowerBI is currently running
     * @param {object} key - specify a key for the string you want localized in your visual
     */   
    export function getLocalizedString(locale: string, key: string): string {
        return myResources && key && myResources[key] && (((myResources[key]).localization[locale])|| (myResources[key]).defaultValue);
   }

The data for the tooltip is than derived from the current locale:

private getTooltipData(value: any): VisualTooltipDataItem[] {
    let language = getLocalizedString(this.locale,"LanguageKey");
    return [{
        displayName: value.category,
        value: value.value.toString(),
        color: value.color,
        header: language && "displayed language " + language
    }];
}

Format Pane Localization

For more info on localization here