@mwater/visualization 5.3.2 → 5.4.0

package/lib/widgets/charts/pivot/PivotChartLayoutComponent.js

@@ -215,9 +215,9 @@ vertical-align: top;
 .pivot-chart-table .br2 { border-right: solid 1px #ccc }
 .pivot-chart-table .br3 { border-right: solid 1px #888 }\
 `), this.props.layout.tooManyRows
-            ? R("div", { className: "text-warning", style: { fontSize: 12 } }, R("i", { className: "fa fa-exclamation-circle" }), " Warning: Too many rows in table to display")
+            ? R("div", { className: "text-warning", style: { fontSize: 12 } }, R("i", { className: "fa fa-exclamation-circle" }), T `Warning: Too many rows in table to display`)
             : undefined, this.props.layout.tooManyColumns
-            ? R("div", { className: "text-warning", style: { fontSize: 12 } }, R("i", { className: "fa fa-exclamation-circle" }), " Warning: Too many columns in table to display")
+            ? R("div", { className: "text-warning", style: { fontSize: 12 } }, R("i", { className: "fa fa-exclamation-circle" }), T `Warning: Too many columns in table to display`)
             : undefined, R("div", { style: { position: "relative" } }, R("table", { className: "pivot-chart-table" }, R("tbody", null, lodash_1.default.map(this.props.layout.rows, (row, rowIndex) => {
             return this.renderRow(row, rowIndex);
         }))), this.renderHoverControls()));
@@ -250,10 +250,10 @@ class LayoutCellComponent extends react_1.default.Component {
         if (!cell.section) {
             return null;
         }
-        return R("span", { style: { fontSize: "90%" } }, R("a", { className: "link-plain", onClick: this.props.onEditSection }, "Edit"), cell.summarize
+        return R("span", { style: { fontSize: "90%" } }, R("a", { className: "link-plain", onClick: this.props.onEditSection }, T `Edit`), cell.summarize
             ? [
-                R("span", { className: "text-muted" }, " / "),
-                R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, "Summarize")
+                R("span", { className: "text-muted" }, T ` / `),
+                R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T `Summarize`)
             ]
             : undefined);
     }

package/lib/widgets/charts/pivot/PivotChartQueryBuilder.d.ts

@@ -39,7 +39,7 @@ export default class PivotChartQueryBuilder {
      *  ...
      *  bc: background color of the cell (if present)
      *  bcc0: background color condition 0 of the cell (if present)
-     *  bcc1: background color condition 1 of the cell (if present)
+     *  bcc1: inner row segment value (if present)
      *  ...
      * @param design - Design of the chart
      * @param rowPath - Row path

package/lib/widgets/charts/pivot/PivotChartQueryBuilder.js

@@ -59,7 +59,6 @@ class PivotChartQueryBuilder {
     // extraFilters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. }
     // Queries are indexed by intersection id, as one query is made for each intersection
     createQueries(design, extraFilters) {
-        const exprCompiler = new expressions_1.ExprCompiler(this.schema);
         const queries = {};
         // For each intersection
         for (let rowPath of PivotChartUtils.getSegmentPaths(design.rows)) {
@@ -93,7 +92,7 @@ class PivotChartQueryBuilder {
      *  ...
      *  bc: background color of the cell (if present)
      *  bcc0: background color condition 0 of the cell (if present)
-     *  bcc1: background color condition 1 of the cell (if present)
+     *  bcc1: inner row segment value (if present)
      *  ...
      * @param design - Design of the chart
      * @param rowPath - Row path
@@ -152,7 +151,7 @@ class PivotChartQueryBuilder {
                 alias: `r${i}`
             });
             query.groupBy.push(i + 1);
-            if (rowSegment.filter) {
+            if (rowSegment.filter && !intersection.tableOverride) {
                 filters.push(rowSegment.filter);
             }
         }
@@ -164,7 +163,7 @@ class PivotChartQueryBuilder {
                 alias: `c${i}`
             });
             query.groupBy.push(i + 1 + rowPath.length);
-            if (columnSegment.filter) {
+            if (columnSegment.filter && !intersection.tableOverride) {
                 filters.push(columnSegment.filter);
             }
         }
@@ -199,9 +198,9 @@ class PivotChartQueryBuilder {
         if (lodash_1.default.all(query.selects, (select) => select.expr == null)) {
             return null;
         }
-        // Add where
         let whereClauses = [];
-        if (design.filter) {
+        // Add overall where if no table override. If table override, would be for the wrong table
+        if (design.filter && !intersection.tableOverride) {
             whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
         }
         // Add other filters

package/lib/widgets/charts/pivot/PivotChartUtils.js

@@ -3,7 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addChildSegment = exports.insertAfterSegment = exports.insertBeforeSegment = exports.removeSegment = exports.replaceSegment = exports.summarizeSegment = exports.canSummarizeSegment = exports.findSegment = exports.getIntersectionId = exports.getAllSegments = exports.getSegmentPaths = void 0;
+exports.getSegmentPaths = getSegmentPaths;
+exports.getAllSegments = getAllSegments;
+exports.getIntersectionId = getIntersectionId;
+exports.findSegment = findSegment;
+exports.canSummarizeSegment = canSummarizeSegment;
+exports.summarizeSegment = summarizeSegment;
+exports.replaceSegment = replaceSegment;
+exports.removeSegment = removeSegment;
+exports.insertBeforeSegment = insertBeforeSegment;
+exports.insertAfterSegment = insertAfterSegment;
+exports.addChildSegment = addChildSegment;
 const lodash_1 = __importDefault(require("lodash"));
 const uuid_1 = __importDefault(require("uuid"));
 // Misc utils for working with pivot charts
@@ -21,7 +31,6 @@ function getSegmentPaths(segments) {
     }
     return paths;
 }
-exports.getSegmentPaths = getSegmentPaths;
 // Get all paths through a set of segments (e.g. if a contains b, c, then [[a,b], [a,c]])
 function getAllSegments(segments) {
     let allSegments = [];
@@ -34,16 +43,13 @@ function getAllSegments(segments) {
     }
     return allSegments;
 }
-exports.getAllSegments = getAllSegments;
 // Gets the id of the intersection of the two paths
 function getIntersectionId(rowPath, columnPath) {
     return `${lodash_1.default.pluck(rowPath, "id").join(",")}:${lodash_1.default.pluck(columnPath, "id").join(",")}`;
 }
-exports.getIntersectionId = getIntersectionId;
 function findSegment(segments, id) {
     return lodash_1.default.findWhere(getAllSegments(segments), { id });
 }
-exports.findSegment = findSegment;
 // Determine if can summarize segment (if segment before has a value axis and has no children)
 function canSummarizeSegment(segments, id) {
     const prevSegment = findPreviousSegment(segments, id);
@@ -52,7 +58,6 @@ function canSummarizeSegment(segments, id) {
     }
     return false;
 }
-exports.canSummarizeSegment = canSummarizeSegment;
 // Finds the segment before one with id
 function findPreviousSegment(segments, id) {
     // Find in list (shallow)
@@ -129,7 +134,6 @@ function summarizeSegment(design, id, label) {
     }
     return design;
 }
-exports.summarizeSegment = summarizeSegment;
 // Recursively map segments, flattening and compacting
 function mapSegments(segments, mapFunc) {
     let segments2 = lodash_1.default.map(segments, mapFunc);
@@ -152,7 +156,6 @@ function replaceSegment(segments, replacement) {
         return segment;
     });
 }
-exports.replaceSegment = replaceSegment;
 // Remove segment
 function removeSegment(segments, id) {
     return mapSegments(segments, function (segment) {
@@ -162,7 +165,6 @@ function removeSegment(segments, id) {
         return segment;
     });
 }
-exports.removeSegment = removeSegment;
 // Inserts before
 function insertBeforeSegment(segments, id) {
     return mapSegments(segments, function (segment) {
@@ -172,7 +174,6 @@ function insertBeforeSegment(segments, id) {
         return segment;
     });
 }
-exports.insertBeforeSegment = insertBeforeSegment;
 // Inserts after
 function insertAfterSegment(segments, id) {
     return mapSegments(segments, function (segment) {
@@ -182,7 +183,6 @@ function insertAfterSegment(segments, id) {
         return segment;
     });
 }
-exports.insertAfterSegment = insertAfterSegment;
 // Adds child
 function addChildSegment(segments, id) {
     return mapSegments(segments, function (segment) {
@@ -192,4 +192,3 @@ function addChildSegment(segments, id) {
         return segment;
     });
 }
-exports.addChildSegment = addChildSegment;

package/lib/widgets/charts/pivot/PivotChartViewComponent.js

@@ -35,15 +35,15 @@ const PivotChartLayoutComponent_1 = __importDefault(require("./PivotChartLayoutC
 const PivotChartLayoutBuilder_1 = __importDefault(require("./PivotChartLayoutBuilder"));
 const SegmentDesignerComponent_1 = __importDefault(require("./SegmentDesignerComponent"));
 const IntersectionDesignerComponent_1 = __importDefault(require("./IntersectionDesignerComponent"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Displays a pivot chart
 class PivotChartViewComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
-            editSegment: null,
-            editIntersectionId: null,
+            editSegment: null, // Segment being edited
+            editIntersectionId: null, // id of intersection being edited
             editIntersection: null // value of intersection being edited
         };
     }
@@ -123,7 +123,7 @@ class PivotChartViewComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     handleSummarizeSegment = (segmentId) => {
-        const design = PivotChartUtils.summarizeSegment(this.props.design, segmentId, "Summary");
+        const design = PivotChartUtils.summarizeSegment(this.props.design, segmentId, T `Summary`);
         return this.props.onDesignChange(design);
     };
     renderHeader() {
@@ -139,16 +139,16 @@ class PivotChartViewComponent extends react_1.default.Component {
             return null;
         }
         const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
-            ? "row"
-            : "column";
-        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: `Edit ${segmentType}`, onAction: this.handleSaveEditSegment, onCancel: this.handleCancelEditSegment, size: "large" },
+            ? T `row`
+            : T `column`;
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: T `Edit ${segmentType}`, onAction: this.handleSaveEditSegment, onCancel: this.handleCancelEditSegment, size: "large" },
             react_1.default.createElement(SegmentDesignerComponent_1.default, { segment: this.state.editSegment, table: this.props.design.table, schema: this.props.schema, dataSource: this.props.dataSource, segmentType: segmentType, onChange: (segment) => this.setState({ editSegment: segment }), filters: this.props.filters })));
     }
     renderEditIntersectionModal() {
         if (!this.state.editIntersectionId) {
             return null;
         }
-        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Value", onAction: this.handleSaveEditIntersection, onCancel: this.handleCancelEditIntersection, size: "large" },
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: T `Edit Value`, onAction: this.handleSaveEditIntersection, onCancel: this.handleCancelEditIntersection, size: "large" },
             react_1.default.createElement(IntersectionDesignerComponent_1.default, { design: this.props.design, intersectionId: this.state.editIntersectionId, intersection: this.state.editIntersection, table: this.props.design.table, schema: this.props.schema, dataSource: this.props.dataSource, onChange: (intersection) => this.setState({ editIntersection: intersection }), filters: this.props.filters })));
     }
     render() {

package/lib/widgets/charts/pivot/SegmentDesignerComponent.d.ts

@@ -29,64 +29,64 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
     handleOrderDirChange: (orderDir: any) => any;
     renderMode(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
     }, ui.FormGroup>;
     renderLabel(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
     }, ui.FormGroup>;
     renderValueAxis(): React.JSX.Element;
     renderFilter(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
     }, ui.FormGroup>;
     renderStyling(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
     }, ui.FormGroup>;
     renderBorders(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
     }, ui.FormGroup>;
     renderOrderExpr(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
     }, ui.FormGroup>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }

package/lib/widgets/charts/pivot/SegmentDesignerComponent.js

@@ -80,18 +80,18 @@ class SegmentDesignerComponent extends react_1.default.Component {
     renderMode() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: "Type"
+            label: T `Type`
         }, react_1.default.createElement(ui.Radio, { key: "single", value: this.state.mode, radioValue: "single", onChange: this.handleMode },
-            `Single ${this.props.segmentType}`,
-            react_1.default.createElement("span", { className: "text-muted" }, ` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`)), react_1.default.createElement(ui.Radio, { key: "multiple", value: this.state.mode, radioValue: "multiple", onChange: this.handleMode },
-            `Multiple ${this.props.segmentType}s`,
-            react_1.default.createElement("span", { className: "text-muted" }, ` - disaggregate data by a field`)));
+            T `Single ${this.props.segmentType}`,
+            react_1.default.createElement("span", { className: "text-muted" }, T ` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`)), react_1.default.createElement(ui.Radio, { key: "multiple", value: this.state.mode, radioValue: "multiple", onChange: this.handleMode },
+            T `Multiple ${this.props.segmentType}s`,
+            react_1.default.createElement("span", { className: "text-muted" }, T ` - disaggregate data by a field`)));
     }
     renderLabel() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: "Label",
-            help: this.state.mode === "multiple" ? `Optional label for the ${this.props.segmentType}s` : undefined
+            label: T `Label`,
+            help: this.state.mode === "multiple" ? T `Optional label for the ${this.props.segmentType}s` : undefined
         }, R("input", {
             ref: (elem) => {
                 this.labelElem = elem;
@@ -107,7 +107,7 @@ class SegmentDesignerComponent extends react_1.default.Component {
         const axisBuilder = new __1.AxisBuilder({ schema: this.props.schema });
         const axisType = axisBuilder.getAxisType(this.props.segment.valueAxis);
         const allowValueAxisOnlyValuesPresent = axisType == "enum" || axisType == "enumset" || axisType == "date";
-        return react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Field", help: "Field to disaggregate data by" },
+        return react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Field`, help: T `Field to disaggregate data by` },
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
                 R(AxisComponent_1.default, {
                     schema: this.props.schema,
@@ -123,15 +123,17 @@ class SegmentDesignerComponent extends react_1.default.Component {
                 }),
                 allowValueAxisOnlyValuesPresent ?
                     react_1.default.createElement(ui.Checkbox, { value: this.props.segment.valueAxisOnlyValuesPresent, onChange: this.handleValueAxisOnlyValuesPresentChange },
-                        "Only show values actually present\u00A0",
-                        react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, "Limits values to those that are present in the data, as opposed to all choices or all dates within range"))
+                        T `Only show values actually present`,
+                        "\u00A0",
+                        react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, T `Limits values to those that are present in the data, as opposed
+              to all choices or all dates within range`))
                     : null));
     }
     renderFilter() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"],
