@mwater/visualization 5.0.0

package/src/UIComponents.ts

@@ -0,0 +1,289 @@
+import _ from "lodash"
+import React, { ReactNode } from "react"
+import ReactDOM from "react-dom"
+const R = React.createElement
+import * as motion from "react-motion"
+import { LinkComponent } from "@mwater/expressions-ui"
+import { Radio } from "@mwater/react-library/lib/bootstrap"
+
+export interface SectionComponentProps {
+  icon?: string
+  label?: any
+}
+
+// Miscellaneous ui components
+
+// Section with a title and icon
+export class SectionComponent extends React.Component<SectionComponentProps> {
+  render() {
+    return R(
+      "div",
+      { style: { marginBottom: 15 } },
+      R(
+        "label",
+        { className: "text-muted" },
+        this.props.icon && this.props.icon.match(/^fa-/)
+          ? [R("i", { className: `fa ${this.props.icon}` }), " "]
+          : undefined,
+        this.props.icon && this.props.icon.match(/^glyphicon-/)
+          ? [R("span", { className: `glyphicon ${this.props.icon}` }), " "]
+          : undefined,
+        this.props.label
+      ),
+      R("div", { style: { marginLeft: 10 } }, this.props.children)
+    )
+  }
+}
+
+/** List of options with a name and description each */
+export class OptionListComponent extends React.Component<{
+  items: {
+    name: string
+    desc?: string
+    onClick: () => void
+    onRemove?: () => void
+  }[]
+  hint?: string
+}> {
+  render() {
+    return R(
+      "div",
+      null,
+      R("div", { style: { color: "#AAA", fontStyle: "italic" }, key: "hint" }, this.props.hint),
+      R(
+        "div",
+        { className: "mwater-visualization-big-options", key: "options" },
+        _.map(this.props.items, (item, i) => {
+          return R(OptionComponent, {
+            name: item.name,
+            desc: item.desc,
+            onClick: item.onClick,
+            onRemove: item.onRemove,
+            key: i
+          })
+        })
+      )
+    )
+  }
+}
+
+export interface OptionComponentProps {
+  name?: string
+  desc?: string
+  onClick: any
+  onRemove?: any
+}
+
+// Single option
+export class OptionComponent extends React.Component<OptionComponentProps> {
+  handleClick = (ev: any) => {
+    ev.stopPropagation()
+    return this.props.onRemove()
+  }
+
+  render() {
+    return R(
+      "div",
+      { className: "mwater-visualization-big-option", onClick: this.props.onClick },
+      this.props.onRemove
+        ? R(
+            "button",
+            { type: "button", className: "btn btn-link btn-sm float-end", onClick: this.handleClick },
+            R("span", { className: "fas fa-times" })
+          )
+        : undefined,
+      R("div", { style: { fontWeight: "bold" } }, this.props.name),
+      R("div", { style: { color: "#888" } }, this.props.desc)
+    )
+  }
+}
+export interface SwitchViewComponentProps {
+  /** Map of view id to view element */
+  views: any
+  viewId: string
+}
+
+interface SwitchViewComponentState {
+  measuring: any
+}
+
+// Switches views smoothly
+export class SwitchViewComponent extends React.Component<SwitchViewComponentProps, SwitchViewComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      measuring: false
+    }
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // If view changes, measure all components
+    if (nextProps.viewId !== this.props.viewId) {
+      return this.setState({ measuring: true })
+    }
+  }
+
+  // Save components
+  refCallback = (id: any, comp: any) => {
+    this.comps = this.comps || {}
+    return (this.comps[id] = comp)
+  }
+
+  componentDidUpdate(prevProps: any, prevState: any) {
+    // If measuring, get the heights to interpolate
+    if (this.state.measuring) {
+      this.heights = {}
+
+      // Get heights
+      for (let id of _.keys(this.props.views)) {
+        this.heights[id] = ReactDOM.findDOMNode(this.comps[id]).clientHeight
+      }
+
+      return this.setState({ measuring: false })
+    }
+  }
+
+  render() {
+    // Create the style object that has the opacity for each view
+    let id
+    const style = {}
+    for (id in this.props.views) {
+      const view = this.props.views[id]
+      style[id] = motion.spring(id === this.props.viewId ? 1 : 0, [332, 34])
+    } // Stiff, quick spring
+
+    return R(motion.Motion, { style }, (style: any) => {
+      // If measuring, display all positioned at top
+      if (this.state.measuring) {
+        return R(
+          "div",
+          { style: { position: "relative" } },
+          _.map(_.keys(this.props.views), (v) => {
+            return R(
+              "div",
+              {
+                style: { position: "absolute", top: 0, opacity: style[v] },
+                ref: this.refCallback.bind(null, v),
+                key: v
+              },
+              this.props.views[v]
+            )
+          })
+        )
+      }
+
+      // If transitioning
+      if (style[this.props.viewId] !== 1) {
+        // Calculate interpolated height
+        let height = 0
+        for (id in style) {
+          const val = style[id]
+          height += val * this.heights[id]
+        }
+
+        return R(
+          "div",
+          { style: { position: "relative", height } },
+          _.map(_.keys(this.props.views), (v) => {
+            return R(
+              "div",
+              { style: { position: "absolute", top: 0, left: 0, right: 0, opacity: style[v] }, key: v },
+              this.props.views[v]
+            )
+          })
+        )
+      }
+
+      // Just display (but wrapped to keep same component)
+      return R("div", null, R("div", { key: this.props.viewId }, this.props.views[this.props.viewId]))
+    })
+  }
+}
+
+export interface ToggleEditComponentProps {
+  forceOpen?: boolean
+  initiallyOpen?: boolean
+  label: any
+  editor: any
+  onRemove?: any
+}
+
+interface ToggleEditComponentState {
+  open: any
+}
+
+// Shows as editable link that can be clicked to open
+// Editor can be node or can be function that takes onClose function as first parameter
+export class ToggleEditComponent extends React.Component<ToggleEditComponentProps, ToggleEditComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = { open: props.initiallyOpen || false }
+  }
+
+  close = () => {
+    // Save height of editor
+    if (this.editorComp) {
+      this.editorHeight = ReactDOM.findDOMNode(this.editorComp).clientHeight
+    }
+
+    return this.setState({ open: false })
+  }
+
+  open = () => {
+    return this.setState({ open: true })
+  }
+
+  handleToggle = () => {
+    return this.setState({ open: !this.state.open })
+  }
+
+  // Save editor comp
+  editorRef = (editorComp: any) => {
+    return (this.editorComp = editorComp)
+  }
+
+  render() {
+    let { editor } = this.props
+    if (_.isFunction(editor)) {
+      editor = editor(this.close)
+    }
+
+    const link = R(LinkComponent, { onClick: this.open, onRemove: this.props.onRemove }, this.props.label)
+
+    const isOpen = this.state.open || this.props.forceOpen
+
+    return R(SwitchViewComponent, {
+      views: { editor, link },
+      viewId: isOpen ? "editor" : "link"
+    })
+  }
+}
+
+export interface RadioToggleComponentProps {
+  value?: any
+  /** List of layers */
+  options: { value: any, label: ReactNode }[]
+  onChange: any
+}
+
+/** Switch between several values as a series of radio buttons */
+export class RadioToggleComponent extends React.Component<RadioToggleComponentProps> {
+  render() {
+    return R(
+      "div",
+      null,
+      _.map(this.props.options, (option, i) => {
+        return R(
+          Radio,
+          {
+            value: this.props.value,
+            radioValue: option.value,
+            inline: true,
+            onChange: this.props.onChange
+          },
+          option.label
+        )
+      })
+    )
+  }
+}

