@mwater/visualization 5.4.5 → 5.6.0

package/lib/widgets/charts/ChartWidgetComponent.js

@@ -69,6 +69,28 @@ class ChartWidgetComponent extends react_1.default.PureComponent {
             return FileSaver.saveAs(blob, "Exported Data.csv");
         });
     };
+    // Saves an xlsx file to disk
+    handleSaveXlsxFile = () => {
+        // Get the data
+        this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
+            if (err) {
+                console.error(err);
+                alert(T `Failed to get data: ${err.message}`);
+                return;
+            }
+            try {
+                // Create workbook
+                const blob = this.props.chart.createXlsxWorkbook(this.props.design, this.props.schema, this.props.dataSource, data, this.context);
+                // Require at use as causes server problems
+                const FileSaver = require("file-saver");
+                FileSaver.saveAs(blob, "Exported Data.xlsx");
+            }
+            catch (ex) {
+                console.error(ex);
+                alert(T `Failed to export data: ${ex.message}`);
+            }
+        });
+    };
     handleStartEditing = () => {
         // Can't edit if already editing
         if (this.state.editDesign) {
@@ -149,7 +171,11 @@ 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`, onClick: this.handleSaveCsvFile });
+            dropdownItems.push({ label: T `Export Data (CSV)`, onClick: this.handleSaveCsvFile });
+            // Add XLSX export option if supported
+            if (this.props.chart.supportsXlsxExport()) {
+                dropdownItems.push({ label: T `Export Data (XLSX)`, onClick: this.handleSaveXlsxFile });
+            }
         }
         if (this.props.onDesignChange != null) {
             dropdownItems.unshift({

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

@@ -45,7 +45,7 @@ export interface LayeredChartDesign {
 }
 export interface LayeredChartDesignLayer {
     /** bar/line/spline/scatter/area/pie/donut (overrides main one) */
-    type: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut";
+    type?: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut";
     /** table of layer */
     table: string;
     /** label for layer (optional) */

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

@@ -36,7 +36,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     handleXAxisTickMultilineChange: (value: boolean) => void;
     renderLabels(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
     renderChartOptions(): React.JSX.Element;
-    renderType(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
+    renderType(): React.JSX.Element;
     renderLayer: (index: any) => React.DetailedReactHTMLElement<{
         style: {
             paddingTop: number;

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

@@ -154,24 +154,17 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
             { 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: T `Chart Type` }, R(uiComponents.ToggleEditComponent, {
-            forceOpen: !this.props.design.type,
-            label: current ? current.name : "",
-            editor: (onClose) => {
-                return R(uiComponents.OptionListComponent, {
-                    hint: T `Select a Chart Type`,
-                    items: lodash_1.default.map(chartTypes, ct => ({
+        const current = chartTypes.find(ct => ct.id === this.props.design.type);
+        return (react_1.default.createElement(uiComponents.SectionComponent, { label: T `Chart Type` },
+            react_1.default.createElement(uiComponents.ToggleEditComponent, { forceOpen: !this.props.design.type, label: current ? current.name : "", editor: (onClose) => (react_1.default.createElement(uiComponents.OptionListComponent, { hint: T `Select a Chart Type`, items: chartTypes.map(ct => ({
                         name: ct.name,
                         desc: ct.desc,
                         onClick: () => {
                             onClose(); // Close editor first
                             return this.handleTypeChange(ct.id);
                         }
-                    }))
-                });
-            }
-        }), this.renderOptions());
+                    })) })) }),
+            this.renderOptions()));
     }
     renderLayer = (index) => {
         const style = {

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

@@ -1,66 +1,52 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
-import * as uiComponents from "../../../UIComponents";
+import { DataSource, Schema, LiteralType, Expr } from "@mwater/expressions";
+import { LayeredChartDesignLayer, LayeredChartDesign } from "./LayeredChartDesign";
+import { Axis } from "../../../axes/Axis";
+import { JsonQLFilter } from "@mwater/visualization";
 export interface LayeredChartLayerDesignerComponentProps {
-    design: any;
+    design: LayeredChartDesign;
     schema: Schema;
     dataSource: DataSource;
     index: number;
-    onChange: any;
-    onRemove: any;
-    filters?: any;
+    onChange: (layer: LayeredChartDesignLayer) => void;
+    onRemove: () => void;
+    filters?: JsonQLFilter[];
 }
 export default class LayeredChartLayerDesignerComponent extends React.Component<LayeredChartLayerDesignerComponentProps> {
-    isLayerPolar(layer: any): boolean;
-    doesLayerNeedGrouping(layer: any): boolean;
-    isXAxisRequired(layer: any): boolean;
-    getAxisTypes(layer: any, axisKey: any): string[] | null;
-    getAxisLabel(icon: any, label: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    getXAxisLabel(layer: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    getYAxisLabel(layer: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    getColorAxisLabel(layer: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    updateLayer(changes: any): any;
-    updateAxes(changes: any): any;
-    handleNameChange: (ev: any) => any;
-    handleTableChange: (table: any) => any;
-    handleXAxisChange: (axis: any) => any;
-    handleXColorMapChange: (xColorMap: any) => any;
-    handleColorAxisChange: (axis: any) => any;
-    handleYAxisChange: (axis: any) => any;
-    handleFilterChange: (filter: any) => any;
-    handleColorChange: (color: any) => any;
-    handleCumulativeChange: (value: any) => any;
-    handleTrendlineChange: (value: any) => any;
-    handleStackedChange: (value: any) => any;
-    renderName(): React.DetailedReactHTMLElement<{
-        type: string;
-        className: string;
-        value: any;
-        onChange: (ev: any) => any;
-        placeholder: string;
-    }, HTMLElement>;
-    renderRemove(): React.DetailedReactHTMLElement<{
-        className: string;
-        type: string;
-        onClick: any;
-    }, HTMLElement> | null;
-    renderTable(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
+    isLayerPolar(layer: LayeredChartDesignLayer): boolean;
+    doesLayerNeedGrouping(layer: LayeredChartDesignLayer): boolean;
+    isXAxisRequired(layer: LayeredChartDesignLayer): boolean;
+    getAxisTypes(layer: LayeredChartDesignLayer, axisKey: any): LiteralType[] | undefined;
+    getAxisLabel(icon: any, label: any): React.JSX.Element;
+    getXAxisLabel(layer: LayeredChartDesignLayer): React.JSX.Element;
+    getYAxisLabel(layer: LayeredChartDesignLayer): React.JSX.Element;
+    getColorAxisLabel(layer: LayeredChartDesignLayer): React.JSX.Element;
+    updateLayer(changes: Partial<LayeredChartDesignLayer>): void;
+    updateAxes(changes: Partial<LayeredChartDesignLayer["axes"]>): void;
+    handleNameChange: (ev: any) => void;
+    handleLayerTypeChange: (type: LayeredChartDesignLayer["type"]) => void;
+    handleTableChange: (table: string) => void;
+    handleXAxisChange: (axis: Axis) => void;
+    handleXColorMapChange: (xColorMap: boolean) => void;
+    handleColorAxisChange: (axis: Axis) => void;
+    handleYAxisChange: (axis: Axis) => void;
+    handleFilterChange: (filter: Expr) => void;
+    handleColorChange: (color: string) => void;
+    handleCumulativeChange: (value: boolean) => void;
+    handleTrendlineChange: (value: boolean) => void;
+    handleStackedChange: (value: boolean) => void;
+    renderName(): React.JSX.Element;
+    renderRemove(): React.JSX.Element | undefined;
+    renderTable(): React.JSX.Element;
+    renderLayerTypeSelector(): React.JSX.Element | null;
     handlexAxisOnlyValuesPresentChange: (xAxisOnlyValuesPresent: boolean) => void;
-    renderXAxis(): (React.JSX.Element | null)[] | undefined;
-    renderColorAxis(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderYAxis(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderCumulative(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
-    renderTrendline(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
-    renderStacked(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
-    renderColor(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | undefined;
-    renderFilter(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderXAxis(): React.ReactNode[] | undefined;
+    renderColorAxis(): React.JSX.Element | undefined;
+    renderYAxis(): React.JSX.Element | undefined;
+    renderCumulative(): React.JSX.Element | undefined;
+    renderTrendline(): React.JSX.Element | undefined;
+    renderStacked(): React.JSX.Element | undefined;
+    renderColor(): React.JSX.Element | undefined;
+    renderFilter(): React.JSX.Element | undefined;
+    render(): React.JSX.Element;
 }

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

@@ -26,9 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
@@ -53,18 +51,22 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         return !this.isLayerPolar(layer);
     }
     getAxisTypes(layer, axisKey) {
-        return LayeredChartUtils.getAxisTypes(this.props.design, layer, axisKey);
+        const types = LayeredChartUtils.getAxisTypes(this.props.design, layer, axisKey);
+        return types ?? undefined;
     }
     getAxisLabel(icon, label) {
-        return R("span", null, R("span", { className: "glyphicon glyphicon-" + icon }), " " + label);
+        return react_1.default.createElement("span", null,
+            react_1.default.createElement("i", { className: `fas fa-${icon}` }),
+            " ",
+            label);
     }
     // Determine icon/label for color axis
     getXAxisLabel(layer) {
         if (this.props.design.transpose) {
-            return this.getAxisLabel("resize-vertical", T `Vertical Axis`);
+            return this.getAxisLabel("arrows-v", T `Vertical Axis`);
         }
         else {
-            return this.getAxisLabel("resize-horizontal", T `Horizontal Axis`);
+            return this.getAxisLabel("arrows-h", T `Horizontal Axis`);
         }
     }
     // Determine icon/label for color axis
@@ -73,10 +75,10 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
             return this.getAxisLabel("repeat", T `Angle Axis`);
         }
         else if (this.props.design.transpose) {
-            return this.getAxisLabel("resize-horizontal", T `Horizontal Axis`);
+            return this.getAxisLabel("arrows-h", T `Horizontal Axis`);
         }
         else {
-            return this.getAxisLabel("resize-vertical", T `Vertical Axis`);
+            return this.getAxisLabel("arrows-v", T `Vertical Axis`);
         }
     }
     // Determine icon/label for color axis
@@ -90,17 +92,20 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     }
     // Updates layer with the specified changes
     updateLayer(changes) {
-        const layer = lodash_1.default.extend({}, this.props.design.layers[this.props.index], changes);
+        const layer = { ...this.props.design.layers[this.props.index], ...changes };
         return this.props.onChange(layer);
     }
     // Update axes with specified changes
     updateAxes(changes) {
-        const axes = lodash_1.default.extend({}, this.props.design.layers[this.props.index].axes, changes);
+        const axes = { ...this.props.design.layers[this.props.index].axes, ...changes };
         return this.updateLayer({ axes });
     }
     handleNameChange = (ev) => {
         return this.updateLayer({ name: ev.target.value });
     };
+    handleLayerTypeChange = (type) => {
+        this.updateLayer({ type: type === this.props.design.type ? undefined : type });
+    };
     handleTableChange = (table) => {
         return this.updateLayer({ table });
     };
@@ -114,7 +119,6 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         return this.updateAxes(axesChanges);
     };
     handleXColorMapChange = (xColorMap) => {
-        const layer = this.props.design.layers[this.props.index];
         return this.updateLayer({ xColorMap });
     };
     handleColorAxisChange = (axis) => {
@@ -146,32 +150,57 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     };
     renderName() {
         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 ? T `Value` : T `Series ${this.props.index + 1}`;
-        return R("input", {
-            type: "text",
-            className: "form-control form-control-sm",
-            value: layer.name,
-            onChange: this.handleNameChange,
-            placeholder
-        });
+        return react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", value: layer.name, onChange: this.handleNameChange, placeholder: placeholder });
     }
     renderRemove() {
         if (this.props.design.layers.length > 1) {
-            return R("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }));
+            return (react_1.default.createElement("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove },
+                react_1.default.createElement("span", { className: "fas fa-times" })));
         }
-        return null;
+        return undefined;
     }
     renderTable() {
         const layer = this.props.design.layers[this.props.index];
-        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,
-            filter: layer.filter,
-            onFilterChange: this.handleFilterChange
-        }));
+        return (react_1.default.createElement(uiComponents.SectionComponent, { icon: "fa-database", label: T `Data Source` },
+            react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: layer.table, onChange: this.handleTableChange, filter: layer.filter, onFilterChange: this.handleFilterChange })));
+    }
+    renderLayerTypeSelector() {
+        const layer = this.props.design.layers[this.props.index];
+        const { design, index } = this.props;
+        if (index === 0) {
+            return null;
+        }
+        const mainType = design.type;
+        const isMainPolar = ["pie", "donut"].includes(mainType);
+        const compatibleTypes = isMainPolar
+            ? [
+                { value: "pie", label: T `Pie` },
+                { value: "donut", label: T `Donut` }
+            ]
+            : [
+                { value: "bar", label: T `Bar` },
+                { value: "line", label: T `Line` },
+                { value: "spline", label: T `Smoothed Line` },
+                { value: "area", label: T `Area` }
+            ];
+        // Add the main type as the first option if it's not already there (e.g. if main is scatter)
+        if (!compatibleTypes.some((t) => t.value === mainType)) {
+            compatibleTypes.unshift({ value: mainType, label: T(mainType) });
+        }
+        // Assign names for OptionListComponent
+        compatibleTypes.forEach((t) => (t.name = t.label));
+        const currentType = layer.type || mainType;
+        const currentTypeLabel = compatibleTypes.find((t) => t.value === currentType)?.label || T(currentType);
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Layer Chart Type`),
+            react_1.default.createElement(uiComponents.ToggleEditComponent, { label: currentTypeLabel, editor: (onClose) => (react_1.default.createElement(uiComponents.OptionListComponent, { hint: T `Select a Chart Type`, items: compatibleTypes.map((ct) => ({
+                        name: ct.name || "",
+                        onClick: () => {
+                            onClose(); // Close editor first
+                            return this.handleLayerTypeChange(ct.value);
+                        }
+                    })) })) })));
     }
     handlexAxisOnlyValuesPresentChange = (xAxisOnlyValuesPresent) => {
         this.updateLayer({ xAxisOnlyValuesPresent });
@@ -179,13 +208,13 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     renderXAxis() {
         const layer = this.props.design.layers[this.props.index];
         if (!layer.table) {
-            return;
+            return undefined;
         }
         if (!this.isXAxisRequired(layer)) {
-            return;
+            return undefined;
         }
         const title = this.getXAxisLabel(layer);
-        const filters = lodash_1.default.clone(this.props.filters) || [];
+        const filters = this.props.filters ? this.props.filters.slice() : [];
         if (layer.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
             const jsonql = exprCompiler.compileExpr({ expr: layer.filter, tableAlias: "{alias}" });
@@ -195,67 +224,38 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
         }
         const categoricalX = new LayeredChartCompiler_1.default({ schema: this.props.schema }).isCategoricalX(this.props.design);
         return [
-            R(uiComponents.SectionComponent, { label: title }, R(AxisComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                table: layer.table,
-                types: this.getAxisTypes(layer, "x"),
-                aggrNeed: "none",
-                required: true,
-                value: layer.axes.x,
-                onChange: this.handleXAxisChange,
-                filters,
-                // Only show x color map if no color axis and is categorical and enabled
-                showColorMap: layer.xColorMap && categoricalX && !layer.axes.color,
-                autosetColors: false,
-                // Categorical X can exclude values
-                allowExcludedValues: categoricalX
-            })),
-            categoricalX ? R(ui.Checkbox, {
-                value: layer.xAxisOnlyValuesPresent,
-                onChange: this.handlexAxisOnlyValuesPresentChange
-            }, 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)
+            react_1.default.createElement(uiComponents.SectionComponent, { key: "axis", label: title },
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: layer.table, types: this.getAxisTypes(layer, "x"), aggrNeed: "none", required: true, value: layer.axes.x, onChange: this.handleXAxisChange, filters: filters, showColorMap: layer.xColorMap && categoricalX && !layer.axes.color, autosetColors: false, allowExcludedValues: categoricalX })),
+            categoricalX ? (react_1.default.createElement(ui.Checkbox, { key: "checkbox", value: layer.xAxisOnlyValuesPresent, onChange: this.handlexAxisOnlyValuesPresentChange },
+                T `Only show values actually present `,
+                react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, T `Limits values to those that are present in the data, as opposed to all choices or all dates within range`))) : undefined,
+            react_1.default.createElement("br", { key: "br" })
         ];
     }
     renderColorAxis() {
         const layer = this.props.design.layers[this.props.index];
         if (!layer.table) {
-            return;
+            return undefined;
         }
         const title = this.getColorAxisLabel(layer);
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: layer.table,
-            types: this.getAxisTypes(layer, "color"),
-            aggrNeed: "none",
-            required: this.isLayerPolar(layer),
-            showColorMap: true,
-            value: layer.axes.color,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            filters: this.props.filters
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: layer.table, types: this.getAxisTypes(layer, "color"), aggrNeed: "none", required: this.isLayerPolar(layer), showColorMap: true, value: layer.axes.color, onChange: this.handleColorAxisChange, allowExcludedValues: true, filters: this.props.filters }))));
     }
     renderYAxis() {
         const layer = this.props.design.layers[this.props.index];
         if (!layer.table) {
-            return;
+            return undefined;
         }
         const title = this.getYAxisLabel(layer);
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: layer.table,
-            types: this.getAxisTypes(layer, "y"),
-            aggrNeed: this.doesLayerNeedGrouping(layer) ? "required" : "none",
-            value: layer.axes.y,
-            required: true,
-            filters: this.props.filters,
-            showFormat: true,
-            onChange: this.handleYAxisChange
-        }), this.renderCumulative(), this.renderStacked(), this.renderTrendline()));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: layer.table, types: this.getAxisTypes(layer, "y"), aggrNeed: this.doesLayerNeedGrouping(layer) ? "required" : "none", value: layer.axes.y, required: true, filters: this.props.filters, showFormat: true, onChange: this.handleYAxisChange }),
+                this.renderCumulative(),
+                this.renderStacked(),
+                this.renderTrendline())));
     }
     renderCumulative() {
         const layer = this.props.design.layers[this.props.index];
@@ -264,7 +264,8 @@ 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 }, T `Cumulative`));
+        return (react_1.default.createElement("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,58 +274,60 @@ 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 }, T `Show linear trendline`));
+        return (react_1.default.createElement("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 }, T `Stacked`));
+            return (react_1.default.createElement("div", { key: "stacked" },
+                react_1.default.createElement(bootstrap_1.Checkbox, { value: stacked, onChange: this.handleStackedChange }, T `Stacked`)));
         }
-        return null;
+        return undefined;
     }
     renderColor() {
         const layer = this.props.design.layers[this.props.index];
         // If not table do nothing
         if (!layer.table) {
-            return;
+            return undefined;
         }
         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 ? 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 }, T `Set Individual Colors`)
-            : undefined));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, layer.axes.color ? T `Default Color` : T `Color`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(ColorComponent_1.default, { color: layer.color, onChange: this.handleColorChange }),
+                layer.axes.x && categoricalX && !layer.axes.color ? (react_1.default.createElement(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, T `Set Individual Colors`)) : undefined)));
     }
     renderFilter() {
         const layer = this.props.design.layers[this.props.index];
         // If no table, hide
         if (!layer.table) {
-            return null;
+            return undefined;
         }
-        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,
-            table: layer.table,
-            value: layer.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                " ",
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: layer.table, value: layer.filter }))));
     }
     render() {
         const layer = this.props.design.layers[this.props.index];
-        return R("div", null, this.props.index > 0 ? R("hr") : undefined, this.renderRemove(), this.renderTable(), 
-        // Color axis first for pie
-        this.isLayerPolar(layer) ? this.renderColorAxis() : undefined, this.renderXAxis(), layer.axes.x || layer.axes.color ? this.renderYAxis() : undefined, layer.axes.x && layer.axes.y && !this.isLayerPolar(layer) ? this.renderColorAxis() : undefined, 
-        // No default color for polar
-        (() => {
-            if (!this.isLayerPolar(layer)) {
-                if (layer.axes.y) {
-                    return this.renderColor();
-                }
-            }
-            return null;
-        })(), layer.axes.y ? this.renderFilter() : undefined, layer.axes.y ? this.renderName() : undefined);
+        return (react_1.default.createElement("div", null,
+            this.props.index > 0 ? react_1.default.createElement("hr", null) : undefined,
+            this.renderRemove(),
+            this.renderTable(),
+            this.renderLayerTypeSelector(),
+            this.isLayerPolar(layer) ? this.renderColorAxis() : undefined,
+            this.renderXAxis(),
+            layer.axes.x || layer.axes.color ? this.renderYAxis() : undefined,
+            layer.axes.x && layer.axes.y && !this.isLayerPolar(layer) ? this.renderColorAxis() : undefined,
+            !this.isLayerPolar(layer) && layer.axes.y ? this.renderColor() : undefined,
+            layer.axes.y ? this.renderFilter() : undefined,
+            layer.axes.y ? this.renderName() : undefined));
     }
 }
 exports.default = LayeredChartLayerDesignerComponent;

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

@@ -1 +1,2 @@
-export declare function getAxisTypes(design: any, layer: any, axis: any): string[] | null;
+import { LiteralType } from "@mwater/expressions";
+export declare function getAxisTypes(design: any, layer: any, axis: any): LiteralType[] | null;

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

@@ -1,6 +1,4 @@
 "use strict";
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
 // Misc utils for layered charts
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAxisTypes = getAxisTypes;

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

@@ -40,4 +40,6 @@ export default class PivotChart extends Chart {
     getFilterableTables(design: PivotChartDesign, schema: Schema): string[];
     getPlaceholderIcon(): string;
     translateDesign(design: PivotChartDesign, translate: (input: string) => string): PivotChartDesign;
+    supportsXlsxExport(): boolean;
+    createXlsxWorkbook(design: PivotChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any;
 }