-            hint: `Filters all data associated with this ${this.props.segmentType}`
+            label: [R(ui.Icon, { id: "glyphicon-filter" }), T ` Filters`],
+            hint: T `Filters all data associated with this ${this.props.segmentType}`
         }, R(expressions_ui_2.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -143,15 +145,15 @@ class SegmentDesignerComponent extends react_1.default.Component {
     renderStyling() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: "Styling"
+            label: T `Styling`
         }, react_1.default.createElement("div", null,
-            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: this.props.segment.bold === true, onChange: (value) => this.update({ bold: value }) }, "Bold"),
-            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: this.props.segment.italic === true, onChange: (value) => this.update({ italic: value }) }, "Italic"),
+            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: this.props.segment.bold === true, onChange: (value) => this.update({ bold: value }) }, T `Bold`),
+            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: this.props.segment.italic === true, onChange: (value) => this.update({ italic: value }) }, T `Italic`),
             this.props.segment.valueAxis && this.props.segment.label ?
-                react_1.default.createElement(ui.Checkbox, { key: "valueLabelBold", inline: true, value: this.props.segment.valueLabelBold === true, onChange: (value) => this.update({ valueLabelBold: value }) }, "Header Bold")
+                react_1.default.createElement(ui.Checkbox, { key: "valueLabelBold", inline: true, value: this.props.segment.valueLabelBold === true, onChange: (value) => this.update({ valueLabelBold: value }) }, T `Header Bold`)
                 : undefined,
             this.props.segment.valueAxis && this.props.segment.label
