@mwater/visualization 5.4.1 → 5.4.3

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

@@ -92,7 +92,9 @@ class CalendarChartViewComponent extends react_1.default.Component {
         }
         const scopeData = {
             name: this.axisBuilder.summarizeAxis(this.props.design.dateAxis, this.context) +
-                T ` is ` +
+                " " +
+                T `is` +
+                " " +
                 this.axisBuilder.formatValue(this.props.design.dateAxis, data, this.context),
             filter: {
                 jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis, data),

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.d.ts

@@ -31,4 +31,5 @@ export default class ImageMosaicChart extends Chart {
     createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): never[];
     getFilterableTables(design: any, schema: Schema): any[];
     getPlaceholderIcon(): string;
+    translateDesign(design: ImageMosaicChartDesign, translate: (input: string) => string): ImageMosaicChartDesign;
 }

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.js

@@ -178,5 +178,13 @@ class ImageMosaicChart extends Chart_1.default {
     getPlaceholderIcon() {
         return "fa-th";
     }
+    translateDesign(design, translate) {
+        return (0, immer_1.default)(design, draft => {
+            // Translate title text
+            if (draft.titleText) {
+                draft.titleText = translate(draft.titleText);
+            }
+        });
+    }
 }
 exports.default = ImageMosaicChart;

package/lib/widgets/charts/layered/LayeredChart.d.ts

