@mwater/visualization 5.0.0

package/src/DateRangeComponent.ts

@@ -0,0 +1,279 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import moment from "moment"
+import ClickOutHandler from "react-onclickout"
+import { default as DatePicker } from "react-datepicker"
+
+export interface DateRangeComponentProps {
+  /** Array of [start date, end date] in iso 8601 format */
+  value: [string | null, string | null] | null
+
+  /** Array of [start date, end date] in iso 8601 format */
+  onChange: (value: [string | null, string | null] | null) => void
+
+  /** true if for datetime, not date   */
+  datetime?: boolean
+}
+
+interface DateRangeComponentState {
+  custom: any
+  dropdownOpen: any
+}
+
+// Allows selection of a date range
+export default class DateRangeComponent extends React.Component<DateRangeComponentProps, DateRangeComponentState> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      dropdownOpen: false,
+      custom: false // True when custom dates displayed
+    }
+  }
+
+  toMoment(value: any) {
+    if (!value) {
+      return null
+    }
+
+    if (this.props.datetime) {
+      return moment(value, moment.ISO_8601)
+    } else {
+      return moment(value, "YYYY-MM-DD")
+    }
+  }
+
+  fromMoment(value: any) {
+    if (!value) {
+      return null
+    }
+
+    if (this.props.datetime) {
+      return value.toISOString()
+    } else {
+      return value.format("YYYY-MM-DD")
+    }
+  }
+
+  handleClickOut = () => {
+    return this.setState({ dropdownOpen: false })
+  }
+
+  handleStartChange = (value: any) => {
+    // Go to start of day if datetime
+    if (this.props.datetime) {
+      value = moment(value)
+      value.startOf("day")
+    }
+
+    // Clear end if after
+    if (this.props.value?.[1] && this.fromMoment(value) > this.props.value[1]) {
+      return this.props.onChange([this.fromMoment(value), null])
+    } else {
+      return this.props.onChange([this.fromMoment(value), this.props.value?.[1] ?? null])
+    }
+  }
+
+  handleEndChange = (value: any) => {
+    // Go to end of day if datetime
+    if (this.props.datetime) {
+      value = moment(value)
+      value.endOf("day")
+    }
+
+    // Clear start if before
+    if (this.props.value?.[0] && this.fromMoment(value) < this.props.value[0]) {
+      this.props.onChange([null, this.fromMoment(value)])
+    } else {
+      this.props.onChange([this.props.value?.[0] ?? null, this.fromMoment(value)])
+    }
+
+    return this.setState({ dropdownOpen: false })
+  }
+
+  handlePreset = (preset: any) => {
+    // Go to start/end of day if datetime
+    let end, start
+    if (this.props.datetime) {
+      start = moment(preset.value[0])
+      start.startOf("day")
+      end = moment(preset.value[1])
+      end.endOf("day")
+    } else {
+      start = preset.value[0]
+      end = preset.value[1]
+    }
+
+    this.props.onChange([this.fromMoment(start), this.fromMoment(end)])
+    return this.setState({ dropdownOpen: false })
+  }
+
+  getPresets() {
+    const presets = [
+      { label: "Today", value: [moment(), moment()] },
+      { label: "Yesterday", value: [moment().subtract(1, "days"), moment().subtract(1, "days")] },
+      { label: "Last 7 Days", value: [moment().subtract(6, "days"), moment()] },
+      { label: "Last 30 Days", value: [moment().subtract(29, "days"), moment()] },
+      { label: "This Month", value: [moment().startOf("month"), moment().endOf("month")] },
+      {
+        label: "Last Month",
+        value: [moment().subtract(1, "months").startOf("month"), moment().subtract(1, "months").endOf("month")]
+      },
+      { label: "This Year", value: [moment().startOf("year"), moment().endOf("year")] },
+      {
+        label: "Last Year",
+        value: [moment().subtract(1, "years").startOf("year"), moment().subtract(1, "years").endOf("year")]
+      }
+    ]
+    return presets
+  }
+
+  renderClear = () => {
+    return R(
+      "div",
+      {
+        style: { position: "absolute", right: 10, top: 7, color: "#AAA" },
+        onClick: () => this.props.onChange(null)
+      },
+      R("i", { className: "fa fa-remove" })
+    )
+  }
+
+  renderSummary() {
+    if (!this.props.value) {
+      return R("span", { className: "text-muted" }, "All Dates")
+    }
+
+    const startDate = this.toMoment(this.props.value[0])
+    const endDate = this.toMoment(this.props.value[1])
+    return (startDate ? startDate.format("ll") : "") + " - " + (endDate ? endDate.format("ll") : "")
+  }
+
+  renderPresets() {
+    return R(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          zIndex: 4000,
+          padding: 5,
+          border: "solid 1px #AAA",
+          backgroundColor: "white",
+          borderRadius: 4
+        }
+      },
+      R(
+        "ul",
+        { className: "nav nav-pills flex-column" },
+        _.map(this.getPresets(), (preset) => {
+          return R(
+            "li",
+            { className: "nav-item" },
+            R(
+              "a",
+              { className: "nav-link", style: { padding: 5 }, onClick: this.handlePreset.bind(null, preset) },
+              preset.label
+            )
+          )
+        }),
+        R(
+          "li",
+          { className: "nav-item" },
+          R(
+            "a",
+            { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) },
+            "Custom Date Range..."
+          )
+        )
+      )
+    )
+  }
+
+  renderCustomDropdown() {
+    const startDate = this.toMoment(this.props.value?.[0])
+    const endDate = this.toMoment(this.props.value?.[1])
+
+    return R(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          zIndex: 4000,
+          padding: 5,
+          border: "solid 1px #AAA",
+          backgroundColor: "white",
+          borderRadius: 4
+        }
+      },
+      R(
+        "div",
+        { style: { whiteSpace: "nowrap" } },
+        R(
+          "div",
+          { style: { display: "inline-block", verticalAlign: "top" } },
+          R(DatePicker, {
+            inline: true,
+            selectsStart: true,
+            selected: startDate,
+            startDate: startDate ?? undefined,
+            endDate: endDate ?? undefined,
+            showYearDropdown: true,
+            onChange: this.handleStartChange
+          })
+        ),
+        R(
+          "div",
+          { style: { display: "inline-block", verticalAlign: "top" } },
+          R(DatePicker, {
+            inline: true,
+            selectsEnd: true,
+            selected: endDate,
+            startDate: startDate ?? undefined,
+            endDate: endDate ?? undefined,
+            showYearDropdown: true,
+            onChange: this.handleEndChange
+          })
+        )
+      )
+    )
+  }
+
+  renderDropdown() {
+    if (this.state.custom) {
+      return this.renderCustomDropdown()
+    } else {
+      return this.renderPresets()
+    }
+  }
+
+  render() {
+    return R(
+      ClickOutHandler,
+      { onClickOut: this.handleClickOut },
+      R(
+        "div",
+        { style: { display: "inline-block", position: "relative" } },
+        R(
+          "div",
+          {
+            style: { width: 220 },
+            className: "form-control",
+            onClick: () => this.setState({ dropdownOpen: true, custom: false })
+          },
+          this.renderSummary()
+        ),
+
+        // Clear button
+        this.props.value && this.props.onChange != null ? this.renderClear() : undefined,
+
+        this.state.dropdownOpen ? this.renderDropdown() : undefined
+      )
+    )
+  }
+}

