@mwater/visualization 5.0.0

package/src/widgets/charts/Chart.ts

@@ -0,0 +1,140 @@
+import { DataSource, Schema } from "@mwater/expressions"
+import { ReactNode } from "react"
+import { JsonQLFilter } from "../../JsonQLFilter"
+import { WidgetScope } from "../../WidgetScope"
+import { WidgetDataSource } from "../WidgetDataSource"
+
+export interface ChartCreateViewElementOptions {
+  /** schema to use **/
+  schema: Schema
+
+  /** data source to use. Only used when designing, for display uses data **/
+  dataSource: DataSource
+
+  /** Chart design **/
+  design: any
+
+  /** called with new design. null/undefined for readonly **/
+  onDesignChange?: { (design: any): void } | null
+
+  /** Data that chart requested */
+  data: any
+
+  /** scope of the widget (when the widget self-selects a particular scope) **/
+  scope?: WidgetScope | null
+
+  /** called with scope of widget **/
+  onScopeChange?: (scope: WidgetScope | null) => void
+
+  /** array of filters to apply.**/
+  filters?: JsonQLFilter[]
+
+  /** width in pixels on screen **/
+  width?: number
+
+  /** height in pixels on screen **/
+  height?: number
+
+  /** Called with (tableId, rowId) when item is clicked **/
+  onRowClick?: (tableId: string, rowId: any) => void
+}
+
+export default class Chart {
+  // Removes any invalid values from a design. Returns cleaned design
+  cleanDesign(design: any, schema: Schema) {
+    throw new Error("Not implemented")
+  }
+
+  // Determines if design is valid. Null/undefined for yes, error string for no
+  validateDesign(design: any, schema: Schema): null | undefined | string {
+    throw new Error("Not implemented")
+  }
+
+  // True if a design is empty and so to display the editor immediately
+  isEmpty(design: any) {
+    return false
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return false
+  }
+
+  // True if designer should have a preview pane to the left
+  hasDesignerPreview() {
+    return true
+  }
+
+  // Label for the edit gear dropdown
+  getEditLabel() {
+    return "Edit"
+  }
+
+  // Creates a design element with specified options
+  // options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design
+  //   onDesignChange: function
+  createDesignerElement(options: {
+    schema: Schema
+    dataSource: DataSource
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters?: JsonQLFilter[]
+    design: any
+    onDesignChange: (design: any) => void
+  }): ReactNode {
+    throw new Error("Not implemented")
+  }
+
+  // Get data for the chart asynchronously. Charts should not call this directly!
+  // Instead they should use the widgetDataSource provided to the chart view.
+  //   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: any, callback: any) {
+    throw new Error("Not implemented")
+  }
+
+  // Create a view element for the chart
+  // Options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design of the chart
+  //   onDesignChange: when design changes
+  //   data: results from queries
+  //   width, height: size of the chart view
+  //   scope: current scope of the view element
+  //   onScopeChange: called when scope changes with new scope
+  //   onRowClick: Called with (tableId, rowId) when item is clicked
+  createViewElement(options: ChartCreateViewElementOptions): ReactNode {
+    throw new Error("Not implemented")
+  }
+
+  // Creates the dropdown menu items of shape {label, action}
+  //   design: design of the chart
+  //   schema: schema to use
+  //   widgetDataSource: widget data source to use
+  //   filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+  // Returns an empty list by default
+  createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): { label: ReactNode, icon?: string, onClick: () => void }[] {
+    return []
+  }
+
+  // Creates a table form of the chart data. Array of arrays
+  createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any, locale: any): any[][] {
+    throw new Error("Not implemented")
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema): string[] {
+    throw new Error("Not implemented")
+  }
+
+  // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ
+  getPlaceholderIcon() {
+    return ""
+  }
+}

package/src/widgets/charts/ChartViewComponent.ts

@@ -0,0 +1,209 @@
+import _ from "lodash"
+import { DataSource, Schema } from "@mwater/expressions"
+import React, { CSSProperties } from "react"
+import { JsonQLFilter } from "../../JsonQLFilter"
+import { WidgetScope } from "../../WidgetScope"
+import { WidgetDataSource } from "../WidgetDataSource"
+import Chart from "./Chart"
+const R = React.createElement
+
+export interface ChartViewComponentProps {
+  /** Chart object to use */
+  chart: Chart
+
+  /** Design of chart */
+  design: any
+
+  /** When design change */
+  onDesignChange?: (design: any) => void
+
+  schema: Schema
+  /** Data source to use for chart */
+  dataSource: DataSource
+
+  widgetDataSource: WidgetDataSource
+  width?: number
+  height?: number
+
+  /** scope of the widget (when the widget self-selects a particular scope) */
+  scope?: WidgetScope
+
+  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias }. Use injectAlias to correct */
+  filters?: JsonQLFilter[]
+
+  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+  onScopeChange?: (scope: WidgetScope | null) => void
+
+  onRowClick?: (tableId: string, rowId: any) => void
+}
+
+interface ChartViewComponentState {
+  cacheExpiry?: any
+  dataLoading?: any
+  validDesign?: any
+  dataError?: any
+  data?: any
+  showErrorDetails: boolean
+}
+
+/** Inner view part of the chart widget. Uses a query data loading component
+ * to handle loading and continues to display old data if design becomes
+ * invalid
+ */
+export default class ChartViewComponent extends React.Component<ChartViewComponentProps, ChartViewComponentState> {
+  /** Ordinal of update (0, 1, 2...) to ensure using latest */
+  updateSeq: number
+
+  constructor(props: ChartViewComponentProps) {
+    super(props)
+
+    this.updateSeq = 0
+
+    this.state = {
+      validDesign: null, // last valid design
+      data: null, // data for chart
+      dataLoading: false, // True when loading data
+      dataError: null, // Set when data loading returned error
+      cacheExpiry: props.dataSource.getCacheExpiry(), // Save cache expiry to see if changes
+      showErrorDetails: false
+    }
+  }
+
+  componentDidMount() {
+    this.updateData()
+  }
+
+  componentDidUpdate(prevProps: ChartViewComponentProps) {
+    if (
+      !_.isEqual(prevProps.design, this.props.design) ||
+      !_.isEqual(prevProps.filters, this.props.filters) ||
+      this.props.dataSource.getCacheExpiry() !== this.state.cacheExpiry
+    ) {
+      // Save new cache expiry
+      this.setState({ cacheExpiry: this.props.dataSource.getCacheExpiry() })
+
+      this.updateData()
+    }
+  }
+
+  updateData() {
+    // Clean design first (needed to validate properly)
+    const design = this.props.chart.cleanDesign(this.props.design, this.props.schema)
+
+    // If design is not valid, do nothing as can't query invalid design
+    const errors = this.props.chart.validateDesign(design, this.props.schema)
+    if (errors) {
+      return
+    }
+
+    this.updateSeq += 1
+
+    // Set loading data after interval to prevent unnecessary refresh
+    const dataLoadingTimeout = setTimeout(() => {
+      this.setState({ dataLoading: true })
+    }, 100)
+
+    // Store updateSeq to check if latest
+    const loadingUpdateSeq = this.updateSeq
+
+    this.props.widgetDataSource.getData(design, this.props.filters || [], (error, data) => {
+      // Prevent setting data loading if ready
+      clearTimeout(dataLoadingTimeout)
+
+      // Only update if latest
+      if (loadingUpdateSeq == this.updateSeq) {
+        this.setState({ dataLoading: false, dataError: error, data, validDesign: design })
+      }
+    })
+  }
+
+  renderSpinner() {
+    return R(
+      "div",
+      { style: { position: "absolute", bottom: "50%", left: 0, right: 0, textAlign: "center", fontSize: 20 } },
+      R("i", { className: "fa fa-spinner fa-spin" })
+    )
+  }
+
+  renderError() {
+    const errorText = (this.state.dataError.message || this.state.dataError || "") + ""
+
+    const isTimeout = errorText.match(/timeout/) != null
+
+    return R("div", { style: { marginTop: 20, textAlign: "center" } }, 
+      R("div", { className: "text-danger" }, 
+        isTimeout ?
+          "This widget has timed out. Placing widgets across console tabs instead of having them all in one dashboard can improve performance."
+          : "There was an error loading data for this widget."
+        ),
+      R("div", { className: "mt-3" },
+        R("button", { 
+          className: "btn btn-secondary btn-sm", 
+          disabled: this.state.dataLoading,
+          onClick: () => {
+            this.updateData() 
+          }
+        }, 
+          R("i", { className: "fas fa-redo" }),
+          " Try again"
+        ),
+      ),
+      R("button", { 
+        className: "btn btn-link btn-sm mt-2",
+        onClick: () => this.setState({ showErrorDetails: !this.state.showErrorDetails })
+      },
+         this.state.showErrorDetails ? "Hide details" : "Show details"
+      ),
+      this.state.showErrorDetails ?
+        R("div", { style: { marginTop: 10, fontSize: 10 } },
+          `Error: ${this.state.dataError.message || this.state.dataError}`
+        ) : null
+    )
+  }
+
+  render() {
+    const style: CSSProperties = { width: this.props.width, height: this.props.height }
+
+    // Faded if loading
+    if (this.state.dataLoading) {
+      style.opacity = 0.5
+    }
+
+    // If nothing to show, show grey
+    if (!this.state.validDesign) {
+      // Invalid. Show faded with background
+      style.backgroundColor = "#E0E0E0"
+      style.opacity = 0.35
+
+      // Set height to 1.6 ratio if not set so the control is visible
+      if (!this.props.height && this.props.width) {
+        style.height = this.props.width / 1.6
+      }
+    }
+
+    if (this.state.dataError) {
+      return this.renderError()
+    }
+
+    return R(
+      "div",
+      { style },
+      this.state.validDesign
+        ? this.props.chart.createViewElement({
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            design: this.state.validDesign,
+            onDesignChange: this.props.onDesignChange,
+            data: this.state.data,
+            scope: this.props.scope,
+            onScopeChange: this.props.onScopeChange,
+            width: this.props.width,
+            height: this.props.height,
+            onRowClick: this.props.onRowClick,
+            filters: this.props.filters
+          })
+        : undefined,
+      this.state.dataLoading ? this.renderSpinner() : undefined
+    )
+  }
+}

package/src/widgets/charts/ChartWidget.ts

@@ -0,0 +1,345 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import Widget, { CreateViewElementOptions } from "./../Widget"
+import DropdownWidgetComponent from "./../DropdownWidgetComponent"
+import CsvBuilder from "./../../CsvBuilder"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import ChartViewComponent from "./ChartViewComponent"
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { DataSource, Schema } from "@mwater/expressions"
+import { WidgetDataSource } from "../WidgetDataSource"
+import Chart from "./Chart"
+import { JsonQLFilter } from "../../JsonQLFilter"
+
+/** A widget which is a chart */
+export default class ChartWidget extends Widget {
+  chart: Chart
+
+  constructor(chart: Chart) {
+    super()
+    this.chart = chart
+  }
+
+  // Creates 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) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details
+  //  onDesignChange: called with new design. null/undefined for readonly
+  //  width: width in pixels on screen
+  //  height: height in pixels on screen
+  //  onRowClick: Called with (tableId, rowId) when item is clicked
+  createViewElement(options: CreateViewElementOptions) {
+    return R(ChartWidgetComponent, {
+      chart: this.chart,
+      design: options.design,
+      schema: options.schema,
+      widgetDataSource: options.widgetDataSource,
+      dataSource: options.dataSource,
+      scope: options.scope,
+      filters: options.filters,
+      onScopeChange: options.onScopeChange,
+      onDesignChange: options.onDesignChange,
+      width: options.width,
+      height: options.height,
+      onRowClick: options.onRowClick
+    })
+  }
+
+  // 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: any, callback: any) {
+    // Clean design first
+    design = this.chart.cleanDesign(design, schema)
+
+    return this.chart.getData(design, schema, dataSource, filters, callback)
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema) {
+    // Clean design first
+    design = this.chart.cleanDesign(design, schema)
+
+    return this.chart.getFilterableTables(design, schema)
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return this.chart.isAutoHeight()
+  }
+}
+
+interface ChartWidgetComponentProps {
+  /** schema to use */
+  schema: Schema
+  /** data source to use */
+  dataSource: DataSource
+  widgetDataSource: WidgetDataSource
+  /** Chart object to use */
+  chart: Chart
+  /** Design of chart */
+  design: any
+  /** null/undefined for readonly */
+  onDesignChange?: any
+
+  /** Width in pixels */
+  width: number
+
+  /** Height, if a fixed height widget, or one that uses aspect ratio */
+  height?: number
+
+  /** scope of the widget (when the widget self-selects a particular scope) */
+  scope?: any
+
+  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+  filters: JsonQLFilter[]
+
+  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+  onScopeChange?: any
+  /** Called with (tableId, rowId) when item is clicked */
+  onRowClick?: any
+  /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+  connectMoveHandle?: any
+  /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+  connectResizeHandle?: any
+}
+
+// Complete chart widget
+class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, { editDesign: any }> {
+  static contextTypes = { locale: PropTypes.string }
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      // Design that is being edited. Change is propagated on closing window
+      editDesign: null
+    }
+  }
+
+  // Saves a csv file to disk
+  handleSaveCsvFile = () => {
+    // Get the data
+    return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err: any, data: any) => {
+      if (err) {
+        return alert("Failed to get data: " + err.message)
+      }
+
+      // Create data table
+      const table = this.props.chart.createDataTable(
+        this.props.design,
+        this.props.schema,
+        this.props.dataSource,
+        data,
+        this.context.locale
+      )
+      if (!table) {
+        return
+      }
+
+      // Convert to csv
+      let csv = new CsvBuilder().build(table)
+
+      // Add BOM
+      csv = "\uFEFF" + csv
+
+      // Make a blob and save
+      const blob = new Blob([csv], { type: "text/csv" })
+
+      // Require at use as causes server problems
+      const FileSaver = require("file-saver")
+      return FileSaver.saveAs(blob, "Exported Data.csv")
+    })
+  }
+
+  handleStartEditing = () => {
+    // Can't edit if already editing
+    if (this.state.editDesign) {
+      return
+    }
+    this.setState({ editDesign: this.props.design })
+  }
+
+  handleEndEditing = () => {
+    this.props.onDesignChange(this.state.editDesign)
+    this.setState({ editDesign: null })
+  }
+
+  handleCancelEditing = () => {
+    this.setState({ editDesign: null })
+  }
+
+  handleEditDesignChange = (design: any) => {
+    this.setState({ editDesign: design })
+  }
+
+  renderChart(design: any, onDesignChange: any, width: any, height: any) {
+    return R(ChartViewComponent, {
+      chart: this.props.chart,
+      design,
+      onDesignChange,
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      widgetDataSource: this.props.widgetDataSource,
+      scope: this.props.scope,
+      filters: this.props.filters,
+      width,
+      height,
+      onScopeChange: this.props.onScopeChange,
+      onRowClick: this.props.onRowClick
+    })
+  }
+
+  renderEditor() {
+    if (!this.state.editDesign) {
+      return null
+    }
+
+    // Create editor
+    const editor = this.props.chart.createDesignerElement({
+      schema: this.props.schema,
+      filters: this.props.filters,
+      dataSource: this.props.dataSource,
+      design: this.state.editDesign,
+      onDesignChange: this.handleEditDesignChange
+    })
+
+    if (this.props.chart.hasDesignerPreview()) {
+      // Create chart (maxing out at half of width of screen)
+      const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width)
+      const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined
+      const chart = this.renderChart(
+        this.state.editDesign,
+        (design: any) => this.setState({ editDesign: design }),
+        chartWidth,
+        chartHeight
+      )
+
+      const content = R(
+        "div",
+        { style: { height: "100%", width: "100%" } },
+        R(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              border: "solid 2px #EEE",
+              borderRadius: 8,
+              padding: 10,
+              width: chartWidth + 20,
+              height: chartHeight != null ? chartHeight + 20 : undefined,
+              overflow: "hidden"
+            }
+          },
+          chart
+        ),
+        R(
+          "div",
+          { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } },
+          R(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%",
+                overflowY: "auto",
+                paddingLeft: 20,
+                paddingRight: 20,
+                borderLeft: "solid 3px #AAA"
+              }
+            },
+            editor
+          )
+        )
+      )
+
+      return R(
+        ModalWindowComponent,
+        {
+          isOpen: true,
+          onRequestClose: this.handleEndEditing
+        },
+        content
+      )
+    } else {
+      return R(
+        ActionCancelModalComponent,
+        {
+          size: "large",
+          onCancel: this.handleCancelEditing,
+          onAction: this.handleEndEditing
+        },
+        editor
+      )
+    }
+  }
+
+  // Render a link to start editing
+  renderEditLink() {
+    return R(
+      "div",
+      { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing },
+      R(ui.Icon, { id: this.props.chart.getPlaceholderIcon() })
+    )
+  }
+
+  render() {
+    const design = this.props.chart.cleanDesign(this.props.design, this.props.schema)
+
+    // Determine if valid design
+    const validDesign = !this.props.chart.validateDesign(design, this.props.schema)
+
+    // Determine if empty
+    const emptyDesign = this.props.chart.isEmpty(design)
+
+    // Create dropdown items
+    const dropdownItems = this.props.chart.createDropdownItems(
+      design,
+      this.props.schema,
+      this.props.widgetDataSource,
+      this.props.filters
+    )
+    if (validDesign) {
+      dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile })
+    }
+    if (this.props.onDesignChange != null) {
+      dropdownItems.unshift({
+        label: this.props.chart.getEditLabel(),
+        icon: "pencil",
+        onClick: this.handleStartEditing
+      })
+    }
+
+    // Wrap in a simple widget
+    return R(
+      "div",
+      {
+        onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined,
+        style: { position: "relative", width: this.props.width }
+      },
+      this.props.onDesignChange != null ? this.renderEditor() : undefined,
+      React.createElement(
+        DropdownWidgetComponent,
+        {
+          width: this.props.width,
+          height: this.props.height,
+          dropdownItems
+        },
+        this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)
+      ),
+      (emptyDesign || !validDesign) && this.props.onDesignChange != null ? this.renderEditLink() : undefined
+    )
+  }
+}