@mwater/visualization 5.4.1 → 5.4.3

package/src/dashboards/DashboardComponent.tsx

@@ -1,7 +1,5 @@
 import _ from "lodash"
 import React, { ReactNode } from "react"
-const R = React.createElement
-
 import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
 import UndoStack from "../UndoStack"
 import * as DashboardUtils from "./DashboardUtils"
@@ -15,7 +13,7 @@ import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent
 import { getLayoutOptions } from "./layoutOptions"
 import { DashboardDesign } from "./DashboardDesign"
 import DashboardDataSource from "./DashboardDataSource"
-import { JsonQLFilter } from ".."
+import { JsonQLFilter, languages } from ".."
 import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
 
 export interface DashboardComponentProps {
@@ -61,6 +59,9 @@ export interface DashboardComponentProps {
 
   /** Called when the edit mode changes */
   onEditModeChange?: (editing: boolean) => void
+
+  /** Locale to prefer if available */
+  preferredLocale?: string
 }
 
 export interface DashboardComponentState {
@@ -70,6 +71,8 @@ export interface DashboardComponentState {
   layoutOptionsOpen: boolean
   hideQuickfilters: boolean
   refreshKey: number
+  /** Locale to use for display. Ignored if in edit mode */
+  locale: string
 }
 
 /** Dashboard component that includes an action bar at the top
@@ -87,6 +90,15 @@ export default class DashboardComponent extends React.Component<DashboardCompone
 
     const layoutOptions = getLayoutOptions(props.design)
 
+    // Prefer the T.en locale if available when loading the dashboard
+    let initialLocale = props.design.locale || "en"
+    const otherLocales = props.design.otherLocales || []
+    if (props.preferredLocale && otherLocales.includes(props.preferredLocale)) {
+      initialLocale = props.preferredLocale
+    } else if (otherLocales.includes(T.locale)) {
+      initialLocale = T.locale
+    }
+
     this.state = {
       undoStack: new UndoStack().push(props.design),
       quickfiltersValues: props.quickfiltersValues || null,
@@ -96,7 +108,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       layoutOptionsOpen: false,
       hideQuickfilters:
         layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
-      refreshKey: 1
+      refreshKey: 1,
+      locale: initialLocale
     }
 
     if (props.onEditModeChange) {
@@ -207,118 +220,165 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     return compiledFilters
   }
 
+  /** Translate function to use for display. Do not use when editing. */
+  translate = (input: string) => { 
+    const designLocale = this.props.design.locale ?? "en"
+    const displayLocale = this.state.editing ? designLocale : (this.state.locale ?? designLocale ?? "en")
+      if (designLocale === displayLocale) {
+        return input
+      }
+    return this.props.design.translations?.[displayLocale]?.[input] ?? input
+  }
+
   renderEditingSwitch() {
-    return R(
-      "a",
-      {
-        key: "edit",
-        className: `btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`,
-        onClick: this.handleToggleEditing
-      },
-      R("span", { className: "fas fa-pencil-alt" }),
-      this.state.editing ? T` Editing` : T` Edit`
+    return (
+      <a
+        key="edit"
+        className={`btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`}
+        onClick={this.handleToggleEditing}
+      >
+        <span className="fas fa-pencil-alt"/>
+        {" "}
+        {this.state.editing ? T`Editing` : T`Edit`}
+      </a>
     )
   }
 
   renderStyle() {
-    return R(
-      "button",
-      { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions },
-      R("span", { className: "fa fa-mobile" }),
-      R("span", { className: "hide-600px" }, T` Layout `)
+    return (
+      <button type="button" key="style" className="btn btn-link btn-sm" onClick={this.handleOpenLayoutOptions}>
+        <span className="fa fa-mobile"/>
+        <span className="hide-600px"> {T`Layout`}</span>
+      </button>
     )
   }
 
   renderActionLinks() {
-    return R(
-      "div",
-      null,
-      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" }, T` 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" }, T` Redo`)
-          )
-        ]
-        : undefined,
-      R(
-        "a",
-        { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
-        R("span", { className: "fas fa-print" }),
-        R("span", { className: "hide-600px" }, T` Print`)
-      ),
-      R(
-        "a",
-        { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
-        R("span", { className: "fas fa-sync" }),
-        R("span", { className: "hide-600px" }, T` Refresh`)
-      ),
-      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" }, T` Show Quickfilters`)
-        )
-        : undefined,
-
-      // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
-      //   R('span', className: "glyphicon glyphicon-download-alt")
-      //   " 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" }, T` Settings`)
-        )
-        : undefined,
-      this.state.editing ? this.renderStyle() : undefined,
-      this.props.extraTitleButtonsElem,
-      this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined
+    return (
+      <div>
+        {this.state.editing
+          ? [
+            <a
+              key="undo"
+              className={`btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`}
+              onClick={this.handleUndo}
+            >
+              <span className="fas fa-caret-left"/>
+              <span className="hide-600px"> {T`Undo`}</span>
+            </a>,
+            " ",
+            <a
+              key="redo"
+              className={`btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`}
+              onClick={this.handleRedo}
+            >
+              <span className="fas fa-caret-right"/>
+              <span className="hide-600px"> {T`Redo`}</span>
+            </a>
+          ]
+          : undefined}
+        {!this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+          ? <div key="translations" className="dropdown d-inline-block">
+            <a 
+              className="btn btn-link btn-sm dropdown-toggle"
+              data-bs-toggle="dropdown"
+            >
+              <span className="fal fa-globe"/>
+              {" "}
+              {this.state.locale}
+            </a>
+            <ul className="dropdown-menu dropdown-menu-end">
+              {[this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => 
+                <li key={locale}>
+                  <a
+                    className="dropdown-item"
+                    onClick={() => this.setState({ locale: locale })}
+                  >
+                    {languages.find(l => l.code === locale)?.name || locale}
+                  </a>
+                </li>
+              )}
+            </ul>
+          </div>
+          : undefined}
+        <a key="print" className="btn btn-link btn-sm" onClick={this.handlePrint}>
+          <span className="fas fa-print"/>
+          <span className="hide-600px"> {T`Print`}</span>
+        </a>
+        <a key="refresh" className="btn btn-link btn-sm" onClick={this.handleRefreshData}>
+          <span className="fas fa-sync"/>
+          <span className="hide-600px"> {T`Refresh`}</span>
+        </a>
+        {this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+          ? <a key="showQuickfilters" className="btn btn-link btn-sm" onClick={this.handleShowQuickfilters}>
+            <span className="fa fa-filter"/>
+            <span className="hide-600px"> {T`Show Quickfilters`}</span>
+          </a>
+          : undefined}
+
+        {this.state.editing
+          ? <a key="settings" className="btn btn-link btn-sm" onClick={this.handleSettings}>
+            <span className="fas fa-cog"/>
+            <span className="hide-600px"> {T`Settings`}</span>
+          </a>
+          : undefined}
+        {this.state.editing ? this.renderStyle() : undefined}
+        {this.props.extraTitleButtonsElem}
+        {this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined}
+      </div>
     )
   }
 
   renderTitleBar() {
-    return R(
-      "div",
-      { style: { height: 40, padding: 4 } },
-      R("div", { style: { float: "right" } }, this.renderActionLinks()),
-      this.props.titleElem
+    return (
+      <div style={{ height: 40, padding: 4 }}>
+        <div style={{ float: "right" }}>{this.renderActionLinks()}</div>
+        {this.props.titleElem}
+      </div>
     )
   }
 
   renderQuickfilter() {
-    return R(QuickfiltersComponent, {
-      design: this.props.design.quickfilters || [],
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      quickfiltersDataSource: this.props.dashboardDataSource.getQuickfiltersDataSource(),
-      values: this.state.quickfiltersValues || undefined,
-      onValuesChange: (values: any) => this.setState({ quickfiltersValues: values }),
-      locks: this.props.quickfilterLocks,
-      filters: this.getCompiledFilters(),
-      hideTopBorder: this.props.hideTitleBar,
+    return <QuickfiltersComponent
+      design={this.props.design.quickfilters || []}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      quickfiltersDataSource={this.props.dashboardDataSource.getQuickfiltersDataSource()}
+      values={this.state.quickfiltersValues || undefined}
+      onValuesChange={(values: any) => this.setState({ quickfiltersValues: values })}
+      locks={this.props.quickfilterLocks}
+      filters={this.getCompiledFilters()}
+      hideTopBorder={this.props.hideTitleBar}
       // Don't hide if title bar is hidden as it can't be shown again
-      onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
-    })
+      onHide={() => this.setState({ hideQuickfilters: true })}
+      translate={this.translate}
+    />
+  }
+
+  renderFloatingShowQuickfiltersButton() {
+    // Only show if:
+    // 1. Quick filters exist
+    // 2. Quick filters are hidden
+    // 3. Title bar is hidden (since otherwise button is in title bar)
+    if (!this.props.design.quickfilters?.length || !this.state.hideQuickfilters || !this.props.hideTitleBar) {
+      return null
+    }
+
+    return (
+      <div style={{ 
+        position: "absolute",
+        top: 5,
+        right: 20,
+        zIndex: 1000
+      }}>
+        <button 
+          className="btn btn-link btn-sm" 
+          onClick={() => this.setState({ hideQuickfilters: false })}
+        >
+          <i className="fa fa-angle-double-down"/>
+        </button>
+      </div>
+    )
   }
 
   refDashboardView = (el: any) => {
@@ -337,37 +397,40 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       )
     )
 
-    const dashboardView = R(DashboardViewComponent, {
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      dashboardDataSource: this.props.dashboardDataSource,
-      ref: this.refDashboardView,
-      design: this.props.design,
-      onDesignChange: this.state.editing ? this.props.onDesignChange : undefined,
-      filters,
-      onRowClick: this.props.onRowClick,
-      namedStrings: this.props.namedStrings,
-      hideScopes: this.state.hideQuickfilters,
-      refreshKey: this.state.refreshKey
-    })
-
-    const readonlyDashboardView = R(DashboardViewComponent, {
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      dashboardDataSource: this.props.dashboardDataSource,
-      ref: this.refDashboardView,
-      design: this.props.design,
-      filters,
-      onRowClick: this.props.onRowClick,
-      namedStrings: this.props.namedStrings,
-      hideScopes: this.state.hideQuickfilters
-    })
-
+    const displayLocale = this.state.editing ? this.props.design.locale || "en" : this.state.locale
+
+    const dashboardView = <DashboardViewComponent
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      dashboardDataSource={this.props.dashboardDataSource}
+      ref={this.refDashboardView}
+      design={this.props.design}
+      onDesignChange={this.state.editing ? this.props.onDesignChange : undefined}
+      filters={filters}
+      onRowClick={this.props.onRowClick}
+      namedStrings={this.props.namedStrings}
+      hideScopes={this.state.hideQuickfilters}
+      refreshKey={this.state.refreshKey}
+      locale={displayLocale}
+    />
+
+    const readonlyDashboardView = <DashboardViewComponent
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      dashboardDataSource={this.props.dashboardDataSource}
+      ref={this.refDashboardView}
+      design={this.props.design}
+      filters={filters}
+      onRowClick={this.props.onRowClick}
+      namedStrings={this.props.namedStrings}
+      hideScopes={this.state.hideQuickfilters}
+      locale={displayLocale}
+    />
 
     // Pass active tables down to table select components so they can present a shorter list
     return <ActiveTablesContext.Provider
       value={DashboardUtils.getFilterableTables(this.props.design, this.props.schema)}>
-      <LocaleContext.Provider value={this.props.design.locale ?? "en"}>
+      <LocaleContext.Provider value={displayLocale}>
         <div style={{
           display: "grid",
           gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
@@ -376,6 +439,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
           {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
           <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
           {dashboardView}
+          {this.renderFloatingShowQuickfiltersButton()}
           {this.props.onDesignChange != null && (
             <SettingsModalComponent
               onDesignChange={this.handleDesignChange}

package/src/dashboards/DashboardDesign.ts

@@ -2,6 +2,7 @@ import { Quickfilter } from "../quickfilter/Quickfilter"
 import { Expr } from "@mwater/expressions"
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions"
 import { GlobalFilter } from "../GlobalFilter"
+import { LayoutBlock } from "../layouts/blocks/blockUtils"
 
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
@@ -9,7 +10,7 @@ import { GlobalFilter } from "../GlobalFilter"
  */
 export interface DashboardDesign {
   /** dashboard items. Format depends on layout of dashboard. See layouts/.../README.md */
-  items: any // TODO
+  items: LayoutBlock
 
   /** array of quick filters (user-selectable filters). See quickfilter/README.md */
   quickfilters?: Quickfilter[]
@@ -26,9 +27,15 @@ export interface DashboardDesign {
   /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
   filters?: { [tableId: string]: Expr }
 
-  /** optional locale (e.g. "fr") to use for display */
+  /** optional locale (e.g. "fr") to use for display. Defaults to "en" */
   locale?: string
 
+  /** Other locales that the dashboard is available in. */
+  otherLocales?: string[]
+
+  /** Translation map for dashboard. Maps locale to translation map. Does not include default locale. */
+  translations?: { [locale: string]: { [key: string]: string } }
+
   /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
   implicitFiltersEnabled?: boolean
 

package/src/dashboards/DashboardUtils.ts

@@ -25,6 +25,45 @@ export function getFilterableTables(design: DashboardDesign, schema: Schema) {
   return filterableTables
 }
 
+/** Gets all translatable strings from a dashboard */
+export function getTranslatableStringsFromDashboard(design: DashboardDesign, schema: Schema): string[] {
+  const layoutManager = LayoutManager.createLayoutManager(design.layout)
+
+  // Get translatable strings from layout manager
+  let strings = getTranslatableStringsFromLayoutManager(layoutManager, design.items, schema)
+
+  // Get translatable strings from quickfilters
+  if (design.quickfilters) {
+    for (let quickfilter of design.quickfilters) {
+      if (quickfilter.label) {
+        strings.push(quickfilter.label)
+      }
+    }
+  }
+
+  // Remove duplicates
+  return _.uniq(strings)
+}
+
+/** Gets translatable strings from a layout manager and items */
+export function getTranslatableStringsFromLayoutManager(
+  layoutManager: LayoutManager,
+  items: any,
+  schema: Schema
+) {
+  let strings: string[] = []
+  for (let widgetItem of layoutManager.getAllWidgets(items)) {
+    // Create widget
+    const widget = WidgetFactory.createWidget(widgetItem.type)
+
+    // Get translatable strings
+    strings = strings.concat(widget.getTranslatableStrings(widgetItem.design, schema))
+  }
+
+  // Remove duplicates
+  return _.uniq(strings)
+}
+
 /** Get filters from props filters combined with dashboard filters */
 export function getCompiledFilters(
   design: DashboardDesign,

package/src/dashboards/DashboardViewComponent.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import React, { CSSProperties, useEffect, useImperativeHandle, useRef, useMemo, useState } from "react"
+import React, { CSSProperties, useEffect, useImperativeHandle, useRef, useMemo, useState, useCallback } from "react"
 
 import ImplicitFilterBuilder from "../ImplicitFilterBuilder"
 import * as DashboardUtils from "./DashboardUtils"
@@ -51,6 +51,9 @@ export interface DashboardViewComponentProps {
 
   /** Change to force a refresh */
   refreshKey?: any
+
+  /** Locale to use for display. Defaults to dashboard design locale. */
+  locale?: string
 }
 
 export interface DashboardViewComponentHandle {
@@ -211,6 +214,20 @@ const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, Da
     )
   }
 
+  /** Locale that the dashboard design is in */
+  const designLocale = props.design.locale ?? "en"
+  
+  /** Locale to display the dashboard in. If editing, always use design locale. */
+  const displayLocale = props.onDesignChange != null ? designLocale : (props.locale ?? designLocale ?? "en")
+
+  /** Translate function to use for display. Do not use when editing. */
+  const translate = useCallback((input: string) => {
+    if (designLocale === displayLocale) {
+      return input
+    }
+    return props.design.translations?.[displayLocale]?.[input] ?? input
+  }, [props.design.translations, designLocale, displayLocale])
+
   const compRef = (widgetId: any, comp: any) => {
     return (widgetComps.current[widgetId] = comp)
   }
@@ -254,7 +271,6 @@ const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, Da
     const widgetElem = (
       <WidgetComponent
         key={options.id}
-        id={options.id}
         type={options.type}
         schema={props.schema}
         dataSource={props.dataSource}
@@ -273,6 +289,9 @@ const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, Da
         // Keep references to widget elements
         widgetRef={compRef.bind(null, options.id)}
         refreshKey={props.refreshKey}
+        // Use locale from props, design, or default to en
+        locale={displayLocale}
+        translate={translate}
       />
     )
 
@@ -292,7 +311,7 @@ const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, Da
 
   // Render widget container
   return (
-    <LocaleContext.Provider value={props.design.locale ?? "en"}>
+    <LocaleContext.Provider value={displayLocale}>
     <div style={style}>
       {!props.hideScopes ? renderScopes() : undefined}
 

package/src/dashboards/ServerDashboardDataSource.ts

@@ -377,7 +377,8 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
     }
     const { token, expires } = await response.json()
 
-    return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires }
+    // Client isn't necessary, but allows tracking of usage easier
+    return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${this.options.client ?? ""}`, expires }
   }
 
   // Gets widget data source for a popup widget