@mwater/visualization 5.3.1 → 5.4.0

package/lib/valueFormatter.js

@@ -3,7 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatValue = exports.getDefaultFormat = exports.getFormatOptions = exports.canFormatType = void 0;
+exports.canFormatType = canFormatType;
+exports.getFormatOptions = getFormatOptions;
+exports.getDefaultFormat = getDefaultFormat;
+exports.formatValue = formatValue;
 const d3_format_1 = require("d3-format");
 const utm_1 = require("utm");
 const dayjs_1 = __importDefault(require("./dayjs"));
@@ -12,26 +15,25 @@ const wellknown_1 = require("./wellknown");
 function canFormatType(type) {
     return type == "number" || type == "geometry" || type === "date" || type === "datetime";
 }
-exports.canFormatType = canFormatType;
 /** Get available options for formatting a type. Null if not available */
 function getFormatOptions(type) {
     if (type == "number") {
         return [
-            { value: "", label: "Plain: 1234.567" },
-            { value: ",", label: "Normal: 1,234.567" },
-            { value: ",.0f", label: "Rounded: 1,234" },
-            { value: ",.2f", label: "Two decimals: 1,234.56" },
-            { value: "$,.2f", label: "Currency: $1,234.56" },
-            { value: "$,.0f", label: "Currency rounded: $1,234" },
-            { value: ".0%", label: "Percent rounded: 12%" },
-            { value: ".2%", label: "Percent decimal: 12.34%" }
+            { value: "", label: T `Plain: 1234.567` },
+            { value: ",", label: T `Normal: 1,234.567` },
+            { value: ",.0f", label: T `Rounded: 1,234` },
+            { value: ",.2f", label: T `Two decimals: 1,234.56` },
+            { value: "$,.2f", label: T `Currency: $1,234.56` },
+            { value: "$,.0f", label: T `Currency rounded: $1,234` },
+            { value: ".0%", label: T `Percent rounded: 12%` },
+            { value: ".2%", label: T `Percent decimal: 12.34%` }
         ];
     }
     if (type == "geometry") {
         return [
-            { value: "lat, lng", label: "Latitude, Longitude" },
-            { value: "UTM", label: "UTM" },
-            { value: "WKT", label: "Well-Known Text" }
+            { value: "lat, lng", label: T `Latitude, Longitude` },
+            { value: "UTM", label: T `UTM` },
+            { value: "WKT", label: T `Well-Known Text` }
         ];
     }
     if (type == "date") {
@@ -71,7 +73,6 @@ function getFormatOptions(type) {
     }
     return null;
 }
-exports.getFormatOptions = getFormatOptions;
 /** Get default format */
 function getDefaultFormat(type) {
     if (type == "number") {
@@ -86,9 +87,8 @@ function getDefaultFormat(type) {
     if (type == "datetime") {
         return "lll";
     }
-    throw new Error("Not supported");
+    throw new Error(T `Not supported`);
 }
-exports.getDefaultFormat = getDefaultFormat;
 /** Format a value of a specified type as a string. For historical reasons,
  * LayeredCharts multiply by 100 before adding the % sign. Set legacyPercentFormat to true to replicate
  */
@@ -118,10 +118,10 @@ function formatValue(type, value, format, locale, legacyPercentFormat) {
                 const latitude = value.coordinates[1];
                 const longitude = value.coordinates[0];
                 if (latitude > 84 || latitude < -80) {
-                    return "latitude out of range";
+                    return T `latitude out of range`;
                 }
                 if (longitude > 180 || longitude < -180) {
-                    return "longitude out of range";
+                    return T `longitude out of range`;
                 }
                 const { easting, northing, zoneNum, zoneLetter } = (0, utm_1.fromLatLon)(latitude, longitude);
                 return `${zoneNum}${zoneLetter} ${easting.toFixed(0)} ${northing.toFixed(0)}`;
@@ -146,4 +146,3 @@ function formatValue(type, value, format, locale, legacyPercentFormat) {
         return value + "";
     }
 }
-exports.formatValue = formatValue;

package/lib/wellknown.js

@@ -19,7 +19,8 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stringify = exports.parse = void 0;
+exports.parse = parse;
+exports.stringify = stringify;
 const numberRegexp = /[-+]?([0-9]*\.[0-9]+|[0-9]+)([eE][-+]?[0-9]+)?/;
 // Matches sequences like '100 100' or '100 100 100'.
 const tuples = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,}');
@@ -245,7 +246,6 @@ function parse(input) {
     }
     return crs(root());
 }
-exports.parse = parse;
 /**
  * Stringifies a GeoJSON object into WKT
  */
@@ -285,4 +285,3 @@ function stringify(gj) {
             throw new Error('stringify requires a valid GeoJSON Feature or geometry object as input');
     }
 }
