@mwater/visualization 5.0.0

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

@@ -0,0 +1,327 @@
+import PropTypes from "prop-types"
+import _, { sortBy } from "lodash"
+import React from "react"
+const R = React.createElement
+import moment from "moment"
+import { default as Linkify } from "react-linkify"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { formatValue } from "../../../valueFormatter"
+import { Image } from "@mwater/forms/lib/RotationAwareImageComponent"
+import { TableChartColumn } from "./TableChart"
+import Color from "color"
+
+export interface TableChartViewComponentProps {
+  /** Design of chart */
+  design: any
+  /** Data that the table has requested */
+  data: any
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  width?: number
+  height?: number
+  /** scope of the widget (when the widget self-selects a particular scope) */
+  scope?: any
+  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+  onScopeChange?: any
+  onRowClick?: any
+}
+
+export default class TableChartViewComponent extends React.Component<TableChartViewComponentProps> {
+  shouldComponentUpdate(prevProps: TableChartViewComponentProps) {
+    return !_.isEqual(prevProps, this.props)
+  }
+
+  render() {
+    const style = {
+      width: this.props.width,
+      height: this.props.height
+    }
+
+    return R(
+      "div",
+      { style, className: "overflow-auto-except-print" },
+      R("div", { style: { fontWeight: "bold", textAlign: "center" } }, this.props.design.titleText),
+      R(TableContentsComponent, {
+        columns: this.props.design.columns,
+        table: this.props.design.table,
+        data: this.props.data,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onRowClick: this.props.onRowClick
+      })
+    )
+  }
+}
+
+interface TableContentsComponentProps {
+  /** Columns of chart */
+  columns: TableChartColumn[]
+  /** Data that the table has requested */
+  data: any
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use */
+  dataSource: DataSource
+  table: string
+  /** Called with (tableId, rowId) when item is clicked */
+  onRowClick?: any
+}
+
+interface TableContentsComponentState {
+  sort: {
+    column: number
+    direction: "asc" | "desc"
+  } | null
+  data: any
+}
+
+class TableContentsComponent extends React.Component<TableContentsComponentProps, TableContentsComponentState> {
+  static contextTypes = { locale: PropTypes.string }
+
+  constructor(props: TableContentsComponentProps) {
+    super(props)
+    this.state = {
+      sort: null,
+      data: props.data.main
+    }
+  }
+
+  componentDidUpdate(
+    prevProps: Readonly<TableContentsComponentProps>,
+    prevState: Readonly<TableContentsComponentState>,
+    snapshot?: any
+  ): void {
+    this.setState({ data: this.sortData() })
+  }
+
+  sortData = () => {
+    if (!this.state.sort) return this.props.data.main
+    return _.sortByOrder(this.props.data.main, [`c${this.state.sort.column}`], [this.state.sort.direction])
+  }
+
+  shouldComponentUpdate(
+    nextProps: Readonly<TableContentsComponentProps>,
+    nextState: Readonly<TableContentsComponentState>,
+    nextContext: any
+  ): boolean {
+    if (nextProps.columns !== this.props.columns && !_.isEqual(nextProps.columns, this.props.columns)) {
+      return true
+    }
+
+    if (nextProps.data !== this.props.data && !_.isEqual(nextProps.data, this.props.data)) {
+      return true
+    }
+
+    if (nextProps.schema !== this.props.schema) {
+      return true
+    }
+
+    if (nextProps.schema !== this.props.schema) {
+      return true
+    }
+    if (nextState.sort !== this.state.sort) {
+      return true
+    }
+
+    if (nextState.data !== this.state.data && !_.isEqual(nextState.data, this.state.data)) {
+      return true
+    }
+
+    return false
+  }
+
+  handleRowClick = (rowIndex: any) => {
+    const row = this.state.data[rowIndex]
+
+    if (row && row.id && this.props.onRowClick) {
+      return this.props.onRowClick(this.props.table, row.id)
+    }
+  }
+
+  handleSort = (colIndex: number) => {
+    const currentSort = this.state.sort?.column === colIndex ? this.state.sort?.direction : null
+    this.setState({
+      sort: {
+        column: colIndex,
+        direction: currentSort === "asc" ? "desc" : "asc"
+      }
+    })
+  }
+
+  renderHeaderCell(index: any) {
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+    const column = this.props.columns[index]
+    //(this.state.sort?.direction === 'asc' ? "":"")
+    const text =
+      column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context.locale) : "")
+    return R(
+      "th",
+      {
+        key: index,
+        style: { cursor: "pointer" },
+        onClick: () => this.handleSort(index)
+      },
+      text,
+      this.state.sort?.column === index
+        ? R("span", {
+            style: { marginLeft: 10 },
+            className: `fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}`
+          })
+        : undefined
+    )
+  }
+
+  renderHeader() {
+    return R(
+      "thead",
+      { key: "head" },
+      R(
+        "tr",
+        { key: "head" },
+        _.map(this.props.columns, (column, i) => this.renderHeaderCell(i))
+      )
+    )
+  }
+
+  renderFooterCell(index: number) {
+    const exprUtils = new ExprUtils(this.props.schema)
+    const column = this.props.columns[index]
+
+    if (!column.textAxis) return null
+
+    const exprType = exprUtils.getExprType(column.textAxis?.expr)
+    let node = null
+
+    if (exprType && exprType == "number") {
+      node = `${_.capitalize(column.summaryType)}: ${formatValue(
+        exprType,
+        this.props.data.summary[`c${index}`],
+        column.format
+      )}`
+    }
+
+    return node
+  }
+
+  renderFooter() {
+    if (!this.props.data.summary) {
+      return null
+    }
+
+    return R(
+      "tfoot",
+      { key: "foot" },
+      R(
+        "tr",
+        { key: "foot" },
+        _.map(this.props.columns, (column, i) => R("th", { key: i }, this.renderFooterCell(i)))
+      )
+    )
+  }
+
+  renderImage(id: any) {
+    const url = this.props.dataSource.getImageUrl(id)
+    return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
+  }
+
+  renderCell(rowIndex: any, columnIndex: any) {
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+    let node
+    const row = this.state.data[rowIndex]
+    const column = this.props.columns[columnIndex]
+    // Set background color
+    let backgroundColor = "transparent"
+    let textColor = "#212529"
+
+    const exprUtils = new ExprUtils(this.props.schema)
+    if (!column.textAxis) {
+      node = null
+    } else {
+      const exprType = exprUtils.getExprType(column.textAxis.expr)
+
+      // Get value
+      let value = row[`c${columnIndex}`]
+
+      if (value == null) {
+        node = null
+      } else {
+        // Parse if should be JSON
+        if (["image", "imagelist", "geometry", "text[]"].includes(exprType || "") && _.isString(value)) {
+          value = JSON.parse(value)
+        }
+
+        if (column.backgroundColorAxis && row[`bc${columnIndex}`] != null) {
+          backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff"
+        }
+
+        // Convert to node based on type
+        switch (exprType) {
+          case "text":
+            node = R(Linkify, { properties: { target: "_blank" } }, value)
+            break
+          case "number":
+          case "geometry":
+            node = formatValue(exprType, value, column.format)
+            break
+          case "boolean":
+          case "enum":
+          case "enumset":
+          case "text[]":
+            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            break
+          case "date":
+            node = moment(value, "YYYY-MM-DD").format("ll")
+            break
+          case "datetime":
+            node = moment(value, moment.ISO_8601).format("lll")
+            break
+          case "image":
+            node = this.renderImage(value.id)
+            break
+          case "imagelist":
+            node = _.map(value, (v: Image) => this.renderImage(v.id))
+            break
+          default:
+            node = "" + value
+        }
+      }
+    }
+
+    if (backgroundColor) {
+      const c = Color(backgroundColor)
+      // Get lightness (taking into account alpha)
+      const lightness = 1 - (1 - c.luminosity()) * c.alpha()
+      textColor = lightness < 0.3 ? "rgb(204,204,204)" : "#212529"
+    }
+
+    return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node)
+  }
+
+  renderRow(index: any) {
+    return R(
+      "tr",
+      { key: index, onClick: this.handleRowClick.bind(null, index) },
+      _.map(this.props.columns, (column, i) => this.renderCell(index, i))
+    )
+  }
+
+  renderBody() {
+    return R(
+      "tbody",
+      { key: "body" },
+      _.map(this.state.data, (row, i) => this.renderRow(i))
+    )
+  }
+
+  render() {
+    return R(
+      "table",
+      { className: "mwater-visualization-table", style: { fontSize: "10pt", marginBottom: 0 } },
+      this.renderHeader(),
+      this.renderBody(),
+      this.renderFooter()
+    )
+  }
+}

