Translate

The plugin components support multilingual translations using the language and translationDictionary props. This allows you to render metric titles, descriptions, and labels in the end user

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

translation-dictionaryFormat

The translation-dictionary is a simple object where:

• Each key matches the exact text you want to translate (e.g., metric title, subtitle, label).

• Each value is an object with translations in various language codes (en, fr, es, etc.).

• Longer and more descriptive keys should be placed first to ensure they're matched before shorter or nested ones.

✅ Example:

const translationDictionary = {
  "Total Sales and Total Profit by Category": {
    en: "Total Sales and Total Profit by Category",
    fr: "Ventes totales et bénéfices totaux par catégorie",
    de: "Gesamtumsatz und Gesamtgewinn nach Kategorie",
    // ...
  },
  "This metric provides a breakdown of financial outcomes across different groupings...": {
    en: "This metric provides a breakdown of financial outcomes across different groupings...",
    fr: "Cette mesure fournit une répartition des résultats financiers...",
    // ...
  },
  "Note: Values represent aggregated figures...": {
    en: "Note: Values represent aggregated figures...",
    fr: "Remarque : Les valeurs représentent des chiffres agrégés...",
    // ...
  },
  "Total Sales": {
    en: "Total Sales",
    fr: "Ventes Totales",
    // ...
  },
  "Sum of Profit": {
    en: "Sum of Profit",
    fr: "Somme du bénéfice",
    // ...
  },
  "Category": {
    en: "Category",
    fr: "Catégorie",
    // ...
  },
  "Sales": {
    en: "Sales",
    fr: "Ventes",
    // ...
  },
  "Product": {
    en: "Product",
    fr: "Produit",
    // ...
  }
};

⚠️ Important Guidelines

• 🔑 Keys must match exactly: The keys in translation-dictionarymust exactly match the text in your dashboard configuration (e.g., metric titles, chart subtitles, dynamic labels).

• 🧠 Prefer longer keys first: If multiple keys are substrings of each other, always define and check the longer, more descriptive one first.

• 🌐 Add all relevant labels: Include all chart titles, subtitle blocks, footnotes, and section labels that might appear in a rendered dashboard.

🧪 Fallback Behavior

If a translation is missing for a given key/language:

• The system will fall back to the original key.

Metric in app

Metric Translated with fr language in embed system