@mwater/visualization 5.4.1 → 5.4.3

package/lib/widgets/TOCWidget.js

@@ -26,146 +26,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
-const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
+const react_1 = __importStar(require("react"));
 const lodash_1 = __importDefault(require("lodash"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const update_1 = __importDefault(require("@mwater/react-library/lib/update"));
 const Widget_1 = __importDefault(require("./Widget"));
 const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
-// Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
-// design is:
-//   header: text of header. Defaults to "Contents"
-//   borderWeight: border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy
-//   numbering: true/false for prepending numbering to entries (e.g. 3.4.1)
+const immer_1 = __importDefault(require("immer"));
+/**
+ * Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+ */
 class TOCWidget extends Widget_1.default {
-    // Creates a React element that is a view of the widget
-    // options:
-    //  schema: schema to use
-    //  dataSource: data source to use
-    //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
-    //  design: widget design
-    //  scope: scope of the widget (when the widget self-selects a particular scope)
-    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
-    //  onScopeChange: called with scope of widget
-    //  onDesignChange: called with new design. null/undefined for readonly
-    //  width: width in pixels on screen
-    //  height: height in pixels on screen
-    //  tocEntries: entries in the table of contents
-    //  onScrollToTOCEntry: called with (widgetId, tocEntryId) to scroll to TOC entry
+    /** Creates a React element that is a view of the widget */
     createViewElement(options) {
-        return R(TOCWidgetComponent, {
-            design: options.design,
-            onDesignChange: options.onDesignChange,
-            width: options.width,
-            height: options.height,
-            tocEntries: options.tocEntries,
-            onScrollToTOCEntry: options.onScrollToTOCEntry
-        });
+        return react_1.default.createElement(TOCWidgetComponent, { design: options.design, onDesignChange: options.onDesignChange ?? undefined, width: options.width, height: options.height, tocEntries: options.tocEntries, onScrollToTOCEntry: options.onScrollToTOCEntry, translate: options.translate });
     }
     // Determine if widget is auto-height, which means that a vertical height is not required.
     isAutoHeight() {
         return true;
     }
+    getTranslatableStrings(design, schema) {
+        const strings = [];
+        if (design.header) {
+            strings.push(design.header);
+        }
+        return strings;
+    }
 }
 exports.default = TOCWidget;
-class TOCWidgetComponent extends react_1.default.Component {
-    static propTypes = {
-        design: prop_types_1.default.object.isRequired, // See Map Design.md
-        onDesignChange: prop_types_1.default.func, // Called with new design. null/undefined for readonly
-        width: prop_types_1.default.number,
-        height: prop_types_1.default.number,
-        tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            id: prop_types_1.default.any,
-            widgetId: prop_types_1.default.string.isRequired,
-            level: prop_types_1.default.number.isRequired,
-            text: prop_types_1.default.string.isRequired
-        })),
-        onScrollToTOCEntry: prop_types_1.default.func
-    };
-    constructor(props) {
-        super(props);
-        this.state = {
-            editing: false // true if editing
-        };
-    }
-    handleStartEditing = () => {
-        return this.setState({ editing: true });
+function TOCWidgetComponent(props) {
+    const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props;
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const handleStartEditing = () => {
+        setEditing(true);
     };
-    handleEndEditing = () => {
-        return this.setState({ editing: false });
+    const handleEndEditing = () => {
+        setEditing(false);
     };
-    renderEditor() {
-        if (!this.state.editing) {
+    const renderEditor = () => {
+        if (!editing) {
             return null;
         }
         // Create editor
-        const editor = R(TOCWidgetDesignerComponent, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange
-        });
-        return R(ModalPopupComponent_1.default, {
-            showCloseX: true,
-            header: T `Table of Contents Options`,
-            onClose: this.handleEndEditing
-        }, editor);
-    }
-    renderContent() {
-        return R(TOCWidgetViewComponent, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            width: this.props.width,
-            height: this.props.height,
-            tocEntries: this.props.tocEntries,
-            onScrollToTOCEntry: this.props.onScrollToTOCEntry
-        });
-    }
-    render() {
-        const dropdownItems = [];
-        if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
-        }
-        // Wrap in a simple widget
-        return R("div", { onDoubleClick: this.handleStartEditing }, this.props.onDesignChange != null ? this.renderEditor() : undefined, R(DropdownWidgetComponent_1.default, {
-            width: this.props.width,
-            height: this.props.height,
-            dropdownItems
-        }, this.renderContent()));
+        const editor = react_1.default.createElement(TOCWidgetDesignerComponent, { design: design, onDesignChange: onDesignChange });
+        return react_1.default.createElement(ModalPopupComponent_1.default, { showCloseX: true, header: T `Table of Contents Options`, onClose: handleEndEditing }, editor);
+    };
+    const renderContent = () => {
+        return react_1.default.createElement(TOCWidgetViewComponent, { design: design, onDesignChange: onDesignChange, width: width, height: height, tocEntries: tocEntries, onScrollToTOCEntry: onScrollToTOCEntry, translate: translate });
+    };
+    const dropdownItems = [];
+    if (onDesignChange != null) {
+        dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: handleStartEditing });
     }
