@mwater/visualization 5.0.0

package/src/valueFormatter.ts

@@ -0,0 +1,110 @@
+import { LiteralType } from "@mwater/expressions"
+import { format as d3Format } from "d3-format"
+import { fromLatLon } from "utm"
+
+/** Option for list of format options */
+export interface FormatOption {
+  value: string
+  label: string
+}
+
+/** Determine if can format type */
+export function canFormatType(type: LiteralType): boolean {
+  return type == "number" || type == "geometry"
+}
+
+/** Get available options for formatting a type. Null if not available */
+export function getFormatOptions(type: LiteralType): FormatOption[] | null {
+  if (type == "number") {
+    return [
+      { value: "", label: "Plain: 1234.567" },
+      { value: ",", label: "Normal: 1,234.567" },
+      { value: ",.0f", label: "Rounded: 1,234" },
+      { value: ",.2f", label: "Two decimals: 1,234.56" },
+      { value: "$,.2f", label: "Currency: $1,234.56" },
+      { value: "$,.0f", label: "Currency rounded: $1,234" },
+      { value: ".0%", label: "Percent rounded: 12%" },
+      { value: ".2%", label: "Percent decimal: 12.34%" }
+    ]
+  }
+
+  if (type == "geometry") {
+    return [
+      { value: "lat, lng", label: "Latitude, Longitude" },
+      { value: "UTM", label: "UTM" }
+    ]
+  }
+
+  return null
+}
+
+/** Get default format */
+export function getDefaultFormat(type: LiteralType): string {
+  if (type == "number") {
+    return ","
+  }
+
+  if (type == "geometry") {
+    return "lat, lng"
+  }
+
+  throw new Error("Not supported")
+}
+
+/** Format a value of a specified type as a string. For historical reasons,
+ * LayeredCharts multiply by 100 before adding the % sign. Set legacyPercentFormat to true to replicate
+ */
+export function formatValue(
+  type: LiteralType,
+  value: any,
+  format: string | null | undefined,
+  locale?: string,
+  legacyPercentFormat?: boolean
+): string {
+  if (value == null) {
+    return ""
+  }
+
+  // Default
+  format = format != null ? format : getDefaultFormat(type)
+
+  // Use d3 format if number
+  if (type == "number") {
+    // Do not convert % (d3Format multiplies by 100 which is annoying)
+    if (format.match(/%/) && !legacyPercentFormat) {
+      value = value / 100.0
+    }
+
+    return d3Format(format)(value)
+  }
+
+  if (type == "geometry") {
+    if (format == "UTM") {
+      if (value.type == "Point") {
+        const latitude = value.coordinates[1]
+        const longitude = value.coordinates[0]
+
+        if (latitude > 84 || latitude < -80) {
+          return "latitude out of range"
+        }
+        if (longitude > 180 || longitude < -180) {
+          return "longitude out of range"
+        }
+
+        const { easting, northing, zoneNum, zoneLetter } = fromLatLon(latitude, longitude)
+        return `${zoneNum}${zoneLetter} ${easting.toFixed(0)} ${northing.toFixed(0)}`
+      }
+      return value.type
+    } else {
+      // Display as lat/lng if Point, otherwise type
+      if (value.type == "Point") {
+        return `${value.coordinates[1].toFixed(6)}, ${value.coordinates[0].toFixed(6)}`
+      } else {
+        return value.type
+      }
+    }
+  } else {
+    // Should not happen
+    return value + ""
+  }
+}

package/src/widgets/DirectWidgetDataSource.ts

