@mwater/visualization 5.3.2 → 5.4.1

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

@@ -117,8 +117,8 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
             return;
         }
         const compiler = new LayeredChartCompiler_1.default({ schema: this.props.schema });
-        return R("div", null, R("div", { className: "form-text text-muted" }, "To edit title of chart, click on it directly"), this.areAxesLabelsNeeded()
-            ? R("div", { className: "mb-3" }, R("span", null, R("label", { className: "text-muted" }, this.props.design.transpose ? "Vertical Axis Label" : "Horizontal Axis Label"), " ", R("button", { className: "btn btn-secondary btn-sm", onClick: this.handleToggleXAxisLabelClick }, this.props.design.xAxisLabelText != null ? "Hide" : "Show")), this.props.design.xAxisLabelText != null
+        return R("div", null, R("div", { className: "form-text text-muted" }, T `To edit title of chart, click on it directly`), this.areAxesLabelsNeeded()
+            ? R("div", { className: "mb-3" }, R("span", null, R("label", { className: "text-muted" }, this.props.design.transpose ? T `Vertical Axis Label` : T `Horizontal Axis Label`), " ", R("button", { className: "btn btn-secondary btn-sm", onClick: this.handleToggleXAxisLabelClick }, this.props.design.xAxisLabelText != null ? T `Hide` : T `Show`)), this.props.design.xAxisLabelText != null
                 ? R("input", {
                     type: "text",
                     className: "form-control form-control-sm",
@@ -128,7 +128,7 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                 })
                 : undefined)
             : undefined, this.areAxesLabelsNeeded()
-            ? R("div", { className: "mb-3" }, R("span", null, R("label", { className: "text-muted" }, !this.props.design.transpose ? "Vertical Axis Label" : "Horizontal Axis Label"), " ", R("button", { className: "btn btn-secondary btn-sm", onClick: this.handleToggleYAxisLabelClick }, this.props.design.yAxisLabelText != null ? "Hide" : "Show")), this.props.design.yAxisLabelText != null
+            ? R("div", { className: "mb-3" }, R("span", null, R("label", { className: "text-muted" }, !this.props.design.transpose ? T `Vertical Axis Label` : T `Horizontal Axis Label`), " ", R("button", { className: "btn btn-secondary btn-sm", onClick: this.handleToggleYAxisLabelClick }, this.props.design.yAxisLabelText != null ? T `Hide` : T `Show`)), this.props.design.yAxisLabelText != null
                 ? R("input", {
                     type: "text",
                     className: "form-control form-control-sm",
@@ -141,26 +141,26 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
     }
     renderChartOptions() {
         return (react_1.default.createElement("div", null,
-            react_1.default.createElement(bootstrap_1.Checkbox, { key: "hideLegend", value: this.props.design.hideLegend, onChange: this.handleHideLegendChange }, "Hide legend"),
-            react_1.default.createElement(bootstrap_1.Checkbox, { key: "xAxisTickMultiline", value: this.props.design.xAxisTickMultiline ?? true, onChange: this.handleXAxisTickMultilineChange }, "Multiline X-Axis Labels")));
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "hideLegend", value: this.props.design.hideLegend, onChange: this.handleHideLegendChange }, T `Hide legend`),
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "xAxisTickMultiline", value: this.props.design.xAxisTickMultiline ?? true, onChange: this.handleXAxisTickMultilineChange }, T `Multiline X-Axis Labels`)));
     }
     renderType() {
         const chartTypes = [
-            { id: "bar", name: "Bar", desc: "Best for most charts" },
-            { id: "pie", name: "Pie", desc: "Compare ratios of one variable" },
-            { id: "donut", name: "Donut", desc: "Pie chart with center removed" },
-            { id: "line", name: "Line", desc: "Show how data changes smoothly over time" },
-            { id: "spline", name: "Smoothed Line", desc: "For noisy data over time" },
-            { id: "scatter", name: "Scatter", desc: "Show correlation between two number variables" },
-            { id: "area", name: "Area", desc: "For cumulative data over time" }
+            { id: "bar", name: T `Bar`, desc: T `Best for most charts` },
+            { id: "pie", name: T `Pie`, desc: T `Compare ratios of one variable` },
+            { id: "donut", name: T `Donut`, desc: T `Pie chart with center removed` },
+            { id: "line", name: T `Line`, desc: T `Show how data changes smoothly over time` },
+            { id: "spline", name: T `Smoothed Line`, desc: T `For noisy data over time` },
+            { id: "scatter", name: T `Scatter`, desc: T `Show correlation between two number variables` },
+            { id: "area", name: T `Area`, desc: T `For cumulative data over time` }
         ];
         const current = lodash_1.default.findWhere(chartTypes, { id: this.props.design.type });
-        return R(uiComponents.SectionComponent, { icon: "glyphicon-th", label: "Chart Type" }, R(uiComponents.ToggleEditComponent, {
+        return R(uiComponents.SectionComponent, { icon: "glyphicon-th", label: T `Chart Type` }, R(uiComponents.ToggleEditComponent, {
             forceOpen: !this.props.design.type,
             label: current ? current.name : "",
             editor: (onClose) => {
                 return R(uiComponents.OptionListComponent, {
-                    hint: "Select a Chart Type",
+                    hint: T `Select a Chart Type`,
                     items: lodash_1.default.map(chartTypes, ct => ({
                         name: ct.name,
                         desc: ct.desc,
@@ -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" }), " 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() {
@@ -210,23 +210,23 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
         }
         // Don't include if transpose
         const canTranspose = !["pie", "donut"].includes(design.type);
-        return R("div", { className: "text-muted" }, canTranspose ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "transpose", value: design.transpose, onChange: this.handleTransposeChange }, "Horizontal")) : undefined, canStack ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "stacked", value: design.stacked, onChange: this.handleStackedChange }, "Stacked")) : undefined, canStack ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "proportional", value: design.proportional, onChange: this.handleProportionalChange }, "Proportional")) : undefined, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.labels || false, onChange: this.handleLabelsChange }, "Show Values"), ["pie", "donut"].includes(design.type)
+        return R("div", { className: "text-muted" }, canTranspose ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "transpose", value: design.transpose, onChange: this.handleTransposeChange }, T `Horizontal`)) : undefined, canStack ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "stacked", value: design.stacked, onChange: this.handleStackedChange }, T `Stacked`)) : undefined, canStack ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "proportional", value: design.proportional, onChange: this.handleProportionalChange }, T `Proportional`)) : undefined, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.labels || false, onChange: this.handleLabelsChange }, T `Show Values`), ["pie", "donut"].includes(design.type)
             ? [
-                react_1.default.createElement(bootstrap_1.Checkbox, { key: "percentVisible", inline: true, value: design.hidePercentage, onChange: this.handlePercentageVisibilityChange }, "Hide Percentage"),
+                react_1.default.createElement(bootstrap_1.Checkbox, { key: "percentVisible", inline: true, value: design.hidePercentage, onChange: this.handlePercentageVisibilityChange }, T `Hide Percentage`),
                 react_1.default.createElement(bootstrap_1.Select, { size: "sm", value: design.polarOrder ?? "desc", onChange: this.handlePolarOrderChange, options: [
-                        { value: "desc", label: "Descending Order" },
-                        { value: "asc", label: "Ascending Order" },
-                        { value: "natural", label: "Natural Order" }
+                        { value: "desc", label: T `Descending Order` },
+                        { value: "asc", label: T `Ascending Order` },
+                        { value: "natural", label: T `Natural Order` }
                     ], inline: true })
             ]
             : undefined, design.labels && design.type === "bar" && !design.transpose
