@mwater/visualization 5.1.0 → 5.3.0

package/src/widgets/text/TextWidgetComponent.tsx

@@ -0,0 +1,249 @@
+import React from "react"
+import _ from "lodash"
+import TextComponent from "./TextComponent"
+import TextWidget from "./TextWidget"
+import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from "../../JsonQLFilter"
+import { TextWidgetDesign } from "./TextWidgetDesign"
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+import DropdownWidgetComponent from "../DropdownWidgetComponent"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import { FormGroup } from "@mwater/react-library/lib/bootstrap"
+import ColorComponent from "../../ColorComponent"
+import { Select } from "@mwater/react-library/lib/bootstrap"
+
+export interface TextWidgetComponentProps {
+  design: TextWidgetDesign
+  /** Called with new design. null/undefined for readonly */
+  onDesignChange?: (design: TextWidgetDesign) => void
+  filters: JsonQLFilter[]
+  schema: Schema
+  /** Data source to use for chart */
+  dataSource: DataSource
+  widgetDataSource: any
+  width?: number
+  height?: number
+  /** Table that is filtered to have one row */
+  singleRowTable?: string
+  namedStrings?: any
+  /** A key that changes when the widget should be refreshed */
+  refreshKey?: any
+}
+
+// Widget which displays styled text with embedded expressions
+export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetComponentProps, { loading: boolean, exprValues: any, error: any, cacheExpiry: any, editModalOpen: boolean }> {
+  divComp: HTMLElement | null
+  constructor(props: TextWidgetComponentProps) {
+    super(props)
+
+    this.state = {
+      loading: false,
+      // Map of expression id to expression value
+      exprValues: {},
+      error: null,
+      cacheExpiry: props.dataSource.getCacheExpiry(), // Save cache expiry to see if changes
+      editModalOpen: false
+    }
+  }
+
+  // Override to determine if a load is needed. Not called on mounting
+  isLoadNeeded(newProps: any, oldProps: any) {
+    // Get expression items recursively
+    function getExprItems(items: HtmlItem[]): HtmlItemExpr[] {
+      let exprItems: HtmlItemExpr[] = []
+      for (let item of items || []) {
+        if (typeof item === "object") {
+          if (item.type === "expr") {
+            exprItems.push(item as HtmlItemExpr)
+          }
+          if (item.items) {
+            exprItems = exprItems.concat(getExprItems(item.items))
+          }
+        }
+      }
+      return exprItems
+    }
+
+    // Reload if filters or expressions have changed or cache expiry
+    return (
+      !_.isEqual(newProps.filters, oldProps.filters) ||
+      !_.isEqual(getExprItems(newProps.design.items), getExprItems(oldProps.design.items)) ||
+      newProps.dataSource.getCacheExpiry() !== this.state.cacheExpiry ||
+      newProps.refreshKey !== oldProps.refreshKey
+    )
+  }
+
+  // Call callback with state changes
+  load(props: TextWidgetComponentProps, prevProps: TextWidgetComponentProps, callback: any) {
+    // Shortcut if no expressions in text widget
+    const widget = new TextWidget()
+    if (widget.getExprItems(props.design.items).length === 0) {
+      callback({ error: null, exprValues: {} }, props.dataSource.getCacheExpiry())
+      return
+    }
+
+    // Get data
+    props.widgetDataSource.getData(props.design, props.filters, (error: any, data: any) => {
+      callback({ error, exprValues: data || {}, cacheExpiry: props.dataSource.getCacheExpiry() })
+    })
+  }
+
+  scrollToTOCEntry(entryId: any) {
+    // Find entry in divComp
+    const entries = this.divComp!.querySelectorAll("h1,h2,h3,h4,h5,h6,h7,h8,h9")
+
+    const entry = entries[entryId]
+    if (entry) {
+      return entry.scrollIntoView(true)
+    }
+  }
+
+  handleEditClick = () => {
+    this.setState({ editModalOpen: true })
+  }
+
+  handleEditModalClose = () => {
+    this.setState({ editModalOpen: false })
+  }
+
+  handleBackgroundColorChange = (color: string | null) => {
+    const newDesign = { ...this.props.design, backgroundColor: color }
+    this.props.onDesignChange!(newDesign)
+  }
+
+  handleSpacingChange = (spacing: number | null) => {
+    const newDesign = { ...this.props.design, padding: spacing ?? undefined }
+    this.props.onDesignChange!(newDesign)
+  }
+
+  handleBorderColorChange = (color: string | null) => {
+    const newDesign = { ...this.props.design, borderColor: color }
+    this.props.onDesignChange!(newDesign)
+  }
+
+  handleBorderThicknessChange = (thickness: number | null) => {
+    const newDesign = { ...this.props.design, borderThickness: thickness }
+    this.props.onDesignChange!(newDesign)
+  }
+
+  handleBorderRadiusChange = (radius: number | null) => {
+    const newDesign = { ...this.props.design, borderRadius: radius }
+    this.props.onDesignChange!(newDesign)
+  }
+
+  renderEditModal() {
+    if (!this.state.editModalOpen) {
+      return null
+    }
+
+    const spacingOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40].map(value => ({ value, label: `${value}px` }))
+    const borderThicknessOptions = [0, 1, 2, 3, 4, 5].map(value => ({ value, label: value === 0 ? "None" : `${value}px` }))
+
+    return (
+      <ActionCancelModalComponent
+        title="Edit Text Widget"
+        onCancel={this.handleEditModalClose}
+        onAction={this.handleEditModalClose}
+      >
+        <FormGroup label="Background Color">
+          <ColorComponent
+            color={this.props.design.backgroundColor || null}
+            onChange={this.handleBackgroundColorChange}
+          />
+          <div className="text-muted">
+            Choose a background color for the text widget
+          </div>
+        </FormGroup>
+        <FormGroup label="Padding">
+          <Select
+            value={this.props.design.padding ?? 0}
+            onChange={this.handleSpacingChange}
+            options={spacingOptions}
+          />
+          <div className="text-muted">
+            Choose extra padding for the text widget
+          </div>
+        </FormGroup>
+        <FormGroup label="Border Thickness" help="Choose the border thickness for the text widget">
+          <Select
+            value={this.props.design.borderThickness ?? 0}
+            onChange={this.handleBorderThicknessChange}
+            options={borderThicknessOptions}
+          />
+        </FormGroup>
+        {this.props.design.borderThickness &&
+          <FormGroup label="Border Color" help="Choose the border color for the text widget">
+            <ColorComponent
+              color={this.props.design.borderColor || null}
+              onChange={this.handleBorderColorChange}
+            />
+          </FormGroup>
+        }
+        {this.props.design.borderThickness &&
+          <FormGroup label="Border Radius" help="Choose the border radius for the text widget">
+            <Select
+              value={this.props.design.borderRadius ?? 0}
+              onChange={this.handleBorderRadiusChange}
+              options={spacingOptions}
+            />
+          </FormGroup>
+        }
+      </ActionCancelModalComponent>
+    )
+  }
+
+  renderTextComponent() {
+    // If loading, don't display old values
+    const exprValues = !this.state.loading ? this.state.exprValues : {}
+
+    const padding = this.props.design.padding ?? 0
+
+    return (
+      <TextComponent
+        design={this.props.design}
+        onDesignChange={this.props.onDesignChange}
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        exprValues={exprValues}
+        width={this.props.width ? this.props.width - padding * 2 : undefined}
+        height={this.props.height ? this.props.height - padding * 2 : undefined}
+        singleRowTable={this.props.singleRowTable}
+        namedStrings={this.props.namedStrings}
+      />
+    )
+  }
+
+  render() {
+    const borderStyle = this.props.design.borderThickness && this.props.design.borderColor
+      ? `${this.props.design.borderThickness}px solid ${this.props.design.borderColor}`
+      : undefined
+
+    return (
+      <div
+        style={{
+          backgroundColor: this.props.design.backgroundColor ?? undefined,
+          padding: this.props.design.padding != null ? `${this.props.design.padding}px` : undefined,
+          border: borderStyle,
+          borderRadius: this.props.design.borderRadius != null ? `${this.props.design.borderRadius}px` : undefined
+        }}
+        ref={comp => this.divComp = comp}
+      >
+        {this.props.onDesignChange ? (
+          <DropdownWidgetComponent
+            dropdownItems={[{
+              label: "Edit",
+              onClick: this.handleEditClick
+            }]}
+          >
+            {this.renderTextComponent()}
+          </DropdownWidgetComponent>
+        ) : (
+          this.renderTextComponent()
+        )}
+        {this.renderEditModal()}
+      </div>
+    )
+  }
+}