package/src/widgets/text/ExprInsertModalComponent.ts

@@ -0,0 +1,77 @@
+import React from "react"
+const R = React.createElement
+
+import uuid from "uuid"
+import { DataSource, Schema } from "@mwater/expressions"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import ExprItemEditorComponent from "./ExprItemEditorComponent"
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+
+export interface ExprInsertModalComponentProps {
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use to get values */
+  dataSource: DataSource
+  /** Called with expr item to insert */
+  onInsert: (exprItem: HtmlItemExpr) => void
+  singleRowTable?: string
+}
+
+interface ExprInsertModalComponentState {
+  exprItem: HtmlItemExpr | null
+  open: boolean
+}
+
+// Modal that displays an expression builder
+export default class ExprInsertModalComponent extends React.Component<
+  ExprInsertModalComponentProps,
+  ExprInsertModalComponentState
+> {
+  constructor(props: ExprInsertModalComponentProps) {
+    super(props)
+
+    this.state = {
+      open: false,
+      exprItem: null
+    }
+  }
+
+  open() {
+    this.setState({ open: true, exprItem: { type: "expr", id: uuid(), expr: null } })
+  }
+
+  handleInsert = () => {
+    if (!this.state.exprItem) {
+      return
+    }
+
+    // Close first to avoid strange effects when mixed with pojoviews
+    this.setState({ open: false }, () => {
+      this.props.onInsert(this.state.exprItem!)
+    })
+  }
+
+  render() {
+    if (!this.state.open) {
+      return null
+    }
+
+    return R(
+      ActionCancelModalComponent,
+      {
+        actionLabel: "Insert",
+        onAction: this.handleInsert,
+        onCancel: () => this.setState({ open: false }),
+        title: "Insert Field",
+        size: "x-large"
+      },
+      R(ExprItemEditorComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        exprItem: this.state.exprItem,
+        onChange: (exprItem: any) => this.setState({ exprItem }),
+        singleRowTable: this.props.singleRowTable
+      })
+    )
+  }
+}

