@mwater/visualization 5.4.1 → 5.4.2

package/lib/autotranslate.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateStrings = translateStrings;
+exports.translateLocalizedStrings = translateLocalizedStrings;
+exports.canAutoTranslate = canAutoTranslate;
+/** Translates an array of strings from a source language to a target language using the mWater translation API.
+ * @param strings Array of strings to translate
+ * @param sourceLanguage Source language code (e.g. "en")
+ * @param targetLanguage Target language code to translate to
+ * @returns Promise that resolves to array of translated strings in same order as input
+ * @throws Error if translation fails
+ */
+async function translateStrings(strings, sourceLanguage, targetLanguage) {
+    // Call translation API
+    const response = await fetch(`https://api.mwater.co/v3/translate?source_language=${sourceLanguage}&target_language=${targetLanguage}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            phrases: strings
+        })
+    });
+    if (!response.ok) {
+        throw new Error("Translation failed");
+    }
+    const result = await response.json();
+    return result.phrases;
+}
+/** Ensures that all LocalizedString objects have translations for all specified locales.
+ * Only translates missing translations, preserving existing ones and base strings.
+ * Each string's _base property is used as the source language for translations.
+ * @param strings Array of LocalizedString objects to ensure are fully translated
+ * @param locales Array of language codes specifying which languages to ensure exist
+ * @param baseLanguage Language code of the _base strings (e.g. "en", "fr", etc)
+ * @returns Promise that resolves to array of fully translated LocalizedString objects
+ */
+async function translateLocalizedStrings(strings, locales, baseLanguage) {
+    // Create copy of strings to modify
+    const translatedStrings = strings.map(str => ({ ...str }));
+    // For each locale
+    for (const locale of locales) {
+        // Skip if it's the base language
+        if (locale === baseLanguage) {
+            continue;
+        }
+        // Group strings by their current source language
+        // Start with base language strings
+        const stringsBySourceLang = new Map();
+        translatedStrings.forEach((str, index) => {
+            // Skip if translation already exists
+            if (str[locale]) {
+                return;
+            }
+            // Add to list to translate from base language
+            if (!stringsBySourceLang.has(baseLanguage)) {
+                stringsBySourceLang.set(baseLanguage, []);
+            }
+            stringsBySourceLang.get(baseLanguage).push({ str, index });
+        });
+        // Translate each group
+        for (const [sourceLang, stringsToTranslate] of stringsBySourceLang.entries()) {
+            try {
+                // Get source strings
+                const sourceStrings = stringsToTranslate.map(item => item.str[item.str._base]);
+                // Translate all strings at once
+                const translations = await translateStrings(sourceStrings, sourceLang, locale);
+                // Add translations back to strings
+                translations.forEach((translation, i) => {
+                    translatedStrings[stringsToTranslate[i].index][locale] = translation;
+                });
+            }
+            catch (error) {
+                console.error(`Failed to translate from ${sourceLang} to ${locale}:`, error);
+                throw error;
+            }
+        }
+    }
+    return translatedStrings;
+}
+/** Returns true if the given language code can be automatically translated. */
+function canAutoTranslate(languageCode) {
+    const languageCodes = [
+        "en", // English
+        "fr", // French
+        "es", // Spanish
+        "pt", // Portuguese
+        "sw", // Swahili
+        "id", // Indonesian
+        "hi", // Hindi
+        "ne", // Nepali
+        "rw", // Kinyarwanda
+        "sd", // Sindhi
+        "tet", // Tetum
+        "ur", // Urdu
+        "ja", // Japanese
+        "de", // German
+        "it", // Italian
+        "su", // Sundanese
+        "ar", // Arabic
+        "vi", // Vietnamese
+        "mg", // Malagasy
+        "tl", // Tagalog/Filipino
+        "ht", // Haitian Creole
+        "fi", // Finnish
+        "bn", // Bangla
+        "my", // Burmese
+        "km", // Khmer
+        "so", // Somali
+        "jv", // Javanese
+        "ko", // Korean
+        "zh", // Chinese
+        "ru", // Russian
+        "tr", // Turkish
+        "nl", // Dutch
+        "pl", // Polish
+        "hu", // Hungarian
+        "cs", // Czech
+        "sk" // Slovak
+    ];
+    return languageCodes.includes(languageCode);
+}

package/lib/axes/AxisBuilder.js

@@ -495,7 +495,7 @@ class AxisBuilder {
                     }
                     if (range.maxValue != null) {
                         if (label) {
-                            label += T ` and `;
+                            label += ` ${T `and`} `;
                         }
                         if (range.maxOpen) {
                             label += `< ${range.maxValue}`;
@@ -920,7 +920,7 @@ class AxisBuilder {
                         return this.formatCategory(axis, category);
                     }
                     else {
-                        return T `???`;
+                        return `???`;
                     }
                 }).join(", ");
             }
@@ -930,7 +930,7 @@ class AxisBuilder {
                     return this.formatCategory(axis, category);
                 }
                 else {
-                    return T `???`;
+                    return `???`;
                 }
             }
         }

package/lib/axes/AxisColorEditorComponent.js

@@ -48,6 +48,10 @@ class AxisColorEditorComponent extends react_1.default.Component {
                 }
                 const missingColorMap = ColorSchemeFactory_1.default.createColorMapForCategories(missingCategories, axisBuilder.isCategorical(this.props.axis));
                 colorMap = (this.props.axis.colorMap || []).concat(missingColorMap);
+                // If there are categories present, remove any color map values that are not in the categories
+                if (this.props.categories.length > 0) {
+                    colorMap = lodash_1.default.filter(colorMap, (cm) => this.props.categories.find((c) => c.value === cm.value));
+                }
             }
             else {
                 // Keep existing

package/lib/axes/AxisComponent.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
 import { DataSource, LiteralType, Schema } from "@mwater/expressions";
-import * as ui from "../UIComponents";
-import CategoryMapComponent from "./CategoryMapComponent";
 import { JsonQLFilter } from "../JsonQLFilter";
-import { Axis } from "./Axis";
+import { Axis, AxisCategory } from "./Axis";
 export interface AxisComponentProps {
     schema: Schema;
     dataSource: DataSource;
@@ -34,7 +32,7 @@ export interface AxisComponentProps {
     collapseCategories?: boolean;
 }
 export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps, {
-    categories: any;
+    categories: AxisCategory[] | null;
     loading: boolean;
 }> {
     static defaultProps: {
@@ -45,17 +43,15 @@ export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps
     static contextType: React.Context<string>;
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
-    load(props: any, prevProps: any, callback: any): any;
+    load(props: any, prevProps: any, callback: any): void;
     handleExprChange: (expr: any) => void;
     handleFormatChange: (ev: any) => void;
     handleXformTypeChange: (type: any) => void;
     handleXformChange: (xform: any) => void;
     cleanAxis(axis: any): Axis | null;
-    renderXform(axis: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<ui.RadioToggleComponentProps, ui.RadioToggleComponent> | null;
-    renderColorMap(axis: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>[] | null;
-    renderExcludedValues(axis: any): (React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<import("./CategoryMapComponent").CategoryMapComponentProps, CategoryMapComponent>)[] | null;
-    renderFormat(axis: any): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderXform(axis: any): React.JSX.Element | null;
+    renderColorMap(axis: any): React.JSX.Element | null;
+    renderExcludedValues(axis: any): React.JSX.Element | null;
+    renderFormat(axis: any): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }

package/lib/axes/AxisComponent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
@@ -118,13 +117,13 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         else {
             valuesQuery.where = whereClauses[0];
         }
-        return props.dataSource.performQuery(valuesQuery, (error, rows) => {
+        props.dataSource.performQuery(valuesQuery, (error, rows) => {
             if (error) {
                 return; // Ignore errors
             }
             // Get categories (value + label)
             categories = axisBuilder.getCategories(axis, lodash_1.default.pluck(rows, "val"));
-            return callback({ categories });
+            callback({ categories });
         });
     }
     handleExprChange = (expr) => {
@@ -204,42 +203,27 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         if (axis.xform && ["bin", "ranges", "floor"].includes(axis.xform.type)) {
             let comp;
             if (axis.xform.type === "ranges") {
-                comp = R(RangesComponent_1.default, {
-                    schema: this.props.schema,
-                    expr: axis.expr,
-                    xform: axis.xform,
-                    onChange: this.handleXformChange
-                });
+                comp = react_1.default.createElement(RangesComponent_1.default, { schema: this.props.schema, expr: axis.expr, xform: axis.xform, onChange: this.handleXformChange });
             }
             else if (axis.xform.type === "bin") {
-                comp = R(BinsComponent_1.default, {
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    expr: axis.expr,
-                    xform: axis.xform,
-                    onChange: this.handleXformChange
-                });
+                comp = react_1.default.createElement(BinsComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, expr: axis.expr, xform: axis.xform, onChange: this.handleXformChange });
             }
             else {
                 comp = null;
             }
-            return R("div", null, R(ui.RadioToggleComponent, {
-                value: axis.xform ? axis.xform.type : null,
-                options: [
-                    { value: "bin", label: T `Equal Bins` },
-                    { value: "ranges", label: T `Custom Ranges` },
-                    { value: "floor", label: T `Whole Numbers` }
-                ],
-                onChange: this.handleXformTypeChange
-            }), comp);
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement(ui.RadioToggleComponent, { value: axis.xform ? axis.xform.type : null, options: [
+                        { value: "bin", label: T `Equal Bins` },
+                        { value: "ranges", label: T `Custom Ranges` },
+                        { value: "floor", label: T `Whole Numbers` }
+                    ], onChange: this.handleXformTypeChange }),
+                comp));
         }
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
         const exprType = exprUtils.getExprType(axis.expr);
         switch (exprType) {
             case "date":
-                return R(ui.RadioToggleComponent, {
-                    value: axis.xform ? axis.xform.type : null,
-                    options: [
+                return react_1.default.createElement(ui.RadioToggleComponent, { value: axis.xform ? axis.xform.type : null, options: [
                         { value: null, label: T `Exact Date` },
                         { value: "year", label: T `Year` },
                         { value: "yearmonth", label: T `Year/Month` },
@@ -247,13 +231,9 @@ class AxisComponent extends AsyncLoadComponent_1.default {
                         { value: "week", label: T `Week` },
                         { value: "yearweek", label: T `Year/Week` },
                         { value: "yearquarter", label: T `Year/Quarter` }
-                    ],
-                    onChange: this.handleXformTypeChange
-                });
+                    ], onChange: this.handleXformTypeChange });
             case "datetime":
-                return R(ui.RadioToggleComponent, {
-                    value: axis.xform ? axis.xform.type : null,
-                    options: [
+                return react_1.default.createElement(ui.RadioToggleComponent, { value: axis.xform ? axis.xform.type : null, options: [
                         { value: "date", label: T `Date` },
                         { value: "year", label: T `Year` },
                         { value: "yearmonth", label: T `Year/Month` },
@@ -261,9 +241,7 @@ class AxisComponent extends AsyncLoadComponent_1.default {
                         { value: "week", label: T `Week` },
                         { value: "yearweek", label: T `Year/Week` },
                         { value: "yearquarter", label: T `Year/Quarter` }
-                    ],
-                    onChange: this.handleXformTypeChange
-                });
+                    ], onChange: this.handleXformTypeChange });
         }
         return null;
     }
@@ -271,20 +249,9 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         if (!this.props.showColorMap || !axis || !axis.expr) {
             return null;
         }
-        return [
-            R("br"),
-            R(AxisColorEditorComponent_1.default, {
-                schema: this.props.schema,
-                axis,
-                categories: this.state.categories,
-                onChange: this.props.onChange,
-                reorderable: this.props.reorderable,
-                defaultColor: this.props.defaultColor,
-                allowExcludedValues: this.props.allowExcludedValues,
-                autosetColors: this.props.autosetColors,
-                initiallyExpanded: this.props.collapseCategories !== true
-            })
-        ];
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(AxisColorEditorComponent_1.default, { schema: this.props.schema, axis: axis, categories: this.state.categories ?? undefined, onChange: this.props.onChange, reorderable: this.props.reorderable, defaultColor: this.props.defaultColor ?? undefined, allowExcludedValues: this.props.allowExcludedValues, autosetColors: this.props.autosetColors, initiallyExpanded: this.props.collapseCategories !== true })));
     }
     renderExcludedValues(axis) {
         // Only if no color map and allows excluded values
@@ -295,19 +262,9 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         if (!this.state.categories || this.state.categories.length < 1) {
             return null;
         }
-        return [
-            R("br"),
-            R(CategoryMapComponent_1.default, {
-                schema: this.props.schema,
-                axis,
-                onChange: this.props.onChange,
-                categories: this.state.categories,
-                reorderable: false,
-                showColorMap: false,
-                allowExcludedValues: true,
-                initiallyExpanded: this.props.collapseCategories !== true
-            })
-        ];
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(CategoryMapComponent_1.default, { schema: this.props.schema, axis: axis, onChange: this.props.onChange, categories: this.state.categories, reorderable: false, showColorMap: false, allowExcludedValues: true, initiallyExpanded: this.props.collapseCategories !== true })));
     }
     renderFormat(axis) {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
@@ -319,12 +276,10 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         if (!formats) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Format`), ": ", R("select", {
-            value: axis.format != null ? axis.format : (0, valueFormatter_2.getDefaultFormat)(valueType),
-            className: "form-select",
-            style: { width: "auto", display: "inline-block" },
-            onChange: this.handleFormatChange
-        }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Format`),
+            ": ",
+            react_1.default.createElement("select", { value: axis.format != null ? axis.format : (0, valueFormatter_2.getDefaultFormat)(valueType), className: "form-select", style: { width: "auto", display: "inline-block" }, onChange: this.handleFormatChange }, lodash_1.default.map(formats, (format) => (react_1.default.createElement("option", { key: format.value, value: format.value }, format.label))))));
     }
     render() {
         let aggrStatuses;
@@ -343,16 +298,13 @@ class AxisComponent extends AsyncLoadComponent_1.default {
                 aggrStatuses = ["literal", "aggregate"];
                 break;
         }
-        return R("div", null, R("div", null, R(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            types: axisBuilder.getExprTypes(this.props.types),
-            // preventRemove: @props.required
-            onChange: this.handleExprChange,
-            value: this.props.value ? this.props.value.expr : null,
-            aggrStatuses
-        })), this.renderXform(axis), this.props.showFormat ? this.renderFormat(axis) : undefined, this.renderColorMap(axis), this.renderExcludedValues(axis));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.table, types: axisBuilder.getExprTypes(this.props.types), onChange: this.handleExprChange, value: this.props.value ? this.props.value.expr : null, aggrStatuses: aggrStatuses })),
+            this.renderXform(axis),
+            this.props.showFormat ? this.renderFormat(axis) : undefined,
+            this.renderColorMap(axis),
+            this.renderExcludedValues(axis)));
     }
 }
 exports.default = AxisComponent;

package/lib/axes/CategoryMapComponent.js

@@ -23,7 +23,7 @@ class CategoryMapComponent extends react_1.default.Component {
     }
     handleReorder = (map) => {
         const order = lodash_1.default.pluck(map, "value");
-        return this.props.onChange((0, update_object_1.default)(this.props.axis, { drawOrder: { $set: order } }));
+        this.props.onChange((0, update_object_1.default)(this.props.axis, { drawOrder: { $set: order } }));
     };
     handleColorChange = (value, color) => {
         // Delete if present for value
@@ -32,7 +32,7 @@ class CategoryMapComponent extends react_1.default.Component {
         if (color) {
             colorMap.push({ value, color });
         }
-        return this.props.onChange((0, update_object_1.default)(this.props.axis, { colorMap: { $set: colorMap } }));
+        this.props.onChange((0, update_object_1.default)(this.props.axis, { colorMap: { $set: colorMap } }));
     };
     handleExcludeChange = (value, ev) => {
         let excludedValues;
@@ -42,7 +42,7 @@ class CategoryMapComponent extends react_1.default.Component {
         else {
             excludedValues = lodash_1.default.union(this.props.axis.excludedValues || [], [value]);
         }
-        return this.props.onChange((0, update_object_1.default)(this.props.axis, { excludedValues: { $set: excludedValues } }));
+        this.props.onChange((0, update_object_1.default)(this.props.axis, { excludedValues: { $set: excludedValues } }));
     };
     // Gets the current color value if known
     lookupColor(value) {
@@ -55,7 +55,7 @@ class CategoryMapComponent extends react_1.default.Component {
     handleNullLabelChange = (e) => {
         const name = prompt(T `Enter label for none value`, this.props.axis.nullLabel || T `None`);
         if (name) {
-            return this.props.onChange((0, update_object_1.default)(this.props.axis, { nullLabel: { $set: name } }));
+            this.props.onChange((0, update_object_1.default)(this.props.axis, { nullLabel: { $set: name } }));
         }
     };
     handleCategoryLabelChange = (category, e) => {

package/lib/axes/RangesComponent.js

@@ -54,7 +54,7 @@ class RangesComponent extends react_1.default.Component {
         })), 
         //          _.map @props.xform.ranges, (range, i) =>
         //            R RangeComponent, key: range.id, range: range, onChange: @handleRangeChange.bind(null, i), onRemove: @handleRemoveRange.bind(null, i)
-        R("button", { className: "btn btn-link btn-sm", type: "button", onClick: this.handleAddRange }, R("span", { className: "fas fa-plus" }), T ` Add Range`));
+        R("button", { className: "btn btn-link btn-sm", type: "button", onClick: this.handleAddRange }, R("span", { className: "fas fa-plus" }), " ", T `Add Range`));
     }
 }
 exports.default = RangesComponent;
@@ -88,7 +88,7 @@ class RangeComponent extends react_1.default.Component {
         }
         if (this.props.range.maxValue != null) {
             if (placeholder) {
-                placeholder += T ` and `;
+                placeholder += ` ${T `and`} `;
             }
             if (this.props.range.maxOpen) {
                 placeholder += `< ${this.props.range.maxValue}`;

package/lib/dashboards/DashboardComponent.d.ts

@@ -39,6 +39,8 @@ export interface DashboardComponentProps {
     hideTitleBar?: boolean;
     /** Called when the edit mode changes */
     onEditModeChange?: (editing: boolean) => void;
+    /** Locale to prefer if available */
+    preferredLocale?: string;
 }
 export interface DashboardComponentState {
     undoStack: UndoStack;
@@ -47,6 +49,8 @@ export interface DashboardComponentState {
     layoutOptionsOpen: boolean;
     hideQuickfilters: boolean;
     refreshKey: number;
+    /** Locale to use for display. Ignored if in edit mode */
+    locale: string;
 }
 /** Dashboard component that includes an action bar at the top
  * Manages undo stack and quickfilter value
@@ -72,6 +76,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     handleDesignChange: (design: any) => void;
     handleShowQuickfilters: () => void;
     getCompiledFilters(): JsonQLFilter[];
+    /** Translate function to use for display. Do not use when editing. */
+    translate: (input: string) => string;
     renderEditingSwitch(): React.DetailedReactHTMLElement<{
         key: string;
         className: string;

package/lib/dashboards/DashboardComponent.js

@@ -39,6 +39,7 @@ const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
 const LayoutOptionsComponent_1 = require("./LayoutOptionsComponent");
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
 const layoutOptions_1 = require("./layoutOptions");
+const __1 = require("..");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Dashboard component that includes an action bar at the top
  * Manages undo stack and quickfilter value
@@ -50,6 +51,15 @@ class DashboardComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         const layoutOptions = (0, layoutOptions_1.getLayoutOptions)(props.design);
+        // Prefer the T.en locale if available when loading the dashboard
+        let initialLocale = props.design.locale || "en";
+        const otherLocales = props.design.otherLocales || [];
+        if (props.preferredLocale && otherLocales.includes(props.preferredLocale)) {
+            initialLocale = props.preferredLocale;
+        }
+        else if (otherLocales.includes(T.locale)) {
+            initialLocale = T.locale;
+        }
         this.state = {
             undoStack: new UndoStack_1.default().push(props.design),
             quickfiltersValues: props.quickfiltersValues || null,
@@ -57,7 +67,8 @@ class DashboardComponent extends react_1.default.Component {
                 props.onDesignChange != null,
             layoutOptionsOpen: false,
             hideQuickfilters: layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
-            refreshKey: 1
+            refreshKey: 1,
+            locale: initialLocale
         };
         if (props.onEditModeChange) {
             props.onEditModeChange(this.state.editing);
@@ -141,15 +152,24 @@ class DashboardComponent extends react_1.default.Component {
         compiledFilters = compiledFilters.concat(this.props.filters || []);
         return compiledFilters;
     }
+    /** Translate function to use for display. Do not use when editing. */
+    translate = (input) => {
+        const designLocale = this.props.design.locale ?? "en";
+        const displayLocale = this.state.editing ? designLocale : (this.state.locale ?? designLocale ?? "en");
+        if (designLocale === displayLocale) {
+            return input;
+        }
+        return this.props.design.translations?.[displayLocale]?.[input] ?? input;
+    };
     renderEditingSwitch() {
         return R("a", {
             key: "edit",
             className: `btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`,
             onClick: this.handleToggleEditing
-        }, R("span", { className: "fas fa-pencil-alt" }), this.state.editing ? T ` Editing` : T ` Edit`);
+        }, R("span", { className: "fas fa-pencil-alt" }), " ", this.state.editing ? T `Editing` : T `Edit`);
     }
     renderStyle() {
-        return R("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, T ` Layout `));
+        return R("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, " ", T `Layout`));
     }
     renderActionLinks() {
         return R("div", null, this.state.editing
@@ -158,22 +178,30 @@ class DashboardComponent extends react_1.default.Component {
                     key: "undo",
                     className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
                     onClick: this.handleUndo
-                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, T ` Undo`)),
+                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, " ", T `Undo`)),
                 " ",
                 R("a", {
                     key: "redo",
                     className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
                     onClick: this.handleRedo
-                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, T ` Redo`))
+                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, " ", T `Redo`))
             ]
-            : undefined, R("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint }, R("span", { className: "fas fa-print" }), R("span", { className: "hide-600px" }, T ` Print`)), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, T ` Refresh`)), this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
-            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, T ` Show Quickfilters`))
+            : undefined, !this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+            ? R("div", { key: "translations", className: "dropdown d-inline-block" }, R("a", {
+                className: "btn btn-link btn-sm dropdown-toggle",
+                "data-bs-toggle": "dropdown"
+            }, R("span", { className: "fal fa-globe" }), " ", this.state.locale), R("ul", { className: "dropdown-menu dropdown-menu-end" }, [this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => R("li", { key: locale }, R("a", {
+                className: "dropdown-item",
+                onClick: () => this.setState({ locale: locale })
+            }, __1.languages.find(l => l.code === locale)?.name || locale)))))
+            : undefined, R("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint }, R("span", { className: "fas fa-print" }), R("span", { className: "hide-600px" }, " ", T `Print`)), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, " ", T `Refresh`)), this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, " ", T `Show Quickfilters`))
             : undefined, 
         // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
         //   R('span', className: "glyphicon glyphicon-download-alt")
         //   " Export"
         this.state.editing
-            ? R("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings }, R("span", { className: "fas fa-cog" }), R("span", { className: "hide-600px" }, T ` Settings`))
+            ? R("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings }, R("span", { className: "fas fa-cog" }), R("span", { className: "hide-600px" }, " ", T `Settings`))
             : undefined, this.state.editing ? this.renderStyle() : undefined, this.props.extraTitleButtonsElem, this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined);
     }
     renderTitleBar() {
@@ -191,7 +219,8 @@ class DashboardComponent extends react_1.default.Component {
             filters: this.getCompiledFilters(),
             hideTopBorder: this.props.hideTitleBar,
             // Don't hide if title bar is hidden as it can't be shown again
-            onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
+            onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined,
+            translate: this.translate
         });
     }
     refDashboardView = (el) => {
@@ -201,6 +230,7 @@ class DashboardComponent extends react_1.default.Component {
         let filters = this.props.filters || [];
         // Compile quickfilters
         filters = filters.concat(new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters || [], this.state.quickfiltersValues, this.props.quickfilterLocks));
+        const displayLocale = this.state.editing ? this.props.design.locale || "en" : this.state.locale;
         const dashboardView = R(DashboardViewComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -212,7 +242,8 @@ class DashboardComponent extends react_1.default.Component {
             onRowClick: this.props.onRowClick,
             namedStrings: this.props.namedStrings,
             hideScopes: this.state.hideQuickfilters,
-            refreshKey: this.state.refreshKey
+            refreshKey: this.state.refreshKey,
+            locale: displayLocale
         });
         const readonlyDashboardView = R(DashboardViewComponent_1.default, {
             schema: this.props.schema,
@@ -223,11 +254,12 @@ class DashboardComponent extends react_1.default.Component {
             filters,
             onRowClick: this.props.onRowClick,
             namedStrings: this.props.namedStrings,
-            hideScopes: this.state.hideQuickfilters
+            hideScopes: this.state.hideQuickfilters,
+            locale: displayLocale
         });
         // Pass active tables down to table select components so they can present a shorter list
         return react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: DashboardUtils.getFilterableTables(this.props.design, this.props.schema) },
-            react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: this.props.design.locale ?? "en" },
+            react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: displayLocale },
                 react_1.default.createElement("div", { style: {
                         display: "grid",
                         gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",