@mwater/visualization 5.4.0 → 5.4.2

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;

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

@@ -557,8 +557,8 @@ class LayeredChartCompiler {
                 if (layer.trendline === "linear") {
                     const trendlineSeries = seriesY + ":trendline";
                     columns.push([trendlineSeries].concat(calculateLinearRegression(yValues, xValues)));
-                    types[trendlineSeries] = (0, billboard_js_1.line)();
-                    names[trendlineSeries] = names[seriesY] + T ` Trendline`;
+                    types[trendlineSeries] = billboard_js_1.line ? (0, billboard_js_1.line)() : "line";
+                    names[trendlineSeries] = names[seriesY] + " " + T `Trendline`;
                     xs[trendlineSeries] = seriesX;
                     colors[trendlineSeries] = layer.color || defaultColors[layerIndex];
                     legendHide.push(trendlineSeries); // Hide in legend
@@ -803,7 +803,7 @@ class LayeredChartCompiler {
                         trendYs = lodash_1.default.initial(trendYs);
                     }
                     columns.push([trendlineSeries].concat(calculateLinearRegression(trendYs, trendXs)));
-                    types[trendlineSeries] = (0, billboard_js_1.line)();
+                    types[trendlineSeries] = billboard_js_1.line ? (0, billboard_js_1.line)() : "line";
                     names[trendlineSeries] = names[series] + " Trendline";
                     xs[trendlineSeries] = "x";
                     colors[trendlineSeries] = layer.color || defaultColors[layerIndex];

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/PivotChartDesignerComponent.d.ts

@@ -34,6 +34,7 @@ export default class PivotChartDesignerComponent extends React.Component<PivotCh
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup> | null;
     renderSetup(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;

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.d.ts

@@ -36,6 +36,7 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup>;
     renderLabel(): React.CElement<{
         label: React.ReactNode;
@@ -46,6 +47,7 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup>;
     renderValueAxis(): React.JSX.Element;
     renderFilter(): React.CElement<{
@@ -57,6 +59,7 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup>;
     renderStyling(): React.CElement<{
         label: React.ReactNode;
@@ -67,6 +70,7 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup>;
     renderBorders(): React.CElement<{
         label: React.ReactNode;
@@ -77,6 +81,7 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup>;
     renderOrderExpr(): React.CElement<{
         label: React.ReactNode;
@@ -87,6 +92,7 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
         hasSuccess?: boolean;
         hasWarnings?: boolean;
         hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }

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;