@mwater/visualization 5.4.5 → 5.5.0

package/lib/mwater_table_selection/MWaterCustomTablesetListComponent.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterCustomTablesetListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const UIComponents_1 = require("../UIComponents");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/** Searchable list of custom tables */
+const MWaterCustomTablesetListComponent = (props) => {
+    const [tablesets, setTablesets] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    const [showSystem, setShowSystem] = (0, react_1.useState)(false);
+    // Get list of all tablesets
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}custom_tablesets?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((tablesets) => {
+            // Filter out non-normal
+            tablesets = tablesets.filter((ts) => ts.type === "normal");
+            // Put included ones first
+            setTablesets(lodash_1.default.sortByAll(tablesets, [
+                (ts) => (props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`)) ? 0 : 1),
+                (ts) => expressions_1.ExprUtils.localizeString(ts.design.name, props.locale)
+            ]));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+            props.onChange(extraTableNeeded);
+        }
+    });
+    const selectTable = (ts, tableId) => {
+        const qualifiedTableId = `custom.${ts.code}.${tableId}`;
+        // If already included, select it
+        if (props.schema.getTable(qualifiedTableId)) {
+            props.onChange(qualifiedTableId);
+            return;
+        }
+        // Request extra tables as wildcard
+        setExtraTableNeeded(qualifiedTableId);
+        props.onExtraTableAdd(`custom.${ts.code}.*`);
+    };
+    const handleRemove = (ts) => {
+        // Remove from extra tables
+        const match = props.extraTables.find((t) => (t || "").startsWith(`custom.${ts.code}.`));
+        if (match) {
+            if (confirm(T `Remove this set of tables? Some widgets may not work correctly.`)) {
+                props.onChange(null);
+                props.onExtraTableRemove(match);
+            }
+        }
+    };
+    if (!tablesets || extraTableNeeded) {
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " ",
+            T `Loading...`));
+    }
+    const renderTableset = (ts) => {
+        const name = expressions_1.ExprUtils.localizeString(ts.design.name, props.locale) || "";
+        // Check search
+        if (search &&
+            !name.toLowerCase().includes(search.toLowerCase()) &&
+            !ts.design.tables.some((t) => expressions_1.ExprUtils.localizeString(t.name).toLowerCase().includes(search.toLowerCase()))) {
+            return null;
+        }
+        const items = ts.design.tables
+            .filter((t) => !t.deprecated)
+            .map((t) => ({
+            name: expressions_1.ExprUtils.localizeString(t.name, props.locale),
+            onClick: () => selectTable(ts, t.id)
+        }));
+        const alreadyIncluded = props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`));
+        return (react_2.default.createElement("div", { key: ts.code },
+            alreadyIncluded ? (react_2.default.createElement("div", { style: { float: "right" } },
+                react_2.default.createElement("button", { className: "btn btn-sm btn-link", type: "button", onClick: () => handleRemove(ts) },
+                    react_2.default.createElement("i", { className: "fa fa-remove" })))) : null,
+            react_2.default.createElement("h4", { className: "text-muted" }, name),
+            react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items })));
+    };
+    const visibleTablesets = tablesets.filter((ts) => (showSystem || !ts.design.system) && !ts.design.deprecated);
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...` }),
+        visibleTablesets.map((ts) => renderTableset(ts)),
+        react_2.default.createElement("div", null,
+            react_2.default.createElement("button", { className: "btn btn-link btn-sm", onClick: () => setShowSystem(!showSystem) }, showSystem ? T `Hide system tables` : T `Show system tables`))));
+};
+exports.MWaterCustomTablesetListComponent = MWaterCustomTablesetListComponent;

package/lib/mwater_table_selection/MWaterMetricsTableListComponent.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+/** Searchable list of metric tables */
+export declare const MWaterMetricsTableListComponent: (props: {
+    apiUrl: string;
+    schema: Schema;
+    client?: string;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string;
+}) => React.JSX.Element;

package/lib/mwater_table_selection/MWaterMetricsTableListComponent.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterMetricsTableListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const UIComponents_1 = require("../UIComponents");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/** Searchable list of metric tables */
+const MWaterMetricsTableListComponent = (props) => {
+    const [metrics, setMetrics] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    // Get list of all metrics
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}metrics?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((body) => {
+            // Put included ones first
+            setMetrics(lodash_1.default.sortByAll(body, [
+                (m) => (props.extraTables.some((t) => (t = `metrics:${m._id}`)) ? 0 : 1),
+                (m) => expressions_1.ExprUtils.localizeString(m.design.name, props.locale)
+            ]));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+            props.onChange(extraTableNeeded);
+        }
+    });
+    const selectTable = (metric) => {
+        const qualifiedTableId = `metrics:${metric._id}`;
+        // If already included, select it
+        if (props.schema.getTable(qualifiedTableId)) {
+            props.onChange(qualifiedTableId);
+            return;
+        }
+        // Request extra tables as wildcard
+        setExtraTableNeeded(qualifiedTableId);
+        props.onExtraTableAdd(qualifiedTableId);
+    };
+    const handleRemove = (metric) => {
+        // Remove from extra tables
+        const match = props.extraTables.find((t) => t == `metrics:${metric._id}`);
+        if (match) {
+            if (confirm(T `Remove this table? Some widgets may not work correctly.`)) {
+                props.onChange(null);
+                props.onExtraTableRemove(match);
+            }
+        }
+    };
+    if (!metrics || extraTableNeeded) {
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " ",
+            T `Loading...`));
+    }
+    const renderMetrics = () => {
+        const items = metrics
+            .filter((m) => !m.design.deprecated)
+            .map((m) => {
+            const alreadyIncluded = props.extraTables.some((t) => t == `metrics:${m._id}`);
+            return {
+                name: expressions_1.ExprUtils.localizeString(m.design.name, props.locale) || "",
+                onClick: () => selectTable(m),
+                onRemove: alreadyIncluded ? handleRemove.bind(null, m) : undefined
+            };
+        })
+            .filter((item) => !search || !item.name.toLowerCase().includes(search.toLowerCase()));
+        return react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items });
+    };
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...` }),
+        renderMetrics()));
+};
+exports.MWaterMetricsTableListComponent = MWaterMetricsTableListComponent;

