@mwater/visualization 5.0.0

package/lib/maps/ChoroplethLayerDesign.d.ts

@@ -0,0 +1,56 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../axes/Axis";
+import { HoverOverItem } from "./maps";
+/**
+ * Layer that is composed of regions colored. Now extended to any other regions as well, so name
+ * is legacy, as is adminRegionExpr field.
+ */
+export default interface ChoroplethLayerDesign {
+    /**
+     * Mode of map made from regions.
+     * "plain": no axes, just displays regions
+     * "indirect": default. Uses a table that has a region id in it. axes are from the table
+     * "direct": axes are non-aggregate and based on the regions table
+     */
+    regionMode?: "plain" | "indirect" | "direct";
+    /** null for "admin_regions" (default). id of region table if not using admin regions (e.g. regions.catchments) */
+    regionsTable: string | null;
+    /** _id of overall region. Null for whole world. */
+    scope: string | number | null;
+    /** level of scope. Default is 0 (entire country for admin regions) if scope is set */
+    scopeLevel: number | null;
+    /** region level to disaggregate to */
+    detailLevel: number;
+    /** table to get data from for regionMode = "indirect" */
+    table?: string | null;
+    /** expression to get admin region id for calculations. Only if regionMode = "indirect" */
+    adminRegionExpr?: Expr;
+    /** axes (see below) */
+    axes: {
+        /** color axis. If in region mode "indirect", aggregate on table, if in region mode "direct", from region table, non-aggregate */
+        color?: Axis | null;
+        /** overrides the nameLabels to display text on each region. If in region mode "indirect", aggregate on table, if in region mode "direct", from region table, non-aggregate */
+        label?: Axis | null;
+    };
+    /** optional logical expression to filter by. Only when region mode is "indirect" */
+    filter?: Expr;
+    /** default color (e.g. #FF8800). Color axis overrides. Only in plain mode */
+    color?: string | null;
+    /** opacity of fill of regions (0-1). Note: this is the square root of the true opacity for historical reasons */
+    fillOpacity: number;
+    /** Border color (default to #000) */
+    borderColor?: string | null;
+    /** true to display name labels on regions */
+    displayNames: boolean;
+    /** contains items: which is BlocksLayoutManager items. Will be displayed when the region is clicked. Only when region mode is "indirect" */
+    popup: any;
+    hoverOver: {
+        items: HoverOverItem[];
+    };
+    /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
+    popupFilterJoins: any;
+    /** minimum zoom level */
+    minZoom?: number;
+    /** maximum zoom level */
+    maxZoom?: number;
+}