-                ? R("div", { style: { paddingTop: 5 } }, "Shade filler cells: ", R(ColorComponent_1.default, {
+                ? R("div", { style: { paddingTop: 5 } }, T `Shade filler cells: `, R(ColorComponent_1.default, {
                     color: this.props.segment.fillerColor,
                     onChange: (color) => this.update({ fillerColor: color })
                 }))
@@ -160,16 +162,16 @@ class SegmentDesignerComponent extends react_1.default.Component {
     renderBorders() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: "Borders"
-        }, R("div", { key: "before" }, this.props.segmentType === "row" ? "Top: " : "Left: "), R(BorderComponent, {
+            label: T `Borders`
+        }, R("div", { key: "before" }, this.props.segmentType === "row" ? T `Top: ` : T `Left: `), R(BorderComponent, {
             value: this.props.segment.borderBefore,
             defaultValue: 2,
             onChange: (value) => this.update({ borderBefore: value })
-        }), R("div", { key: "within" }, "Within: "), R(BorderComponent, {
+        }), R("div", { key: "within" }, T `Within: `), R(BorderComponent, {
             value: this.props.segment.borderWithin,
             defaultValue: 1,
             onChange: (value) => this.update({ borderWithin: value })
-        }), R("div", { key: "after" }, this.props.segmentType === "row" ? "Bottom: " : "Right: "), R(BorderComponent, {
+        }), R("div", { key: "after" }, this.props.segmentType === "row" ? T `Bottom: ` : T `Right: `), R(BorderComponent, {
             value: this.props.segment.borderAfter,
             defaultValue: 2,
             onChange: (value) => this.update({ borderAfter: value })
@@ -178,8 +180,8 @@ class SegmentDesignerComponent extends react_1.default.Component {
     renderOrderExpr() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " Sort"],
-            hint: `Sorts the display of this ${this.props.segmentType}`
+            label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), T ` Sort`],
+            hint: T `Sorts the display of this ${this.props.segmentType}`
         }, R(expressions_ui_1.ExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -194,12 +196,12 @@ class SegmentDesignerComponent extends react_1.default.Component {
                 radioValue: "asc",
                 onChange: this.handleOrderDirChange,
                 inline: true
-            }, "Ascending"), R(ui.Radio, {
+            }, T `Ascending`), R(ui.Radio, {
                 value: this.props.segment.orderDir || "asc",
                 radioValue: "desc",
                 onChange: this.handleOrderDirChange,
                 inline: true
-            }, "Descending"))
+            }, T `Descending`))
             : undefined);
     }
     render() {
@@ -211,6 +213,6 @@ exports.default = SegmentDesignerComponent;
 class BorderComponent extends react_1.default.Component {
     render() {
         const value = this.props.value != null ? this.props.value : this.props.defaultValue;
-        return R("span", null, react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 0, onChange: () => this.props.onChange(0) }, "None"), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 1, onChange: () => this.props.onChange(1) }, "Light"), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 2, onChange: () => this.props.onChange(2) }, "Medium"), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 3, onChange: () => this.props.onChange(3) }, "Heavy"));
+        return R("span", null, react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 0, onChange: () => this.props.onChange(0) }, T `None`), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 1, onChange: () => this.props.onChange(1) }, T `Light`), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 2, onChange: () => this.props.onChange(2) }, T `Medium`), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 3, onChange: () => this.props.onChange(3) }, T `Heavy`));
     }
 }

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