+    // Wrap in a simple widget
+    return react_1.default.createElement("div", { onDoubleClick: handleStartEditing },
+        onDesignChange != null ? renderEditor() : undefined,
+        react_1.default.createElement(DropdownWidgetComponent_1.default, { width: width, height: height, dropdownItems: dropdownItems }, renderContent()));
 }
 // Displays the contents of the widget
-class TOCWidgetViewComponent extends react_1.default.Component {
-    static propTypes = {
-        design: prop_types_1.default.object.isRequired, // Design of chart
-        onDesignChange: prop_types_1.default.func, // Called with new design. null/undefined for readonly
-        width: prop_types_1.default.number,
-        height: prop_types_1.default.number,
-        tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            id: prop_types_1.default.any,
-            widgetId: prop_types_1.default.string.isRequired,
-            level: prop_types_1.default.number.isRequired,
-            text: prop_types_1.default.string.isRequired
-        })),
-        onScrollToTOCEntry: prop_types_1.default.func
+function TOCWidgetViewComponent(props) {
+    const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props;
+    const handleEntryClick = (tocEntry) => {
+        return onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id);
     };
-    handleEntryClick = (tocEntry) => {
-        return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id);
-    };
-    renderTOCEntry(tocEntry, index) {
+    const renderTOCEntry = (tocEntry, index) => {
         // Find indentation number (e.g "1.3.2") by counting # backwards that are same level with no level lower
         let level;
         let indentation = "";
-        if (this.props.design.numbering) {
-            let asc, end;
-            for (level = 1, end = tocEntry.level, asc = 1 <= end; asc ? level <= end : level >= end; asc ? level++ : level--) {
+        if (design.numbering) {
+            // For each level up to the current entry's level
+            for (let level = 1; level <= tocEntry.level; level++) {
                 let value = 0;
-                for (let i2 = 0, end1 = index, asc1 = 0 <= end1; asc1 ? i2 <= end1 : i2 >= end1; asc1 ? i2++ : i2--) {
-                    if (this.props.tocEntries[i2].level === level) {
-                        value += 1;
+                // Count entries at this level up to current index
+                for (let i = 0; i <= index; i++) {
+                    const entry = tocEntries?.[i];
+                    if (!entry) {
+                        continue;
+                    }
+                    if (entry.level === level) {
+                        value++;
                     }
-                    else if (this.props.tocEntries[i2].level < level) {
+                    else if (entry.level < level) {
+                        // Reset counter when we hit a higher level
                         value = 0;
                     }
                 }
@@ -173,82 +115,64 @@ class TOCWidgetViewComponent extends react_1.default.Component {
             }
             indentation += " ";
         }
-        return R("div", { key: index, style: { paddingLeft: tocEntry.level * 8 - 8 } }, R("a", { className: "link-plain", onClick: this.handleEntryClick.bind(null, tocEntry) }, indentation, R("span", null, tocEntry.text)));
-    }
-    render() {
-        // Get border
-        const border = (() => {
-            switch (this.props.design.borderWeight) {
-                case 0:
-                    return "none";
-                case 1:
-                    return "solid 1px #f4f4f4";
-                case 2:
-                    return "solid 1px #ccc";
-                case 3:
-                    return "solid 1px #888";
-            }
-        })();
-        return R("div", {
-            style: {
-                width: this.props.width,
-                height: this.props.height,
-                border,
-                padding: 5,
-                margin: 1
-            }
-        }, 
-        // Render header
-        R("div", { style: { fontWeight: "bold" } }, this.props.design.header), lodash_1.default.map(this.props.tocEntries, (tocEntry, i) => {
-            return this.renderTOCEntry(tocEntry, i);
-        }), 
-        // Add placeholder if none and editable
-        this.props.onDesignChange && (this.props.tocEntries || []).length === 0
-            ? R("div", { className: "text-muted" }, T `Table of Contents will appear here as text blocks with headings are added to the dashboard`)
+        return react_1.default.createElement("div", { key: index, style: { paddingLeft: tocEntry.level * 8 - 8 } },
+            react_1.default.createElement("a", { className: "link-plain", onClick: () => handleEntryClick(tocEntry) },
+                indentation,
+                react_1.default.createElement("span", null, translate(tocEntry.text))));
+    };
+    // Get border
+    const border = (() => {
+        switch (design.borderWeight) {
+            case 0:
+                return "none";
+            case 1:
+                return "solid 1px #f4f4f4";
+            case 2:
+                return "solid 1px #ccc";
+            case 3:
+                return "solid 1px #888";
+        }
+    })();
+    return react_1.default.createElement("div", { style: {
+            width,
+            height,
+            border,
+            padding: 5,
+            margin: 1
+        } },
+        react_1.default.createElement("div", { style: { fontWeight: "bold" } }, design.header ? props.translate(design.header) : ""),
+        lodash_1.default.map(tocEntries || [], (tocEntry, i) => {
+            return renderTOCEntry(tocEntry, i);
+        }),
+        onDesignChange && (tocEntries || []).length === 0
+            ? react_1.default.createElement("div", { className: "text-muted" }, T `Table of Contents will appear here as text blocks with headings are added to the dashboard`)
             : undefined);
-    }
 }
 // Designer for TOC widget options
-class TOCWidgetDesignerComponent extends react_1.default.Component {
-    constructor(...args) {
-        super(...args);
-        this.update = this.update.bind(this);
-    }
-    static propTypes = {
-        design: prop_types_1.default.object.isRequired,
-        onDesignChange: prop_types_1.default.func.isRequired
-    };
+function TOCWidgetDesignerComponent(props) {
+    const { design, onDesignChange } = props;
     // Updates design with the specified changes
-    update() {
-        return (0, update_1.default)(this.props.design, this.props.onDesignChange, arguments);
-    }
-    handleMarkdownChange = (ev) => {
-        const design = lodash_1.default.extend({}, this.props.design, { markdown: ev.target.value });
-        return this.props.onDesignChange(design);
+    const handleUpdate = (field) => (value) => {
+        onDesignChange((0, immer_1.default)(design, draft => {
+            draft[field] = value;
+        }));
     };
-    render() {
-        return R("div", null, R(ui.FormGroup, { label: T `Header` }, R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: T `None` })), R(ui.FormGroup, { label: T `Border` }, R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })), R(ui.FormGroup, { label: T `Numbering` }, R(ui.Radio, {
-            inline: true,
-            value: this.props.design.numbering || false,
-            radioValue: true,
-            onChange: this.update("numbering")
-        }, T `On`), R(ui.Radio, {
-            inline: true,
-            value: this.props.design.numbering || false,
-            radioValue: false,
-            onChange: this.update("numbering")
-        }, T `Off`)));
-    }
+    return react_1.default.createElement("div", null,
+        react_1.default.createElement(ui.FormGroup, { label: T `Header` },
+            react_1.default.createElement(ui.TextInput, { value: design.header || "", onChange: handleUpdate("header"), placeholder: T `None` })),
+        react_1.default.createElement(ui.FormGroup, { label: T `Border` },
+            react_1.default.createElement(BorderComponent, { value: design.borderWeight || 0, onChange: handleUpdate("borderWeight") })),
+        react_1.default.createElement(ui.FormGroup, { label: T `Numbering` },
+            react_1.default.createElement(ui.Radio, { inline: true, value: design.numbering || false, radioValue: true, onChange: handleUpdate("numbering") }, T `On`),
+            react_1.default.createElement(ui.Radio, { inline: true, value: design.numbering || false, radioValue: false, onChange: handleUpdate("numbering") }, T `Off`)));
 }
 // Allows setting border heaviness
-class BorderComponent extends react_1.default.Component {
-    static propTypes = {
-        value: prop_types_1.default.number,
-        defaultValue: prop_types_1.default.number,
-        onChange: prop_types_1.default.func.isRequired
-    };
-    render() {
-        const value = this.props.value != null ? this.props.value : this.props.defaultValue;
-        return R("div", null, R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, T `None`), R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, T `Light`), R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, T `Medium`), R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, T `Heavy`));
-    }
+function BorderComponent(props) {
+    const { value, defaultValue, onChange } = props;
+    const currentValue = value != null ? value : defaultValue;
+    return react_1.default.createElement("div", null,
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 0, onChange: onChange }, T `None`),
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 1, onChange: onChange }, T `Light`),
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 2, onChange: onChange }, T `Medium`),
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 3, onChange: onChange }, T `Heavy`));
 }

