@mwater/visualization 5.3.2 → 5.4.0

package/lib/axes/AxisComponent.d.ts

@@ -2,7 +2,6 @@ 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 AxisColorEditorComponent from "./AxisColorEditorComponent";
 import CategoryMapComponent from "./CategoryMapComponent";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { Axis } from "./Axis";
@@ -53,8 +52,8 @@ export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps
     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> | React.CElement<any, AxisColorEditorComponent>)[] | null;
-    renderExcludedValues(axis: any): (React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<any, CategoryMapComponent>)[] | 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;

package/lib/axes/AxisComponent.js

@@ -84,7 +84,7 @@ class AxisComponent extends AsyncLoadComponent_1.default {
             values.push(axis.expr.value);
         }
         // Get categories (value + label)
-        let categories = axisBuilder.getCategories(axis, values);
+        let categories = axisBuilder.getCategories(axis, values, { locale: this.context });
         // Just "None" and so doesn't count
         if (lodash_1.default.any(categories, (category) => category.value != null)) {
             callback({ categories });
@@ -134,7 +134,7 @@ class AxisComponent extends AsyncLoadComponent_1.default {
             return;
         }
         // Set expression and clear xform
-        return this.props.onChange(this.cleanAxis(lodash_1.default.extend({}, lodash_1.default.omit(this.props.value || {}, ["drawOrder"]), { expr })));
+        this.props.onChange(this.cleanAxis(lodash_1.default.extend({}, lodash_1.default.omit(this.props.value || {}, ["drawOrder"]), { expr })));
     };
     handleFormatChange = (ev) => {
         return this.props.onChange((0, immer_1.default)(this.props.value, (draft) => {
@@ -226,9 +226,9 @@ class AxisComponent extends AsyncLoadComponent_1.default {
             return R("div", null, R(ui.RadioToggleComponent, {
                 value: axis.xform ? axis.xform.type : null,
                 options: [
-                    { value: "bin", label: "Equal Bins" },
-                    { value: "ranges", label: "Custom Ranges" },
-                    { value: "floor", label: "Whole Numbers" }
+                    { value: "bin", label: T `Equal Bins` },
+                    { value: "ranges", label: T `Custom Ranges` },
+                    { value: "floor", label: T `Whole Numbers` }
                 ],
                 onChange: this.handleXformTypeChange
             }), comp);
@@ -240,13 +240,13 @@ class AxisComponent extends AsyncLoadComponent_1.default {
                 return R(ui.RadioToggleComponent, {
                     value: axis.xform ? axis.xform.type : null,
                     options: [
-                        { value: null, label: "Exact Date" },
-                        { value: "year", label: "Year" },
-                        { value: "yearmonth", label: "Year/Month" },
-                        { value: "month", label: "Month" },
-                        { value: "week", label: "Week" },
-                        { value: "yearweek", label: "Year/Week" },
-                        { value: "yearquarter", label: "Year/Quarter" }
+                        { value: null, label: T `Exact Date` },
+                        { value: "year", label: T `Year` },
+                        { value: "yearmonth", label: T `Year/Month` },
+                        { value: "month", label: T `Month` },
+                        { value: "week", label: T `Week` },
+                        { value: "yearweek", label: T `Year/Week` },
+                        { value: "yearquarter", label: T `Year/Quarter` }
                     ],
                     onChange: this.handleXformTypeChange
                 });
@@ -254,13 +254,13 @@ class AxisComponent extends AsyncLoadComponent_1.default {
                 return R(ui.RadioToggleComponent, {
                     value: axis.xform ? axis.xform.type : null,
                     options: [
-                        { value: "date", label: "Date" },
-                        { value: "year", label: "Year" },
-                        { value: "yearmonth", label: "Year/Month" },
-                        { value: "month", label: "Month" },
-                        { value: "week", label: "Week" },
-                        { value: "yearweek", label: "Year/Week" },
-                        { value: "yearquarter", label: "Year/Quarter" }
+                        { value: "date", label: T `Date` },
+                        { value: "year", label: T `Year` },
+                        { value: "yearmonth", label: T `Year/Month` },
+                        { value: "month", label: T `Month` },
+                        { value: "week", label: T `Week` },
+                        { value: "yearweek", label: T `Year/Week` },
+                        { value: "yearquarter", label: T `Year/Quarter` }
                     ],
                     onChange: this.handleXformTypeChange
                 });
@@ -319,7 +319,7 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         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: axis.format != null ? axis.format : (0, valueFormatter_2.getDefaultFormat)(valueType),
             className: "form-select",
             style: { width: "auto", display: "inline-block" },

package/lib/axes/BinsComponent.js

@@ -64,15 +64,15 @@ class BinsComponent extends react_1.default.Component {
         return (this.unmounted = true);
     }
     render() {
-        return R("div", null, R("div", { key: "vals" }, R(LabeledInlineComponent, { key: "min", label: "Min:" }, R(NumberInputComponent_1.default, {
+        return R("div", null, R("div", { key: "vals" }, R(LabeledInlineComponent, { key: "min", label: T `Min:` }, R(NumberInputComponent_1.default, {
             small: true,
             value: this.props.xform.min,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.xform, { min: { $set: v } }))
-        })), " ", R(LabeledInlineComponent, { key: "max", label: "Max:" }, R(NumberInputComponent_1.default, {
+        })), " ", R(LabeledInlineComponent, { key: "max", label: T `Max:` }, R(NumberInputComponent_1.default, {
             small: true,
             value: this.props.xform.max,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.xform, { max: { $set: v } }))
-        })), " ", R(LabeledInlineComponent, { key: "numBins", label: "# of Bins:" }, R(NumberInputComponent_1.default, {
+        })), " ", R(LabeledInlineComponent, { key: "numBins", label: T `# of Bins:` }, R(NumberInputComponent_1.default, {
             small: true,
             value: this.props.xform.numBins,
             decimal: false,
@@ -82,12 +82,12 @@ class BinsComponent extends react_1.default.Component {
                 return R("i", { className: "fa fa-spinner fa-spin" });
             }
             else if (this.props.xform.min == null || this.props.xform.max == null || !this.props.xform.numBins) {
-                return R("span", { className: "text-danger", style: { paddingLeft: 10 } }, "Min and max are required");
+                return R("span", { className: "text-danger", style: { paddingLeft: 10 } }, T `Min and max are required`);
             }
             return null;
         })()), this.props.xform.min != null && this.props.xform.max != null && this.props.xform.numBins ? (react_1.default.createElement("div", { key: "excludes" },
-            react_1.default.createElement(bootstrap_1.Checkbox, { key: "lower", inline: true, value: !this.props.xform.excludeLower, onChange: (value) => this.props.onChange((0, update_object_1.default)(this.props.xform, { excludeLower: { $set: !value } })) }, `Include < ${this.props.xform.min}`),
-            react_1.default.createElement(bootstrap_1.Checkbox, { key: "upper", inline: true, value: !this.props.xform.excludeUpper, onChange: (value) => this.props.onChange((0, update_object_1.default)(this.props.xform, { excludeUpper: { $set: !value } })) }, `Include > ${this.props.xform.max}`))) : undefined);
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "lower", inline: true, value: !this.props.xform.excludeLower, onChange: (value) => this.props.onChange((0, update_object_1.default)(this.props.xform, { excludeLower: { $set: !value } })) }, T `Include < ${this.props.xform.min}`),
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "upper", inline: true, value: !this.props.xform.excludeUpper, onChange: (value) => this.props.onChange((0, update_object_1.default)(this.props.xform, { excludeUpper: { $set: !value } })) }, T `Include > ${this.props.xform.max}`))) : undefined);
     }
 }
 exports.default = BinsComponent;

package/lib/axes/CategoryMapComponent.d.ts

@@ -17,7 +17,8 @@ interface CategoryMapComponentState {
     collapsed: any;
 }
 export default class CategoryMapComponent extends React.Component<CategoryMapComponentProps, CategoryMapComponentState> {
-    constructor(props: any);
+    static contextType: React.Context<string>;
+    constructor(props: CategoryMapComponentProps);
     handleReorder: (map: any) => void;
     handleColorChange: (value: any, color: any) => void;
     handleExcludeChange: (value: any, ev: any) => void;

package/lib/axes/CategoryMapComponent.js

@@ -10,9 +10,11 @@ const update_object_1 = __importDefault(require("update-object"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
 const immer_1 = __importDefault(require("immer"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Category map for an axis. Controls the colorMap values and excludedValues
 // Can be collapsed
 class CategoryMapComponent extends react_1.default.Component {
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -51,7 +53,7 @@ class CategoryMapComponent extends react_1.default.Component {
         return null;
     }
     handleNullLabelChange = (e) => {
-        const name = prompt("Enter label for none value", this.props.axis.nullLabel || "None");
+        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 } }));
         }
@@ -61,7 +63,7 @@ class CategoryMapComponent extends react_1.default.Component {
         if (this.props.axis.categoryLabels) {
             label = this.props.axis.categoryLabels[JSON.stringify(category.value)] || label;
         }
-        const name = prompt("Enter label or blank to reset", label);
+        const name = prompt(T `Enter label or blank to reset`, label);
         if (name != null) {
             if (name) {
                 return this.props.onChange((0, immer_1.default)(this.props.axis, (draft) => {
@@ -93,7 +95,7 @@ class CategoryMapComponent extends react_1.default.Component {
             }, label);
         }
         else {
-            return R("a", { className: "link-plain", onClick: this.handleNullLabelChange, style: { cursor: "pointer" } }, label, R("span", { style: { fontSize: 12, marginLeft: 4 } }, "(click to change label for none value)"));
+            return R("a", { className: "link-plain", onClick: this.handleNullLabelChange, style: { cursor: "pointer" } }, label, R("span", { style: { fontSize: 12, marginLeft: 4 } }, T `(click to change label for none value)`));
         }
     }
     // Category is { value: category value, label: category label }
@@ -154,10 +156,10 @@ class CategoryMapComponent extends react_1.default.Component {
     }
     renderToggle() {
         if (this.state.collapsed) {
-            return R("div", null, R("a", { className: "link-plain", onClick: this.handleToggle }, "Show Values ", R("i", { className: "fa fa-caret-down" })));
+            return R("div", null, R("a", { className: "link-plain", onClick: this.handleToggle }, T `Show Values `, R("i", { className: "fa fa-caret-down" })));
         }
         else {
-            return R("div", null, R("a", { className: "link-plain", onClick: this.handleToggle }, "Hide Values ", R("i", { className: "fa fa-caret-up" })));
+            return R("div", null, R("a", { className: "link-plain", onClick: this.handleToggle }, T `Hide Values `, R("i", { className: "fa fa-caret-up" })));
         }
     }
     render() {

package/lib/axes/ColorPaletteCollectionComponent.js

@@ -119,7 +119,7 @@ function ColorPaletteCollectionComponent(props) {
     }
     const onPaletteSelected = (index) => {
         // Generate color map
-        const scheme = generatePaletteColors(palettes[index], Math.min(numColors, 6));
+        const scheme = generatePaletteColors(palettes[index], numColors);
         const colorMap = lodash_1.default.map(props.categories, (category, i) => ({
             value: category.value,
             color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
@@ -129,7 +129,7 @@ function ColorPaletteCollectionComponent(props) {
     const renderCancel = () => {
         if (props.axis.colorMap) {
             return (react_1.default.createElement("div", null,
-                react_1.default.createElement("a", { className: "link-plain", onClick: props.onCancel, key: "cancel-customize" }, "Cancel")));
+                react_1.default.createElement("a", { className: "link-plain", onClick: props.onCancel, key: "cancel-customize" }, T `Cancel`)));
         }
         return null;
     };
@@ -137,7 +137,7 @@ function ColorPaletteCollectionComponent(props) {
         return (react_1.default.createElement(ColorPaletteComponent, { key: index, index: index, colorSet: generatePaletteColors(palette, 6), onPaletteSelected: onPaletteSelected }));
     }
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement("p", null, "Please select a color scheme"),
+        react_1.default.createElement("p", null, T `Please select a color scheme`),
         palettes.map((palette, index) => renderPalette(palette, index)),
         renderCancel()));
 }

package/lib/axes/RangesComponent.js

@@ -44,7 +44,7 @@ class RangesComponent extends react_1.default.Component {
     };
     render() {
         return R("div", null, R("table", null, this.props.xform.ranges.length > 0
-            ? R("thead", null, R("tr", null, R("th", null, " "), R("th", { key: "min", colSpan: 2, style: { textAlign: "center" } }, "From"), R("th", { key: "and" }, ""), R("th", { key: "max", colSpan: 2, style: { textAlign: "center" } }, "To"), R("th", { key: "label", colSpan: 1, style: { textAlign: "center" } }, "Label"), R("th", { key: "remove" })))
+            ? R("thead", null, R("tr", null, R("th", null, " "), R("th", { key: "min", colSpan: 2, style: { textAlign: "center" } }, T `From`), R("th", { key: "and" }, ""), R("th", { key: "max", colSpan: 2, style: { textAlign: "center" } }, T `To`), R("th", { key: "label", colSpan: 1, style: { textAlign: "center" } }, T `Label`), R("th", { key: "remove" })))
             : undefined, react_1.default.createElement(ReorderableListComponent_1.default, {
             items: this.props.xform.ranges,
             onReorder: this.handleReorder,
@@ -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" }), " 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 += " and ";
+                placeholder += T ` and `;
             }
             if (this.props.range.maxOpen) {
                 placeholder += `< ${this.props.range.maxValue}`;
@@ -99,24 +99,24 @@ class RangeComponent extends react_1.default.Component {
         }
         return this.props.connectDragPreview(this.props.connectDropTarget(R("tr", null, R("td", null, this.props.connectDragSource(R("span", { className: "fa fa-bars" }))), R("td", { key: "minOpen" }, R(expressions_ui_1.LinkComponent, {
             dropdownItems: [
-                { id: "true", name: "greater than" },
-                { id: "false", name: "greater than or equal to" }
+                { id: "true", name: T `greater than` },
+                { id: "false", name: T `greater than or equal to` }
             ],
             onDropdownItemClicked: (id) => this.handleMinOpenChange(id === "true")
-        }, this.props.range.minOpen ? "greater than" : "greater than or equal to")), R("td", { key: "minValue" }, R(NumberInputComponent_1.default, {
+        }, this.props.range.minOpen ? T `greater than` : T `greater than or equal to`)), R("td", { key: "minValue" }, R(NumberInputComponent_1.default, {
             value: this.props.range.minValue ?? undefined,
-            placeholder: "None",
+            placeholder: T `None`,
             small: true,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { minValue: { $set: v } }))
-        })), R("td", { key: "and" }, "\u00A0and\u00A0"), R("td", { key: "maxOpen" }, R(expressions_ui_1.LinkComponent, {
+        })), R("td", { key: "and" }, "\u00A0" + T `and` + "\u00A0"), R("td", { key: "maxOpen" }, R(expressions_ui_1.LinkComponent, {
             dropdownItems: [
-                { id: "true", name: "less than" },
-                { id: "false", name: "less than or equal to" }
+                { id: "true", name: T `less than` },
+                { id: "false", name: T `less than or equal to` }
             ],
             onDropdownItemClicked: (id) => this.handleMaxOpenChange(id === "true")
-        }, this.props.range.maxOpen ? "less than" : "less than or equal to")), R("td", { key: "maxValue" }, R(NumberInputComponent_1.default, {
+        }, this.props.range.maxOpen ? T `less than` : T `less than or equal to`)), R("td", { key: "maxValue" }, R(NumberInputComponent_1.default, {
             value: this.props.range.maxValue ?? undefined,
-            placeholder: "None",
+            placeholder: T `None`,
             small: true,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { maxValue: { $set: v } }))
         })), R("td", { key: "label" }, R("input", {

package/lib/compressJson.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = compressJson;
 const pako_1 = __importDefault(require("pako"));
 /**
  * Gzips and base64 encodes JSON object if larger than 100 bytes
@@ -16,4 +17,3 @@ function compressJson(json) {
         return str;
     }
 }
-exports.default = compressJson;

package/lib/dashboards/DashboardComponent.d.ts

@@ -37,6 +37,8 @@ export interface DashboardComponentProps {
     filters?: JsonQLFilter[];
     /** True to hide title bar and related controls */
     hideTitleBar?: boolean;
+    /** Called when the edit mode changes */
+    onEditModeChange?: (editing: boolean) => void;
 }
 export interface DashboardComponentState {
     undoStack: UndoStack;

package/lib/dashboards/DashboardComponent.js

@@ -59,6 +59,9 @@ class DashboardComponent extends react_1.default.Component {
             hideQuickfilters: layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
             refreshKey: 1
         };
+        if (props.onEditModeChange) {
+            props.onEditModeChange(this.state.editing);
+        }
     }
     // Get the values of the quick filters
     getQuickfilterValues = () => {
@@ -106,7 +109,11 @@ class DashboardComponent extends react_1.default.Component {
         this.settings.show(this.props.design);
     };
     handleToggleEditing = () => {
-        this.setState({ editing: !this.state.editing });
+        const editing = !this.state.editing;
+        this.setState({ editing });
+        if (this.props.onEditModeChange) {
+            this.props.onEditModeChange(editing);
+        }
     };
     handleOpenLayoutOptions = () => {
         this.setState({ layoutOptionsOpen: true });
@@ -139,10 +146,10 @@ class DashboardComponent extends react_1.default.Component {
             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 ? " Editing" : " 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" }, " 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
@@ -151,22 +158,22 @@ 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" }, " 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" }, " 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" }, " 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" }, " 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" }, " Show Quickfilters"))
+            : 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" }, " 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() {

package/lib/dashboards/DashboardUtils.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCompiledFilters = exports.getFilterableTables = void 0;
+exports.getFilterableTables = getFilterableTables;
+exports.getCompiledFilters = getCompiledFilters;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
@@ -23,7 +24,6 @@ function getFilterableTables(design, schema) {
     filterableTables = lodash_1.default.filter(lodash_1.default.uniq(filterableTables), (table) => schema.getTable(table));
     return filterableTables;
 }
-exports.getFilterableTables = getFilterableTables;
 /** Get filters from props filters combined with dashboard filters */
 function getCompiledFilters(design, schema, filterableTables) {
     let expr, jsonql, table;
@@ -66,4 +66,3 @@ function getCompiledFilters(design, schema, filterableTables) {
     }
     return compiledFilters;
 }
-exports.getCompiledFilters = getCompiledFilters;

package/lib/dashboards/DashboardViewComponent.js

@@ -39,7 +39,7 @@ const layoutOptions_1 = require("./layoutOptions");
 const WidgetComponent_1 = require("./WidgetComponent");
 const vectorMaps_1 = require("../maps/vectorMaps");
 const WidgetDataSourcePrioritizer_1 = require("./WidgetDataSourcePrioritizer");
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /**
  * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
  * Handles scoping and stores the state of scope
@@ -99,7 +99,7 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
             setForceUpdate(forceUpdate + 1);
         }
         catch (err) {
-            return alert("Clipboard not available");
+            return alert(T `Clipboard not available`);
         }
     };
     const getClipboardContents = () => {
@@ -168,7 +168,7 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
     const clipboardContents = getClipboardContents();
     // Check if can't paste because of missing table
     if (clipboardContents && !lodash_1.default.all(clipboardContents.tables, (table) => props.schema.getTable(table))) {
-        cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item.";
+        cantPasteMessage = T `Dashboard is missing one or more data sources needed for the copied item.`;
     }
     const renderWidget = (options) => {
         const widgetDataSource = widgetDataSourcePrioritizer.getWidgetDataSource(options.type, options.id, options.priority ?? 0);
@@ -195,7 +195,7 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
         style.overflowX = "auto";
     }
     // Render widget container
-    return (react_1.default.createElement(contexts_1.LocaleContext.Provider, { value: props.design.locale ?? "en" },
+    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: props.design.locale ?? "en" },
         react_1.default.createElement("div", { style: style },
             !props.hideScopes ? renderScopes() : undefined,
             layoutManager.renderLayout({

package/lib/dashboards/FontStyleEditor.js

@@ -48,7 +48,7 @@ const FontStyleEditor = ({ value, onChange }) => {
                     fontSize: `${value.size}px`,
                     fontWeight: value.weight,
                     color: value.color
-                } }, "Sample"),
+                } }, T `Sample`),
             react_1.default.createElement("div", { style: { fontSize: '10px', color: '#888', marginTop: '2px' } },
                 value.family,
                 ", ",
@@ -92,7 +92,7 @@ const FontEditorModal = ({ initialValue, onSave, onCancel }) => {
     else {
         fontWeightOptions.push("400", "700");
     }
-    return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Font", onAction: () => onSave(currentValue), onCancel: onCancel },
+    return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: T `Edit Font`, onAction: () => onSave(currentValue), onCancel: onCancel },
         react_1.default.createElement("div", { style: {
                 border: '1px solid #ccc',
                 padding: '10px',
@@ -103,14 +103,14 @@ const FontEditorModal = ({ initialValue, onSave, onCancel }) => {
                     marginBottom: '10px',
                     fontSize: '14px',
                     fontWeight: 'bold'
-                } }, "Sample Text:"),
+                } }, T `Sample Text:`),
             react_1.default.createElement("div", { style: {
                     fontFamily: (0, layoutOptions_1.expandFontFamily)(currentValue.family),
                     fontSize: `${currentValue.size}px`,
                     fontWeight: currentValue.weight,
                     color: currentValue.color
-                } }, "The quick brown fox jumps over the lazy dog.")),
-        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Family" },
+                } }, T `The quick brown fox jumps over the lazy dog.`)),
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Font Family` },
             react_1.default.createElement(react_select_1.default, { value: { value: currentValue.family, label: currentValue.family }, onChange: (option) => handleChange('family', option?.value || ''), options: [
                     { value: 'Helvetica Neue', label: 'Helvetica Neue' },
                     { value: 'Georgia', label: 'Georgia' },
@@ -121,10 +121,10 @@ const FontEditorModal = ({ initialValue, onSave, onCancel }) => {
                     { value: 'Merriweather', label: 'Merriweather' },
                     { value: 'Roboto', label: 'Roboto' },
                 ], formatOptionLabel: (option) => (react_1.default.createElement("span", { style: { fontFamily: (0, layoutOptions_1.expandFontFamily)(option.value) } }, option.label)), isClearable: false, menuPortalTarget: document.body, styles: { menuPortal: (style) => ({ ...style, zIndex: 2000 }) } })),
-        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Size:", horizontal: true },
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Font Size:`, horizontal: true },
             react_1.default.createElement(bootstrap_1.Select, { value: currentValue.size, onChange: (value) => handleChange('size', value || 12), options: fontSizeOptions })),
-        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Weight:", horizontal: true },
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Font Weight:`, horizontal: true },
             react_1.default.createElement(bootstrap_1.Select, { value: currentValue.weight, onChange: (value) => handleChange('weight', value), options: fontWeightOptions.map(weight => ({ value: weight, label: weight })) })),
-        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Color:", horizontal: true },
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Font Color:`, horizontal: true },
             react_1.default.createElement(ColorComponent_1.default, { color: currentValue.color, onChange: (value) => handleChange('color', value), disableReset: true }))));
 };