-exports.stringify = stringify;

package/lib/widgets/IFrameWidgetComponent.d.ts

@@ -20,6 +20,14 @@ export default class IFrameWidgetComponent extends React.Component<IFrameWidgetC
         className: string;
         onClick: () => void;
     }, HTMLElement>;
-    render(): React.FunctionComponentElement<import("./DropdownWidgetComponent").DropdownWidgetComponentProps>;
+    render(): React.FunctionComponentElement<{
+        width: number | undefined;
+        height: number | undefined;
+        dropdownItems: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+    }>;
 }
 export {};

package/lib/widgets/IFrameWidgetComponent.js

@@ -52,14 +52,14 @@ class IFrameWidgetComponent extends react_1.default.Component {
         if (!this.state.editing) {
             return null;
         }
-        const content = R("div", { className: "mb-3" }, R("label", null, "URL to embed"), R("input", {
+        const content = R("div", { className: "mb-3" }, R("label", null, T `URL to embed`), R("input", {
             type: "text",
             className: "form-control",
             value: this.state.editUrl || "",
             onChange: (ev) => this.setState({ editUrl: ev.target.value })
         }), R("div", { className: "form-text text-muted" }, "e.g. https://www.youtube.com/embed/dQw4w9WgXcQ"));
         return R(ModalPopupComponent_1.default, {
-            header: "Configure",
+            header: T `Configure`,
             showCloseX: true,
             onClose: this.handleEndEditing
         }, content);
@@ -73,7 +73,7 @@ class IFrameWidgetComponent extends react_1.default.Component {
     render() {
         const dropdownItems = [];
         if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         return R(DropdownWidgetComponent_1.default, {
             width: this.props.width,

package/lib/widgets/ImageUploaderComponent.js

@@ -50,7 +50,7 @@ class ImageUploaderComponent extends react_1.default.Component {
         }
         else {
             this.setState({ uploading: false, files: null, editing: false });
-            alert(`Upload failed: ${e.target.responseText}`);
+            alert(T `Upload failed: ${e.target.responseText}`);
         }
     };
     createId() {
@@ -66,9 +66,9 @@ class ImageUploaderComponent extends react_1.default.Component {
                                 this.progressBar = c;
                             } }))
                     : react_1.default.createElement("div", null, isDragActive ?
-                        "Drop the files here"
-                        : "Drop file here or click to select file")))),
-            this.state.uid && react_1.default.createElement("a", { className: "link-plain", onClick: () => this.setState({ editing: false }) }, "Cancel"));
+                        T `Drop the files here`
+                        : T `Drop file here or click to select file`)))),
+            this.state.uid && react_1.default.createElement("a", { className: "link-plain", onClick: () => this.setState({ editing: false }) }, T `Cancel`));
     }
     renderPreview() {
         const thumbnailStyle = {
@@ -79,7 +79,7 @@ class ImageUploaderComponent extends react_1.default.Component {
             border: "1px solid #aeaeae",
             marginRight: 20
         };
-        return R("div", null, R("img", { style: thumbnailStyle, src: this.props.dataSource.getImageUrl(this.state.uid) }), R("a", { className: "btn btn-secondary", onClick: this.handleChangeImage }, "Change"));
+        return R("div", null, R("img", { style: thumbnailStyle, src: this.props.dataSource.getImageUrl(this.state.uid) }), R("a", { className: "btn btn-secondary", onClick: this.handleChangeImage }, T `Change`));
     }
     handleChangeImage = () => {
         return this.setState({ editing: true });

package/lib/widgets/ImageWidget.js

@@ -46,12 +46,12 @@ class ImageWidget extends Widget_1.default {
     //   callback: (error, data)
     getData(design, schema, dataSource, filters, callback) {
         if (!design.expr) {
-            return callback(null);
+            return callback(null, null);
         }
         const exprCleaner = new expressions_1.ExprCleaner(schema);
         const expr = exprCleaner.cleanExpr(design.expr);
         if (!expr) {
-            return callback(null);
+            return callback(null, null);
         }
         const { table } = design.expr;
         const exprCompiler = new expressions_1.ExprCompiler(schema);

package/lib/widgets/ImageWidgetComponent.d.ts

@@ -33,7 +33,15 @@ export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidget
     renderEditor(): React.CElement<any, ImageWidgetDesignComponent>;
     renderExpression(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | null;
     renderContent(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | React.CElement<RotatedImageComponentProps, RotatedImageComponent> | null;
-    render(): React.FunctionComponentElement<import("./DropdownWidgetComponent").DropdownWidgetComponentProps>;
+    render(): React.FunctionComponentElement<{
+        width: number;
+        height: number;
+        dropdownItems: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+    }>;
 }
 interface ImageWidgetDesignComponentProps {
     design: any;

package/lib/widgets/ImageWidgetComponent.js

@@ -75,7 +75,7 @@ class ImageWidgetComponent extends AsyncLoadComponent_1.default {
     }
     renderExpression() {
         if (this.state.loading) {
-            return R("span", null, "Loading");
+            return R("span", null, T `Loading`);
         }
         else if (this.state.data) {
             // Make into array if not
@@ -131,7 +131,7 @@ class ImageWidgetComponent extends AsyncLoadComponent_1.default {
     render() {
         const dropdownItems = [];
         if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         const captionPosition = this.props.design.captionPosition || "bottom";
         return R(DropdownWidgetComponent_1.default, {
@@ -257,8 +257,8 @@ class ImageWidgetDesignComponent extends react_1.default.Component {
         });
     };
     renderExpressionEditor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "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, {
+        return 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" }, T `Field`), ": ", R(expressions_ui_1.ExprComponent, {
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
                 table: this.state.table,
@@ -270,59 +270,59 @@ class ImageWidgetDesignComponent extends react_1.default.Component {
             : undefined);
     }
     renderRotation() {
-        return R("div", { style: { paddingTop: 10 } }, "Rotation: ", R(ui.Radio, { value: this.state.rotation || null, radioValue: null, onChange: this.handleRotationChange, inline: true }, "0 degrees"), R(ui.Radio, { value: this.state.rotation || null, radioValue: 90, onChange: this.handleRotationChange, inline: true }, "90 degrees"), R(ui.Radio, { value: this.state.rotation || null, radioValue: 180, onChange: this.handleRotationChange, inline: true }, "180 degrees"), R(ui.Radio, { value: this.state.rotation || null, radioValue: 270, onChange: this.handleRotationChange, inline: true }, "270 degrees"));
+        return R("div", { style: { paddingTop: 10 } }, T `Rotation: `, R(ui.Radio, { value: this.state.rotation || null, radioValue: null, onChange: this.handleRotationChange, inline: true }, T `0 degrees`), R(ui.Radio, { value: this.state.rotation || null, radioValue: 90, onChange: this.handleRotationChange, inline: true }, T `90 degrees`), R(ui.Radio, { value: this.state.rotation || null, radioValue: 180, onChange: this.handleRotationChange, inline: true }, T `180 degrees`), R(ui.Radio, { value: this.state.rotation || null, radioValue: 270, onChange: this.handleRotationChange, inline: true }, T `270 degrees`));
     }
     renderImageUrlEditor() {
-        return R("div", { className: "mb-3" }, R("label", null, "URL of image"), R("input", {
+        return R("div", { className: "mb-3" }, R("label", null, T `URL of image`), R("input", {
             type: "text",
             className: "form-control",
             value: this.state.imageUrl || "",
             onChange: this.handleImageUrlChange
-        }), R("div", { className: "form-text text-muted" }, "e.g. http://somesite.com/image.jpg"), this.renderRotation());
+        }), R("div", { className: "form-text text-muted" }, T `e.g. http://somesite.com/image.jpg`), this.renderRotation());
     }
     renderUrlEditor() {
-        return R("div", { className: "mb-3" }, R("label", null, "URL to open"), R("input", {
+        return R("div", { className: "mb-3" }, R("label", null, T `URL to open`), R("input", {
             type: "text",
             className: "form-control",
             value: this.state.url || "",
             onChange: this.handleUrlChange
-        }), R("div", { className: "form-text text-muted" }, "e.g. http://somesite.com/"), R("div", { className: "form-text text-muted" }, "When clicked on image, this link will open"), R("div", null, R(ui.Checkbox, {
+        }), R("div", { className: "form-text text-muted" }, T `e.g. http://somesite.com/`), R("div", { className: "form-text text-muted" }, T `When clicked on image, this link will open`), R("div", null, R(ui.Checkbox, {
             value: !this.state.openUrlInSameTab,
             onChange: this.handleOpenUrlInSameTabChange
-        }, "Open link in new tab")));
+        }, T `Open link in new tab`)));
     }
     render() {
         if (!this.state.editing) {
             return null;
         }
-        const content = R("div", null, R("div", { className: "mb-3" }, R("label", null, "Caption"), R("input", {
+        const content = R("div", null, R("div", { className: "mb-3" }, R("label", null, T `Caption`), R("input", {
             type: "text",
             className: "form-control",
             value: this.state.caption || "",
             onChange: this.handleCaptionChange,
-            placeholder: "Optional caption to display below image"
+            placeholder: T `Optional caption to display below image`
         })), this.state.caption
-            ? R("div", { className: "mb-3" }, R("label", null, "Caption position"), R(ui.Select, {
+            ? R("div", { className: "mb-3" }, R("label", null, T `Caption position`), R(ui.Select, {
                 options: [
-                    { value: "bottom", label: "Bottom" },
-                    { value: "top", label: "Top" }
+                    { value: "bottom", label: T `Bottom` },
+                    { value: "top", label: T `Top` }
                 ],
                 value: this.state.captionPosition,
                 onChange: this.handleCaptionPositionChange
             }))
             : undefined, R(TabbedComponent_1.default, {
             tabs: [
-                { id: "upload", label: "Upload", elem: this.renderUploadEditor() },
-                { id: "expression", label: "From Data", elem: this.renderExpressionEditor() },
-                { id: "url", label: "From URL", elem: this.renderImageUrlEditor() }
+                { id: "upload", label: T `Upload`, elem: this.renderUploadEditor() },
+                { id: "expression", label: T `From Data`, elem: this.renderExpressionEditor() },
+                { id: "url", label: T `From URL`, elem: this.renderImageUrlEditor() }
             ],
             initialTabId: this.state.currentTab
         }), 
         // No target URL when using expressions
         this.state.imageUrl || this.state.uid ? this.renderUrlEditor() : undefined);
-        const footer = R("div", null, R("button", { key: "save", type: "button", className: "btn btn-primary me-2", onClick: this.handleSave }, "Save"), R("button", { key: "cancel", type: "button", className: "btn btn-secondary", onClick: this.handleCancel }, "Cancel"));
+        const footer = R("div", null, R("button", { key: "save", type: "button", className: "btn btn-primary me-2", onClick: this.handleSave }, T `Save`), R("button", { key: "cancel", type: "button", className: "btn btn-secondary", onClick: this.handleCancel }, T `Cancel`));
         return R(ModalPopupComponent_1.default, {
-            header: "Image",
+            header: T `Image`,
             footer
         }, content);
     }

package/lib/widgets/ImagelistCarouselComponent.js

@@ -58,7 +58,7 @@ class ImagelistCarouselComponent extends react_1.default.Component {
             }))
             : undefined, 
         // Wrapper for slides
-        R("div", { className: "carousel-inner" }, this.renderImages(imageManager)), R("button", { className: "carousel-control-prev", onClick: this.handleLeft }, R("span", { className: "carousel-control-prev-icon" })), R("button", { className: "carousel-control-next", onClick: this.handleRight }, R("span", { className: "carousel-control-next-icon" })));
+        R("div", { className: "carousel-inner" }, this.renderImages(imageManager)), R("button", { className: "carousel-control-prev", onClick: this.handleLeft }, R("span", { className: "carousel-control-prev-icon", "aria-label": T `Previous` })), R("button", { className: "carousel-control-next", onClick: this.handleRight }, R("span", { className: "carousel-control-next-icon", "aria-label": T `Next` })));
     }
 }
 exports.default = ImagelistCarouselComponent;

package/lib/widgets/MapWidget.js

@@ -146,14 +146,14 @@ class MapWidgetComponent extends react_1.default.Component {
             extraFilters: this.props.filters,
             width: width - 20,
             height: height - 20,
-            scrollWheelZoom: false,
+            scrollWheelZoom: false, // Prevent accidental zooming
             onRowClick: this.props.onRowClick
         }));
     }
     render() {
         const dropdownItems = [];
         if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         const handleDesignChange = (d) => this.setState({ transientDesign: d });
         // Wrap in a simple widget

package/lib/widgets/MarkdownWidget.d.ts

@@ -41,7 +41,7 @@ declare class MarkdownWidgetViewComponent extends React.Component<MarkdownWidget
         };
         className: string;
         dangerouslySetInnerHTML: {
-            __html: string;
+            __html: any;
         };
     }, HTMLElement>;
 }

package/lib/widgets/MarkdownWidget.js

@@ -96,7 +96,7 @@ class MarkdownWidgetComponent extends react_1.default.Component {
     render() {
         const dropdownItems = [];
         if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         // Wrap in a simple widget
         return R("div", { onDoubleClick: this.handleStartEditing }, this.props.onDesignChange != null ? this.renderEditor() : undefined, react_1.default.createElement(DropdownWidgetComponent_1.default, {

package/lib/widgets/TOCWidget.js

@@ -73,8 +73,8 @@ class TOCWidget extends Widget_1.default {
 exports.default = TOCWidget;
 class TOCWidgetComponent extends react_1.default.Component {
     static propTypes = {
-        design: prop_types_1.default.object.isRequired,
-        onDesignChange: prop_types_1.default.func,
+        design: prop_types_1.default.object.isRequired, // See Map Design.md
+        onDesignChange: prop_types_1.default.func, // Called with new design. null/undefined for readonly
         width: prop_types_1.default.number,
         height: prop_types_1.default.number,
         tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
@@ -108,7 +108,7 @@ class TOCWidgetComponent extends react_1.default.Component {
         });
         return R(ModalPopupComponent_1.default, {
             showCloseX: true,
-            header: "Table of Contents Options",
+            header: T `Table of Contents Options`,
             onClose: this.handleEndEditing
         }, editor);
     }
@@ -125,7 +125,7 @@ class TOCWidgetComponent extends react_1.default.Component {
     render() {
         const dropdownItems = [];
         if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         // Wrap in a simple widget
         return R("div", { onDoubleClick: this.handleStartEditing }, this.props.onDesignChange != null ? this.renderEditor() : undefined, R(DropdownWidgetComponent_1.default, {
@@ -138,8 +138,8 @@ class TOCWidgetComponent extends react_1.default.Component {
 // Displays the contents of the widget
 class TOCWidgetViewComponent extends react_1.default.Component {
     static propTypes = {
-        design: prop_types_1.default.object.isRequired,
-        onDesignChange: prop_types_1.default.func,
+        design: prop_types_1.default.object.isRequired, // Design of chart
+        onDesignChange: prop_types_1.default.func, // Called with new design. null/undefined for readonly
         width: prop_types_1.default.number,
         height: prop_types_1.default.number,
         tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
@@ -151,7 +151,6 @@ class TOCWidgetViewComponent extends react_1.default.Component {
         onScrollToTOCEntry: prop_types_1.default.func
     };
     handleEntryClick = (tocEntry) => {
-        debugger;
         return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id);
     };
     renderTOCEntry(tocEntry, index) {
@@ -205,7 +204,7 @@ class TOCWidgetViewComponent extends react_1.default.Component {
         }), 
         // Add placeholder if none and editable
         this.props.onDesignChange && (this.props.tocEntries || []).length === 0
-            ? R("div", { className: "text-muted" }, "Table of Contents will appear here as text blocks with headings are added to the dashboard")
+            ? R("div", { className: "text-muted" }, T `Table of Contents will appear here as text blocks with headings are added to the dashboard`)
             : undefined);
     }
 }
@@ -228,17 +227,17 @@ class TOCWidgetDesignerComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     render() {
-        return R("div", null, R(ui.FormGroup, { label: "Header" }, R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: "None" })), R(ui.FormGroup, { label: "Border" }, R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })), R(ui.FormGroup, { label: "Numbering" }, R(ui.Radio, {
+        return R("div", null, R(ui.FormGroup, { label: T `Header` }, R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: T `None` })), R(ui.FormGroup, { label: T `Border` }, R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })), R(ui.FormGroup, { label: T `Numbering` }, R(ui.Radio, {
             inline: true,
             value: this.props.design.numbering || false,
             radioValue: true,
             onChange: this.update("numbering")
-        }, "On"), R(ui.Radio, {
+        }, T `On`), R(ui.Radio, {
             inline: true,
             value: this.props.design.numbering || false,
             radioValue: false,
             onChange: this.update("numbering")
-        }, "Off")));
+        }, T `Off`)));
     }
 }
 // Allows setting border heaviness
@@ -250,6 +249,6 @@ class BorderComponent extends react_1.default.Component {
     };
     render() {
         const value = this.props.value != null ? this.props.value : this.props.defaultValue;
-        return R("div", null, R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, "None"), R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, "Light"), R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, "Medium"), R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, "Heavy"));
+        return R("div", null, R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, T `None`), R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, T `Light`), R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, T `Medium`), R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, T `Heavy`));
     }
 }

