@mwater/visualization 5.4.4 → 5.5.0

package/src/{MWaterTableSelectComponent.tsx → mwater_table_selection/MWaterTableSelectComponent.tsx}

@@ -1,9 +1,8 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-import { ToggleEditComponent, OptionListComponent } from "./UIComponents"
+import { ToggleEditComponent, OptionListComponent } from "../UIComponents"
 import { ExprUtils, Schema } from "@mwater/expressions"
-import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
+import MWaterResponsesFilterComponent from "../MWaterResponsesFilterComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
 import { ActiveTablesContext } from "@mwater/expressions-ui"
@@ -18,16 +17,16 @@ export interface MWaterTableSelectComponentProps {
   user?: string
   table?: string
   /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTablesChange: any
+  onChange: (table: string | null) => void
+  extraTables: string[]
+  onExtraTablesChange: (tables: string[]) => void
   /** Can also perform filtering for some types. Include these props to enable this */
   filter?: any
-  onFilterChange?: any
+  onFilterChange?: (filter: any) => void
 }
 
 interface MWaterTableSelectComponentState {
-  pendingExtraTable: any
+  pendingExtraTable: string | null
 }
 
 // Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
@@ -35,7 +34,7 @@ export default class MWaterTableSelectComponent extends React.Component<
   MWaterTableSelectComponentProps,
   MWaterTableSelectComponentState
 > {
-  toggleEdit: any
+  toggleEdit: ToggleEditComponent | null = null
 
   constructor(props: MWaterTableSelectComponentProps) {
     super(props)
@@ -45,46 +44,46 @@ export default class MWaterTableSelectComponent extends React.Component<
     }
   }
 