package/lib/maps/ChoroplethLayerDesign.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/maps/ChoroplethLayerDesigner.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { Schema, DataSource, Expr } from "@mwater/expressions";
+import ChoroplethLayerDesign from "./ChoroplethLayerDesign";
+import { JsonQLFilter } from "../index";
+import EditPopupComponent from "./EditPopupComponent";
+import { Axis } from "../axes/Axis";
+import ScopeAndDetailLevelComponent from "./ScopeAndDetailLevelComponent";
+export default class ChoroplethLayerDesigner extends React.Component<{
+    schema: Schema;
+    dataSource: DataSource;
+    design: ChoroplethLayerDesign;
+    onDesignChange: (design: ChoroplethLayerDesign) => void;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters: JsonQLFilter[];
+}> {
+    update(mutation: (d: ChoroplethLayerDesign) => void): void;
+    handleScopeAndDetailLevelChange: (scope: string | number | null, scopeLevel: number | null, detailLevel: number) => void;
+    autoselectAdminRegionExpr: (table: string, regionsTable: string | null) => Expr;
+    handleTableChange: (table: string | null) => void;
+    handleColorChange: (color: string | null) => void;
+    handleBorderColorChange: (color: string | null) => void;
+    handleFilterChange: (filter: Expr) => void;
+    handleColorAxisChange: (axis: Axis) => void;
+    handleRegionsTableChange: (regionsTable: string) => void;
+    handleAdminRegionExprChange: (expr: Expr) => void;
+    handleRegionModeChange: (regionMode: "plain" | "indirect" | "direct") => void;
+    handleFillOpacityChange: (fillOpacity: number) => void;
+    handleDisplayNamesChange: (displayNames: boolean) => void;
+    renderRegionMode(): React.JSX.Element;
+    renderTable(): React.JSX.Element | null;
+    renderRegionsTable(): React.JSX.Element;
+    renderAdminRegionExpr(): React.JSX.Element | null;
+    renderScopeAndDetailLevel(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.CElement<import("./ScopeAndDetailLevelComponent").ScopeAndDetailLevelComponentProps, ScopeAndDetailLevelComponent>;
+    renderDisplayNames(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderColor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    renderColorAxis(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null | undefined;
+    renderFillOpacity(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderBorderColor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    renderPopup(): React.CElement<any, EditPopupComponent> | null;
+    renderHoverOver(): React.FunctionComponentElement<import("./EditHoverOver").EditHoverOverProps> | null;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/maps/ChoroplethLayerDesigner.js

@@ -0,0 +1,382 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 immer_1 = require("immer");
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const rc_slider_1 = __importDefault(require("rc-slider"));
+const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
+const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const AdminScopeAndDetailLevelComponent_1 = __importDefault(require("./AdminScopeAndDetailLevelComponent"));
+const ScopeAndDetailLevelComponent_1 = __importDefault(require("./ScopeAndDetailLevelComponent"));
+const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+// Designer for a choropleth layer
+class ChoroplethLayerDesigner extends react_1.default.Component {
+    update(mutation) {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, mutation));
+    }
+    handleScopeAndDetailLevelChange = (scope, scopeLevel, detailLevel) => {
+        this.update(d => {
+            d.scope = scope;
+            d.scopeLevel = scopeLevel;
+            d.detailLevel = detailLevel;
+        });
+    };
+    autoselectAdminRegionExpr = (table, regionsTable) => {
+        // Autoselect region if present
+        let adminRegionExpr = null;
+        for (let column of this.props.schema.getColumns(table)) {
+            if (column.type === "join" && column.join.type === "n-1" && column.join.toTable === regionsTable) {
+                return { type: "field", table, column: column.id };
+            }
+            if (column.type === "id" && column.idTable === regionsTable) {
+                return { type: "field", table, column: column.id };
+            }
+        }
+        return null;
+    };
+    handleTableChange = (table) => {
+        // Autoselect region if present
+        let adminRegionExpr = null;
+        const regionsTable = this.props.design.regionsTable || "admin_regions";
+        if (table) {
+            adminRegionExpr = this.autoselectAdminRegionExpr(table, regionsTable);
+        }
+        this.update(d => {
+            d.table = table;
+            d.adminRegionExpr = adminRegionExpr;
+        });
+    };
+    handleColorChange = (color) => {
+        this.update(d => {
+            d.color = color;
+        });
+    };
+    handleBorderColorChange = (color) => {
+        this.update(d => {
+            d.borderColor = color;
+        });
+    };
+    handleFilterChange = (filter) => {
+        this.update(d => {
+            d.filter = filter;
+        });
+    };
+    handleColorAxisChange = (axis) => {
+        this.update(d => {
+            d.axes.color = axis;
+        });
+    };
+    handleRegionsTableChange = (regionsTable) => {
+        this.update(d => {
+            d.regionsTable = regionsTable == "admin_regions" ? null : regionsTable;
+            d.scope = null;
+            d.scopeLevel = null;
+            (d.detailLevel = 0),
+                (d.adminRegionExpr = this.props.design.table
+                    ? this.autoselectAdminRegionExpr(this.props.design.table, regionsTable)
+                    : null);
+        });
+    };
+    handleAdminRegionExprChange = (expr) => {
+        this.update(d => {
+            d.adminRegionExpr = expr;
+        });
+    };
+    handleRegionModeChange = (regionMode) => {
+        this.update(d => {
+            d.regionMode = regionMode;
+        });
+    };
+    handleFillOpacityChange = (fillOpacity) => {
+        this.update(d => {
+            d.fillOpacity = fillOpacity;
+        });
+    };
+    handleDisplayNamesChange = (displayNames) => {
+        this.update(d => {
+            d.displayNames = displayNames;
+        });
+    };
+    renderRegionMode() {
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, "Mode"),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "plain", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, "Single Color"),
+                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "indirect", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, "Color By Data"),
+                react_1.default.createElement(ui.Radio, { inline: true, radioValue: "direct", value: this.props.design.regionMode, onChange: this.handleRegionModeChange }, "Advanced"))));
+    }
+    renderTable() {
+        // Only for indirect
+        if (this.props.design.regionMode !== "indirect") {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " Data Source"),
+            react_1.default.createElement(TableSelectComponent_1.default, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
+    }
+    renderRegionsTable() {
+        let options = lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.")), table => ({ value: table.id, label: table.name.en }));
+        const regionsTable = this.props.design.regionsTable || "admin_regions";
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, "Regions Type"),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement("select", { value: regionsTable, onChange: ev => this.handleRegionsTableChange(ev.target.value), className: "form-select" },
+                    react_1.default.createElement("option", { value: "admin_regions" }, "Administrative Regions (from mWater global database)"),
+                    react_1.default.createElement("option", { disabled: true }, "\u2500\u2500 Custom regions (special regions uploaded for specific purposes) \u2500\u2500"),
+                    options.map(opt => (react_1.default.createElement("option", { value: opt.value }, opt.label)))))));
+    }
+    renderAdminRegionExpr() {
+        // Only for indirect
+        if (this.props.design.regionMode !== "indirect") {
+            return null;
+        }
+        // If no data, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        const regionsTable = this.props.design.regionsTable || "admin_regions";
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fas fa-map-marker-alt" }),
+                " Location"),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleAdminRegionExprChange, table: this.props.design.table, types: ["id"], idTable: regionsTable, value: this.props.design.adminRegionExpr || null }))));
+    }
+    renderScopeAndDetailLevel() {
+        const regionsTable = this.props.design.regionsTable || "admin_regions";
+        if (regionsTable === "admin_regions") {
+            return R(AdminScopeAndDetailLevelComponent_1.default, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                scope: this.props.design.scope,
+                scopeLevel: this.props.design.scopeLevel || 0,
+                detailLevel: this.props.design.detailLevel,
+                onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange
+            });
+        }
+        else {
+            return R(ScopeAndDetailLevelComponent_1.default, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                scope: this.props.design.scope,
+                scopeLevel: this.props.design.scopeLevel,
+                detailLevel: this.props.design.detailLevel,
+                onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange,
+                regionsTable
+            });
+        }
+    }
+    renderDisplayNames() {
+        return R("div", { className: "mb-3" }, react_1.default.createElement(ui.Checkbox, { value: this.props.design.displayNames, onChange: value => this.handleDisplayNamesChange(value) }, "Display Region Names"));
+    }
+    renderColor() {
+        // Only if plain
+        if (this.props.design.regionMode !== "plain") {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Fill Color"), R("div", null, R(ColorComponent_1.default, {
+            color: this.props.design.color,
+            onChange: this.handleColorChange
+        })));
+    }
+    renderColorAxis() {
+        // Not applicable if in plain mode, or if in indirect mode with no table
+        if (this.props.design.regionMode === "plain") {
+            return;
+        }
+        else if (this.props.design.regionMode === "indirect") {
+            if (!this.props.design.table) {
+                return null;
+            }
+            const filters = lodash_1.default.clone(this.props.filters) || [];
+            if (this.props.design.filter) {
+                const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+                const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+                let filterTable = this.props.design.filter.table;
+                if (jsonql && filterTable) {
+                    filters.push({ table: filterTable, jsonql });
+                }
+            }
+            const table = this.props.design.table;
+            return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"), R(AxisComponent_1.default, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: this.props.design.table,
+                types: ["text", "enum", "boolean", "date"],
+                aggrNeed: "required",
+                value: this.props.design.axes.color,
+                defaultColor: this.props.design.color,
+                showColorMap: true,
+                onChange: this.handleColorAxisChange,
+                allowExcludedValues: true,
+                filters: filters
+            })));
+        }
+        else {
+            // direct mode
+            const filters = lodash_1.default.clone(this.props.filters) || [];
+            const regionsTable = this.props.design.regionsTable || "admin_regions";
+            // Filter to level and scope
+            filters.push({
+                table: regionsTable,
+                jsonql: {
+                    type: "op",
+                    op: "=",
+                    exprs: [{ type: "field", tableAlias: "{alias}", column: "level" }, this.props.design.detailLevel]
+                }
+            });
+            if (this.props.design.scope) {
+                filters.push({
+                    table: regionsTable,
+                    jsonql: {
+                        type: "op",
+                        op: "=",
+                        exprs: [
+                            { type: "field", tableAlias: "{alias}", column: `level${this.props.design.scopeLevel || 0}` },
+                            { type: "literal", value: this.props.design.scope }
+                        ]
+                    }
+                });
+            }
+            return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"), R(AxisComponent_1.default, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: regionsTable,
+                types: ["text", "enum", "boolean", "date"],
+                aggrNeed: "none",
+                value: this.props.design.axes.color,
+                defaultColor: this.props.design.color,
+                showColorMap: true,
+                onChange: this.handleColorAxisChange,
+                allowExcludedValues: true,
+                filters: filters
+            })));
+        }
+    }
+    // renderLabelAxis: ->
+    //   if not @props.design.table
+    //     return
+    //   title = R 'span', null,
+    //     R 'span', className: "glyphicon glyphicon glyphicon-tint"
+    //     " Color By"
+    //   R 'div', className: "form-group",
+    //     R 'label', className: "text-muted", title
+    //     R 'div', style: { marginLeft: 10 },
+    //       R(AxisComponent,
+    //         schema: @props.schema
+    //         dataSource: @props.dataSource
+    //         table: @props.design.table
+    //         types: ["text", "enum", "boolean"]
+    //         aggrNeed: "none"
+    //         value: @props.design.axes.color
+    //         showColorMap: true
+    //         onChange: @handleColorAxisChange)
+    renderFillOpacity() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, `Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`), ": ", R(rc_slider_1.default, {
+            min: 0,
+            max: 100,
+            step: 1,
+            tipTransitionName: "rc-slider-tooltip-zoom-down",
+            value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100),
+            onChange: (val) => this.handleFillOpacityChange(Math.sqrt(val / 100))
+        }));
+    }
+    renderBorderColor() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Border Color"), R("div", null, R(ColorComponent_1.default, {
+            color: this.props.design.borderColor || "#000",
+            onChange: this.handleBorderColorChange
+        })));
+    }
+    renderFilter() {
+        // If not in indirect mode with table, hide
+        if (this.props.design.regionMode !== "indirect" || !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, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleFilterChange,
+            table: this.props.design.table,
+            value: this.props.design.filter
+        })));
+    }
+    renderPopup() {
+        // If not in indirect mode with table, hide
+        if (this.props.design.regionMode !== "indirect" || !this.props.design.table) {
+            return null;
+        }
+        const regionsTable = this.props.design.regionsTable || "admin_regions";
+        const defaultPopupFilterJoins = {};
+        if (this.props.design.adminRegionExpr) {
+            defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
+        }
+        return R(EditPopupComponent_1.default, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            idTable: regionsTable,
+            defaultPopupFilterJoins
+        });
+    }
+    renderHoverOver() {
+        // If not in indirect mode with table, hide
+        if (this.props.design.regionMode !== "indirect" || !this.props.design.table) {
+            return null;
+        }
+        const regionsTable = this.props.design.regionsTable || "admin_regions";
+        const defaultPopupFilterJoins = {};
+        if (this.props.design.adminRegionExpr) {
+            defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr;
+        }
+        return R(EditHoverOver_1.default, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            idTable: regionsTable,
+            defaultPopupFilterJoins
+        });
+    }
+    render() {
+        return R("div", null, this.renderRegionMode(), this.renderRegionsTable(), this.renderTable(), this.renderAdminRegionExpr(), this.renderScopeAndDetailLevel(), this.renderDisplayNames(), this.renderColor(), this.renderColorAxis(), this.renderFillOpacity(), this.renderBorderColor(), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }));
+    }
+}
+exports.default = ChoroplethLayerDesigner;