-            ? R("div", null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.popoutSmallValues || false, onChange: this.handleLabelsPopoutChange }, "Show Popout labels for small values"))
+            ? R("div", null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.popoutSmallValues || false, onChange: this.handleLabelsPopoutChange }, T `Show Popout labels for small values`))
             : undefined);
     }
     renderThresholds() {
         // Doesn't apply to polar
         if (this.props.design.type && !["pie", "donut"].includes(this.props.design.type)) {
-            return R(uiComponents.SectionComponent, { label: "Y Threshold Lines" }, R(ThresholdsComponent, {
+            return R(uiComponents.SectionComponent, { label: T `Y Threshold Lines` }, R(ThresholdsComponent, {
                 thresholds: this.props.design.yThresholds,
                 onThresholdsChange: this.handleYThresholdsChange,
                 showHighlightColor: this.props.design.type === "bar"
@@ -237,20 +237,20 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
     renderYRange() {
         // Doesn't apply to polar
         if (this.props.design.type && !["pie", "donut"].includes(this.props.design.type)) {
-            return R(uiComponents.SectionComponent, { label: "Y Axis Range" }, R(LabeledInlineComponent, { key: "min", label: "Min:" }, R(ui.NumberInput, {
+            return R(uiComponents.SectionComponent, { label: T `Y Axis Range` }, R(LabeledInlineComponent, { key: "min", label: T `Min:` }, R(ui.NumberInput, {
                 decimal: true,
                 style: { display: "inline-block" },
                 size: "sm",
                 value: this.props.design.yMin,
                 onChange: this.handleYMinChange,
-                placeholder: "Auto"
-            })), "  ", R(LabeledInlineComponent, { key: "label", label: "Max:" }, R(ui.NumberInput, {
+                placeholder: T `Auto`
+            })), "  ", R(LabeledInlineComponent, { key: "label", label: T `Max:` }, R(ui.NumberInput, {
                 decimal: true,
                 style: { display: "inline-block" },
                 size: "sm",
                 value: this.props.design.yMax,
                 onChange: this.handleYMaxChange,
-                placeholder: "Auto"
+                placeholder: T `Auto`
             })));
         }
         return null;
@@ -259,19 +259,19 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
         const tabs = [];
         tabs.push({
             id: "design",
-            label: "Design",
+            label: T `Design`,
             elem: R("div", { style: { paddingBottom: 200 } }, R("br"), this.renderType(), this.renderLayers(), this.renderThresholds(), this.renderYRange())
         });
         if (this.props.design.type) {
             tabs.push({
                 id: "labels",
-                label: "Labels",
+                label: T `Labels`,
                 elem: R("div", null, R("br"), this.renderLabels())
             });
         }
         tabs.push({
             id: "options",
-            label: "Options",
+            label: T `Options`,
             elem: R("div", null, R("br"), this.renderChartOptions())
         });
         return R(TabbedComponent_1.default, {
@@ -306,24 +306,24 @@ 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" }), " 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 {
     render() {
-        return R("div", null, R(LabeledInlineComponent, { key: "value", label: "Value:" }, R(ui.NumberInput, {
+        return R("div", null, R(LabeledInlineComponent, { key: "value", label: T `Value:` }, R(ui.NumberInput, {
             decimal: true,
             style: { display: "inline-block" },
             size: "sm",
             value: this.props.threshold.value,
             onChange: v => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { value: v }))
-        })), "  ", R(LabeledInlineComponent, { key: "label", label: "Label:" }, R(ui.TextInput, {
+        })), "  ", R(LabeledInlineComponent, { key: "label", label: T `Label:` }, R(ui.TextInput, {
             style: { display: "inline-block", width: "8em" },
             size: "sm",
             value: this.props.threshold.label,
             onChange: (v) => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { label: v }))
         })), "  ", this.props.showHighlightColor
-            ? R(LabeledInlineComponent, { key: "color", label: "Highlight color:" }, R("div", { style: { verticalAlign: "middle", display: "inline-block" } }, R(ColorComponent_1.default, {
+            ? R(LabeledInlineComponent, { key: "color", label: T `Highlight color:` }, R("div", { style: { verticalAlign: "middle", display: "inline-block" } }, R(ColorComponent_1.default, {
                 color: this.props.threshold.highlightColor,
                 onChange: (v) => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { highlightColor: v }))
             })))

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

@@ -61,31 +61,31 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     // Determine icon/label for color axis
     getXAxisLabel(layer) {
         if (this.props.design.transpose) {
-            return this.getAxisLabel("resize-vertical", "Vertical Axis");
+            return this.getAxisLabel("resize-vertical", T `Vertical Axis`);
         }
         else {
-            return this.getAxisLabel("resize-horizontal", "Horizontal Axis");
+            return this.getAxisLabel("resize-horizontal", T `Horizontal Axis`);
         }
     }
     // Determine icon/label for color axis
     getYAxisLabel(layer) {
         if (this.isLayerPolar(layer)) {
-            return this.getAxisLabel("repeat", "Angle Axis");
+            return this.getAxisLabel("repeat", T `Angle Axis`);
         }
         else if (this.props.design.transpose) {
-            return this.getAxisLabel("resize-horizontal", "Horizontal Axis");
+            return this.getAxisLabel("resize-horizontal", T `Horizontal Axis`);
         }
         else {
-            return this.getAxisLabel("resize-vertical", "Vertical Axis");
+            return this.getAxisLabel("resize-vertical", T `Vertical Axis`);
         }
     }
     // Determine icon/label for color axis
     getColorAxisLabel(layer) {
         if (this.isLayerPolar(layer)) {
-            return this.getAxisLabel("text-color", "Label Axis");
+            return this.getAxisLabel("text-color", T `Label Axis`);
         }
         else {
-            return this.getAxisLabel("equalizer", "Split Axis");
+            return this.getAxisLabel("equalizer", T `Split Axis`);
         }
     }
     // Updates layer with the specified changes
@@ -148,7 +148,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         const layer = this.props.design.layers[this.props.index];
         // R 'div', className: "form-group",
         //   R 'label', className: "text-muted", "Series Name"
-        const placeholder = this.props.design.layers.length === 1 ? "Value" : `Series ${this.props.index + 1}`;
+        const placeholder = this.props.design.layers.length === 1 ? T `Value` : T `Series ${this.props.index + 1}`;
         return R("input", {
             type: "text",
             className: "form-control form-control-sm",
@@ -165,7 +165,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     }
     renderTable() {
         const layer = this.props.design.layers[this.props.index];
-        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(expressions_ui_2.TableSelectComponent, {
+        return R(uiComponents.SectionComponent, { icon: "fa-database", label: T `Data Source` }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: layer.table,
             onChange: this.handleTableChange,
@@ -214,7 +214,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
             categoricalX ? R(ui.Checkbox, {
                 value: layer.xAxisOnlyValuesPresent,
                 onChange: this.handlexAxisOnlyValuesPresentChange
-            }, "Only show values actually present ", R(PopoverHelpComponent_1.default, { placement: 'bottom' }, "Limits values to those that are present in the data, as opposed to all choices or all dates within range")) : null,
+            }, T `Only show values actually present `, R(PopoverHelpComponent_1.default, { placement: 'bottom' }, T `Limits values to those that are present in the data, as opposed to all choices or all dates within range`)) : null,
             react_1.default.createElement("br", null)
         ];
     }
@@ -264,7 +264,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         if (!layer.axes.y || !layer.axes.x || !axisBuilder.doesAxisSupportCumulative(layer.axes.x)) {
             return;
         }
-        return R("div", { key: "cumulative" }, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: layer.cumulative, onChange: this.handleCumulativeChange }, "Cumulative"));
+        return R("div", { key: "cumulative" }, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: layer.cumulative, onChange: this.handleCumulativeChange }, T `Cumulative`));
     }
     renderTrendline() {
         const layer = this.props.design.layers[this.props.index];
@@ -273,14 +273,14 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         if (!layer.axes.y || !layer.axes.x || layer.cumulative || layer.stacked || this.props.design.stacked) {
             return;
         }
-        return R("div", { key: "trendline" }, react_1.default.createElement(bootstrap_1.Checkbox, { value: layer.trendline === "linear", onChange: this.handleTrendlineChange }, "Show linear trendline"));
+        return R("div", { key: "trendline" }, react_1.default.createElement(bootstrap_1.Checkbox, { value: layer.trendline === "linear", onChange: this.handleTrendlineChange }, T `Show linear trendline`));
     }
     renderStacked() {
         const layer = this.props.design.layers[this.props.index];
         // Only if has color axis and there are more than one layer
         if (layer.axes.color && this.props.design.layers.length > 1) {
             const stacked = layer.stacked != null ? layer.stacked : true;
-            return R("div", { key: "stacked" }, react_1.default.createElement(bootstrap_1.Checkbox, { value: stacked, onChange: this.handleStackedChange }, "Stacked"));
+            return R("div", { key: "stacked" }, react_1.default.createElement(bootstrap_1.Checkbox, { value: stacked, onChange: this.handleStackedChange }, T `Stacked`));
         }
         return null;
     }
@@ -291,10 +291,10 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
             return;
         }
         const categoricalX = new LayeredChartCompiler_1.default({ schema: this.props.schema }).isCategoricalX(this.props.design);
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, layer.axes.color ? "Default Color" : "Color"), R("div", { style: { marginLeft: 8 } }, R(ColorComponent_1.default, { color: layer.color, onChange: this.handleColorChange }), 
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, layer.axes.color ? T `Default Color` : T `Color`), R("div", { style: { marginLeft: 8 } }, R(ColorComponent_1.default, { color: layer.color, onChange: this.handleColorChange }), 
         // Allow toggling of colors
         layer.axes.x && categoricalX && !layer.axes.color
-            ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, "Set Individual Colors")
+            ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, T `Set Individual Colors`)
             : undefined));
     }
     renderFilter() {
@@ -303,7 +303,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         if (!layer.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,

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

@@ -3,7 +3,7 @@
 // Sanity-check the conversion and remove this comment.
 // Misc utils for layered charts
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAxisTypes = void 0;
+exports.getAxisTypes = getAxisTypes;
 // Get possible types for axis of a layer
 function getAxisTypes(design, layer, axis) {
     // If categorical
@@ -22,4 +22,3 @@ function getAxisTypes(design, layer, axis) {
     }
     return null;
 }
-exports.getAxisTypes = getAxisTypes;

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

@@ -33,17 +33,17 @@ const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler")
 const TextComponent_1 = __importDefault(require("../../text/TextComponent"));
 const d3 = __importStar(require("d3"));
 const billboard_js_1 = __importDefault(require("billboard.js"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 const TextWidgetDesign_1 = require("../../text/TextWidgetDesign");
 // Displays a layered chart
 class LayeredChartViewComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     header;
     footer;
     constructor(props) {
         super(props);
         this.state = {
-            headerHeight: null,
+            headerHeight: null, // Height of header
             footerHeight: null // Height of footer
         };
     }
@@ -268,7 +268,7 @@ class C3ChartComponent extends react_1.default.Component {
                     })
                         .each(function (_p) {
                         smalls.push({
-                            origin_x: box.x,
+                            origin_x: box.x, // + box.width,
                             origin_y: box.y,
                             series: map.get(p.id),
                             textY: box.y - 12 * map.get(p.id) - 10,

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

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = IntersectionDesignerComponent;
 const react_1 = __importDefault(require("react"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const update_1 = __importDefault(require("@mwater/react-library/lib/update"));
@@ -64,39 +65,40 @@ function IntersectionDesignerComponent(props) {
         props.onChange({ ...props.intersection, tableOverride });
     };
     const renderValueAxis = () => {
-        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Calculation", help: "This is the calculated value that is displayed. Leave as blank to make an empty section" },
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Calculation`, help: T `This is the calculated value that is displayed. Leave as blank to make an empty section` },
             react_1.default.createElement(AxisComponent_1.default, { schema: props.schema, dataSource: props.dataSource, table: table, types: ["enum", "text", "boolean", "date", "number"], aggrNeed: "required", value: props.intersection.valueAxis, onChange: valueAxis => props.onChange({ ...props.intersection, valueAxis }), showFormat: true, filters: props.filters })));
     };
     const renderNullValue = () => {
         if (props.intersection.valueAxis) {
-            return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Show Empty Cells as" },
-                react_1.default.createElement(ui.TextInput, { value: props.intersection.valueAxis.nullLabel ?? null, emptyNull: true, onChange: nullLabel => props.onChange({ ...props.intersection, valueAxis: { ...props.intersection.valueAxis, nullLabel: nullLabel ?? undefined } }), placeholder: "Blank" })));
+            return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Show Empty Cells as` },
+                react_1.default.createElement(ui.TextInput, { value: props.intersection.valueAxis.nullLabel ?? null, emptyNull: true, onChange: nullLabel => props.onChange({ ...props.intersection, valueAxis: { ...props.intersection.valueAxis, nullLabel: nullLabel ?? undefined } }), placeholder: T `Blank` })));
         }
         return null;
     };
     const renderFilter = () => {
         return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ui.Icon, { id: "glyphicon-filter" }),
-                " Filters") },
+                " ",
+                T `Filters`) },
             react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: props.schema, dataSource: props.dataSource, onChange: handleFilterChange, table: table, value: props.intersection.filter })));
     };
     const renderStyling = () => {
-        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, key: "styling", label: "Styling" },
-            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: props.intersection.bold, onChange: bold => props.onChange({ ...props.intersection, bold }) }, "Bold"),
-            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: props.intersection.italic, onChange: italic => props.onChange({ ...props.intersection, italic }) }, "Italic")));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, key: "styling", label: T `Styling` },
+            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: props.intersection.bold, onChange: bold => props.onChange({ ...props.intersection, bold }) }, T `Bold`),
+            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: props.intersection.italic, onChange: italic => props.onChange({ ...props.intersection, italic }) }, T `Italic`)));
     };
     const renderBackgroundColorConditions = () => {
         return (react_1.default.createElement(BackgroundColorConditionsComponent, { schema: props.schema, dataSource: props.dataSource, table: table, colorConditions: props.intersection.backgroundColorConditions, onChange: handleBackgroundColorConditionsChange }));
     };
     const renderBackgroundColorAxis = () => {
-        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Background Color From Values", help: "This is an optional background color to set on cells that is controlled by the data" },
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Background Color From Values`, help: T `This is an optional background color to set on cells that is controlled by the data` },
             react_1.default.createElement(AxisComponent_1.default, { schema: props.schema, dataSource: props.dataSource, table: table, types: ["enum", "text", "boolean", "date"], aggrNeed: "required", value: props.intersection.backgroundColorAxis, onChange: handleBackgroundColorAxisChange, showColorMap: true, filters: props.filters })));
     };
     const renderBackgroundColor = () => {
         if (props.intersection.backgroundColorAxis) {
             return;
         }
-        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Background Color", help: "This is an optional background color to set on all cells" },
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Background Color`, help: T `This is an optional background color to set on all cells` },
             react_1.default.createElement(ColorComponent_1.default, { color: props.intersection.backgroundColor, onChange: handleBackgroundColorChange })));
     };
     const renderBackgroundColorOpacityControl = () => {
@@ -105,7 +107,7 @@ function IntersectionDesignerComponent(props) {
             !props.intersection.backgroundColorConditions?.[0]) {
             return;
         }
-        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: `Background Opacity: ${Math.round((props.intersection.backgroundColorOpacity ?? 1) * 100)}%` },
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Background Opacity: ${Math.round((props.intersection.backgroundColorOpacity ?? 1) * 100)}%` },
             react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: (props.intersection.backgroundColorOpacity ?? 1) * 100, onChange: handleBackgroundColorOpacityChange })));
     };
     const renderSegmentValueAxisOverride = (segment) => {
@@ -131,10 +133,10 @@ function IntersectionDesignerComponent(props) {
         // Filter out segments that are not intersecting
         const intersectingSegmentIds = props.intersectionId.split(/[,:]/).filter(id => id !== "");
         const intersectingSegments = segments.filter(segment => intersectingSegmentIds.includes(segment.id) && segment.valueAxis);
-        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Fields to disaggregate data by (required)" }, intersectingSegments.map(segment => renderSegmentValueAxisOverride(segment))));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Fields to disaggregate data by (required)` }, intersectingSegments.map(segment => renderSegmentValueAxisOverride(segment))));
     };
     const renderOverrideTable = () => {
-        return (react_1.default.createElement(ui.CollapsibleSection, { label: "Advanced: Override Data Source", hint: "Use a different data source for this cell", labelMuted: true, initiallyOpen: props.intersection.tableOverride != null },
+        return (react_1.default.createElement(ui.CollapsibleSection, { label: T `Advanced: Override Data Source`, hint: T `Use a different data source for this cell`, labelMuted: true, initiallyOpen: props.intersection.tableOverride != null },
             react_1.default.createElement(expressions_ui_1.TableSelectComponent, { schema: props.schema, value: props.intersection.tableOverride, onChange: handleTableOverrideChange }),
             react_1.default.createElement("br", null),
             renderSegmentValueAxisOverrides()));
@@ -150,7 +152,6 @@ function IntersectionDesignerComponent(props) {
         renderBackgroundColorOpacityControl(),
         renderOverrideTable()));
 }
-exports.default = IntersectionDesignerComponent;
 /** Displays background color conditions */
 class BackgroundColorConditionsComponent extends react_1.default.Component {
     handleAdd = () => {
@@ -160,13 +161,13 @@ class BackgroundColorConditionsComponent extends react_1.default.Component {
     };
     render() {
         // List conditions
-        return (react_1.default.createElement(ui.FormGroup, { label: "Color Conditions", labelMuted: true, help: "Add conditions that, if met, set the color of the cell. Useful for flagging certain values" },
+        return (react_1.default.createElement(ui.FormGroup, { label: T `Color Conditions`, labelMuted: true, help: T `Add conditions that, if met, set the color of the cell. Useful for flagging certain values` },
             react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.colorConditions || [], renderItem: (item, index, onItemChange) => {
                     return (react_1.default.createElement(BackgroundColorConditionComponent, { key: index, colorCondition: item, table: this.props.table, schema: this.props.schema, dataSource: this.props.dataSource, onChange: onItemChange }));
                 }, onItemsChange: this.props.onChange }),
             react_1.default.createElement(ui.Button, { type: "link", size: "sm", onClick: this.handleAdd },
                 react_1.default.createElement(ui.Icon, { id: "fa-plus" }),
-                "Add Condition")));
+                T `Add Condition`)));
     }
 }
 /**
@@ -183,9 +184,9 @@ class BackgroundColorConditionComponent extends react_1.default.Component {
     }
     render() {
         return (react_1.default.createElement("div", null,
-            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Condition" },
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Condition` },
                 react_1.default.createElement(expressions_ui_2.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.update("condition"), types: ["boolean"], aggrStatuses: ["aggregate", "literal"], table: this.props.table, value: this.props.colorCondition.condition })),
-            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Color", hint: "Color to display when condition is met" },
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Color`, hint: T `Color to display when condition is met` },
                 react_1.default.createElement(ColorComponent_1.default, { color: this.props.colorCondition.color, onChange: this.update("color") }))));
     }
 }

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

@@ -37,6 +37,6 @@ export default class PivotChart extends Chart {
     createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): never[];
     createDataTable(design: PivotChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): (string | undefined)[][];
-    getFilterableTables(design: any, schema: Schema): any[];
+    getFilterableTables(design: PivotChartDesign, schema: Schema): string[];
     getPlaceholderIcon(): string;
 }

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

@@ -198,15 +198,15 @@ class PivotChart extends Chart_1.default {
         const axisBuilder = new AxisBuilder_1.default({ schema });
         // Check that has table
         if (!design.table || !schema.getTable(design.table)) {
-            return "Missing data source";
+            return T `Missing data source`;
         }
         // Check that has rows
         if (design.rows.length === 0) {
-            return "Missing rows";
+            return T `Missing rows`;
         }
         // Check that has columns
         if (design.columns.length === 0) {
-            return "Missing columns";
+            return T `Missing columns`;
         }
         let error = null;
         // Validate axes
@@ -246,7 +246,7 @@ class PivotChart extends Chart_1.default {
     }
     // Label for the edit gear dropdown
     getEditLabel() {
-        return "Configure Table";
+        return T `Configure Table`;
     }
     // Creates a design element with specified options
     // options include:
@@ -359,10 +359,18 @@ class PivotChart extends Chart_1.default {
     // Get a list of table ids that can be filtered on
     getFilterableTables(design, schema) {
         let filterableTables = design.table ? [design.table] : [];
+        // Add any table overrides from intersections
+        for (const intersection of Object.values(design.intersections)) {
+            if (intersection.tableOverride) {
+                filterableTables.push(intersection.tableOverride);
+            }
+        }
         // Get filterable tables from header and footer
         const textWidget = new TextWidget_1.default();
         filterableTables = lodash_1.default.union(filterableTables, textWidget.getFilterableTables(design.header, schema));
         filterableTables = lodash_1.default.union(filterableTables, textWidget.getFilterableTables(design.footer, schema));
+        // Remove duplicates
+        filterableTables = lodash_1.default.uniq(filterableTables);
         return filterableTables;
     }
     // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ

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

@@ -27,13 +27,14 @@ export default class PivotChartDesignerComponent extends React.Component<PivotCh
     }, HTMLElement> | null;
     renderStriping(): React.CElement<{
         label: React.ReactNode;
-        labelMuted?: boolean | undefined;
+        labelMuted?: boolean;
         hint?: React.ReactNode;
         help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
+        required?: boolean;
+        hasSuccess?: boolean;
+        hasWarnings?: boolean;
+        hasErrors?: boolean;
+        horizontal?: boolean;
     }, ui.FormGroup> | null;
     renderSetup(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;

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

@@ -76,7 +76,7 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ intersections });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,
@@ -89,7 +89,7 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,
@@ -104,16 +104,16 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         }
         return R(ui.FormGroup, {
             labelMuted: true,
-            label: "Striping"
-        }, react_1.default.createElement(ui.Radio, { key: "none", inline: true, radioValue: null, value: this.props.design.striping || null, onChange: (value) => this.updateDesign({ striping: value }) }, "None"), react_1.default.createElement(ui.Radio, { key: "columns", inline: true, radioValue: "columns", value: this.props.design.striping, onChange: (value) => this.updateDesign({ striping: value }) }, "Columns"), react_1.default.createElement(ui.Radio, { key: "rows", inline: true, value: this.props.design.striping, radioValue: "rows", onChange: (value) => this.updateDesign({ striping: value }) }, "Rows"));
+            label: T `Striping`
+        }, react_1.default.createElement(ui.Radio, { key: "none", inline: true, radioValue: null, value: this.props.design.striping || null, onChange: (value) => this.updateDesign({ striping: value }) }, T `None`), react_1.default.createElement(ui.Radio, { key: "columns", inline: true, radioValue: "columns", value: this.props.design.striping, onChange: (value) => this.updateDesign({ striping: value }) }, T `Columns`), react_1.default.createElement(ui.Radio, { key: "rows", inline: true, value: this.props.design.striping, radioValue: "rows", onChange: (value) => this.updateDesign({ striping: value }) }, T `Rows`));
     }
     // Show setup options
     renderSetup() {
         const intersectionId = `${this.props.design.rows[0].id}:${this.props.design.columns[0].id}`;
         return R("div", null, R(ui.FormGroup, {
             labelMuted: true,
-            label: "Columns",
-            help: "Field to optionally make columns out of"
+            label: T `Columns`,
+            help: T `Field to optionally make columns out of`
         }, R(AxisComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -125,8 +125,8 @@ class PivotChartDesignerComponent extends react_1.default.Component {
             filters: this.props.filters
         })), R(ui.FormGroup, {
             labelMuted: true,
-            label: "Rows",
-            help: "Field to optionally make rows out of"
+            label: T `Rows`,
+            help: T `Field to optionally make rows out of`
         }, R(AxisComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -138,8 +138,8 @@ class PivotChartDesignerComponent extends react_1.default.Component {
             filters: this.props.filters
         })), R(ui.FormGroup, {
             labelMuted: true,
-            label: "Value",
-            help: "Field show in cells"
+            label: T `Value`,
+            help: T `Field show in cells`
         }, R(AxisComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,