@mwater/visualization 5.0.0

package/src/widgets/TOCWidget.ts

@@ -0,0 +1,326 @@
+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 update from "@mwater/react-library/lib/update"
+import Widget, { CreateViewElementOptions } from "./Widget"
+import DropdownWidgetComponent from "./DropdownWidgetComponent"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+
+// Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+// design is:
+//   header: text of header. Defaults to "Contents"
+//   borderWeight: border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy
+//   numbering: true/false for prepending numbering to entries (e.g. 3.4.1)
+export default class TOCWidget 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
+  //  tocEntries: entries in the table of contents
+  //  onScrollToTOCEntry: called with (widgetId, tocEntryId) to scroll to TOC entry
+  createViewElement(options: CreateViewElementOptions) {
+    return R(TOCWidgetComponent, {
+      design: options.design,
+      onDesignChange: options.onDesignChange,
+      width: options.width,
+      height: options.height,
+      tocEntries: options.tocEntries,
+      onScrollToTOCEntry: options.onScrollToTOCEntry
+    })
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return true
+  }
+}
+
+class TOCWidgetComponent extends React.Component {
+  static propTypes = {
+    design: PropTypes.object.isRequired, // See Map Design.md
+    onDesignChange: PropTypes.func, // Called with new design. null/undefined for readonly
+
+    width: PropTypes.number,
+    height: PropTypes.number,
+    tocEntries: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.any,
+        widgetId: PropTypes.string.isRequired,
+        level: PropTypes.number.isRequired,
+        text: PropTypes.string.isRequired
+      })
+    ),
+    onScrollToTOCEntry: PropTypes.func
+  }
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      editing: false // true if editing
+    }
+  }
+
+  handleStartEditing = () => {
+    return this.setState({ editing: true })
+  }
+  handleEndEditing = () => {
+    return this.setState({ editing: false })
+  }
+
+  renderEditor() {
+    if (!this.state.editing) {
+      return null
+    }
+
+    // Create editor
+    const editor = R(TOCWidgetDesignerComponent, {
+      design: this.props.design,
+      onDesignChange: this.props.onDesignChange
+    })
+
+    return R(
+      ModalPopupComponent,
+      {
+        showCloseX: true,
+        header: "Table of Contents Options",
+        onClose: this.handleEndEditing
+      },
+      editor
+    )
+  }
+
+  renderContent() {
+    return R(TOCWidgetViewComponent, {
+      design: this.props.design,
+      onDesignChange: this.props.onDesignChange,
+      width: this.props.width,
+      height: this.props.height,
+      tocEntries: this.props.tocEntries,
+      onScrollToTOCEntry: this.props.onScrollToTOCEntry
+    })
+  }
+
+  render() {
+    const dropdownItems = []
+    if (this.props.onDesignChange != null) {
+      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+    }
+
+    // Wrap in a simple widget
+    return R(
+      "div",
+      { onDoubleClick: this.handleStartEditing },
+      this.props.onDesignChange != null ? this.renderEditor() : undefined,
+      R(
+        DropdownWidgetComponent,
+        {
+          width: this.props.width,
+          height: this.props.height,
+          dropdownItems
+        },
+        this.renderContent()
+      )
+    )
+  }
+}
+
+// Displays the contents of the widget
+class TOCWidgetViewComponent extends React.Component {
+  static propTypes = {
+    design: PropTypes.object.isRequired, // Design of chart
+    onDesignChange: PropTypes.func, // Called with new design. null/undefined for readonly
+
+    width: PropTypes.number,
+    height: PropTypes.number,
+
+    tocEntries: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.any,
+        widgetId: PropTypes.string.isRequired,
+        level: PropTypes.number.isRequired,
+        text: PropTypes.string.isRequired
+      })
+    ),
+    onScrollToTOCEntry: PropTypes.func
+  }
+
+  handleEntryClick = (tocEntry: any) => {
+    return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id)
+  }
+
+  renderTOCEntry(tocEntry: any, index: any) {
+    // Find indentation number (e.g "1.3.2") by counting # backwards that are same level with no level lower
+    let level
+    let indentation = ""
+    if (this.props.design.numbering) {
+      let asc, end
+      for (
+        level = 1, end = tocEntry.level, asc = 1 <= end;
+        asc ? level <= end : level >= end;
+        asc ? level++ : level--
+      ) {
+        let value = 0
+        for (let i2 = 0, end1 = index, asc1 = 0 <= end1; asc1 ? i2 <= end1 : i2 >= end1; asc1 ? i2++ : i2--) {
+          if (this.props.tocEntries[i2].level === level) {
+            value += 1
+          } else if (this.props.tocEntries[i2].level < level) {
+            value = 0
+          }
+        }
+
+        indentation += `${value}.`
+      }
+      indentation += " "
+    }
+
+    return R(
+      "div",
+      { key: index, style: { paddingLeft: tocEntry.level * 8 - 8 } },
+      R(
+        "a",
+        { className: "link-plain", onClick: this.handleEntryClick.bind(null, tocEntry) },
+        indentation,
+        R("span", null, tocEntry.text)
+      )
+    )
+  }
+
+  render() {
+    // Get border
+    const border = (() => {
+      switch (this.props.design.borderWeight) {
+        case 0:
+          return "none"
+        case 1:
+          return "solid 1px #f4f4f4"
+        case 2:
+          return "solid 1px #ccc"
+        case 3:
+          return "solid 1px #888"
+      }
+    })()
+
+    return R(
+      "div",
+      {
+        style: {
+          width: this.props.width,
+          height: this.props.height,
+          border,
+          padding: 5,
+          margin: 1
+        }
+      },
+      // Render header
+      R("div", { style: { fontWeight: "bold" } }, this.props.design.header),
+      _.map(this.props.tocEntries, (tocEntry, i) => {
+        return this.renderTOCEntry(tocEntry, i)
+      }),
+
+      // Add placeholder if none and editable
+      this.props.onDesignChange && this.props.tocEntries.length === 0
+        ? R(
+            "div",
+            { className: "text-muted" },
+            "Table of Contents will appear here as text blocks with headings are added to the dashboard"
+          )
+        : undefined
+    )
+  }
+}
+
+// Designer for TOC widget options
+class TOCWidgetDesignerComponent extends React.Component {
+  constructor(...args: any[]) {
+    super(...args)
+    this.update = this.update.bind(this)
+  }
+
+  static propTypes = {
+    design: PropTypes.object.isRequired,
+    onDesignChange: PropTypes.func.isRequired
+  }
+
+  // Updates design with the specified changes
+  update() {
+    return update(this.props.design, this.props.onDesignChange, arguments)
+  }
+
+  handleMarkdownChange = (ev: any) => {
+    const design = _.extend({}, this.props.design, { markdown: ev.target.value })
+    return this.props.onDesignChange(design)
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      R(
+        ui.FormGroup,
+        { label: "Header" },
+        R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: "None" })
+      ),
+      R(
+        ui.FormGroup,
+        { label: "Border" },
+        R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })
+      ),
+      R(
+        ui.FormGroup,
+        { label: "Numbering" },
+        R(
+          ui.Radio,
+          {
+            inline: true,
+            value: this.props.design.numbering || false,
+            radioValue: true,
+            onChange: this.update("numbering")
+          },
+          "On"
+        ),
+        R(
+          ui.Radio,
+          {
+            inline: true,
+            value: this.props.design.numbering || false,
+            radioValue: false,
+            onChange: this.update("numbering")
+          },
+          "Off"
+        )
+      )
+    )
+  }
+}
+
+// Allows setting border heaviness
+class BorderComponent extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    defaultValue: PropTypes.number,
+    onChange: PropTypes.func.isRequired
+  }
+
+  render() {
+    const value = this.props.value != null ? this.props.value : this.props.defaultValue
+
+    return R(
+      "div",
+      null,
+      R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, "None"),
+      R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, "Light"),
+      R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, "Medium"),
+      R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, "Heavy")
+    )
+  }
+}