package/lib/maps/ClusterLayer.d.ts

@@ -0,0 +1,38 @@
+import { JsonQLQuery } from "@mwater/jsonql";
+import { DataSource, Schema } from "@mwater/expressions";
+import React from "react";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { ClusterLayerDesign } from "./ClusterLayerDesign";
+import Layer, { VectorTileDef } from "./Layer";
+import LayerLegendComponent from "./LayerLegendComponent";
+export default class ClusterLayer extends Layer<ClusterLayerDesign> {
+    /** Gets the type of layer definition */
+    getLayerDefinitionType(): "VectorTile";
+    getVectorTile(design: ClusterLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    createJsonQL(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
+    getJsonQLCss(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
+        layers: {
+            id: string;
+            jsonql: JsonQLQuery;
+        }[];
+        css: string;
+    };
+    createMapnikJsonQL(design: ClusterLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
+    createCss(design: ClusterLayerDesign, schema: Schema): string;
+    getBounds(design: ClusterLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    getMinZoom(design: ClusterLayerDesign): number | undefined;
+    getMaxZoom(design: ClusterLayerDesign): number;
+    getLegend(design: ClusterLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters?: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getFilterableTables(design: ClusterLayerDesign, schema: Schema): string[];
+    isEditable(): boolean;
+    isIncomplete(design: ClusterLayerDesign, schema: Schema): boolean;
+    createDesignerElement(options: {
+        design: ClusterLayerDesign;
+        schema: Schema;
+        dataSource: DataSource;
+        onDesignChange: (design: ClusterLayerDesign) => void;
+        filters: JsonQLFilter[];
+    }): React.ReactElement<{}>;
+    cleanDesign(design: ClusterLayerDesign, schema: Schema): ClusterLayerDesign;
+    validateDesign(design: ClusterLayerDesign, schema: Schema): string | null;
+}