package/src/widgets/text/TextWidgetDesign.ts

@@ -1,7 +1,31 @@
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
+
 export interface TextWidgetDesign {
   /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-  items: any[]
+  items: (HtmlItem | HtmlItemExpr)[]
 
   /** "title" for title block. default is "default" */
-  style?: "title" | "default"
+  style?: "title" | "default" | "header" | "footer"
+
+  /** Background color of the text widget (optional) */
+  backgroundColor?: string | null
+
+  /** Extra padding for the text widget */
+  padding?: number
+
+  /** Border color of the text widget (optional) */
+  borderColor?: string | null
+
+  /** Border thickness of the text widget (optional) */
+  borderThickness?: number | null
+
+  /** Border radius of the text widget (optional) */
+  borderRadius?: number | null
 }
+
+
+/** Returns true if the text widget design is empty. */
+export function isEmptyTextWidgetDesign(design: TextWidgetDesign | undefined): boolean {
+  return design == null || design.items.length === 0
+}

package/src/ColorComponent.ts

@@ -1,117 +0,0 @@
-import PropTypes from "prop-types"
-import React, { CSSProperties } from "react"
-const R = React.createElement
-
-import ClickOutHandler from "react-onclickout"
-import { SketchPicker } from "react-color"
-import { SwatchesPicker } from "react-color"
-
-interface ColorComponentProps {
-  color: string | null | undefined
-  onChange: (value: string | null) => void
-}
-
-interface ColorComponentState {
-  open: any
-  advanced: any
-}
-
-// Simple color well with popup
-export default class ColorComponent extends React.Component<ColorComponentProps, ColorComponentState> {
-  constructor(props: any) {
-    super(props)
-    this.state = { open: false, advanced: false }
-  }
-
-  handleClick = () => {
-    return this.setState({ open: !this.state.open, advanced: false })
-  }
-
-  handleClose = (color: any) => {
-    return this.props.onChange(color.hex)
-  }
-
-  handleReset = () => {
-    this.setState({ open: false })
-    return this.props.onChange(null)
-  }
-
-  handleTransparent = () => {
-    this.setState({ open: false })
-    return this.props.onChange("transparent")
-  }
-
-  handleAdvanced = () => {
-    return this.setState({ advanced: !this.state.advanced })
-  }
-
-  render() {
-    const style: CSSProperties = {
-      height: 20,
-      width: 20,
-      border: "solid 2px #888",
-      borderRadius: 4,
-      backgroundColor: this.props.color || undefined,
-      cursor: "pointer",
-      display: "inline-block"
-    }
-
-    if (!this.props.color) {
-      // http://lea.verou.me/css3patterns/#diagonal-stripes
-      style.backgroundColor = "#AAA"
-      style.backgroundImage =
-        "repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.7) 2px, rgba(255,255,255,.7) 4px)"
-    }
-
-    const popupPosition = {
-      position: "absolute",
-      top: 0,
-      left: 30,
-      zIndex: 1000,
-      backgroundColor: "white",
-      border: "solid 1px #DDD",
-      borderRadius: 3
-    }
-
-    return R(
-      "div",
-      { style: { position: "relative", display: "inline-block" } },
-      R("div", { style, onClick: this.handleClick }),
-      this.state.open
-        ? React.createElement(
-            ClickOutHandler,
-            { onClickOut: () => this.setState({ open: false }) },
-            R(
-              "div",
-              { style: popupPosition },
-              R(
-                "button",
-                { type: "button", className: "btn btn-link btn-sm", onClick: this.handleReset },
-                R("i", { className: "fa fa-undo" }),
-                " Reset Color"
-              ),
-              // R 'button', type: "button", className: "btn btn-link btn-sm", onClick: @handleTransparent,
-              //   R 'i', className: "fa fa-ban"
-              //   " None"
-              R(
-                "button",
-                { type: "button", className: "btn btn-link btn-sm", onClick: this.handleAdvanced },
-                this.state.advanced ? "Basic" : "Advanced"
-              ),
-
-              this.state.advanced
-                ? React.createElement(SketchPicker, {
-                    color: this.props.color || undefined,
-                    disableAlpha: true,
-                    onChangeComplete: this.handleClose
-                  })
-                : React.createElement(SwatchesPicker, {
-                    color: this.props.color || undefined,
-                    onChangeComplete: this.handleClose
-                  })
-            )
-          )
-        : undefined
-    )
-  }
-}

