@mwater/visualization 5.3.2 → 5.4.0

package/lib/widgets/charts/table/TableChartViewComponent.js

@@ -11,7 +11,7 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
 const valueFormatter_1 = require("../../../valueFormatter");
 const color_1 = __importDefault(require("color"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 class TableChartViewComponent extends react_1.default.Component {
     shouldComponentUpdate(prevProps) {
         return !lodash_1.default.isEqual(prevProps, this.props);
@@ -33,7 +33,7 @@ class TableChartViewComponent extends react_1.default.Component {
 }
 exports.default = TableChartViewComponent;
 class TableContentsComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -124,7 +124,7 @@ class TableContentsComponent extends react_1.default.Component {
     }
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
+        return R("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`);
     }
     renderCell(rowIndex, columnIndex) {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });

package/lib/widgets/text/ExprInsertModalComponent.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
-export interface ExprInsertModalComponentProps {
+interface ExprInsertModalComponentProps {
     /** Schema to use */
     schema: Schema;
     /** Data source to use to get values */
@@ -19,6 +18,6 @@ export default class ExprInsertModalComponent extends React.Component<ExprInsert
     constructor(props: ExprInsertModalComponentProps);
     open(): void;
     handleInsert: () => void;
-    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
+    render(): React.JSX.Element | null;
 }
 export {};

package/lib/widgets/text/ExprInsertModalComponent.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const ExprItemEditorComponent_1 = __importDefault(require("./ExprItemEditorComponent"));
@@ -33,19 +32,8 @@ class ExprInsertModalComponent extends react_1.default.Component {
         if (!this.state.open) {
             return null;
         }
-        return R(ActionCancelModalComponent_1.default, {
-            actionLabel: "Insert",
-            onAction: this.handleInsert,
-            onCancel: () => this.setState({ open: false }),
-            title: "Insert Field",
-            size: "x-large"
-        }, R(ExprItemEditorComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprItem: this.state.exprItem,
-            onChange: (exprItem) => this.setState({ exprItem }),
-            singleRowTable: this.props.singleRowTable
-        }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { actionLabel: T `Insert`, onAction: this.handleInsert, onCancel: () => this.setState({ open: false }), title: T `Insert Field`, size: "x-large" },
+            react_1.default.createElement(ExprItemEditorComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, exprItem: this.state.exprItem, onChange: (exprItem) => this.setState({ exprItem }), singleRowTable: this.props.singleRowTable })));
     }
 }
 exports.default = ExprInsertModalComponent;

package/lib/widgets/text/ExprItemEditorComponent.js

@@ -53,7 +53,7 @@ class ExprItemEditorComponent extends react_1.default.Component {
         if (!formats) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Format"), ": ", R("select", {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Format`), ": ", R("select", {
             value: this.props.exprItem.format != null ? this.props.exprItem.format : (0, valueFormatter_2.getDefaultFormat)(exprType),
             className: "form-select",
             style: { width: "auto", display: "inline-block" },
@@ -61,12 +61,12 @@ class ExprItemEditorComponent extends react_1.default.Component {
         }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
     }
     render() {
-        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
+        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.state.table,
             onChange: this.handleTableChange
         }), R("br")), this.state.table
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Field"), ": ", R(expressions_ui_1.ExprComponent, {
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Field`), ": ", R(expressions_ui_1.ExprComponent, {
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
                 table: this.state.table,
@@ -76,7 +76,7 @@ class ExprItemEditorComponent extends react_1.default.Component {
                 onChange: this.handleExprChange
             }))
             : undefined, this.state.table && this.props.exprItem.expr
-            ? R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, "Include Label"), this.props.exprItem.includeLabel
+            ? R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, T `Include Label`), this.props.exprItem.includeLabel
                 ? R("input", {
                     key: "labelText",
                     className: "form-control",

package/lib/widgets/text/ExprUpdateModalComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
 export interface ExprUpdateModalComponentProps {
     /** Schema to use */
@@ -16,7 +15,7 @@ interface ExprUpdateModalComponentState {
 }
 export default class ExprUpdateModalComponent extends React.Component<ExprUpdateModalComponentProps, ExprUpdateModalComponentState> {
     constructor(props: any);
-    open(item: any, onUpdate: any): void;
-    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
+    open(item: HtmlItemExpr, onUpdate: (item: HtmlItemExpr) => void): void;
+    render(): React.JSX.Element | null;
 }
 export {};

package/lib/widgets/text/ExprUpdateModalComponent.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const ExprItemEditorComponent_1 = __importDefault(require("./ExprItemEditorComponent"));
 // Modal that displays an expression builder for updating an expression
@@ -24,24 +23,13 @@ class ExprUpdateModalComponent extends react_1.default.Component {
         if (!this.state.open) {
             return null;
         }
-        return R(ActionCancelModalComponent_1.default, {
-            actionLabel: "Update",
-            onAction: () => {
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { actionLabel: T `Update`, onAction: () => {
                 // Close first to avoid strange effects when mixed with pojoviews
                 this.setState({ open: false }, () => {
                     return this.state.onUpdate(this.state.exprItem);
                 });
-            },
-            onCancel: () => this.setState({ open: false }),
-            title: "Update Field",
-            size: "x-large"
-        }, R(ExprItemEditorComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprItem: this.state.exprItem,
-            onChange: (exprItem) => this.setState({ exprItem }),
-            singleRowTable: this.props.singleRowTable
-        }));
+            }, onCancel: () => this.setState({ open: false }), title: T `Update Field`, size: "x-large" },
+            react_1.default.createElement(ExprItemEditorComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, exprItem: this.state.exprItem, onChange: (exprItem) => this.setState({ exprItem }), singleRowTable: this.props.singleRowTable })));
     }
 }
 exports.default = ExprUpdateModalComponent;

package/lib/widgets/text/TextComponent.js

@@ -9,11 +9,11 @@ const RichTextComponent_1 = __importDefault(require("../../richtext/RichTextComp
 const ExprInsertModalComponent_1 = __importDefault(require("./ExprInsertModalComponent"));
 const ExprUpdateModalComponent_1 = __importDefault(require("./ExprUpdateModalComponent"));
 const ExprItemsHtmlConverter_1 = __importDefault(require("../../richtext/ExprItemsHtmlConverter"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Text component which is provided with the data it needs, rather than loading it.
 // Used by TextWidgetComponent and also by other components that embed text fields
 class TextComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     exprInsertModal = null;
     exprUpdateModal = null;
     editor = null;
@@ -60,7 +60,7 @@ class TextComponent extends react_1.default.Component {
     renderExtraPaletteButtons() {
         return (react_1.default.createElement("div", { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr },
             react_1.default.createElement("i", { className: "fa fa-plus" }),
-            " Expression"));
+            T ` Expression`));
     }
     renderModals() {
         return [

package/lib/widgets/text/TextWidget.d.ts

@@ -22,7 +22,7 @@ export default class TextWidget extends Widget {
         ref: ((widget: any) => void) | undefined;
         refreshKey: any;
     }, any>;
-    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): any;
     isAutoHeight(): boolean;
     getExprItems(items: HtmlItem[]): HtmlItemExpr[];
     getFilterableTables(design: TextWidgetDesign | undefined, schema: Schema): string[];

package/lib/widgets/text/TextWidgetComponent.js

@@ -23,7 +23,7 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
             // Map of expression id to expression value
             exprValues: {},
             error: null,
-            cacheExpiry: props.dataSource.getCacheExpiry(),
+            cacheExpiry: props.dataSource.getCacheExpiry(), // Save cache expiry to see if changes
             editModalOpen: false
         };
     }
@@ -102,21 +102,21 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
             return null;
         }
         const spacingOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40].map(value => ({ value, label: `${value}px` }));
-        const borderThicknessOptions = [0, 1, 2, 3, 4, 5].map(value => ({ value, label: value === 0 ? "None" : `${value}px` }));
-        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Text Widget", onCancel: this.handleEditModalClose, onAction: this.handleEditModalClose },
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Background Color" },
+        const borderThicknessOptions = [0, 1, 2, 3, 4, 5].map(value => ({ value, label: value === 0 ? T `None` : `${value}px` }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: T `Edit Text Widget`, onCancel: this.handleEditModalClose, onAction: this.handleEditModalClose },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Background Color` },
                 react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.backgroundColor || null, onChange: this.handleBackgroundColorChange }),
-                react_1.default.createElement("div", { className: "text-muted" }, "Choose a background color for the text widget")),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Padding" },
+                react_1.default.createElement("div", { className: "text-muted" }, T `Choose a background color for the text widget`)),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Padding` },
                 react_1.default.createElement(bootstrap_2.Select, { value: this.props.design.padding ?? 0, onChange: this.handleSpacingChange, options: spacingOptions }),
-                react_1.default.createElement("div", { className: "text-muted" }, "Choose extra padding for the text widget")),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Border Thickness", help: "Choose the border thickness for the text widget" },
+                react_1.default.createElement("div", { className: "text-muted" }, T `Choose extra padding for the text widget`)),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Border Thickness`, help: T `Choose the border thickness for the text widget` },
                 react_1.default.createElement(bootstrap_2.Select, { value: this.props.design.borderThickness ?? 0, onChange: this.handleBorderThicknessChange, options: borderThicknessOptions })),
             this.props.design.borderThickness &&
-                react_1.default.createElement(bootstrap_1.FormGroup, { label: "Border Color", help: "Choose the border color for the text widget" },
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Border Color`, help: T `Choose the border color for the text widget` },
                     react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.borderColor || null, onChange: this.handleBorderColorChange })),
             this.props.design.borderThickness &&
-                react_1.default.createElement(bootstrap_1.FormGroup, { label: "Border Radius", help: "Choose the border radius for the text widget" },
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Border Radius`, help: T `Choose the border radius for the text widget` },
                     react_1.default.createElement(bootstrap_2.Select, { value: this.props.design.borderRadius ?? 0, onChange: this.handleBorderRadiusChange, options: spacingOptions }))));
     }
     renderTextComponent() {
@@ -136,7 +136,7 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
                 borderRadius: this.props.design.borderRadius != null ? `${this.props.design.borderRadius}px` : undefined
             }, ref: comp => this.divComp = comp },
             this.props.onDesignChange ? (react_1.default.createElement(DropdownWidgetComponent_1.default, { dropdownItems: [{
-                        label: "Edit",
+                        label: T `Edit`,
                         onClick: this.handleEditClick
                     }] }, this.renderTextComponent())) : (this.renderTextComponent()),
             this.renderEditModal()));

package/lib/widgets/text/TextWidgetDesign.d.ts

@@ -1,8 +1,9 @@
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
 import { HtmlItem } from "../../richtext/ItemsHtmlConverter";
+export type TextWidgetItem = HtmlItem | HtmlItemExpr;
 export interface TextWidgetDesign {
     /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-    items: (HtmlItem | HtmlItemExpr)[];
+    items: TextWidgetItem[];
     /** "title" for title block. default is "default" */
     style?: "title" | "default" | "header" | "footer";
     /** Background color of the text widget (optional) */

package/lib/widgets/text/TextWidgetDesign.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isEmptyTextWidgetDesign = void 0;
+exports.isEmptyTextWidgetDesign = isEmptyTextWidgetDesign;
 /** Returns true if the text widget design is empty. */
 function isEmptyTextWidgetDesign(design) {
     return design == null || design.items.length === 0;
 }
-exports.isEmptyTextWidgetDesign = isEmptyTextWidgetDesign;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "async": "^1.2.1",
     "async-latest": "^1.0.0",
     "backbone": "~1.1.2",
-    "billboard.js": "^3.13.0",
+    "billboard.js": "3.12.2",
     "canonical-json": "0.0.4",
     "classnames": "^2.3.1",
     "color": "^3.2.1",
@@ -41,7 +41,7 @@
     "d3-tip": "^0.9.0",
     "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
-    "ez-localize": "^2.5.0",
+    "ez-localize": "^2.10.5",
     "file-saver": "^2.0.5",
     "fixed-data-table-2": "^1.2.15",
     "immer": "^8.0.0",

package/src/ColorComponent.tsx

@@ -65,11 +65,11 @@ export default class ColorComponent extends React.Component<ColorComponentProps,
           {!this.props.disableReset && (
             <button type="button" className="btn btn-link btn-sm" onClick={this.handleReset}>
               <i className="fa fa-undo" />
-              {" Reset Color"}
+              {T` Reset Color`}
             </button>
           )}
           <button type="button" className="btn btn-link btn-sm" onClick={this.handleAdvanced}>
-            {this.state.advanced ? "Basic" : "Advanced"}
+            {this.state.advanced ? T`Basic` : T`Advanced`}
           </button>
 
           <CustomColors

package/src/DateRangeComponent.ts

@@ -112,18 +112,18 @@ export default class DateRangeComponent extends React.Component<DateRangeCompone
 
   getPresets() {
     const presets = [
-      { label: "Today", value: [moment(), moment()] },
-      { label: "Yesterday", value: [moment().subtract(1, "days"), moment().subtract(1, "days")] },
-      { label: "Last 7 Days", value: [moment().subtract(6, "days"), moment()] },
-      { label: "Last 30 Days", value: [moment().subtract(29, "days"), moment()] },
-      { label: "This Month", value: [moment().startOf("month"), moment().endOf("month")] },
+      { label: T`Today`, value: [moment(), moment()] },
+      { label: T`Yesterday`, value: [moment().subtract(1, "days"), moment().subtract(1, "days")] },
+      { label: T`Last 7 Days`, value: [moment().subtract(6, "days"), moment()] },
+      { label: T`Last 30 Days`, value: [moment().subtract(29, "days"), moment()] },
+      { label: T`This Month`, value: [moment().startOf("month"), moment().endOf("month")] },
       {
-        label: "Last Month",
+        label: T`Last Month`,
         value: [moment().subtract(1, "months").startOf("month"), moment().subtract(1, "months").endOf("month")]
       },
-      { label: "This Year", value: [moment().startOf("year"), moment().endOf("year")] },
+      { label: T`This Year`, value: [moment().startOf("year"), moment().endOf("year")] },
       {
-        label: "Last Year",
+        label: T`Last Year`,
         value: [moment().subtract(1, "years").startOf("year"), moment().subtract(1, "years").endOf("year")]
       }
     ]
@@ -143,7 +143,7 @@ export default class DateRangeComponent extends React.Component<DateRangeCompone
 
   renderSummary() {
     if (!this.props.value) {
-      return R("span", { className: "text-muted" }, "All Dates")
+      return R("span", { className: "text-muted" }, T`All Dates`)
     }
 
     const startDate = this.toMoment(this.props.value[0])
@@ -186,7 +186,7 @@ export default class DateRangeComponent extends React.Component<DateRangeCompone
           R(
             "a",
             { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) },
-            "Custom Date Range..."
+            T`Custom Date Range...`
           )
         )
       )

package/src/LocaleContextInjector.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface LocaleContextProps {
   locale: string

package/src/MWaterAddRelatedFormComponent.ts

@@ -10,7 +10,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import * as ui from "./UIComponents"
 import * as formUtils from "@mwater/forms/lib/formUtils" // TODO requireing this directly because of bizarre backbone issue
 import { Form, FormDesign } from "@mwater/forms"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface MWaterAddRelatedFormComponentProps {
   /** Entities table id */
@@ -74,8 +74,8 @@ export default class MWaterAddRelatedFormComponent extends React.Component<
       "div",
       null,
       this.state.waitingForTable
-        ? R("div", null, R("i", { className: "fa fa-spin fa-spinner" }), " Adding...")
-        : R("a", { className: "btn btn-link", onClick: this.handleOpen }, "+ Add Related Survey"),
+        ? R("div", null, R("i", { className: "fa fa-spin fa-spinner" }), ` ${T`Adding...`}`)
+        : R("a", { className: "btn btn-link", onClick: this.handleOpen }, T`+ Add Related Survey`),
       this.state.open
         ? R(AddRelatedFormModalComponent, {
             table: this.props.table,
@@ -150,7 +150,7 @@ class AddRelatedFormModalComponent extends React.Component<
       // Get _id, name, and description
       const items = _.map(forms, (form) => ({
         name: ExprUtils.localizeString(form.design.name, this.context),
-        desc: `Modified ${moment(form.modified!.on, moment.ISO_8601).format("ll")}`,
+        desc: `${T`Modified`} ${moment(form.modified!.on, moment.ISO_8601).format("ll")}`,
         onClick: this.props.onSelect.bind(null, "responses:" + form._id)
       }))
 
@@ -162,7 +162,7 @@ class AddRelatedFormModalComponent extends React.Component<
 
   renderContents() {
     if (!this.state.items) {
-      return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...")
+      return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spin fa-spinner" }), ` ${T`Loading...`}`)
     }
 
     let { items } = this.state
@@ -179,7 +179,7 @@ class AddRelatedFormModalComponent extends React.Component<
       R("input", {
         type: "text",
         className: "form-control",
-        placeholder: "Search...",
+        placeholder: T`Search...`,
         key: "search",
         style: { marginBottom: 10 },
         value: this.state.search,
@@ -196,7 +196,7 @@ class AddRelatedFormModalComponent extends React.Component<
       {
         showCloseX: true,
         onClose: this.props.onCancel,
-        header: "Add Related Survey"
+        header: T`Add Related Survey`
       },
       this.renderContents()
     )

package/src/MWaterAddRelatedIndicatorComponent.ts

@@ -5,7 +5,7 @@ const R = React.createElement
 
 import querystring from "querystring"
 import { ExprUtils, Schema } from "@mwater/expressions"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface MWaterAddRelatedIndicatorComponentProps {
   table: string
@@ -122,12 +122,12 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
       R(
         "div",
         { style: { paddingLeft: 5 }, className: "text-muted" },
-        "Other Available Indicators. Click to enable. ",
+        T`Other Available Indicators. Click to enable. `,
         R("i", { className: "fa fa-check-circle" }),
-        " = recommended",
+        T` = recommended`,
 
         !this.state.indicators
-          ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...")
+          ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), T` Loading...`)
           : undefined,
 
         R(
@@ -142,7 +142,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
               return R(
                 "div",
                 { key: indicator._id, style: { cursor: "pointer", padding: 4 }, className: "text-success" },
-                `${name} added. See above.`
+                `${name} ${T`added. See above.`}`
               )
             }
 

package/src/MWaterAssetSystemsListComponent.tsx

@@ -66,7 +66,7 @@ export const MWaterAssetSystemsListComponent = (props: {
     // Remove from extra tables
     const match = props.extraTables.find((t) => t == `assets:${system.sid}`)
     if (match) {
-      if (confirm("Remove this table? Some widgets may not work correctly.")) {
+      if (confirm(T`Remove this table? Some widgets may not work correctly.`)) {
         props.onChange(null)
         props.onExtraTableRemove(match)
       }
@@ -76,7 +76,7 @@ export const MWaterAssetSystemsListComponent = (props: {
   if (!systems || extraTableNeeded) {
     return (
       <div>
-        <i className="fa fa-spin fa-spinner" /> Loading...
+        <i className="fa fa-spin fa-spinner" /> {T`Loading...`}
       </div>
     )
   }
@@ -98,7 +98,7 @@ export const MWaterAssetSystemsListComponent = (props: {
 
   return (
     <div>
-      <TextInput value={search} onChange={setSearch} placeholder="Search..." />
+      <TextInput value={search} onChange={setSearch} placeholder={T`Search...`} />
       {renderAssetSystems()}
     </div>
   )