@mwater/visualization 5.0.0

package/src/maps/ClusterLayerDesign.ts

@@ -0,0 +1,29 @@
+import { Expr } from "@mwater/expressions"
+import { Axis } from "../axes/Axis"
+
+/** Layer which clusters markers, counting them */
+export interface ClusterLayerDesign {
+  /** table to get data from */
+  table: string
+
+  /** axes (see below) */
+  axes: {
+    /** locations to cluster */
+    geometry: Axis | null
+  }
+
+  /** optional logical expression to filter by */
+  filter?: Expr
+
+  /** color of text. default #FFFFFF */
+  textColor?: string
+
+  /** color of markers that text is drawn on. default #337ab7 */
+  fillColor?: string
+
+  /** minimum zoom level */
+  minZoom?: number
+
+  /** maximum zoom level */
+  maxZoom?: number
+}

package/src/maps/ClusterLayerDesignerComponent.ts

@@ -0,0 +1,190 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import AxisComponent from "./../axes/AxisComponent"
+import ColorComponent from "../ColorComponent"
+import TableSelectComponent from "../TableSelectComponent"
+import ZoomLevelsComponent from "./ZoomLevelsComponent"
+
+export interface ClusterLayerDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** Design of the design */
+  design: any
+  /** Called with new design */
+  onDesignChange: any
+  filters?: any
+}
+
+export default class ClusterLayerDesignerComponent extends React.Component<ClusterLayerDesignerComponentProps> {
+  // Apply updates to design
+  update(updates: any) {
+    return this.props.onDesignChange(_.extend({}, this.props.design, updates))
+  }
+
+  // Update axes with specified changes
+  updateAxes(changes: any) {
+    const axes = _.extend({}, this.props.design.axes, changes)
+    return this.update({ axes })
+  }
+
+  handleTableChange = (table: any) => {
+    return this.update({ table })
+  }
+  handleGeometryAxisChange = (axis: any) => {
+    return this.updateAxes({ geometry: axis })
+  }
+  handleFilterChange = (expr: any) => {
+    return this.update({ filter: expr })
+  }
+  handleTextColorChange = (color: any) => {
+    return this.update({ textColor: color })
+  }
+  handleFillColorChange = (color: any) => {
+    return this.update({ fillColor: color })
+  }
+
+  renderTable() {
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R(
+        "div",
+        { style: { marginLeft: 10 } },
+        R(TableSelectComponent, {
+          schema: this.props.schema,
+          value: this.props.design.table,
+          onChange: this.handleTableChange,
+          filter: this.props.design.filter,
+          onFilterChange: this.handleFilterChange
+        })
+      )
+    )
+  }
+
+  renderGeometryAxis() {
+    if (!this.props.design.table) {
+      return
+    }
+
+    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Locations to Cluster")
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (this.props.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
+      if (jsonql) {
+        filters.push({ table: this.props.design.filter.table, jsonql })
+      }
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, title),
+      R(
+        "div",
+        { style: { marginLeft: 10 } },
+        React.createElement(AxisComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: this.props.design.table,
+          types: ["geometry"],
+          aggrNeed: "none",
+          value: this.props.design.axes.geometry,
+          onChange: this.handleGeometryAxisChange,
+          filters
+        })
+      )
+    )
+  }
+
+  renderTextColor() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Text Color"),
+
+      R(
+        "div",
+        null,
+        R(ColorComponent, {
+          color: this.props.design.textColor,
+          onChange: this.handleTextColorChange
+        })
+      )
+    )
+  }
+
+  renderFillColor() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Marker Color"),
+
+      R(
+        "div",
+        null,
+        R(ColorComponent, {
+          color: this.props.design.fillColor,
+          onChange: this.handleFillColorChange
+        })
+      )
+    )
+  }
+
+  renderFilter() {
+    // If no data, hide
+    if (!this.props.design.axes.geometry) {
+      return null
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R(
+        "div",
+        { style: { marginLeft: 8 } },
+        React.createElement(FilterExprComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          onChange: this.handleFilterChange,
+          table: this.props.design.table,
+          value: this.props.design.filter
+        })
+      )
+    )
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      this.renderTable(),
+      this.renderGeometryAxis(),
+      this.renderTextColor(),
+      this.renderFillColor(),
+      this.renderFilter(),
+      this.props.design.table
+        ? R(ZoomLevelsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+        : undefined
+    )
+  }
+}