@@ -37,7 +37,7 @@ class OrderingsComponent extends react_1.default.Component {
                 onOrderingChange: this.handleOrderingChange.bind(null, i),
                 onOrderingRemove: this.handleOrderingRemove.bind(null, i)
             });
-        }), R("button", { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" }, R("span", { className: "fas fa-plus" }), " Add Ordering"));
+        }), R("button", { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" }, R("span", { className: "fas fa-plus" }), T ` Add Ordering`));
     }
 }
 exports.default = OrderingsComponent;
@@ -61,6 +61,6 @@ class OrderingComponent extends react_1.default.Component {
             aggrStatuses: ["individual", "aggregate"],
             value: this.props.ordering.axis?.expr,
             onChange: this.handleExprChange
-        }), R("div", null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: this.props.ordering.direction === "desc", onChange: this.handleDirectionChange }, "Reverse")));
+        }), R("div", null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: this.props.ordering.direction === "desc", onChange: this.handleDirectionChange }, T `Reverse`)));
     }
 }

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

@@ -72,19 +72,19 @@ class TableChart 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`;
         }
         let error = null;
         for (let column of design.columns) {
             // Check that has textAxis
             if (!column.textAxis) {
-                error = error || "Missing text";
+                error = error || T `Missing text`;
             }
             error = error || axisBuilder.validateAxis({ axis: column.textAxis });
         }
         for (let ordering of design.orderings) {
             if (!ordering.axis) {
-                error = error || "Missing order expression";
+                error = error || T `Missing order expression`;
             }
             error = error || axisBuilder.validateAxis({ axis: ordering.axis });
         }

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

@@ -41,7 +41,7 @@ const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../../../valueFormatter");
 const valueFormatter_2 = require("../../../valueFormatter");
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_4 = require("@mwater/expressions-ui");
 class TableChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
     updateDesign(changes) {
@@ -79,7 +79,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ columns });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_3.TableSelectComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_3.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,
@@ -88,12 +88,12 @@ class TableChartDesignerComponent extends react_1.default.Component {
         }));
     }
     renderTitle() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Title"), R("input", {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Title`), R("input", {
             type: "text",
             className: "form-control form-control-sm",
             value: this.props.design.titleText,
             onChange: this.handleTitleTextChange,
-            placeholder: "Untitled"
+            placeholder: T `Untitled`
         }));
     }
     renderColumn = (column, index, connectDragSource, connectDragPreview, connectDropTarget) => {
@@ -124,7 +124,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
             onReorder: this.handleReorder,
             renderItem: this.renderColumn,
             getItemId: (item) => item.id
-        }), R("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn }, R("span", { className: "fas fa-plus" }), " Add Column"));
+        }), R("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn }, R("span", { className: "fas fa-plus" }), " ", T `Add Column`));
     }
     // return R 'div', className: "form-group",
     //   _.map(@props.design.columns, (column, i) => @renderColumn(i))
