@mwater/visualization 5.3.2 → 5.4.0

package/src/quickfilter/DateExprComponent.ts

@@ -104,6 +104,20 @@ export default class DateExprComponent extends React.Component<DateExprComponent
     return this.setState({ dropdownOpen: false })
   }
 
+  getPresets() {
+    return [
+      { id: "thisyear", name: T`This Year` },
+      { id: "lastyear", name: T`Last Year` },
+      { id: "thismonth", name: T`This Month` },
+      { id: "lastmonth", name: T`Last Month` },
+      { id: "today", name: T`Today` },
+      { id: "yesterday", name: T`Yesterday` },
+      { id: "last24hours", name: T`In Last 24 Hours` },
+      { id: "last7days", name: T`In Last 7 Days` },
+      { id: "last30days", name: T`In Last 30 Days` },
+    ]
+  }
+
   renderClear = () => {
     return R(
       "div",
@@ -117,10 +131,10 @@ export default class DateExprComponent extends React.Component<DateExprComponent
 
   renderSummary() {
     if (!this.props.value) {
-      return R("span", { className: "text-muted" }, "All")
+      return R("span", { className: "text-muted" }, T`All`)
     }
 
-    const preset = _.findWhere(presets, { id: this.props.value.op })
+    const preset = _.findWhere(this.getPresets(), { id: this.props.value.op })
     if (preset) {
       return preset.name
     }
@@ -161,7 +175,7 @@ export default class DateExprComponent extends React.Component<DateExprComponent
       R(
         "ul",
         { className: "nav nav-pills flex-column" },
-        _.map(presets, (preset) => {
+        _.map(this.getPresets(), (preset) => {
           return R(
             "li",
             { className: "nav-item" },
@@ -178,7 +192,7 @@ export default class DateExprComponent extends React.Component<DateExprComponent
           R(
             "a",
             { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) },
-            "Custom Date Range..."
+            T`Custom Date Range...`
           )
         )
       )
@@ -268,17 +282,4 @@ export default class DateExprComponent extends React.Component<DateExprComponent
       )
     )
   }
-}
-
-var presets = [
-  { id: "thisyear", name: "This Year" },
-  { id: "lastyear", name: "Last Year" },
-  { id: "thismonth", name: "This Month" },
-  { id: "lastmonth", name: "Last Month" },
-  { id: "today", name: "Today" },
-  { id: "yesterday", name: "Yesterday" },
-  { id: "last24hours", name: "In Last 24 Hours" },
-  { id: "last7days", name: "In Last 7 Days" },
-  { id: "last30days", name: "In Last 30 Days" },
-  { id: "last365days", name: "In Last 365 Days" }
-]
+}

package/src/quickfilter/IdArrayQuickfilterComponent.ts

@@ -47,7 +47,7 @@ export default class IdArrayQuickfilterComponent extends React.Component<IdArray
           idTable,
           schema: this.props.schema,
           dataSource: this.props.dataSource,
-          placeholder: "All",
+          placeholder: T`All`,
           multi: this.props.multi
           // TODO Does not use filters that are passed in
         })

package/src/quickfilter/QuickfiltersComponent.ts

@@ -11,7 +11,7 @@ import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent"
 import { Quickfilter, QuickfilterLock } from "./Quickfilter"
 import { QuickfiltersDataSource } from "./QuickfiltersDataSource"
 import { JsonQLFilter } from ".."
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface QuickfiltersComponentProps {
   /** Design of quickfilters. See README.md */

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -118,7 +118,7 @@ export default class QuickfiltersDesignComponent extends React.Component<Quickfi
             "button",
             { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
             R("span", { className: "fas fa-plus" }),
-            " Add Quick Filter"
+            T`Add Quick Filter`
           )
         : undefined
     )
