Vue Embedded AnalyticsLocalisation

The displayed text in Studio can be customised for localisation. You can achieve this by providing locale information in the required language. Use the localeText property to apply one of the provided locales, create a custom locale, or use the getLocaleText callback to integrate Studio with your application's localisation system.

Provided Locales Copy Link

The default language of Studio is American English, however, we provide a number of translations that can be used as a starting point for commonly requested languages:

Using a Provided Locale Module Copy Link

All of the provided locales listed above are available in the ag-studio-locale package. To use any of the provided locales in your application, follow these steps:

First, import the desired locale module from the ag-studio-locale package. For example, to use the German locale, import AG_STUDIO_LOCALE_DE:

import { AG_STUDIO_LOCALE_DE } from 'ag-studio-locale';

Next, assign the imported locale object to the localeText property in your Studio properties:

<ag-studio
    :localeText="localeText"
    /* other studio properties ... */>
</ag-studio>

this.localeText = AG_STUDIO_LOCALE_DE;

Finally, ensure the ag-studio-locale module is listed as a dependency in your application's package configuration:

"dependencies": {
    "ag-studio-locale": "1.0.1",
    ...
}

The following example demonstrates applying the AG_STUDIO_LOCALE_DE locale to Studio:

Customising a Provided Locale Copy Link

If you want to customise a provided locale, you can do so by creating a new object and merging the provided locale with your customisations.

import { AG_STUDIO_LOCALE_DE } from 'ag-studio-locale';

const customGermanLocale = {
    ...AG_STUDIO_LOCALE_DE,
    // customise the locale here
};

const studioProperties = {
    localeText: customGermanLocale,
};

The example below shows this in action by adding a "zzz" prefix to each Locale key to create a new zzzLocale object, and then applying this customised locale to Studio:

Changing Locale Copy Link

Studio uses the locale as it is needed. It does not refresh as the locale changes. If your application allows changing the locale for the application, you must destroy and recreate Studio for it to use the new locale.

Creating a Locale Copy Link

By default, Studio does not require a locale. If no locale is provided, Studio will default to English. If a locale is provided but is missing values, the default English will be used for the missing values.

To create a new locale, translate based off of one of the provided locales in ag-studio-locale (it is recommended to use AG_STUDIO_LOCALE_EN).

Locale Callback Copy Link

Providing a locale for Studio may not fit in with localisation libraries or localisation for a broader application. If you want Studio to take from an application-wide locale, then implement the getLocaleText callback to act as a bridge between Studio and the application's localisation.

The example below shows providing a callback for localisation. The example for simplicity just returns the default value in upper case. In a real world application, the callback would use the application's localisation.

In a real world application, the callback would look something like this:

const getLocaleText = (params) => {
    // to avoid key clash with external keys, we add 'studio' to the start of each key.
    const studioKey = 'studio.' + params.key;

    // look the value up using an application wide service
    return applicationLocaleService(studioKey);
}

RTL Text Direction (Right to Left) Copy Link

For languages that are displayed right to left, e.g. Hebrew and Arabic, the enableRtl property can be set to display in RTL format.