@mwater/visualization 5.4.1 → 5.4.3

package/src/widgets/TOCWidget.tsx

@@ -0,0 +1,281 @@
+import React, { useState } from "react"
+import _ from "lodash"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import Widget, { CreateViewElementOptions, TOCEntry } from "./Widget"
+import DropdownWidgetComponent from "./DropdownWidgetComponent"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+import produce from "immer"
+import { Schema } from "@mwater/expressions"
+
+export interface TOCWidgetDesign {
+  /** Header text. Defaults to blank */
+  header?: string
+  /** Border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy */
+  borderWeight?: number
+  /** True/false for prepending numbering to entries (e.g. 3.4.1) */
+  numbering?: boolean
+}
+
+/**
+ * Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+ */
+export default class TOCWidget extends Widget {
+  /** Creates a React element that is a view of the widget */
+  createViewElement(options: CreateViewElementOptions) {
+    return <TOCWidgetComponent
+      design={options.design}
+      onDesignChange={options.onDesignChange ?? undefined}
+      width={options.width}
+      height={options.height}
+      tocEntries={options.tocEntries}
+      onScrollToTOCEntry={options.onScrollToTOCEntry}
+      translate={options.translate}
+    />
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return true
+  }
+
+  getTranslatableStrings(design: TOCWidgetDesign, schema: Schema): string[] {
+    const strings: string[] = []
+    if (design.header) {
+      strings.push(design.header)
+    }
+    return strings
+  }
+}
+
+interface TOCWidgetComponentProps {
+  design: TOCWidgetDesign
+  /** Called with new design. null/undefined for readonly */
+  onDesignChange?: (design: TOCWidgetDesign) => void
+  width?: number
+  height?: number
+  tocEntries?: TOCEntry[]
+  onScrollToTOCEntry?: (widgetId: string, id: any) => void
+  translate: (input: string) => string
+}
+
+function TOCWidgetComponent(props: TOCWidgetComponentProps) {
+  const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props
+  const [editing, setEditing] = useState(false)
+
+  const handleStartEditing = () => {
+    setEditing(true)
+  }
+
+  const handleEndEditing = () => {
+    setEditing(false)
+  }
+
+  const renderEditor = () => {
+    if (!editing) {
+      return null
+    }
+
+    // Create editor
+    const editor = <TOCWidgetDesignerComponent
+      design={design}
+      onDesignChange={onDesignChange!}
+    />
+
+    return <ModalPopupComponent
+      showCloseX={true}
+      header={T`Table of Contents Options`}
+      onClose={handleEndEditing}
+    >
+      {editor}
+    </ModalPopupComponent>
+  }
+
+  const renderContent = () => {
+    return <TOCWidgetViewComponent
+      design={design}
+      onDesignChange={onDesignChange}
+      width={width}
+      height={height}
+      tocEntries={tocEntries}
+      onScrollToTOCEntry={onScrollToTOCEntry}
+      translate={translate}
+    />
+  }
+
+  const dropdownItems = []
+  if (onDesignChange != null) {
+    dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: handleStartEditing })
+  }
+
+  // Wrap in a simple widget
+  return <div onDoubleClick={handleStartEditing}>
+    {onDesignChange != null ? renderEditor() : undefined}
+    <DropdownWidgetComponent
+      width={width}
+      height={height}
+      dropdownItems={dropdownItems}
+    >
+      {renderContent()}
+    </DropdownWidgetComponent>
+  </div>
+}
+
+interface TOCWidgetViewComponentProps {
+  design: TOCWidgetDesign
+  onDesignChange?: (design: TOCWidgetDesign) => void
+  width?: number
+  height?: number
+  tocEntries?: TOCEntry[]
+  onScrollToTOCEntry?: (widgetId: string, id: any) => void
+  translate: (input: string) => string
+}
+
+// Displays the contents of the widget
+function TOCWidgetViewComponent(props: TOCWidgetViewComponentProps) {
+  const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props
+
+  const handleEntryClick = (tocEntry: TOCEntry) => {
+    return onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id)
+  }
+
+  const renderTOCEntry = (tocEntry: TOCEntry, index: number) => {
+    // Find indentation number (e.g "1.3.2") by counting # backwards that are same level with no level lower
+    let level
+    let indentation = ""
+    if (design.numbering) {
+      // For each level up to the current entry's level
+      for (let level = 1; level <= tocEntry.level; level++) {
+        let value = 0
+        // Count entries at this level up to current index
+        for (let i = 0; i <= index; i++) {
+          const entry = tocEntries?.[i]
+          if (!entry) {
+            continue
+          }
+          if (entry.level === level) {
+            value++
+          } else if (entry.level < level) {
+            // Reset counter when we hit a higher level
+            value = 0
+          }
+        }
+        indentation += `${value}.`
+      }
+      indentation += " "
+    }
+
+    return <div key={index} style={{ paddingLeft: tocEntry.level * 8 - 8 }}>
+      <a className="link-plain" onClick={() => handleEntryClick(tocEntry)}>
+        {indentation}
+        <span>{translate(tocEntry.text)}</span>
+      </a>
+    </div>
+  }
+
+  // Get border
+  const border = (() => {
+    switch (design.borderWeight) {
+      case 0:
+        return "none"
+      case 1:
+        return "solid 1px #f4f4f4"
+      case 2:
+        return "solid 1px #ccc"
+      case 3:
+        return "solid 1px #888"
+    }
+  })()
+
+  return <div
+    style={{
+      width,
+      height,
+      border,
+      padding: 5,
+      margin: 1
+    }}
+  >
+    {/* Render header */}
+    <div style={{ fontWeight: "bold" }}>{design.header ? props.translate(design.header) : ""}</div>
+    {_.map(tocEntries || [], (tocEntry, i) => {
+      return renderTOCEntry(tocEntry, i)
+    })}
+
+    {/* Add placeholder if none and editable */}
+    {onDesignChange && (tocEntries || []).length === 0
+      ? <div className="text-muted">
+        {T`Table of Contents will appear here as text blocks with headings are added to the dashboard`}
+      </div>
+      : undefined}
+  </div>
+}
+
+interface TOCWidgetDesignerProps {
+  design: TOCWidgetDesign
+  onDesignChange: (design: TOCWidgetDesign) => void
+}
+
+// Designer for TOC widget options
+function TOCWidgetDesignerComponent(props: TOCWidgetDesignerProps) {
+  const { design, onDesignChange } = props
+
+  // Updates design with the specified changes
+  const handleUpdate = (field: keyof TOCWidgetDesign) => (value: any) => {
+    onDesignChange(produce(design, draft => {
+      draft[field] = value
+    }))
+  }
+
+  return <div>
+    <ui.FormGroup label={T`Header`}>
+      <ui.TextInput
+        value={design.header || ""}
+        onChange={handleUpdate("header")}
+        placeholder={T`None`}
+      />
+    </ui.FormGroup>
+    <ui.FormGroup label={T`Border`}>
+      <BorderComponent
+        value={design.borderWeight || 0}
+        onChange={handleUpdate("borderWeight")}
+      />
+    </ui.FormGroup>
+    <ui.FormGroup label={T`Numbering`}>
+      <ui.Radio
+        inline={true}
+        value={design.numbering || false}
+        radioValue={true}
+        onChange={handleUpdate("numbering")}
+      >
+        {T`On`}
+      </ui.Radio>
+      <ui.Radio
+        inline={true}
+        value={design.numbering || false}
+        radioValue={false}
+        onChange={handleUpdate("numbering")}
+      >
+        {T`Off`}
+      </ui.Radio>
+    </ui.FormGroup>
+  </div>
+}
+
+interface BorderComponentProps {
+  value?: number
+  defaultValue?: number
+  onChange: (value: number) => void
+}
+
+// Allows setting border heaviness
+function BorderComponent(props: BorderComponentProps) {
+  const { value, defaultValue, onChange } = props
+  const currentValue = value != null ? value : defaultValue
+
+  return <div>
+    <ui.Radio inline={true} value={currentValue} radioValue={0} onChange={onChange}>{T`None`}</ui.Radio>
+    <ui.Radio inline={true} value={currentValue} radioValue={1} onChange={onChange}>{T`Light`}</ui.Radio>
+    <ui.Radio inline={true} value={currentValue} radioValue={2} onChange={onChange}>{T`Medium`}</ui.Radio>
+    <ui.Radio inline={true} value={currentValue} radioValue={3} onChange={onChange}>{T`Heavy`}</ui.Radio>
+  </div>
+}