package/src/widgets/text/ExprItemEditorComponent.tsx

@@ -0,0 +1,164 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { ExprComponent } from "@mwater/expressions-ui"
+import TableSelectComponent from "../../TableSelectComponent"
+import { getFormatOptions } from "../../valueFormatter"
+import { getDefaultFormat } from "../../valueFormatter"
+import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+
+export interface ExprItemEditorComponentProps {
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use to get values */
+  dataSource: DataSource
+  /** Expression item to edit */
+  exprItem: HtmlItemExpr
+  /** Called with expr item */
+  onChange: (exprItem: HtmlItemExpr) => void
+  singleRowTable?: string
+}
+
+interface ExprItemEditorComponentState {
+  table: string
+}
+
+// Expression editor that allows changing an expression item
+export default class ExprItemEditorComponent extends React.Component<
+  ExprItemEditorComponentProps,
+  ExprItemEditorComponentState
+> {
+  constructor(props: any) {
+    super(props)
+
+    // Keep table in state as it can be set before the expression
+    this.state = {
+      table: props.exprItem.expr?.table || props.singleRowTable
+    }
+  }
+
+  handleTableChange = (table: any) => {
+    this.setState({ table })
+  }
+
+  handleExprChange = (expr: any) => {
+    const exprItem = _.extend({}, this.props.exprItem, { expr }) as HtmlItemExpr
+    this.props.onChange(exprItem)
+  }
+
+  handleIncludeLabelChange = (value: any) => {
+    const exprItem = _.extend({}, this.props.exprItem, {
+      includeLabel: value,
+      labelText: value ? this.props.exprItem.labelText : undefined
+    }) as HtmlItemExpr
+    this.props.onChange(exprItem)
+  }
+
+  handleLabelTextChange = (ev: any) => {
+    const exprItem = _.extend({}, this.props.exprItem, { labelText: ev.target.value || null }) as HtmlItemExpr
+    this.props.onChange(exprItem)
+  }
+
+  handleFormatChange = (ev: any) => {
+    const exprItem = _.extend({}, this.props.exprItem, { format: ev.target.value }) as HtmlItemExpr
+    this.props.onChange(exprItem)
+  }
+
+  renderFormat() {
+    const exprUtils = new ExprUtils(this.props.schema)
+    const exprType = exprUtils.getExprType(this.props.exprItem.expr)
+    if (!exprType) {
+      return null
+    }
+
+    const formats = getFormatOptions(exprType)
+    if (!formats) {
+      return null
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, "Format"),
+      ": ",
+      R(
+        "select",
+        {
+          value: this.props.exprItem.format != null ? this.props.exprItem.format : getDefaultFormat(exprType),
+          className: "form-select",
+          style: { width: "auto", display: "inline-block" },
+          onChange: this.handleFormatChange
+        },
+        _.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))
+      )
+    )
+  }
+
+  render() {
+    return R(
+      "div",
+      { style: { paddingBottom: 200 } },
+      R(
+        "div",
+        { className: "mb-3" },
+        R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+        ": ",
+        R(TableSelectComponent, {
+          schema: this.props.schema,
+          value: this.state.table,
+          onChange: this.handleTableChange
+        }),
+        R("br")
+      ),
+
+      this.state.table
+        ? R(
+            "div",
+            { className: "mb-3" },
+            R("label", { className: "text-muted" }, "Field"),
+            ": ",
+            R(ExprComponent, {
+              schema: this.props.schema,
+              dataSource: this.props.dataSource,
+              table: this.state.table,
+              types: ["text", "number", "enum", "date", "datetime", "boolean", "enumset", "geometry"],
+              value: this.props.exprItem.expr,
+              aggrStatuses: ["individual", "literal", "aggregate"],
+              onChange: this.handleExprChange
+            })
+          )
+        : undefined,
+
+      this.state.table && this.props.exprItem.expr
+        ? R(
+            "div",
+            { className: "mb-3" },
+            <Checkbox
+              key="includeLabel"
+              value={this.props.exprItem.includeLabel}
+              onChange={this.handleIncludeLabelChange}
+            >
+              Include Label
+            </Checkbox>,
+
+            this.props.exprItem.includeLabel
+              ? R("input", {
+                  key: "labelText",
+                  className: "form-control",
+                  type: "text",
+                  value: this.props.exprItem.labelText || "",
+                  onChange: this.handleLabelTextChange,
+                  placeholder: new ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": "
+                })
+              : undefined
+          )
+        : undefined,
+
+      this.renderFormat()
+    )
+  }
+}