package/src/widgets/Widget.ts

@@ -0,0 +1,83 @@
+import { Schema, DataSource } from "@mwater/expressions"
+import { ReactElement } from "react"
+import { WidgetScope, JsonQLFilter } from ".."
+import { WidgetDataSource } from "./WidgetDataSource"
+
+export interface CreateViewElementOptions {
+  /** schema to use **/
+  schema: Schema
+  /** data source to use. Only used when designing, for display uses widgetDataSource **/
+  dataSource: DataSource
+  /** Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource. **/
+  widgetDataSource: WidgetDataSource
+  /** widget design **/
+  design: object
+  /** scope of the widget (when the widget self-selects a particular scope) **/
+  scope?: WidgetScope | null
+  /** array of filters to apply.**/
+  filters: JsonQLFilter[]
+  /** called with scope of widget **/
+  onScopeChange: (scope: WidgetScope | null) => void
+  /** called with new design. null/undefined for readonly **/
+  onDesignChange?: { (design: object): void } | null
+  /** width in pixels on screen **/
+  width?: number
+  /** height in pixels on screen **/
+  height?: number
+  /** optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this **/
+  singleRowTable?: string
+  /** Called with (tableId, rowId) when item is clicked **/
+  onRowClick?: (tableId: string, rowId: any) => void
+  /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+  namedStrings?: { [key: string]: string }
+
+  /** Entries in the table of content */
+  tocEntries?: string[]
+
+  /** the widget callback ref */
+  widgetRef?: (widget: any) => void
+
+  /** called with (widgetId, tocEntryId) to scroll to TOC entry */
+  onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void
+}
+
+export default class Widget {
+  /** Creates a React element that is a view of the widget */
+  createViewElement(options: CreateViewElementOptions): ReactElement<any> {
+    throw new Error("Not implemented")
+  }
+
+  /* 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: any,
+    schema: Schema,
+    dataSource: DataSource,
+    filters: JsonQLFilter[],
+    callback: (error: any, data?: any) => void
+  ): void {
+    throw new Error("Not implemented")
+  }
+
+  /** Determine if widget is auto-height, which means that a vertical height is not required. */
+  isAutoHeight(): boolean {
+    return false
+  }
+
+  /** Get a list of table ids that can be filtered on */
+  getFilterableTables(design: any, schema: Schema): string[] {
+    return []
+  }
+
+  /** Get table of contents entries for the widget, entries that should be displayed in the TOC.
+   * returns `[{ id: "id that is unique within widget", text: "text of TOC entry", level: 1, 2, etc. }]
+   */
+  getTOCEntries(design: any, namedStrings?: { [key: string]: string }): { id: string; text: string; level: number }[] {
+    return []
+  }
+}

package/src/widgets/WidgetDataSource.ts

@@ -0,0 +1,23 @@
+import { JsonQLFilter } from "../JsonQLFilter"
+import { MapDataSource } from "../maps/MapDataSource"
+import { MapDesign } from "../maps/MapDesign"
+
+/** Interface for a widget data source that gives the widget access to the data it needs, even if that data is not directly available from the data source
+ * For example, Alice might share a widget with Bob. Bob can't access the data directly that Alice sees (since it's private), but he can use the widget
+ * data source to get it, as the server will return the exact data he needs for the widget, since the server has a copy of the design of the widget.
+ */
+export interface WidgetDataSource {
+  /** 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
+
+  /** For map widgets, the following is required */
+  getMapDataSource?(design: MapDesign): MapDataSource
+
+  /** 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
+}

package/src/widgets/WidgetFactory.ts

@@ -0,0 +1,37 @@
+import ChartWidget from "./charts/ChartWidget"
+import LayeredChart from "./charts/layered/LayeredChart"
+import TableChart from "./charts/table/TableChart"
+import CalendarChart from "./charts/calendar/CalendarChart"
+import ImageMosaicChart from "./charts/imagemosaic/ImageMosaicChart"
+import PivotChart from "./charts/pivot/PivotChart"
+import MarkdownWidget from "./MarkdownWidget"
+import TextWidget from "./text/TextWidget"
+import ImageWidget from "./ImageWidget"
+import MapWidget from "./MapWidget"
+import IFrameWidget from "./IFrameWidget"
+import TOCWidget from "./TOCWidget"
+import Widget from "./Widget"
+
+const widgetTypes = {
+  LayeredChart: new ChartWidget(new LayeredChart()),
+  TableChart: new ChartWidget(new TableChart()),
+  CalendarChart: new ChartWidget(new CalendarChart()),
+  ImageMosaicChart: new ChartWidget(new ImageMosaicChart()),
+  PivotChart: new ChartWidget(new PivotChart()),
+  Markdown: new MarkdownWidget(),
+  Map: new MapWidget(),
+  Text: new TextWidget(),
+  Image: new ImageWidget(),
+  IFrame: new IFrameWidget(),
+  TOC: new TOCWidget()
+}
+
+// Creates widgets based on type
+export default class WidgetFactory {
+  static createWidget(type: string): Widget {
+    if (widgetTypes[type]) {
+      return widgetTypes[type]
+    }
+    throw new Error(`Unknown widget type ${type}`)
+  }
+}

package/src/widgets/WidgetScoper.ts

@@ -0,0 +1,51 @@
+import _ from "lodash"
+
+// Scopes widgets, applying scope that a widget specifies to itself and the filter to other
+// widgets. Immutable.
+// Scope is a JSON object consisting of:
+//  name: human-readable name for the scope/filter
+//  filter: filter for other widgets in format { table: table id, jsonql: JsonQL with {alias} for the table name to filter by }
+//  data: internal, opaque data that the widget understands. opaque
+export default class WidgetScoper {
+  scopes: any
+
+  constructor(scopes?: any) {
+    this.scopes = scopes || {}
+  }
+
+  // Applies a scope to a particular widget. Filter will be applied to all others
+  applyScope(widgetId: any, scope: any) {
+    const data = {}
+    data[widgetId] = scope
+    const scopes = _.extend({}, this.scopes, data)
+    return new WidgetScoper(scopes)
+  }
+
+  // Gets the scope of a widget
+  getScope(widgetId: any) {
+    if (this.scopes[widgetId]) {
+      return this.scopes[widgetId]
+    }
+  }
+
+  // Gets lookup of scopes by widget id
+  getScopes() {
+    return this.scopes
+  }
+
+  getFilters(widgetId: any) {
+    const filters = []
+    for (let key in this.scopes) {
+      const value = this.scopes[key]
+      if (key !== widgetId && value && value.filter) {
+        filters.push(value.filter)
+      }
+    }
+
+    return filters
+  }
+
+  reset() {
+    return new WidgetScoper()
+  }
+}

package/src/widgets/WidgetScopesViewComponent.ts

@@ -0,0 +1,54 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+
+export interface WidgetScopesViewComponentProps {
+  /** lookup of id to scope (see WidgetScoper for definition) */
+  scopes: any
+  onRemoveScope: any
+}
+
+// Shows widget scopes
+export default class WidgetScopesViewComponent extends React.Component<WidgetScopesViewComponentProps> {
+  renderScope = (id: any, scope: any) => {
+    const style = {
+      cursor: "pointer",
+      borderRadius: 4,
+      border: "solid 1px #BBB",
+      padding: "1px 5px 1px 5px",
+      color: "#666",
+      backgroundColor: "#EEE",
+      display: "inline-block",
+      marginLeft: 4,
+      marginRight: 4
+    }
+
+    if (!scope) {
+      return null
+    }
+
+    return R(
+      "div",
+      { key: id, style, onClick: this.props.onRemoveScope.bind(null, id) },
+      scope.name,
+      " ",
+      R("span", { className: "fas fa-times" })
+    )
+  }
+
+  render() {
+    const { scopes } = this.props
+    if (_.compact(_.values(scopes)).length === 0) {
+      return null
+    }
+
+    return R(
+      "div",
+      { className: "alert alert-info" },
+      R("span", { className: "fas fa-filter" }),
+      " Filters: ",
+      _.map(_.keys(scopes), (id) => this.renderScope(id, scopes[id]))
+    )
+  }
+}