@mwater/visualization 5.1.0 → 5.2.0

package/src/axes/Axis.ts

@@ -5,37 +5,19 @@ import { Expr } from "@mwater/expressions"
 An axis is an expression with optional aggregation, transform and color mapping
 In ggplot2 parlance, an "aesthetic"
 
-It contains:
- expr: expression
- aggr: DEPRECATED: optional aggregation (e.g. sum)
- xform: optional transformation to be applied. object with `type` field. See below
- colorMap: optional array of color mappings. See below
- excludedValues: Array of post-xform values to exclude when displaying. 
- format: optional d3-format format for numeric values. Default if null is ","
-
-## Xforms
-
-types: 
-
-
 */
 export interface Axis {
+  /** Expression to be displayed on axis */
   expr: Expr
-  /**
-   * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
-   * `date`: convert to complete date e.g. `2015-02-08`. type date
-   * `year`: year only e.g. `2015-01-01`. type date
-   * `yearmonth`: year and month only e.g. `2015-02-01`. type date
-   * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
-   * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
-   * `month`: month only e.g. `02`. type enum
-   * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
-   * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
-   * `floor`: convert to floor. type enum
+
+  /** Optional transformation to be applied. If a date is used, for example, it's generally
+   * better to use a transform to convert to a year or month rather than creating an expression.
    */
   xform?: AxisXform
 
+  /** optional array of color mappings */
   colorMap?: ColorMap
+
   /** optional array of category values which define the order in which categories should be rendered */
   drawOrder?: any[]
 
@@ -45,12 +27,16 @@ export interface Axis {
   /** optional string for null category */
   nullLabel?: string
 
+  /** Array of post-xform values to exclude when displaying. */
   excludedValues?: any[]
+
+  /** optional d3-format format for numeric values. Default if null is "," */
   format?: string
 
-  /** @deprecated */
+  /** @deprecated optional aggregation (e.g. sum) */
   aggr?: string
 }
+
 /**
  * Color map
  * Array of { value: post-transform value of expression, color: html color }
@@ -70,6 +56,19 @@ export interface AxisCategory {
 }
 
 export interface AxisXform {
+  /**
+   * Type of transformation
+   * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
+   * `date`: convert to complete date e.g. `2015-02-08`. type date
+   * `year`: year only e.g. `2015-01-01`. type date
+   * `yearmonth`: year and month only e.g. `2015-02-01`. type date
+   * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
+   * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
+   * `month`: month only e.g. `02`. type enum
+   * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
+   * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
+   * `floor`: convert to floor. type enum
+   */
   type: "bin" | "date" | "year" | "yearmonth" | "month" | "week" | "ranges" | "yearweek" | "yearquarter" | "floor"
   numBins?: number
   min?: number

package/src/axes/AxisBuilder.ts

@@ -12,6 +12,7 @@ import { default as produce } from "immer"
 import { formatValue } from "../valueFormatter"
 import { Axis, AxisCategory } from "./Axis"
 import { JsonQLExpr, JsonQLSelectQuery } from "@mwater/jsonql"
+import dayjs from '../dayjs'
 
 const xforms: { type: string; input: LiteralType; output: LiteralType }[] = [
   { type: "bin", input: "number", output: "enum" },
@@ -913,10 +914,9 @@ export default class AxisBuilder {
         if (values.length === 0) {
           return [noneCategory]
         }
-
         if (options.onlyValuesPresent) {
           // Sort and take only present
-          categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: moment(value, "YYYY-MM-DD").format("ll") }))
+          categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: formatValue("date", value, axis.format)}))
   
           if (hasNone) {
             categories.push(noneCategory)
@@ -930,12 +930,12 @@ export default class AxisBuilder {
         max = values.sort().slice(-1)[0]
 
         // Use moment to get range
-        current = moment(min, "YYYY-MM-DD")
-        end = moment(max, "YYYY-MM-DD")
+        current = dayjs(min)
+        end = dayjs(max)
         categories = []
         while (!current.isAfter(end)) {
-          categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("ll") })
-          current.add(1, "days")
+          categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(axis.format ?? "ll") })
+          current = current.add(1, "days")
           if (categories.length >= 1000) {
             break
           }
@@ -1055,9 +1055,10 @@ export default class AxisBuilder {
           _.map(value as string[], (v, i) => R("div", { key: i }, v))
         )
       case "date":
-        return moment(value, moment.ISO_8601).format("ll")
+        console.log(axis)
+        return formatValue(type, value, axis.format)
       case "datetime":
-        return moment(value, moment.ISO_8601).format("lll")
+        return formatValue(type, value, axis.format)
     }
 
     return "" + value

