@mwater/visualization 5.0.0

package/src/widgets/charts/table/OrderingsComponent.tsx

@@ -0,0 +1,119 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import { ExprComponent } from "@mwater/expressions-ui"
+import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+import { DataSource, Schema } from "@mwater/expressions"
+
+export interface OrderingsComponentProps {
+  orderings: any
+  onOrderingsChange: any
+  schema: Schema
+  dataSource: DataSource
+  table?: string
+}
+
+// Edits the orderings of a chart
+// Orderings are an array of { axis: axis to order by, direction: "asc"/"desc" }
+// NOTE: no longer uses complete axis, just the expr
+export default class OrderingsComponent extends React.Component<OrderingsComponentProps> {
+  handleAdd = () => {
+    const orderings = this.props.orderings.slice()
+    orderings.push({ axis: null, direction: "asc" })
+    return this.props.onOrderingsChange(orderings)
+  }
+
+  handleOrderingRemove = (index: any) => {
+    const orderings = this.props.orderings.slice()
+    orderings.splice(index, 1)
+    return this.props.onOrderingsChange(orderings)
+  }
+
+  handleOrderingChange = (index: any, ordering: any) => {
+    const orderings = this.props.orderings.slice()
+    orderings[index] = ordering
+    return this.props.onOrderingsChange(orderings)
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      _.map(this.props.orderings, (ordering, i) => {
+        return R(OrderingComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          ordering,
+          table: this.props.table,
+          onOrderingChange: this.handleOrderingChange.bind(null, i),
+          onOrderingRemove: this.handleOrderingRemove.bind(null, i)
+        })
+      }),
+
+      R(
+        "button",
+        { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" },
+        R("span", { className: "fas fa-plus" }),
+        " Add Ordering"
+      )
+    )
+  }
+}
+
+interface OrderingComponentProps {
+  ordering: any
+  onOrderingChange: any
+  onOrderingRemove: any
+  schema: Schema
+  dataSource: DataSource
+  table?: string
+}
+
+class OrderingComponent extends React.Component<OrderingComponentProps> {
+  handleAxisChange = (axis: any) => {
+    return this.props.onOrderingChange(_.extend({}, this.props.ordering, { axis }))
+  }
+
+  handleExprChange = (expr: any) => {
+    const axis = _.extend({}, this.props.ordering.axis || {}, { expr })
+    return this.handleAxisChange(axis)
+  }
+
+  handleDirectionChange = (value: any) => {
+    return this.props.onOrderingChange(_.extend({}, this.props.ordering, { direction: value ? "desc" : "asc" }))
+  }
+
+  render() {
+    return R(
+      "div",
+      { style: { marginLeft: 5 } },
+      R(
+        "div",
+        { style: { textAlign: "right" } },
+        R(
+          "button",
+          { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onOrderingRemove },
+          R("span", { className: "fas fa-times" })
+        )
+      ),
+      R(ExprComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        table: this.props.table,
+        types: ["text", "number", "boolean", "date", "datetime"],
+        aggrStatuses: ["individual", "aggregate"],
+        value: this.props.ordering.axis?.expr,
+        onChange: this.handleExprChange
+      }),
+      R(
+        "div",
+        null,
+        <Checkbox inline value={this.props.ordering.direction === "desc"} onChange={this.handleDirectionChange}>
+          Reverse
+        </Checkbox>
+      )
+    )
+  }
+}

package/src/widgets/charts/table/TableChart.ts

@@ -0,0 +1,420 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import uuid from "uuid"
+import { default as produce } from "immer"
+import { original } from "immer"
+import { DataSource, Expr, injectTableAlias, Schema } from "@mwater/expressions"
+import Chart, { ChartCreateViewElementOptions } from "../Chart"
+import { ExprUtils } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import TableChartViewComponent from "./TableChartViewComponent"
+import { ExprCleaner } from "@mwater/expressions"
+import { JsonQLSelectQuery } from "@mwater/jsonql"
+import { Axis } from "../../../axes/Axis"
+import { JsonQLFilter } from "../../../JsonQLFilter"
+import { Image } from "@mwater/forms/lib/RotationAwareImageComponent"
+
+export interface TableChartDesign {
+  version?: number
+
+  /** table to use for data source */
+  table: string
+
+  titleText?: string
+
+  columns: TableChartColumn[]
+
+  /** optional logical expression to filter by */
+  filter: Expr
+
+  orderings: TableChartOrdering[]
+
+  /** optional limit to number of rows */
+  limit?: number
+}
+
+export interface TableChartColumn {
+  /** unique id of column (uuid v4) */
+  id: string
+
+  /** header text */
+  headerText?: string
+
+  /** axis that creates the text value of the column. NOTE: now no longer using as an axis, but only using expression within! */
+  textAxis?: Axis | null
+
+  /** optional d3-format format for numeric values. Default if null is "," */
+  format?: string | null
+
+  /** Summarize in the table footer, only applicable for number type column expressions */
+  summarize?: boolean
+
+  summaryType?: "sum" | "avg" | "min" | "max"
+
+  /** color axis for background of cells */
+  backgroundColorAxis?: Axis | null
+}
+
+export interface TableChartOrdering {
+  /** axis that creates the order expression. NOTE: now no longer using as an axis, but only using expression within! */
+  axis: Axis | null
+  direction: "asc" | "desc"
+}
+
+/** 
+ * Table control
+ */
+export default class TableChart extends Chart {
+  cleanDesign(design: TableChartDesign, schema: Schema) {
+    const exprCleaner = new ExprCleaner(schema)
+    const axisBuilder = new AxisBuilder({ schema })
+
+    design = produce(design, (draft) => {
+      draft.version = design.version || 1
+
+      // Always have at least one column
+      draft.columns = design.columns || []
+      if (draft.columns.length === 0) {
+        draft.columns.push({ id: uuid() })
+      }
+
+      draft.orderings = design.orderings || []
+
+      // Clean each column
+      for (
+        let columnId = 0, end = draft.columns.length, asc = 0 <= end;
+        asc ? columnId < end : columnId > end;
+        asc ? columnId++ : columnId--
+      ) {
+        const column = draft.columns[columnId]
+
+        if (!column.id) {
+          column.id = uuid()
+        }
+        // Clean textAxis
+        column.textAxis = axisBuilder.cleanAxis({
+          axis: column.textAxis ? original(column.textAxis) : null,
+          table: design.table,
+          aggrNeed: "optional"
+        })
+
+        // Clean backgroundColorAxis
+        column.backgroundColorAxis = axisBuilder.cleanAxis({
+          axis: column.backgroundColorAxis ? original(column.backgroundColorAxis) : null,
+          table: design.table,
+          aggrNeed: "optional"
+        })
+      }
+
+      // Clean orderings
+      for (let ordering of draft.orderings) {
+        ordering.axis = axisBuilder.cleanAxis({
+          axis: ordering.axis ? original(ordering.axis) : null,
+          table: design.table,
+          aggrNeed: "optional"
+        })
+      }
+
+      if (design.filter) {
+        draft.filter = exprCleaner.cleanExpr(design.filter, { table: design.table, types: ["boolean"] })
+      }
+
+      // Limit
+      if (design.limit && design.limit > 1000) {
+        delete draft.limit
+      }
+    })
+
+    return design
+  }
+
+  validateDesign(design: any, schema: Schema) {
+    const axisBuilder = new AxisBuilder({ schema })
+
+    // Check that has table
+    if (!design.table) {
+      return "Missing data source"
+    }
+
+    let error = null
+
+    for (let column of design.columns) {
+      // Check that has textAxis
+      if (!column.textAxis) {
+        error = error || "Missing text"
+      }
+
+      error = error || axisBuilder.validateAxis({ axis: column.textAxis })
+    }
+
+    for (let ordering of design.orderings) {
+      if (!ordering.axis) {
+        error = error || "Missing order expression"
+      }
+      error = error || axisBuilder.validateAxis({ axis: ordering.axis })
+    }
+
+    return error
+  }
+
+  isEmpty(design: any) {
+    return !design.columns || !design.columns[0] || !design.columns[0].textAxis
+  }
+
+  // Creates a design element with specified options
+  // options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design
+  //   onDesignChange: function
+  createDesignerElement(options: any) {
+    // Require here to prevent server require problems
+    const TableChartDesignerComponent = require("./TableChartDesignerComponent").default
+
+    const props = {
+      schema: options.schema,
+      design: this.cleanDesign(options.design, options.schema),
+      dataSource: options.dataSource,
+      onDesignChange: (design: any) => {
+        // Clean design
+        design = this.cleanDesign(design, options.schema)
+        return options.onDesignChange(design)
+      }
+    }
+    return React.createElement(TableChartDesignerComponent, props)
+  }
+
+  // Get data for the chart asynchronously
+  // 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: TableChartDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: (error: any, data?: any) => void) {
+    let column
+    const exprUtils = new ExprUtils(schema)
+    const exprCompiler = new ExprCompiler(schema)
+    const axisBuilder = new AxisBuilder({ schema })
+
+    // Create shell of query
+    const query: JsonQLSelectQuery = {
+      type: "query",
+      selects: [],
+      from: exprCompiler.compileTable(design.table, "main"),
+      groupBy: [],
+      orderBy: [],
+      limit: Math.min(design.limit || 1000, 1000)
+    }
+
+    // Determine if any aggregate
+    const isAggr =
+      _.any(design.columns, (column) => axisBuilder.isAxisAggr(column.textAxis)) ||
+      _.any(design.orderings, (ordering) => axisBuilder.isAxisAggr(ordering.axis)) ||
+      _.any(design.columns, (column) => axisBuilder.isAxisAggr(column.backgroundColorAxis))
+
+    const totalColumns: string[] = []
+
+    // For each column
+    for (let colNum = 0 ; colNum < design.columns.length ; colNum++) {
+      column = design.columns[colNum]
+
+      const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null)
+
+      let compiledExpr = exprCompiler.compileExpr({ expr: column.textAxis?.expr!, tableAlias: "main" })
+
+      // Handle special case of geometry, converting to GeoJSON
+      if (exprType === "geometry") {
+        // Convert to 4326 (lat/long). Force ::geometry for null
+        compiledExpr = {
+          type: "op",
+          op: "ST_AsGeoJSON",
+          exprs: [
+            { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326] }
+          ]
+        }
+      }
+
+      query.selects.push({
+        type: "select",
+        expr: compiledExpr,
+        alias: `c${colNum}`
+      })
+
+      if(exprType === 'number' && column.summarize) {
+        totalColumns.push(`c${colNum}`)
+      }
+
+      // Add group by if not aggregate
+      if (isAggr && !axisBuilder.isAxisAggr(column.textAxis)) {
+        query.groupBy!.push(colNum + 1)
+      }
+    }
+
+    // Compile orderings
+    const iterable = design.orderings || []
+    for (let i = 0; i < iterable.length; i++) {
+      // Add as select so we can use ordinals. Prevents https://github.com/mWater/mwater-visualization/issues/165
+      const ordering = iterable[i]
+      query.selects.push({
+        type: "select",
+        expr: exprCompiler.compileExpr({ expr: ordering.axis?.expr ?? null, tableAlias: "main" }),
+        alias: `o${i}`
+      })
+
+      query.orderBy!.push({
+        ordinal: design.columns.length + i + 1,
+        direction: ordering.direction,
+        nulls: ordering.direction === "desc" ? "last" : "first"
+      })
+
+      // Add group by if non-aggregate
+      if (isAggr && exprUtils.getExprAggrStatus(ordering.axis?.expr ?? null) === "individual") {
+        query.groupBy!.push(design.columns.length + i + 1)
+      }
+    }
+
+    for (let colNum = 0 ; colNum < design.columns.length ; colNum++) {
+      column = design.columns[colNum]
+      if(!column.backgroundColorAxis) continue
+
+      query.selects.push({
+        type: "select",
+        expr: axisBuilder.compileAxis({ axis: column.backgroundColorAxis!, tableAlias: "main" }),
+        alias: `bc${colNum}`
+      })
+
+      if (isAggr && !axisBuilder.isAxisAggr(column.backgroundColorAxis)) {
+        query.groupBy!.push(query.selects.length)
+      }
+    }
+
+    // Add id if non-aggr
+    if (!isAggr) {
+      query.selects.push({
+        type: "select",
+        expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table)!.primaryKey },
+        alias: "id"
+      })
+    }
+
+    // Get relevant filters
+    filters = _.where(filters || [], { table: design.table })
+    let whereClauses = _.map(filters, (f) => injectTableAlias(f.jsonql, "main"))
+
+    // Compile filter
+    if (design.filter) {
+      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
+    }
+
+    whereClauses = _.compact(whereClauses)
+
+    // Wrap if multiple
+    if (whereClauses.length > 1) {
+      query.where = { type: "op", op: "and", exprs: whereClauses }
+    } else {
+      query.where = whereClauses[0]
+    }
+
+    const summaryQuery: JsonQLSelectQuery = {
+      type: "query",
+      selects: design.columns.map((c: any, i) => {
+        if(totalColumns.includes(`c${i}`))
+          return { type: "select", expr: { type: "op", op: c.summaryType ?? 'sum', exprs: [{ type: "field", tableAlias: "t", column: `c${i}` }] }, alias: `c${i}` }
+        else 
+          return { type: 'select', expr: {type: 'literal', value: null} , alias: `c${i}` }
+      }),
+      from: { type: "subquery", query, alias: "t" },
+    }
+
+    return dataSource.performQuery(query, (error: any, data: any) => {
+      if(totalColumns.length > 0) 
+        dataSource.performQuery(summaryQuery, (error: any, summary: any) => {
+          callback(error, { main: data, summary: summary[0] })
+        })
+      else 
+      callback(error, { main: data})
+    })
+  }
+
+  // Create a view element for the chart
+  // Options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design of the chart
+  //   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) {
+    // Create chart
+    const props = {
+      schema: options.schema,
+      dataSource: options.dataSource,
+      design: this.cleanDesign(options.design, options.schema),
+      data: options.data,
+
+      width: options.width,
+      height: options.height,
+
+      scope: options.scope,
+      onScopeChange: options.onScopeChange,
+
+      onRowClick: options.onRowClick
+    }
+
+    return React.createElement(TableChartViewComponent, props)
+  }
+
+  createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any, locale: any) {
+    let exprUtils = new ExprUtils(schema)
+
+    const renderHeaderCell = (column: any) => {
+      return column.headerText || exprUtils.summarizeExpr(column.textAxis?.expr, locale)
+    }
+
+    const header = _.map(design.columns, renderHeaderCell)
+    let table = [header]
+    const renderRow = (record: any) => {
+      const renderCell = (column: any, columnIndex: any) => {
+        const value = record[`c${columnIndex}`]
+
+        // Handle empty as "" not "None"
+        if (value == null) {
+          return ""
+        }
+
+        exprUtils = new ExprUtils(schema)
+        const exprType = exprUtils.getExprType(column.textAxis?.expr)
+
+        // Special case for images
+        if (exprType === "image" && value) {
+          return dataSource.getImageUrl(value.id)
+        }
+
+        if (exprType === "imagelist" && value) {
+          return _.map(value, (img: Image) => dataSource.getImageUrl(img.id)).join(" ")
+        }
+
+        return exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, locale)
+      }
+
+      return _.map(design.columns, renderCell)
+    }
+
+    table = table.concat(_.map(data.main, renderRow))
+    return table
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema) {
+    return _.compact([design.table])
+  }
+
+  // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ
+  getPlaceholderIcon() {
+    return "fa-table"
+  }
+}