@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/ChoroplethLayer.ts

@@ -29,7 +29,7 @@ import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 import Widget from "../widgets/Widget"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
-import { getSimpleHoverOverData } from "./MapUtils"
+import { getSimpleHoverOverData, getTranslatableStringsFromAxis, translateAxis } from "./MapUtils"
 
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   /** Gets the type of layer definition */
@@ -837,389 +837,6 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     }
   }
 
-  /** 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 {
-    // 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: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery {
-    const axisBuilder = new AxisBuilder({ schema })
-    const exprCompiler = new 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: JsonQLQuery = {
-        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 as JsonQLOp).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 as JsonQLOp).exprs.push(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: JsonQLQuery = {
-        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 = _.where(filters, { table: design.table })
-      for (let filter of relevantFilters) {
-        whereClauses.push(injectTableAlias(filter.jsonql, "innerquery"))
-      }
-
-      whereClauses = _.compact(whereClauses)
-
-      if (whereClauses.length > 0) {
-        innerQuery.where = { type: "op", op: "and", exprs: whereClauses }
-      }
-
-      // Now create outer query
-      const query: JsonQLQuery = {
-        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 as JsonQLOp).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 as JsonQLOp).exprs.push(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: JsonQLQuery = {
-        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 as JsonQLOp).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 as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
-        }
-      }
-
-      return query
-    }
-
-    throw new Error(`Unsupported regionMode ${design.regionMode}`)
-  }
-
-  createCss(design: ChoroplethLayerDesign, schema: Schema, filters: JsonQLFilter[]): string {
-    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 (_.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:
@@ -1474,7 +1091,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   // Get the legend to be optionally displayed on the map. Returns
   // a React element
   getLegend(options: LegendOptions<ChoroplethLayerDesign>): ReactNode {
-    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 ExprCompiler(schema)
@@ -1489,17 +1106,19 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     const regionsTable = design.regionsTable || "admin_regions"
     const axisTable = design.regionMode === "direct" ? regionsTable : design.table
 
+    // Clean and translate axis
+    const axis = translateAxis(axisBuilder.cleanAxis({
+      axis: design.axes.color || null,
+      table: axisTable,
+      types: ["enum", "text", "boolean", "date"],
+      aggrNeed: design.regionMode == "indirect" ? "required" : "none"
+    }), translate)
+
     return React.createElement(LayerLegendComponent, {
       schema,
-      name,
+      name: translate(name),
       filters: _.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
     })
@@ -1600,6 +1219,19 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
         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
       }
@@ -1690,6 +1322,10 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   getTranslatableStrings(design: ChoroplethLayerDesign, schema: Schema): string[] {
     const strings: string[] = []
 
+    // Add strings from axis category labels and null labels
+    strings.push(...getTranslatableStringsFromAxis(design.axes.color))
+    strings.push(...getTranslatableStringsFromAxis(design.axes.label))
+
     // Add strings from hoverOver items
     if (design.hoverOver && design.hoverOver.items) {
       for (const item of design.hoverOver.items) {
@@ -1746,7 +1382,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       filters: popupFilters,
       schema: options.schema,
       dataSource: options.dataSource,
-      hoverOverItems: options.design.hoverOver.items,
+      hoverOverItems: options.design.hoverOver!.items,
     })
   }
 }

package/src/maps/ChoroplethLayerDesign.ts

@@ -65,8 +65,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: { items: HoverOverItem[] }
+  /** 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 */
   minZoom?: number