@mwater/visualization 5.6.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
         });
@@ -1518,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/ClusterLayer.d.ts

@@ -9,15 +9,6 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
     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;

package/lib/maps/ClusterLayer.js

@@ -295,256 +295,6 @@ class ClusterLayer extends Layer_1.default {
         };
         return query;
     }
-    // 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. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
-    getJsonQLCss(design, schema, filters) {
-        // Create design
-        const layerDef = {
-            layers: [{ id: "layer0", jsonql: this.createMapnikJsonQL(design, schema, filters) }],
-            css: this.createCss(design, schema)
-            // interactivity: {
-            //   layer: "layer0"
-            //   fields: ["id"]
-            // }
-        };
-        return layerDef;
-    }
-    createMapnikJsonQL(design, schema, filters) {
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        /*
-        Query:
-          Works by first snapping to grid and then clustering the clusters with slower DBSCAN method
-    
-          select
-            ST_Centroid(ST_Collect(center)) as the_geom_webmercator,
-            sum(cnt) as cnt,
-            log(sum(cnt)) * 6 + 14 as size from
-              (
-                select
-                ST_ClusterDBSCAN(center, (!pixel_width!*30 + !pixel_height!*30)/2, 1) over () as clust,
-                sub1.center as center,
-                cnt as cnt
-                from
-                (
-                  select
-                  count(*) as cnt,
-                  ST_Centroid(ST_Collect(<geometry axis>)) as center,
-                  round(ST_XMin(<geometry axis>) /  (!pixel_width!*40)) as gridx,
-                  round(ST_YMin(<geometry axis>) /  (!pixel_width!*40)) as gridy,
-                  from <table> as main
-                  where <geometry axis> && !bbox!
-                    and <geometry axis> is not null
-                    and <other filters>
-                  group by 3, 4
-                ) as sub1
-              ) as sub2
-            group by sub2.clust
-    
-        */
-        // Compile geometry axis
-        let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "main" });
-        // ST_Centroid(ST_Collect(<geometry axis>))
-        let centerExpr = {
-            type: "op",
-            op: "ST_Centroid",
-            exprs: [
-                {
-                    type: "op",
-                    op: "ST_Collect",
-                    exprs: [geometryExpr]
-                }
-            ]
-        };
-        const gridXExpr = {
-            type: "op",
-            op: "round",
-            exprs: [
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        { type: "op", op: "ST_XMin", exprs: [geometryExpr] },
-                        { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 40] }
-                    ]
-                }
-            ]
-        };
-        const gridYExpr = {
-            type: "op",
-            op: "round",
-            exprs: [
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        { type: "op", op: "ST_YMin", exprs: [geometryExpr] },
-                        { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 5] }
-                    ]
-                }
-            ]
-        };
-        // Create inner query
-        const innerQuery = {
-            type: "query",
-            selects: [
-                { type: "select", expr: { type: "op", op: "count", exprs: [] }, alias: "cnt" },
-                { type: "select", expr: centerExpr, alias: "center" },
-                { type: "select", expr: gridXExpr, alias: "gridx" },
-                { type: "select", expr: gridYExpr, alias: "gridy" }
-            ],
-            from: exprCompiler.compileTable(design.table, "main"),
-            groupBy: [3, 4]
-        };
-        // Create filters. First ensure geometry and limit to bounding box
-        let whereClauses = [
-            {
-                type: "op",
-                op: "&&",
-                exprs: [geometryExpr, { type: "token", token: "!bbox!" }]
-            }
-        ];
-        // Then add filters baked into layer
-        if (design.filter) {
-            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter || null, tableAlias: "main" }));
-        }
-        // Then add extra filters passed in, if relevant
-        // Get relevant filters
-        const relevantFilters = lodash_1.default.where(filters, { table: design.table });
-        for (let filter of relevantFilters) {
-            whereClauses.push((0, expressions_1.injectTableAlias)(filter.jsonql, "main"));
-        }
-        whereClauses = lodash_1.default.compact(whereClauses);
-        // Wrap if multiple
-        if (whereClauses.length > 1) {
-            innerQuery.where = { type: "op", op: "and", exprs: whereClauses };
-        }
-        else {
-            innerQuery.where = whereClauses[0];
-        }
-        // Create next level
-        // select
-        // ST_ClusterDBSCAN(center, (!pixel_width!*30 + !pixel_height!*30)/2, 1) over () as clust,
-        // sub1.center as center,
-        // cnt as cnt from () as innerquery
-        const clustExpr = {
-            type: "op",
-            op: "ST_ClusterDBSCAN",
-            exprs: [
-                { type: "field", tableAlias: "innerquery", column: "center" },
-                {
-                    type: "op",
-                    op: "/",
-                    exprs: [
-                        {
-                            type: "op",
-                            op: "+",
-                            exprs: [
-                                { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 30] },
-                                { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 30] }
-                            ]
-                        },
-                        2
-                    ]
-                },
-                1
-            ],
-            over: {}
-        };
-        const inner2Query = {
-            type: "query",
-            selects: [
-                { type: "select", expr: clustExpr, alias: "clust" },
-                { type: "select", expr: { type: "field", tableAlias: "innerquery", column: "center" }, alias: "center" },
-                { type: "select", expr: { type: "field", tableAlias: "innerquery", column: "cnt" }, alias: "cnt" }
-            ],
-            from: { type: "subquery", query: innerQuery, alias: "innerquery" }
-        };
-        // Create final level
-        // ST_Centroid(ST_Collect(center)) as the_geom_webmercator,
-        // sum(cnt) as cnt,
-        // log(sum(cnt)) * 6 + 14 as size from
-        // ST_Centroid(ST_Collect(center))
-        centerExpr = {
-            type: "op",
-            op: "ST_Centroid",
-            exprs: [
-                {
-                    type: "op",
-                    op: "ST_Collect",
-                    exprs: [{ type: "field", tableAlias: "inner2query", column: "center" }]
-                }
-            ]
-        };
-        const cntExpr = {
-            type: "op",
-            op: "sum",
-            exprs: [{ type: "field", tableAlias: "inner2query", column: "cnt" }]
-        };
-        const sizeExpr = {
-            type: "op",
-            op: "+",
-            exprs: [{ type: "op", op: "*", exprs: [{ type: "op", op: "log", exprs: [cntExpr] }, 6] }, 14]
-        };
-        const query = {
-            type: "query",
-            selects: [
-                { type: "select", expr: centerExpr, alias: "the_geom_webmercator" },
-                { type: "select", expr: cntExpr, alias: "cnt" },
-                { type: "select", expr: sizeExpr, alias: "size" }
-            ],
-            from: { type: "subquery", query: inner2Query, alias: "inner2query" },
-            groupBy: [{ type: "field", tableAlias: "inner2query", column: "clust" }]
-        };
-        return query;
-    }
-    createCss(design, schema) {
-        const css = `\
-#layer0 [cnt>1] {
-  marker-width: [size];
-  marker-line-color: white;
-  marker-line-width: 4;
-  marker-line-opacity: 0.6;
-  marker-placement: point;
-  marker-type: ellipse;
-  marker-allow-overlap: true;
-  marker-fill: ` +
-            (design.fillColor || "#337ab7") +
-            `;
-}
-
-#layer0::l1 [cnt>1] { 
-  text-name: [cnt];
-  text-face-name: 'Arial Bold';
-  text-allow-overlap: true;
-  text-fill: ` +
-            (design.textColor || "white") +
-            `;
-}
-
-#layer0 [cnt=1] {
-  marker-width: 10;
-  marker-line-color: white;
-  marker-line-width: 2;
-  marker-line-opacity: 0.6;
-  marker-placement: point;
-  marker-type: ellipse;
-  marker-allow-overlap: true;
-  marker-fill: ` +
-            (design.fillColor || "#337ab7") +
-            `;
-}\
-`;
-        return css;
-    }
     // # Called when the interactivity grid is clicked.
     // # arguments:
     // #   ev: { data: interactivty data e.g. `{ id: 123 }` }