package/src/UndoStack.ts

@@ -0,0 +1,59 @@
+import _ from "lodash"
+
+// Immutable undo/redo stack. Mutation operations return a new copy
+export default class UndoStack {
+  undoStack: any[]
+  redoStack: any[]
+
+  constructor(undoStack?: any, redoStack?: any) {
+    this.undoStack = undoStack || []
+    this.redoStack = redoStack || []
+  }
+
+  // Add a value to the stack
+  push(value: any) {
+    // No trivial pushes
+    if (_.isEqual(this.getValue(), value)) {
+      return this
+    }
+
+    const undoStack = this.undoStack.slice()
+    undoStack.push(value)
+    const redoStack: any = []
+
+    return new UndoStack(undoStack, redoStack)
+  }
+
+  canUndo() {
+    return this.undoStack.length > 1
+  }
+
+  canRedo() {
+    return this.redoStack.length > 0
+  }
+
+  undo() {
+    // Put last undo on to redoStack
+    const redoStack = this.redoStack.slice()
+    redoStack.push(_.last(this.undoStack))
+
+    const undoStack = _.initial(this.undoStack)
+
+    return new UndoStack(undoStack, redoStack)
+  }
+
+  redo() {
+    // Put last redo on to undoStack
+    const undoStack = this.undoStack.slice()
+    undoStack.push(_.last(this.redoStack))
+
+    const redoStack = _.initial(this.redoStack)
+
+    return new UndoStack(undoStack, redoStack)
+  }
+
+  // Get the current value
+  getValue() {
+    return _.last(this.undoStack)
+  }
+}

package/src/VerticalLayoutComponent.ts

@@ -0,0 +1,108 @@
+import $ from "jquery"
+import React from "react"
+import ReactDOM from "react-dom"
+const R = React.createElement
+import _ from "lodash"
+
+export interface VerticalLayoutComponentProps {
+  height: number
+  relativeHeights: any
+}
+
+interface VerticalLayoutComponentState {
+  availableHeight: any
+}
+
+// Lays out divs vertically, allowing fractional allocation combined with auto-sized ones
+// Children must all have keys
+// Children will be cloned with height: prop set in case of fractional ones
+export default class VerticalLayoutComponent extends React.Component<
+  VerticalLayoutComponentProps,
+  VerticalLayoutComponentState
+> {
+  constructor(props: any) {
+    super(props)
+    this.state = { availableHeight: 0 }
+    this.childRefs = {}
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    if (nextProps.height !== this.props.height || !_.isEqual(nextProps.relativeHeights, this.props.relativeHeights)) {
+      return this.recalculateSize(nextProps)
+    }
+  }
+
+  componentDidMount() {
+    return this.recalculateSize(this.props)
+  }
+
+  recalculateSize(props: any) {
+    // Calculate available height
+    let availableHeight = props.height
+
+    for (let child of props.children) {
+      if (!child) {
+        continue
+      }
+      if (props.relativeHeights[child.key]) {
+        continue
+      }
+
+      const node = ReactDOM.findDOMNode(this.childRefs[child.key])
+      availableHeight -= $(node).outerHeight()
+    }
+
+    return this.setState({ availableHeight })
+  }
+
+  // Get a subcomponent
+  getComponent(key: any) {
+    return this.childRefs[key]
+  }
+
+  render() {
+    // Calculate scaling
+    return R(
+      "div",
+      { style: { height: this.props.height } },
+      React.Children.map(this.props.children, (child) => {
+        if (!child) {
+          return
+        }
+
+        // If variable height
+        if (child.key && this.props.relativeHeights[child.key]) {
+          // If available height is known, render variable
+          if (this.state.availableHeight) {
+            const height = this.state.availableHeight * this.props.relativeHeights[child.key]
+            return R(
+              "div",
+              { style: { height, position: "relative" } },
+              R(
+                "div",
+                {
+                  style: { height },
+                  ref: (c: any) => {
+                    return (this.childRefs[child.key] = c)
+                  }
+                },
+                React.cloneElement(child, { height })
+              )
+            )
+          }
+          // Otherwise don't show until available height is known
+          return null
+        }
+        return R(
+          "div",
+          {
+            ref: (c: any) => {
+              return (this.childRefs[child.key] = c)
+            }
+          },
+          child
+        )
+      })
+    )
+  }
+}

package/src/WidgetScope.ts

@@ -0,0 +1,17 @@
+import { Expr } from "@mwater/expressions"
+import { JsonQLFilter } from "./JsonQLFilter"
+
+/** Scope that a particular widget can apply when a part of it is clicked */
+export interface WidgetScope {
+  /** Human-readable name of the scope */
+  name: string
+
+  /** Filter as JsonQL */
+  filter: JsonQLFilter
+
+  /** Filter as an expression */
+  filterExpr: Expr
+
+  /** Widget-specific data */
+  data: any
+}

package/src/axes/Axis.ts

@@ -0,0 +1,89 @@
+import { Expr } from "@mwater/expressions"
+
+/** Axis
+
+An axis is an expression with optional aggregation, transform and color mapping
+In ggplot2 parlance, an "aesthetic"
+
+It contains:
+ expr: expression
+ aggr: DEPRECATED: optional aggregation (e.g. sum)
+ xform: optional transformation to be applied. object with `type` field. See below
+ colorMap: optional array of color mappings. See below
+ excludedValues: Array of post-xform values to exclude when displaying. 
+ format: optional d3-format format for numeric values. Default if null is ","
+
+## Xforms
+
+types: 
+
+
+*/
+export interface Axis {
+  expr: Expr
+  /**
+   * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
+   * `date`: convert to complete date e.g. `2015-02-08`. type date
+   * `year`: year only e.g. `2015-01-01`. type date
+   * `yearmonth`: year and month only e.g. `2015-02-01`. type date
+   * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
+   * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
+   * `month`: month only e.g. `02`. type enum
+   * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
+   * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
+   * `floor`: convert to floor. type enum
+   */
+  xform?: AxisXform
+
+  colorMap?: ColorMap
+  /** optional array of category values which define the order in which categories should be rendered */
+  drawOrder?: any[]
+
+  /** optional labels for categories. Indexed by JSON of category value */
+  categoryLabels?: { [valueJson: string]: string }
+
+  /** optional string for null category */
+  nullLabel?: string
+
+  excludedValues?: any[]
+  format?: string
+
+  /** @deprecated */
+  aggr?: string
+}
+/**
+ * Color map
+ * Array of { value: post-transform value of expression, color: html color }
+ * The color map is kept in sync with the values of the axis after transformation.
+ * The order is not important.
+ */
+export type ColorMap = ColorMapItem[]
+
+export interface ColorMapItem {
+  value: any
+  color: string | null
+}
+
+export interface AxisCategory {
+  label: string
+  value: any
+}
+
+export interface AxisXform {
+  type: "bin" | "date" | "year" | "yearmonth" | "month" | "week" | "ranges" | "yearweek" | "yearquarter" | "floor"
+  numBins?: number
+  min?: number
+  max?: number
+  excludeUpper?: boolean
+  excludeLower?: boolean
+  ranges?: AxisXformRange[]
+}
+
+export interface AxisXformRange {
+  id: string
+  label?: string
+  minValue?: number | null
+  maxValue?: number | null
+  minOpen: boolean
+  maxOpen: boolean
+}