package/lib/mwater_table_selection/MWaterTableSelectComponent.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { ToggleEditComponent } from "../UIComponents";
+import { Schema } from "@mwater/expressions";
+export interface MWaterTableSelectComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    table?: string;
+    /** Called with table selected */
+    onChange: (table: string | null) => void;
+    extraTables: string[];
+    onExtraTablesChange: (tables: string[]) => void;
+    /** Can also perform filtering for some types. Include these props to enable this */
+    filter?: any;
+    onFilterChange?: (filter: any) => void;
+}
+interface MWaterTableSelectComponentState {
+    pendingExtraTable: string | null;
+}
+export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
+    toggleEdit: ToggleEditComponent | null;
+    constructor(props: MWaterTableSelectComponentProps);
+    componentDidUpdate(prevProps: MWaterTableSelectComponentProps): void;
+    handleChange: (tableId: string | null) => void;
+    handleTableChange: (tableId: string | null) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/mwater_table_selection/MWaterTableSelectComponent.js

@@ -0,0 +1,158 @@
+"use strict";
+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 UIComponents_1 = require("../UIComponents");
+const expressions_1 = require("@mwater/expressions");
+const MWaterResponsesFilterComponent_1 = __importDefault(require("../MWaterResponsesFilterComponent"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+const MWaterCompleteTableSelectComponent_1 = __importDefault(require("./MWaterCompleteTableSelectComponent"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+// Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
+class MWaterTableSelectComponent extends react_1.default.Component {
+    toggleEdit = null;
+    constructor(props) {
+        super(props);
+        this.state = {
+            pendingExtraTable: null // Set when waiting for a table to load
+        };
+    }
+    componentDidUpdate(prevProps) {
+        // If received new schema with pending extra table, select it
+        let table = null;
+        if (this.state.pendingExtraTable) {
+            table = this.state.pendingExtraTable;
+            if (this.props.schema.getTable(table)) {
+                // No longer waiting
+                this.setState({ pendingExtraTable: null });
+                // Close toggle edit
+                this.toggleEdit?.close();
+                // Fire change
+                this.props.onChange(table);
+            }
+        }
+        // If table is newly selected and is a responses table and no filters, set filters to final only
+        if (this.props.table &&
+            this.props.table.match(/responses:/) &&
+            this.props.table !== prevProps.table &&
+            !this.props.filter &&
+            this.props.onFilterChange) {
+            this.props.onFilterChange({
+                type: "op",
+                op: "= any",
+                table: this.props.table,
+                exprs: [
+                    { type: "field", table: this.props.table, column: "status" },
+                    { type: "literal", valueType: "enumset", value: ["final"] }
+                ]
+            });
+        }
+    }
+    handleChange = (tableId) => {
+        // Close toggle edit
+        this.toggleEdit?.close();
+        // Call onChange if different
+        if (tableId !== this.props.table) {
+            return this.props.onChange(tableId);
+        }
+    };
+    handleTableChange = (tableId) => {
+        // If not part of extra tables, add it and wait for new schema
+        if (tableId && !this.props.schema.getTable(tableId)) {
+            return this.setState({ pendingExtraTable: tableId }, () => {
+                return this.props.onExtraTablesChange(lodash_1.default.union(this.props.extraTables, [tableId]));
+            });
+        }
+        else {
+            return this.handleChange(tableId);
+        }
+    };
+    render() {
+        const editor = react_1.default.createElement(EditModeTableSelectComponent, { apiUrl: this.props.apiUrl, client: this.props.client, schema: this.props.schema, user: this.props.user, table: this.props.table, onChange: this.handleTableChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange });
+        return (react_1.default.createElement("div", null,
+            this.state.pendingExtraTable ? (react_1.default.createElement("div", { className: "alert alert-info", key: "pendingExtraTable" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                "\u00A0",
+                T `Please wait...`)) : undefined,
+            react_1.default.createElement(UIComponents_1.ToggleEditComponent, { ref: (c) => {
+                    this.toggleEdit = c;
+                }, forceOpen: !this.props.table, label: this.props.table
+                    ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
+                    : "", editor: editor, onRemove: () => {
+                    this.props.onChange(null);
+                } }),
+            this.props.table &&
+                this.props.onFilterChange &&
+                this.props.table.match(/^responses:/) &&
+                this.props.schema.getTable(this.props.table) ? (react_1.default.createElement(MWaterResponsesFilterComponent_1.default, { schema: this.props.schema, table: this.props.table, filter: this.props.filter, onFilterChange: this.props.onFilterChange })) : undefined));
+    }
+}
+exports.default = MWaterTableSelectComponent;
+// Is the table select component when in edit mode. Toggles between complete list and simplified list
+class EditModeTableSelectComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // True when in popup mode that shows all tables
+            completeMode: false
+        };
+    }
+    handleShowMore = () => {
+        return this.setState({ completeMode: true });
+    };
+    // Get list of tables that should be included in shortlist
+    // This is all active tables and all responses tables in schema (so as to include rosters) and all extra tables
+    // Also includes current table
+    getTableShortlist(activeTables) {
+        let tables = activeTables;
+        // Remove dead tables
+        tables = tables.filter((t) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)?.deprecated);
+        tables = lodash_1.default.union(tables, lodash_1.default.filter(lodash_1.default.pluck(this.props.schema.getTables(), "id"), (t) => t.match(/^responses:/)));
+        if (this.props.table) {
+            tables = lodash_1.default.union(tables, [this.props.table]);
+        }
+        for (let extraTable of this.props.extraTables || []) {
+            // Check if wildcard
+            if (extraTable.match(/\*$/)) {
+                for (let table of this.props.schema.getTables()) {
+                    if (table.id.startsWith(extraTable.substr(0, extraTable.length - 1)) && !table.deprecated) {
+                        tables = lodash_1.default.union(tables, [table.id]);
+                    }
+                }
+            }
+            else {
+                // Add if exists
+                if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)?.deprecated) {
+                    tables = lodash_1.default.union(tables, [extraTable]);
+                }
+            }
+        }
+        // Sort by name
+        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId)?.name, T.locale));
+        return tables;
+    }
+    handleCompleteChange = (tableId) => {
+        this.setState({ completeMode: false });
+        return this.props.onChange(tableId);
+    };
+    render() {
+        return (react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Consumer, null, (activeTables) => (react_1.default.createElement("div", null,
+            this.state.completeMode ? (react_1.default.createElement(ModalPopupComponent_1.default, { header: T `Select Data Source`, onClose: () => this.setState({ completeMode: false }), showCloseX: true, size: "x-large" },
+                react_1.default.createElement(MWaterCompleteTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: this.props.schema, user: this.props.user, table: this.props.table, onChange: this.handleCompleteChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange }))) : null,
+            this.getTableShortlist(activeTables).length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "text-muted" }, T `Select Data Source:`),
+                react_1.default.createElement(UIComponents_1.OptionListComponent, { items: this.getTableShortlist(activeTables).map((tableId) => {
+                        const table = this.props.schema.getTable(tableId);
+                        return {
+                            name: expressions_1.ExprUtils.localizeString(table?.name, T.locale),
+                            desc: expressions_1.ExprUtils.localizeString(table?.desc, T.locale),
+                            onClick: () => table && this.props.onChange(table.id)
+                        };
+                    }) }),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore }, T `Show All Available Data Sources...`)))) : (react_1.default.createElement("button", { type: "button", className: "btn btn-link", onClick: this.handleShowMore }, T `Select Data Source...`))))));
+    }
+}

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