package/src/dashboards/DashboardViewComponent.ts

@@ -1,304 +0,0 @@
-import _ from "lodash"
-import PropTypes from "prop-types"
-import React, { CSSProperties } from "react"
-const R = React.createElement
-
-import ImplicitFilterBuilder from "../ImplicitFilterBuilder"
-import * as DashboardUtils from "./DashboardUtils"
-import { DataSource, Schema } from "@mwater/expressions"
-import WidgetFactory from "../widgets/WidgetFactory"
-import WidgetScoper from "../widgets/WidgetScoper"
-import ReactElementPrinter from "@mwater/react-library/lib/ReactElementPrinter"
-import LayoutManager from "../layouts/LayoutManager"
-import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent"
-import { getLayoutOptions } from "./layoutOptions"
-import { WidgetComponent } from "./WidgetComponent"
-import { DashboardDataSource, DashboardDesign, JsonQLFilter } from ".."
-import { getMapTilerApiKey, setMapTilerApiKey } from "../maps/vectorMaps"
-
-export interface DashboardViewComponentProps {
-  /** schema to use */
-  schema: Schema
-  /** data source to use. Only used when designing, for display uses dashboardDataSource */
-  dataSource: DataSource
-  /** dashboard data source */
-  dashboardDataSource: DashboardDataSource
-
-  design: DashboardDesign
-
-  /** Leave unset for readonly */
-  onDesignChange?: (design: DashboardDesign) => void
-
-  /** Called with (tableId, rowId) when item is clicked */
-  onRowClick?: (tableId: string, rowId: any) => void
-
-  /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
-  namedStrings?: { [key: string]: string }
-
-  /** Filters to add to the dashboard (includes extra filters and any quickfilters from the dashboard component. Does not include dashboard level filters) */
-  filters?: JsonQLFilter[]
-
-  /** Entry to scroll to initially when dashboard is loaded */
-  initialTOCEntryScroll?: { widgetId: string; entryId: any }
-
-  /** True to hide scope display */
-  hideScopes?: boolean
-
-  /** True to render in print mode (prevents odd clipping issue) */
-  printMode?: boolean
-
-  /** Change to force a refresh */
-  refreshKey?: any
-}
-
-/**
- * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
- * Handles scoping and stores the state of scope
- */
-export default class DashboardViewComponent extends React.Component<
-  DashboardViewComponentProps,
-  { widgetScoper: WidgetScoper }
-> {
-  static childContextTypes = { locale: PropTypes.string }
-  widgetComps: { [widgetId: string]: any }
-
-  // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
-  getChildContext() {
-    return { locale: this.props.design.locale }
-  }
-
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      widgetScoper: new WidgetScoper() // Empty scoping
-    }
-
-    this.widgetComps = {} // Lookup of widget components by id
-  }
-
-  componentDidMount() {
-    if (this.props.initialTOCEntryScroll) {
-      // Getting heights of widgets properly requires a 0 length timeout
-      setTimeout(() => {
-        return this.handleScrollToTOCEntry(
-          this.props.initialTOCEntryScroll!.widgetId,
-          this.props.initialTOCEntryScroll!.entryId
-        )
-      }, 0)
-    }
-
-    // Add listener to localstorage to update clipboard display
-    return window.addEventListener("storage", this.handleStorageChange)
-  }
-
-  componentWillUnmount() {
-    // Remove listener
-    return window.addEventListener("storage", this.handleStorageChange)
-  }
-
-  handleStorageChange = () => {
-    return this.forceUpdate()
-  }
-
-  handleScopeChange = (id: any, scope: any) => {
-    return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, scope) })
-  }
-
-  handleRemoveScope = (id: any) => {
-    return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, null) })
-  }
-
-  handleItemsChange = (items: any) => {
-    const design = _.extend({}, this.props.design, { items }) as DashboardDesign
-    return this.props.onDesignChange!(design)
-  }
-
-  // Handle a change of the clipboard and determine which tables the clipboard block uses
-  handleClipboardChange = (block: any) => {
-    try {
-      // If empty, just set it
-      if (!block) {
-        window.localStorage.removeItem("DashboardViewComponent.clipboard")
-        this.forceUpdate()
-        return
-      }
-
-      // Determine which tables are used (just peek for any uses of the table name. Not ideal, but easy)
-      const tables = _.pluck(
-        _.filter(this.props.schema.getTables(), (table) => JSON.stringify(block).includes(JSON.stringify(table.id))),
-        "id"
-      )
-
-      // Store in clipboard
-      window.localStorage.setItem("DashboardViewComponent.clipboard", JSON.stringify({ block, tables }))
-      return this.forceUpdate()
-    } catch (err) {
-      return alert("Clipboard not available")
-    }
-  }
-
-  getClipboardContents() {
-    try {
-      return JSON.parse(window.localStorage.getItem("DashboardViewComponent.clipboard") || "null")
-    } catch (err) {
-      return null
-    }
-  }
-
-  // Call to print the dashboard
-  print = async () => {
-    // Temporarily disable vector maps as WebGL is not supported in print mode
-    const mapTilerAPIKey = getMapTilerApiKey()
-    try {
-      setMapTilerApiKey("")
-
-      // Create element at 1080 wide (use as standard printing width)
-      const elem = R(
-        "div",
-        { style: { width: 1080 } },
-        R(DashboardViewComponent, _.extend({}, this.props, { onDesignChange: null, printMode: true }))
-      )
-    
-      const printer = new ReactElementPrinter()
-      await printer.print(elem, { delay: 5000 })
-    } finally {
-      setMapTilerApiKey(mapTilerAPIKey)
-    }
-  }
-
-  // Get filters from props filters combined with dashboard filters
-  getCompiledFilters() {
-    let compiledFilters = DashboardUtils.getCompiledFilters(
-      this.props.design,
-      this.props.schema,
-      DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
-    )
-    compiledFilters = compiledFilters.concat(this.props.filters || [])
-    return compiledFilters
-  }
-
-  // Get list of TOC entries
-  getTOCEntries(layoutManager: any) {
-    const entries = []
-
-    for (let { id, type, design } of layoutManager.getAllWidgets(this.props.design.items)) {
-      const widget = WidgetFactory.createWidget(type)
-      // Add widgetId to each one
-      for (let entry of widget.getTOCEntries(design, this.props.namedStrings)) {
-        entries.push(_.extend({}, entry, { widgetId: id }))
-      }
-    }
-
-    return entries
-  }
-
-  handleScrollToTOCEntry = (widgetId: any, entryId: any) => {
-    const widgetComp = this.widgetComps[widgetId]
-    if (!widgetComp) {
-      return
-    }
-
-    // Call scrollToTOCEntry if present
-    return widgetComp.scrollToTOCEntry?.(entryId)
-  }
-
-  renderScopes() {
-    return R(WidgetScopesViewComponent, {
-      scopes: this.state.widgetScoper.getScopes(),
-      onRemoveScope: this.handleRemoveScope
-    })
-  }
-
-  compRef = (widgetId: any, comp: any) => {
-    return (this.widgetComps[widgetId] = comp)
-  }
-
-  render() {
-    let cantPasteMessage = ""
-    const layoutManager = LayoutManager.createLayoutManager(this.props.design.layout)
-
-    const compiledFilters = this.getCompiledFilters()
-
-    // Get filterable tables
-    const filterableTables = DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
-
-    // Determine toc entries
-    const tocEntries = this.getTOCEntries(layoutManager)
-
-    // Get clipboard contents
-    const clipboardContents = this.getClipboardContents()
-
-    // Check if can't paste because of missing table
-    if (clipboardContents && !_.all(clipboardContents.tables, (table: string) => this.props.schema.getTable(table))) {
-      cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item."
-    }
-
-    const renderWidget = (options: any) => {
-      const widget = WidgetFactory.createWidget(options.type)
-
-      // Get filters (passed in plus dashboard widget scoper filters)
-      let filters = compiledFilters.concat(this.state.widgetScoper.getFilters(options.id))
-
-      // Extend the filters to include implicit filters (filter children in 1-n relationships)
-      if (this.props.design.implicitFiltersEnabled || this.props.design.implicitFiltersEnabled == null) {
-        // Default is true
-        const implicitFilterBuilder = new ImplicitFilterBuilder(this.props.schema)
-        filters = implicitFilterBuilder.extendFilters(filterableTables, filters)
-      }
-
-      const widgetElem = R(WidgetComponent, {
-        key: options.id,
-        id: options.id,
-        type: options.type,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        dashboardDataSource: this.props.dashboardDataSource,
-        design: options.design,
-        scope: this.state.widgetScoper.getScope(options.id),
-        filters,
-        onScopeChange: this.handleScopeChange.bind(null, options.id),
-        onDesignChange: options.onDesignChange,
-        width: options.width,
-        height: options.height,
-        onRowClick: this.props.onRowClick,
-        namedStrings: this.props.namedStrings,
-        tocEntries,
-        onScrollToTOCEntry: this.handleScrollToTOCEntry,
-        // Keep references to widget elements
-        widgetRef: this.compRef.bind(null, options.id),
-        refreshKey: this.props.refreshKey
-      })
-
-      return widgetElem
-    }
-
-    const style: CSSProperties = {
-      height: "100%",
-      position: "relative"
-    }
-
-    if (!this.props.printMode) {
-      // Prevent this block from taking up too much space. Scrolling handled by layout manager.
-      // Setting overflow-x stops the inner div from becoming too tall
-      style.overflowX = "auto"
-    }
-
-    // Render widget container
-    return R(
-      "div",
-      { style },
-      !this.props.hideScopes ? this.renderScopes() : undefined,
-
-      layoutManager.renderLayout({
-        items: this.props.design.items,
-        onItemsChange: this.props.onDesignChange != null ? this.handleItemsChange : undefined,
-        style: this.props.design.style || null,
-        layoutOptions: getLayoutOptions(this.props.design),
-        renderWidget,
-        clipboard: clipboardContents?.block,
-        onClipboardChange: this.handleClipboardChange,
-        cantPasteMessage
-      })
-    )
-  }
-}