Skip to main content

​
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"
/>

```tsx
<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.
⌘I