package/lib/widgets/WidgetScopesViewComponent.js

@@ -30,7 +30,7 @@ class WidgetScopesViewComponent extends react_1.default.Component {
         if (lodash_1.default.compact(lodash_1.default.values(scopes)).length === 0) {
             return null;
         }
-        return R("div", { className: "alert alert-info" }, R("span", { className: "fas fa-filter" }), " Filters: ", lodash_1.default.map(lodash_1.default.keys(scopes), (id) => this.renderScope(id, scopes[id])));
+        return R("div", { className: "alert alert-info" }, R("span", { className: "fas fa-filter" }), T ` Filters: `, lodash_1.default.map(lodash_1.default.keys(scopes), (id) => this.renderScope(id, scopes[id])));
     }
 }
 exports.default = WidgetScopesViewComponent;

package/lib/widgets/charts/Chart.js

@@ -23,7 +23,7 @@ class Chart {
     }
     // Label for the edit gear dropdown
     getEditLabel() {
-        return "Edit";
+        return T `Edit`;
     }
     // Creates a design element with specified options
     // options include:

package/lib/widgets/charts/ChartViewComponent.js

@@ -19,11 +19,11 @@ class ChartViewComponent extends react_1.default.Component {
         super(props);
         this.updateSeq = 0;
         this.state = {
-            validDesign: null,
-            data: null,
-            dataLoading: false,
-            dataError: null,
-            cacheExpiry: props.dataSource.getCacheExpiry(),
+            validDesign: null, // last valid design
+            data: null, // data for chart
+            dataLoading: false, // True when loading data
+            dataError: null, // Set when data loading returned error
+            cacheExpiry: props.dataSource.getCacheExpiry(), // Save cache expiry to see if changes
             showErrorDetails: false
         };
     }
@@ -76,17 +76,17 @@ class ChartViewComponent extends react_1.default.Component {
         const errorText = (this.state.dataError.message || this.state.dataError || "") + "";
         const isTimeout = errorText.match(/timeout/) != null;
         return R("div", { style: { marginTop: 20, textAlign: "center" } }, R("div", { className: "text-danger" }, isTimeout ?
-            "This widget has timed out. Placing widgets across console tabs instead of having them all in one dashboard can improve performance."
-            : "There was an error loading data for this widget."), R("div", { className: "mt-3" }, R("button", {
+            T `This widget has timed out. Placing widgets across console tabs instead of having them all in one dashboard can improve performance.`
+            : T `There was an error loading data for this widget.`), R("div", { className: "mt-3" }, R("button", {
             className: "btn btn-secondary btn-sm",
             disabled: this.state.dataLoading,
             onClick: () => {
                 this.updateData();
             }
-        }, R("i", { className: "fas fa-redo" }), " Try again")), R("button", {
+        }, R("i", { className: "fas fa-redo" }), T `Try again`)), R("button", {
             className: "btn btn-link btn-sm mt-2",
             onClick: () => this.setState({ showErrorDetails: !this.state.showErrorDetails })
-        }, this.state.showErrorDetails ? "Hide details" : "Show details"), this.state.showErrorDetails ?
+        }, this.state.showErrorDetails ? T `Hide details` : T `Show details`), this.state.showErrorDetails ?
             R("div", { style: { marginTop: 10, fontSize: 10 } }, `Error: ${this.state.dataError.message || this.state.dataError}`) : null);
     }
     render() {

package/lib/widgets/charts/ChartWidgetComponent.js

@@ -34,11 +34,11 @@ const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-libr
 const ChartViewComponent_1 = __importDefault(require("./ChartViewComponent"));
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 const layoutOptions_1 = require("../../dashboards/layoutOptions");
 // Complete chart widget
 class ChartWidgetComponent extends react_1.default.PureComponent {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -51,7 +51,7 @@ class ChartWidgetComponent extends react_1.default.PureComponent {
         // Get the data
         return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
             if (err) {
-                return alert("Failed to get data: " + err.message);
+                return alert(T `Failed to get data: ${err.message}`);
             }
             // Create data table
             const table = this.props.chart.createDataTable(this.props.design, this.props.schema, this.props.dataSource, data, this.context);
@@ -149,7 +149,7 @@ class ChartWidgetComponent extends react_1.default.PureComponent {
         // Create dropdown items
         const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
         if (!designError) {
-            dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile });
+            dropdownItems.push({ label: T `Export Data`, icon: "save-file", onClick: this.handleSaveCsvFile });
         }
         if (this.props.onDesignChange != null) {
             dropdownItems.unshift({

package/lib/widgets/charts/calendar/CalendarChart.js

@@ -42,15 +42,15 @@ class CalendarChart extends Chart_1.default {
         const axisBuilder = new AxisBuilder_1.default({ schema });
         // Check that has table
         if (!design.table) {
-            return "Missing data source";
+            return T `Missing data source`;
         }
         // Check that has axes
         let error = null;
         if (!design.dateAxis) {
-            error = error || "Missing date";
+            error = error || T `Missing date`;
         }
         if (!design.valueAxis) {
-            error = error || "Missing value";
+            error = error || T `Missing value`;
         }
         error = error || axisBuilder.validateAxis({ axis: design.dateAxis });
         error = error || axisBuilder.validateAxis({ axis: design.valueAxis });
@@ -159,7 +159,7 @@ class CalendarChart extends Chart_1.default {
         return react_1.default.createElement(CalendarChartViewComponent, props);
     }
     createDataTable(design, schema, dataSource, data) {
-        const header = ["Date", "Value"];
+        const header = [T `Date`, T `Value`];
         const rows = lodash_1.default.map(data, (row) => [(0, moment_1.default)(row.date).format("YYYY-MM-DD"), row.value]);
         return [header].concat(rows);
     }