@mwater/visualization 5.1.0 → 5.3.0

package/src/dashboards/DashboardViewComponent.tsx

@@ -0,0 +1,313 @@
+import _ from "lodash"
+import React, { CSSProperties, useEffect, useImperativeHandle, useRef, useMemo, useState } from "react"
+
+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, { RenderWidgetOptions } from "../layouts/LayoutManager"
+import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent"
+import { getLayoutOptions } from "./layoutOptions"
+import { WidgetComponent } from "./WidgetComponent"
+import { DashboardDataSource, DashboardDesign, JsonQLFilter } from ".."
+import { setPrintingModeEnabled } from "../maps/vectorMaps"
+import { WidgetDataSourcePrioritizer } from "./WidgetDataSourcePrioritizer"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+
+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
+}
+
+export interface DashboardViewComponentHandle {
+  print: () => Promise<void>
+}
+
+/**
+ * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
+ * Handles scoping and stores the state of scope
+ */
+const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, DashboardViewComponentProps>((props, ref) => {
+  const [widgetScoper, setWidgetScoper] = useState(new WidgetScoper())
+  const widgetComps = useRef<{ [widgetId: string]: any }>({})
+  const [forceUpdate, setForceUpdate] = useState(0)
+
+  const widgetDataSourcePrioritizer = useMemo(() => {
+    return new WidgetDataSourcePrioritizer(props.dashboardDataSource, 10)
+  }, [props.dashboardDataSource])
+
+  useEffect(() => {
+    return () => {
+      // Clear queue on component unmount
+      widgetDataSourcePrioritizer.cancel()
+    }
+  }, [widgetDataSourcePrioritizer])
+
+  useEffect(() => {
+    if (props.initialTOCEntryScroll) {
+      // Getting heights of widgets properly requires a 0 length timeout
+      setTimeout(() => {
+        handleScrollToTOCEntry(
+          props.initialTOCEntryScroll!.widgetId,
+          props.initialTOCEntryScroll!.entryId
+        )
+      }, 0)
+    }
+
+    // Add listener to localstorage to update clipboard display
+    window.addEventListener("storage", handleStorageChange)
+
+    return () => {
+      // Remove listener
+      window.removeEventListener("storage", handleStorageChange)
+    }
+  }, [props.initialTOCEntryScroll])
+
+  const handleStorageChange = () => {
+    setForceUpdate(forceUpdate + 1)
+  }
+
+  const handleScopeChange = (id: any, scope: any) => {
+    setWidgetScoper(widgetScoper.applyScope(id, scope))
+  }
+
+  const handleRemoveScope = (id: any) => {
+    setWidgetScoper(widgetScoper.applyScope(id, null))
+  }
+
+  const handleItemsChange = (items: any) => {
+    const design = _.extend({}, props.design, { items }) as DashboardDesign
+    props.onDesignChange!(design)
+  }
+
+  const handleClipboardChange = (block: any) => {
+    try {
+      // If empty, just set it
+      if (!block) {
+        window.localStorage.removeItem("DashboardViewComponent.clipboard")
+        setForceUpdate(forceUpdate + 1)
+        return
+      }
+
+      // Determine which tables are used (just peek for any uses of the table name. Not ideal, but easy)
+      const tables = _.pluck(
+        _.filter(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 }))
+      setForceUpdate(forceUpdate + 1)
+    } catch (err) {
+      return alert("Clipboard not available")
+    }
+  }
+
+  const getClipboardContents = () => {
+    try {
+      return JSON.parse(window.localStorage.getItem("DashboardViewComponent.clipboard") || "null")
+    } catch (err) {
+      return null
+    }
+  }
+
+  const print = async () => {
+    // Temporarily enable print mode for vector maps
+    try {
+      setPrintingModeEnabled(true)
+
+      // Create element at 1080 wide (use as standard printing width)
+      const elem = (
+        <div style={{ width: 1080 }}>
+          <DashboardViewComponent {...props} onDesignChange={undefined} printMode={true} />
+        </div>
+      )
+    
+      const printer = new ReactElementPrinter()
+      await printer.print(elem, { delay: 5000 })
+    } finally {
+      setPrintingModeEnabled(false)
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    print
+  }))
+
+  const getCompiledFilters = () => {
+    let compiledFilters = DashboardUtils.getCompiledFilters(
+      props.design,
+      props.schema,
+      DashboardUtils.getFilterableTables(props.design, props.schema)
+    )
+    compiledFilters = compiledFilters.concat(props.filters || [])
+    return compiledFilters
+  }
+
+  const getTOCEntries = (layoutManager: any) => {
+    const entries = []
+
+    for (let { id, type, design } of layoutManager.getAllWidgets(props.design.items)) {
+      const widget = WidgetFactory.createWidget(type)
+      // Add widgetId to each one
+      for (let entry of widget.getTOCEntries(design, props.namedStrings)) {
+        entries.push(_.extend({}, entry, { widgetId: id }))
+      }
+    }
+
+    return entries
+  }
+
+  const handleScrollToTOCEntry = (widgetId: any, entryId: any) => {
+    const widgetComp = widgetComps.current[widgetId]
+    if (!widgetComp) {
+      return
+    }
+
+    // Call scrollToTOCEntry if present
+    return widgetComp.scrollToTOCEntry?.(entryId)
+  }
+
+  const renderScopes = () => {
+    return (
+      <WidgetScopesViewComponent
+        scopes={widgetScoper.getScopes()}
+        onRemoveScope={handleRemoveScope}
+      />
+    )
+  }
+
+  const compRef = (widgetId: any, comp: any) => {
+    return (widgetComps.current[widgetId] = comp)
+  }
+
+  let cantPasteMessage = ""
+  const layoutManager = LayoutManager.createLayoutManager(props.design.layout)
+
+  const compiledFilters = getCompiledFilters()
+
+  // Get filterable tables
+  const filterableTables = DashboardUtils.getFilterableTables(props.design, props.schema)
+
+  // Determine toc entries
+  const tocEntries = getTOCEntries(layoutManager)
+
+  // Get clipboard contents
+  const clipboardContents = getClipboardContents()
+
+  // Check if can't paste because of missing table
+  if (clipboardContents && !_.all(clipboardContents.tables, (table: string) => props.schema.getTable(table))) {
+    cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item."
+  }
+
+  const renderWidget = (options: RenderWidgetOptions) => {
+    const widgetDataSource = widgetDataSourcePrioritizer.getWidgetDataSource(
+      options.type,
+      options.id, 
+      options.priority ?? 0
+    )
+
+    // Get filters (passed in plus dashboard widget scoper filters)
+    let filters = compiledFilters.concat(widgetScoper.getFilters(options.id))
+
+    // Extend the filters to include implicit filters (filter children in 1-n relationships)
+    if (props.design.implicitFiltersEnabled || props.design.implicitFiltersEnabled == null) {
+      // Default is true
+      const implicitFilterBuilder = new ImplicitFilterBuilder(props.schema)
+      filters = implicitFilterBuilder.extendFilters(filterableTables, filters)
+    }
+
+    const widgetElem = (
+      <WidgetComponent
+        key={options.id}
+        id={options.id}
+        type={options.type}
+        schema={props.schema}
+        dataSource={props.dataSource}
+        widgetDataSource={widgetDataSource}
+        design={options.design}
+        scope={widgetScoper.getScope(options.id)}
+        filters={filters}
+        onScopeChange={handleScopeChange.bind(null, options.id)}
+        onDesignChange={options.onDesignChange}
+        width={options.width}
+        height={options.height}
+        onRowClick={props.onRowClick}
+        namedStrings={props.namedStrings}
+        tocEntries={tocEntries}
+        onScrollToTOCEntry={handleScrollToTOCEntry}
+        // Keep references to widget elements
+        widgetRef={compRef.bind(null, options.id)}
+        refreshKey={props.refreshKey}
+      />
+    )
+
+    return widgetElem
+  }
+
+  const style: CSSProperties = {
+    height: "100%",
+    position: "relative"
+  }
+
+  if (!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 (
+    <LocaleContext.Provider value={props.design.locale ?? "en"}>
+    <div style={style}>
+      {!props.hideScopes ? renderScopes() : undefined}
+
+      {layoutManager.renderLayout({
+        items: props.design.items,
+        onItemsChange: props.onDesignChange != null ? handleItemsChange : undefined,
+        layoutOptions: getLayoutOptions(props.design),
+        renderWidget,
+        clipboard: clipboardContents?.block,
+        onClipboardChange: handleClipboardChange,
+        cantPasteMessage
+      })}
+    </div>
+    </LocaleContext.Provider>
+  )
+})
+
+export default DashboardViewComponent

package/src/dashboards/FontStyleEditor.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from "react"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import { expandFontFamily, FontStyle } from "./layoutOptions"
+import { default as ReactSelect } from "react-select"
+import { Select, FormGroup } from "@mwater/react-library/lib/bootstrap"
+import ColorComponent from "../ColorComponent"
+
+interface FontStyleEditorProps {
+  value: FontStyle
+  onChange: (value: FontStyle) => void
+}
+
+export const FontStyleEditor = ({ value, onChange }: FontStyleEditorProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenModal = () => setIsModalOpen(true)
+  const handleCloseModal = () => setIsModalOpen(false)
+
+  const handleSave = (newValue: FontStyle) => {
+    onChange(newValue)
+    handleCloseModal()
+  }
+
+  return <>
+    <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', border: 'solid 1px #DDD', padding: '4px', borderRadius: '6px', justifyContent: 'space-between' }} onClick={handleOpenModal}>
+      <div style={{
+        fontFamily: expandFontFamily(value.family),
+        fontSize: `${value.size}px`,
+        fontWeight: value.weight,
+        color: value.color
+      }}>
+        Sample
+      </div>
+      <div style={{ fontSize: '10px', color: '#888', marginTop: '2px' }}>
+        {value.family}, {value.size}px
+      </div>
+    </div>
+    {isModalOpen && (
+      <FontEditorModal
+        initialValue={value}
+        onSave={handleSave}
+        onCancel={handleCloseModal}
+      />
+    )}
+  </>
+}
+
+interface FontEditorModalProps {
+  initialValue: FontStyle
+  onSave: (value: FontStyle) => void
+  onCancel: () => void
+}
+
+const FontEditorModal: React.FC<FontEditorModalProps> = ({ initialValue, onSave, onCancel }) => {
+  const [currentValue, setCurrentValue] = useState<FontStyle>(initialValue)
+
+  const handleChange = (field: keyof FontStyle, value: string | number) => {
+    if (field == "family") {
+      setCurrentValue(prev => ({ ...prev, [field]: value as string, weight: "400" }))
+    }
+    else {
+      setCurrentValue(prev => ({ ...prev, [field]: value }))
+    }
+  }
+
+  // Generate font size options from 5 to 48
+  const fontSizeOptions = Array.from({ length: 44 }, (_, i) => i + 5).map(size => ({
+    value: size,
+    label: `${size}px`
+  }))
+
+  // If the font is variable, then the font weight options are much wider
+  const fontWeightOptions: string[] = []
+  if (currentValue.family === "Roboto") {
+    fontWeightOptions.push("100", "300", "400", "500", "700", "900")
+  }
+  else if (currentValue.family === "Lora") {
+    fontWeightOptions.push("400", "500", "600", "700")
+  }
+  else if (currentValue.family === "Inter") {
+    fontWeightOptions.push("100", "200", "300", "400", "500", "600", "700", "800", "900")
+  }
+  else if (currentValue.family === "Merriweather") {
+    fontWeightOptions.push("300", "400", "700", "900")
+  }
+  else if (currentValue.family === "Lato") {
+    fontWeightOptions.push("100", "300", "400", "700", "900")
+  }
+  else {
+    fontWeightOptions.push("400", "700")
+  }
+
+  return (
+    <ActionCancelModalComponent
+      title="Edit Font"
+      onAction={() => onSave(currentValue)}
+      onCancel={onCancel}
+    >
+      <div style={{
+        border: '1px solid #ccc',
+        padding: '10px',
+        marginBottom: '15px',
+        borderRadius: '4px'
+      }}>
+        <div style={{
+          marginBottom: '10px',
+          fontSize: '14px',
+          fontWeight: 'bold'
+        }}>
+          Sample Text:
+        </div>
+        <div style={{
+          fontFamily: expandFontFamily(currentValue.family),
+          fontSize: `${currentValue.size}px`,
+          fontWeight: currentValue.weight,
+          color: currentValue.color
+        }}>
+          The quick brown fox jumps over the lazy dog.
+        </div>
+      </div>
+      <FormGroup label="Font Family">
+        <ReactSelect
+          value={{ value: currentValue.family, label: currentValue.family }}
+          onChange={(option) => handleChange('family', option?.value || '')}
+          options={[
+            { value: 'Helvetica Neue', label: 'Helvetica Neue' },
+            { value: 'Georgia', label: 'Georgia' },
+            { value: 'Inter', label: 'Inter' },
+            { value: 'Lato', label: 'Lato' },
+            { value: 'Lora', label: 'Lora' },
+            { value: 'Lucida Grande', label: 'Lucida Grande' },
+            { value: 'Merriweather', label: 'Merriweather' },
+            { value: 'Roboto', label: 'Roboto' },
+          ]}
+          formatOptionLabel={(option) => (
+            <span style={{ fontFamily: expandFontFamily(option.value) }}>{option.label}</span>
+          )}
+          isClearable={false}
+          menuPortalTarget={document.body}
+          styles={{ menuPortal: (style) => ({ ...style, zIndex: 2000 }) }}
+        />
+      </FormGroup>
+      <FormGroup label="Font Size:" horizontal>
+        <Select
+          value={currentValue.size}
+          onChange={(value) => handleChange('size', value || 12)}
+          options={fontSizeOptions}
+        />
+      </FormGroup>
+      <FormGroup label="Font Weight:" horizontal>
+        <Select
+          value={currentValue.weight}
+          onChange={(value) => handleChange('weight', value as string)}
+          options={fontWeightOptions.map(weight => ({ value: weight, label: weight }))}
+        />
+      </FormGroup>
+      <FormGroup label="Font Color:" horizontal>
+        <ColorComponent
+          color={currentValue.color}
+          onChange={(value) => handleChange('color', value!)}
+          disableReset
+        />
+      </FormGroup>
+    </ActionCancelModalComponent>
+  )
+}