@mwater/visualization 5.0.0

package/src/widgets/charts/pivot/IntersectionDesignerComponent.tsx

@@ -0,0 +1,338 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import update from "@mwater/react-library/lib/update"
+import { default as Rcslider } from "rc-slider"
+import AxisComponent from "../../../axes/AxisComponent"
+import ColorComponent from "../../../ColorComponent"
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { ExprComponent } from "@mwater/expressions-ui"
+import { DataSource, Expr, Schema } from "@mwater/expressions"
+import { PivotChartIntersection } from "./PivotChartDesign"
+import { JsonQLFilter } from "../../../JsonQLFilter"
+import { ListEditorComponent } from "@mwater/react-library/lib/ListEditorComponent"
+
+export interface IntersectionDesignerComponentProps {
+  intersection: PivotChartIntersection
+  table: string
+  schema: Schema
+  dataSource: DataSource
+  onChange: (intersection: PivotChartIntersection) => void
+  filters?: JsonQLFilter[]
+}
+
+// Design an intersection of a pivot table
+export default class IntersectionDesignerComponent extends React.Component<IntersectionDesignerComponentProps> {
+  constructor(props: IntersectionDesignerComponentProps) {
+    super(props)
+
+    this.update = this.update.bind(this)
+  }
+
+  // Updates intersection with the specified changes
+  update(...args: any[]) {
+    return update(this.props.intersection, this.props.onChange, arguments)
+  }
+
+  handleBackgroundColorAxisChange = (backgroundColorAxis: any) => {
+    const opacity = this.props.intersection.backgroundColorOpacity || 1
+    return this.update({ backgroundColorAxis, backgroundColorOpacity: opacity })
+  }
+
+  handleBackgroundColorChange = (backgroundColor: any) => {
+    const opacity = this.props.intersection.backgroundColorOpacity || 1
+    return this.update({ backgroundColor, backgroundColorOpacity: opacity })
+  }
+
+  handleBackgroundColorConditionsChange = (backgroundColorConditions: any) => {
+    const opacity = this.props.intersection.backgroundColorOpacity || 1
+    return this.update({ backgroundColorConditions, backgroundColorOpacity: opacity })
+  }
+
+  handleBackgroundColorOpacityChange = (newValue: any) => {
+    return this.update({ backgroundColorOpacity: newValue / 100 })
+  }
+
+  handleFilterChange = (filter: any) => {
+    return this.update({ filter })
+  }
+
+  renderValueAxis() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Calculation",
+        help: "This is the calculated value that is displayed. Leave as blank to make an empty section"
+      },
+      R(AxisComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        table: this.props.table,
+        types: ["enum", "text", "boolean", "date", "number"],
+        aggrNeed: "required",
+        value: this.props.intersection.valueAxis,
+        onChange: this.update("valueAxis"),
+        showFormat: true,
+        filters: this.props.filters
+      })
+    )
+  }
+
+  renderNullValue() {
+    if (this.props.intersection.valueAxis) {
+      return R(
+        ui.FormGroup,
+        {
+          labelMuted: true,
+          label: "Show Empty Cells as"
+        },
+        R(ui.TextInput, {
+          value: this.props.intersection.valueAxis.nullLabel ?? null,
+          emptyNull: true,
+          onChange: this.update("valueAxis.nullLabel"),
+          placeholder: "Blank"
+        })
+      )
+    }
+    return null
+  }
+
+  renderFilter() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"]
+      },
+      R(FilterExprComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onChange: this.handleFilterChange,
+        table: this.props.table,
+        value: this.props.intersection.filter
+      })
+    )
+  }
+
+  renderStyling() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        key: "styling",
+        label: "Styling"
+      },
+      R(
+        ui.Checkbox,
+        { key: "bold", inline: true, value: this.props.intersection.bold, onChange: this.update("bold") },
+        "Bold"
+      ),
+      R(
+        ui.Checkbox,
+        { key: "italic", inline: true, value: this.props.intersection.italic, onChange: this.update("italic") },
+        "Italic"
+      )
+    )
+  }
+
+  renderBackgroundColorConditions() {
+    return R(BackgroundColorConditionsComponent, {
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      table: this.props.table,
+      colorConditions: this.props.intersection.backgroundColorConditions,
+      onChange: this.handleBackgroundColorConditionsChange
+    })
+  }
+
+  renderBackgroundColorAxis() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Background Color From Values",
+        help: "This is an optional background color to set on cells that is controlled by the data"
+      },
+      R(AxisComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        table: this.props.table,
+        types: ["enum", "text", "boolean", "date"],
+        aggrNeed: "required",
+        value: this.props.intersection.backgroundColorAxis,
+        onChange: this.handleBackgroundColorAxisChange,
+        showColorMap: true,
+        filters: this.props.filters
+      })
+    )
+  }
+
+  renderBackgroundColor() {
+    if (this.props.intersection.backgroundColorAxis) {
+      return
+    }
+
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Background Color",
+        help: "This is an optional background color to set on all cells"
+      },
+      R(ColorComponent, {
+        color: this.props.intersection.backgroundColor,
+        onChange: this.handleBackgroundColorChange
+      })
+    )
+  }
+
+  renderBackgroundColorOpacityControl() {
+    if (
+      !this.props.intersection.backgroundColorAxis &&
+      !this.props.intersection.backgroundColor &&
+      !this.props.intersection.backgroundColorConditions?.[0]
+    ) {
+      return
+    }
+
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: `Background Opacity: ${Math.round((this.props.intersection.backgroundColorOpacity ?? 1) * 100)}%`
+      },
+      R(Rcslider, {
+        min: 0,
+        max: 100,
+        step: 1,
+        tipTransitionName: "rc-slider-tooltip-zoom-down",
+        value: (this.props.intersection.backgroundColorOpacity ?? 1) * 100,
+        onChange: this.handleBackgroundColorOpacityChange
+      })
+    )
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      this.renderValueAxis(),
+      this.renderNullValue(),
+      this.renderFilter(),
+      this.renderStyling(),
+      this.renderBackgroundColorAxis(),
+      this.renderBackgroundColorConditions(),
+      this.renderBackgroundColor(),
+      this.renderBackgroundColorOpacityControl()
+    )
+  }
+}
+
+interface BackgroundColorConditionsComponentProps {
+  colorConditions?: { condition?: Expr, color?: string }[]
+  table: string
+  schema: Schema
+  dataSource: DataSource
+  onChange: (colorConditions?: { condition?: Expr, color?: string }[]) => void
+}
+
+/** Displays background color conditions */
+class BackgroundColorConditionsComponent extends React.Component<BackgroundColorConditionsComponentProps> {
+  handleAdd = () => {
+    const colorConditions = (this.props.colorConditions || []).slice()
+    colorConditions.push({})
+    this.props.onChange(colorConditions)
+  }
+
+  render() {
+    // List conditions
+    return R(
+      ui.FormGroup,
+      {
+        label: "Color Conditions",
+        labelMuted: true,
+        help: "Add conditions that, if met, set the color of the cell. Useful for flagging certain values"
+      },
+      <ListEditorComponent<{ condition?: Expr, color?: string }>
+        items={this.props.colorConditions || []}
+        renderItem={(item, index, onItemChange) => {
+          return R(BackgroundColorConditionComponent, {
+            key: index,
+            colorCondition: item,
+            table: this.props.table,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: onItemChange
+          })
+        }}
+        onItemsChange={this.props.onChange}
+      />,
+      R(
+        ui.Button,
+        { type: "link", size: "sm", onClick: this.handleAdd },
+        R(ui.Icon, { id: "fa-plus" }),
+        " Add Condition"
+      )
+    )
+  }
+}
+
+interface BackgroundColorConditionComponentProps {
+  colorCondition: any
+  table: string
+  schema: Schema
+  dataSource: DataSource
+  onChange: any
+}
+
+// Displays single background color condition
+class BackgroundColorConditionComponent extends React.Component<BackgroundColorConditionComponentProps> {
+  constructor(props: BackgroundColorConditionComponentProps) {
+    super(props)
+    this.update = this.update.bind(this)
+  }
+
+  // Updates intersection with the specified changes
+  update(...args: any[]) {
+    return update(this.props.colorCondition, this.props.onChange, arguments)
+  }
+
+  render() {
+    return R(
+      "div", {},
+      R(
+        ui.FormGroup,
+        {
+          labelMuted: true,
+          label: "Condition"
+        },
+        R(ExprComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          onChange: this.update("condition"),
+          types: ["boolean"],
+          aggrStatuses: ["aggregate", "literal"],
+          table: this.props.table,
+          value: this.props.colorCondition.condition
+        })
+      ),
+
+      R(
+        ui.FormGroup,
+        {
+          labelMuted: true,
+          label: "Color",
+          hint: "Color to display when condition is met"
+        },
+        R(ColorComponent, {
+          color: this.props.colorCondition.color,
+          onChange: this.update("color")
+        })
+      )
+    )
+  }
+}

package/src/widgets/charts/pivot/PivotChart.ts

@@ -0,0 +1,377 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import async from "async"
+import uuid from "uuid"
+import { default as produce } from "immer"
+import { original } from "immer"
+import { DataSource, Schema, WeakCache } from "@mwater/expressions"
+import Chart, { ChartCreateViewElementOptions } from "../Chart"
+import { ExprCleaner } from "@mwater/expressions"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import TextWidget from "../../text/TextWidget"
+import * as PivotChartUtils from "./PivotChartUtils"
+import PivotChartQueryBuilder from "./PivotChartQueryBuilder"
+import PivotChartLayoutBuilder from "./PivotChartLayoutBuilder"
+import { WidgetDataSource } from "../../WidgetDataSource"
+import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign"
+import { JsonQLFilter } from "../../../JsonQLFilter"
+
+// Store true as a weakly cached value if a design is already clean
+const cleanDesignCache = new WeakCache()
+
+export default class PivotChart extends Chart {
+  cleanDesign(design: PivotChartDesign, schema: Schema) {
+    const exprCleaner = new ExprCleaner(schema)
+    const axisBuilder = new AxisBuilder({ schema })
+
+    // Use weak caching to improve performance of cleaning complex pivot charts
+    if (cleanDesignCache.get([design, schema], []) === true) {
+      return design
+    }
+
+    const cleanedDesign = produce(design, (draft) => {
+      // Fill in defaults
+      draft.version = design.version || 1
+      draft.rows = design.rows || []
+      draft.columns = design.columns || []
+      draft.intersections = design.intersections || {}
+      draft.header = design.header || { style: "footer", items: [] }
+      draft.footer = design.footer || { style: "footer", items: [] }
+
+      if (design.table) {
+        // Add default row and column
+        let intersectionId, segment
+        if (draft.rows.length === 0) {
+          draft.rows.push({ id: uuid() })
+        }
+        if (draft.columns.length === 0) {
+          draft.columns.push({ id: uuid() })
+        }
+
+        // Cleans a single segment
+        const cleanSegment = (segment: PivotChartSegment) => {
+          if (segment.valueAxis) {
+            segment.valueAxis = axisBuilder.cleanAxis({
+              axis: segment.valueAxis ? original(segment.valueAxis) : null,
+              table: design.table,
+              aggrNeed: "none",
+              types: ["enum", "enumset", "text", "boolean", "date"]
+            })
+          }
+
+          // Remove valueLabelBold if no valueAxis
+          if (!segment.valueAxis) {
+            delete segment.valueLabelBold
+          }
+
+          if (segment.filter) {
+            segment.filter = exprCleaner.cleanExpr(segment.filter ? original(segment.filter)! : null, {
+              table: design.table,
+              types: ["boolean"]
+            })
+          }
+
+          if (segment.orderExpr) {
+            segment.orderExpr = exprCleaner.cleanExpr(segment.orderExpr ? original(segment.orderExpr)! : null, {
+              table: design.table,
+              aggrStatuses: ["aggregate"],
+              types: ["enum", "text", "boolean", "date", "datetime", "number"]
+            })
+          }
+        }
+
+        // Clean all segments
+        for (segment of PivotChartUtils.getAllSegments(draft.rows)) {
+          cleanSegment(segment)
+        }
+
+        for (segment of PivotChartUtils.getAllSegments(draft.columns)) {
+          cleanSegment(segment)
+        }
+
+        // Clean all intersections
+        for (intersectionId in draft.intersections) {
+          const intersection = draft.intersections[intersectionId]
+          if (intersection.valueAxis) {
+            intersection.valueAxis = axisBuilder.cleanAxis({
+              axis: intersection.valueAxis ? original(intersection.valueAxis) : null,
+              table: design.table,
+              aggrNeed: "required",
+              types: ["enum", "text", "boolean", "date", "number"]
+            })
+          }
+
+          if (intersection.backgroundColorAxis) {
+            intersection.backgroundColorAxis = axisBuilder.cleanAxis({
+              axis: intersection.backgroundColorAxis ? original(intersection.backgroundColorAxis) : null,
+              table: design.table,
+              aggrNeed: "required",
+              types: ["enum", "text", "boolean", "date"]
+            })
+
+            if (intersection.backgroundColorOpacity == null) {
+              intersection.backgroundColorOpacity = 1
+            }
+          }
+
+          for (const colorCondition of intersection.backgroundColorConditions || []) {
+            colorCondition.condition = exprCleaner.cleanExpr(colorCondition.condition ? original(colorCondition.condition)! : null, {
+              table: design.table,
+              types: ["boolean"],
+              aggrStatuses: ["aggregate", "literal"]
+            })
+          }
+
+          if (intersection.filter) {
+            intersection.filter = exprCleaner.cleanExpr(intersection.filter ? original(intersection.filter)! : null, {
+              table: design.table,
+              types: ["boolean"]
+            })
+          }
+        }
+
+        // Get all intersection ids
+        const allIntersectionIds = []
+        for (let rowPath of PivotChartUtils.getSegmentPaths(design.rows || [])) {
+          for (let columnPath of PivotChartUtils.getSegmentPaths(design.columns || [])) {
+            allIntersectionIds.push(PivotChartUtils.getIntersectionId(rowPath, columnPath))
+          }
+        }
+
+        // Add missing intersections
+        for (intersectionId of _.difference(allIntersectionIds, _.keys(design.intersections || {}))) {
+          draft.intersections[intersectionId] = {}
+        }
+
+        // Remove extra intersections
+        for (intersectionId of _.difference(_.keys(design.intersections || {}), allIntersectionIds)) {
+          delete draft.intersections[intersectionId]
+        }
+
+        // Clean filter
+        draft.filter = exprCleaner.cleanExpr(design.filter ?? null, { table: design.table, types: ["boolean"] })
+      }
+    })
+
+    // Cache if unchanged (and therefore clean)
+    if (design === cleanedDesign) {
+      cleanDesignCache.set([design, schema], [], true)
+    }
+
+    return cleanedDesign
+  }
+
+  validateDesign(design: PivotChartDesign, schema: Schema) {
+    let segment
+    const axisBuilder = new AxisBuilder({ schema })
+
+    // Check that has table
+    if (!design.table || !schema.getTable(design.table)) {
+      return "Missing data source"
+    }
+
+    // Check that has rows
+    if (design.rows.length === 0) {
+      return "Missing rows"
+    }
+
+    // Check that has columns
+    if (design.columns.length === 0) {
+      return "Missing columns"
+    }
+
+    let error = null
+
+    // Validate axes
+    for (segment of PivotChartUtils.getAllSegments(design.rows)) {
+      if (segment.valueAxis) {
+        error = error || axisBuilder.validateAxis({ axis: segment.valueAxis })
+      }
+    }
+
+    for (segment of PivotChartUtils.getAllSegments(design.columns)) {
+      if (segment.valueAxis) {
+        error = error || axisBuilder.validateAxis({ axis: segment.valueAxis })
+      }
+    }
+
+    for (let intersectionId in design.intersections) {
+      const intersection = design.intersections[intersectionId]
+      if (intersection.valueAxis) {
+        error = error || axisBuilder.validateAxis({ axis: intersection.valueAxis })
+      }
+    }
+
+    return error
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return false
+  }
+
+  isEmpty(design: any) {
+    return !design.table || design.rows.length === 0 || design.columns.length === 0
+  }
+
+  // True if designer should have a preview pane to the left
+  hasDesignerPreview() {
+    return false
+  }
+
+  // Label for the edit gear dropdown
+  getEditLabel() {
+    return "Configure Table"
+  }
+
+  // Creates a design element with specified options
+  // options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design
+  //   onDesignChange: function
+  //   filters: array of filters
+  createDesignerElement(options: any) {
+    // Require here to prevent server require problems
+    const PivotChartDesignerComponent = require("./PivotChartDesignerComponent").default
+
+    const props = {
+      schema: options.schema,
+      dataSource: options.dataSource,
+      design: this.cleanDesign(options.design, options.schema),
+      filters: options.filter,
+      onDesignChange: (design: any) => {
+        // Clean design
+        design = this.cleanDesign(design, options.schema)
+        return options.onDesignChange(design)
+      }
+    }
+    return React.createElement(PivotChartDesignerComponent, props)
+  }
+
+  /**
+   * Get data for the chart asynchronously.
+   *
+   * @param design - Design of the chart.
+   * @param schema - Schema to use.
+   * @param dataSource - Data source to get data from.
+   * @param filters - Array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }.
+   * @param callback - Callback function to handle the result or error.
+   */
+  async getData(design: PivotChartDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: (error: any, data?: any) => void) {
+    try {
+      const queryBuilder = new PivotChartQueryBuilder({ schema })
+      const queries = queryBuilder.createQueries(design, filters)
+
+      // Get a list of intersection ids
+      const intersectionIds = Object.keys(queries)
+
+      // Get a list of all queries
+      const queriesList = intersectionIds.map(intersectionId => queries[intersectionId])
+
+      // Run queries in parallel
+      const results = await Promise.all(queriesList.map((query) => {
+        return dataSource.performQuery(query)
+      }))
+
+      const data: any = {}
+
+      // Add results to data
+      for (let i = 0; i < queriesList.length; i++) {
+        data[intersectionIds[i]] = results[i]
+      }
+
+      // Add header and footer data
+      const textWidget = new TextWidget()
+
+      data.header = await new Promise((resolve, reject) => {
+        textWidget.getData(design.header, schema, dataSource, filters, (error: any, headerData: any) => {
+          if (error) {
+            reject(error)
+          }
+          else {
+            resolve(headerData)
+          }
+        })
+      })
+
+      data.footer = await new Promise((resolve, reject) => {
+        textWidget.getData(design.footer, schema, dataSource, filters, (error: any, footerData: any) => {
+          if (error) {
+            reject(error)
+          }
+          else {
+            resolve(footerData)
+          }
+        })
+      })
+
+      callback(null, data)
+    }
+    catch (error) {
+      callback(error)
+    }
+  }
+
+  // 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
+  //   filters: array of filters
+  createViewElement(options: ChartCreateViewElementOptions) {
+    const PivotChartViewComponent = require("./PivotChartViewComponent").default
+
+    // Create chart
+    const props = {
+      schema: options.schema,
+      dataSource: options.dataSource,
+      design: this.cleanDesign(options.design, options.schema),
+      onDesignChange: options.onDesignChange,
+      data: options.data,
+
+      width: options.width,
+      height: options.height,
+
+      scope: options.scope,
+      onScopeChange: options.onScopeChange,
+      filters: options.filters
+    }
+
+    return React.createElement(PivotChartViewComponent, props)
+  }
+
+  createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any) {
+    return []
+  }
+
+  createDataTable(design: PivotChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string) {
+    // Create layout
+    const layout = new PivotChartLayoutBuilder({ schema }).buildLayout(design, data, locale)
+
+    return _.map(layout.rows, (row) => _.map(row.cells, (cell) => cell.text))
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema) {
+    let filterableTables = design.table ? [design.table] : []
+
+    // Get filterable tables from header and footer
+    const textWidget = new TextWidget()
+    filterableTables = _.union(filterableTables, textWidget.getFilterableTables(design.header, schema))
+    filterableTables = _.union(filterableTables, textWidget.getFilterableTables(design.footer, schema))
+
+    return filterableTables
+  }
+
+  // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ
+  getPlaceholderIcon() {
+    return "fa-magic"
+  }
+}