@mwater/visualization 5.0.0 → 5.1.0

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

@@ -5,7 +5,7 @@ const R = React.createElement
 import Color from "color"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import classNames from "classnames"
-import { PivotChartLayout, PivotChartLayoutRow } from "./PivotChartLayout"
+import { PivotChartLayout, PivotChartLayoutCell, PivotChartLayoutRow } from "./PivotChartLayout"
 
 export interface PivotChartLayoutComponentProps {
   layout: PivotChartLayout
@@ -71,7 +71,7 @@ export default class PivotChartLayoutComponent extends React.Component<PivotChar
           layout: this.props.layout,
           rowIndex,
           columnIndex,
-          onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section }) : undefined,
+          onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section ?? null }) : undefined,
           hoverSection: this.props.editable ? this.state.hoverSection : undefined,
           onEditSection: this.props.onEditSection ? this.props.onEditSection.bind(null, cell.section) : undefined,
           onSummarizeSegment: this.props.onSummarizeSegment
@@ -383,7 +383,11 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
   }
 
   // Render an unconfigured cell
-  renderUnconfigured(cell: any) {
+  renderUnconfigured(cell: PivotChartLayoutCell) {
+    if (!cell.section) { 
+      return null
+    }
+    
     return R(
       "span",
       { style: { fontSize: "90%" } },

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

@@ -108,7 +108,7 @@ export default class PivotChartQueryBuilder {
           const columnSegment = columnPath[i]
           query.selects.push({
             type: "select",
-            expr: this.axisBuilder.compileAxis({ axis: columnSegment.valueAxis, tableAlias: "main" }),
+            expr: compileSegmentAxis(columnSegment.valueAxis),
             alias: `c${i}`
           })
           query.groupBy!.push(i + 1 + rowPath.length)

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

@@ -217,7 +217,7 @@ export default class TableChart extends Chart {
     const totalColumns: string[] = []
 
     // For each column
-    for (let colNum = 0 ; colNum < design.columns.length ; colNum++) {
+    for (let colNum = 0; colNum < design.columns.length; colNum++) {
       column = design.columns[colNum]
 
       const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null)
@@ -242,7 +242,7 @@ export default class TableChart extends Chart {
         alias: `c${colNum}`
       })
 
-      if(exprType === 'number' && column.summarize) {
+      if (exprType === 'number' && column.summarize) {
         totalColumns.push(`c${colNum}`)
       }
 
@@ -275,9 +275,9 @@ export default class TableChart extends Chart {
       }
     }
 
-    for (let colNum = 0 ; colNum < design.columns.length ; colNum++) {
+    for (let colNum = 0; colNum < design.columns.length; colNum++) {
       column = design.columns[colNum]
-      if(!column.backgroundColorAxis) continue
+      if (!column.backgroundColorAxis) continue
 
       query.selects.push({
         type: "select",
@@ -320,27 +320,37 @@ export default class TableChart extends Chart {
     const summaryQuery: JsonQLSelectQuery = {
       type: "query",
       selects: design.columns.map((c: any, i) => {
-        if(totalColumns.includes(`c${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}` }
+        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) 
+    // Query for the data in question. 
+    dataSource.performQuery(query, (error: any, data: any) => {
+      if (error) {
+        callback(error)
+      }
+      else if (totalColumns.length > 0) {
+        // Query for the summaries
         dataSource.performQuery(summaryQuery, (error: any, summary: any) => {
-          callback(error, { main: data, summary: summary[0] })
+          if (error) {
+            callback(error)
+          }
+          else {
+            callback(error, { main: data, summary: summary[0] })
+          }
         })
-      else 
-      callback(error, { main: data})
+      }
+      else
+        callback(error, { main: data })
     })
   }
 
   // Create a view element for the chart
   // Options include:
-  //   schema: schema to use
+  // p  schema: schema to use
   //   dataSource: dataSource to use
   //   design: design of the chart
   //   data: results from queries

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

@@ -9,7 +9,7 @@ import { LinkComponent } from "@mwater/expressions-ui"
 import { ExprComponent } from "@mwater/expressions-ui"
 import { FilterExprComponent } from "@mwater/expressions-ui"
 import OrderingsComponent from "./OrderingsComponent"
-import TableSelectComponent from "../../../TableSelectComponent"
+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"

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

@@ -8,12 +8,12 @@ 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 { TableChartColumn, TableChartDesign } from "./TableChart"
 import Color from "color"
 
 export interface TableChartViewComponentProps {
   /** Design of chart */
-  design: any
+  design: TableChartDesign
   /** Data that the table has requested */
   data: any
   /** Schema to use */
@@ -249,7 +249,12 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
       } else {
         // Parse if should be JSON
         if (["image", "imagelist", "geometry", "text[]"].includes(exprType || "") && _.isString(value)) {
-          value = JSON.parse(value)
+          try { 
+            value = JSON.parse(value)
+          } catch (e) {
+            // Ignore as can happen when re-arranging columns
+            value = null
+          }
         }
 
         if (column.backgroundColorAxis && row[`bc${columnIndex}`] != null) {
@@ -272,10 +277,10 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
             node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
             break
           case "date":
-            node = moment(value, "YYYY-MM-DD").format("ll")
+            node = formatValue(exprType, value, column.format)
             break
           case "datetime":
-            node = moment(value, moment.ISO_8601).format("lll")
+            node = formatValue(exprType, value, column.format)
             break
           case "image":
             node = this.renderImage(value.id)

package/src/widgets/text/ExprItemEditorComponent.tsx

@@ -5,7 +5,7 @@ const R = React.createElement
 
 import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
 import { ExprComponent } from "@mwater/expressions-ui"
-import TableSelectComponent from "../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import { getFormatOptions } from "../../valueFormatter"
 import { getDefaultFormat } from "../../valueFormatter"
 import { Checkbox } from "@mwater/react-library/lib/bootstrap"

package/stories/dashboards.js

@@ -155,9 +155,9 @@ class DashboardPopupTest extends React.Component {
 }
 
 
-const ModalWindowComponent = require('react-library/lib/ModalWindowComponent');
-const ui = require('react-library/lib/bootstrap');
-const update = require('react-library/lib/update');
+const ModalWindowComponent = require("@mwater/react-library/lib/ModalWindowComponent");
+const ui = require("@mwater/react-library/lib/bootstrap");
+const update = require("@mwater/react-library/lib/update");
 
 class DashboardPopupComponent extends React.Component {
   static initClass() {

package/src/MWaterContextComponent.ts

@@ -1,144 +0,0 @@
-import PropTypes from "prop-types"
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-
-import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
-import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
-import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
-import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"
-import { Schema } from "@mwater/expressions"
-
-/** Creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
- * and several other context items
- */
-export default class MWaterContextComponent extends React.Component<{
-  apiUrl: string
-  client?: string
-  /**  user id of logged in user */
-  user?: string
-  schema: Schema
-  /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
-  extraTables?: string[]
-  /**  Called when extra tables are changed and schema will be reloaded */
-  onExtraTablesChange?: (extraTables: string[]) => void
-  /**  Override default add layer component. See AddLayerComponent for details */
-  addLayerElementFactory?: any
-}> {
-  static childContextTypes = {
-    tableSelectElementFactory: PropTypes.func, // Call with props of TableSelectComponent
-    addLayerElementFactory: PropTypes.func, // Call with props of AddLayerComponent
-    globalFiltersElementFactory: PropTypes.func, // Call with props { schema, dataSource, filterableTables, globalFilters, onChange, nullIfIrrelevant }.
-    // Displays a component to edit global filters. nullIfIrrelevant causes null element if not applicable to filterableTables
-
-    // Decorates sections (the children element, specifically) in the expression picker
-    decorateScalarExprTreeSectionChildren: PropTypes.func,
-
-    // Function to override initial open state of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
-    // Should return true to set initially open
-    isScalarExprTreeSectionInitiallyOpen: PropTypes.func,
-
-    // Function to override filtering of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
-    // Should return null for default, true to include, false to exclude
-    isScalarExprTreeSectionMatch: PropTypes.func
-  }
-
-  getChildContext() {
-    const context: any = {}
-
-    context.tableSelectElementFactory = (props: any) => {
-      return React.createElement(MWaterTableSelectComponent, {
-        apiUrl: this.props.apiUrl,
-        client: this.props.client,
-        schema: props.schema,
-        user: this.props.user,
-        table: props.value,
-        onChange: props.onChange,
-        extraTables: this.props.extraTables,
-        onExtraTablesChange: this.props.onExtraTablesChange,
-        filter: props.filter,
-        onFilterChange: props.onFilterChange
-      })
-    }
-
-    if (this.props.addLayerElementFactory) {
-      context.addLayerElementFactory = this.props.addLayerElementFactory
-    }
-
-    context.globalFiltersElementFactory = (props: any) => {
-      if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
-        return null
-      }
-
-      return React.createElement(MWaterGlobalFiltersComponent, props)
-    }
-
-    context.decorateScalarExprTreeSectionChildren = (options: any) => {
-      // If related forms section of entities table or assets table
-      if ((options.tableId.match(/^entities\./) || options.tableId.match(/^assets:/)) && options.section.id === "!related_forms") {
-        return R(
-          "div",
-          { key: "_add_related_form_parent" },
-          options.children,
-          R(MWaterAddRelatedFormComponent, {
-            key: "_add_related_form",
-            table: options.tableId,
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.props.schema,
-            onSelect: this.handleAddTable
-          })
-        )
-      }
-
-      // If indicators section of entities table
-      if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-        return R(
-          "div",
-          { key: "_add_related_indicator_parent" },
-          options.children,
-          R(MWaterAddRelatedIndicatorComponent, {
-            key: "_add_related_indicator",
-            table: options.tableId,
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.props.schema,
-            onSelect: this.handleAddTable,
-            filter: options.filter
-          })
-        )
-      } else {
-        return options.children
-      }
-    }
-
-    // Always match indicator section
-    context.isScalarExprTreeSectionMatch = (options: any) => {
-      if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-        return true
-      }
-      return null
-    }
-
-    // Always open indicator section
-    context.isScalarExprTreeSectionInitiallyOpen = (options: any) => {
-      if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-        return true
-      }
-      return null
-    }
-
-    return context
-  }
-
-  handleAddTable = (table: any) => {
-    const extraTables = _.union(this.props.extraTables || [], [table])
-    return this.props.onExtraTablesChange!(extraTables)
-  }
-
-  render() {
-    return this.props.children
-  }
-}

package/src/TableSelectComponent.ts

@@ -1,60 +0,0 @@
-import _ from "lodash"
-import PropTypes from "prop-types"
-import React from "react"
-import * as ui from "./UIComponents"
-import { Expr, ExprUtils, Schema } from "@mwater/expressions"
-const R = React.createElement
-
-export interface TableSelectComponentProps {
-  schema: Schema
-  /** Current table id */
-  value?: string | null
-  /** Newly selected table id */
-  onChange: (tableId: string) => void
-  /** Some table select components (not the default) can also perform filtering. Include these props to enable this */
-  filter?: Expr
-  onFilterChange?: (filter: Expr) => void
-}
-
-export default class TableSelectComponent extends React.Component<TableSelectComponentProps> {
-  static contextTypes = {
-    tableSelectElementFactory: PropTypes.func, // Can be overridden by setting tableSelectElementFactory in context that takes ({ schema, value, onChange, filter, onFilterChange })
-    locale: PropTypes.string, // e.g. "en"
-
-    // Optional list of tables (ids) being used. Some overrides of the table select component may use this to present
-    // an initially short list to select from
-    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
-  }
-
-  render() {
-    if (this.context.tableSelectElementFactory) {
-      return this.context.tableSelectElementFactory(this.props)
-    }
-
-    return React.createElement(ui.ToggleEditComponent, {
-      forceOpen: !this.props.value,
-      label: this.props.value
-        ? ExprUtils.localizeString(
-            this.props.schema.getTable(this.props.value)?.name || "(not found)",
-            this.context.locale
-          )
-        : R("i", null, "Select..."),
-      editor: (onClose: any) => {
-        return React.createElement(ui.OptionListComponent, {
-          hint: "Select source to get data from",
-          items: _.map(
-            _.filter(this.props.schema.getTables(), (table) => !table.deprecated),
-            (table) => ({
-              name: ExprUtils.localizeString(table.name, this.context.locale),
-              desc: ExprUtils.localizeString(table.desc, this.context.locale),
-              onClick: () => {
-                onClose()
-                return this.props.onChange(table.id)
-              }
-            })
-          )
-        })
-      }
-    })
-  }
-}