@mwater/visualization 5.4.5 → 5.6.0

package/src/maps/ChoroplethLayer.ts

@@ -29,6 +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"
 
 export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
   /** Gets the type of layer definition */
@@ -913,7 +914,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
       // Scope overall
       if (design.scope) {
-        ;(query.where as JsonQLOp).exprs.push({
+        ; (query.where as JsonQLOp).exprs.push({
           type: "op",
           op: "=",
           exprs: [
@@ -926,7 +927,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       // 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"))
+          ; (query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
         }
       }
 
@@ -1061,7 +1062,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
       // Scope overall
       if (design.scope) {
-        ;(query.where as JsonQLOp).exprs.push({
+        ; (query.where as JsonQLOp).exprs.push({
           type: "op",
           op: "=",
           exprs: [
@@ -1074,7 +1075,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       // 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"))
+          ; (query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions2"))
         }
       }
 
@@ -1147,7 +1148,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
       // Scope overall
       if (design.scope) {
-        ;(query.where as JsonQLOp).exprs.push({
+        ; (query.where as JsonQLOp).exprs.push({
           type: "op",
           op: "=",
           exprs: [
@@ -1160,7 +1161,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       // 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"))
+          ; (query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
         }
       }
 
@@ -1377,13 +1378,9 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     ev: { data: any; event: any },
     hoverOptions: OnGridHoverOptions<ChoroplethLayerDesign>
   ): OnGridHoverResults {
-    const regionsTable = hoverOptions.design.regionsTable || "admin_regions"
-
-    // Row only if mode is "plain" or "direct"
-    if (hoverOptions.design.regionMode == "plain" || hoverOptions.design.regionMode == "direct") {
-      if (!ev.data || !ev.data.id) {
-        return null
-      }
+    // Only applicable to indirect mode
+    if (hoverOptions.design.regionMode !== "indirect") {
+      return null
     }
 
     // Ignore if indirect with no table
@@ -1391,35 +1388,16 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       return null
     }
 
-    if (ev.data && ev.data.id) {
-      const { table } = hoverOptions.design
-      const results: OnGridHoverResults = {}
-
-      // Popup
-      if (hoverOptions.design.hoverOver) {
-        // Create default popup filter joins
-        const defaultPopupFilterJoins: { [tableId: string]: Expr } = {}
-        if (hoverOptions.design.adminRegionExpr) {
-          defaultPopupFilterJoins[hoverOptions.design.table] = hoverOptions.design.adminRegionExpr
-        }
-
-        // Create filter using popupFilterJoins
-        const popupFilterJoins = hoverOptions.design.popupFilterJoins || defaultPopupFilterJoins
-        const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
-          popupFilterJoins,
-          hoverOptions.schema,
-          table,
-          ev.data.id,
-          true
-        )
-
-        results.hoverOver = React.createElement(HoverContent, {
+    if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+      const results: OnGridHoverResults = {
+        hoverOver: React.createElement(HoverContent, {
           key: ev.data.id,
           schema: hoverOptions.schema,
-          dataSource: hoverOptions.dataSource,
-          table,
+          mapLayerDataSource: hoverOptions.layerDataSource,
+          design: hoverOptions.design,
           items: hoverOptions.design.hoverOver.items,
-          filters: popupFilters,
+          data: ev.data,
+          filters: hoverOptions.filters,
           locale: hoverOptions.locale,
           translate: hoverOptions.translate
         })
@@ -1622,6 +1600,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
       }
@@ -1731,4 +1722,44 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     // Remove duplicates
     return _.uniq(strings)
   }
+
+  /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+   * It will be called on the server side if using a server map data source, or on the client side if using a direct 
+   * map data source.
+   */
+  getHoverOverData(options: {
+    /** Design of the layer */
+    design: ChoroplethLayerDesign,
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any,
+    /** Filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[],
+    /** Schema to use */
+    schema: Schema,
+    /** Data source to use */
+    dataSource: DataSource,
+  }): Promise<{ [key: string]: any }> {
+    // Use popup filter joins utilities to create filters
+    const popupFilterJoins: { [tableId: string]: Expr } = {}
+    if (options.design.adminRegionExpr) {
+      popupFilterJoins[options.design.table!] = options.design.adminRegionExpr
+    }
+    const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
+      popupFilterJoins,
+      options.schema,
+      options.design.table!,
+      options.data.id,
+      true
+    )
+
+    return getSimpleHoverOverData({
+      // Filter using popup filters instead of id since will return multiple rows
+      id: null,
+      table: options.design.table!,
+      filters: popupFilters,
+      schema: options.schema,
+      dataSource: options.dataSource,
+      hoverOverItems: options.design.hoverOver!.items,
+    })
+  }
 }

package/src/maps/ChoroplethLayerDesign.ts

@@ -62,11 +62,15 @@ export default interface ChoroplethLayerDesign {
   /** contains items: which is BlocksLayoutManager items. Will be displayed when the region is clicked. Only when region mode is "indirect" */
   popup: { items: LayoutBlock }
 
-  hoverOver: { items: HoverOverItem[] }
-
   /** 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".
+   * 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
 

package/src/maps/ChoroplethLayerDesigner.tsx

@@ -1,10 +1,9 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import { produce } from "immer"
 
 import { ExprComponent, FilterExprComponent } from "@mwater/expressions-ui"
-import { ExprCompiler, Schema, DataSource, Expr, OpExpr } from "@mwater/expressions"
+import { ExprCompiler, Schema, DataSource, Expr, OpExpr, ExprUtils } from "@mwater/expressions"
 import AxisComponent from "./../axes/AxisComponent"
 import { TableSelectComponent } from "@mwater/expressions-ui"
 import ColorComponent from "../ColorComponent"
@@ -18,7 +17,7 @@ import { Axis } from "../axes/Axis"
 
 import AdminScopeAndDetailLevelComponent from "./AdminScopeAndDetailLevelComponent"
 import ScopeAndDetailLevelComponent from "./ScopeAndDetailLevelComponent"
-import EditHoverOver from "./EditHoverOver"
+import { EditHoverOver } from "./EditHoverOver"
 
 // Designer for a choropleth layer
 export default class ChoroplethLayerDesigner extends React.Component<{
@@ -188,9 +187,10 @@ export default class ChoroplethLayerDesigner extends React.Component<{
   }
 
   renderRegionsTable() {
+    // Regions tables are either "regions." or "regions_<name>" with a shape column
     let options = _.map(
-      _.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.")),
-      table => ({ value: table.id, label: table.name.en })
+      _.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.") || (table.id.startsWith("regions_") && this.props.schema.getColumn(table.id, "shape") != null)),
+      table => ({ value: table.id, label: ExprUtils.localizeString(table.name) })
     )
 
     const regionsTable = this.props.design.regionsTable || "admin_regions"
@@ -253,34 +253,34 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     const regionsTable = this.props.design.regionsTable || "admin_regions"
 
     if (regionsTable === "admin_regions") {
-      return R(AdminScopeAndDetailLevelComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        scope: this.props.design.scope as number | undefined,
-        scopeLevel: this.props.design.scopeLevel || 0,
-        detailLevel: this.props.design.detailLevel,
-        onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange
-      })
+      return <AdminScopeAndDetailLevelComponent
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        scope={this.props.design.scope as number | undefined}
+        scopeLevel={this.props.design.scopeLevel || 0}
+        detailLevel={this.props.design.detailLevel}
+        onScopeAndDetailLevelChange={this.handleScopeAndDetailLevelChange}
+      />
     } else {
-      return R(ScopeAndDetailLevelComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        scope: this.props.design.scope as string | undefined,
-        scopeLevel: this.props.design.scopeLevel,
-        detailLevel: this.props.design.detailLevel,
-        onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange,
-        regionsTable
-      })
+      return <ScopeAndDetailLevelComponent
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        scope={this.props.design.scope as string | undefined}
+        scopeLevel={this.props.design.scopeLevel}
+        detailLevel={this.props.design.detailLevel}
+        onScopeAndDetailLevelChange={this.handleScopeAndDetailLevelChange}
+        regionsTable={regionsTable}
+      />
     }
   }
 
   renderDisplayNames() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      <ui.Checkbox value={this.props.design.displayNames} onChange={value => this.handleDisplayNamesChange(value)}>
-        {T`Display Region Names`}
-      </ui.Checkbox>
+    return (
+      <div className="mb-3">
+        <ui.Checkbox value={this.props.design.displayNames} onChange={value => this.handleDisplayNamesChange(value)}>
+          {T`Display Region Names`}
+        </ui.Checkbox>
+      </div>
     )
   }
 
@@ -290,19 +290,20 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Fill Color`),
-
-      R(
-        "div",
-        null,
-        R(ColorComponent, {
-          color: this.props.design.color,
-          onChange: this.handleColorChange
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-tint" />
+          {T`Fill Color`}
+        </label>
+
+        <div>
+          <ColorComponent
+            color={this.props.design.color}
+            onChange={this.handleColorChange}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -328,28 +329,29 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
       const table = this.props.design.table
 
-      return R(
-        "div",
-        null,
-        R(
-          "div",
-          { className: "mb-3" },
-          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
-
-          R(AxisComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["text", "enum", "boolean", "date"],
-            aggrNeed: "required",
-            value: this.props.design.axes.color,
-            defaultColor: this.props.design.color,
-            showColorMap: true,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            filters: filters
-          })
-        )
+      return (
+        <div>
+          <div className="mb-3">
+            <label className="text-muted">
+              <span className="fas fa-tint" />
+              {T`Color By Data`}
+            </label>
+
+            <AxisComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.props.design.table}
+              types={["text", "enum", "boolean", "date"]}
+              aggrNeed="required"
+              value={this.props.design.axes.color}
+              defaultColor={this.props.design.color}
+              showColorMap={true}
+              onChange={this.handleColorAxisChange}
+              allowExcludedValues={true}
+              filters={filters}
+            />
+          </div>
+        </div>
       )
     } else {
       // direct mode
@@ -380,28 +382,29 @@ export default class ChoroplethLayerDesigner extends React.Component<{
         })
       }
 
-      return R(
-        "div",
-        null,
-        R(
-          "div",
-          { className: "mb-3" },
-          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
-
-          R(AxisComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: regionsTable,
-            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,
-            filters: filters
-          })
-        )
+      return (
+        <div>
+          <div className="mb-3">
+            <label className="text-muted">
+              <span className="fas fa-tint" />
+              {T`Color By Data`}
+            </label>
+
+            <AxisComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={regionsTable}
+              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}
+              filters={filters}
+            />
+          </div>
+        </div>
       )
     }
   }
@@ -428,40 +431,39 @@ export default class ChoroplethLayerDesigner extends React.Component<{
   //         onChange: @handleColorAxisChange)
 
   renderFillOpacity() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R(
-        "label",
-        { className: "text-muted" },
-        T`Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`
-      ),
-      ": ",
-      R(Rcslider, {
-        min: 0,
-        max: 100,
-        step: 1,
-        tipTransitionName: "rc-slider-tooltip-zoom-down",
-        value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100),
-        onChange: (val: number) => this.handleFillOpacityChange(Math.sqrt(val / 100))
-      })
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          {T`Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`}
+        </label>
+        {": "}
+        <Rcslider
+          min={0}
+          max={100}
+          step={1}
+          tipTransitionName="rc-slider-tooltip-zoom-down"
+          value={Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100)}
+          onChange={(val: number) => this.handleFillOpacityChange(Math.sqrt(val / 100))}
+        />
+      </div>
     )
   }
 
   renderBorderColor() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Border Color`),
-
-      R(
-        "div",
-        null,
-        R(ColorComponent, {
-          color: this.props.design.borderColor || "#000",
-          onChange: this.handleBorderColorChange
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-tint" />
+          {T`Border Color`}
+        </label>
+
+        <div>
+          <ColorComponent
+            color={this.props.design.borderColor || "#000"}
+            onChange={this.handleBorderColorChange}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -471,21 +473,22 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T`Filters`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        R(FilterExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.handleFilterChange,
-          table: this.props.design.table,
-          value: this.props.design.filter
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-filter" />
+          {T`Filters`}
+        </label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={this.props.design.table}
+            value={this.props.design.filter}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -497,20 +500,20 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
     const regionsTable = this.props.design.regionsTable || "admin_regions"
 
-    const defaultPopupFilterJoins = {}
+    const defaultPopupFilterJoins: { [tableId: string]: Expr } = {}
     if (this.props.design.adminRegionExpr) {
       defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr
     }
 
-    return R(EditPopupComponent, {
-      design: this.props.design,
-      onDesignChange: this.props.onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.design.table,
-      idTable: regionsTable,
-      defaultPopupFilterJoins
-    })
+    return <EditPopupComponent
+      design={this.props.design}
+      onDesignChange={this.props.onDesignChange}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      table={this.props.design.table}
+      idTable={regionsTable}
+      defaultPopupFilterJoins={defaultPopupFilterJoins}
+    />
   }
 
   renderHoverOver() {
@@ -521,40 +524,41 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
     const regionsTable = this.props.design.regionsTable || "admin_regions"
 
-    const defaultPopupFilterJoins = {}
+    const defaultPopupFilterJoins: { [tableId: string]: Expr } = {}
     if (this.props.design.adminRegionExpr) {
       defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr
     }
 
-    return R(EditHoverOver, {
-      design: this.props.design,
-      onDesignChange: this.props.onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.design.table,
-      idTable: regionsTable,
-      defaultPopupFilterJoins
-    })
+    return <EditHoverOver
+      design={this.props.design}
+      onDesignChange={this.props.onDesignChange}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      table={this.props.design.table}
+      idTable={regionsTable}
+      defaultPopupFilterJoins={defaultPopupFilterJoins}
+      aggrStatuses={["individual", "aggregate", "literal"]}
+    />
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      this.renderRegionMode(),
-      this.renderRegionsTable(),
-      this.renderTable(),
-      this.renderAdminRegionExpr(),
-      this.renderScopeAndDetailLevel(),
-      this.renderDisplayNames(),
-      this.renderColor(),
-      this.renderColorAxis(),
-      this.renderFillOpacity(),
-      this.renderBorderColor(),
-      this.renderFilter(),
-      this.renderPopup(),
-      this.renderHoverOver(),
-      R(ZoomLevelsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+    return (
+      <div>
+        {this.renderRegionMode()}
+        {this.renderRegionsTable()}
+        {this.renderTable()}
+        {this.renderAdminRegionExpr()}
+        {this.renderScopeAndDetailLevel()}
+        {this.renderDisplayNames()}
+        {this.renderColor()}
+        {this.renderColorAxis()}
+        {this.renderFillOpacity()}
+        {this.renderBorderColor()}
+        {this.renderFilter()}
+        {this.renderPopup()}
+        {this.renderHoverOver()}
+        <ZoomLevelsComponent design={this.props.design} onDesignChange={this.props.onDesignChange} />
+      </div>
     )
   }
 }