package/src/widgets/Widget.ts

@@ -10,16 +10,16 @@ export interface CreateViewElementOptions {
   dataSource: DataSource
   /** Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource. **/
   widgetDataSource: WidgetDataSource
-  /** widget design **/
-  design: object
+  /** widget design */
+  design: any
   /** scope of the widget (when the widget self-selects a particular scope) **/
   scope?: WidgetScope | null
   /** array of filters to apply.**/
   filters: JsonQLFilter[]
   /** called with scope of widget **/
-  onScopeChange: (scope: WidgetScope | null) => void
+  onScopeChange?: (scope: WidgetScope | null) => void
   /** called with new design. null/undefined for readonly **/
-  onDesignChange?: { (design: object): void } | null
+  onDesignChange?: ((design: any) => void) | null
   /** width in pixels on screen **/
   width?: number
   /** height in pixels on screen **/
@@ -32,7 +32,7 @@ export interface CreateViewElementOptions {
   namedStrings?: { [key: string]: string }
 
   /** Entries in the table of content */
-  tocEntries?: string[]
+  tocEntries?: TOCEntry[]
 
   /** the widget callback ref */
   widgetRef?: (widget: any) => void
@@ -42,8 +42,23 @@ export interface CreateViewElementOptions {
 
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display. Returns same string when editing. */
+  translate: (input: string) => string
+}
+
+/** An entry in the table of contents */
+export interface TOCEntry {
+  id: any
+  widgetId: string
+  level: number
+  text: string
 }
 
+
 export default class Widget {
   /** Creates a React element that is a view of the widget */
   createViewElement(options: CreateViewElementOptions): ReactElement<any> {
@@ -83,4 +98,9 @@ export default class Widget {
   getTOCEntries(design: any, namedStrings?: { [key: string]: string }): { id: string; text: string; level: number }[] {
     return []
   }
+
+  /** Gets any strings that should be translated */
+  getTranslatableStrings(design: any, schema: Schema): string[] {
+    return []
+  }
 }

package/src/widgets/WidgetScopesViewComponent.ts

@@ -47,7 +47,8 @@ export default class WidgetScopesViewComponent extends React.Component<WidgetSco
       "div",
       { className: "alert alert-info" },
       R("span", { className: "fas fa-filter" }),
-      T` Filters: `,
+      " ",
+      T`Filters: `,
       _.map(_.keys(scopes), (id) => this.renderScope(id, scopes[id]))
     )
   }

package/src/widgets/charts/Chart.ts

@@ -11,7 +11,7 @@ export interface ChartCreateViewElementOptions {
   /** data source to use. Only used when designing, for display uses data **/
   dataSource: DataSource
 
-  /** Chart design **/
+  /** Chart design. Should already be translated. */
   design: any
 
   /** called with new design. null/undefined for readonly **/
@@ -37,6 +37,9 @@ export interface ChartCreateViewElementOptions {
 
   /** Called with (tableId, rowId) when item is clicked **/
   onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Locale to use for display */
+  locale: string
 }
 
 export default class Chart {
@@ -98,17 +101,9 @@ export default class Chart {
     throw new Error("Not implemented")
   }
 
-  // Create a view element for the chart
-  // Options include:
-  //   schema: schema to use
-  //   dataSource: dataSource to use
-  //   design: design of the chart
-  //   onDesignChange: when design changes
-  //   data: results from queries
-  //   width, height: size of the chart view
-  //   scope: current scope of the view element
-  //   onScopeChange: called when scope changes with new scope
-  //   onRowClick: Called with (tableId, rowId) when item is clicked
+  /** Create a view element for the chart.
+   * Chart design should already be translated. This is handled by ChartViewComponent.
+   */
   createViewElement(options: ChartCreateViewElementOptions): ReactNode {
     throw new Error("Not implemented")
   }
@@ -137,4 +132,28 @@ export default class Chart {
   getPlaceholderIcon() {
     return ""
   }
+
+  /** Get a list of translatable strings in the design. No need to override in subclasses. Design should already be cleaned. */
+  getTranslatableStrings(design: any, schema: Schema): string[] {
+    const strings = new Set<string>()
+  
+    // Create collector function that just saves strings and returns them unchanged
+    const collectStrings = (str: string) => {
+      // Only collect non-empty strings
+      if (str) {
+        strings.add(str)
+      }
+      return str
+    }
+  
+    // Use existing translation function but with collector
+    this.translateDesign(design, collectStrings)
+  
+    return Array.from(strings)
+  }
+
+  /** Translates the design. Override in subclasses. Design is already cleaned. */
+  translateDesign(design: any, translate: (input: string) => string): any {
+    return design
+  }
 }

package/src/widgets/charts/ChartViewComponent.ts

@@ -38,6 +38,12 @@ export interface ChartViewComponentProps {
 
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display */
+  translate: (input: string) => string
 }
 
 interface ChartViewComponentState {
@@ -197,15 +203,18 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
     if (this.state.dataError) {
       return this.renderError()
     }
+    
+    // Translate design if needed
+    const translatedDesign = this.props.onDesignChange || !this.props.translate || !this.state.validDesign ? this.state.validDesign : this.props.chart.translateDesign(this.state.validDesign, this.props.translate)
 
     return R(
       "div",
       { style },
-      this.state.validDesign
+      translatedDesign
         ? this.props.chart.createViewElement({
             schema: this.props.schema,
             dataSource: this.props.dataSource,
-            design: this.state.validDesign,
+            design: translatedDesign,
             onDesignChange: this.props.onDesignChange,
             data: this.state.data,
             scope: this.props.scope,
@@ -213,7 +222,8 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
             width: this.props.width,
             height: this.props.height,
             onRowClick: this.props.onRowClick,
-            filters: this.props.filters
+            filters: this.props.filters,
+            locale: this.props.locale,
           })
         : undefined,
       this.state.dataLoading ? this.renderSpinner() : undefined

package/src/widgets/charts/ChartWidget.ts

@@ -41,7 +41,9 @@ export default class ChartWidget extends Widget {
       width: options.width,
       height: options.height,
       onRowClick: options.onRowClick,
-      refreshKey: options.refreshKey
+      refreshKey: options.refreshKey,
+      locale: options.locale,
+      translate: options.translate
     })
   }
 
@@ -70,4 +72,12 @@ export default class ChartWidget extends Widget {
   isAutoHeight() {
     return this.chart.isAutoHeight()
   }
+
+  /** Get a list of translatable strings in the design */
+  getTranslatableStrings(design: any, schema: Schema) {
+    // Clean design first
+    const cleanDesign = this.chart.cleanDesign(design, schema)
+
+    return this.chart.getTranslatableStrings(cleanDesign, schema)
+  }
 }

package/src/widgets/charts/ChartWidgetComponent.tsx

@@ -48,6 +48,12 @@ export interface ChartWidgetComponentProps {
 
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display */
+  translate: (input: string) => string
 }
 
 // Complete chart widget
@@ -134,6 +140,8 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       onScopeChange={this.props.onScopeChange}
       onRowClick={this.props.onRowClick}
       refreshKey={this.props.refreshKey}
+      locale={this.props.locale}
+      translate={this.props.translate}
     />
   }
 
@@ -251,7 +259,7 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       this.props.filters
     )
     if (!designError) {
-      dropdownItems.push({ label: T`Export Data`, icon: "save-file", onClick: this.handleSaveCsvFile })
+      dropdownItems.push({ label: T`Export Data`, onClick: this.handleSaveCsvFile })
     }
     if (this.props.onDesignChange != null) {
       dropdownItems.unshift({

package/src/widgets/charts/calendar/CalendarChart.ts

@@ -224,4 +224,33 @@ export default class CalendarChart extends Chart {
   getPlaceholderIcon() {
     return "fa-calendar"
   }
+
+  translateDesign(design: CalendarChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate title text
+      if (draft.titleText) {
+        draft.titleText = translate(draft.titleText)
+      }
+
+      // Translate axis category labels
+      if (draft.dateAxis?.categoryLabels) {
+        for (const key in draft.dateAxis.categoryLabels) {
+          draft.dateAxis.categoryLabels[key] = translate(draft.dateAxis.categoryLabels[key])
+        }
+      }
+      if (draft.valueAxis?.categoryLabels) {
+        for (const key in draft.valueAxis.categoryLabels) {
+          draft.valueAxis.categoryLabels[key] = translate(draft.valueAxis.categoryLabels[key])
+        }
+      }
+
+      // Translate null labels
+      if (draft.dateAxis?.nullLabel) {
+        draft.dateAxis.nullLabel = translate(draft.dateAxis.nullLabel)
+      }
+      if (draft.valueAxis?.nullLabel) {
+        draft.valueAxis.nullLabel = translate(draft.valueAxis.nullLabel)
+      }
+    })
+  }
 }

package/src/widgets/charts/calendar/CalendarChartViewComponent.tsx

@@ -113,7 +113,9 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
     const scopeData: WidgetScope = {
       name:
         this.axisBuilder.summarizeAxis(this.props.design.dateAxis!, this.context) +
-        T` is ` +
+        " " +
+        T`is` +
+        " " +
         this.axisBuilder.formatValue(this.props.design.dateAxis!, data, this.context),
       filter: {
         jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis!, data),

package/src/widgets/charts/imagemosaic/ImageMosaicChart.ts

@@ -227,4 +227,13 @@ export default class ImageMosaicChart extends Chart {
   getPlaceholderIcon() {
     return "fa-th"
   }
+
+  translateDesign(design: ImageMosaicChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate title text
+      if (draft.titleText) {
+        draft.titleText = translate(draft.titleText)
+      }
+    })
+  }
 }

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

@@ -1,3 +1,4 @@
+
 import _ from "lodash"
 import React from "react"
 import async from "async"
@@ -16,8 +17,8 @@ import { JsonQLFilter } from "../../.."
 import { JsonQLQuery } from "@mwater/jsonql"
 import LayeredChartViewComponent from "./LayeredChartViewComponent"
 import LayeredChartDesignerComponent from "./LayeredChartDesignerComponent"
+import { translateHtmlItems } from "../../../richtext/ExprItemsTranslator"
 
-// See LayeredChart Design.md for the design
 export default class LayeredChart extends Chart {
   cleanDesign(design: LayeredChartDesign, schema: Schema): LayeredChartDesign {
     const exprCleaner = new ExprCleaner(schema)
@@ -130,7 +131,7 @@ export default class LayeredChart extends Chart {
         return T`Missing Y Axis`
       }
 
-      if (!layer.axes.x && compiler.isXAxisRequired(design, layerId)) {
+      if (!layer.axes.x && compiler.isXAxisRequired(design)) {
         return T`Missing X Axis`
       }
       if (!layer.axes.color && compiler.isColorAxisRequired(design, layerId)) {
@@ -246,7 +247,9 @@ export default class LayeredChart extends Chart {
       height: options.height,
 
       scope: options.scope,
-      onScopeChange: options.onScopeChange
+      onScopeChange: options.onScopeChange,
+
+      locale: options.locale,
     }
 
     return React.createElement(LayeredChartViewComponent, props)
@@ -356,4 +359,69 @@ export default class LayeredChart extends Chart {
   getPlaceholderIcon() {
     return "fa-bar-chart"
   }
+
+  /** Translates the design */
+  translateDesign(design: LayeredChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate axis labels
+      if (draft.xAxisLabelText) {
+        draft.xAxisLabelText = translate(draft.xAxisLabelText)
+      }
+      if (draft.yAxisLabelText) {
+        draft.yAxisLabelText = translate(draft.yAxisLabelText)
+      }
+
+      // Translate layer names
+      for (const layer of draft.layers) {
+        if (layer.name) {
+          layer.name = translate(layer.name)
+        }
+
+        // Translate axis category labels
+        if (layer.axes.x?.categoryLabels) {
+          for (const key in layer.axes.x.categoryLabels) {
+            layer.axes.x.categoryLabels[key] = translate(layer.axes.x.categoryLabels[key])
+          }
+        }
+        if (layer.axes.y?.categoryLabels) {
+          for (const key in layer.axes.y.categoryLabels) {
+            layer.axes.y.categoryLabels[key] = translate(layer.axes.y.categoryLabels[key])
+          }
+        }
+        if (layer.axes.color?.categoryLabels) {
+          for (const key in layer.axes.color.categoryLabels) {
+            layer.axes.color.categoryLabels[key] = translate(layer.axes.color.categoryLabels[key])
+          }
+        }
+
+        // Translate null labels
+        if (layer.axes.x?.nullLabel) {
+          layer.axes.x.nullLabel = translate(layer.axes.x.nullLabel)
+        }
+        if (layer.axes.y?.nullLabel) {
+          layer.axes.y.nullLabel = translate(layer.axes.y.nullLabel)
+        }
+        if (layer.axes.color?.nullLabel) {
+          layer.axes.color.nullLabel = translate(layer.axes.color.nullLabel)
+        }
+      }
+
+      // Translate y thresholds
+      if (draft.yThresholds) {
+        for (const threshold of draft.yThresholds) {
+          if (threshold.label) {
+            threshold.label = translate(threshold.label)
+          }
+        }
+      }
+
+      // Translate header and footer using ExprItemsTranslator
+      if (draft.header) {
+        draft.header.items = translateHtmlItems(draft.header.items || [], translate)
+      }
+      if (draft.footer) {
+        draft.footer.items = translateHtmlItems(draft.footer.items || [], translate)
+      }
+    })
+  }
 }