@mwater/visualization 5.0.0

package/src/dashboards/DashboardUtils.ts

@@ -0,0 +1,82 @@
+import _ from "lodash"
+import { Expr, ExprCleaner, ExprCompiler, ExprUtils, FieldExpr, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from ".."
+import LayoutManager from "../layouts/LayoutManager"
+import WidgetFactory from "../widgets/WidgetFactory"
+import { DashboardDesign } from "./DashboardDesign"
+
+/** Gets filterable tables for a dashboard */
+export function getFilterableTables(design: DashboardDesign, schema: Schema) {
+  const layoutManager = LayoutManager.createLayoutManager(design.layout)
+
+  // Get filterable tables
+  let filterableTables: string[] = []
+  for (let widgetItem of layoutManager.getAllWidgets(design.items)) {
+    // Create widget
+    const widget = WidgetFactory.createWidget(widgetItem.type)
+
+    // Get filterable tables
+    filterableTables = filterableTables.concat(widget.getFilterableTables(widgetItem.design, schema))
+  }
+
+  // Remove non-existant tables
+  filterableTables = _.filter(_.uniq(filterableTables), (table) => schema.getTable(table))
+
+  return filterableTables
+}
+
+/** Get filters from props filters combined with dashboard filters */
+export function getCompiledFilters(
+  design: DashboardDesign,
+  schema: Schema,
+  filterableTables: string[]
+): JsonQLFilter[] {
+  let expr: Expr, jsonql, table
+  const exprCompiler = new ExprCompiler(schema)
+  const exprCleaner = new ExprCleaner(schema)
+  const exprUtils = new ExprUtils(schema)
+
+  const compiledFilters = []
+
+  // Compile filters to JsonQL expected by widgets
+  const object = design.filters || {}
+  for (table in object) {
+    // Clean expression first TODO remove this when dashboards are properly cleaned before being rendered
+    expr = object[table]
+    expr = exprCleaner.cleanExpr(expr, { table })
+
+    jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" })
+    if (jsonql) {
+      compiledFilters.push({ table, jsonql })
+    }
+  }
+
+  // Add global filters
+  for (let filter of design.globalFilters || []) {
+    for (table of filterableTables) {
+      // Check if exists and is correct type
+      const column = schema.getColumn(table, filter.columnId)
+      if (!column) {
+        continue
+      }
+
+      const columnExpr: FieldExpr = { type: "field", table, column: column.id }
+      if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+        continue
+      }
+
+      // Create expr
+      expr = { type: "op", op: filter.op, table, exprs: [columnExpr as Expr].concat(filter.exprs) }
+
+      // Clean expr
+      expr = exprCleaner.cleanExpr(expr, { table })
+
+      jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" })
+      if (jsonql) {
+        compiledFilters.push({ table, jsonql })
+      }
+    }
+  }
+
+  return compiledFilters
+}

package/src/dashboards/DashboardViewComponent.ts