package/lib/widgets/Widget.d.ts

@@ -9,18 +9,16 @@ export interface CreateViewElementOptions {
     dataSource: DataSource;
     /** Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource. **/
     widgetDataSource: WidgetDataSource;
-    /** widget design **/
-    design: object;
+    /** widget design */
+    design: any;
     /** scope of the widget (when the widget self-selects a particular scope) **/
     scope?: WidgetScope | null;
     /** array of filters to apply.**/
     filters: JsonQLFilter[];
     /** called with scope of widget **/
-    onScopeChange: (scope: WidgetScope | null) => void;
+    onScopeChange?: (scope: WidgetScope | null) => void;
     /** called with new design. null/undefined for readonly **/
-    onDesignChange?: {
-        (design: object): void;
-    } | null;
+    onDesignChange?: ((design: any) => void) | null;
     /** width in pixels on screen **/
     width?: number;
     /** height in pixels on screen **/
@@ -34,13 +32,24 @@ export interface CreateViewElementOptions {
         [key: string]: string;
     };
     /** Entries in the table of content */
-    tocEntries?: string[];
+    tocEntries?: TOCEntry[];
     /** the widget callback ref */
     widgetRef?: (widget: any) => void;
     /** called with (widgetId, tocEntryId) to scroll to TOC entry */
     onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void;
     /** 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;
+}
+/** An entry in the table of contents */
+export interface TOCEntry {
+    id: any;
+    widgetId: string;
+    level: number;
+    text: string;
 }
 export default class Widget {
     /** Creates a React element that is a view of the widget */
@@ -60,4 +69,6 @@ export default class Widget {
         text: string;
         level: number;
     }[];
+    /** Gets any strings that should be translated */
+    getTranslatableStrings(design: any, schema: Schema): string[];
 }

package/lib/widgets/Widget.js

@@ -29,5 +29,9 @@ class Widget {
     getTOCEntries(design, namedStrings) {
         return [];
     }
+    /** Gets any strings that should be translated */
+    getTranslatableStrings(design, schema) {
+        return [];
+    }
 }
 exports.default = Widget;

package/lib/widgets/WidgetScopesViewComponent.js

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

package/lib/widgets/charts/Chart.d.ts

@@ -8,7 +8,7 @@ export interface ChartCreateViewElementOptions {
     schema: Schema;
     /** data source to use. Only used when designing, for display uses data **/
     dataSource: DataSource;
-    /** Chart design **/
+    /** Chart design. Should already be translated. */
     design: any;
     /** called with new design. null/undefined for readonly **/
     onDesignChange?: {
@@ -28,6 +28,8 @@ export interface ChartCreateViewElementOptions {
     height?: number;
     /** Called with (tableId, rowId) when item is clicked **/
     onRowClick?: (tableId: string, rowId: any) => void;
+    /** Locale to use for display */
+    locale: string;
 }
 export default class Chart {
     cleanDesign(design: any, schema: Schema): void;
@@ -45,6 +47,9 @@ export default class Chart {
         onDesignChange: (design: any) => void;
     }): ReactNode;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: any, callback: any): void;
+    /** Create a view element for the chart.
+     * Chart design should already be translated. This is handled by ChartViewComponent.
+     */
     createViewElement(options: ChartCreateViewElementOptions): ReactNode;
     createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): {
         label: ReactNode;
@@ -53,4 +58,8 @@ export default class Chart {
     createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any, locale: any): any[][];
     getFilterableTables(design: any, schema: Schema): string[];
     getPlaceholderIcon(): string;
+    /** Get a list of translatable strings in the design. No need to override in subclasses. Design should already be cleaned. */
+    getTranslatableStrings(design: any, schema: Schema): string[];
+    /** Translates the design. Override in subclasses. Design is already cleaned. */
+    translateDesign(design: any, translate: (input: string) => string): any;
 }

package/lib/widgets/charts/Chart.js

@@ -44,17 +44,9 @@ class Chart {
     getData(design, schema, dataSource, filters, callback) {
         throw new Error("Not implemented");
     }
-    // Create a view element for the chart
-    // Options include:
-    //   schema: schema to use
-    //   dataSource: dataSource to use
-    //   design: design of the chart
-    //   onDesignChange: when design changes
-    //   data: results from queries
-    //   width, height: size of the chart view
-    //   scope: current scope of the view element
-    //   onScopeChange: called when scope changes with new scope
-    //   onRowClick: Called with (tableId, rowId) when item is clicked
+    /** Create a view element for the chart.
+     * Chart design should already be translated. This is handled by ChartViewComponent.
+     */
     createViewElement(options) {
         throw new Error("Not implemented");
     }
@@ -79,5 +71,24 @@ class Chart {
     getPlaceholderIcon() {
         return "";
     }
+    /** Get a list of translatable strings in the design. No need to override in subclasses. Design should already be cleaned. */
+    getTranslatableStrings(design, schema) {
+        const strings = new Set();
+        // Create collector function that just saves strings and returns them unchanged
+        const collectStrings = (str) => {
+            // Only collect non-empty strings
+            if (str) {
+                strings.add(str);
+            }
+            return str;
+        };
+        // Use existing translation function but with collector
+        this.translateDesign(design, collectStrings);
+        return Array.from(strings);
+    }
+    /** Translates the design. Override in subclasses. Design is already cleaned. */
+    translateDesign(design, translate) {
+        return design;
+    }
 }
 exports.default = Chart;

package/lib/widgets/charts/ChartViewComponent.d.ts

@@ -26,6 +26,10 @@ export interface ChartViewComponentProps {
     onRowClick?: (tableId: string, rowId: any) => void;
     /** 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 */
+    translate: (input: string) => string;
 }
 interface ChartViewComponentState {
     cacheExpiry?: any;

package/lib/widgets/charts/ChartViewComponent.js

@@ -108,11 +108,13 @@ class ChartViewComponent extends react_1.default.Component {
         if (this.state.dataError) {
             return this.renderError();
         }
-        return R("div", { style }, this.state.validDesign
+        // Translate design if needed
+        const translatedDesign = this.props.onDesignChange || !this.props.translate || !this.state.validDesign ? this.state.validDesign : this.props.chart.translateDesign(this.state.validDesign, this.props.translate);
+        return R("div", { style }, translatedDesign
             ? this.props.chart.createViewElement({
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
-                design: this.state.validDesign,
+                design: translatedDesign,
                 onDesignChange: this.props.onDesignChange,
                 data: this.state.data,
                 scope: this.props.scope,
@@ -120,7 +122,8 @@ class ChartViewComponent extends react_1.default.Component {
                 width: this.props.width,
                 height: this.props.height,
                 onRowClick: this.props.onRowClick,
-                filters: this.props.filters
+                filters: this.props.filters,
+                locale: this.props.locale,
             })
             : undefined, this.state.dataLoading ? this.renderSpinner() : undefined);
     }

package/lib/widgets/charts/ChartWidget.d.ts

@@ -11,4 +11,6 @@ export default class ChartWidget extends Widget {
     getData(design: any, schema: Schema, dataSource: DataSource, filters: any, callback: any): void;
     getFilterableTables(design: any, schema: Schema): string[];
     isAutoHeight(): boolean;
+    /** Get a list of translatable strings in the design */
+    getTranslatableStrings(design: any, schema: Schema): string[];
 }

package/lib/widgets/charts/ChartWidget.js

@@ -41,7 +41,9 @@ class ChartWidget extends Widget_1.default {
             width: options.width,
             height: options.height,
             onRowClick: options.onRowClick,
-            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.
@@ -65,5 +67,11 @@ class ChartWidget extends Widget_1.default {
     isAutoHeight() {
         return this.chart.isAutoHeight();
     }
+    /** Get a list of translatable strings in the design */
+    getTranslatableStrings(design, schema) {
+        // Clean design first
+        const cleanDesign = this.chart.cleanDesign(design, schema);
+        return this.chart.getTranslatableStrings(cleanDesign, schema);
+    }
 }
 exports.default = ChartWidget;

package/lib/widgets/charts/ChartWidgetComponent.d.ts

@@ -33,6 +33,10 @@ export interface ChartWidgetComponentProps {
     connectResizeHandle?: 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 */
+    translate: (input: string) => string;
 }
 export declare class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, {
     editDesign: any;

package/lib/widgets/charts/ChartWidgetComponent.js

@@ -87,7 +87,7 @@ class ChartWidgetComponent extends react_1.default.PureComponent {
         this.setState({ editDesign: design });
     };
     renderChart(design, onDesignChange, width, height) {
-        return react_1.default.createElement(ChartViewComponent_1.default, { chart: this.props.chart, design: design, onDesignChange: onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, widgetDataSource: this.props.widgetDataSource, scope: this.props.scope, filters: this.props.filters, width: width, height: height, onScopeChange: this.props.onScopeChange, onRowClick: this.props.onRowClick, refreshKey: this.props.refreshKey });
+        return react_1.default.createElement(ChartViewComponent_1.default, { chart: this.props.chart, design: design, onDesignChange: onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, widgetDataSource: this.props.widgetDataSource, scope: this.props.scope, filters: this.props.filters, width: width, height: height, onScopeChange: this.props.onScopeChange, onRowClick: this.props.onRowClick, refreshKey: this.props.refreshKey, locale: this.props.locale, translate: this.props.translate });
     }
     renderEditor() {
         if (!this.state.editDesign) {
@@ -149,7 +149,7 @@ class ChartWidgetComponent extends react_1.default.PureComponent {
         // Create dropdown items
         const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
         if (!designError) {
-            dropdownItems.push({ label: T `Export Data`, icon: "save-file", onClick: this.handleSaveCsvFile });
+            dropdownItems.push({ label: T `Export Data`, onClick: this.handleSaveCsvFile });
         }
         if (this.props.onDesignChange != null) {
             dropdownItems.unshift({

package/lib/widgets/charts/calendar/CalendarChart.d.ts

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

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

@@ -171,5 +171,31 @@ class CalendarChart extends Chart_1.default {
     getPlaceholderIcon() {
         return "fa-calendar";
     }
+    translateDesign(design, translate) {
+        return (0, immer_1.default)(design, draft => {
+            // Translate title text
+            if (draft.titleText) {
+                draft.titleText = translate(draft.titleText);
+            }
+            // Translate axis category labels
+            if (draft.dateAxis?.categoryLabels) {
+                for (const key in draft.dateAxis.categoryLabels) {
+                    draft.dateAxis.categoryLabels[key] = translate(draft.dateAxis.categoryLabels[key]);
+                }
+            }
+            if (draft.valueAxis?.categoryLabels) {
+                for (const key in draft.valueAxis.categoryLabels) {
+                    draft.valueAxis.categoryLabels[key] = translate(draft.valueAxis.categoryLabels[key]);
+                }
+            }
+            // Translate null labels
+            if (draft.dateAxis?.nullLabel) {
+                draft.dateAxis.nullLabel = translate(draft.dateAxis.nullLabel);
+            }
+            if (draft.valueAxis?.nullLabel) {
+                draft.valueAxis.nullLabel = translate(draft.valueAxis.nullLabel);
+            }
+        });
+    }
 }
 exports.default = CalendarChart;