@mwater/visualization 5.4.1 → 5.4.3

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

@@ -2,7 +2,6 @@ import React, { ReactNode } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import UndoStack from "../UndoStack";
 import { DashboardViewComponentHandle } from "./DashboardViewComponent";
-import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent";
 import SettingsModalComponent from "./SettingsModalComponent";
 import { DashboardDesign } from "./DashboardDesign";
 import DashboardDataSource from "./DashboardDataSource";
@@ -39,6 +38,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 +48,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,25 +75,14 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     handleDesignChange: (design: any) => void;
     handleShowQuickfilters: () => void;
     getCompiledFilters(): JsonQLFilter[];
-    renderEditingSwitch(): React.DetailedReactHTMLElement<{
-        key: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
-    renderStyle(): React.DetailedReactHTMLElement<{
-        type: string;
-        key: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
-    renderActionLinks(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    renderTitleBar(): React.DetailedReactHTMLElement<{
-        style: {
-            height: number;
-            padding: number;
-        };
-    }, HTMLElement>;
-    renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
+    /** Translate function to use for display. Do not use when editing. */
+    translate: (input: string) => string;
+    renderEditingSwitch(): React.JSX.Element;
+    renderStyle(): React.JSX.Element;
+    renderActionLinks(): React.JSX.Element;
+    renderTitleBar(): React.JSX.Element;
+    renderQuickfilter(): React.JSX.Element;
+    renderFloatingShowQuickfiltersButton(): React.JSX.Element | null;
     refDashboardView: (el: any) => void;
     render(): React.JSX.Element;
 }