@@ -0,0 +1,304 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React, { CSSProperties } from "react"
+const R = React.createElement
+
+import ImplicitFilterBuilder from "../ImplicitFilterBuilder"
+import * as DashboardUtils from "./DashboardUtils"
+import { DataSource, Schema } from "@mwater/expressions"
+import WidgetFactory from "../widgets/WidgetFactory"
+import WidgetScoper from "../widgets/WidgetScoper"
+import ReactElementPrinter from "@mwater/react-library/lib/ReactElementPrinter"
+import LayoutManager from "../layouts/LayoutManager"
+import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent"
+import { getLayoutOptions } from "./layoutOptions"
+import { WidgetComponent } from "./WidgetComponent"
+import { DashboardDataSource, DashboardDesign, JsonQLFilter } from ".."
+import { getMapTilerApiKey, setMapTilerApiKey } from "../maps/vectorMaps"
+
+export interface DashboardViewComponentProps {
+  /** schema to use */
+  schema: Schema
+  /** data source to use. Only used when designing, for display uses dashboardDataSource */
+  dataSource: DataSource
+  /** dashboard data source */
+  dashboardDataSource: DashboardDataSource
+
+  design: DashboardDesign
+
+  /** Leave unset for readonly */
+  onDesignChange?: (design: DashboardDesign) => void
+
+  /** 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 }
+
+  /** Filters to add to the dashboard (includes extra filters and any quickfilters from the dashboard component. Does not include dashboard level filters) */
+  filters?: JsonQLFilter[]
+
+  /** Entry to scroll to initially when dashboard is loaded */
+  initialTOCEntryScroll?: { widgetId: string; entryId: any }
+
+  /** True to hide scope display */
+  hideScopes?: boolean
+
+  /** True to render in print mode (prevents odd clipping issue) */
+  printMode?: boolean
+
+  /** Change to force a refresh */
+  refreshKey?: any
+}
+
+/**
+ * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
+ * Handles scoping and stores the state of scope
+ */
+export default class DashboardViewComponent extends React.Component<
+  DashboardViewComponentProps,
+  { widgetScoper: WidgetScoper }
+> {
+  static childContextTypes = { locale: PropTypes.string }
+  widgetComps: { [widgetId: string]: any }
+
+  // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
+  getChildContext() {
+    return { locale: this.props.design.locale }
+  }
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      widgetScoper: new WidgetScoper() // Empty scoping
+    }
+
+    this.widgetComps = {} // Lookup of widget components by id
+  }
+
+  componentDidMount() {
+    if (this.props.initialTOCEntryScroll) {
+      // Getting heights of widgets properly requires a 0 length timeout
+      setTimeout(() => {
+        return this.handleScrollToTOCEntry(
+          this.props.initialTOCEntryScroll!.widgetId,
+          this.props.initialTOCEntryScroll!.entryId
+        )
+      }, 0)
+    }
+
+    // Add listener to localstorage to update clipboard display
+    return window.addEventListener("storage", this.handleStorageChange)
+  }
+
+  componentWillUnmount() {
+    // Remove listener
+    return window.addEventListener("storage", this.handleStorageChange)
+  }
+
+  handleStorageChange = () => {
+    return this.forceUpdate()
+  }
+
+  handleScopeChange = (id: any, scope: any) => {
+    return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, scope) })
+  }
+
+  handleRemoveScope = (id: any) => {
+    return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, null) })
+  }
+
+  handleItemsChange = (items: any) => {
+    const design = _.extend({}, this.props.design, { items }) as DashboardDesign
+    return this.props.onDesignChange!(design)
+  }
+
+  // Handle a change of the clipboard and determine which tables the clipboard block uses
+  handleClipboardChange = (block: any) => {
+    try {
+      // If empty, just set it
+      if (!block) {
+        window.localStorage.removeItem("DashboardViewComponent.clipboard")
+        this.forceUpdate()
+        return
+      }
+
+      // Determine which tables are used (just peek for any uses of the table name. Not ideal, but easy)
+      const tables = _.pluck(
+        _.filter(this.props.schema.getTables(), (table) => JSON.stringify(block).includes(JSON.stringify(table.id))),
+        "id"
+      )
+
+      // Store in clipboard
+      window.localStorage.setItem("DashboardViewComponent.clipboard", JSON.stringify({ block, tables }))
+      return this.forceUpdate()
+    } catch (err) {
+      return alert("Clipboard not available")
+    }
+  }
+
+  getClipboardContents() {
+    try {
+      return JSON.parse(window.localStorage.getItem("DashboardViewComponent.clipboard") || "null")
+    } catch (err) {
+      return null
+    }
+  }
+
+  // Call to print the dashboard
+  print = async () => {
+    // Temporarily disable vector maps as WebGL is not supported in print mode
+    const mapTilerAPIKey = getMapTilerApiKey()
+    try {
+      setMapTilerApiKey("")
+
+      // Create element at 1080 wide (use as standard printing width)
+      const elem = R(
+        "div",
+        { style: { width: 1080 } },
+        R(DashboardViewComponent, _.extend({}, this.props, { onDesignChange: null, printMode: true }))
+      )
+    
+      const printer = new ReactElementPrinter()
+      await printer.print(elem, { delay: 5000 })
+    } finally {
+      setMapTilerApiKey(mapTilerAPIKey)
+    }
+  }
+
+  // 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
+  }
+
+  // Get list of TOC entries
+  getTOCEntries(layoutManager: any) {
+    const entries = []
+
+    for (let { id, type, design } of layoutManager.getAllWidgets(this.props.design.items)) {
+      const widget = WidgetFactory.createWidget(type)
+      // Add widgetId to each one
+      for (let entry of widget.getTOCEntries(design, this.props.namedStrings)) {
+        entries.push(_.extend({}, entry, { widgetId: id }))
+      }
+    }
+
+    return entries
+  }
+
+  handleScrollToTOCEntry = (widgetId: any, entryId: any) => {
+    const widgetComp = this.widgetComps[widgetId]
+    if (!widgetComp) {
+      return
+    }
+
+    // Call scrollToTOCEntry if present
+    return widgetComp.scrollToTOCEntry?.(entryId)
+  }
+
+  renderScopes() {
+    return R(WidgetScopesViewComponent, {
+      scopes: this.state.widgetScoper.getScopes(),
+      onRemoveScope: this.handleRemoveScope
+    })
+  }
+
+  compRef = (widgetId: any, comp: any) => {
+    return (this.widgetComps[widgetId] = comp)
+  }
+
+  render() {
+    let cantPasteMessage = ""
+    const layoutManager = LayoutManager.createLayoutManager(this.props.design.layout)
+
+    const compiledFilters = this.getCompiledFilters()
+
+    // Get filterable tables
+    const filterableTables = DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
+
+    // Determine toc entries
+    const tocEntries = this.getTOCEntries(layoutManager)
+
+    // Get clipboard contents
+    const clipboardContents = this.getClipboardContents()
+
+    // Check if can't paste because of missing table
+    if (clipboardContents && !_.all(clipboardContents.tables, (table: string) => this.props.schema.getTable(table))) {
+      cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item."
+    }
+
+    const renderWidget = (options: any) => {
+      const widget = WidgetFactory.createWidget(options.type)
+
+      // Get filters (passed in plus dashboard widget scoper filters)
+      let filters = compiledFilters.concat(this.state.widgetScoper.getFilters(options.id))
+
+      // Extend the filters to include implicit filters (filter children in 1-n relationships)
+      if (this.props.design.implicitFiltersEnabled || this.props.design.implicitFiltersEnabled == null) {
+        // Default is true
+        const implicitFilterBuilder = new ImplicitFilterBuilder(this.props.schema)
+        filters = implicitFilterBuilder.extendFilters(filterableTables, filters)
+      }
+
+      const widgetElem = R(WidgetComponent, {
+        key: options.id,
+        id: options.id,
+        type: options.type,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        dashboardDataSource: this.props.dashboardDataSource,
+        design: options.design,
+        scope: this.state.widgetScoper.getScope(options.id),
+        filters,
+        onScopeChange: this.handleScopeChange.bind(null, options.id),
+        onDesignChange: options.onDesignChange,
+        width: options.width,
+        height: options.height,
+        onRowClick: this.props.onRowClick,
+        namedStrings: this.props.namedStrings,
+        tocEntries,
+        onScrollToTOCEntry: this.handleScrollToTOCEntry,
+        // Keep references to widget elements
+        widgetRef: this.compRef.bind(null, options.id),
+        refreshKey: this.props.refreshKey
+      })
+
+      return widgetElem
+    }
+
+    const style: CSSProperties = {
+      height: "100%",
+      position: "relative"
+    }
+
+    if (!this.props.printMode) {
+      // Prevent this block from taking up too much space. Scrolling handled by layout manager.
+      // Setting overflow-x stops the inner div from becoming too tall
+      style.overflowX = "auto"
+    }
+
+    // Render widget container
+    return R(
+      "div",
+      { style },
+      !this.props.hideScopes ? this.renderScopes() : undefined,
+
+      layoutManager.renderLayout({
+        items: this.props.design.items,
+        onItemsChange: this.props.onDesignChange != null ? this.handleItemsChange : undefined,
+        style: this.props.design.style || null,
+        layoutOptions: getLayoutOptions(this.props.design),
+        renderWidget,
+        clipboard: clipboardContents?.block,
+        onClipboardChange: this.handleClipboardChange,
+        cantPasteMessage
+      })
+    )
+  }
+}

