@mwater/visualization 5.0.0

package/lib/maps/ClusterLayerDesign.d.ts

@@ -0,0 +1,22 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../axes/Axis";
+/** Layer which clusters markers, counting them */
+export interface ClusterLayerDesign {
+    /** table to get data from */
+    table: string;
+    /** axes (see below) */
+    axes: {
+        /** locations to cluster */
+        geometry: Axis | null;
+    };
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** color of text. default #FFFFFF */
+    textColor?: string;
+    /** color of markers that text is drawn on. default #337ab7 */
+    fillColor?: string;
+    /** minimum zoom level */
+    minZoom?: number;
+    /** maximum zoom level */
+    maxZoom?: number;
+}

package/lib/maps/ClusterLayerDesign.js

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

package/lib/maps/ClusterLayerDesignerComponent.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface ClusterLayerDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** Design of the design */
+    design: any;
+    /** Called with new design */
+    onDesignChange: any;
+    filters?: any;
+}
+export default class ClusterLayerDesignerComponent extends React.Component<ClusterLayerDesignerComponentProps> {
+    update(updates: any): any;
+    updateAxes(changes: any): any;
+    handleTableChange: (table: any) => any;
+    handleGeometryAxisChange: (axis: any) => any;
+    handleFilterChange: (expr: any) => any;
+    handleTextColorChange: (color: any) => any;
+    handleFillColorChange: (color: any) => any;
+    renderTable(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderGeometryAxis(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderTextColor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderFillColor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/maps/ClusterLayerDesignerComponent.js

@@ -0,0 +1,110 @@
+"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 R = react_1.default.createElement;
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
+class ClusterLayerDesignerComponent extends react_1.default.Component {
+    // Apply updates to design
+    update(updates) {
+        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, updates));
+    }
+    // Update axes with specified changes
+    updateAxes(changes) {
+        const axes = lodash_1.default.extend({}, this.props.design.axes, changes);
+        return this.update({ axes });
+    }
+    handleTableChange = (table) => {
+        return this.update({ table });
+    };
+    handleGeometryAxisChange = (axis) => {
+        return this.updateAxes({ geometry: axis });
+    };
+    handleFilterChange = (expr) => {
+        return this.update({ filter: expr });
+    };
+    handleTextColorChange = (color) => {
+        return this.update({ textColor: color });
+    };
+    handleFillColorChange = (color) => {
+        return this.update({ fillColor: color });
+    };
+    renderTable() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: this.props.design.table,
+            onChange: this.handleTableChange,
+            filter: this.props.design.filter,
+            onFilterChange: this.handleFilterChange
+        })));
+    }
+    renderGeometryAxis() {
+        if (!this.props.design.table) {
+            return;
+        }
+        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Locations to Cluster");
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (this.props.design.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+            if (jsonql) {
+                filters.push({ table: this.props.design.filter.table, jsonql });
+            }
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, react_1.default.createElement(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["geometry"],
+            aggrNeed: "none",
+            value: this.props.design.axes.geometry,
+            onChange: this.handleGeometryAxisChange,
+            filters
+        })));
+    }
+    renderTextColor() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Text Color"), R("div", null, R(ColorComponent_1.default, {
+            color: this.props.design.textColor,
+            onChange: this.handleTextColorChange
+        })));
+    }
+    renderFillColor() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Marker Color"), R("div", null, R(ColorComponent_1.default, {
+            color: this.props.design.fillColor,
+            onChange: this.handleFillColorChange
+        })));
+    }
+    renderFilter() {
+        // If no data, hide
+        if (!this.props.design.axes.geometry) {
+            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 } }, react_1.default.createElement(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
+        })));
+    }
+    render() {
+        return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderTextColor(), this.renderFillColor(), this.renderFilter(), this.props.design.table
+            ? R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+            : undefined);
+    }
+}
+exports.default = ClusterLayerDesignerComponent;

package/lib/maps/DetailLevelSelectComponent.d.ts

@@ -0,0 +1,122 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface DetailLevelSelectComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** admin region */
+    scope: string;
+    /** admin region */
+    scopeLevel: number;
+    /** Detail level within */
+    detailLevel?: number;
+    onChange: any;
+}
+interface DetailLevelSelectComponentState {
+    options: {
+        label: string;
+        value: any;
+    }[] | null;
+}
+export default class DetailLevelSelectComponent extends React.Component<DetailLevelSelectComponentProps, DetailLevelSelectComponentState> {
+    constructor(props: any);
+    componentWillMount(): any;
+    componentWillReceiveProps(nextProps: any): any;
+    loadLevels(props: any): any;
+    render(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+        tabIndex?: number | undefined;
+        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
+        placeholder?: React.ReactNode;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        isLoading?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        isRtl?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        controlShouldRenderValue?: boolean | undefined;
+        loadingMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        noOptionsMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        backspaceRemovesValue?: boolean | undefined;
+        blurInputOnSelect?: boolean | undefined;
+        captureMenuScroll?: boolean | undefined;
+        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        closeMenuOnSelect?: boolean | undefined;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
+        escapeClearsValue?: boolean | undefined;
+        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
+        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
+        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
+        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
+        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
+        isSearchable?: boolean | undefined;
+        minMenuHeight?: number | undefined;
+        maxMenuHeight?: number | undefined;
+        menuIsOpen?: boolean | undefined;
+        menuPlacement?: import("react-select").MenuPlacement | undefined;
+        menuPosition?: import("react-select").MenuPosition | undefined;
+        menuShouldBlockScroll?: boolean | undefined;
+        menuShouldScrollIntoView?: boolean | undefined;
+        openMenuOnFocus?: boolean | undefined;
+        openMenuOnClick?: boolean | undefined;
+        pageSize?: number | undefined;
+        screenReaderStatus?: ((obj: {
+            count: number;
+        }) => string) | undefined;
+        tabSelectsValue?: boolean | undefined;
+        unstyled?: boolean | undefined;
+    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+        tabIndex?: number | undefined;
+        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
+        placeholder?: React.ReactNode;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        isLoading?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        isRtl?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        controlShouldRenderValue?: boolean | undefined;
+        loadingMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        noOptionsMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        backspaceRemovesValue?: boolean | undefined;
+        blurInputOnSelect?: boolean | undefined;
+        captureMenuScroll?: boolean | undefined;
+        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        closeMenuOnSelect?: boolean | undefined;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
+        escapeClearsValue?: boolean | undefined;
+        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
+        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
+        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
+        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
+        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
+        isSearchable?: boolean | undefined;
+        minMenuHeight?: number | undefined;
+        maxMenuHeight?: number | undefined;
+        menuIsOpen?: boolean | undefined;
+        menuPlacement?: import("react-select").MenuPlacement | undefined;
+        menuPosition?: import("react-select").MenuPosition | undefined;
+        menuShouldBlockScroll?: boolean | undefined;
+        menuShouldScrollIntoView?: boolean | undefined;
+        openMenuOnFocus?: boolean | undefined;
+        openMenuOnClick?: boolean | undefined;
+        pageSize?: number | undefined;
+        screenReaderStatus?: ((obj: {
+            count: number;
+        }) => string) | undefined;
+        tabSelectsValue?: boolean | undefined;
+        unstyled?: boolean | undefined;
+    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>> | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}
+export {};

package/lib/maps/DetailLevelSelectComponent.js

@@ -0,0 +1,91 @@
+"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 R = react_1.default.createElement;
+const react_select_1 = __importDefault(require("react-select"));
+// Select detail level within an admin region
+class DetailLevelSelectComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { options: null };
+    }
+    componentWillMount() {
+        return this.loadLevels(this.props);
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.scope !== this.props.scope) {
+            return this.loadLevels(nextProps);
+        }
+    }
+    loadLevels(props) {
+        // Get country id of scope
+        let query = {
+            type: "query",
+            selects: [{ type: "select", expr: { type: "field", tableAlias: "main", column: "level0" }, alias: "level0" }],
+            from: { type: "table", table: "admin_regions", alias: "main" },
+            where: {
+                type: "op",
+                op: "=",
+                exprs: [{ type: "field", tableAlias: "main", column: "_id" }, props.scope]
+            }
+        };
+        // Execute query
+        return props.dataSource.performQuery(query, (err, rows) => {
+            if (err) {
+                alert("Error loading detail levels");
+                return;
+            }
+            const countryId = rows[0].level0;
+            // Get levels
+            query = {
+                type: "query",
+                selects: [
+                    { type: "select", expr: { type: "field", tableAlias: "main", column: "level" }, alias: "level" },
+                    { type: "select", expr: { type: "field", tableAlias: "main", column: "name" }, alias: "name" }
+                ],
+                from: { type: "table", table: "admin_region_levels", alias: "main" },
+                where: {
+                    type: "op",
+                    op: "=",
+                    exprs: [{ type: "field", tableAlias: "main", column: "country_id" }, countryId]
+                },
+                orderBy: [{ ordinal: 1, direction: "asc" }]
+            };
+            // Execute query
+            return props.dataSource.performQuery(query, (err, rows) => {
+                if (err) {
+                    alert("Error loading detail levels");
+                    return;
+                }
+                // Only greater than current scope level
+                rows = lodash_1.default.filter(rows, (r) => r.level > props.scopeLevel);
+                // If detail level set (defaults to zero), and has an option, auto-select
+                if (this.props.detailLevel && this.props.detailLevel <= this.props.scopeLevel && rows.length > 0) {
+                    this.props.onChange(rows[0].level);
+                }
+                const options = lodash_1.default.map(rows, (r) => ({
+                    value: r.level,
+                    label: r.name
+                }));
+                this.setState({ options });
+            });
+        });
+    }
+    render() {
+        if (this.state.options) {
+            return R(react_select_1.default, {
+                value: lodash_1.default.findWhere(this.state.options, { value: this.props.detailLevel }) || null,
+                options: this.state.options,
+                onChange: (opt) => this.props.onChange(opt.value)
+            });
+        }
+        else {
+            return R("div", { className: "text-muted" }, R("i", { className: "fa fa-spinner fa-spin" }), " Loading...");
+        }
+    }
+}
+exports.default = DetailLevelSelectComponent;

package/lib/maps/DirectMapDataSource.d.ts

@@ -0,0 +1,68 @@
+import { DataSource, Expr, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDesign } from "./MapDesign";
+import { MapDataSource } from "./MapDataSource";
+import { VectorTileCTE, VectorTileSourceLayer } from "./Layer";
+import { MapLayerDataSource } from "./MapLayerDataSource";
+interface DirectMapDataSourceOptions {
+    /** schema to use */
+    schema: Schema;
+    /** general data source */
+    dataSource: DataSource;
+    /** design of entire map */
+    design: MapDesign;
+    /** API url to use for talking to mWater server */
+    apiUrl: string;
+    /** client id to use for talking to mWater server */
+    client?: string;
+}
+export default class DirectMapDataSource implements MapDataSource {
+    options: DirectMapDataSourceOptions;
+    constructor(options: DirectMapDataSourceOptions);
+    getLayerDataSource(layerId: string): MapLayerDataSource;
+    getBounds(design: MapDesign, filters: JsonQLFilter[], callback: (error: any, bounds?: {
+        w: number;
+        n: number;
+        e: number;
+        s: number;
+    } | null) => void): void;
+    /** Gets the quickfilters data source */
+    getQuickfiltersDataSource(): {
+        getValues: (index: any, expr: Expr, filters: any, offset: any, limit: any, callback: any) => void;
+    };
+}
+/** Interface for a request made to get a token for vector tiles.
+ * The response is a token that can be used to get the actual tiles.
+ * The token is a string that is passed to the server as a query parameter.
+ * This type of request
+ */
+export interface VectorTileDirectTokenRequest {
+    /** Layers to include in the resulting tiles */
+    layers: VectorTileSourceLayer[];
+    /** Common table expressions of the tiles */
+    ctes: VectorTileCTE[];
+    /** Requests that the created tiles not be based on data older than */
+    createdAfter?: string;
+    /** Earliest expiry of the token (ISO 8601 datetime) */
+    expiresAfter: string;
+    /** Enforced minimum zoom level */
+    minZoom?: number;
+    /** Enforced maximum zoom level */
+    maxZoom?: number;
+}
+/**
+ * React hook to get a direct URL for a vector tile source.
+ * The URL is fetched asynchronously and the hook returns the current URL.
+ * The URL is refreshed automatically when it expires.
+ * @param options The options for fetching the vector tile source.
+ * @returns The URL of the vector tile source, or null if it has not been fetched yet.
+ */
+export declare function useDirectVectorTileUrl(options: {
+    /** The API URL to use for fetching the vector tile source. */
+    apiUrl: string;
+    /** The client ID to use for fetching the vector tile source. Can be undefined. */
+    client: string;
+    /** Request to make for tiles */
+    directTokenRequest: VectorTileDirectTokenRequest;
+}): string | null;
+export {};