@mwater/visualization 5.3.2 → 5.4.0

package/src/axes/RangesComponent.ts

@@ -71,10 +71,10 @@ export default class RangesComponent extends React.Component<RangesComponentProp
                 "tr",
                 null,
                 R("th", null, " "),
-                R("th", { key: "min", colSpan: 2, style: { textAlign: "center" } }, "From"),
+                R("th", { key: "min", colSpan: 2, style: { textAlign: "center" } }, T`From`),
                 R("th", { key: "and" }, ""),
-                R("th", { key: "max", colSpan: 2, style: { textAlign: "center" } }, "To"),
-                R("th", { key: "label", colSpan: 1, style: { textAlign: "center" } }, "Label"),
+                R("th", { key: "max", colSpan: 2, style: { textAlign: "center" } }, T`To`),
+                R("th", { key: "label", colSpan: 1, style: { textAlign: "center" } }, T`Label`),
                 R("th", { key: "remove" })
               )
             )
@@ -95,7 +95,7 @@ export default class RangesComponent extends React.Component<RangesComponentProp
         "button",
         { className: "btn btn-link btn-sm", type: "button", onClick: this.handleAddRange },
         R("span", { className: "fas fa-plus" }),
-        " Add Range"
+        T` Add Range`
       )
     )
   }
@@ -145,7 +145,7 @@ class RangeComponent extends React.Component<RangeComponentProps> {
 
     if (this.props.range.maxValue != null) {
       if (placeholder) {
-        placeholder += " and "
+        placeholder += T` and `
       }
       if (this.props.range.maxOpen) {
         placeholder += `< ${this.props.range.maxValue}`
@@ -167,12 +167,12 @@ class RangeComponent extends React.Component<RangeComponentProps> {
               LinkComponent,
               {
                 dropdownItems: [
-                  { id: "true", name: "greater than" },
-                  { id: "false", name: "greater than or equal to" }
+                  { id: "true", name: T`greater than` },
+                  { id: "false", name: T`greater than or equal to` }
                 ],
                 onDropdownItemClicked: (id: string) => this.handleMinOpenChange(id === "true")
               },
-              this.props.range.minOpen ? "greater than" : "greater than or equal to"
+              this.props.range.minOpen ? T`greater than` : T`greater than or equal to`
             )
           ),
 
@@ -181,13 +181,13 @@ class RangeComponent extends React.Component<RangeComponentProps> {
             { key: "minValue" },
             R(NumberInputComponent, {
               value: this.props.range.minValue ?? undefined,
-              placeholder: "None",
+              placeholder: T`None`,
               small: true,
               onChange: (v: any) => this.props.onChange(update(this.props.range, { minValue: { $set: v } }))
             })
           ),
 
-          R("td", { key: "and" }, "\u00A0and\u00A0"),
+          R("td", { key: "and" }, "\u00A0" + T`and` + "\u00A0"),
 
           R(
             "td",
@@ -196,12 +196,12 @@ class RangeComponent extends React.Component<RangeComponentProps> {
               LinkComponent,
               {
                 dropdownItems: [
-                  { id: "true", name: "less than" },
-                  { id: "false", name: "less than or equal to" }
+                  { id: "true", name: T`less than` },
+                  { id: "false", name: T`less than or equal to` }
                 ],
                 onDropdownItemClicked: (id: string) => this.handleMaxOpenChange(id === "true")
               },
-              this.props.range.maxOpen ? "less than" : "less than or equal to"
+              this.props.range.maxOpen ? T`less than` : T`less than or equal to`
             )
           ),
 
@@ -210,7 +210,7 @@ class RangeComponent extends React.Component<RangeComponentProps> {
             { key: "maxValue" },
             R(NumberInputComponent, {
               value: this.props.range.maxValue ?? undefined,
-              placeholder: "None",
+              placeholder: T`None`,
               small: true,
               onChange: (v: any) => this.props.onChange(update(this.props.range, { maxValue: { $set: v } }))
             })

package/src/dashboards/DashboardComponent.tsx

@@ -20,6 +20,7 @@ import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
 
 export interface DashboardComponentProps {
   design: DashboardDesign
+
   /** If not set, readonly */
   onDesignChange?: (design: DashboardDesign) => void
 
@@ -57,6 +58,9 @@ export interface DashboardComponentProps {
 
   /** True to hide title bar and related controls */
   hideTitleBar?: boolean
+
+  /** Called when the edit mode changes */
+  onEditModeChange?: (editing: boolean) => void
 }
 
 export interface DashboardComponentState {
@@ -94,6 +98,10 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
       refreshKey: 1
     }
+
+    if (props.onEditModeChange) {
+      props.onEditModeChange(this.state.editing)
+    }
   }
 
   // Get the values of the quick filters
@@ -155,7 +163,11 @@ export default class DashboardComponent extends React.Component<DashboardCompone
   }
 
   handleToggleEditing = () => {
-    this.setState({ editing: !this.state.editing })
+    const editing = !this.state.editing
+    this.setState({ editing })
+    if (this.props.onEditModeChange) {
+      this.props.onEditModeChange(editing)
+    }
   }
 
   handleOpenLayoutOptions = () => {
@@ -204,7 +216,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         onClick: this.handleToggleEditing
       },
       R("span", { className: "fas fa-pencil-alt" }),
-      this.state.editing ? " Editing" : " Edit"
+      this.state.editing ? T` Editing` : T` Edit`
     )
   }
 
