Override Language

The @databrainhq/plugin package allows you to customize the language of your embedded components by passing a translation dictionary and specifying the desired language.

Overview

Parameters:

• translation-dictionary: A JSON object that maps keys (e.g., metric names, description, table columns, chart legends & label...etc) to their translations in multiple languages.

• language: A string representing the language code (e.g., "en", "fr", "es") you want to use for the component's content.

When both parameters are used, the component will display the content in the specified language, falling back to the key if a translation for the selected language is unavailable.

Usage Example

<dbn-metric
  token={guest-token}
  metric-id={metricId}
  translation-dictionary={JSON.stringify({
    'total sales': {
      en: 'total sales',
      fr: 'ventes totales',
      es: 'ventas totales',
      de: 'Gesamtumsatz',
      it: 'vendite totali',
      pt: 'vendas totais',
      zh: '总销售额',
      ja: '総売上',
      ko: '총 매출',
      hi: 'कुल बिक्री',
      ar: 'إجمالي المبيعات',
      ru: 'общие продажи',
    },
  })}
  language="fr"
/>

<dbn-dashboard
  token="guest-token"
  dashboard-id="dashboardId"
  translation-dictionary={JSON.stringify({
    'total sales': {
      en: 'total sales',
      fr: 'ventes totales',
      es: 'ventas totales',
      de: 'Gesamtumsatz',
      it: 'vendite totali',
      pt: 'vendas totais',
      zh: '总销售额',
      ja: '総売上',
      ko: '총 매출',
      hi: 'कुल बिक्री',
      ar: 'إجمالي المبيعات',
      ru: 'общие продажи',
    },
  })}
  language="fr"
/>

In this example, the label "total sales" will be displayed in French as "ventes totales."

Fallback Mechanism

• If the language prop is set to a language code not available in the dictionary, the component will display the default key value (e.g., "total sales").

• Ensure all required keys and translations are included in your dictionary to provide a seamless user experience.