@mwater/visualization 5.1.0 → 5.3.0

package/src/widgets/charts/pivot/{PivotChartViewComponent.ts → PivotChartViewComponent.tsx}

@@ -1,8 +1,5 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
-import ReactDOM from "react-dom"
-const R = React.createElement
 
 import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
 import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
@@ -13,7 +10,9 @@ import PivotChartLayoutBuilder from "./PivotChartLayoutBuilder"
 import SegmentDesignerComponent from "./SegmentDesignerComponent"
 import IntersectionDesignerComponent from "./IntersectionDesignerComponent"
 import { JsonQLFilter, WidgetScope } from "../../.."
-import { PivotChartDesign } from "./PivotChartDesign"
+import { PivotChartDesign, PivotChartIntersection } from "./PivotChartDesign"
+
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface PivotChartViewComponentProps {
   schema: Schema
@@ -38,16 +37,15 @@ export interface PivotChartViewComponentProps {
 
 interface PivotChartViewComponentState {
   editSegment: any
-  editIntersectionId: any
-  editIntersection: any
+  editIntersectionId: string | null
+  editIntersection: PivotChartIntersection | null
 }
-
 // Displays a pivot chart
 export default class PivotChartViewComponent extends React.Component<
   PivotChartViewComponentProps,
   PivotChartViewComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -106,7 +104,7 @@ export default class PivotChartViewComponent extends React.Component<
 
   handleSaveEditIntersection = () => {
     const intersections = _.clone(this.props.design.intersections)
-    intersections[this.state.editIntersectionId] = this.state.editIntersection
+    intersections[this.state.editIntersectionId!] = this.state.editIntersection!
 
     const design = { ...this.props.design, intersections }
     this.props.onDesignChange!(design)
@@ -160,85 +158,87 @@ export default class PivotChartViewComponent extends React.Component<
   }
 
   renderHeader() {
-    return R(
-      "div",
-      { style: { paddingLeft: 10, paddingRight: 10 } },
-      R(TextComponent, {
-        design: this.props.design.header,
-        onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        exprValues: this.props.data.header || {},
-        width: this.props.width
-      })
+    return (
+      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+        <TextComponent
+          design={this.props.design.header}
+          onDesignChange={this.props.onDesignChange ? this.handleHeaderChange : undefined}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          exprValues={this.props.data.header || {}}
+          width={this.props.width}
+        />
+      </div>
     )
   }
 
   renderFooter() {
-    return R(
-      "div",
-      { style: { paddingLeft: 10, paddingRight: 10 } },
-      R(TextComponent, {
-        design: this.props.design.footer,
-        onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        exprValues: this.props.data.footer || {},
-        width: this.props.width
-      })
+    return (
+      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
+        <TextComponent
+          design={this.props.design.footer}
+          onDesignChange={this.props.onDesignChange ? this.handleFooterChange : undefined}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          exprValues={this.props.data.footer || {}}
+          width={this.props.width}
+        />
+      </div>
     )
   }
 
   renderEditSegmentModal() {
     if (!this.state.editSegment) {
-      return
+      return null
     }
 
     const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
       ? "row"
       : "column"
 
-    return R(
-      ActionCancelModalComponent,
-      {
-        title: `Edit ${segmentType}`,
-        onAction: this.handleSaveEditSegment,
-        onCancel: this.handleCancelEditSegment,
-        size: "large"
-      },
-      R(SegmentDesignerComponent, {
-        segment: this.state.editSegment,
-        table: this.props.design.table,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        segmentType,
-        onChange: (segment: any) => this.setState({ editSegment: segment }),
-        filters: this.props.filters
-      })
+    return (
+      <ActionCancelModalComponent
+        title={`Edit ${segmentType}`}
+        onAction={this.handleSaveEditSegment}
+        onCancel={this.handleCancelEditSegment}
+        size="large"
+      >
+        <SegmentDesignerComponent
+          segment={this.state.editSegment}
+          table={this.props.design.table}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          segmentType={segmentType}
+          onChange={(segment: any) => this.setState({ editSegment: segment })}
+          filters={this.props.filters}
+        />
+      </ActionCancelModalComponent>
     )
   }
 
   renderEditIntersectionModal() {
     if (!this.state.editIntersectionId) {
-      return
+      return null
     }
 
-    return R(
-      ActionCancelModalComponent,
-      {
-        title: "Edit Value",
-        onAction: this.handleSaveEditIntersection,
-        onCancel: this.handleCancelEditIntersection,
-        size: "large"
-      },
-      R(IntersectionDesignerComponent, {
-        intersection: this.state.editIntersection,
-        table: this.props.design.table,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        onChange: (intersection: any) => this.setState({ editIntersection: intersection }),
-        filters: this.props.filters
-      })
+    return (
+      <ActionCancelModalComponent
+        title="Edit Value"
+        onAction={this.handleSaveEditIntersection}
+        onCancel={this.handleCancelEditIntersection}
+        size="large"
+      >
+        <IntersectionDesignerComponent
+          design={this.props.design}
+          intersectionId={this.state.editIntersectionId}
+          intersection={this.state.editIntersection!}
+          table={this.props.design.table}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          onChange={(intersection) => this.setState({ editIntersection: intersection })}
+          filters={this.props.filters}
+        />
+      </ActionCancelModalComponent>
     )
   }
 
@@ -246,31 +246,28 @@ export default class PivotChartViewComponent extends React.Component<
     const layout = new PivotChartLayoutBuilder({ schema: this.props.schema }).buildLayout(
       this.props.design,
       this.props.data,
-      this.context.locale
+      this.context
     )
 
-    return R(
-      "div",
-      { style: { width: this.props.width, height: this.props.height } },
-      this.renderHeader(),
-      this.renderEditSegmentModal(),
-      this.renderEditIntersectionModal(),
-      R(
-        "div",
-        { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } }, // Allow table to scroll since tables have hard minimum widths, Leave room for gear menu
-        R(PivotChartLayoutComponent, {
-          layout,
-          editable: this.props.onDesignChange != null,
-          onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined,
-          onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined,
-          onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined,
-          onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined,
-          onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined,
-          onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined
-        })
-      ),
-
-      this.renderFooter()
+    return (
+      <div style={{ width: this.props.width, height: this.props.height }}>
+        {this.renderHeader()}
+        {this.renderEditSegmentModal()}
+        {this.renderEditIntersectionModal()}
+        <div key="layout" style={{ margin: 5, marginTop: 12, overflowX: "auto", padding: 7 }}>
+          <PivotChartLayoutComponent
+            layout={layout}
+            editable={this.props.onDesignChange != null}
+            onEditSection={this.props.onDesignChange != null ? this.handleEditSection : undefined}
+            onRemoveSegment={this.props.onDesignChange != null ? this.handleRemoveSegment : undefined}
+            onInsertBeforeSegment={this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined}
+            onInsertAfterSegment={this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined}
+            onAddChildSegment={this.props.onDesignChange != null ? this.handleAddChildSegment : undefined}
+            onSummarizeSegment={this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined}
+          />
+        </div>
+        {this.renderFooter()}
+      </div>
     )
   }
 }

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

@@ -229,10 +229,14 @@ export default class TableChart extends Chart {
         // 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] }
-          ]
+          op: "::jsonb",
+          exprs: [{
+            type: "op",
+            op: "ST_AsGeoJSON",
+            exprs: [
+              { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326] }
+            ]
+          }]
         }
       }
 

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

@@ -1,11 +1,9 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
 import uuid from "uuid"
 import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
 import AxisBuilder from "../../../axes/AxisBuilder"
-import { LinkComponent } from "@mwater/expressions-ui"
 import { ExprComponent } from "@mwater/expressions-ui"
 import { FilterExprComponent } from "@mwater/expressions-ui"
 import OrderingsComponent from "./OrderingsComponent"
@@ -18,6 +16,8 @@ import { TableChartColumn, TableChartDesign } from "./TableChart"
 import AxisComponent from "../../../axes/AxisComponent"
 import { Axis } from "../../../axes/Axis"
 
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+
 export interface TableChartDesignerComponentProps {
   design: TableChartDesign
   schema: Schema
@@ -251,7 +251,7 @@ export interface TableChartColumnDesignerComponentProps {
 }
 
 class TableChartColumnDesignerComponent extends React.Component<TableChartColumnDesignerComponentProps> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   // Updates column with the specified changes
   updateColumn(changes: any) {
@@ -346,7 +346,7 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
     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.locale): ""
+    const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context): ""
 
     return R(
       "div",

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

@@ -1,8 +1,6 @@
-import PropTypes from "prop-types"
-import _, { sortBy } from "lodash"
+import _ 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"
@@ -10,6 +8,7 @@ import { formatValue } from "../../../valueFormatter"
 import { Image } from "@mwater/forms/lib/RotationAwareImageComponent"
 import { TableChartColumn, TableChartDesign } from "./TableChart"
 import Color from "color"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface TableChartViewComponentProps {
   /** Design of chart */
@@ -78,7 +77,7 @@ interface TableContentsComponentState {
 }
 
 class TableContentsComponent extends React.Component<TableContentsComponentProps, TableContentsComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: TableContentsComponentProps) {
     super(props)
@@ -155,7 +154,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
     const column = this.props.columns[index]
     //(this.state.sort?.direction === 'asc' ? "":"")
     const text =
-      column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context.locale) : "")
+      column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context) : "")
     return R(
       "th",
       {
@@ -223,7 +222,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
 
   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")
+    return R("a", { href: url, onClick: (e) => {e.stopPropagation()}, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
   }
 
   renderCell(rowIndex: any, columnIndex: any) {
@@ -233,7 +232,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
     const column = this.props.columns[columnIndex]
     // Set background color
     let backgroundColor = "transparent"
-    let textColor = "#212529"
+    let textColor = "inherit"
 
     const exprUtils = new ExprUtils(this.props.schema)
     if (!column.textAxis) {
@@ -244,6 +243,10 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
       // Get value
       let value = row[`c${columnIndex}`]
 
+      if (column.backgroundColorAxis) {
+        backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff"
+      }
+
       if (value == null) {
         node = null
       } else {
@@ -257,14 +260,12 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
           }
         }
 
-        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)
+            if (_.isString(value)) {
+              node = R(Linkify, { properties: { target: "_blank" } }, value)
+            }
             break
           case "number":
           case "geometry":
@@ -272,21 +273,33 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
             break
           case "boolean":
           case "enum":
+            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context)
+            break
           case "enumset":
           case "text[]":
-            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            if (_.isArray(value)) {
+              node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context)
+            }
             break
           case "date":
-            node = formatValue(exprType, value, column.format)
+            if (_.isString(value)) {
+              node = formatValue(exprType, value, column.format)
+            }
             break
           case "datetime":
-            node = formatValue(exprType, value, column.format)
+            if (_.isString(value)) {
+              node = formatValue(exprType, value, column.format)
+            }
             break
           case "image":
-            node = this.renderImage(value.id)
+            if (_.isObject(value) && value.id != null) {
+              node = this.renderImage(value.id)
+            }
             break
           case "imagelist":
-            node = _.map(value, (v: Image) => this.renderImage(v.id))
+            if (_.isArray(value)) {
+              node = _.map(value, (v: Image) => this.renderImage(v.id))
+            }
             break
           default:
             node = "" + value
@@ -298,7 +311,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
       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"
+      textColor = lightness < 0.3 ? "rgb(204,204,204)" : "inherit"
     }
 
     return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node)
@@ -323,7 +336,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
   render() {
     return R(
       "table",
-      { className: "mwater-visualization-table", style: { fontSize: "10pt", marginBottom: 0 } },
+      { className: "mwater-visualization-table", style: { marginBottom: 0 } },
       this.renderHeader(),
       this.renderBody(),
       this.renderFooter()

package/src/widgets/text/TextComponent.tsx

@@ -1,6 +1,4 @@
-import PropTypes from "prop-types"
 import React, { CSSProperties } from "react"
-const R = React.createElement
 import _ from "lodash"
 import RichTextComponent from "../../richtext/RichTextComponent"
 import ExprInsertModalComponent from "./ExprInsertModalComponent"
@@ -8,6 +6,7 @@ import ExprUpdateModalComponent from "./ExprUpdateModalComponent"
 import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter"
 import { TextWidgetDesign } from "./TextWidgetDesign"
 import { DataSource, Schema } from "@mwater/expressions"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface TextComponentProps {
   design: TextWidgetDesign
@@ -29,10 +28,10 @@ export interface TextComponentProps {
 // Text component which is provided with the data it needs, rather than loading it.
 // Used by TextWidgetComponent and also by other components that embed text fields
 export default class TextComponent extends React.Component<TextComponentProps> {
-  static contextTypes = { locale: PropTypes.string }
-  exprInsertModal: ExprInsertModalComponent | null
-  exprUpdateModal: ExprUpdateModalComponent | null
-  editor: RichTextComponent | null
+  static contextType = LocaleContext
+  exprInsertModal: ExprInsertModalComponent | null = null
+  exprUpdateModal: ExprUpdateModalComponent | null = null
+  editor: RichTextComponent | null = null
 
   createItemsHtmlConverter() {
     return new ExprItemsHtmlConverter(
@@ -43,7 +42,7 @@ export default class TextComponent extends React.Component<TextComponentProps> {
       this.props.onDesignChange != null && this.props.singleRowTable != null,
       // Only replace named strings if not editing
       this.props.onDesignChange == null ? this.props.namedStrings : undefined,
-      this.context.locale
+      this.context
     )
   }
 
@@ -81,41 +80,41 @@ export default class TextComponent extends React.Component<TextComponentProps> {
     })
   }
 
-  handleAddExpr = (ev: any) => {
+  handleAddExpr = (ev: React.MouseEvent<HTMLDivElement>) => {
     ev.preventDefault()
     return this.exprInsertModal!.open()
   }
 
   renderExtraPaletteButtons() {
-    return R(
-      "div",
-      { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr },
-      R("i", { className: "fa fa-plus" }),
-      " Field"
+    return (
+      <div key="expr" className="mwater-visualization-text-palette-item" onMouseDown={this.handleAddExpr}>
+        <i className="fa fa-plus" />
+        {" Expression"}
+      </div>
     )
   }
 
   renderModals() {
     return [
-      R(ExprInsertModalComponent, {
-        key: "exprInsertModal",
-        ref: (c: ExprInsertModalComponent | null) => {
+      <ExprInsertModalComponent
+        key="exprInsertModal"
+        ref={(c: ExprInsertModalComponent | null) => {
           this.exprInsertModal = c
-        },
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        onInsert: this.handleInsertExpr,
-        singleRowTable: this.props.singleRowTable
-      }),
-      R(ExprUpdateModalComponent, {
-        key: "exprUpdateModal",
-        ref: (c: ExprUpdateModalComponent | null) => {
+        }}
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        onInsert={this.handleInsertExpr}
+        singleRowTable={this.props.singleRowTable}
+      />,
+      <ExprUpdateModalComponent
+        key="exprUpdateModal"
+        ref={(c: ExprUpdateModalComponent | null) => {
           this.exprUpdateModal = c
-        },
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        singleRowTable: this.props.singleRowTable
-      })
+        }}
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        singleRowTable={this.props.singleRowTable}
+      />
     ]
   }
 
@@ -125,27 +124,26 @@ export default class TextComponent extends React.Component<TextComponentProps> {
 
   render() {
     const style: CSSProperties = {
-      position: "relative"
+      position: "relative",
+      width: this.props.width,
+      height: this.props.height
     }
 
-    style.width = this.props.width
-    style.height = this.props.height
-
-    return R(
-      "div",
-      null,
-      this.renderModals(),
-      R(RichTextComponent, {
-        ref: this.refRichTextComponent,
-        className: `mwater-visualization-text-widget-style-${this.props.design.style || "default"}`,
-        style,
-        items: this.props.design.items,
-        onItemsChange: this.props.onDesignChange ? this.handleItemsChange : undefined,
-        onItemClick: this.handleItemClick,
-        itemsHtmlConverter: this.createItemsHtmlConverter(),
-        includeHeadings: this.props.design.style === "default" || !this.props.design.style,
-        extraPaletteButtons: this.renderExtraPaletteButtons()
-      })
+    return (
+      <div>
+        {this.renderModals()}
+        <RichTextComponent
+          ref={this.refRichTextComponent}
+          className={`mwater-visualization-text-widget-style-${this.props.design.style || "default"}`}
+          style={style}
+          items={this.props.design.items}
+          onItemsChange={this.props.onDesignChange ? this.handleItemsChange : undefined}
+          onItemClick={this.handleItemClick}
+          itemsHtmlConverter={this.createItemsHtmlConverter()}
+          includeHeadings={this.props.design.style === "default" || !this.props.design.style}
+          extraPaletteButtons={this.renderExtraPaletteButtons()}
+        />
+      </div>
     )
   }
 }

package/src/widgets/text/TextWidget.ts

@@ -43,7 +43,8 @@ export default class TextWidget extends Widget {
       height: options.height,
       singleRowTable: options.singleRowTable,
       namedStrings: options.namedStrings,
-      ref: options.widgetRef
+      ref: options.widgetRef,
+      refreshKey: options.refreshKey
     })
   }
 
@@ -160,7 +161,7 @@ export default class TextWidget extends Widget {
     }
 
     // Map of value by id
-    const exprValues = {}
+    const exprValues: { [key: string]: any } = {}
 
     return async.each(
       this.getExprItems(design.items),
@@ -204,7 +205,11 @@ export default class TextWidget extends Widget {
   }
 
   // Get a list of table ids that can be filtered on
-  getFilterableTables(design: TextWidgetDesign, schema: Schema) {
+  getFilterableTables(design: TextWidgetDesign | undefined, schema: Schema) {
+    if (!design) {
+      return []
+    }
+    
     const exprItems = this.getExprItems(design.items)
 
     let filterableTables = _.map(exprItems, (exprItem) => (exprItem.expr as OpExpr)?.table)