package/src/dashboards/DashboardComponent.tsx

@@ -237,45 +237,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     )
   }
 
-  renderStyleItem(style: any) {
-    const isActive = (this.props.design.style || "default") === style
-
-    const content = (() => {
-      switch (style) {
-        case "default":
-          return [
-            R("h4", { key: "name", className: "list-group-item-heading" }, "Classic Dashboard"),
-            R("p", { key: "description", className: "" }, "Ideal for data display with minimal text")
-          ]
-        case "greybg":
-          return [
-            R("h4", { key: "name", className: "list-group-item-heading" }, "Framed Dashboard"),
-            R("p", { key: "description", className: "" }, "Each widget is white on a grey background")
-          ]
-        case "story":
-          return [
-            R("h4", { key: "name", className: "list-group-item-heading" }, "Story"),
-            R(
-              "p",
-              { key: "description", className: "" },
-              "Ideal for data-driven storytelling with lots of text. Responsive and mobile-friendly"
-            )
-          ]
-      }
-      return null
-    })()
-
-    return R(
-      "a",
-      {
-        key: style,
-        className: `list-group-item ${isActive ? "active" : ""}`,
-        onClick: this.handleStyleChange.bind(null, style)
-      },
-      content
-    )
-  }
-
   renderStyle() {
     return R(
       "button",
@@ -379,7 +340,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       locks: this.props.quickfilterLocks,
       filters: this.getCompiledFilters(),
       hideTopBorder: this.props.hideTitleBar,
-      onHide: () => this.setState({ hideQuickfilters: true })
+      // Don't hide if title bar is hidden as it can't be shown again
+      onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
     })
   }
 

package/src/dashboards/DashboardDesign.ts

@@ -1,7 +1,7 @@
-import { JsonQLFilter } from "../JsonQLFilter"
 import { Quickfilter } from "../quickfilter/Quickfilter"
-import { LiteralType, Expr } from "@mwater/expressions"
+import { Expr } from "@mwater/expressions"
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions"
+import { GlobalFilter } from "../GlobalFilter"
 
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
@@ -35,23 +35,3 @@ export interface DashboardDesign {
   /** array of global filters. See below. */
   globalFilters?: GlobalFilter[]
 }
-
-/** Global Filters:
-
-Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
-and the default (non-mWater) dashboard applies them but does not allow editing.
-
-*/
-export interface GlobalFilter {
-  /** id of column to filter */
-  columnId: string
-
-  /** type of column to filter (to ensure that consistent) */
-  columnType: LiteralType
-
-  /** op of expression for filtering */
-  op: string
-
-  /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
-  exprs: Expr[]
-}

package/src/dashboards/DashboardViewComponent.ts

@@ -14,7 +14,7 @@ import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent"
 import { getLayoutOptions } from "./layoutOptions"
 import { WidgetComponent } from "./WidgetComponent"
 import { DashboardDataSource, DashboardDesign, JsonQLFilter } from ".."