@@ -213,7 +225,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" }, " Layout ")
+      R("span", { className: "hide-600px" }, T` Layout `)
     )
   }
 
@@ -231,7 +243,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
               onClick: this.handleUndo
             },
             R("span", { className: "fas fa-caret-left" }),
-            R("span", { className: "hide-600px" }, " Undo")
+            R("span", { className: "hide-600px" }, T` Undo`)
           ),
           " ",
           R(
@@ -242,7 +254,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
               onClick: this.handleRedo
             },
             R("span", { className: "fas fa-caret-right" }),
-            R("span", { className: "hide-600px" }, " Redo")
+            R("span", { className: "hide-600px" }, T` Redo`)
           )
         ]
         : undefined,
@@ -250,20 +262,20 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         "a",
         { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
         R("span", { className: "fas fa-print" }),
-        R("span", { className: "hide-600px" }, " 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" }, " 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" }, " Show Quickfilters")
+          R("span", { className: "hide-600px" }, T` Show Quickfilters`)
         )
         : undefined,
 
@@ -275,7 +287,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" }, " Settings")
+          R("span", { className: "hide-600px" }, T` Settings`)
         )
         : undefined,
       this.state.editing ? this.renderStyle() : undefined,

package/src/dashboards/DashboardViewComponent.tsx

@@ -14,7 +14,7 @@ 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"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface DashboardViewComponentProps {
   /** schema to use */
@@ -133,7 +133,7 @@ const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, Da
       window.localStorage.setItem("DashboardViewComponent.clipboard", JSON.stringify({ block, tables }))
       setForceUpdate(forceUpdate + 1)
     } catch (err) {
-      return alert("Clipboard not available")
+      return alert(T`Clipboard not available`)
     }
   }
 
@@ -231,7 +231,7 @@ const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, Da
 
   // 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."
+    cantPasteMessage = T`Dashboard is missing one or more data sources needed for the copied item.`
   }
 
   const renderWidget = (options: RenderWidgetOptions) => {

package/src/dashboards/FontStyleEditor.tsx

@@ -29,7 +29,7 @@ export const FontStyleEditor = ({ value, onChange }: FontStyleEditorProps) => {
         fontWeight: value.weight,
         color: value.color
       }}>
-        Sample
+        {T`Sample`}
       </div>
       <div style={{ fontSize: '10px', color: '#888', marginTop: '2px' }}>
         {value.family}, {value.size}px
@@ -92,7 +92,7 @@ const FontEditorModal: React.FC<FontEditorModalProps> = ({ initialValue, onSave,
 
   return (
     <ActionCancelModalComponent
-      title="Edit Font"
+      title={T`Edit Font`}
       onAction={() => onSave(currentValue)}
       onCancel={onCancel}
     >
@@ -107,7 +107,7 @@ const FontEditorModal: React.FC<FontEditorModalProps> = ({ initialValue, onSave,
           fontSize: '14px',
           fontWeight: 'bold'
         }}>
-          Sample Text:
+          {T`Sample Text:`}
         </div>
         <div style={{
           fontFamily: expandFontFamily(currentValue.family),
@@ -115,10 +115,10 @@ const FontEditorModal: React.FC<FontEditorModalProps> = ({ initialValue, onSave,
           fontWeight: currentValue.weight,
           color: currentValue.color
         }}>
-          The quick brown fox jumps over the lazy dog.
+          {T`The quick brown fox jumps over the lazy dog.`}
         </div>
       </div>
-      <FormGroup label="Font Family">
+      <FormGroup label={T`Font Family`}>
         <ReactSelect
           value={{ value: currentValue.family, label: currentValue.family }}
           onChange={(option) => handleChange('family', option?.value || '')}
@@ -140,21 +140,21 @@ const FontEditorModal: React.FC<FontEditorModalProps> = ({ initialValue, onSave,
           styles={{ menuPortal: (style) => ({ ...style, zIndex: 2000 }) }}
         />
       </FormGroup>
-      <FormGroup label="Font Size:" horizontal>
+      <FormGroup label={T`Font Size:`} horizontal>
         <Select
           value={currentValue.size}
           onChange={(value) => handleChange('size', value || 12)}
           options={fontSizeOptions}
         />
       </FormGroup>
-      <FormGroup label="Font Weight:" horizontal>
+      <FormGroup label={T`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>
+      <FormGroup label={T`Font Color:`} horizontal>
         <ColorComponent
           color={currentValue.color}
           onChange={(value) => handleChange('color', value!)}