@@ -185,7 +185,7 @@ class QuickfilterDesignComponent extends React.Component<
       R(
         "div",
         { className: "mb-3 mt-1", key: "table" },
-        R("label", { className: "text-muted" }, "Data Source"),
+        R("label", { className: "text-muted" }, T`Data Source`),
         R(ui.Select, {
           value: this.state.table,
           options: _.map(this.props.tables, (table) => ({
@@ -193,14 +193,14 @@ class QuickfilterDesignComponent extends React.Component<
             label: ExprUtils.localizeString(this.props.schema.getTable(table)!.name)
           })),
           onChange: this.handleTableChange,
-          nullLabel: "Select..."
+          nullLabel: T`Select...`
         })
       ),
 
       R(
         "div",
         { className: "mb-3", key: "expr" },
-        R("label", { className: "text-muted" }, "Filter By"),
+        R("label", { className: "text-muted" }, T`Filter By`),
         R(
           "div",
           null,
@@ -219,13 +219,13 @@ class QuickfilterDesignComponent extends React.Component<
         ? R(
             "div",
             { className: "mb-3", key: "label" },
-            R("label", { className: "text-muted" }, "Label"),
+            R("label", { className: "text-muted" }, T`Label`),
             R("input", {
               type: "text",
               className: "form-control form-control-sm",
               value: this.props.design.label || "",
               onChange: this.handleLabelChange,
-              placeholder: "Optional Label"
+              placeholder: T`Optional Label`
             })
           )
         : undefined,
@@ -237,8 +237,8 @@ class QuickfilterDesignComponent extends React.Component<
               value: this.props.design.merged,
               onChange: this.handleMergedChange
             },
-            "Merge with previous quickfilter ",
-            R("span", { className: "text-muted" }, "- displays as one single control that filters both")
+            T`Merge with previous quickfilter `,
+            R("span", { className: "text-muted" }, T`- displays as one single control that filters both`)
           )
         : undefined,
 
@@ -249,7 +249,7 @@ class QuickfilterDesignComponent extends React.Component<
               value: this.props.design.multi,
               onChange: this.handleMultiChange
             },
-            "Allow multiple selections"
+            T`Allow multiple selections`
           )
         : undefined
     )

package/src/quickfilter/TextLiteralComponent.ts

