@mwater/visualization 5.4.5 → 5.5.0

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

@@ -0,0 +1,422 @@
+import _ from "lodash"
+import React from "react"
+import uuid from "uuid"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import { ExprComponent } from "@mwater/expressions-ui"
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import OrderingsComponent from "./OrderingsComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
+import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { getFormatOptions } from "../../../valueFormatter"
+import { getDefaultFormat } from "../../../valueFormatter"
+import { TableChartColumn, TableChartDesign } from "./TableChart"
+import AxisComponent from "../../../axes/AxisComponent"
+import { Axis } from "../../../axes/Axis"
+
+import { LocaleContext } from "@mwater/expressions-ui"
+
+export interface TableChartDesignerComponentProps {
+  design: TableChartDesign
+  schema: Schema
+  dataSource: DataSource
+  onDesignChange: (design: TableChartDesign) => void
+}
+
+export default class TableChartDesignerComponent extends React.Component<TableChartDesignerComponentProps> {
+  // Updates design with the specified changes
+  updateDesign(changes: Partial<TableChartDesign>) {
+    const design = _.extend({}, this.props.design, changes) as TableChartDesign
+    this.props.onDesignChange(design)
+  }
+
+  handleTitleTextChange = (ev: any) => {
+    this.updateDesign({ titleText: ev.target.value })
+  }
+  handleTableChange = (table: any) => {
+    this.updateDesign({ table })
+  }
+  handleFilterChange = (filter: any) => {
+    this.updateDesign({ filter })
+  }
+  handleOrderingsChange = (orderings: any) => {
+    this.updateDesign({ orderings })
+  }
+  handleLimitChange = (limit: any) => {
+    this.updateDesign({ limit })
+  }
+
+  handleColumnChange = (index: any, column: any) => {
+    const columns = this.props.design.columns.slice()
+    columns[index] = column
+    this.updateDesign({ columns })
+  }
+
+  handleRemoveColumn = (index: any) => {
+    const columns = this.props.design.columns.slice()
+    columns.splice(index, 1)
+    this.updateDesign({ columns })
+  }
+
+  handleAddColumn = () => {
+    const columns = this.props.design.columns.slice()
+    columns.push({ id: uuid() })
+    this.updateDesign({ columns })
+  }
+
+  renderTable() {
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><i className="fa fa-database" /> {T`Data Source`}</label>
+        : <TableSelectComponent
+          schema={this.props.schema}
+          value={this.props.design.table}
+          onChange={this.handleTableChange}
+          filter={this.props.design.filter}
+          onFilterChange={this.handleFilterChange}
+        />
+      </div>
+    )
+  }
+
+  renderTitle() {
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Title`}</label>
+        <input
+          type="text"
+          className="form-control form-control-sm"
+          value={this.props.design.titleText}
+          onChange={this.handleTitleTextChange}
+          placeholder={T`Untitled`}
+        />
+      </div>
+    )
+  }
+
+  renderColumn = (column: any, index: any, connectDragSource: any, connectDragPreview: any, connectDropTarget: any) => {
+    const style = {
+      borderTop: "solid 1px #EEE",
+      paddingTop: 10,
+      paddingBottom: 10
+    }
+
+    return connectDragPreview(
+      connectDropTarget(
+        <div key={index} style={style}>
+          <TableChartColumnDesignerComponent
+            design={this.props.design}
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            index={index}
+            onChange={this.handleColumnChange.bind(null, index)}
+            onRemove={this.handleRemoveColumn.bind(null, index)}
+            connectDragSource={connectDragSource}
+          />
+        </div>
+      )
+    )
+  }
+
+  handleReorder = (map: any) => {
+    return this.updateDesign({ columns: map })
+  }
+
+  renderColumns() {
+    if (!this.props.design.table) {
+      return
+    }
+
+    return (
+      <div>
+        <ReorderableListComponent
+          items={this.props.design.columns}
+          onReorder={this.handleReorder}
+          renderItem={this.renderColumn}
+          getItemId={(item: TableChartColumn) => item.id}
+        />
+        <button className="btn btn-secondary btn-sm" type="button" onClick={this.handleAddColumn}>
+          <span className="fas fa-plus" /> {T`Add Column`}
+        </button>
+      </div>
+    )
+  }
+  // return R 'div', className: "form-group",
+  //   _.map(@props.design.columns, (column, i) => @renderColumn(i))
+  //
+
+  renderOrderings() {
+    // If no table, hide
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><span className="fas fa-sort-amount-down" /> {T`Ordering`}</label>
+        <div style={{ marginLeft: 8 }}>
+          <OrderingsComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            orderings={this.props.design.orderings}
+            onOrderingsChange={this.handleOrderingsChange}
+            table={this.props.design.table}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderFilter() {
+    // If no table, hide
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><span className="fas fa-filter" /> {T`Filters`}</label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={this.props.design.table}
+            value={this.props.design.filter}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderLimit() {
+    // If no table, hide
+    if (!this.props.design.table) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Maximum Number of Rows (up to 1000)`}</label>
+        <div style={{ marginLeft: 8 }}>
+          <ui.NumberInput
+            value={this.props.design.limit}
+            onChange={this.handleLimitChange}
+            decimal={false}
+            placeholder="1000"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderTable()}
+        {this.renderColumns()}
+        {this.props.design.table ? <hr /> : undefined}
+        {this.renderOrderings()}
+        {this.renderFilter()}
+        {this.renderLimit()}
+        <hr />
+        {this.renderTitle()}
+      </div>
+    )
+  }
+}
+
+export interface TableChartColumnDesignerComponentProps {
+  design: TableChartDesign
+  schema: Schema
+  dataSource: DataSource
+  index: number
+  onChange: any
+  onRemove: any
+  connectDragSource: any
+}
+
+class TableChartColumnDesignerComponent extends React.Component<TableChartColumnDesignerComponentProps> {
+  static contextType = LocaleContext
+
+  // Updates column with the specified changes
+  updateColumn(changes: any) {
+    const column = _.extend({}, this.props.design.columns[this.props.index], changes)
+    return this.props.onChange(column)
+  }
+
+  updateTextAxis(changes: any) {
+    const textAxis = _.extend({}, this.props.design.columns[this.props.index].textAxis, changes)
+    return this.updateColumn({ textAxis })
+  }
+
+  handleExprChange = (expr: any) => {
+    return this.updateTextAxis({ expr })
+  }
+  handleHeaderTextChange = (ev: any) => {
+    return this.updateColumn({ headerText: ev.target.value })
+  }
+  handleAggrChange = (aggr: any) => {
+    return this.updateTextAxis({ aggr })
+  }
+  handleFormatChange = (ev: any) => {
+    return this.updateColumn({ format: ev.target.value })
+  }
+
+  renderRemove() {
+    if (this.props.design.columns.length > 1) {
+      return (
+        <button className="btn btn-sm btn-link float-end" type="button" onClick={this.props.onRemove}>
+          <span className="fas fa-times" />
+        </button>
+      )
+    }
+    return null
+  }
+
+  renderExpr() {
+    const column = this.props.design.columns[this.props.index]
+
+    const title = T`Value`
+
+    return (
+      <div>
+        <label className="text-muted">{title}</label>
+        : <ExprComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.design.table}
+          value={column.textAxis ? column.textAxis.expr : null}
+          onChange={this.handleExprChange}
+          aggrStatuses={["literal", "individual", "aggregate"]}
+        />
+      </div>
+    )
+  }
+
+  renderFormat() {
+    const column = this.props.design.columns[this.props.index]
+
+    // Get type
+    const exprUtils = new ExprUtils(this.props.schema)
+    const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null)
+    if (!exprType) {
+      return null
+    }
+
+    const formats = getFormatOptions(exprType)
+    if (!formats) {
+      return null
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Format`}</label>
+        : <select
+          value={column.format != null ? column.format : getDefaultFormat(exprType)}
+          className="form-select"
+          style={{ width: "auto", display: "inline-block" }}
+          onChange={this.handleFormatChange}
+        >
+          {_.map(formats, (format) => <option key={format.value} value={format.value}>{format.label}</option>)}
+        </select>
+      </div>
+    )
+  }
+
+  renderHeader() {
+    const column = this.props.design.columns[this.props.index]
+
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+    const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context): ""
+
+    return (
+      <div>
+        <label className="text-muted">{T`Header`}</label>
+        : <input
+          type="text"
+          className="form-control form-control-sm"
+          style={{ display: "inline-block", width: "15em" }}
+          value={column.headerText}
+          onChange={this.handleHeaderTextChange}
+          placeholder={placeholder}
+        />
+      </div>
+    )
+  }
+
+  renderSummarize() {
+    const column = this.props.design.columns[this.props.index]
+    const exprUtils = new ExprUtils(this.props.schema)
+    const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null)
+    if (!exprType || exprType !== 'number') {
+      return null
+    }
+
+    return (
+      <div>
+        <ui.Checkbox value={column.summarize} inline={true} onChange={(summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' })}>{T`Summarize`}</ui.Checkbox>
+        {column.summarize ? 
+          <div>
+            <label className="text-muted">{T`Summary Type`}</label>
+            : <ui.Select
+              inline={true}
+              value={column.summaryType}
+              onChange={(summaryType) => this.updateColumn({ summaryType })}
+              options={[{value: 'avg', label: T`Average`}, {value: 'sum', label: T`Sum`}, {value: 'min', label: T`Minimum`}, {value: 'max', label: T`Maximum`}]}
+            />
+          </div> 
+        : undefined}
+      </div>
+    )
+  }
+
+  renderBackgroundColorAxis() {
+    const column = this.props.design.columns[this.props.index]
+
+    if(!column.textAxis) return null
+
+    return (
+      <ui.CollapsibleSection
+        label={T`Background color by data`}
+        labelMuted={true}
+      >
+        <AxisComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.design.table}
+          types={["enum", "text", "boolean", "date"]}
+          value={column.backgroundColorAxis}
+          onChange={(backgroundColorAxis: Axis | null) => this.updateColumn({ backgroundColorAxis })}
+          showColorMap={true}
+          aggrNeed="optional"
+        />
+      </ui.CollapsibleSection>
+    )
+  }
+
+  render() {
+    const iconStyle = {
+      cursor: "move",
+      marginRight: 8,
+      opacity: 0.5,
+      fontSize: 12,
+      height: 20
+    }
+    return (
+      <div>
+        {this.props.connectDragSource(<i className="fa fa-bars" style={iconStyle} />)}
+        {this.renderRemove()}
+        <label>{T`Column ${this.props.index + 1}`}</label>
+        <div style={{ marginLeft: 5 }}>
+          {this.renderExpr()}
+          {this.renderFormat()}
+          {this.renderHeader()}
+          {this.renderSummarize()}
+          {this.renderBackgroundColorAxis()}
+        </div>
+      </div>
+    )
+  }
+}

package/src/widgets/charts/table/{TableChartViewComponent.ts → TableChartViewComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import { default as Linkify } from "react-linkify"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
@@ -38,18 +37,18 @@ export default class TableChartViewComponent extends React.Component<TableChartV
       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
-      })
+    return (
+      <div style={style} className="overflow-auto-except-print">
+        <div style={{ fontWeight: "bold", textAlign: "center" }}>{this.props.design.titleText}</div>
+        <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}
+        />
+      </div>
     )
   }
 }
@@ -155,32 +154,30 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
     //(this.state.sort?.direction === 'asc' ? "":"")
     const text =
       column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context) : "")
-    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
+    return (
+      <th
+        key={index}
+        style={{ cursor: "pointer" }}
+        onClick={() => this.handleSort(index)}
+      >
+        {text}
+        {this.state.sort?.column === index ? (
+          <span
+            style={{ marginLeft: 10 }}
+            className={`fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}`}
+          />
+        ) : undefined}
+      </th>
     )
   }
 
   renderHeader() {
-    return R(
-      "thead",
-      { key: "head" },
-      R(
-        "tr",
-        { key: "head" },
-        _.map(this.props.columns, (column, i) => this.renderHeaderCell(i))
-      )
+    return (
+      <thead key="head">
+        <tr key="head">
+          {_.map(this.props.columns, (column, i) => this.renderHeaderCell(i))}
+        </tr>
+      </thead>
     )
   }
 
@@ -209,20 +206,28 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
       return null
     }
 
-    return R(
-      "tfoot",
-      { key: "foot" },
-      R(
-        "tr",
-        { key: "foot" },
-        _.map(this.props.columns, (column, i) => R("th", { key: i }, this.renderFooterCell(i)))
-      )
+    return (
+      <tfoot key="foot">
+        <tr key="foot">
+          {_.map(this.props.columns, (column, i) => <th key={i}>{this.renderFooterCell(i)}</th>)}
+        </tr>
+      </tfoot>
     )
   }
 
   renderImage(id: any) {
     const url = this.props.dataSource.getImageUrl(id)
-    return R("a", { href: url, onClick: (e) => {e.stopPropagation()}, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T`Image`)
+    return (
+      <a 
+        href={url} 
+        onClick={(e) => {e.stopPropagation()}} 
+        key={id} 
+        target="_blank" 
+        style={{ paddingLeft: 5, paddingRight: 5 }}
+      >
+        {T`Image`}
+      </a>
+    )
   }
 
   renderCell(rowIndex: any, columnIndex: any) {
@@ -264,7 +269,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
         switch (exprType) {
           case "text":
             if (_.isString(value)) {
-              node = R(Linkify, { properties: { target: "_blank" } }, value)
+              node = <Linkify properties={{ target: "_blank" }}>{value}</Linkify>
             }
             break
           case "number":
@@ -314,32 +319,32 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
       textColor = lightness < 0.3 ? "rgb(204,204,204)" : "inherit"
     }
 
-    return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node)
+    return <td key={columnIndex} style={{ backgroundColor, color: textColor }}>{node}</td>
   }
 
   renderRow(index: any) {
-    return R(
-      "tr",
-      { key: index, onClick: this.handleRowClick.bind(null, index) },
-      _.map(this.props.columns, (column, i) => this.renderCell(index, i))
+    return (
+      <tr key={index} onClick={this.handleRowClick.bind(null, index)}>
+        {_.map(this.props.columns, (column, i) => this.renderCell(index, i))}
+      </tr>
     )
   }
 
   renderBody() {
-    return R(
-      "tbody",
-      { key: "body" },
-      _.map(this.state.data, (row, i) => this.renderRow(i))
+    return (
+      <tbody key="body">
+        {_.map(this.state.data, (row, i) => this.renderRow(i))}
+      </tbody>
     )
   }
 
   render() {
-    return R(
-      "table",
-      { className: "mwater-visualization-table", style: { marginBottom: 0 } },
-      this.renderHeader(),
-      this.renderBody(),
-      this.renderFooter()
+    return (
+      <table className="mwater-visualization-table" style={{ marginBottom: 0 }}>
+        {this.renderHeader()}
+        {this.renderBody()}
+        {this.renderFooter()}
+      </table>
     )
   }
 }