@@ -134,7 +134,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", "Ordering"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(OrderingsComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", T `Ordering`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(OrderingsComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             orderings: this.props.design.orderings,
@@ -147,7 +147,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_2.FilterExprComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_2.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,
@@ -160,7 +160,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Maximum Number of Rows (up to 1000)"), R("div", { style: { marginLeft: 8 } }, R(ui.NumberInput, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Maximum Number of Rows (up to 1000)`), R("div", { style: { marginLeft: 8 } }, R(ui.NumberInput, {
             value: this.props.design.limit,
             onChange: this.handleLimitChange,
             decimal: false,
@@ -173,7 +173,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
 }
 exports.default = TableChartDesignerComponent;
 class TableChartColumnDesignerComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_4.LocaleContext;
     // Updates column with the specified changes
     updateColumn(changes) {
         const column = lodash_1.default.extend({}, this.props.design.columns[this.props.index], changes);
@@ -203,7 +203,7 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
     }
     renderExpr() {
         const column = this.props.design.columns[this.props.index];
-        const title = "Value";
+        const title = T `Value`;
         return R("div", null, R("label", { className: "text-muted" }, title), ": ", react_1.default.createElement(expressions_ui_1.ExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -225,7 +225,7 @@ class TableChartColumnDesignerComponent 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: column.format != null ? column.format : (0, valueFormatter_2.getDefaultFormat)(exprType),
             className: "form-select",
             style: { width: "auto", display: "inline-block" },
@@ -236,7 +236,7 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
         const column = this.props.design.columns[this.props.index];
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
         const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context) : "";
-        return R("div", null, R("label", { className: "text-muted" }, "Header"), ": ", R("input", {
+        return R("div", null, R("label", { className: "text-muted" }, T `Header`), ": ", R("input", {
             type: "text",
             className: "form-control form-control-sm",
             style: { display: "inline-block", width: "15em" },
@@ -252,12 +252,12 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
         if (!exprType || exprType !== 'number') {
             return null;
         }
-        return R('div', null, R(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, "Summarize"), column.summarize ?
-            R('div', null, R("label", { className: "text-muted" }, "Summary Type"), ": ", R(ui.Select, {
+        return R('div', null, R(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, T `Summarize`), column.summarize ?
+            R('div', null, R("label", { className: "text-muted" }, T `Summary Type`), ": ", R(ui.Select, {
                 inline: true,
                 value: column.summaryType,
                 onChange: (summaryType) => this.updateColumn({ summaryType }),
-                options: [{ value: 'avg', label: 'Average' }, { value: 'sum', label: 'Sum' }, { value: 'min', label: 'Minimum' }, { value: 'max', label: 'Maximum' }]
+                options: [{ value: 'avg', label: T `Average` }, { value: 'sum', label: T `Sum` }, { value: 'min', label: T `Minimum` }, { value: 'max', label: T `Maximum` }]
             })) : undefined);
     }
     renderBackgroundColorAxis() {
@@ -265,7 +265,7 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
         if (!column.textAxis)
             return null;
         return R(ui.CollapsibleSection, {
-            label: "Background color by data",
+            label: T `Background color by data`,
             labelMuted: true
         }, R(AxisComponent_1.default, {
             schema: this.props.schema,
@@ -286,6 +286,6 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
             fontSize: 12,
             height: 20
         };
-        return R("div", null, this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })), this.renderRemove(), R("label", null, `Column ${this.props.index + 1}`), R("div", { style: { marginLeft: 5 } }, this.renderExpr(), this.renderFormat(), this.renderHeader(), this.renderSummarize(), this.renderBackgroundColorAxis()));
+        return R("div", null, this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })), this.renderRemove(), R("label", null, T `Column ${this.props.index + 1}`), R("div", { style: { marginLeft: 5 } }, this.renderExpr(), this.renderFormat(), this.renderHeader(), this.renderSummarize(), this.renderBackgroundColorAxis()));
     }
 }