package/src/FiltersDesignerComponent.ts

@@ -0,0 +1,55 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, Expr, ExprCleaner, Schema } from "@mwater/expressions"
+import { ExprUtils } from "@mwater/expressions"
+
+export interface FiltersDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use */
+  dataSource: DataSource
+  /** Tables that can be filtered on. Should only include tables that actually exist */
+  filterableTables?: string[]
+  filters?: { [tableId: string]: Expr }
+  onFiltersChange: (filters: { [tableId: string]: Expr }) => void
+}
+
+// Designer for filters of multiple tables. Used for maps and dashboards
+// Filters are in format mwater-expression filter expression indexed by table. e.g. { sometable: logical expression, etc. }
+export default class FiltersDesignerComponent extends React.Component<FiltersDesignerComponentProps> {
+  static contextTypes = { locale: PropTypes.string }
+
+  handleFilterChange = (table: any, expr: any) => {
+    // Clean filter
+    expr = new ExprCleaner(this.props.schema).cleanExpr(expr, { table })
+
+    const filters = _.clone(this.props.filters || {})
+    filters[table] = expr
+
+    return this.props.onFiltersChange(filters)
+  }
+
+  renderFilterableTable = (table: any) => {
+    const name = ExprUtils.localizeString(this.props.schema.getTable(table)!.name, this.context.locale)
+
+    return R(
+      "div",
+      { key: table },
+      R("label", null, name),
+      React.createElement(FilterExprComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onChange: this.handleFilterChange.bind(null, table),
+        table,
+        value: this.props.filters?.[table]
+      })
+    )
+  }
+
+  render() {
+    return R("div", null, _.map(this.props.filterableTables || [], this.renderFilterableTable))
+  }
+}

package/src/ImplicitFilterBuilder.ts

@@ -0,0 +1,135 @@
+import _ from "lodash"
+import { Column, injectTableAlias, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import { JsonQLFilter } from "./JsonQLFilter"
+
+// Given a series of explicit filters on tables (array of { table: table id, jsonql: JsonQL with {alias} for the table name to filter by })
+// extends the filters to all filterable tables with a single 1-n relationship.
+// For example, a given community has N water points. If communities are filtered, we want to filter water points as well since there is a
+// clear parent-child relationship (specifically, a single n-1 join between water points and communities)
+export default class ImplicitFilterBuilder {
+  schema: Schema
+  constructor(schema: Schema) {
+    this.schema = schema
+  }
+
+  // Find joins between parent and child tables that can be used to extend explicit filters.
+  // To be a useable join, must be only n-1 join between child and parent and child must be filterable table
+  // filterableTables: array of table ids of filterable tables
+  // Returns list of { table, column } of joins from child to parent
+  findJoins(filterableTables: any) {
+    let allJoins: any = []
+
+    // For each filterable table
+    for (var filterableTable of filterableTables) {
+      const table = this.schema.getTable(filterableTable)
+      if (!table) {
+        continue
+      }
+
+      // Find n-1 joins to another filterable table that are not self-references
+      let joins = _.filter(
+        this.schema.getColumns(filterableTable),
+        (column) =>
+          (column.type === "join" && column.join!.type === "n-1" && column.join!.toTable !== filterableTable) ||
+          (column.type === "id" && column.idTable !== filterableTable)
+      )
+
+      // Only keep if singular
+      joins = _.flatten(
+        _.filter(
+          _.values(_.groupBy(joins, (join) => (join.type === "id" ? join.idTable : join.join!.toTable))),
+          (list) => (list as Column[]).length === 1
+        )
+      )
+      allJoins = allJoins.concat(
+        _.map(joins, (join) => ({
+          table: filterableTable,
+          column: join.id
+        }))
+      )
+    }
+
+    return allJoins
+  }
+
+  // Extends filters to include implicit filters
+  // filterableTables: array of table ids of filterable tables
+  // filters: array of { table: table id, jsonql: JsonQL with {alias} for the table name to filter by } of explicit filters
+  // returns similar array, but including any extra implicit filters
+  extendFilters(filterableTables: string[], filters: JsonQLFilter[]) {
+    const implicitFilters = []
+
+    // Find joins
+    const joins = this.findJoins(filterableTables)
+
+    const exprCompiler = new ExprCompiler(this.schema)
+
+    // For each join, find filters on parent table
+    for (var join of joins) {
+      const parentFilters = _.filter(filters, (f) => {
+        const column = this.schema.getColumn(join.table, join.column)!
+        return f.table === (column.type === "join" ? column.join!.toTable : column.idTable) && f.jsonql
+      })
+      if (parentFilters.length === 0) {
+        continue
+      }
+
+      const joinColumn = this.schema.getColumn(join.table, join.column)!
+
+      // Create where exists with join to parent table (filtered) OR no parent exists
+      const implicitFilter: JsonQLFilter = {
+        table: join.table,
+        jsonql: {
+          type: "op",
+          op: "or",
+          exprs: [
+            {
+              type: "op",
+              op: "exists",
+              exprs: [
+                {
+                  type: "scalar",
+                  // select null
+                  expr: null,
+                  from: {
+                    type: "table",
+                    table: joinColumn.type === "id" ? joinColumn.idTable! : joinColumn.join!.toTable!,
+                    alias: "explicit"
+                  },
+                  where: {
+                    type: "op",
+                    op: "and",
+                    exprs: [
+                      // Join two tables
+                      exprCompiler.compileJoin(join.table, joinColumn, "{alias}", "explicit")
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              type: "op",
+              op: "is null",
+              exprs: [
+                exprCompiler.compileExpr({
+                  expr: { type: "field", table: join.table, column: join.column },
+                  tableAlias: "{alias}"
+                })
+              ]
+            }
+          ]
+        }
+      }
+
+      // Add filters
+      for (let parentFilter of parentFilters) {
+        ((implicitFilter.jsonql! as any).exprs[0].exprs[0] as any).where.exprs.push(injectTableAlias(parentFilter.jsonql, "explicit"))
+      }
+
+      implicitFilters.push(implicitFilter)
+    }
+
+    return filters.concat(implicitFilters)
+  }
+}

package/src/JsonQLFilter.ts

@@ -0,0 +1,8 @@
+import { JsonQLExpr } from "@mwater/jsonql"
+
+/** Filter on a table, defined in JsonQL */
+export interface JsonQLFilter {
+  table: string
+  /** jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+  jsonql: JsonQLExpr
+}

package/src/LocaleContextInjector.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+/** Adds the locale to the context */
+export default class LocaleContextInjector extends React.Component<{ locale: string }> {
+  static childContextTypes = {
+    locale: PropTypes.string
+  }
+
+  getChildContext() {
+    return { locale: this.props.locale }
+  }
+
+  render() {
+    return this.props.children
+  }
+}

package/src/MWaterAddRelatedFormComponent.ts

@@ -0,0 +1,213 @@
+import $ from "jquery"
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import moment from "moment"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+import querystring from "querystring"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import * as ui from "./UIComponents"
+import * as formUtils from "@mwater/forms/lib/formUtils" // TODO requireing this directly because of bizarre backbone issue
+import { AssetQuestion, Form, FormDesign } from "@mwater/forms"
+
+export interface MWaterAddRelatedFormComponentProps {
+  /** Entities or assets table id */
+  table: string
+
+  apiUrl: string
+  client?: string
+  
+  /** User id */
+  user?: string
+  /** Called with table id e.g. responses:someid */
+  onSelect: (tableId: string) => void
+
+  schema: Schema
+}
+
+interface MWaterAddRelatedFormComponentState {
+  waitingForTable: any
+  open: boolean
+}
+
+// Link that when clicked popup up a modal window allowing user to select a form
+// with an Entity/Site question to the extraTables
+export default class MWaterAddRelatedFormComponent extends React.Component<
+  MWaterAddRelatedFormComponentProps,
+  MWaterAddRelatedFormComponentState
+> {
+  constructor(props: MWaterAddRelatedFormComponentProps) {
+    super(props)
+
+    this.state = {
+      open: false,
+      waitingForTable: null // Set to table id that is being waited for as the result of being selected
+    }
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // If waiting and table has arrived, cancel waiting
+    if (this.state.waitingForTable && nextProps.schema.getTable(this.state.waitingForTable)) {
+      return this.setState({ waitingForTable: null })
+    }
+  }
+
+  handleOpen = () => {
+    return this.setState({ open: true })
+  }
+
+  handleSelect = (table: any) => {
+    this.setState({ open: false })
+
+    // Wait for table if not in schema
+    if (!this.props.schema.getTable(table)) {
+      this.setState({ waitingForTable: table })
+    }
+
+    return this.props.onSelect(table)
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      this.state.waitingForTable
+        ? R("div", null, R("i", { className: "fa fa-spin fa-spinner" }), " Adding...")
+        : R("a", { className: "btn btn-link", onClick: this.handleOpen }, "+ Add Related Survey"),
+      this.state.open
+        ? R(AddRelatedFormModalComponent, {
+            table: this.props.table,
+            apiUrl: this.props.apiUrl,
+            client: this.props.client,
+            user: this.props.user,
+            onSelect: this.handleSelect,
+            onCancel: () => this.setState({ open: false })
+          })
+        : undefined
+    )
+  }
+}
+
+interface AddRelatedFormModalComponentProps {
+  /** Entities or assets table id */
+  table: string
+
+  apiUrl: string
+  client?: string
+  /** User id */
+  user?: string
+  /** Called with table id e.g. responses:someid */
+  onSelect: (tableId: string) => void
+  /** When modal is closed */
+  onCancel: () => void
+}
+
+interface AddRelatedFormModalComponentState {
+  items: any[] | null
+  search: any
+  error?: any
+}
+
+/** Actual modal that displays the list of forms */
+class AddRelatedFormModalComponent extends React.Component<
+  AddRelatedFormModalComponentProps,
+  AddRelatedFormModalComponentState
+> {
+  static contextTypes = { locale: PropTypes.string }
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      items: null,
+      search: ""
+    }
+  }
+
+  componentDidMount() {
+    // Get all forms visible to user
+    const query: any = {}
+    query.selector = JSON.stringify({ state: { $ne: "deleted" } })
+    if (this.props.client) {
+      query.client = this.props.client
+    }
+
+    // Get list of all form names
+    return $.getJSON(this.props.apiUrl + "forms?" + querystring.stringify(query), (forms: Form[]) => {
+      // Sort by modified.on desc but first by user
+      forms = _.sortByOrder(
+        forms,
+        [(form: Form) => (form.created.by === this.props.user ? 1 : 0), (form: Form) => form.modified!.on],
+        ["desc", "desc"]
+      )
+
+      // Filter by Entity and Site questions of tableId type
+      if (this.props.table.startsWith("entities.")) {
+        forms = _.filter(forms, (form) => formUtils.findEntityQuestion(form.design, this.props.table.split(".")[1]))
+      } else if (this.props.table.startsWith("assets:")) {
+        const assetSystemId = parseInt(this.props.table.split(":")[1])
+        forms = forms.filter((form) => {
+          return formUtils.findAssetQuestion(form.design, assetSystemId) != null
+        })
+      }
+
+      // Get _id, name, and description
+      const items = _.map(forms, (form) => ({
+        name: ExprUtils.localizeString(form.design.name, this.context.locale),
+        desc: `Modified ${moment(form.modified!.on, moment.ISO_8601).format("ll")}`,
+        onClick: this.props.onSelect.bind(null, "responses:" + form._id)
+      }))
+
+      return this.setState({ items })
+    }).fail((xhr) => {
+      return this.setState({ error: xhr.responseText })
+    })
+  }
+
+  renderContents() {
+    if (!this.state.items) {
+      return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...")
+    }
+
+    let { items } = this.state
+
+    // Filter by search
+    if (this.state.search) {
+      const searchStringRegExp = new RegExp(escapeRegex(this.state.search), "i")
+      items = _.filter(items, (item) => item.name.match(searchStringRegExp))
+    }
+
+    return R(
+      "div",
+      null,
+      R("input", {
+        type: "text",
+        className: "form-control",
+        placeholder: "Search...",
+        key: "search",
+        style: { marginBottom: 10 },
+        value: this.state.search,
+        onChange: (ev: any) => this.setState({ search: ev.target.value })
+      }),
+
+      R(ui.OptionListComponent, { items })
+    )
+  }
+
+  render() {
+    return R(
+      ModalPopupComponent,
+      {
+        showCloseX: true,
+        onClose: this.props.onCancel,
+        header: "Add Related Survey"
+      },
+      this.renderContents()
+    )
+  }
+}
+
+function escapeRegex(s: any) {
+  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+}