@mwater/visualization 5.4.1 → 5.4.2

package/src/dashboards/DashboardComponent.tsx

@@ -15,7 +15,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 +61,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 +73,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 +92,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 +110,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,6 +222,16 @@ 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",
@@ -216,7 +241,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         onClick: this.handleToggleEditing
       },
       R("span", { className: "fas fa-pencil-alt" }),
-      this.state.editing ? T` Editing` : T` Edit`
+      " ",
+      this.state.editing ? T`Editing` : T`Edit`
     )
   }
 
@@ -225,7 +251,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       "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 `)
+      R("span", { className: "hide-600px" }, " ",  T`Layout`)
     )
   }
 
@@ -243,7 +269,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
               onClick: this.handleUndo
             },
             R("span", { className: "fas fa-caret-left" }),
-            R("span", { className: "hide-600px" }, T` Undo`)
+            R("span", { className: "hide-600px" }, " ", T`Undo`)
           ),
           " ",
           R(
@@ -254,28 +280,62 @@ export default class DashboardComponent extends React.Component<DashboardCompone
               onClick: this.handleRedo
             },
             R("span", { className: "fas fa-caret-right" }),
-            R("span", { className: "hide-600px" }, T` Redo`)
+            R("span", { className: "hide-600px" }, " ", T`Redo`)
           )
         ]
         : undefined,
+      !this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+        ? R(
+          "div",
+          { key: "translations", className: "dropdown d-inline-block" },
+          R(
+            "a", 
+            { 
+              className: "btn btn-link btn-sm dropdown-toggle",
+              "data-bs-toggle": "dropdown"
+            },
+            R("span", { className: "fal fa-globe" }),
+            " ",
+            this.state.locale
+          ),
+          R(
+            "ul",
+            { className: "dropdown-menu dropdown-menu-end" },
+            [this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => 
+              R(
+                "li",
+                { key: locale },
+                R(
+                  "a",
+                  { 
+                    className: "dropdown-item",
+                    onClick: () => this.setState({ locale: locale })
+                  },
+                  languages.find(l => l.code === locale)?.name || locale
+                )
+              )
+            )
+          )
+        )
+        : 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("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`)
+        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`)
+          R("span", { className: "hide-600px" }, " ", T`Show Quickfilters`)
         )
         : undefined,
 
@@ -287,7 +347,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
           "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`)
+          R("span", { className: "hide-600px" }, " ", T`Settings`)
         )
         : undefined,
       this.state.editing ? this.renderStyle() : undefined,
@@ -317,7 +377,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       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.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined,
+      translate: this.translate
     })
   }
 
@@ -337,6 +398,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       )
     )
 
+    const displayLocale = this.state.editing ? this.props.design.locale || "en" : this.state.locale
+
     const dashboardView = R(DashboardViewComponent, {
       schema: this.props.schema,
       dataSource: this.props.dataSource,
@@ -348,7 +411,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       onRowClick: this.props.onRowClick,
       namedStrings: this.props.namedStrings,
       hideScopes: this.state.hideQuickfilters,
-      refreshKey: this.state.refreshKey
+      refreshKey: this.state.refreshKey,
+      locale: displayLocale
     })
 
     const readonlyDashboardView = R(DashboardViewComponent, {
@@ -360,14 +424,15 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       filters,
       onRowClick: this.props.onRowClick,
       namedStrings: this.props.namedStrings,
-      hideScopes: this.state.hideQuickfilters
+      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",

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