@@ -62,4 +62,15 @@ export default class Chart {
     getTranslatableStrings(design: any, schema: Schema): string[];
     /** Translates the design. Override in subclasses. Design is already cleaned. */
     translateDesign(design: any, translate: (input: string) => string): any;
+    /** Determines if the chart supports exporting to XLSX format */
+    supportsXlsxExport(): boolean;
+    /** Creates a SheetJS workbook for the chart data
+     * @param design Chart design
+     * @param schema Schema to use
+     * @param dataSource Data source
+     * @param data Data from chart
+     * @param locale Locale to use
+     * @returns base64 encoded XLSX file
+     */
+    createXlsxWorkbook(design: any, schema: Schema, dataSource: DataSource, data: any, locale: string): string;
 }

package/lib/widgets/charts/Chart.js

@@ -90,5 +90,20 @@ class Chart {
     translateDesign(design, translate) {
         return design;
     }
+    /** Determines if the chart supports exporting to XLSX format */
+    supportsXlsxExport() {
+        return false;
+    }
+    /** Creates a SheetJS workbook for the chart data
+     * @param design Chart design
+     * @param schema Schema to use
+     * @param dataSource Data source
+     * @param data Data from chart
+     * @param locale Locale to use
+     * @returns base64 encoded XLSX file
+     */
+    createXlsxWorkbook(design, schema, dataSource, data, locale) {
+        throw new Error("Not implemented");
+    }
 }
 exports.default = Chart;

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

@@ -44,6 +44,7 @@ export declare class ChartWidgetComponent extends React.PureComponent<ChartWidge
     static contextType: React.Context<string>;
     constructor(props: any);
     handleSaveCsvFile: () => void | AbortController | undefined;
+    handleSaveXlsxFile: () => void;
     handleStartEditing: () => void;
     handleEndEditing: () => void;
     handleCancelEditing: () => void;

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;
 }