@@ -0,0 +1,67 @@
+import { DataSource, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from "../JsonQLFilter"
+import DirectMapDataSource from "../maps/DirectMapDataSource"
+import { MapDataSource } from "../maps/MapDataSource"
+import { MapDesign } from "../maps/MapDesign"
+import Widget from "./Widget"
+import { WidgetDataSource } from "./WidgetDataSource"
+
+export default class DirectWidgetDataSource implements WidgetDataSource {
+  options: {
+    /** widget object */
+    widget: Widget
+    /** schema to use */
+    schema: Schema
+    /** general data source */
+    dataSource: DataSource
+    /** API url to use for talking to mWater server. Not needed if no map widgets */
+    apiUrl?: string
+    /** client id to use for talking to mWater server. Not needed if no map widgets */
+    client?: string | undefined
+  }
+
+  constructor(options: {
+    /** widget object */
+    widget: Widget
+    /** schema to use */
+    schema: Schema
+    /** general data source */
+    dataSource: DataSource
+    /** API url to use for talking to mWater server. Not needed if no map widgets */
+    apiUrl?: string
+    /** client id to use for talking to mWater server. Not needed if no map widgets */
+    client?: string
+  }) {
+    this.options = options
+  }
+
+  /** Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on the server
+   * design: design of the widget. Ignored in the case of server-side rendering
+   * filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+   * callback: (error, data)
+   */
+  getData(design: any, filters: JsonQLFilter[], callback: (error: any, data: any) => void): void {
+    this.options.widget.getData(design, this.options.schema, this.options.dataSource, filters, callback)
+  }
+
+  /** For map widgets, the following is required */
+  getMapDataSource(design: MapDesign): MapDataSource {
+    if (!this.options.apiUrl) {
+      throw new Error("Maps not supported")
+    }
+    
+    return new DirectMapDataSource({
+      apiUrl: this.options.apiUrl,
+      client: this.options.client,
+      design,
+      schema: this.options.schema,
+      dataSource: this.options.dataSource
+    })
+  }
+
+  /** Get the url to download an image (by id from an image or imagelist column)
+   * Height, if specified, is minimum height needed. May return larger image */
+  getImageUrl(imageId: string, height?: number): string {
+    return this.options.dataSource.getImageUrl(imageId, height)
+  }
+}

package/src/widgets/DropdownWidgetComponent.ts

@@ -0,0 +1,78 @@
+import _ from "lodash"
+import $ from "jquery"
+import React from "react"
+import ReactDOM from "react-dom"
+const R = React.createElement
+
+export interface DropdownWidgetComponentProps {
+  /** Width specification */
+  width?: any
+  /** Height specification */
+  height?: any
+  dropdownItems: any
+}
+
+// Widget wrapper that adds a dropdown menu in a gear floating
+export default class DropdownWidgetComponent extends React.Component<DropdownWidgetComponentProps> {
+  renderDropdownItem = (item: any, i: any) => {
+    return R(
+      "li",
+      { key: `${i}` },
+      R(
+        "a",
+        { className: "dropdown-item", onClick: item.onClick },
+        item.icon ? R("span", { className: `glyphicon glyphicon-${item.icon} text-muted` }) : undefined,
+        item.icon ? " " : undefined,
+        item.label
+      )
+    )
+  }
+
+  renderDropdown() {
+    if (this.props.dropdownItems.length === 0) {
+      return null
+    }
+
+    const dropdownStyle = {
+      position: "absolute",
+      right: 3,
+      top: 3,
+      cursor: "pointer",
+      zIndex: 1029
+    }
+
+    const elem = R(
+      "div",
+      { style: dropdownStyle, "data-bs-toggle": "dropdown" },
+      R("div", { className: "mwater-visualization-simple-widget-gear-button" }, R("span", { className: "fas fa-cog" }))
+    )
+
+    return R(
+      "div",
+      { style: dropdownStyle },
+      elem,
+      R(
+        "ul",
+        { className: "dropdown-menu dropdown-menu-end", style: { top: 25 } },
+        _.map(this.props.dropdownItems, this.renderDropdownItem)
+      )
+    )
+  }
+
+  closeMenu = () => {
+    return $(ReactDOM.findDOMNode(this) as Element).find('[data-bs-toggle="dropdown"]').parent().removeClass("open")
+  }
+
+  render() {
+    return R(
+      "div",
+      {
+        className: "mwater-visualization-simple-widget",
+        onMouseLeave: this.closeMenu,
+        style: { width: this.props.width, height: this.props.height }
+      },
+      this.props.children,
+      this.renderDropdown()
+    )
+  }
+}

package/src/widgets/IFrameWidget.ts

@@ -0,0 +1,36 @@
+import React from "react"
+const R = React.createElement
+import _ from "lodash"
+import Widget, { CreateViewElementOptions } from "./Widget"
+
+export default class IFrameWidget extends Widget {
+  // Creates a React element that is a view of the widget
+  // options:
+  //  schema: schema to use
+  //  dataSource: data source to use
+  //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+  //  design: widget design
+  //  scope: scope of the widget (when the widget self-selects a particular scope)
+  //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+  //  onScopeChange: called with scope of widget
+  //  onDesignChange: called with new design. null/undefined for readonly
+  //  width: width in pixels on screen
+  //  height: height in pixels on screen
+  //  singleRowTable: optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this
+  createViewElement(options: CreateViewElementOptions) {
+    // Put here so IFrameWidget can be created on server
+    const IFrameWidgetComponent = require("./IFrameWidgetComponent").default
+
+    return R(IFrameWidgetComponent, {
+      design: options.design,
+      onDesignChange: options.onDesignChange,
+      width: options.width,
+      height: options.height
+    })
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return false
+  }
+}

package/src/widgets/IFrameWidgetComponent.ts

@@ -0,0 +1,116 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import _ from "lodash"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import DropdownWidgetComponent from "./DropdownWidgetComponent"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+
+export interface IFrameWidgetComponentProps {
+  design: any
+  /** Called with new design. null/undefined for readonly */
+  onDesignChange?: any
+  width?: number
+  height?: number
+}
+
+interface IFrameWidgetComponentState {
+  editUrl: any
+  editing: any
+}
+
+export default class IFrameWidgetComponent extends React.Component<
+  IFrameWidgetComponentProps,
+  IFrameWidgetComponentState
+> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      // True when editing chart
+      editing: false,
+      editUrl: null
+    }
+  }
+
+  handleStartEditing = () => {
+    return this.setState({ editing: true, editUrl: this.props.design.url })
+  }
+
+  handleEndEditing = () => {
+    this.setState({ editing: false })
+    return this.props.onDesignChange(_.extend({}, this.props.design, { url: this.state.editUrl }))
+  }
+
+  renderEditor() {
+    if (!this.state.editing) {
+      return null
+    }
+
+    const content = R(
+      "div",
+      { className: "mb-3" },
+      R("label", null, "URL to embed"),
+      R("input", {
+        type: "text",
+        className: "form-control",
+        value: this.state.editUrl || "",
+        onChange: (ev: any) => this.setState({ editUrl: ev.target.value })
+      }),
+      R("div", { className: "form-text text-muted" }, "e.g. https://www.youtube.com/embed/dQw4w9WgXcQ")
+    )
+
+    return R(
+      ModalPopupComponent,
+      {
+        header: "Configure",
+        showCloseX: true,
+        onClose: this.handleEndEditing
+      },
+      content
+    )
+  }
+
+  // Render a link to start editing
+  renderEditLink() {
+    return R(
+      "div",
+      { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing },
+      R(ui.Icon, { id: "fa-youtube-play" })
+    )
+  }
+  // R 'div', style: { position: "absolute", bottom: @props.height / 2, left: 0, right: 0, textAlign: "center" },
+  //   R 'a', className: "btn btn-link", onClick: @handleStartEditing, "Click Here to Configure"
+
+  render() {
+    const dropdownItems = []
+    if (this.props.onDesignChange != null) {
+      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+    }
+
+    return R(
+      DropdownWidgetComponent,
+      {
+        width: this.props.width,
+        height: this.props.height,
+        dropdownItems
+      },
+      this.renderEditor(),
+      (() => {
+        if (this.props.design.url) {
+          return R("iframe", {
+            src: this.props.design.url,
+            width: this.props.width,
+            height: this.props.height,
+            frameborder: 0,
+            allowfullscreen: "allowfullscreen"
+          })
+        } else {
+          if (this.props.onDesignChange != null) {
+            return this.renderEditLink()
+          }
+        }
+        return null
+      })()
+    )
+  }
+}

