@mwater/visualization 5.5.0 → 5.6.1

package/lib/maps/ChoroplethLayer.js

@@ -767,356 +767,6 @@ class ChoroplethLayer extends Layer_1.default {
             maxZoom: design.maxZoom
         };
     }
-    /** 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, schema, filters) {
-        // Create design
-        const layerDef = {
-            layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-            css: this.createCss(design, schema, filters),
-            interactivity: {
-                layer: "layer0",
-                fields: ["id", "name"]
-            }
-        };
-        return layerDef;
-    }
-    createMapnikJsonQL(design, schema, filters) {
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        // Verify that scopeLevel is an integer to prevent injection
-        if (design.scopeLevel != null && ![0, 1, 2, 3, 4, 5].includes(design.scopeLevel)) {
-            throw new Error("Invalid scope level");
-        }
-        // Verify that detailLevel is an integer to prevent injection
-        if (![0, 1, 2, 3, 4, 5].includes(design.detailLevel)) {
-            throw new Error("Invalid detail level");
-        }
-        const regionsTable = design.regionsTable || "admin_regions";
-        if (design.regionMode === "plain") {
-            /*
-            E.g:
-            select name, shape_simplified from
-              admin_regions as regions
-              where regions.level0 = 'eb3e12a2-de1e-49a9-8afd-966eb55d47eb'
-              and regions.level = 2
-            */
-            const query = {
-                type: "query",
-                selects: [
-                    { type: "select", expr: { type: "field", tableAlias: "regions", column: "_id" }, alias: "id" },
-                    {
-                        type: "select",
-                        expr: { type: "field", tableAlias: "regions", column: "shape_simplified" },
-                        alias: "the_geom_webmercator"
-                    },
-                    { type: "select", expr: { type: "field", tableAlias: "regions", column: "name" }, alias: "name" }
-                ],
-                from: { type: "table", table: regionsTable, alias: "regions" },
-                where: {
-                    type: "op",
-                    op: "and",
-                    exprs: [
-                        // Level to display
-                        {
-                            type: "op",
-                            op: "=",
-                            exprs: [{ type: "field", tableAlias: "regions", column: "level" }, design.detailLevel]
-                        }
-                    ]
-                }
-            };
-            // Scope overall
-            if (design.scope) {
-                ;
-                query.where.exprs.push({
-                    type: "op",
-                    op: "=",
-                    exprs: [
-                        { type: "field", tableAlias: "regions", column: `level${design.scopeLevel || 0}` },
-                        { type: "literal", value: design.scope }
-                    ]
-                });
-            }
-            // Add filters on regions to outer query
-            for (const filter of filters) {
-                if (filter.table == regionsTable) {
-                    ;
-                    query.where.exprs.push((0, expressions_1.injectTableAlias)(filter.jsonql, "regions"));
-                }
-            }
-            return query;
-        }
-        if (design.regionMode === "indirect" || !design.regionMode) {
-            /*
-            E.g:
-            select name, shape_simplified, regions.color from
-            admin_regions as regions2
-            left outer join
-            (
-              select admin_regions.level2 as id,
-              count(innerquery.*) as color
-              from
-              admin_regions inner join
-              entities.water_point as innerquery
-              on innerquery.admin_region = admin_regions._id
-              where admin_regions.level0 = 'eb3e12a2-de1e-49a9-8afd-966eb55d47eb'
-              group by 1
-            ) as regions on regions.id = regions2._id
-            where regions2.level = 2 and regions2.level0 = 'eb3e12a2-de1e-49a9-8afd-966eb55d47eb'
-            */
-            const compiledAdminRegionExpr = exprCompiler.compileExpr({
-                expr: design.adminRegionExpr || null,
-                tableAlias: "innerquery"
-            });
-            // Create inner query
-            const innerQuery = {
-                type: "query",
-                selects: [
-                    {
-                        type: "select",
-                        expr: { type: "field", tableAlias: "regions", column: `level${design.detailLevel}` },
-                        alias: "id"
-                    }
-                ],
-                from: {
-                    type: "join",
-                    kind: "inner",
-                    left: { type: "table", table: regionsTable, alias: "regions" },
-                    right: exprCompiler.compileTable(design.table, "innerquery"),
-                    on: {
-                        type: "op",
-                        op: "=",
-                        exprs: [compiledAdminRegionExpr, { type: "field", tableAlias: "regions", column: "_id" }]
-                    }
-                },
-                groupBy: [1]
-            };
-            // Add color select if color axis
-            if (design.axes.color) {
-                const colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "innerquery" });
-                innerQuery.selects.push({ type: "select", expr: colorExpr, alias: "color" });
-            }
-            // Add label select if color axis
-            if (design.axes.label) {
-                const labelExpr = axisBuilder.compileAxis({ axis: design.axes.label, tableAlias: "innerquery" });
-                innerQuery.selects.push({ type: "select", expr: labelExpr, alias: "label" });
-            }
-            let whereClauses = [];
-            if (design.scope) {
-                whereClauses.push({
-                    type: "op",
-                    op: "=",
-                    exprs: [{ type: "field", tableAlias: "regions", column: `level${design.scopeLevel || 0}` }, design.scope]
-                });
-            }
-            // Then add filters
-            if (design.filter) {
-                whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "innerquery" }));
-            }
-            // Then add extra filters passed in, if relevant
-            const relevantFilters = lodash_1.default.where(filters, { table: design.table });
-            for (let filter of relevantFilters) {
-                whereClauses.push((0, expressions_1.injectTableAlias)(filter.jsonql, "innerquery"));
-            }
-            whereClauses = lodash_1.default.compact(whereClauses);
-            if (whereClauses.length > 0) {
-                innerQuery.where = { type: "op", op: "and", exprs: whereClauses };
-            }
-            // Now create outer query
-            const query = {
-                type: "query",
-                selects: [
-                    { type: "select", expr: { type: "field", tableAlias: "regions2", column: "_id" }, alias: "id" },
-                    {
-                        type: "select",
-                        expr: { type: "field", tableAlias: "regions2", column: "shape_simplified" },
-                        alias: "the_geom_webmercator"
-                    },
-                    { type: "select", expr: { type: "field", tableAlias: "regions2", column: "name" }, alias: "name" }
-                ],
-                from: {
-                    type: "join",
-                    kind: "left",
-                    left: { type: "table", table: regionsTable, alias: "regions2" },
-                    right: { type: "subquery", query: innerQuery, alias: "regions" },
-                    on: {
-                        type: "op",
-                        op: "=",
-                        exprs: [
-                            { type: "field", tableAlias: "regions", column: "id" },
-                            { type: "field", tableAlias: "regions2", column: "_id" }
-                        ]
-                    }
-                },
-                where: {
-                    type: "op",
-                    op: "and",
-                    exprs: [
-                        // Level to display
-                        {
-                            type: "op",
-                            op: "=",
-                            exprs: [{ type: "field", tableAlias: "regions2", column: "level" }, design.detailLevel]
-                        }
-                    ]
-                }
-            };
-            // Scope overall
-            if (design.scope) {
-                ;
-                query.where.exprs.push({
-                    type: "op",
-                    op: "=",
-                    exprs: [
-                        { type: "field", tableAlias: "regions2", column: `level${design.scopeLevel || 0}` },
-                        { type: "literal", value: design.scope }
-                    ]
-                });
-            }
-            // Add filters on regions to outer query
-            for (const filter of filters) {
-                if (filter.table == regionsTable) {
-                    ;
-                    query.where.exprs.push((0, expressions_1.injectTableAlias)(filter.jsonql, "regions2"));
-                }
-            }
-            // Bubble up color and label
-            if (design.axes.color) {
-                query.selects.push({
-                    type: "select",
-                    expr: { type: "field", tableAlias: "regions", column: "color" },
-                    alias: "color"
-                });
-            }
-            // Add label select if color axis
-            if (design.axes.label) {
-                query.selects.push({
-                    type: "select",
-                    expr: { type: "field", tableAlias: "regions", column: "label" },
-                    alias: "label"
-                });
-            }
-            return query;
-        }
-        if (design.regionMode === "direct") {
-            /*
-            E.g:
-            select name, shape_simplified from
-              admin_regions as regions
-              where regions.level0 = 'eb3e12a2-de1e-49a9-8afd-966eb55d47eb'
-              and regions.level = 2
-            */
-            const query = {
-                type: "query",
-                selects: [
-                    { type: "select", expr: { type: "field", tableAlias: "regions", column: "_id" }, alias: "id" },
-                    {
-                        type: "select",
-                        expr: { type: "field", tableAlias: "regions", column: "shape_simplified" },
-                        alias: "the_geom_webmercator"
-                    },
-                    { type: "select", expr: { type: "field", tableAlias: "regions", column: "name" }, alias: "name" }
-                ],
-                from: { type: "table", table: regionsTable, alias: "regions" },
-                where: {
-                    type: "op",
-                    op: "and",
-                    exprs: [
-                        // Level to display
-                        {
-                            type: "op",
-                            op: "=",
-                            exprs: [{ type: "field", tableAlias: "regions", column: "level" }, design.detailLevel]
-                        }
-                    ]
-                }
-            };
-            // Add color select
-            if (design.axes.color) {
-                const colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "regions" });
-                query.selects.push({ type: "select", expr: colorExpr, alias: "color" });
-            }
-            // Add label select if color axis
-            if (design.axes.label) {
-                const labelExpr = axisBuilder.compileAxis({ axis: design.axes.label, tableAlias: "regions" });
-                query.selects.push({ type: "select", expr: labelExpr, alias: "label" });
-            }
-            // Scope overall
-            if (design.scope) {
-                ;
-                query.where.exprs.push({
-                    type: "op",
-                    op: "=",
-                    exprs: [
-                        { type: "field", tableAlias: "regions", column: `level${design.scopeLevel || 0}` },
-                        { type: "literal", value: design.scope }
-                    ]
-                });
-            }
-            // Add filters on regions to outer query
-            for (const filter of filters) {
-                if (filter.table == regionsTable) {
-                    ;
-                    query.where.exprs.push((0, expressions_1.injectTableAlias)(filter.jsonql, "regions"));
-                }
-            }
-            return query;
-        }
-        throw new Error(`Unsupported regionMode ${design.regionMode}`);
-    }
-    createCss(design, schema, filters) {
-        let css = `\
-#layer0 {
-  line-color: ${design.borderColor || "#000"};
-  line-width: 1.5;
-  line-opacity: 0.5;
-  polygon-opacity: ` +
-            design.fillOpacity * design.fillOpacity +
-            `;
-  polygon-fill: ` +
-            (design.color || "transparent") +
-            `;
-}
-\
-`;
-        if (design.displayNames) {
-            css += `\
-#layer0::labels {
-  text-name: [name];
-  text-face-name: 'Arial Regular';
-  text-halo-radius: 2;
-  text-halo-opacity: 0.5;
-  text-halo-fill: #FFF;
-}\
-`;
-        }
-        // If color axes, add color conditions
-        if (design.axes.color && design.axes.color.colorMap) {
-            for (let item of design.axes.color.colorMap) {
-                // If invisible
-                if (lodash_1.default.includes(design.axes.color.excludedValues || [], item.value)) {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { line-color: transparent; polygon-opacity: 0; polygon-fill: transparent; }\n`;
-                    if (design.displayNames) {
-                        css += `#layer0::labels [color=${JSON.stringify(item.value)}] { text-opacity: 0; text-halo-opacity: 0; }\n`;
-                    }
-                }
-                else {
-                    css += `#layer0 [color=${JSON.stringify(item.value)}] { polygon-fill: ${item.color}; }\n`;
-                }
-            }
-        }
-        return css;
-    }
     /**
      * Called when the interactivity grid is clicked.
      * arguments:
@@ -1320,7 +970,7 @@ class ChoroplethLayer extends Layer_1.default {
     // Get the legend to be optionally displayed on the map. Returns
     // a React element
     getLegend(options) {
-        const { design, schema, name, dataSource, locale, filters } = options;
+        const { design, schema, name, dataSource, locale, filters, translate } = options;
         const _filters = filters.slice();
         if (design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -1333,16 +983,18 @@ class ChoroplethLayer extends Layer_1.default {
         const axisBuilder = new AxisBuilder_1.default({ schema });
         const regionsTable = design.regionsTable || "admin_regions";
         const axisTable = design.regionMode === "direct" ? regionsTable : design.table;
+        // Clean and translate axis
+        const axis = (0, MapUtils_1.translateAxis)(axisBuilder.cleanAxis({
+            axis: design.axes.color || null,
+            table: axisTable,
+            types: ["enum", "text", "boolean", "date"],
+            aggrNeed: design.regionMode == "indirect" ? "required" : "none"
+        }), translate);
         return react_1.default.createElement(LayerLegendComponent_1.default, {
             schema,
-            name,
+            name: translate(name),
             filters: lodash_1.default.compact(_filters),
-            axis: axisBuilder.cleanAxis({
-                axis: design.axes.color || null,
-                table: axisTable,
-                types: ["enum", "text", "boolean", "date"],
-                aggrNeed: design.regionMode == "indirect" ? "required" : "none"
-            }) || undefined,
+            axis: axis || undefined,
             defaultColor: design.color || undefined,
             locale
         });
@@ -1434,6 +1086,18 @@ class ChoroplethLayer extends Layer_1.default {
             else {
                 delete draft.filter;
             }
+            // Clean hover over expressions only for indirect mode with a valid table
+            if (design.table && design.regionMode === "indirect" && design.hoverOver && design.hoverOver.items) {
+                for (let i = 0; i < design.hoverOver.items.length; i++) {
+                    const item = design.hoverOver.items[i];
+                    if (item.value) {
+                        draft.hoverOver.items[i].value = exprCleaner.cleanExpr(item.value || null, {
+                            table: design.table,
+                            aggrStatuses: ["individual", "literal", "aggregate"]
+                        });
+                    }
+                }
+            }
             if (design.detailLevel == null) {
                 draft.detailLevel = 0;
             }
@@ -1506,6 +1170,9 @@ class ChoroplethLayer extends Layer_1.default {
     /** Get strings to be translated */
     getTranslatableStrings(design, schema) {
         const strings = [];
+        // Add strings from axis category labels and null labels
+        strings.push(...(0, MapUtils_1.getTranslatableStringsFromAxis)(design.axes.color));
+        strings.push(...(0, MapUtils_1.getTranslatableStringsFromAxis)(design.axes.label));
         // Add strings from hoverOver items
         if (design.hoverOver && design.hoverOver.items) {
             for (const item of design.hoverOver.items) {

package/lib/maps/ChoroplethLayerDesign.d.ts

@@ -50,8 +50,11 @@ export default interface ChoroplethLayerDesign {
     };
     /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
     popupFilterJoins: PopupFilterJoins;
-    /** Hover over items to display when hovering over a region. Only when region mode is "indirect" */
-    hoverOver: {
+    /** Hover over items to display when hovering over a region. Only when region mode is "indirect".
+     * This is an aggregate hover over, but can contain individual items. If so, only the first row
+     * of the resulting query will be displayed.
+     */
+    hoverOver?: {
         items: HoverOverItem[];
     };
     /** minimum zoom level */

package/lib/maps/ChoroplethLayerDesigner.d.ts

@@ -2,9 +2,7 @@ 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;
@@ -30,34 +28,14 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     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<{
-        design: ChoroplethLayerDesign;
-        onDesignChange: (design: ChoroplethLayerDesign) => void;
-        schema: Schema;
-        dataSource: DataSource;
-        table: string;
-        idTable: string;
-        defaultPopupFilterJoins: {
-            [tableId: string]: Expr;
-        };
-    }> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderScopeAndDetailLevel(): React.JSX.Element;
+    renderDisplayNames(): React.JSX.Element;
+    renderColor(): React.JSX.Element | null;
+    renderColorAxis(): React.JSX.Element | null | undefined;
+    renderFillOpacity(): React.JSX.Element;
+    renderBorderColor(): React.JSX.Element;
+    renderFilter(): React.JSX.Element | null;
+    renderPopup(): React.JSX.Element | null;
+    renderHoverOver(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }