@mwater/visualization 5.0.0

package/src/dashboards/DashboardComponent.ts

@@ -0,0 +1,468 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React, { ReactNode } from "react"
+const R = React.createElement
+
+import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
+import { ExprCleaner } from "@mwater/expressions"
+import UndoStack from "../UndoStack"
+import * as DashboardUtils from "./DashboardUtils"
+import DashboardViewComponent from "./DashboardViewComponent"
+import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
+import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
+import SettingsModalComponent from "./SettingsModalComponent"
+import LayoutManager from "../layouts/LayoutManager"
+import DashboardUpgrader from "./DashboardUpgrader"
+import { LayoutOptionsComponent } from "./LayoutOptionsComponent"
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
+import { getLayoutOptions } from "./layoutOptions"
+import { DashboardDesign } from "./DashboardDesign"
+import DashboardDataSource from "./DashboardDataSource"
+import { JsonQLFilter } from ".."
+
+export interface DashboardComponentProps {
+  design: DashboardDesign
+  /** If not set, readonly */
+  onDesignChange?: (design: DashboardDesign) => void
+
+  schema: Schema
+  dataSource: DataSource
+  /** dashboard data source */
+  dashboardDataSource: DashboardDataSource
+
+  /** Extra element to include in title at left */
+  titleElem?: ReactNode
+
+  /** Extra elements to add to right */
+  extraTitleButtonsElem?: ReactNode
+
+  /** Key that changes when the undo stack should be reset. Usually a document id or suchlike */
+  undoStackKey?: any
+
+  /** True to scale for printing */
+  printScaling?: boolean
+
+  /** 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 }
+
+  /** Locked quickfilter values. See README in quickfilters */
+  quickfilterLocks?: any[]
+
+  /** Initial quickfilter values */
+  quickfiltersValues?: any[]
+
+  /** Filters to add to the dashboard */
+  filters?: JsonQLFilter[]
+
+  /** True to hide title bar and related controls */
+  hideTitleBar?: boolean
+}
+
+export interface DashboardComponentState {
+  undoStack: UndoStack
+  quickfiltersValues: any[] | null
+  editing: boolean
+  layoutOptionsOpen: boolean
+  hideQuickfilters: boolean
+  refreshKey: number
+}
+
+/** Dashboard component that includes an action bar at the top
+ * Manages undo stack and quickfilter value
+ */
+export default class DashboardComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
+  dashboardView: DashboardViewComponent | null
+
+  static defaultProps = { printScaling: true }
+
+  static childContextTypes = {
+    locale: PropTypes.string,
+    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
+  }
+
+  settings: SettingsModalComponent | null
+
+  getChildContext() {
+    return {
+      // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
+      locale: this.props.design.locale,
+
+      // Pass active tables down to table select components so they can present a shorter list
+      activeTables: DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
+    }
+  }
+
+  constructor(props: any) {
+    super(props)
+
+    const layoutOptions = getLayoutOptions(props.design)
+
+    this.state = {
+      undoStack: new UndoStack().push(props.design),
+      quickfiltersValues: props.quickfiltersValues,
+      editing:
+        LayoutManager.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
+        props.onDesignChange != null,
+      layoutOptionsOpen: false,
+      hideQuickfilters:
+        layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
+      refreshKey: 1
+    }
+  }
+
+  // Get the values of the quick filters
+  getQuickfilterValues = () => {
+    return this.state.quickfiltersValues || []
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    let { undoStack } = this.state
+
+    // Clear stack if key changed
+    if (nextProps.undoStackKey !== this.props.undoStackKey) {
+      undoStack = new UndoStack()
+    }
+
+    // Save on stack
+    undoStack = undoStack.push(nextProps.design)
+    this.setState({ undoStack })
+
+    // Clear quickfilters if definition changed
+    if (!_.isEqual(this.props.design.quickfilters, nextProps.design.quickfilters)) {
+      this.setState({ quickfiltersValues: nextProps.quickfiltersValues })
+    }
+
+    if (nextProps.onDesignChange == null) {
+      this.setState({ editing: false })
+    }
+  }
+
+  handlePrint = () => {
+    this.dashboardView!.print()
+  }
+
+  handleUndo = () => {
+    const undoStack = this.state.undoStack.undo()
+
+    // We need to use callback as state is applied later
+    this.setState({ undoStack }, () => this.props.onDesignChange!(undoStack.getValue()))
+  }
+
+  handleRedo = () => {
+    const undoStack = this.state.undoStack.redo()
+
+    // We need to use callback as state is applied later
+    this.setState({ undoStack }, () => this.props.onDesignChange!(undoStack.getValue()))
+  }
+
+  // Saves a json file to disk
+  handleSaveDesignFile = () => {
+    // Make a blob and save
+    const blob = new Blob([JSON.stringify(this.props.design, null, 2)], { type: "text/json" })
+    // Require at use as causes server problems
+    const FileSaver = require("file-saver")
+    FileSaver.saveAs(blob, "Dashboard.json")
+  }
+
+  handleSettings = () => {
+    this.settings!.show(this.props.design)
+  }
+
+  handleToggleEditing = () => {
+    this.setState({ editing: !this.state.editing })
+  }
+
+  handleOpenLayoutOptions = () => {
+    this.setState({ layoutOptionsOpen: true })
+  }
+
+  handleRefreshData = () => {
+    this.props.dataSource.clearCache?.()
+    this.setState({ refreshKey: this.state.refreshKey + 1 })
+  }
+
+  handleStyleChange = (style: any) => {
+    this.props.onDesignChange!(_.extend({}, this.props.design, { style: style || null }))
+  }
+
+  handleDesignChange = (design: any) => {
+    // If quickfilters have changed, reset values
+    if (!_.isEqual(this.props.design.quickfilters, design.quickfilters)) {
+      this.setState({ quickfiltersValues: null })
+    }
+
+    this.props.onDesignChange!(design)
+  }
+
+  handleShowQuickfilters = () => {
+    return this.setState({ hideQuickfilters: false })
+  }
+
+  handleUpgrade = () => {
+    if (
+      !confirm(
+        "This will upgrade your dashboard to the new kind with enhanced features. You can click Undo immediately afterwards if you wish to revert it. Continue?"
+      )
+    ) {
+      return
+    }
+
+    const design = new DashboardUpgrader().upgrade(this.props.design)
+    this.props.onDesignChange!(design)
+
+    alert("Upgrade completed. Some widgets may need to be resized. Click Undo to revert back to old dashboard style.")
+  }
+
+  // Get filters from props filters combined with dashboard filters
+  getCompiledFilters() {
+    let compiledFilters = DashboardUtils.getCompiledFilters(
+      this.props.design,
+      this.props.schema,
+      DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
+    )
+    compiledFilters = compiledFilters.concat(this.props.filters || [])
+    return compiledFilters
+  }
+
+  renderEditingSwitch() {
+    return R(
+      "a",
+      {
+        key: "edit",
+        className: `btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`,
+        onClick: this.handleToggleEditing
+      },
+      R("span", { className: "fas fa-pencil-alt" }),
+      this.state.editing ? " Editing" : " Edit"
+    )
+  }
+
+  renderStyleItem(style: any) {
+    const isActive = (this.props.design.style || "default") === style
+
+    const content = (() => {
+      switch (style) {
+        case "default":
+          return [
+            R("h4", { key: "name", className: "list-group-item-heading" }, "Classic Dashboard"),
+            R("p", { key: "description", className: "" }, "Ideal for data display with minimal text")
+          ]
+        case "greybg":
+          return [
+            R("h4", { key: "name", className: "list-group-item-heading" }, "Framed Dashboard"),
+            R("p", { key: "description", className: "" }, "Each widget is white on a grey background")
+          ]
+        case "story":
+          return [
+            R("h4", { key: "name", className: "list-group-item-heading" }, "Story"),
+            R(
+              "p",
+              { key: "description", className: "" },
+              "Ideal for data-driven storytelling with lots of text. Responsive and mobile-friendly"
+            )
+          ]
+      }
+      return null
+    })()
+
+    return R(
+      "a",
+      {
+        key: style,
+        className: `list-group-item ${isActive ? "active" : ""}`,
+        onClick: this.handleStyleChange.bind(null, style)
+      },
+      content
+    )
+  }
+
+  renderStyle() {
+    return R(
+      "button",
+      { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions },
+      R("span", { className: "fa fa-mobile" }),
+      R("span", { className: "hide-600px" }, " Layout ")
+    )
+  }
+
+  renderActionLinks() {
+    return R(
+      "div",
+      null,
+      this.state.editing && (this.props.design.layout || "grid") === "grid"
+        ? R(
+            "a",
+            { key: "upgrade", className: "btn btn-info btn-sm", onClick: this.handleUpgrade },
+            "Upgrade Dashboard..."
+          )
+        : undefined,
+      this.state.editing
+        ? [
+            R(
+              "a",
+              {
+                key: "undo",
+                className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
+                onClick: this.handleUndo
+              },
+              R("span", { className: "fas fa-caret-left" }),
+              R("span", { className: "hide-600px" }, " Undo")
+            ),
+            " ",
+            R(
+              "a",
+              {
+                key: "redo",
+                className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
+                onClick: this.handleRedo
+              },
+              R("span", { className: "fas fa-caret-right" }),
+              R("span", { className: "hide-600px" }, " Redo")
+            )
+          ]
+        : undefined,
+      R(
+        "a",
+        { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
+        R("span", { className: "fas fa-print" }),
+        R("span", { className: "hide-600px" }, " Print")
+      ),
+      R(
+        "a",
+        { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
+        R("span", { className: "fas fa-sync" }),
+        R("span", { className: "hide-600px" }, " Refresh")
+      ),
+      this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+        ? R(
+            "a",
+            { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
+            R("span", { className: "fa fa-filter" }),
+            R("span", { className: "hide-600px" }, " Show Quickfilters")
+          )
+        : undefined,
+
+      // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
+      //   R('span', className: "glyphicon glyphicon-download-alt")
+      //   " Export"
+      this.state.editing
+        ? R(
+            "a",
+            { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
+            R("span", { className: "fas fa-cog" }),
+            R("span", { className: "hide-600px" }, " Settings")
+          )
+        : undefined,
+      this.state.editing ? this.renderStyle() : undefined,
+      this.props.extraTitleButtonsElem,
+      this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined
+    )
+  }
+
+  renderTitleBar() {
+    return R(
+      "div",
+      { style: { height: 40, padding: 4 } },
+      R("div", { style: { float: "right" } }, this.renderActionLinks()),
+      this.props.titleElem
+    )
+  }
+
+  renderQuickfilter() {
+    return R(QuickfiltersComponent, {
+      design: this.props.design.quickfilters || [],
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      quickfiltersDataSource: this.props.dashboardDataSource.getQuickfiltersDataSource(),
+      values: this.state.quickfiltersValues || undefined,
+      onValuesChange: (values: any) => this.setState({ quickfiltersValues: values }),
+      locks: this.props.quickfilterLocks,
+      filters: this.getCompiledFilters(),
+      hideTopBorder: this.props.hideTitleBar,
+      onHide: () => this.setState({ hideQuickfilters: true })
+    })
+  }
+
+  refDashboardView = (el: any) => {
+    return (this.dashboardView = el)
+  }
+
+  render() {
+    let filters = this.props.filters || []
+
+    // Compile quickfilters
+    filters = filters.concat(
+      new QuickfilterCompiler(this.props.schema).compile(
+        this.props.design.quickfilters || [],
+        this.state.quickfiltersValues,
+        this.props.quickfilterLocks
+      )
+    )
+
+    const dashboardView = R(DashboardViewComponent, {
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      dashboardDataSource: this.props.dashboardDataSource,
+      ref: this.refDashboardView,
+      design: this.props.design,
+      onDesignChange: this.state.editing ? this.props.onDesignChange : undefined,
+      filters,
+      onRowClick: this.props.onRowClick,
+      namedStrings: this.props.namedStrings,
+      hideScopes: this.state.hideQuickfilters,
+      refreshKey: this.state.refreshKey
+    })
+
+    const readonlyDashboardView = R(DashboardViewComponent, {
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      dashboardDataSource: this.props.dashboardDataSource,
+      ref: this.refDashboardView,
+      design: this.props.design,
+      filters,
+      onRowClick: this.props.onRowClick,
+      namedStrings: this.props.namedStrings,
+      hideScopes: this.state.hideQuickfilters
+    })
+
+    return R(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+          height: "100%"
+        }
+      },
+      !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
+      R("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
+      dashboardView,
+      this.props.onDesignChange != null
+        ? R(SettingsModalComponent, {
+            onDesignChange: this.handleDesignChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            ref: (c: SettingsModalComponent | null) => {
+              this.settings = c
+            }
+          })
+        : undefined,
+      this.state.layoutOptionsOpen
+        ? R(
+            ModalWindowComponent,
+            { isOpen: true, outerPadding: 10, innerPadding: 10 },
+            R(LayoutOptionsComponent, {
+              design: this.props.design,
+              onDesignChange: this.props.onDesignChange!,
+              onClose: () => this.setState({ layoutOptionsOpen: false }),
+              dashboardView: readonlyDashboardView,
+              quickfiltersView: this.renderQuickfilter()
+            })
+          )
+        : undefined
+    )
+  }
+}

package/src/dashboards/DashboardDataSource.ts

@@ -0,0 +1,15 @@
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
+import { WidgetDataSource } from "../widgets/WidgetDataSource"
+
+/** Data source for a dashboard */
+export default class DashboardDataSource {
+  /** Gets the widget data source for a specific widget */
+  getWidgetDataSource(widgetType: string, widgetId: string): WidgetDataSource {
+    throw new Error("Not implemented")
+  }
+
+  /** Gets the quickfilters data source */
+  getQuickfiltersDataSource(): QuickfiltersDataSource {
+    throw new Error("Not implemented")
+  }
+}

package/src/dashboards/DashboardDesign.ts

@@ -0,0 +1,57 @@
+import { JsonQLFilter } from "../JsonQLFilter"
+import { Quickfilter } from "../quickfilter/Quickfilter"
+import { LiteralType, Expr } from "@mwater/expressions"
+import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions"
+
+/** Dashboard design
+ * Each understands enough of the dashboard design to create widgets.
+ * Widget refers to the widget itself, where *item* refers also to the layout and id that it has in the dashboard.
+ */
+export interface DashboardDesign {
+  /** dashboard items. Format depends on layout of dashboard. See layouts/.../README.md */
+  items: any // TODO
+
+  /** array of quick filters (user-selectable filters). See quickfilter/README.md */
+  quickfilters?: Quickfilter[]
+
+  /** layout engine to use (`blocks` is new default)  */
+  layout: "blocks" | "grid"
+
+  /** optional theme to use */
+  style?: DashboardTheme
+
+  /** Options for layout including responsiveness, scaling, etc */
+  layoutOptions?: BlocksLayoutOptions
+
+  /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
+  filters?: { [tableId: string]: Expr }
+
+  /** optional locale (e.g. "fr") to use for display */
+  locale?: string
+
+  /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
+  implicitFiltersEnabled?: boolean
+
+  /** array of global filters. See below. */
+  globalFilters?: GlobalFilter[]
+}
+
+/** Global Filters:
+
+Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
+and the default (non-mWater) dashboard applies them but does not allow editing.
+
+*/
+export interface GlobalFilter {
+  /** id of column to filter */
+  columnId: string
+
+  /** type of column to filter (to ensure that consistent) */
+  columnType: LiteralType
+
+  /** op of expression for filtering */
+  op: string
+
+  /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+  exprs: Expr[]
+}

package/src/dashboards/DashboardUpgrader.ts

@@ -0,0 +1,103 @@
+import _ from "lodash"
+import uuid from "uuid"
+import { DashboardDesign } from ".."
+import WidgetFactory from "../widgets/WidgetFactory"
+
+// Upgrades old dashboards to new ones (grid -> blocks)
+export default class DashboardUpgrader {
+  upgrade(design: any): DashboardDesign {
+    // Get list of all items
+    const items = _.clone(design.items)
+
+    const newItems: any = {
+      id: "root",
+      type: "root",
+      blocks: []
+    }
+
+    function convertBlock(id: any, item: any) {
+      const widget = WidgetFactory.createWidget(item.widget.type)
+
+      const block: any = {
+        type: "widget",
+        widgetType: item.widget.type,
+        design: item.widget.design,
+        id
+      }
+
+      if (!widget.isAutoHeight()) {
+        block.aspectRatio = item.layout.w / item.layout.h
+      }
+
+      return block
+    }
+
+    // Scan horizontally
+    let y = 0
+
+    while (_.keys(items).length > 0) {
+      var id
+      let lineItems = []
+
+      for (id in items) {
+        const item = items[id]
+        if (item.layout.y <= y && item.layout.y + item.layout.h > y) {
+          lineItems.push(id)
+        }
+      }
+
+      // Sort by x
+      lineItems = _.sortBy(lineItems, (id) => items[id].layout.x)
+
+      // Convert
+      if (lineItems.length > 1) {
+        newItems.blocks.push({
+          id: uuid(),
+          type: "horizontal",
+          blocks: _.map(lineItems, (li) => convertBlock(li, items[li]))
+        })
+        for (let li of lineItems) {
+          delete items[li]
+        }
+      } else if (lineItems.length === 1) {
+        newItems.blocks.push(convertBlock(lineItems[0], items[lineItems[0]]))
+        delete items[lineItems[0]]
+      }
+
+      y += 1
+    }
+
+    return {
+      items: newItems,
+      layout: "blocks",
+      style: "default"
+    }
+  }
+}
+
+/*
+
+Old style:
+
+items: dashboard items, indexed by id. Each item contains:
+
+ `layout`: layout-engine specific data for layout of item
+ `widget`: details of the widget (see below)
+
+`widget` contains:
+ `type`: type string of the widget. Understandable by widget factory
+ `version`: version of the widget. semver string
+ `design`: design of the widget as a JSON object
+
+
+New style:
+
+id: id of block
+type: "root"/"vertical"/"horizontal"/"widget"/"spacer"
+widgetType: if a widget
+aspectRatio: w/h if not autoHeight
+design: widget design
+weights: weights for proportioning horizontal blocks. Default is 1
+blocks: other blocks if not a widget
+
+*/