package/src/widgets/ImageUploaderComponent.tsx

@@ -0,0 +1,143 @@
+import { DataSource } from "@mwater/expressions"
+import React from "react"
+const R = React.createElement
+import Dropzone, { DropzoneState } from "react-dropzone"
+import uuid from "uuid"
+
+export interface ImageUploaderComponentProps {
+  /** Data source to use for chart */
+  dataSource: DataSource
+  /** callback for when upload is successful */
+  onUpload: any
+  uid?: string
+}
+
+interface ImageUploaderComponentState {
+  uid: any
+  uploading: any
+  editing: any
+  files: File[] | null
+}
+
+export default class ImageUploaderComponent extends React.Component<
+  ImageUploaderComponentProps,
+  ImageUploaderComponentState
+> {
+  progressBar: HTMLDivElement | null
+  xhr: XMLHttpRequest
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      uid: props.uid,
+      files: null,
+      uploading: false,
+      editing: props.uid ? false : true
+    }
+  }
+
+  onFileDrop = (files: any) => {
+    this.setState({ files, uploading: true })
+
+    this.xhr = new XMLHttpRequest()
+    const fd = new FormData()
+    fd.append("image", files[0])
+    this.xhr.upload.onprogress = this.uploadProgress
+    this.xhr.addEventListener("load", this.uploadComplete, false)
+
+    const id = this.createId()
+    this.xhr.open("POST", this.props.dataSource.getImageUploadUrl(id))
+    this.xhr.send(fd)
+    return this.setState({ uid: id })
+  }
+
+  uploadProgress = (e: any) => {
+    if (!this.progressBar) {
+      return
+    }
+
+    if (e.lengthComputable) {
+      const percentComplete = Math.round((e.loaded * 100) / e.total)
+      return (this.progressBar.style.width = `${percentComplete}%`)
+    } else {
+      return (this.progressBar.style.width = "100%")
+    }
+  }
+
+  uploadComplete = (e: any) => {
+    if (e.target.status === 200) {
+      this.setState({ uploading: false, files: null, editing: false })
+      this.props.onUpload(this.state.uid)
+    } else {
+      this.setState({ uploading: false, files: null, editing: false })
+      alert(`Upload failed: ${e.target.responseText}`)
+    }
+  }
+
+  createId() {
+    return uuid().replace(/-/g, "")
+  }
+
+  renderUploader() {
+    return <div>
+      <Dropzone multiple={false} onDrop={this.onFileDrop} noDragEventsBubbling={true}>
+        {({getRootProps, getInputProps, isDragActive}: DropzoneState) => (
+          <div {...getRootProps({ className: "dropzone" })}>
+            <input {...getInputProps()} />
+            { this.state.uploading
+            ? <div className="progress">
+                <div 
+                  className="progress-bar"
+                  style={{ width: "0%" }}
+                  ref={(c) => {
+                    this.progressBar = c
+                  }}
+                />
+              </div>
+            : <div>
+                 {
+                 isDragActive ?
+                  "Drop the files here" 
+                  : "Drop file here or click to select file"
+                 }
+                </div>
+            }
+          </div>
+        )}
+      </Dropzone>
+
+      { this.state.uid && <a className="link-plain" onClick={() => this.setState({ editing: false })}>Cancel</a> }
+    </div>
+  }
+
+  renderPreview() {
+    const thumbnailStyle = {
+      width: "100px",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      padding: 4,
+      border: "1px solid #aeaeae",
+      marginRight: 20
+    }
+    return R(
+      "div",
+      null,
+      R("img", { style: thumbnailStyle, src: this.props.dataSource.getImageUrl(this.state.uid) }),
+      R("a", { className: "btn btn-secondary", onClick: this.handleChangeImage }, "Change")
+    )
+  }
+
+  handleChangeImage = () => {
+    return this.setState({ editing: true })
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      this.state.uid && !this.state.editing ? this.renderPreview() : undefined,
+      this.state.editing || !this.state.uid ? this.renderUploader() : undefined
+    )
+  }
+}