-  componentWillReceiveProps(nextProps: any) {
+  componentDidUpdate(prevProps: MWaterTableSelectComponentProps) {
     // If received new schema with pending extra table, select it
-    let table
+    let table: string | null = null
     if (this.state.pendingExtraTable) {
       table = this.state.pendingExtraTable
-      if (nextProps.schema.getTable(table)) {
+      if (this.props.schema.getTable(table)) {
         // No longer waiting
         this.setState({ pendingExtraTable: null })
 
         // Close toggle edit
-        this.toggleEdit.close()
+        this.toggleEdit?.close()
 
         // Fire change
-        nextProps.onChange(table)
+        this.props.onChange(table)
       }
     }
 
     // If table is newly selected and is a responses table and no filters, set filters to final only
     if (
-      nextProps.table &&
-      nextProps.table.match(/responses:/) &&
-      nextProps.table !== this.props.table &&
-      !nextProps.filter &&
-      nextProps.onFilterChange
+      this.props.table &&
+      this.props.table.match(/responses:/) &&
+      this.props.table !== prevProps.table &&
+      !this.props.filter &&
+      this.props.onFilterChange
     ) {
-      return nextProps.onFilterChange({
+      this.props.onFilterChange({
         type: "op",
         op: "= any",
-        table: nextProps.table,
+        table: this.props.table,
         exprs: [
-          { type: "field", table: nextProps.table, column: "status" },
+          { type: "field", table: this.props.table, column: "status" },
           { type: "literal", valueType: "enumset", value: ["final"] }
         ]
       })
     }
   }
 
-  handleChange = (tableId: any) => {
+  handleChange = (tableId: string | null) => {
     // Close toggle edit
-    this.toggleEdit.close()
+    this.toggleEdit?.close()
 
     // Call onChange if different
     if (tableId !== this.props.table) {
@@ -92,7 +91,7 @@ export default class MWaterTableSelectComponent extends React.Component<
     }
   }
 
-  handleTableChange = (tableId: any) => {
+  handleTableChange = (tableId: string | null) => {
     // If not part of extra tables, add it and wait for new schema
     if (tableId && !this.props.schema.getTable(tableId)) {
       return this.setState({ pendingExtraTable: tableId }, () => {
@@ -104,56 +103,54 @@ export default class MWaterTableSelectComponent extends React.Component<
   }
 
   render() {
-    const editor = R(EditModeTableSelectComponent, {
-      apiUrl: this.props.apiUrl,
-      client: this.props.client,
-      schema: this.props.schema,
-      user: this.props.user,
-      table: this.props.table,
-      onChange: this.handleTableChange,
-      extraTables: this.props.extraTables,
-      onExtraTablesChange: this.props.onExtraTablesChange
-    })
+    const editor = <EditModeTableSelectComponent
+      apiUrl={this.props.apiUrl}
+      client={this.props.client}
+      schema={this.props.schema}
+      user={this.props.user}
+      table={this.props.table}
+      onChange={this.handleTableChange}
+      extraTables={this.props.extraTables}
+      onExtraTablesChange={this.props.onExtraTablesChange}
+    />
 
-    return R(
-      "div",
-      null,
-      // Show message if loading
-      this.state.pendingExtraTable
-        ? R(
-            "div",
-            { className: "alert alert-info", key: "pendingExtraTable" },
-            R("i", { className: "fa fa-spinner fa-spin" }),
-            `\u00a0${T`Please wait...`}`
-          )
-        : undefined,
+    return (
+      <div>
+        {/* Show message if loading */}
+        {this.state.pendingExtraTable ? (
+          <div className="alert alert-info" key="pendingExtraTable">
+            <i className="fa fa-spinner fa-spin"/>
+            &nbsp;{T`Please wait...`}
+          </div>
+        ) : undefined}
 
-      R(ToggleEditComponent, {
-        ref: (c: any) => {
-          this.toggleEdit = c
-        },
-        forceOpen: !this.props.table, // Must have table
-        label: this.props.table
-          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
-          : "",
-        editor,
-        onRemove: () => {
-          this.props.onChange(null)
-        }
-      }),
+        <ToggleEditComponent
+          ref={(c: ToggleEditComponent | null) => {
+            this.toggleEdit = c
+          }}
+          forceOpen={!this.props.table} // Must have table
+          label={this.props.table
+            ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
+            : ""}
+          editor={editor}
+          onRemove={() => {
+            this.props.onChange(null)
+          }}
+        />
 
-      // Make sure table still exists
-      this.props.table &&
-        this.props.onFilterChange &&
-        this.props.table.match(/^responses:/) &&
-        this.props.schema.getTable(this.props.table)
-        ? R(MWaterResponsesFilterComponent, {
-            schema: this.props.schema,
-            table: this.props.table,
-            filter: this.props.filter,
-            onFilterChange: this.props.onFilterChange
-          })
-        : undefined
+        {/* Make sure table still exists */}
+        {this.props.table &&
+          this.props.onFilterChange &&
+          this.props.table.match(/^responses:/) &&
+          this.props.schema.getTable(this.props.table) ? (
+            <MWaterResponsesFilterComponent
+              schema={this.props.schema}
+              table={this.props.table}
+              filter={this.props.filter}
+              onFilterChange={this.props.onFilterChange}
+            />
+          ) : undefined}
+      </div>
     )
   }
 }
@@ -168,13 +165,13 @@ interface EditModeTableSelectComponentProps {
   user?: string
   table?: string
   /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTablesChange: any
+  onChange: (table: string | null) => void
+  extraTables: string[]
+  onExtraTablesChange: (tables: string[]) => void
 }
 
 interface EditModeTableSelectComponentState {
-  completeMode: any
+  completeMode: boolean
 }
 
 // Is the table select component when in edit mode. Toggles between complete list and simplified list
@@ -182,7 +179,7 @@ class EditModeTableSelectComponent extends React.Component<
   EditModeTableSelectComponentProps,
   EditModeTableSelectComponentState
 > {
-  constructor(props: any) {
+  constructor(props: EditModeTableSelectComponentProps) {
     super(props)
 
     this.state = {
@@ -203,7 +200,7 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Remove dead tables
     tables = tables.filter(
-      (t: any) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)!.deprecated
+      (t: string) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)?.deprecated
     )
     tables = _.union(
       tables,
@@ -223,7 +220,7 @@ class EditModeTableSelectComponent extends React.Component<
         }
       } else {
         // Add if exists
-        if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)!.deprecated) {
+        if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)?.deprecated) {
           tables = _.union(tables, [extraTable])
         }
       }
@@ -231,13 +228,13 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Sort by name
     tables = _.sortBy(tables, (tableId) =>
-      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, T.locale)
+      ExprUtils.localizeString(this.props.schema.getTable(tableId)?.name, T.locale)
     )
 
     return tables
   }
 
-  handleCompleteChange = (tableId: any) => {
+  handleCompleteChange = (tableId: string | null) => {
     this.setState({ completeMode: false })
     return this.props.onChange(tableId)
   }
@@ -245,7 +242,7 @@ class EditModeTableSelectComponent extends React.Component<
   render() {
     return (
       <ActiveTablesContext.Consumer>
-        {activeTables => (
+        {(activeTables: string[]) => (
           <div>
             {this.state.completeMode ? (
               <ModalPopupComponent
@@ -271,11 +268,11 @@ class EditModeTableSelectComponent extends React.Component<
               <>
                 <div className="text-muted">{T`Select Data Source:`}</div>
                 <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
-                  const table = this.props.schema.getTable(tableId)!
+                  const table = this.props.schema.getTable(tableId)
                   return {
-                    name: ExprUtils.localizeString(table.name, T.locale),
-                    desc: ExprUtils.localizeString(table.desc, T.locale),
-                    onClick: () => this.props.onChange(table.id)
+                    name: ExprUtils.localizeString(table?.name, T.locale),
+                    desc: ExprUtils.localizeString(table?.desc, T.locale),
+                    onClick: () => table && this.props.onChange(table.id)
                   }
                 })} />
                 <div>

package/src/quickfilter/Quickfilter.ts

@@ -4,6 +4,9 @@ import { Expr } from "@mwater/expressions"
   design is an array of quick filters (user-selectable filters).
   */
 export interface Quickfilter {
+  /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is edited. */
+  id?: string
+
   // `table`: (deprecated) table of filter
 
   /** filter expression (left hand side only. Usually enum, enumset, text, date, datetime, id[], text[]) */

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import uuid from "uuid"
 import { produce } from "immer"
 import { ExprComponent } from "@mwater/expressions-ui"
@@ -21,10 +21,19 @@ export interface QuickfiltersDesignComponentProps {
 
 // Displays quick filters and allows their value to be modified
 export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps) {
-  // This counter is used to force a complete remount of the ListEditorComponent when items are reordered
-  // This is necessary because the ExprComponent inside the list has internal state that can get corrupted
-  // during reordering operations. By remounting, we ensure a clean slate for all expression components.
-  const [reorderCounter, setReorderCounter] = useState(0)
+  // Add ids if not present
+  useEffect(() => {
+    if (props.design.some(qf => !qf.id)) {
+      const design = produce(props.design, draft => {
+        for (let i = 0; i < draft.length; i++) {
+          if (!draft[i].id) {
+            draft[i].id = uuid.v4()
+          }
+        }
+      })
+      props.onDesignChange(design)
+    }
+  }, [props.design])
 
   const handleDesignChange = (design: Quickfilter[]) => {
     const newDesign = produce(design, draft => {
@@ -39,11 +48,6 @@ export default function QuickfiltersDesignComponent(props: QuickfiltersDesignCom
     props.onDesignChange(newDesign)
   }
 
-  const handleReorder = (design: Quickfilter[]) => {
-    setReorderCounter(c => c + 1)
-    handleDesignChange(design)
-  }
-
   // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
   const isMergeable = (design: Quickfilter[], index: number) => {
     if (index === 0) {
@@ -102,7 +106,9 @@ export default function QuickfiltersDesignComponent(props: QuickfiltersDesignCom
 
   const handleAdd = () => {
     // Add blank to end
-    const design = props.design.concat([{ expr: null }])
+    const design = produce(props.design, draft => {
+      draft.push({ expr: null, id: uuid.v4() })
+    })
     props.onDesignChange(design)
   }
 
@@ -115,11 +121,10 @@ export default function QuickfiltersDesignComponent(props: QuickfiltersDesignCom
   return (
     <div>
       <ListEditorComponent
-        key={reorderCounter}
         items={props.design}
-        onItemsChange={handleReorder}
+        onItemsChange={handleDesignChange}
         renderItem={renderQuickfilter}
-        getReorderableKey={(item, index) => index}
+        getReorderableKey={(item, index) => item.id ?? index}
       />
       {props.tables.length > 0 ? (
         <button type="button" className="btn btn-sm btn-link" onClick={handleAdd}>

package/src/widgets/charts/Chart.ts

@@ -156,4 +156,21 @@ export default class Chart {
   translateDesign(design: any, translate: (input: string) => string): any {
     return design
   }
+
+  /** Determines if the chart supports exporting to XLSX format */
+  supportsXlsxExport(): boolean {
+    return false
+  }
+
+  /** Creates a SheetJS workbook for the chart data 
+   * @param design Chart design
+   * @param schema Schema to use
+   * @param dataSource Data source
+   * @param data Data from chart
+   * @param locale Locale to use
+   * @returns base64 encoded XLSX file
+   */
+  createXlsxWorkbook(design: any, schema: Schema, dataSource: DataSource, data: any, locale: string): string {
+    throw new Error("Not implemented")
+  }
 }

package/src/widgets/charts/ChartWidgetComponent.tsx

@@ -104,6 +104,36 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
     })
   }
 
+  // Saves an xlsx file to disk
+  handleSaveXlsxFile = () => {
+    // Get the data
+    this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err: any, data: any) => {
+      if (err) {
+        console.error(err)
+        alert(T`Failed to get data: ${err.message}`)
+        return
+      }
+
+      try {
+        // Create workbook
+        const blob = this.props.chart.createXlsxWorkbook(
+          this.props.design,
+          this.props.schema,
+          this.props.dataSource,
+          data,
+          this.context
+        )
+
+        // Require at use as causes server problems
+        const FileSaver = require("file-saver")
+        FileSaver.saveAs(blob, "Exported Data.xlsx")
+      } catch (ex) {
+        console.error(ex)
+        alert(T`Failed to export data: ${ex.message}`)
+      }
+    })
+  }
+
   handleStartEditing = () => {
     // Can't edit if already editing
     if (this.state.editDesign) {
@@ -259,7 +289,12 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       this.props.filters
     )
     if (!designError) {
-      dropdownItems.push({ label: T`Export Data`, onClick: this.handleSaveCsvFile })
+      dropdownItems.push({ label: T`Export Data (CSV)`, onClick: this.handleSaveCsvFile })
+      
+      // Add XLSX export option if supported
+      if (this.props.chart.supportsXlsxExport()) {
+        dropdownItems.push({ label: T`Export Data (XLSX)`, onClick: this.handleSaveXlsxFile })
+      }
     }
     if (this.props.onDesignChange != null) {
       dropdownItems.unshift({

package/src/widgets/charts/layered/LayeredChartDesign.ts

@@ -66,7 +66,7 @@ export interface LayeredChartDesign {
 
 export interface LayeredChartDesignLayer {
   /** bar/line/spline/scatter/area/pie/donut (overrides main one) */
-  type: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut"
+  type?: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut"
 
   /** table of layer */
   table: string

package/src/widgets/charts/layered/LayeredChartDesignerComponent.tsx

@@ -197,11 +197,10 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
       </div>
     )
   }
-
   renderType() {
     const chartTypes = [
       { id: "bar", name: T`Bar`, desc: T`Best for most charts` },
-      { id: "pie", name: T`Pie`, desc: T`Compare ratios of one variable` },
+      { id: "pie", name: T`Pie`, desc: T`Compare ratios of one variable` }, 
       { id: "donut", name: T`Donut`, desc: T`Pie chart with center removed` },
       { id: "line", name: T`Line`, desc: T`Show how data changes smoothly over time` },
       { id: "spline", name: T`Smoothed Line`, desc: T`For noisy data over time` },
@@ -209,29 +208,29 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
       { id: "area", name: T`Area`, desc: T`For cumulative data over time` }
     ]
 
-    const current = _.findWhere(chartTypes, { id: this.props.design.type })
+    const current = chartTypes.find(ct => ct.id === this.props.design.type)
 
-    return R(
-      uiComponents.SectionComponent,
-      { icon: "glyphicon-th", label: T`Chart Type` },
-      R(uiComponents.ToggleEditComponent, {
-        forceOpen: !this.props.design.type,
-        label: current ? current.name : "",
-        editor: (onClose: any) => {
-          return R(uiComponents.OptionListComponent, {
-            hint: T`Select a Chart Type`,
-            items: _.map(chartTypes, ct => ({
-              name: ct.name,
-              desc: ct.desc,
-              onClick: () => {
-                onClose() // Close editor first
-                return this.handleTypeChange(ct.id)
-              }
-            }))
-          })
-        }
-      }),
-      this.renderOptions()
+    return (
+      <uiComponents.SectionComponent label={T`Chart Type`}>
+        <uiComponents.ToggleEditComponent
+          forceOpen={!this.props.design.type}
+          label={current ? current.name : ""}
+          editor={(onClose: any) => (
+            <uiComponents.OptionListComponent
+              hint={T`Select a Chart Type`}
+              items={chartTypes.map(ct => ({
+                name: ct.name,
+                desc: ct.desc,
+                onClick: () => {
+                  onClose() // Close editor first
+                  return this.handleTypeChange(ct.id)
+                }
+              }))}
+            />
+          )}
+        />
+        {this.renderOptions()}
+      </uiComponents.SectionComponent>
     )
   }