-import { getMapTilerApiKey, setMapTilerApiKey } from "../maps/vectorMaps"
+import { setPrintingModeEnabled } from "../maps/vectorMaps"
 
 export interface DashboardViewComponentProps {
   /** schema to use */
@@ -147,10 +147,9 @@ export default class DashboardViewComponent extends React.Component<
 
   // Call to print the dashboard
   print = async () => {
-    // Temporarily disable vector maps as WebGL is not supported in print mode
-    const mapTilerAPIKey = getMapTilerApiKey()
+    // Temporarily enable print mode for vector maps
     try {
-      setMapTilerApiKey("")
+      setPrintingModeEnabled(true)
 
       // Create element at 1080 wide (use as standard printing width)
       const elem = R(
@@ -162,7 +161,7 @@ export default class DashboardViewComponent extends React.Component<
       const printer = new ReactElementPrinter()
       await printer.print(elem, { delay: 5000 })
     } finally {
-      setMapTilerApiKey(mapTilerAPIKey)
+      setPrintingModeEnabled(false)
     }
   }
 

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -137,7 +137,7 @@ export function LayoutOptionsComponent(props: {
           <div style={{ height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
             <div key="quickfilters">
               {layoutOptions.hideQuickfiltersWidth == null ||
-              sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+                sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
                 ? props.quickfiltersView
                 : null}
             </div>
@@ -196,9 +196,11 @@ function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: Dashboar
 
   return (
     <FormGroup label="Theme">
-      {renderStyleItem("default")}
-      {renderStyleItem("greybg")}
-      {renderStyleItem("story")}
+      <div className="list-group">
+        {renderStyleItem("default")}
+        {renderStyleItem("greybg")}
+        {renderStyleItem("story")}
+      </div>
     </FormGroup>
   )
 }

package/src/dashboards/SettingsModalComponent.tsx

@@ -0,0 +1,170 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import update from "update-object"
+import { languages } from "../languages"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { default as ReactSelect } from "react-select"
+import * as DashboardUtils from "./DashboardUtils"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
+import FiltersDesignerComponent from "../FiltersDesignerComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { DashboardDesign } from "./DashboardDesign"
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
+
+export interface SettingsModalComponentProps {
+  onDesignChange: any
+  schema: Schema
+  dataSource: DataSource
+}
+
+interface SettingsModalComponentState {
+  design: DashboardDesign | null
+}
+
+// Popup with settings for dashboard
+export default class SettingsModalComponent extends React.Component<
+  SettingsModalComponentProps,
+  SettingsModalComponentState
+> {
+  constructor(props: SettingsModalComponentProps) {
+    super(props)
+    this.state = {
+      design: null // Set when being edited
+    }
+  }
+
+  show(design: any) {
+    return this.setState({ design })
+  }
+
+  handleSave = () => {
+    this.props.onDesignChange(this.state.design)
+    return this.setState({ design: null })
+  }
+
+  handleCancel = () => {
+    return this.setState({ design: null })
+  }
+  handleDesignChange = (design: any) => {
+    return this.setState({ design })
+  }
+
+  handleFiltersChange = (filters: any) => {
+    const design = _.extend({}, this.state.design, { filters })
+    return this.handleDesignChange(design)
+  }
+
+  handleGlobalFiltersChange = (globalFilters: any) => {
+    const design = _.extend({}, this.state.design, { globalFilters })
+    return this.handleDesignChange(design)
+  }
+
+  render() {
+    // Don't show if not editing
+    if (!this.state.design) {
+      return null
+    }
+
+    // Get filterable tables
+    const filterableTables = DashboardUtils.getFilterableTables(this.state.design, this.props.schema)
+
+    const localeOptions = _.map(languages, (language) => {
+      return {
+        value: language.code,
+        label: language.en + " (" + language.name + ")"
+      }
+    })
+
+    return (
+      <ActionCancelModalComponent
+        size="large"
+        onCancel={this.handleCancel}
+        onAction={this.handleSave}
+      >
+        <div style={{ paddingBottom: 200 }}>
+          <h4>Quick Filters</h4>
+          <div className="text-muted">
+            Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.
+          </div>
+
+          {filterableTables.length > 0 ? (
+            <QuickfiltersDesignComponent
+              design={this.state.design.quickfilters || []}
+              onDesignChange={(design: any) =>
+                this.handleDesignChange(update(this.state.design, { quickfilters: { $set: design } }))
+              }
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              tables={filterableTables}
+            />
+          ) : (
+            "Nothing to quickfilter. Add widgets to the dashboard"
+          )}
+
+          <h4 style={{ paddingTop: 10 }}>Filters</h4>
+          <div className="text-muted">
+            Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.
+          </div>
+
+          {filterableTables.length > 0 ? (
+            <FiltersDesignerComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              filters={this.state.design.filters}
+              onFiltersChange={this.handleFiltersChange}
+              filterableTables={filterableTables}
+            />
+          ) : (
+            "Nothing to filter. Add widgets to the dashboard"
+          )}
+
+          <GlobalFiltersElementFactoryContext.Consumer>
+            {globalFiltersElementFactory =>
+              globalFiltersElementFactory ? (
+                <div>
+                  <h4 style={{ paddingTop: 10 }}>Global Filters</h4>
+                  {globalFiltersElementFactory({
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    filterableTables,
+                    globalFilters: this.state.design!.globalFilters || [],
+                    onChange: this.handleGlobalFiltersChange
+                  })}
+                </div>
+              ) : undefined
+            }
+          </GlobalFiltersElementFactoryContext.Consumer>
+
+          <h4 style={{ paddingTop: 10 }}>Language</h4>
+          <div className="text-muted">
+            Controls the preferred language of widgets and uses specified language when available
+          </div>
+
+          <ReactSelect
+            value={_.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null}
+            options={localeOptions}
+            onChange={(locale: any) =>
+              this.handleDesignChange(update(this.state.design, { locale: { $set: locale.value } }))
+            }
+          />
+
+          {this.state.design.implicitFiltersEnabled && (
+            <>
+              <h4 style={{ paddingTop: 10 }}>Advanced</h4>
+              <ui.Checkbox
+                value={this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true}
+                onChange={(value: boolean) =>
+                  this.handleDesignChange(update(this.state.design, { implicitFiltersEnabled: { $set: value } }))
+                }
+              >
+                Enable Implicit Filtering (leave unchecked for new dashboards)
+              </ui.Checkbox>
+            </>
+          )}
+        </div>
+      </ActionCancelModalComponent>
+    )
+  }
+}

package/src/datagrids/DatagridDataSource.ts

@@ -2,28 +2,22 @@ import { Row } from "@mwater/expressions"
 import { DatagridDesign, JsonQLFilter } from ".."
 import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
 
-export default class DatagridDataSource {
+export default interface DatagridDataSource {
   /** Gets the rows specified */
   getRows(
     design: DatagridDesign,
     offset: number,
     limit: number,
     filters: JsonQLFilter[] | undefined,
-    callback: (error: any, rows: Row[]) => void
-  ): void {
-    throw new Error("Not implemented")
-  }
+    callback: (error: any, rows?: Row[]) => void
+  ): void
 
   countRows(
     design: DatagridDesign,
     filters: JsonQLFilter[] | undefined,
-    callback: (error: any, numRows: number) => void
-  ): void {
-    throw new Error("Not implemented")
-  }
+    callback: (error: any, numRows?: number) => void
+  ): void
 
   /** Gets the quickfilters data source */
-  getQuickfiltersDataSource(): QuickfiltersDataSource {
-    throw new Error("Not implemented")
-  }
+  getQuickfiltersDataSource(): QuickfiltersDataSource
 }

package/src/datagrids/DatagridDesignerComponent.tsx

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { useMemo } from "react"
 const R = React.createElement
@@ -22,6 +21,7 @@ import { getFormatOptions } from "../valueFormatter"
 import { getDefaultFormat } from "../valueFormatter"
 import { DatagridDesignColumn } from "./DatagridDesign"
 import { DatagridDesign } from ".."
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
 
 export interface DatagridDesignerComponentProps {
   /** schema to use */
@@ -36,8 +36,6 @@ export interface DatagridDesignerComponentProps {
 
 // Designer for the datagrid. Currenly allows only single-table designs (no subtable rows)
 export default class DatagridDesignerComponent extends React.Component<DatagridDesignerComponentProps> {
-  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
-
   handleTableChange = (table: any) => {
     const design = {
       table,
@@ -93,20 +91,24 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
               value: this.props.design.filter,
               onChange: this.handleFilterChange
             }),
-            this.context.globalFiltersElementFactory
-              ? R(
-                  "div",
-                  { style: { marginTop: 20 } },
-                  this.context.globalFiltersElementFactory({
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    filterableTables: [this.props.design.table],
-                    globalFilters: this.props.design.globalFilters,
-                    onChange: this.handleGlobalFiltersChange,
-                    nullIfIrrelevant: true
-                  })
-                )
-              : undefined
+            <GlobalFiltersElementFactoryContext.Consumer>
+              {(globalFiltersElementFactory) =>
+                globalFiltersElementFactory
+                  ? R(
+                      "div",
+                      { style: { marginTop: 20 } },
+                      globalFiltersElementFactory({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        filterableTables: [this.props.design.table!],
+                        globalFilters: this.props.design.globalFilters,
+                        onChange: this.handleGlobalFiltersChange,
+                        nullIfIrrelevant: true
+                      })
+                    )
+                  : undefined
+              }
+            </GlobalFiltersElementFactoryContext.Consumer>
           )
         },
         {
@@ -562,7 +564,9 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
         }),
         this.renderSplit(),
         this.renderFormat(),
-        error ? R("i", { className: "fa fa-exclamation-circle text-danger" }) : undefined
+        error ? <span className="text-danger">
+          <i className="fa fa-exclamation-circle" /> {error}
+        </span> : undefined
       ),
 
       R(

package/src/datagrids/DatagridViewComponent.ts

@@ -191,8 +191,8 @@ export default class DatagridViewComponent extends React.Component<
         }
 
         const newRows = produce(this.state.rows, draft => {
-          if (rows[0]) {
-            draft[rowIndex] = rows[0]    
+          if (rows![0]) {
+            draft[rowIndex] = rows![0]    
           }
           else {
             // If row missing, remove it from list
@@ -308,7 +308,7 @@ export default class DatagridViewComponent extends React.Component<
   }
 
   handleRowDoubleClick = (ev: any, rowIndex: any) => {
-    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex].id) {
+    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex]?.id) {
       this.props.onRowDoubleClick(this.props.design.table!, this.state.rows[rowIndex].id, rowIndex)
     }
   }

package/src/datagrids/ExprCellComponent.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement