@mwater/visualization 5.5.0 → 5.6.1

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>
     )
   }
 
@@ -502,15 +505,15 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       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() {
@@ -526,35 +529,36 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       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>
     )
   }
 }