@@ -119,14 +119,14 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
 
     return R(AsyncReactSelect, {
       key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-      placeholder: "All",
+      placeholder: T`All`,
       value: currentValue,
       loadOptions: this.getOptions,
       onChange: this.props.onChange ? this.handleSingleChange : undefined,
       isClearable: true,
       defaultOptions: true,
       isDisabled: this.props.onChange == null,
-      noOptionsMessage: () => "Type to search",
+      noOptionsMessage: () => T`Type to search`,
       styles: {
         // Keep menu above fixed data table headers
         menu: (style) => _.extend({}, style, { zIndex: 2000 })
@@ -138,7 +138,7 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
     const currentValue = this.props.value ? _.map(this.props.value, (v) => ({ value: v, label: v })) : null
 
     return R(AsyncReactSelect, {
-      placeholder: "All",
+      placeholder: T`All`,
       value: currentValue,
       key: JSON.stringify(this.props.filters), // Include to force a change when filters change
       isMulti: true,
@@ -147,7 +147,7 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
       onChange: this.props.onChange ? this.handleMultipleChange : undefined,
       isClearable: true,
       isDisabled: this.props.onChange == null,
-      noOptionsMessage: () => "Type to search",
+      noOptionsMessage: () => T`Type to search`,
       styles: {
         // Keep menu above fixed data table headers
         menu: (style) => _.extend({}, style, { zIndex: 2000 })

package/src/richtext/DropdownPaletteItem.tsx

@@ -91,7 +91,7 @@ export default class DropdownPaletteItem extends React.Component<DropdownPalette
             className="dropdown-palette-menu-item"
             onMouseDown={this.handleMoreClick}
           >
-            More...
+            {T`More...`}
           </div>
         )}
       </div>

package/src/richtext/ExprItemsHtmlConverter.ts

@@ -66,7 +66,7 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
       if (this.summarizeExprs) {
         text = new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale)
         if (text.length > 30) {
-          text = text.substr(0, 30) + "..."
+          text = text.substr(0, 30) + T`...`
         }
 
         exprHtml = _.escape(text)
@@ -88,26 +88,24 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
 
           exprHtml = _.escape(text)
         } else {
-          exprHtml = '<span style="color: #DDD">---</span>'
+          exprHtml = `<span style="color: #DDD">${T`---`}</span>`
         }
       } else {
         // Placeholder
-        exprHtml = '<span class="text-muted">\u25a0\u25a0\u25a0</span>'
+        exprHtml = `<span class="text-muted">\u25a0\u25a0\u25a0</span>`
       }
 
       // Add label
       if (exprItem.includeLabel) {
-        const label = exprItem.labelText || new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + ":\u00A0"
-        exprHtml = '<span class="text-muted">' + _.escape(label) + "</span>" + exprHtml
+        const label = exprItem.labelText || new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + T`:\u00A0`
+        exprHtml = `<span class="text-muted">${_.escape(label)}</span>` + exprHtml
       }
 
       if (this.designMode) {
         html +=
-          '\u2060<span data-embed="' +
-          _.escape(JSON.stringify(item)) +
-          '" class="mwater-visualization-text-widget-expr">' +
-          (exprHtml || "\u00A0") +
-          "</span>\u2060"
+          `\u2060<span data-embed="${_.escape(JSON.stringify(item))}" class="mwater-visualization-text-widget-expr">` +
+          (exprHtml || T`\u00A0`) +
+          `</span>\u2060`
       } else {
         // View mode
         html += exprHtml

package/src/richtext/ItemsHtmlConverter.ts

@@ -144,7 +144,6 @@ export default class ItemsHtmlConverter {
       if (node.nodeType === 1) {
         // Element
         // Handle embeds
-        var style
         if ((node as HTMLElement).dataset?.embed) {
           items.push(JSON.parse((node as HTMLElement).dataset!.embed!))
           continue

package/src/richtext/RichTextComponent.tsx

@@ -11,6 +11,7 @@ export interface RichTextComponentProps {
   items?: HtmlItem[]
   onItemsChange?: (items: HtmlItem[]) => void
 
+  /** Called when an embed item is clicked */
   onItemClick?: (item: HtmlItem) => void
 
   /** Optional className of editor wrapper */
@@ -95,7 +96,7 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     // Requires a selection
     const html = this.contentEditable!.getSelectedHTML()
     if (!html) {
-      return alert("Please select text first to set color")
+      return alert(T`Please select text first to set color`)
     }
 
     this.handleCommand("foreColor", color)
@@ -200,7 +201,7 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     ev.preventDefault()
 
     // Ask for url
-    const url = window.prompt("Enter URL to link to")
+    const url = window.prompt(T`Enter URL to link to`)
     if (url) {
       document.execCommand("createLink", false, url)
     }
@@ -301,10 +302,10 @@ export default class RichTextComponent extends React.Component<RichTextComponent
         <DropdownPaletteItem
           key="justify"
           items={[
-            { label: <span><i className="fas fa-align-left fa-fw"></i> Left</span>, value: "justifyLeft" },
-            { label: <span><i className="fas fa-align-center fa-fw"></i> Center</span>, value: "justifyCenter" },
-            { label: <span><i className="fas fa-align-right fa-fw"></i> Right</span>, value: "justifyRight" },
-            { label: <span><i className="fas fa-align-justify fa-fw"></i> Justify</span>, value: "justifyFull" },
+            { label: <span><i className="fas fa-align-left fa-fw"></i> {T`Left`}</span>, value: "justifyLeft" },
+            { label: <span><i className="fas fa-align-center fa-fw"></i> {T`Center`}</span>, value: "justifyCenter" },
+            { label: <span><i className="fas fa-align-right fa-fw"></i> {T`Right`}</span>, value: "justifyRight" },
+            { label: <span><i className="fas fa-align-justify fa-fw"></i> {T`Justify`}</span>, value: "justifyFull" },
           ]}
           onSelect={(value) => this.handleCommand(value, null)}
           position={schemeName === "over" ? "under" : "over"}
@@ -328,28 +329,28 @@ export default class RichTextComponent extends React.Component<RichTextComponent
           <DropdownPaletteItem
             key="paragraph"
             items={[
-              { label: "Heading 1", value: "h1" },
-              { label: "Heading 2", value: "h2" },
-              { label: "Extra Small", value: "xsmall" },
-              { label: "Small", value: "small" },
-              { label: "Normal", value: "normal" },
-              { label: "Large", value: "large" },
-              { label: "Extra Large", value: "xlarge" },
-              { label: "6px", value: "6px", more: true },
-              { label: "7px", value: "7px", more: true },
-              { label: "8px", value: "8px", more: true },
-              { label: "9px", value: "9px", more: true },
-              { label: "10px", value: "10px", more: true },
-              { label: "11px", value: "11px", more: true },
-              { label: "12px", value: "12px", more: true },
-              { label: "14px", value: "14px", more: true },
-              { label: "16px", value: "16px", more: true },
-              { label: "18px", value: "18px", more: true },
-              { label: "20px", value: "20px", more: true },
-              { label: "22px", value: "22px", more: true },
-              { label: "24px", value: "24px", more: true },
-              { label: "30px", value: "30px", more: true },
-              { label: "36px", value: "36px", more: true },
+              { label: T`Heading 1`, value: "h1" },
+              { label: T`Heading 2`, value: "h2" },
+              { label: T`Extra Small`, value: "xsmall" },
+              { label: T`Small`, value: "small" },
+              { label: T`Normal`, value: "normal" },
+              { label: T`Large`, value: "large" },
+              { label: T`Extra Large`, value: "xlarge" },
+              { label: T`6px`, value: "6px", more: true },
+              { label: T`7px`, value: "7px", more: true },
+              { label: T`8px`, value: "8px", more: true },
+              { label: T`9px`, value: "9px", more: true },
+              { label: T`10px`, value: "10px", more: true },
+              { label: T`11px`, value: "11px", more: true },
+              { label: T`12px`, value: "12px", more: true },
+              { label: T`14px`, value: "14px", more: true },
+              { label: T`16px`, value: "16px", more: true },
+              { label: T`18px`, value: "18px", more: true },
+              { label: T`20px`, value: "20px", more: true },
+              { label: T`22px`, value: "22px", more: true },
+              { label: T`24px`, value: "24px", more: true },
+              { label: T`30px`, value: "30px", more: true },
+              { label: T`36px`, value: "36px", more: true },
             ]}
             onSelect={(tag) => {
               if (tag.startsWith("h")) {
@@ -397,9 +398,8 @@ export default class RichTextComponent extends React.Component<RichTextComponent
           {this.props.items?.[0] == null ? (
             <div
               key="placeholder"
-              style={{ color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" }}
-            >
-              Click to Edit
+              style={{ color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" }}            >
+              {T`Click to Edit`}
             </div>
           ) : undefined}
         </div>

package/src/valueFormatter.ts

@@ -19,22 +19,22 @@ export function canFormatType(type: LiteralType): boolean {
 export function getFormatOptions(type: LiteralType): FormatOption[] | null {
   if (type == "number") {
     return [
-      { value: "", label: "Plain: 1234.567" },
-      { value: ",", label: "Normal: 1,234.567" },
-      { value: ",.0f", label: "Rounded: 1,234" },
-      { value: ",.2f", label: "Two decimals: 1,234.56" },
-      { value: "$,.2f", label: "Currency: $1,234.56" },
-      { value: "$,.0f", label: "Currency rounded: $1,234" },
-      { value: ".0%", label: "Percent rounded: 12%" },
-      { value: ".2%", label: "Percent decimal: 12.34%" }
+      { value: "", label: T`Plain: 1234.567` },
+      { value: ",", label: T`Normal: 1,234.567` },
+      { value: ",.0f", label: T`Rounded: 1,234` },
+      { value: ",.2f", label: T`Two decimals: 1,234.56` },
+      { value: "$,.2f", label: T`Currency: $1,234.56` },
+      { value: "$,.0f", label: T`Currency rounded: $1,234` },
+      { value: ".0%", label: T`Percent rounded: 12%` },
+      { value: ".2%", label: T`Percent decimal: 12.34%` }
     ]
   }
 
   if (type == "geometry") {
     return [
-      { value: "lat, lng", label: "Latitude, Longitude" },
-      { value: "UTM", label: "UTM" },
-      { value: "WKT", label: "Well-Known Text" }
+      { value: "lat, lng", label: T`Latitude, Longitude` },
+      { value: "UTM", label: T`UTM` },
+      { value: "WKT", label: T`Well-Known Text` }
     ]
   }
 
@@ -96,7 +96,7 @@ export function getDefaultFormat(type: LiteralType): string {
     return "lll"
   }
 
-  throw new Error("Not supported")
+  throw new Error(T`Not supported`)
 }
 
 /** Format a value of a specified type as a string. For historical reasons,
@@ -140,10 +140,10 @@ export function formatValue(
         const longitude = value.coordinates[0]
 
         if (latitude > 84 || latitude < -80) {
-          return "latitude out of range"
+          return T`latitude out of range`
         }
         if (longitude > 180 || longitude < -180) {
-          return "longitude out of range"
+          return T`longitude out of range`
         }
 
         const { easting, northing, zoneNum, zoneLetter } = fromLatLon(latitude, longitude)

package/src/widgets/IFrameWidgetComponent.ts

@@ -49,7 +49,7 @@ export default class IFrameWidgetComponent extends React.Component<
     const content = R(
       "div",
       { className: "mb-3" },
-      R("label", null, "URL to embed"),
+      R("label", null, T`URL to embed`),
       R("input", {
         type: "text",
         className: "form-control",
@@ -62,7 +62,7 @@ export default class IFrameWidgetComponent extends React.Component<
     return R(
       ModalPopupComponent,
       {
-        header: "Configure",
+        header: T`Configure`,
         showCloseX: true,
         onClose: this.handleEndEditing
       },
@@ -84,7 +84,7 @@ export default class IFrameWidgetComponent extends React.Component<
   render() {
     const dropdownItems = []
     if (this.props.onDesignChange != null) {
-      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+      dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: this.handleStartEditing })
     }
 
     return R(

package/src/widgets/ImageUploaderComponent.tsx

@@ -71,7 +71,7 @@ export default class ImageUploaderComponent extends React.Component<
       this.props.onUpload(this.state.uid)
     } else {
       this.setState({ uploading: false, files: null, editing: false })
-      alert(`Upload failed: ${e.target.responseText}`)
+      alert(T`Upload failed: ${e.target.responseText}`)
     }
   }
 
@@ -98,8 +98,8 @@ export default class ImageUploaderComponent extends React.Component<
             : <div>
                  {
                  isDragActive ?
-                  "Drop the files here" 
-                  : "Drop file here or click to select file"
+                  T`Drop the files here` 
+                  : T`Drop file here or click to select file`
                  }
                 </div>
             }
@@ -107,7 +107,7 @@ export default class ImageUploaderComponent extends React.Component<
         )}
       </Dropzone>
 
-      { this.state.uid && <a className="link-plain" onClick={() => this.setState({ editing: false })}>Cancel</a> }
+      { this.state.uid && <a className="link-plain" onClick={() => this.setState({ editing: false })}>{T`Cancel`}</a> }
     </div>
   }
 
@@ -124,7 +124,7 @@ export default class ImageUploaderComponent extends React.Component<
       "div",
       null,
       R("img", { style: thumbnailStyle, src: this.props.dataSource.getImageUrl(this.state.uid) }),
-      R("a", { className: "btn btn-secondary", onClick: this.handleChangeImage }, "Change")
+      R("a", { className: "btn btn-secondary", onClick: this.handleChangeImage }, T`Change`)
     )
   }
 

package/src/widgets/ImageWidget.ts

@@ -74,13 +74,13 @@ export default class ImageWidget extends Widget {
   //   callback: (error, data)
   getData(design: ImageWidgetDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any) {
     if (!design.expr) {
-      return callback(null)
+      return callback(null, null)
     }
 
     const exprCleaner = new ExprCleaner(schema)
     const expr = exprCleaner.cleanExpr(design.expr)
     if (!expr) {
-      return callback(null)
+      return callback(null, null)
     }
 
     const { table } = (design.expr as FieldExpr)