package/src/widgets/text/ExprUpdateModalComponent.ts

@@ -0,0 +1,70 @@
+import React from "react"
+const R = React.createElement
+
+import { DataSource, Schema } from "@mwater/expressions"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import ExprItemEditorComponent from "./ExprItemEditorComponent"
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+
+export interface ExprUpdateModalComponentProps {
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use to get values */
+  dataSource: DataSource
+  singleRowTable?: string
+}
+
+interface ExprUpdateModalComponentState {
+  open: boolean
+  onUpdate: ((exprItem: HtmlItemExpr) => void) | null
+  exprItem: HtmlItemExpr | null
+}
+
+// Modal that displays an expression builder for updating an expression
+export default class ExprUpdateModalComponent extends React.Component<
+  ExprUpdateModalComponentProps,
+  ExprUpdateModalComponentState
+> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      open: false,
+      exprItem: null,
+      onUpdate: null
+    }
+  }
+
+  open(item: any, onUpdate: any) {
+    return this.setState({ open: true, exprItem: item, onUpdate })
+  }
+
+  render() {
+    if (!this.state.open) {
+      return null
+    }
+
+    return R(
+      ActionCancelModalComponent,
+      {
+        actionLabel: "Update",
+        onAction: () => {
+          // Close first to avoid strange effects when mixed with pojoviews
+          this.setState({ open: false }, () => {
+            return this.state.onUpdate!(this.state.exprItem!)
+          })
+        },
+        onCancel: () => this.setState({ open: false }),
+        title: "Update Field",
+        size: "x-large"
+      },
+      R(ExprItemEditorComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        exprItem: this.state.exprItem,
+        onChange: (exprItem: any) => this.setState({ exprItem }),
+        singleRowTable: this.props.singleRowTable
+      })
+    )
+  }
+}

package/src/widgets/text/README.md

@@ -0,0 +1,2 @@
+items: Text widget stores its content as array of items. See ItemsHtmlConverter
+style: "title" for title block. default is "default"