package/src/maps/DetailLevelSelectComponent.ts

@@ -0,0 +1,119 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import { default as ReactSelect } from "react-select"
+import { DataSource, Schema } from "@mwater/expressions"
+import { JsonQLSelectQuery } from "@mwater/jsonql"
+
+export interface DetailLevelSelectComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** admin region */
+  scope: string
+  /** admin region */
+  scopeLevel: number
+  /** Detail level within */
+  detailLevel?: number
+  onChange: any
+}
+
+interface DetailLevelSelectComponentState {
+  options: { label: string, value: any }[] | null
+}
+
+// Select detail level within an admin region
+export default class DetailLevelSelectComponent extends React.Component<
+  DetailLevelSelectComponentProps,
+  DetailLevelSelectComponentState
+> {
+  constructor(props: any) {
+    super(props)
+    this.state = { options: null }
+  }
+
+  componentWillMount() {
+    return this.loadLevels(this.props)
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    if (nextProps.scope !== this.props.scope) {
+      return this.loadLevels(nextProps)
+    }
+  }
+
+  loadLevels(props: any) {
+    // Get country id of scope
+    let query: JsonQLSelectQuery = {
+      type: "query",
+      selects: [{ type: "select", expr: { type: "field", tableAlias: "main", column: "level0" }, alias: "level0" }],
+      from: { type: "table", table: "admin_regions", alias: "main" },
+      where: {
+        type: "op",
+        op: "=",
+        exprs: [{ type: "field", tableAlias: "main", column: "_id" }, props.scope]
+      }
+    }
+
+    // Execute query
+    return props.dataSource.performQuery(query, (err: any, rows: any) => {
+      if (err) {
+        alert("Error loading detail levels")
+        return
+      }
+
+      const countryId = rows[0].level0
+
+      // Get levels
+      query = {
+        type: "query",
+        selects: [
+          { type: "select", expr: { type: "field", tableAlias: "main", column: "level" }, alias: "level" },
+          { type: "select", expr: { type: "field", tableAlias: "main", column: "name" }, alias: "name" }
+        ],
+        from: { type: "table", table: "admin_region_levels", alias: "main" },
+        where: {
+          type: "op",
+          op: "=",
+          exprs: [{ type: "field", tableAlias: "main", column: "country_id" }, countryId]
+        },
+        orderBy: [{ ordinal: 1, direction: "asc" }]
+      }
+
+      // Execute query
+      return props.dataSource.performQuery(query, (err: any, rows: any[]) => {
+        if (err) {
+          alert("Error loading detail levels")
+          return
+        }
+
+        // Only greater than current scope level
+        rows = _.filter(rows, (r) => r.level > props.scopeLevel)
+
+        // If detail level set (defaults to zero), and has an option, auto-select
+        if (this.props.detailLevel && this.props.detailLevel <= this.props.scopeLevel && rows.length > 0) {
+          this.props.onChange(rows[0].level)
+        }
+
+        const options = _.map(rows, (r) => ({
+          value: r.level,
+          label: r.name
+        }))
+        this.setState({ options })
+      })
+    })
+  }
+
+  render() {
+    if (this.state.options) {
+      return R(ReactSelect, {
+        value: _.findWhere(this.state.options, { value: this.props.detailLevel }) || null,
+        options: this.state.options,
+        onChange: (opt: any) => this.props.onChange(opt.value)
+      })
+    } else {
+      return R("div", { className: "text-muted" }, R("i", { className: "fa fa-spinner fa-spin" }), " Loading...")
+    }
+  }
+}