package/src/widgets/ImageWidget.ts

@@ -0,0 +1,147 @@
+import React from "react"
+const R = React.createElement
+import _ from "lodash"
+import { DataSource, Expr, ExprCleaner, ExprCompiler, FieldExpr, Schema } from "@mwater/expressions"
+import { injectTableAlias } from "@mwater/expressions"
+import Widget, { CreateViewElementOptions } from "./Widget"
+import { JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql"
+import { JsonQLFilter } from ".."
+
+/** Image widget. Design is */
+export interface ImageWidgetDesign {
+  /** arbitrary url of image if using url */
+  imageUrl?: string | null
+
+  /** uid of image if on server */
+  uid?: string | null
+
+  /** image or imagelist expression if using expression */
+  expr?: Expr
+  
+  /** string caption */
+  caption?: string | null
+
+  /** optional rotation in degrees for imageUrl or uid */
+  rotation?: number
+
+  /** "top"/"bottom". Defaults to "bottom" */
+  captionPosition?: "top" | "bottom"
+
+  /** Optional URL to open when clicked */
+  url?: string
+
+  /** Opens URL in same tab if true*/
+  openUrlInSameTab?: boolean
+}
+
+
+export default class ImageWidget extends Widget {
+  // Creates a React element that is a view of the widget
+  // options:
+  //  schema: schema to use
+  //  dataSource: data source to use
+  //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+  //  design: widget design
+  //  scope: scope of the widget (when the widget self-selects a particular scope)
+  //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+  //  onScopeChange: called with scope of widget
+  //  onDesignChange: called with new design. null/undefined for readonly
+  //  width: width in pixels on screen
+  //  height: height in pixels on screen
+  //  singleRowTable: optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this
+  createViewElement(options: CreateViewElementOptions) {
+    // Put here so ImageWidget can be created on server
+    const ImageWidgetComponent = require("./ImageWidgetComponent").default
+
+    return R(ImageWidgetComponent, {
+      schema: options.schema,
+      dataSource: options.dataSource,
+      widgetDataSource: options.widgetDataSource,
+      filters: options.filters,
+      design: options.design,
+      onDesignChange: options.onDesignChange,
+      width: options.width,
+      height: options.height,
+      singleRowTable: options.singleRowTable
+    })
+  }
+
+  // Get the data that the widget needs. This will be called on the server, typically.
+  //   design: design of the chart
+  //   schema: schema to use
+  //   dataSource: data source to get data from
+  //   filters: array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }
+  //   callback: (error, data)
+  getData(design: ImageWidgetDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any) {
+    if (!design.expr) {
+      return callback(null)
+    }
+
+    const exprCleaner = new ExprCleaner(schema)
+    const expr = exprCleaner.cleanExpr(design.expr)
+    if (!expr) {
+      return callback(null)
+    }
+
+    const { table } = (design.expr as FieldExpr)
+    const exprCompiler = new ExprCompiler(schema)
+    const imageExpr = exprCompiler.compileExpr({ expr , tableAlias: "main" })
+
+    // Get distinct to only show if single row match
+    const query: JsonQLSelectQuery = {
+      type: "query",
+      distinct: true,
+      selects: [{ type: "select", expr: imageExpr, alias: "value" }],
+      from: { type: "table", table, alias: "main" },
+      limit: 2
+    }
+
+    // Get relevant filters
+    filters = _.where(filters || [], { table })
+    let whereClauses = _.map(filters, (f) => injectTableAlias(f.jsonql, "main"))
+
+    whereClauses.push({ type: "op", op: "is not null", exprs: [imageExpr] })
+    whereClauses = _.compact(whereClauses)
+
+    // Wrap if multiple
+    if (whereClauses.length > 1) {
+      query.where = { type: "op", op: "and", exprs: whereClauses }
+    } else {
+      query.where = whereClauses[0]
+    }
+
+    // Execute query
+    dataSource.performQuery(query, (error: any, rows: any) => {
+      if (error) {
+        callback(error)
+      } else {
+        // If multiple, use null
+        if (rows.length !== 1) {
+          return callback(null, null)
+        } else {
+          // Make sure is not string
+          let { value } = rows[0]
+          if (_.isString(rows[0].value)) {
+            value = JSON.parse(rows[0].value)
+          }
+
+          callback(null, value)
+        }
+      }
+    })
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return false
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema) {
+    if (design.expr?.table) {
+      return [design.expr.table]
+    }
+
+    return []
+  }
+}