@mwater/visualization 5.4.1 → 5.4.3

package/src/datagrids/EditExprCellComponent.tsx

@@ -1,305 +0,0 @@
-import _ from "lodash"
-import React, { useState } from "react"
-const R = React.createElement
-import { DataSource, EnumValue, Expr, ExprUtils, Schema } from "@mwater/expressions"
-import moment from "moment"
-
-export interface EditExprCellComponentProps {
-  /** schema to use */
-  schema: Schema
-  /** dataSource to use */
-  dataSource: DataSource
-  /** Locale to use */
-  locale?: string
-
-  /** Size of control */
-  width: number
-  height: number
-
-  /** Expression being edited */
-  expr: Expr
-  /** Value of expression */
-  value?: any
-  /** Called when save is requested (e.g. enter in text box) */
-  onSave: () => void
-  /** Called when cancel is requested (e.g. esc in text box) */
-  onCancel: () => void
-}
-
-interface EditExprCellComponentState {
-  value: any
-}
-
-// Cell allows editing an expression column cell
-// Store edited value here to prevent slow re-render of entire datagrid
-export default class EditExprCellComponent extends React.Component<
-  EditExprCellComponentProps,
-  EditExprCellComponentState
-> {
-  constructor(props: any) {
-    super(props)
-    this.state = { value: props.value }
-  }
-
-  getValue() {
-    return this.state.value
-  }
-
-  // Check if edit value has changed
-  hasChanged() {
-    return !_.isEqual(this.props.value, this.state.value)
-  }
-
-  handleChange = (value: any) => {
-    this.setState({ value })
-  }
-
-  render() {
-    const exprUtils = new ExprUtils(this.props.schema)
-
-    // Get expression type
-    const exprType = exprUtils.getExprType(this.props.expr)
-
-    switch (exprType) {
-      case "text":
-        return R(TextEditComponent, {
-          value: this.state.value,
-          onChange: this.handleChange,
-          onSave: this.props.onSave,
-          onCancel: this.props.onCancel
-        })
-      case "number":
-        return R(NumberEditComponent, {
-          value: this.state.value,
-          onChange: this.handleChange,
-          onSave: this.props.onSave,
-          onCancel: this.props.onCancel
-        })
-      case "enum":
-        return R(EnumEditComponent, {
-          value: this.state.value,
-          onChange: this.handleChange,
-          enumValues: exprUtils.getExprEnumValues(this.props.expr)!,
-          onSave: this.props.onSave,
-          onCancel: this.props.onCancel,
-          locale: this.props.locale
-        })
-      case "date":
-      case "datetime":
-        return R(DateEditComponent, {
-          value: this.state.value,
-          onChange: this.handleChange,
-          onSave: this.props.onSave,
-          onCancel: this.props.onCancel,
-          datetime: exprType === "datetime"
-        })
-      }
-
-    throw new Error(`Unsupported type ${exprType} for editing`)
-  }
-}
-
-interface TextEditComponentProps {
-  /** Current value */
-  value?: any
-  /** Called with new value */
-  onChange: (value: any) => void
-  /** Called when save is requested (e.g. enter in text box) */
-  onSave: () => void
-  /** Called when cancel is requested (e.g. esc in text box) */
-  onCancel: () => void
-}
-
-// Simple text box
-class TextEditComponent extends React.Component<TextEditComponentProps> {
-  input: HTMLInputElement | null
-
-  componentDidMount() {
-    // Focus when created
-    return this.input?.focus()
-  }
-
-  render() {
-    return R(
-      "div",
-      { style: { paddingTop: 3 } },
-      R("input", {
-        ref: (c: HTMLInputElement | null) => {
-          this.input = c
-        },
-        type: "text",
-        className: "form-control",
-        value: this.props.value || "",
-        onChange: (ev: any) => this.props.onChange(ev.target.value || null),
-        onKeyUp: (ev: any) => {
-          if (ev.keyCode === 27) {
-            this.props.onCancel()
-          }
-          if (ev.keyCode === 13) {
-            return this.props.onSave()
-          }
-        }
-      })
-    )
-  }
-}
-
-interface NumberEditComponentProps {
-  /** Current value */
-  value?: any
-  /** Called with new value */
-  onChange: (value: any) => void
-  /** Called when save is requested (e.g. enter in text box) */
-  onSave: () => void
-  /** Called when cancel is requested (e.g. esc in text box) */
-  onCancel: () => void
-}
-
-// Simple number box
-class NumberEditComponent extends React.Component<NumberEditComponentProps> {
-  input: HTMLInputElement | null
-
-  componentDidMount() {
-    // Focus when created
-    return this.input?.focus()
-  }
-
-  handleChange = (ev: any) => {
-    if (ev.target.value) {
-      return this.props.onChange(parseFloat(ev.target.value))
-    } else {
-      return this.props.onChange(null)
-    }
-  }
-
-  render() {
-    return R(
-      "div",
-      { style: { paddingTop: 3 } },
-      R("input", {
-        ref: (c: any) => {
-          return (this.input = c)
-        },
-        type: "number",
-        step: "any",
-        className: "form-control",
-        value: this.props.value != null ? this.props.value : "",
-        onChange: this.handleChange,
-        onKeyUp: (ev: any) => {
-          if (ev.keyCode === 27) {
-            this.props.onCancel()
-          }
-          if (ev.keyCode === 13) {
-            return this.props.onSave()
-          }
-        }
-      })
-    )
-  }
-}
-
-interface EnumEditComponentProps {
-  /** Current value */
-  value?: any
-  /** Called with new value */
-  onChange: (value: any) => void
-  enumValues: EnumValue[]
-  /** Locale to use */
-  locale?: string
-  /** Called when save is requested (e.g. enter in text box) */
-  onSave: () => void
-  /** Called when cancel is requested (e.g. esc in text box) */
-  onCancel: () => void
-}
-
-// Simple enum box
-class EnumEditComponent extends React.Component<EnumEditComponentProps> {
-  render() {
-    return R(
-      "div",
-      { style: { paddingTop: 3 } },
-      R(
-        "select",
-        {
-          value: this.props.value || "",
-          onChange: (ev: any) => this.props.onChange(ev.target.value || null),
-          className: "form-select"
-        },
-        R("option", { key: "", value: "" }, ""),
-        _.map(this.props.enumValues, (ev) => {
-          return R("option", { key: ev.id, value: ev.id }, ExprUtils.localizeString(ev.name, this.props.locale))
-        })
-      )
-    )
-  }
-}
-
-/** Simple date editor */
-function DateEditComponent(props: {
-  /** Current value */
-  value?: any
-  /** Called with new value */
-  onChange: (value: any) => void
-  /** Called when save is requested (e.g. enter in text box) */
-  onSave: () => void
-  /** Called when cancel is requested (e.g. esc in text box) */
-  onCancel: () => void
-  /** True if datetime, not date */
-  datetime: boolean
-}) {
-    // // Focus when created
-    // return this.input?.focus()
-  
-  // Format date
-  const [valueStr, setValueStr] = useState(props.datetime ?
-    (props.value ? moment(props.value, moment.ISO_8601).format("YYYY-MM-DD HH:mm") : "")
-    : props.value || ""
-    )
-
-  const [isValid, setIsValid] = useState(true)
-
-  // Parse date
-  function parseDate(value: string) {
-    if (!value) {
-      setIsValid(true)
-      return null
-    }
-    const m = moment(value, props.datetime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD")
-    if (!m.isValid()) {
-      setIsValid(false)
-      return null
-    }
-    setIsValid(true)
-    if (props.datetime) {
-      return m.toISOString()
-    } else {
-      return m.format("YYYY-MM-DD")
-    }
-  }
-
-  return <div style={{ paddingTop: 3 }}>
-    <input 
-      type="text" 
-      className="form-control" 
-      value={valueStr} 
-      style={{ backgroundColor: isValid ? "white" : "pink" }}
-      onChange={ev => {
-        setValueStr(ev.target.value)
-        props.onChange(parseDate(ev.target.value))
-      }}
-      ref={c => {
-        if (c) {
-          c.focus()
-        }
-      }}
-      onKeyUp={(ev) => {
-        if (ev.keyCode === 27) {
-          props.onCancel()
-        }
-        if (ev.keyCode === 13) {
-          return props.onSave()
-        }
-      }}
-    />
-  </div>
-}

package/src/datagrids/README.md

@@ -1,3 +0,0 @@
-## Design of data grid
-
-See `DatagridDesign.d.ts`

package/src/maps/BufferLayerDesignerComponent.ts

@@ -1,311 +0,0 @@
-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, OpExpr, Schema } from "@mwater/expressions"
-import { ExprCompiler } from "@mwater/expressions"
-import NumberInputComponent from "@mwater/react-library/lib/NumberInputComponent"
-import AxisComponent from "./../axes/AxisComponent"
-import ColorComponent from "../ColorComponent"
-import { TableSelectComponent } from "@mwater/expressions-ui"
-import { default as Rcslider } from "rc-slider"
-import EditPopupComponent from "./EditPopupComponent"
-import ZoomLevelsComponent from "./ZoomLevelsComponent"
-import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
-import { Checkbox } from "@mwater/react-library/lib/bootstrap"
-import { BufferLayerDesign } from "./BufferLayerDesign"
-import { JsonQLFilter } from "../JsonQLFilter"
-import { areVectorMapsEnabled } from "./vectorMaps"
-import EditHoverOver from "./EditHoverOver"
-
-export interface BufferLayerDesignerComponentProps {
-  /** Schema to use */
-  schema: Schema
-  dataSource: DataSource
-  /** Design of the design */
-  design: BufferLayerDesign
-  /** Called with new design */
-  onDesignChange: (design: BufferLayerDesign) => void
-  filters?: JsonQLFilter[]
-}
-
-export default class BufferLayerDesignerComponent extends React.Component<BufferLayerDesignerComponentProps> {
-  // 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 })
-  }
-  handleRadiusChange = (radius: any) => {
-    return this.update({ radius })
-  }
-  handleGeometryAxisChange = (axis: any) => {
-    return this.updateAxes({ geometry: axis })
-  }
-  handleFilterChange = (expr: any) => {
-    return this.update({ filter: expr })
-  }
-  handleColorChange = (color: any) => {
-    return this.update({ color })
-  }
-  handleColorAxisChange = (axis: any) => {
-    return this.updateAxes({ color: axis })
-  }
-  handleFillOpacityChange = (fillOpacity: any) => {
-    return this.update({ fillOpacity: fillOpacity / 100 })
-  }
-
-  handleUnionShapesChange = (unionShapes: boolean) => {
-    this.props.onDesignChange({ ...this.props.design, unionShapes })
-  }
-
-  renderTable() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`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" }), " ", T`Circle Centers`)
-
-    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 as OpExpr).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
-        })
-      )
-    )
-  }
-
-  renderRadius() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Radius (meters)`),
-      ": ",
-      React.createElement(NumberInputComponent, {
-        value: this.props.design.radius,
-        onChange: this.handleRadiusChange
-      })
-    )
-  }
-
-  renderUnionShapes() {
-    // Only implemented for vector maps
-    if (!areVectorMapsEnabled()) {
-      return null
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      React.createElement(
-        Checkbox,
-        {
-          value: this.props.design.unionShapes,
-          onChange: this.handleUnionShapesChange
-        },
-        T`Combine circles (advanced)`
-      )
-    )
-  }
-
-  renderColor() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    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 as OpExpr).table!, jsonql })
-      }
-    }
-
-    return R(
-      "div",
-      null,
-      !this.props.design.axes.color
-        ? R(
-            "div",
-            { className: "mb-3" },
-            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Circle Color`),
-
-            R(
-              "div",
-              null,
-              R(ColorComponent, {
-                color: this.props.design.color,
-                onChange: this.handleColorChange
-              })
-            )
-          )
-        : undefined,
-
-      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: "none",
-          value: this.props.design.axes.color,
-          defaultColor: this.props.design.color,
-          showColorMap: true,
-          onChange: this.handleColorAxisChange,
-          allowExcludedValues: true,
-          reorderable: true,
-          filters
-        })
-      )
-    )
-  }
-
-  renderFillOpacity() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Circle Opacity (%)`),
-      ": ",
-      React.createElement(Rcslider, {
-        min: 0,
-        max: 100,
-        step: 1,
-        tipTransitionName: "rc-slider-tooltip-zoom-down",
-        value: this.props.design.fillOpacity * 100,
-        onChange: this.handleFillOpacityChange
-      })
-    )
-  }
-
-  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" }), T`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
-        })
-      )
-    )
-  }
-
-  renderPopup() {
-    if (!this.props.design.table) {
-      return null
-    }
-
-    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: this.props.design.table,
-      defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-    })
-  }
-
-  renderHoverOver() {
-    if (!this.props.design.table) {
-      return null
-    }
-
-    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: this.props.design.table,
-      defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-    })
-  }
-
-  render() {
-    return R(
-      "div",
-      null,
-      this.renderTable(),
-      this.renderGeometryAxis(),
-      this.renderRadius(),
-      this.renderUnionShapes(),
-      this.renderColor(),
-      this.renderFillOpacity(),
-      this.renderFilter(),
-      this.renderPopup(),
-      this.renderHoverOver(),
-      this.props.design.table
-        ? R(ZoomLevelsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })
-        : undefined
-    )
-  }
-}