Translations

The dashboard can be translated into any left-to-right languages or to suit your customer audience. We allow you to do this by setting these overrides in a textOverrides object.

Overview

The Vizzly.Dashboard component offers comprehensive support for translations, ensuring that your dashboard can be adapted to various languages and linguistic nuances. Our translation feature is designed to handle simple string replacements, variables, singular/plural contexts, and limited HTML formatting. The process involves specifying text overrides in a textOverrides object. This guide details how to effectively use this feature.

Usage

Simple String Interpolation

Easily replace default text with your desired translations using key-value pairs.

<Vizzly.Dashboard
  textOverrides={{
    dashboard_filters: 'Filtres du tableau de bord',
  }}
  // more dashboard props
/>

In this example, the text for dashboard_filters is overridden with a French translation.

Variables in a string Interpolation

Incorporate dynamic content within your translations using double-bracket syntax [[..]].

<Vizzly.Dashboard
  textOverrides={{
    custom_metric_modal_title: '[[custom_metric_title]] Custom Metric',
  }}
  // more dashboard props
/>

Variables, such as [[custom_metric_title]], can reference either user-defined terms from the Semantic Layer or your data, or other translated strings.

Singular and Plural Interpolation

Manage singular and plural forms in translations with {{...}} placeholders.

<Vizzly.Dashboard
  textOverrides={{
    'additional_filters.filter_type_subtext': {
      sentence: '[[filterType]] for [[numberOfFields]] {{field}} [[listOfFields]]',
      field_singular: 'field',
      field_plural: 'fields',
    },
  }}
  // more dashboard props
/>

This structure allows for nuanced translations that adapt to the quantity of items, ensuring grammatical accuracy.

HTML Elements

Enhance translations with basic HTML formatting. Supported tags include <strong>, <b>, <i>, and <em>.

<Vizzly.Dashboard
  textOverrides={{
    goal_line_configuration: 'Set to <strong>[[ruleValue]]</strong>',
  }}
  // more dashboard props
/>

Note that only the specified HTML tags are allowed. Using unsupported tags will result in an error.

Debugging Translations

Enhance your debugging experience with our translation key visualization feature. By enabling developerTools={{ translationKeys: true }}, the dashboard will visually highlight each text component, directly associating it with its respective translation key. This functionality simplifies the process of identifying and correlating text elements with their corresponding keys in your translation file.

Enabling Translation Key Visualization To activate this feature, set the developerTools prop as shown below:

<Vizzly.Dashboard
  developerTools={{ translationKeys: true }}
  // other dashboard props
/>

Upon activation, each text element on the dashboard will display its translation key as an overlay. This overlay helps developers quickly locate and reference the specific keys used for translation, streamlining the process of debugging and updating text content.

JSON Configuration File

Enhance your setup process with our ready-to-use JSON configuration file. It's pre-filled with essential settings to help you get started quickly.

Click the link below to download the JSON file. Customize it as needed to fit your specific configuration requirements.

Download JSON File

Example Overrides

view.data-set-changed

Change the text displayed when a data set has been modified, and can no-longer support the view the user has configured.

dashboard-filters.call-to-action

Change the call to action text to configure the dashboard level filters.

editor.tab.heading.data

Change the text of the 'data' panel toggle button.

editor.tab.heading.format

Change the text of the 'format' panel toggle button.

editor.tab.heading.controls

Change the text of the 'controls' panel toggle button.

view.resizing

Change the text displayed when the width of cells are adjusted, or the height of a row is adjusted.

view.failed-to-fetch-results

Change the text when an error has occured, and the view has failed to fetch the data it needs.

view.empty-results

Change the text when a view has received an empty set of results.