@mwater/visualization 5.1.0 → 5.3.0

package/src/dashboards/DashboardComponent.tsx

@@ -1,25 +1,22 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { ReactNode } from "react"
 const R = React.createElement
 
 import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
-import { ExprCleaner } from "@mwater/expressions"
 import UndoStack from "../UndoStack"
 import * as DashboardUtils from "./DashboardUtils"
-import DashboardViewComponent from "./DashboardViewComponent"
+import DashboardViewComponent, { DashboardViewComponentHandle } from "./DashboardViewComponent"
 import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
 import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
 import SettingsModalComponent from "./SettingsModalComponent"
 import LayoutManager from "../layouts/LayoutManager"
-import DashboardUpgrader from "./DashboardUpgrader"
 import { LayoutOptionsComponent } from "./LayoutOptionsComponent"
 import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
 import { getLayoutOptions } from "./layoutOptions"
 import { DashboardDesign } from "./DashboardDesign"
 import DashboardDataSource from "./DashboardDataSource"
 import { JsonQLFilter } from ".."
-import { ActiveTablesContext } from "@mwater/expressions-ui"
+import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
 
 export interface DashboardComponentProps {
   design: DashboardDesign
@@ -75,31 +72,20 @@ export interface DashboardComponentState {
  * Manages undo stack and quickfilter value
  */
 export default class DashboardComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
-  dashboardView: DashboardViewComponent | null
+  dashboardView: DashboardViewComponentHandle | null
 
   static defaultProps = { printScaling: true }
 
-  static childContextTypes = {
-    locale: PropTypes.string,
-  }
-
   settings: SettingsModalComponent | null
 
-  getChildContext() {
-    return {
-      // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
-      locale: this.props.design.locale,
-    }
-  }
-
-  constructor(props: any) {
+  constructor(props: DashboardComponentProps) {
     super(props)
 
     const layoutOptions = getLayoutOptions(props.design)
 
     this.state = {
       undoStack: new UndoStack().push(props.design),
-      quickfiltersValues: props.quickfiltersValues,
+      quickfiltersValues: props.quickfiltersValues || null,
       editing:
         LayoutManager.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
         props.onDesignChange != null,
@@ -138,7 +124,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
   }
 
   handlePrint = () => {
-    this.dashboardView!.print()
+    this.dashboardView?.print()
   }
 
   handleUndo = () => {
@@ -198,21 +184,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     return this.setState({ hideQuickfilters: false })
   }
 
-  handleUpgrade = () => {
-    if (
-      !confirm(
-        "This will upgrade your dashboard to the new kind with enhanced features. You can click Undo immediately afterwards if you wish to revert it. Continue?"
-      )
-    ) {
-      return
-    }
-
-    const design = new DashboardUpgrader().upgrade(this.props.design)
-    this.props.onDesignChange!(design)
-
-    alert("Upgrade completed. Some widgets may need to be resized. Click Undo to revert back to old dashboard style.")
-  }
-
   // Get filters from props filters combined with dashboard filters
   getCompiledFilters() {
     let compiledFilters = DashboardUtils.getCompiledFilters(
@@ -237,45 +208,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",
@@ -289,37 +221,30 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     return R(
       "div",
       null,
-      this.state.editing && (this.props.design.layout || "grid") === "grid"
-        ? R(
-            "a",
-            { key: "upgrade", className: "btn btn-info btn-sm", onClick: this.handleUpgrade },
-            "Upgrade Dashboard..."
-          )
-        : undefined,
       this.state.editing
         ? [
-            R(
-              "a",
-              {
-                key: "undo",
-                className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
-                onClick: this.handleUndo
-              },
-              R("span", { className: "fas fa-caret-left" }),
-              R("span", { className: "hide-600px" }, " Undo")
-            ),
-            " ",
-            R(
-              "a",
-              {
-                key: "redo",
-                className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
-                onClick: this.handleRedo
-              },
-              R("span", { className: "fas fa-caret-right" }),
-              R("span", { className: "hide-600px" }, " Redo")
-            )
-          ]
+          R(
+            "a",
+            {
+              key: "undo",
+              className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
+              onClick: this.handleUndo
+            },
+            R("span", { className: "fas fa-caret-left" }),
+            R("span", { className: "hide-600px" }, " Undo")
+          ),
+          " ",
+          R(
+            "a",
+            {
+              key: "redo",
+              className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
+              onClick: this.handleRedo
+            },
+            R("span", { className: "fas fa-caret-right" }),
+            R("span", { className: "hide-600px" }, " Redo")
+          )
+        ]
         : undefined,
       R(
         "a",
@@ -335,11 +260,11 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       ),
       this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
         ? R(
-            "a",
-            { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
-            R("span", { className: "fa fa-filter" }),
-            R("span", { className: "hide-600px" }, " Show Quickfilters")
-          )
+          "a",
+          { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
+          R("span", { className: "fa fa-filter" }),
+          R("span", { className: "hide-600px" }, " Show Quickfilters")
+        )
         : undefined,
 
       // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
@@ -347,11 +272,11 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       //   " Export"
       this.state.editing
         ? R(
-            "a",
-            { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
-            R("span", { className: "fas fa-cog" }),
-            R("span", { className: "hide-600px" }, " Settings")
-          )
+          "a",
+          { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
+          R("span", { className: "fas fa-cog" }),
+          R("span", { className: "hide-600px" }, " Settings")
+        )
         : undefined,
       this.state.editing ? this.renderStyle() : undefined,
       this.props.extraTitleButtonsElem,
@@ -379,12 +304,13 @@ 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
     })
   }
 
   refDashboardView = (el: any) => {
-    return (this.dashboardView = el)
+    this.dashboardView = el
   }
 
   render() {
@@ -427,39 +353,39 @@ export default class DashboardComponent extends React.Component<DashboardCompone
 
 
     // Pass active tables down to table select components so they can present a shorter list
-    return <ActiveTablesContext.Provider 
+    return <ActiveTablesContext.Provider
       value={DashboardUtils.getFilterableTables(this.props.design, this.props.schema)}>
-        
-    <div style={{
-      display: "grid",
-      gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-      height: "100%"
-    }}>
-      {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
-      <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
-      {dashboardView}
-      {this.props.onDesignChange != null && (
-        <SettingsModalComponent
-          onDesignChange={this.handleDesignChange}
-          schema={this.props.schema}
-          dataSource={this.props.dataSource}
-          ref={(c: SettingsModalComponent | null) => {
-            this.settings = c
-          }}
-        />
-      )}
-      {this.state.layoutOptionsOpen && (
-        <ModalWindowComponent isOpen={true} outerPadding={10} innerPadding={10}>
-          <LayoutOptionsComponent
-            design={this.props.design}
-            onDesignChange={this.props.onDesignChange!}
-            onClose={() => this.setState({ layoutOptionsOpen: false })}
-            dashboardView={readonlyDashboardView}
-            quickfiltersView={this.renderQuickfilter()}
-          />
-        </ModalWindowComponent>
-      )}
-    </div>
+      <LocaleContext.Provider value={this.props.design.locale ?? "en"}>
+        <div style={{
+          display: "grid",
+          gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+          height: "100%"
+        }}>
+          {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
+          <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
+          {dashboardView}
+          {this.props.onDesignChange != null && (
+            <SettingsModalComponent
+              onDesignChange={this.handleDesignChange}
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              ref={(c: SettingsModalComponent | null) => {
+                this.settings = c
+              }}
+            />
+          )}
+          {this.state.layoutOptionsOpen && (
+            <ModalWindowComponent isOpen={true} outerPadding={10} innerPadding={10} onRequestClose={() => this.setState({ layoutOptionsOpen: false })}>
+              <LayoutOptionsComponent
+                design={this.props.design}
+                onDesignChange={this.props.onDesignChange!}
+                dashboardView={readonlyDashboardView}
+                quickfiltersView={this.renderQuickfilter()}
+              />
+            </ModalWindowComponent>
+          )}
+        </div>
+      </LocaleContext.Provider>
     </ActiveTablesContext.Provider>
   }
 }

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.
@@ -15,13 +15,13 @@ export interface DashboardDesign {
   quickfilters?: Quickfilter[]
 
   /** layout engine to use (`blocks` is new default)  */
-  layout: "blocks" | "grid"
+  layout: "blocks"
 
-  /** optional theme to use */
+  /** Optional theme to use. Defaults to "default" theme. */
   style?: DashboardTheme
 
   /** Options for layout including responsiveness, scaling, etc */
-  layoutOptions?: BlocksLayoutOptions
+  layoutOptions?: Partial<BlocksLayoutOptions>
 
   /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
   filters?: { [tableId: string]: Expr }
@@ -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/DashboardUpgrader.ts

@@ -60,7 +60,47 @@ export default class DashboardUpgrader {
           delete items[li]
         }
       } else if (lineItems.length === 1) {
-        newItems.blocks.push(convertBlock(lineItems[0], items[lineItems[0]]))
+        const item = items[lineItems[0]]
+        const convertedBlock = convertBlock(lineItems[0], item)
+
+        // If widget goes all the way across
+        if (item.layout.x + item.layout.w == 24) {
+          newItems.blocks.push(convertedBlock)
+        } else {
+          const leftSpacerWidth = item.layout.x
+          const rightSpacerWidth = 24 - (item.layout.x + item.layout.w)
+          const blocks = []
+          const weights = []
+
+          if (leftSpacerWidth > 0) {
+            blocks.push({
+              id: uuid(),
+              type: "spacer",
+              aspectRatio: 3,
+            })
+            weights.push(leftSpacerWidth)
+          }
+
+          blocks.push(convertedBlock)
+          weights.push(item.layout.w)
+
+          if (rightSpacerWidth > 0) {
+            blocks.push({
+              id: uuid(),
+              type: "spacer",
+              aspectRatio: 3,
+            })
+            weights.push(rightSpacerWidth)
+          }
+
+          newItems.blocks.push({
+            id: uuid(),
+            type: "horizontal",
+            blocks,
+            weights,
+          })
+        }
+
         delete items[lineItems[0]]
       }