@mwater/visualization 5.0.0

package/lib/maps/BufferLayerDesign.d.ts

@@ -0,0 +1,37 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../axes/Axis";
+import { HoverOverItem } from "./maps";
+/** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
+export interface BufferLayerDesign {
+    /** table to get data from */
+    table: string;
+    /** axes (see below) */
+    axes: {
+        /** where to draw buffers around */
+        geometry: Axis | null;
+        /** color axis */
+        color: Axis | null;
+    };
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** color of layer (e.g. #FF8800). Color axis overrides */
+    color?: string;
+    /** Opacity to fill the circles (0-1) */
+    fillOpacity: number;
+    /** radius to draw in meters */
+    radius: number;
+    /** minimum zoom level */
+    minZoom?: number;
+    /** maximum zoom level */
+    maxZoom?: number;
+    /** True to union circles together. Makes ids unavailable as geometries are combined.
+     * Only implemented for vector tiles */
+    unionShapes?: boolean;
+    /** contains items: which is BlocksLayoutManager items. Will be displayed when the circle is clicked */
+    popup: any;
+    hoverOver: {
+        items: HoverOverItem[];
+    };
+    /** customizable filtering for popup. See PopupFilterJoins.md */
+    popupFilterJoins: any;
+}

package/lib/maps/BufferLayerDesign.js

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

package/lib/maps/BufferLayerDesignerComponent.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import EditPopupComponent from "./EditPopupComponent";
+import { BufferLayerDesign } from "./BufferLayerDesign";
+import { JsonQLFilter } from "../JsonQLFilter";
+export interface BufferLayerDesignerComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** Design of the design */
+    design: BufferLayerDesign;
+    /** Called with new design */
+    onDesignChange: (design: BufferLayerDesign) => void;
+    filters?: JsonQLFilter[];
+}
+export default class BufferLayerDesignerComponent extends React.Component<BufferLayerDesignerComponentProps> {
+    update(updates: any): void;
+    updateAxes(changes: any): void;
+    handleTableChange: (table: any) => void;
+    handleRadiusChange: (radius: any) => void;
+    handleGeometryAxisChange: (axis: any) => void;
+    handleFilterChange: (expr: any) => void;
+    handleColorChange: (color: any) => void;
+    handleColorAxisChange: (axis: any) => void;
+    handleFillOpacityChange: (fillOpacity: any) => void;
+    handleUnionShapesChange: (unionShapes: boolean) => void;
+    renderTable(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderGeometryAxis(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderRadius(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderUnionShapes(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    renderColor(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderFillOpacity(): 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/BufferLayerDesignerComponent.js

@@ -0,0 +1,217 @@
+"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 expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
+const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const rc_slider_1 = __importDefault(require("rc-slider"));
+const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
+const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
+const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+const vectorMaps_1 = require("./vectorMaps");
+const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+class BufferLayerDesignerComponent 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 });
+    };
+    handleRadiusChange = (radius) => {
+        return this.update({ radius });
+    };
+    handleGeometryAxisChange = (axis) => {
+        return this.updateAxes({ geometry: axis });
+    };
+    handleFilterChange = (expr) => {
+        return this.update({ filter: expr });
+    };
+    handleColorChange = (color) => {
+        return this.update({ color });
+    };
+    handleColorAxisChange = (axis) => {
+        return this.updateAxes({ color: axis });
+    };
+    handleFillOpacityChange = (fillOpacity) => {
+        return this.update({ fillOpacity: fillOpacity / 100 });
+    };
+    handleUnionShapesChange = (unionShapes) => {
+        this.props.onDesignChange({ ...this.props.design, unionShapes });
+    };
+    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" }), " Circle Centers");
+        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
+        })));
+    }
+    renderRadius() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Radius (meters)"), ": ", react_1.default.createElement(NumberInputComponent_1.default, {
+            value: this.props.design.radius,
+            onChange: this.handleRadiusChange
+        }));
+    }
+    renderUnionShapes() {
+        // Only implemented for vector maps
+        if (!(0, vectorMaps_1.areVectorMapsEnabled)()) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, {
+            value: this.props.design.unionShapes,
+            onChange: this.handleUnionShapesChange
+        }, "Combine circles (advanced)"));
+    }
+    renderColor() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        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", null, !this.props.design.axes.color
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Circle Color"), R("div", null, R(ColorComponent_1.default, {
+                color: this.props.design.color,
+                onChange: this.handleColorChange
+            })))
+            : undefined, 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: "none",
+            value: this.props.design.axes.color,
+            defaultColor: this.props.design.color,
+            showColorMap: true,
+            onChange: this.handleColorAxisChange,
+            allowExcludedValues: true,
+            reorderable: true,
+            filters
+        })));
+    }
+    renderFillOpacity() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Circle Opacity (%)"), ": ", react_1.default.createElement(rc_slider_1.default, {
+            min: 0,
+            max: 100,
+            step: 1,
+            tipTransitionName: "rc-slider-tooltip-zoom-down",
+            value: this.props.design.fillOpacity * 100,
+            onChange: this.handleFillOpacityChange
+        }));
+    }
+    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
+        })));
+    }
+    renderPopup() {
+        if (!this.props.design.table) {
+            return null;
+        }
+        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: this.props.design.table,
+            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
+        });
+    }
+    renderHoverOver() {
+        if (!this.props.design.table) {
+            return null;
+        }
+        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: this.props.design.table,
+            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
+        });
+    }
+    render() {
+        return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderRadius(), this.renderUnionShapes(), this.renderColor(), this.renderFillOpacity(), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), this.props.design.table
+            ? R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+            : undefined);
+    }
+}
+exports.default = BufferLayerDesignerComponent;

package/lib/maps/ChoroplethLayer.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer";
+import { Schema, DataSource } from "@mwater/expressions";
+import { LayerDefinition, OnGridClickResults, OnGridHoverResults } from "./maps";
+import { JsonQLFilter } from "../index";
+import ChoroplethLayerDesign from "./ChoroplethLayerDesign";
+import { JsonQLQuery } from "@mwater/jsonql";
+import LayerLegendComponent from "./LayerLegendComponent";
+export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
+    /** Gets the type of layer definition */
+    getLayerDefinitionType(): "VectorTile";
+    getVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    createPlainVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    createIndirectVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    createDirectVectorTile(design: ChoroplethLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    /** Gets the layer definition as JsonQL + CSS in format:
+     *   {
+     *     layers: array of { id: layer id, jsonql: jsonql that includes "the_webmercator_geom" as a column }
+     *     css: carto css
+     *     interactivity: (optional) { layer: id of layer, fields: array of field names }
+     *   }
+     * arguments:
+     *   design: design of layer
+     *   schema: schema to use
+     *   filters: array of filters to apply
+     */
+    getJsonQLCss(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): LayerDefinition;
+    createMapnikJsonQL(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
+    createCss(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): string;
+    /**
+     * Called when the interactivity grid is clicked.
+     * arguments:
+     *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+     *   clickOptions:
+     *     design: design of layer
+     *     schema: schema to use
+     *     dataSource: data source to use
+     *     layerDataSource: layer data source
+     *     scopeData: current scope data if layer is scoping
+     *     filters: compiled filters to apply to the popup
+     *
+     * Returns:
+     *   null/undefined
+     *   or
+     *   {
+     *     scope: scope to apply ({ name, filter, data })
+     *     row: { tableId:, primaryKey: }  # row that was selected
+     *     popup: React element to put into a popup
+     */
+    onGridClick(ev: {
+        data: any;
+        event: any;
+    }, clickOptions: OnGridClickOptions<ChoroplethLayerDesign>): OnGridClickResults;
+    onGridHoverOver(ev: {
+        data: any;
+        event: any;
+    }, hoverOptions: OnGridHoverOptions<ChoroplethLayerDesign>): OnGridHoverResults;
+    getBounds(design: ChoroplethLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    getMinZoom(design: ChoroplethLayerDesign): number | undefined;
+    getMaxZoom(design: ChoroplethLayerDesign): number;
+    getLegend(design: ChoroplethLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getFilterableTables(design: ChoroplethLayerDesign, schema: Schema): string[];
+    /** True if layer can be edited */
+    isEditable(): boolean;
+    cleanDesign(design: ChoroplethLayerDesign, schema: Schema): ChoroplethLayerDesign;
+    validateDesign(design: ChoroplethLayerDesign, schema: Schema): string | null;
+    createDesignerElement(options: {
+        design: ChoroplethLayerDesign;
+        schema: Schema;
+        dataSource: DataSource;
+        onDesignChange: (design: ChoroplethLayerDesign) => void;
+        filters: JsonQLFilter[];
+    }): React.ReactElement<{}>;
+}