package/src/dashboards/DirectDashboardDataSource.ts

@@ -0,0 +1,69 @@
+import WidgetFactory from "../widgets/WidgetFactory"
+import DirectWidgetDataSource from "../widgets/DirectWidgetDataSource"
+import * as QuickfilterUtils from "../quickfilter/QuickfilterUtils"
+import DashboardDataSource from "./DashboardDataSource"
+import { Schema, DataSource } from "@mwater/expressions"
+
+/** Uses direct DataSource queries */
+export default class DirectDashboardDataSource extends DashboardDataSource {
+  options: {
+    /** schema to use */
+    schema: Schema
+
+    /** data source to use */
+    dataSource: DataSource
+
+    /** API url to use for talking to mWater server */
+    apiUrl: string
+
+    /** client id to use for talking to mWater server */
+    client?: string | undefined
+  }
+  /** Create dashboard data source that uses direct jsonql calls */
+  constructor(options: {
+    /** schema to use */
+    schema: Schema
+
+    /** data source to use */
+    dataSource: DataSource
+
+    /** API url to use for talking to mWater server */
+    apiUrl: string
+
+    /** client id to use for talking to mWater server */
+    client?: string
+  }) {
+    super()
+    this.options = options
+  }
+
+  // Gets the widget data source for a specific widget
+  getWidgetDataSource(widgetType: any, widgetId: any) {
+    const widget = WidgetFactory.createWidget(widgetType)
+    return new DirectWidgetDataSource({
+      apiUrl: this.options.apiUrl,
+      client: this.options.client,
+      widget,
+      schema: this.options.schema,
+      dataSource: this.options.dataSource
+    })
+  }
+
+  // Gets the quickfilters data source
+  getQuickfiltersDataSource() {
+    return {
+      getValues: (index: any, expr: any, filters: any, offset: any, limit: any, callback: any) => {
+        // Perform query
+        return QuickfilterUtils.findExprValues(
+          expr,
+          this.options.schema,
+          this.options.dataSource,
+          filters,
+          offset,
+          limit,
+          callback
+        )
+      }
+    }
+  }
+}

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -0,0 +1,227 @@
+import React, { ReactNode } from "react"
+import { useState } from "react"
+import { FormGroup, Select, Toggle } from "@mwater/react-library/lib/bootstrap"
+import { DashboardDesign } from "./DashboardDesign"
+import {
+  BlocksLayoutOptions,
+  DashboardTheme,
+  getDefaultLayoutOptions,
+  getLayoutOptions,
+  WidthBucket
+} from "./layoutOptions"
+
+interface Size {
+  width: number
+  height: number
+}
+
+const sizeOptions: { value: Size; label: string }[] = [
+  { value: { width: 360, height: 640 }, label: "Phone (360x640)" },
+  { value: { width: 768, height: 1024 }, label: "Tablet (768x1024)" },
+  { value: { width: 1000, height: 800 }, label: "Laptop (1000x800)" },
+  { value: { width: 1280, height: 1024 }, label: "Desktop (1280x1024)" }
+]
+
+export function LayoutOptionsComponent(props: {
+  design: DashboardDesign
+  onDesignChange: (design: DashboardDesign) => void
+  onClose: () => void
+
+  /** Dashboard view to preview*/
+  dashboardView: ReactNode
+
+  /** Quickfilters to preview */
+  quickfiltersView: ReactNode
+}) {
+  const [previewSize, setPreviewSize] = useState(2)
+  const layoutOptions = getLayoutOptions(props.design)
+
+  function setLayoutOptions(layoutOptions: BlocksLayoutOptions) {
+    props.onDesignChange({ ...props.design, layoutOptions })
+  }
+
+  function handleResetDefaults() {
+    props.onDesignChange({ ...props.design, layoutOptions: getDefaultLayoutOptions(props.design.style) })
+  }
+
+  return (
+    <div style={{ display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "auto 1fr", height: "100%" }}>
+      <div style={{ padding: 5, gridRow: "1 / 3" }}>
+        <div key="back">
+          <button className="btn btn-sm btn-link" onClick={props.onClose}>
+            <i className="fa fa-arrow-left" /> Close
+          </button>
+        </div>
+        <br />
+        <ThemeToggle
+          theme={props.design.style}
+          onChange={(theme) => {
+            props.onDesignChange({ ...props.design, style: theme, layoutOptions: getDefaultLayoutOptions(theme) })
+          }}
+        />
+        <br />
+        <h4>Advanced</h4>
+        <a className="btn btn-sm btn-link" style={{ float: "right" }} onClick={handleResetDefaults}>
+          Reset to Defaults
+        </a>
+        <FormGroup label="Collapse to Single Column">
+          <WidthSelector
+            value={layoutOptions.collapseColumnsWidth}
+            onChange={(collapseColumnsWidth) => {
+              setLayoutOptions({ ...layoutOptions, collapseColumnsWidth })
+            }}
+            sign="< "
+          />
+        </FormGroup>
+        <FormGroup label="Hide Quickfilters">
+          <WidthSelector
+            value={layoutOptions.hideQuickfiltersWidth}
+            onChange={(hideQuickfiltersWidth) => {
+              setLayoutOptions({ ...layoutOptions, hideQuickfiltersWidth })
+            }}
+            sign="< "
+          />
+        </FormGroup>
+        <FormGroup label="Minimum Width (before scrolling or scaling)">
+          <WidthSelector
+            value={layoutOptions.minimumWidth}
+            onChange={(minimumWidth) => {
+              setLayoutOptions({ ...layoutOptions, minimumWidth })
+            }}
+            sign="< "
+          />
+          <FormGroup label="When Below Minimum Width">
+            <Toggle
+              value={layoutOptions.belowMinimumWidth}
+              onChange={(belowMinimumWidth) => {
+                setLayoutOptions({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth as "scale" | "scroll" })
+              }}
+              options={[
+                { value: "scroll", label: "Scroll" },
+                { value: "scale", label: "Scale" }
+              ]}
+            />
+          </FormGroup>
+        </FormGroup>
+        <FormGroup label="Maximum Width (before padding)">
+          <WidthSelector
+            value={layoutOptions.maximumWidth}
+            onChange={(maximumWidth) => {
+              setLayoutOptions({ ...layoutOptions, maximumWidth })
+            }}
+            sign="> "
+          />
+        </FormGroup>
+      </div>
+      <div style={{ textAlign: "center", padding: 3 }}>
+        <span className="text-muted">Preview As:&nbsp;</span>
+        <Toggle
+          value={previewSize}
+          onChange={setPreviewSize}
+          size="xs"
+          options={sizeOptions.map((so, index) => ({ value: index, label: so.label }))}
+        />
+      </div>
+      <div style={{ overflow: "auto" }}>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: `1fr ${sizeOptions[previewSize].value.width}px 1fr`,
+            gridTemplateRows: `1fr ${sizeOptions[previewSize].value.height}px 1fr`,
+            height: "100%",
+            border: "solid 1px #AAA"
+          }}
+        >
+          <div style={{ backgroundColor: "#888", gridColumn: "1 / 4" }}></div>
+          <div style={{ backgroundColor: "#888" }}></div>
+          <div style={{ height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
+            <div key="quickfilters">
+              {layoutOptions.hideQuickfiltersWidth == null ||
+              sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+                ? props.quickfiltersView
+                : null}
+            </div>
+            {props.dashboardView}
+          </div>
+          <div style={{ backgroundColor: "#888" }}></div>
+          <div style={{ backgroundColor: "#888", gridColumn: "1 / 4" }}></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: DashboardTheme) => void }) {
+  function renderStyleItem(theme: string) {
+    const isActive = (props.theme || "default") == theme
+
+    if (theme == "default") {
+      return (
+        <a
+          key={theme}
+          className={isActive ? "list-group-item active" : "list-group-item"}
+          onClick={props.onChange.bind(null, "default")}
+        >
+          <div>Classic Dashboard</div>
+          <div style={{ opacity: 0.6 }}>Ideal for data display with minimal text</div>
+        </a>
+      )
+    }
+    if (theme == "greybg") {
+      return (
+        <a
+          key={theme}
+          className={isActive ? "list-group-item active" : "list-group-item"}
+          onClick={props.onChange.bind(null, "greybg")}
+        >
+          <div>Framed Dashboard</div>
+          <div style={{ opacity: 0.6 }}>Each widget is white on a grey background</div>
+        </a>
+      )
+    }
+    if (theme == "story") {
+      return (
+        <a
+          key={theme}
+          className={isActive ? "list-group-item active" : "list-group-item"}
+          onClick={props.onChange.bind(null, "story")}
+        >
+          <div>Story</div>
+          <div style={{ opacity: 0.6 }}>Ideal for data-driven storytelling with lots of text</div>
+        </a>
+      )
+    }
+    return null
+  }
+
+  return (
+    <FormGroup label="Theme">
+      {renderStyleItem("default")}
+      {renderStyleItem("greybg")}
+      {renderStyleItem("story")}
+    </FormGroup>
+  )
+}
+
+function WidthSelector(props: {
+  value: number | null
+  onChange: (value: number | null) => void
+  /** E.g. >=, <= */
+  sign: string
+}) {
+  return (
+    <Select
+      value={props.value}
+      onChange={props.onChange}
+      nullLabel="N/A"
+      options={[
+        { value: 400, label: `${props.sign}400px (Phone)` },
+        { value: 600, label: `${props.sign}600px (Small tablet)` },
+        { value: 800, label: `${props.sign}800px (Tablet)` },
+        { value: 1000, label: `${props.sign}1000px (Laptop)` },
+        { value: 1200, label: `${props.sign}1200px (Desktop)` },
+        { value: 1600, label: `${props.sign}1600px (Wide Desktop)` }
+      ]}
+    />
+  )
+}

package/src/dashboards/README.md

@@ -0,0 +1,13 @@
+## Layout
+
+`DashboardComponent` is the top level dashboard class. It holds the view and designer elements, widget factory and undo stack
+
+It creates a view `DashboardViewComponent` that handles scoping of widgets
+
+### Dashboard design
+
+See DashboardDesign.ts
+
+### Widget scoping
+
+Each widget may have a scope (private data indicating which part is highlighted) and apply filters as a result to other widgets