@@ -20,4 +20,6 @@ export default class LayeredChart extends Chart {
     createDataTable(design: LayeredChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any[][];
     getFilterableTables(design: LayeredChartDesign, schema: Schema): string[];
     getPlaceholderIcon(): string;
+    /** Translates the design */
+    translateDesign(design: LayeredChartDesign, translate: (input: string) => string): LayeredChartDesign;
 }

package/lib/widgets/charts/layered/LayeredChart.js

@@ -40,7 +40,7 @@ const LayeredChartUtils = __importStar(require("./LayeredChartUtils"));
 const TextWidget_1 = __importDefault(require("../../text/TextWidget"));
 const LayeredChartViewComponent_1 = __importDefault(require("./LayeredChartViewComponent"));
 const LayeredChartDesignerComponent_1 = __importDefault(require("./LayeredChartDesignerComponent"));
-// See LayeredChart Design.md for the design
+const ExprItemsTranslator_1 = require("../../../richtext/ExprItemsTranslator");
 class LayeredChart extends Chart_1.default {
     cleanDesign(design, schema) {
         const exprCleaner = new expressions_1.ExprCleaner(schema);
@@ -126,7 +126,7 @@ class LayeredChart extends Chart_1.default {
             if (!layer.axes.y) {
                 return T `Missing Y Axis`;
             }
-            if (!layer.axes.x && compiler.isXAxisRequired(design, layerId)) {
+            if (!layer.axes.x && compiler.isXAxisRequired(design)) {
                 return T `Missing X Axis`;
             }
             if (!layer.axes.color && compiler.isColorAxisRequired(design, layerId)) {
@@ -222,7 +222,8 @@ class LayeredChart extends Chart_1.default {
             width: options.width,
             height: options.height,
             scope: options.scope,
-            onScopeChange: options.onScopeChange
+            onScopeChange: options.onScopeChange,
+            locale: options.locale,
         };
         return react_1.default.createElement(LayeredChartViewComponent_1.default, props);
     }
@@ -319,5 +320,64 @@ class LayeredChart extends Chart_1.default {
     getPlaceholderIcon() {
         return "fa-bar-chart";
     }
+    /** Translates the design */
+    translateDesign(design, translate) {
+        return (0, immer_1.default)(design, draft => {
+            // Translate axis labels
+            if (draft.xAxisLabelText) {
+                draft.xAxisLabelText = translate(draft.xAxisLabelText);
+            }
+            if (draft.yAxisLabelText) {
+                draft.yAxisLabelText = translate(draft.yAxisLabelText);
+            }
+            // Translate layer names
+            for (const layer of draft.layers) {
+                if (layer.name) {
+                    layer.name = translate(layer.name);
+                }
+                // Translate axis category labels
+                if (layer.axes.x?.categoryLabels) {
+                    for (const key in layer.axes.x.categoryLabels) {
+                        layer.axes.x.categoryLabels[key] = translate(layer.axes.x.categoryLabels[key]);
+                    }
+                }
+                if (layer.axes.y?.categoryLabels) {
+                    for (const key in layer.axes.y.categoryLabels) {
+                        layer.axes.y.categoryLabels[key] = translate(layer.axes.y.categoryLabels[key]);
+                    }
+                }
+                if (layer.axes.color?.categoryLabels) {
+                    for (const key in layer.axes.color.categoryLabels) {
+                        layer.axes.color.categoryLabels[key] = translate(layer.axes.color.categoryLabels[key]);
+                    }
+                }
+                // Translate null labels
+                if (layer.axes.x?.nullLabel) {
+                    layer.axes.x.nullLabel = translate(layer.axes.x.nullLabel);
+                }
+                if (layer.axes.y?.nullLabel) {
+                    layer.axes.y.nullLabel = translate(layer.axes.y.nullLabel);
+                }
+                if (layer.axes.color?.nullLabel) {
+                    layer.axes.color.nullLabel = translate(layer.axes.color.nullLabel);
+                }
+            }
+            // Translate y thresholds
+            if (draft.yThresholds) {
+                for (const threshold of draft.yThresholds) {
+                    if (threshold.label) {
+                        threshold.label = translate(threshold.label);
+                    }
+                }
+            }
+            // Translate header and footer using ExprItemsTranslator
+            if (draft.header) {
+                draft.header.items = (0, ExprItemsTranslator_1.translateHtmlItems)(draft.header.items || [], translate);
+            }
+            if (draft.footer) {
+                draft.footer.items = (0, ExprItemsTranslator_1.translateHtmlItems)(draft.footer.items || [], translate);
+            }
+        });
+    }
 }
 exports.default = LayeredChart;

package/lib/widgets/charts/layered/LayeredChartCompiler.d.ts

@@ -91,7 +91,7 @@ export default class LayeredChartCompiler {
     }): ChartOptions;
     isCategoricalX(design: LayeredChartDesign): boolean;
     compileData(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data;
-    compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale: any): C3Data;
+    compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data;
     compileDataNonCategorical(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data;
     fixStringYValues(rows?: any): any;
     flattenRowData(rows: any): any[];

package/lib/widgets/charts/layered/LayeredChartCompiler.js

@@ -558,7 +558,7 @@ class LayeredChartCompiler {
                     const trendlineSeries = seriesY + ":trendline";
                     columns.push([trendlineSeries].concat(calculateLinearRegression(yValues, xValues)));
                     types[trendlineSeries] = billboard_js_1.line ? (0, billboard_js_1.line)() : "line";
-                    names[trendlineSeries] = names[seriesY] + T ` Trendline`;
+                    names[trendlineSeries] = names[seriesY] + " " + T `Trendline`;
                     xs[trendlineSeries] = seriesX;
                     colors[trendlineSeries] = layer.color || defaultColors[layerIndex];
                     legendHide.push(trendlineSeries); // Hide in legend

package/lib/widgets/charts/layered/LayeredChartDesignerComponent.js

@@ -195,7 +195,7 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
         return R("div", null, lodash_1.default.map(this.props.design.layers, (layer, i) => this.renderLayer(i)), 
         // Only add if last has table
         this.props.design.layers.length > 0 && lodash_1.default.last(this.props.design.layers).table
-            ? R("button", { className: "btn btn-link", type: "button", onClick: this.handleAddLayer }, R("span", { className: "fas fa-plus" }), T ` Add Another Series`)
+            ? R("button", { className: "btn btn-link", type: "button", onClick: this.handleAddLayer }, R("span", { className: "fas fa-plus" }), " ", T `Add Another Series`)
             : undefined);
     }
     renderOptions() {
@@ -306,7 +306,7 @@ class ThresholdsComponent extends react_1.default.Component {
                 onRemove: this.handleRemove.bind(null, index),
                 showHighlightColor: this.props.showHighlightColor
             });
-        }), R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("i", { className: "fa fa-plus" }), T ` Add Y Threshold`));
+        }), R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("i", { className: "fa fa-plus" }), " ", T `Add Y Threshold`));
     }
 }
 class ThresholdComponent extends react_1.default.Component {

package/lib/widgets/charts/layered/LayeredChartViewComponent.js

@@ -93,7 +93,8 @@ class LayeredChartViewComponent extends react_1.default.Component {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             exprValues: this.props.data.header || {},
-            width: this.props.width
+            width: this.props.width,
+            locale: this.context
         }));
     }
     renderFooter() {
@@ -109,7 +110,8 @@ class LayeredChartViewComponent extends react_1.default.Component {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             exprValues: this.props.data.footer || {},
-            width: this.props.width
+            width: this.props.width,
+            locale: this.context
         }));
     }
     render() {
@@ -147,6 +149,9 @@ class C3ChartComponent extends react_1.default.Component {
         if (this.chart) {
             this.chart.destroy();
         }
+        if (!this.chartDiv) {
+            return;
+        }
         const compiler = new LayeredChartCompiler_1.default({ schema: props.schema });
         const chartOptions = compiler.createChartOptions({
             design: this.props.design,
@@ -450,7 +455,7 @@ class C3ChartComponent extends react_1.default.Component {
         // css += ".c3-title { font-size: #{scale * 14}px; }\n"
         return R("div", {
             ref: c => {
-                return (this.chartDiv = c);
+                this.chartDiv = c;
             }
         });
     }

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

@@ -39,4 +39,5 @@ export default class PivotChart extends Chart {
     createDataTable(design: PivotChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): (string | undefined)[][];
     getFilterableTables(design: PivotChartDesign, schema: Schema): string[];
     getPlaceholderIcon(): string;
+    translateDesign(design: PivotChartDesign, translate: (input: string) => string): PivotChartDesign;
 }

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

@@ -39,6 +39,7 @@ const TextWidget_1 = __importDefault(require("../../text/TextWidget"));
 const PivotChartUtils = __importStar(require("./PivotChartUtils"));
 const PivotChartQueryBuilder_1 = __importDefault(require("./PivotChartQueryBuilder"));
 const PivotChartLayoutBuilder_1 = __importDefault(require("./PivotChartLayoutBuilder"));
+const ExprItemsTranslator_1 = require("../../../richtext/ExprItemsTranslator");
 // Store true as a weakly cached value if a design is already clean
 const cleanDesignCache = new expressions_1.WeakCache();
 class PivotChart extends Chart_1.default {
@@ -377,5 +378,67 @@ class PivotChart extends Chart_1.default {
     getPlaceholderIcon() {
         return "fa-magic";
     }
+    translateDesign(design, translate) {
+        return (0, immer_1.default)(design, draft => {
+            // Helper function to translate a segment and its children
+            const translateSegment = (segment) => {
+                // Translate segment label
+                if (segment.label) {
+                    segment.label = translate(segment.label);
+                }
+                // Translate value axis labels
+                if (segment.valueAxis?.categoryLabels) {
+                    for (const key in segment.valueAxis.categoryLabels) {
+                        segment.valueAxis.categoryLabels[key] = translate(segment.valueAxis.categoryLabels[key]);
+                    }
+                }
+                // Translate null label
+                if (segment.valueAxis?.nullLabel) {
+                    segment.valueAxis.nullLabel = translate(segment.valueAxis.nullLabel);
+                }
+                // Recursively translate children
+                if (segment.children) {
+                    segment.children.forEach(translateSegment);
+                }
+            };
+            // Translate all row segments
+            draft.rows.forEach(translateSegment);
+            // Translate all column segments
+            draft.columns.forEach(translateSegment);
+            // Translate all intersections
+            for (const intersection of Object.values(draft.intersections)) {
+                // Translate value axis labels
+                if (intersection.valueAxis?.categoryLabels) {
+                    for (const key in intersection.valueAxis.categoryLabels) {
+                        intersection.valueAxis.categoryLabels[key] = translate(intersection.valueAxis.categoryLabels[key]);
+                    }
+                }
+                // Translate null label
+                if (intersection.valueAxis?.nullLabel) {
+                    intersection.valueAxis.nullLabel = translate(intersection.valueAxis.nullLabel);
+                }
+                // Translate segment value axis override labels
+                if (intersection.segmentValueAxisOverrides) {
+                    for (const axis of Object.values(intersection.segmentValueAxisOverrides)) {
+                        if (axis?.categoryLabels) {
+                            for (const key in axis.categoryLabels) {
+                                axis.categoryLabels[key] = translate(axis.categoryLabels[key]);
+                            }
+                        }
+                        if (axis?.nullLabel) {
+                            axis.nullLabel = translate(axis.nullLabel);
+                        }
+                    }
+                }
+            }
+            // Translate header and footer using ExprItemsTranslator
+            if (draft.header?.items) {
+                draft.header.items = (0, ExprItemsTranslator_1.translateHtmlItems)(draft.header.items, translate);
+            }
+            if (draft.footer?.items) {
+                draft.footer.items = (0, ExprItemsTranslator_1.translateHtmlItems)(draft.footer.items, translate);
+            }
+        });
+    }
 }
 exports.default = PivotChart;

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

@@ -252,7 +252,7 @@ class LayoutCellComponent extends react_1.default.Component {
         }
         return R("span", { style: { fontSize: "90%" } }, R("a", { className: "link-plain", onClick: this.props.onEditSection }, T `Edit`), cell.summarize
             ? [
-                R("span", { className: "text-muted" }, T ` / `),
+                R("span", { className: "text-muted" }, ` / `),
                 R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T `Summarize`)
             ]
             : undefined);

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

@@ -83,9 +83,12 @@ class SegmentDesignerComponent extends react_1.default.Component {
             label: T `Type`
         }, react_1.default.createElement(ui.Radio, { key: "single", value: this.state.mode, radioValue: "single", onChange: this.handleMode },
             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 },
+            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`)));
+            " - ",
+            react_1.default.createElement("span", { className: "text-muted" }, T `disaggregate data by a field`)));
     }
     renderLabel() {
         return R(ui.FormGroup, {
@@ -132,7 +135,7 @@ class SegmentDesignerComponent extends react_1.default.Component {
     renderFilter() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: [R(ui.Icon, { id: "glyphicon-filter" }), T ` Filters`],
+            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,
@@ -180,7 +183,7 @@ class SegmentDesignerComponent extends react_1.default.Component {
     renderOrderExpr() {
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), T ` Sort`],
+            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,

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" }), T ` 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;

package/lib/widgets/charts/table/TableChart.d.ts

@@ -54,4 +54,5 @@ export default class TableChart extends Chart {
     createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any, locale: any): any[][];
     getFilterableTables(design: any, schema: Schema): any[];
     getPlaceholderIcon(): string;
+    translateDesign(design: TableChartDesign, translate: (input: string) => string): TableChartDesign;
 }

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

@@ -321,5 +321,20 @@ class TableChart extends Chart_1.default {
     getPlaceholderIcon() {
         return "fa-table";
     }
+    translateDesign(design, translate) {
+        return (0, immer_1.default)(design, draft => {
+            // Translate title text
+            if (draft.titleText) {
+                draft.titleText = translate(draft.titleText);
+            }
+            // Translate column headers and axis labels
+            for (const column of draft.columns) {
+                // Translate header text
+                if (column.headerText) {
+                    column.headerText = translate(column.headerText);
+                }
+            }
+        });
+    }
 }
 exports.default = TableChart;

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

@@ -2,11 +2,12 @@ import React from "react";
 import RichTextComponent from "../../richtext/RichTextComponent";
 import ExprInsertModalComponent from "./ExprInsertModalComponent";
 import ExprUpdateModalComponent from "./ExprUpdateModalComponent";
-import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter";
+import ExprItemsHtmlConverter, { HtmlItemExpr, HtmlItemOrExpr } from "../../richtext/ExprItemsHtmlConverter";
 import { TextWidgetDesign } from "./TextWidgetDesign";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface TextComponentProps {
     design: TextWidgetDesign;
+    /** Called when design changes. If not set, will be in display mode, otherwise in edit mode */
     onDesignChange?: (design: TextWidgetDesign) => void;
     schema: Schema;
     dataSource: DataSource;
@@ -22,17 +23,23 @@ export interface TextComponentProps {
     namedStrings?: {
         [key: string]: string;
     };
+    /** Locale to use for display */
+    locale: string;
 }
+/**
+ * Text component which is provided with the data it needs, rather than loading it.
+ * Used by TextWidgetComponent and also by other components that embed text fields
+ */
 export default class TextComponent extends React.Component<TextComponentProps> {
     static contextType: React.Context<string>;
     exprInsertModal: ExprInsertModalComponent | null;
     exprUpdateModal: ExprUpdateModalComponent | null;
     editor: RichTextComponent | null;
     createItemsHtmlConverter(): ExprItemsHtmlConverter;
-    handleItemsChange: (items: any) => void;
-    handleInsertExpr: (item: any) => void;
+    handleItemsChange: (items: HtmlItemOrExpr[]) => void;
+    handleInsertExpr: (item: HtmlItemExpr) => void;
     replaceItem(item: any): void;
-    handleItemClick: (item: any) => void;
+    handleItemClick: (item: HtmlItemExpr) => void;
     handleAddExpr: (ev: React.MouseEvent<HTMLDivElement>) => void;
     renderExtraPaletteButtons(): React.JSX.Element;
     renderModals(): React.JSX.Element[];

package/lib/widgets/text/TextComponent.js

@@ -10,8 +10,10 @@ const ExprInsertModalComponent_1 = __importDefault(require("./ExprInsertModalCom
 const ExprUpdateModalComponent_1 = __importDefault(require("./ExprUpdateModalComponent"));
 const ExprItemsHtmlConverter_1 = __importDefault(require("../../richtext/ExprItemsHtmlConverter"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-// Text component which is provided with the data it needs, rather than loading it.
-// Used by TextWidgetComponent and also by other components that embed text fields
+/**
+ * Text component which is provided with the data it needs, rather than loading it.
+ * Used by TextWidgetComponent and also by other components that embed text fields
+ */
 class TextComponent extends react_1.default.Component {
     static contextType = expressions_ui_1.LocaleContext;
     exprInsertModal = null;
@@ -19,7 +21,7 @@ class TextComponent extends react_1.default.Component {
     editor = null;
     createItemsHtmlConverter() {
         return new ExprItemsHtmlConverter_1.default(this.props.schema, this.props.onDesignChange != null, this.props.exprValues, 
-        // Display summaries if in design more and singleRowTable is set
+        // Display summaries if in design mode and singleRowTable is set
         this.props.onDesignChange != null && this.props.singleRowTable != null, 
         // Only replace named strings if not editing
         this.props.onDesignChange == null ? this.props.namedStrings : undefined, this.context);
@@ -45,22 +47,23 @@ class TextComponent extends react_1.default.Component {
             }
         });
         const items = replaceItemInItems(this.props.design.items || [], item);
-        return this.props.onDesignChange({ ...this.props.design, items });
+        this.props.onDesignChange({ ...this.props.design, items });
     }
     handleItemClick = (item) => {
-        return this.exprUpdateModal.open(item, (item) => {
+        this.exprUpdateModal.open(item, (item) => {
             // Replace in items
-            return this.replaceItem(item);
+            this.replaceItem(item);
         });
     };
     handleAddExpr = (ev) => {
         ev.preventDefault();
-        return this.exprInsertModal.open();
+        this.exprInsertModal.open();
     };
     renderExtraPaletteButtons() {
         return (react_1.default.createElement("div", { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr },
             react_1.default.createElement("i", { className: "fa fa-plus" }),
-            T ` Expression`));
+            " ",
+            T `Expression`));
     }
     renderModals() {
         return [

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

@@ -11,8 +11,8 @@ export default class TextWidget extends Widget {
         dataSource: DataSource;
         widgetDataSource: import("../WidgetDataSource").WidgetDataSource;
         filters: JsonQLFilter[];
-        design: object;
-        onDesignChange: ((design: object) => void) | null | undefined;
+        design: any;
+        onDesignChange: ((design: any) => void) | null | undefined;
         width: number | undefined;
         height: number | undefined;
         singleRowTable: string | undefined;
@@ -21,10 +21,13 @@ export default class TextWidget extends Widget {
         } | undefined;
         ref: ((widget: any) => void) | undefined;
         refreshKey: any;
+        locale: string;
+        translate: (input: string) => string;
     }, any>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): any;
     isAutoHeight(): boolean;
-    getExprItems(items: HtmlItem[]): HtmlItemExpr[];
+    getExprItems(items?: HtmlItem[]): HtmlItemExpr[];
     getFilterableTables(design: TextWidgetDesign | undefined, schema: Schema): string[];
     getTOCEntries(design: any, namedStrings: any): any;
+    getTranslatableStrings(design: TextWidgetDesign, schema: Schema): string[];
 }

package/lib/widgets/text/TextWidget.js

@@ -12,6 +12,7 @@ const expressions_2 = require("@mwater/expressions");
 const expressions_3 = require("@mwater/expressions");
 const expressions_4 = require("@mwater/expressions");
 const Widget_1 = __importDefault(require("../Widget"));
+const ExprItemsTranslator_1 = require("../../richtext/ExprItemsTranslator");
 class TextWidget extends Widget_1.default {
     // Creates a React element that is a view of the widget
     // options:
@@ -42,7 +43,9 @@ class TextWidget extends Widget_1.default {
             singleRowTable: options.singleRowTable,
             namedStrings: options.namedStrings,
             ref: options.widgetRef,
-            refreshKey: options.refreshKey
+            refreshKey: options.refreshKey,
+            locale: options.locale,
+            translate: options.translate
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -243,5 +246,8 @@ class TextWidget extends Widget_1.default {
         findRecursive(design.items);
         return entries;
     }
+    getTranslatableStrings(design, schema) {
+        return (0, ExprItemsTranslator_1.getHtmlItemsStrings)(design.items || []);
+    }
 }
 exports.default = TextWidget;

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

@@ -19,6 +19,10 @@ export interface TextWidgetComponentProps {
     namedStrings?: any;
     /** A key that changes when the widget should be refreshed */
     refreshKey?: any;
+    /** Locale to use for display */
+    locale: string;
+    /** Translate function to use for display. Returns same string when editing. */
+    translate: (input: string) => string;
 }
 export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetComponentProps, {
     loading: boolean;

package/lib/widgets/text/TextWidgetComponent.js

@@ -13,6 +13,7 @@ const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-libr
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const ColorComponent_1 = __importDefault(require("../../ColorComponent"));
 const bootstrap_2 = require("@mwater/react-library/lib/bootstrap");
+const ExprItemsTranslator_1 = require("../../richtext/ExprItemsTranslator");
 // Widget which displays styled text with embedded expressions
 class TextWidgetComponent extends AsyncLoadComponent_1.default {
     divComp;
@@ -123,7 +124,12 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
         // If loading, don't display old values
         const exprValues = !this.state.loading ? this.state.exprValues : {};
         const padding = this.props.design.padding ?? 0;
-        return (react_1.default.createElement(TextComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: exprValues, width: this.props.width ? this.props.width - padding * 2 : undefined, height: this.props.height ? this.props.height - padding * 2 : undefined, singleRowTable: this.props.singleRowTable, namedStrings: this.props.namedStrings }));
+        // Translate items if needed
+        const translatedDesign = this.props.onDesignChange ? this.props.design : {
+            ...this.props.design,
+            items: (0, ExprItemsTranslator_1.translateHtmlItems)(this.props.design.items || [], this.props.translate)
+        };
+        return (react_1.default.createElement(TextComponent_1.default, { design: translatedDesign, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: exprValues, width: this.props.width ? this.props.width - padding * 2 : undefined, height: this.props.height ? this.props.height - padding * 2 : undefined, singleRowTable: this.props.singleRowTable, namedStrings: this.props.namedStrings, locale: this.props.locale }));
     }
     render() {
         const borderStyle = this.props.design.borderThickness && this.props.design.borderColor

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

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

package/lib/widgets/text/TextWidgetDesign.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isEmptyTextWidgetDesign = isEmptyTextWidgetDesign;
 /** Returns true if the text widget design is empty. */
 function isEmptyTextWidgetDesign(design) {
-    return design == null || design.items.length === 0;
+    return design == null || (design.items != null && design.items.length === 0);
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.1",
+  "version": "5.4.3",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
-    "test": "../../node_modules/build-library/test-cli",
-    "test-browser": "../../node_modules/build-library/test-browser",
-    "watch": "../../node_modules/build-library/watch",
+    "test": "./node_modules/build-library/test-cli",
+    "test-browser": "./node_modules/build-library/test-browser",
+    "watch": "./node_modules/build-library/watch",
     "build": "rsync -av --exclude '*.ts' --exclude '*.tsx' src/ lib/ ; tsc -p tsconfig.build.json",
     "prepublish": "npm run build"
   },
@@ -29,7 +29,7 @@
     "async": "^1.2.1",
     "async-latest": "^1.0.0",
     "backbone": "~1.1.2",
-    "billboard.js": "3.12.2",
+    "billboard.js": "3.14.0",
     "canonical-json": "0.0.4",
     "classnames": "^2.3.1",
     "color": "^3.2.1",
@@ -41,9 +41,8 @@
     "d3-tip": "^0.9.0",
     "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
-    "ez-localize": "^2.10.5",
+    "ez-localize": "^2.13.0",
     "file-saver": "^2.0.5",
-    "fixed-data-table-2": "^1.2.15",
     "immer": "^8.0.0",
     "immutable-setter": "^1.1.1",
     "jquery": "^3.6.3",
@@ -85,7 +84,7 @@
     "@types/d3": "^5.16.4",
     "@types/d3-format": "^1.4.1",
     "@types/dompurify": "0.0.32",
-    "@types/fixed-data-table-2": "^0.8.6",
+    "@types/file-saver": "^2.0.7",
     "@types/jquery": "^3.5.5",
     "@types/leaflet": "^1.7.9",
     "@types/lodash": "^3.10.3",

package/src/ColorComponent.tsx

@@ -64,8 +64,7 @@ export default class ColorComponent extends React.Component<ColorComponentProps,
         <div style={popupPosition}>
           {!this.props.disableReset && (
             <button type="button" className="btn btn-link btn-sm" onClick={this.handleReset}>
-              <i className="fa fa-undo" />
-              {T` Reset Color`}
+              <i className="fa fa-undo" /> {T`Reset Color`}
             </button>
           )}
           <button type="button" className="btn btn-link btn-sm" onClick={this.handleAdvanced}>