@mwater/visualization 5.3.1 → 5.4.0

package/src/datagrids/DatagridViewComponent.ts

@@ -126,7 +126,7 @@ export default class DatagridViewComponent extends React.Component<
       (error: any, newRows: any) => {
         if (error) {
           console.error(error)
-          alert(T("Error loading data"))
+          alert(T`Error loading data`)
           return
         }
 
@@ -185,7 +185,7 @@ export default class DatagridViewComponent extends React.Component<
       (error, rows) => {
         if (error) {
           console.error(error)
-          alert(T("Error loading data"))
+          alert(T`Error loading data`)
           callback()
           return
         }
@@ -292,7 +292,7 @@ export default class DatagridViewComponent extends React.Component<
             this.setState({ editingCell: null, savingCell: false })
           })
         }).catch(error => {
-          alert(T("Error saving data"))
+          alert(T`Error saving data`)
           console.error(error)
         })
     })

package/src/datagrids/ExprCellComponent.ts

@@ -36,7 +36,7 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
 
   renderImage(id: any) {
     const url = this.props.dataSource.getImageUrl(id)
-    return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
+    return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T`Image`)
   }
 
   render() {

package/src/datagrids/FindReplaceModalComponent.ts

@@ -159,7 +159,7 @@ export default class FindReplaceModalComponent extends React.Component<
       const rows = await this.props.dataSource.performQuery(query)
 
       // Confirm
-      if (!confirm(T("Replace {0} values? This cannot be undone.", rows.length))) {
+      if (!confirm(T`Replace ${rows.length} values? This cannot be undone.`)) {
         return
       }
 
@@ -173,7 +173,7 @@ export default class FindReplaceModalComponent extends React.Component<
         }))
       )
 
-      alert(T("Successfully replaced {0} values", rows.length))
+      alert(T`Successfully replaced ${rows.length} values`)
       this.setState({ open: false })
       this.props.onUpdate()
     } catch (error) {
@@ -257,7 +257,7 @@ export default class FindReplaceModalComponent extends React.Component<
       return R(
         "div",
         null,
-        R("h3", null, T("Working...")),
+        R("h3", null, T`Working...`),
         R(
           "div",
           { className: "progress" },
@@ -272,12 +272,12 @@ export default class FindReplaceModalComponent extends React.Component<
       R(
         "div",
         { key: "replace", className: "mb-3" },
-        R("label", null, T("Column with data to replace") + ": "),
+        R("label", null, T`Column with data to replace` + ": "),
         R(ReactSelect, {
           options: replaceColumnOptions,
           value: _.findWhere(replaceColumnOptions, { value: this.state.replaceColumn }) || null,
           onChange: (opt: any) => this.setState({ replaceColumn: opt.value }),
-          placeholder: T("Select Column..."),
+          placeholder: T`Select Column...`,
           styles: {
             // Keep menu above fixed data table headers
             menu: style => _.extend({}, style, { zIndex: 2 })
@@ -293,7 +293,7 @@ export default class FindReplaceModalComponent extends React.Component<
           return R(
             "div",
             { key: "with", className: "mb-3" },
-            R("label", null, T("Value to replace data with") + ": "),
+            R("label", null, T`Value to replace data with` + ": "),
             R(ExprComponent, {
               schema: this.props.schema,
               dataSource: this.props.dataSource,
@@ -304,7 +304,7 @@ export default class FindReplaceModalComponent extends React.Component<
               enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
               idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
               preferLiteral: true,
-              placeholder: T("(Blank)"),
+              placeholder: T`(Blank)`,
               refExpr: replaceExpr
             })
           )
@@ -315,7 +315,7 @@ export default class FindReplaceModalComponent extends React.Component<
       R(
         "div",
         { key: "condition", className: "mb-3" },
-        R("label", null, T("Only in rows that (optional)") + ":"),
+        R("label", null, T`Only in rows that (optional)` + ":"),
         R(ExprComponent, {
           schema: this.props.schema,
           dataSource: this.props.dataSource,
@@ -323,11 +323,11 @@ export default class FindReplaceModalComponent extends React.Component<
           value: this.state.conditionExpr,
           onChange: value => this.setState({ conditionExpr: value }),
           types: ["boolean"],
-          placeholder: T("All Rows")
+          placeholder: T`All Rows`
         })
       ),
 
-      R("div", { key: "preview" }, R("h4", null, T("Preview")), this.renderPreview())
+      R("div", { key: "preview" }, R("h4", null, T`Preview`), this.renderPreview())
     )
   }
 
@@ -340,7 +340,7 @@ export default class FindReplaceModalComponent extends React.Component<
       ModalPopupComponent,
       {
         size: "large",
-        header: T("Find/Replace"),
+        header: T`Find/Replace`,
         footer: [
           R(
             "button",
@@ -350,7 +350,7 @@ export default class FindReplaceModalComponent extends React.Component<
               onClick: () => this.setState({ open: false }),
               className: "btn btn-secondary"
             },
-            T("Cancel")
+            T`Cancel`
           ),
           R(
             "button",
@@ -361,7 +361,7 @@ export default class FindReplaceModalComponent extends React.Component<
               onClick: () => this.performReplace(),
               className: "btn btn-primary"
             },
-            T("Apply")
+            T`Apply`
           )
         ]
       },

package/src/datagrids/OrderBysDesignerComponent.tsx

@@ -66,7 +66,7 @@ export default class OrderBysDesignerComponent extends React.Component<OrderBysD
           onClick: this.handleAdd
         },
         R("span", { className: "fas fa-plus" }),
-        " " + T("Add Ordering")
+        " " + T`Add Ordering`
       )
     )
   }
@@ -111,7 +111,7 @@ class OrderByDesignerComponent extends React.Component<OrderByDesignerComponentP
         "div",
         { className: "col-3" },
         <Checkbox inline value={this.props.orderBy.direction === "desc"} onChange={this.handleDirectionChange}>
-          {T("Reverse")}
+          {T`Reverse`}
         </Checkbox>
       ),
       R(

package/src/globals.d.ts

@@ -1,2 +1,8 @@
+import type { LocalizeString } from "ez-localize";
+
 /** Global translate function */
-declare function T(str: string, ...args: any): string
+declare global {
+  const T: LocalizeString
+}
+
+export {}

package/src/languages.ts

@@ -795,8 +795,8 @@ export const languages: {
   },
   {
       "code": "tet",
-      "name": "Tetun",
-      "en": "Tetun"
+      "name": "Tetum",
+      "en": "Tetum"
   },
   {
       "code": "tg",

package/src/layouts/blocks/BlocksDisplayComponent.tsx

@@ -224,17 +224,17 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } })}
             title={<i className="fa fa-font" />}
-            subtitle="Title"
+            subtitle={T`Title`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "widget", widgetType: "Text", design: {} })}
             title={<i className="fa fa-align-left" />}
-            subtitle="Text"
+            subtitle={T`Text`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} })}
             title={<i className="fa fa-picture-o" />}
-            subtitle="Image"
+            subtitle={T`Image`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({
@@ -244,7 +244,7 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
               design: {}
             })}
             title={<i className="fa fa-bar-chart" />}
-            subtitle="Chart"
+            subtitle={T`Chart`}
           />
           {!this.props.disableMaps && (
             <PaletteItemComponent
@@ -260,13 +260,13 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
                 }
               })}
               title={<i className="fa fa-map-o" />}
-              subtitle="Map"
+              subtitle={T`Map`}
             />
           )}
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "TableChart", design: {} })}
             title={<i className="fa fa-table" />}
-            subtitle="Table"
+            subtitle={T`Table`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "widget", widgetType: "PivotChart", design: {} })}
@@ -275,7 +275,7 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
               height={24}
               src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAb0lEQVRIx91VQQrAIAwzo/7/ydllG0MQS21EzMW2ICFtoyBZlLDn/LOgySPAG1xFDDmBtZI6efoMvODozkyL2IlTCOisfS2KrqG0RXus6fkEVBIw08khE62aQY0ogMdEswqwYouwvQ8s+4M576m4Ae/tET/u1taEAAAAAElFTkSuQmCC"
             />}
-            subtitle="Pivot"
+            subtitle={T`Pivot`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({
@@ -285,7 +285,7 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
               design: {}
             })}
             title={<i className="fa fa-calendar" />}
-            subtitle="Calendar"
+            subtitle={T`Calendar`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({
@@ -295,12 +295,12 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
               design: {}
             })}
             title={<i className="fa fa-th" />}
-            subtitle="Mosaic"
+            subtitle={T`Mosaic`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "spacer", aspectRatio: 2 })}
             title={<i className="fa fa-square-o" />}
-            subtitle="Spacer"
+            subtitle={T`Spacer`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({
@@ -310,16 +310,16 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
               design: {}
             })}
             title={<i className="fa fa-youtube-play" />}
-            subtitle="Video"
+            subtitle={T`Video`}
           />
           <PaletteItemComponent
             createItem={this.createBlockItem({
               type: "widget",
               widgetType: "TOC",
-              design: { numbering: false, borderWeight: 2, header: "Contents" }
+              design: { numbering: false, borderWeight: 2, header: T`Contents` }
             })}
             title={<i className="fa fa-list-ol" />}
-            subtitle="TOC"
+            subtitle={T`TOC`}
           />
           {this.props.onClipboardChange && (
             <ClipboardPaletteItemComponent

package/src/layouts/blocks/BlocksLayoutManager.ts

@@ -4,6 +4,7 @@ const R = React.createElement
 import uuid from "uuid"
 import LayoutManager, { RenderLayoutOptions } from "../LayoutManager"
 import BlocksDisplayComponent from "./BlocksDisplayComponent"
+import { LayoutBlock } from "./blockUtils"
 
 export default class BlocksLayoutManager extends LayoutManager {
   /**
@@ -46,9 +47,9 @@ export default class BlocksLayoutManager extends LayoutManager {
   }
 
   // Gets all widgets in items as array of { id, type, design }
-  getAllWidgets(items: any): { id: string; type: string; design: any }[] {
+  getAllWidgets(items: LayoutBlock): { id: string; type: string; design: any }[] {
     if (items.type === "widget") {
-      return [{ id: items.id, type: items.widgetType, design: items.design }]
+      return [{ id: items.id, type: items.widgetType!, design: items.design }]
     }
 
     if (items.blocks) {

package/src/layouts/blocks/ClipboardPaletteItemComponent.ts

@@ -22,7 +22,7 @@ class ClipboardPaletteItemComponent extends React.Component<ClipboardPaletteItem
   }
 
   handleClear = () => {
-    if (confirm("Clear clipboard?")) {
+    if (confirm(T`Clear clipboard?`)) {
       return this.props.onClipboardChange(null)
     }
   }
@@ -43,13 +43,13 @@ class ClipboardPaletteItemComponent extends React.Component<ClipboardPaletteItem
           { className: "title", key: "title" },
           this.props.isOver ? R("i", { className: "fa fa-clone" }) : R("i", { className: "fa fa-clipboard" })
         ),
-        R("div", { className: "subtitle", key: "subtitle" }, this.props.isOver ? "Copy" : "Clipboard"),
+        R("div", { className: "subtitle", key: "subtitle" }, this.props.isOver ? T`Copy` : T`Clipboard`),
         this.props.cantPasteMessage
           ? R("div", { className: "tooltiptext" }, this.props.cantPasteMessage)
           : R(
               "div",
               { className: "tooltiptext" },
-              "Clipboard allows copying widgets for pasting on this dashboard or another dashboard. Drag a widget on to this clipboard to copy it."
+              T`Clipboard allows copying widgets for pasting on this dashboard or another dashboard. Drag a widget on to this clipboard to copy it.`
             ),
         this.props.clipboard
           ? R("div", { className: "clearclipboard", onClick: this.handleClear }, R("i", { className: "fa fa-trash-o" }))

package/src/maps/AddLayerComponent.ts

@@ -59,38 +59,38 @@ export default class AddLayerComponent extends React.Component<AddLayerComponent
 
     const newLayers = [
       {
-        label: "Marker Layer",
-        name: "Untitled Layer",
+        label: T`Marker Layer`,
+        name: T`Untitled Layer`,
         type: "Markers",
         design: {}
       },
       {
-        label: "Radius (circles) Layer",
-        name: "Untitled Layer",
+        label: T`Radius (circles) Layer`,
+        name: T`Untitled Layer`,
         type: "Buffer",
         design: {}
       },
       {
-        label: "Choropleth Layer",
-        name: "Untitled Layer",
+        label: T`Choropleth Layer`,
+        name: T`Untitled Layer`,
         type: "AdminChoropleth",
         design: {}
       },
       {
-        label: "Cluster Layer",
-        name: "Untitled Layer",
+        label: T`Cluster Layer`,
+        name: T`Untitled Layer`,
         type: "Cluster",
         design: {}
       },
       {
-        label: "Grid Layer",
-        name: "Untitled Layer",
+        label: T`Grid Layer`,
+        name: T`Untitled Layer`,
         type: "Grid",
         design: {}
       },
       {
-        label: "Custom Tile Url (advanced)",
-        name: "Untitled Layer",
+        label: T`Custom Tile Url (advanced)`,
+        name: T`Untitled Layer`,
         type: "TileUrl",
         design: {}
       }
@@ -103,7 +103,7 @@ export default class AddLayerComponent extends React.Component<AddLayerComponent
         "button",
         { type: "button", "data-bs-toggle": "dropdown", className: "btn btn-primary dropdown-toggle" },
         R("span", { className: "fas fa-plus" }),
-        " Add Layer"
+        ` ${T`Add Layer`}`
       ),
       R(
         "ul",

package/src/maps/AdminScopeAndDetailLevelComponent.ts

@@ -37,8 +37,8 @@ export default class AdminScopeAndDetailLevelComponent extends React.Component<A
 
   render() {
     const basicDetailLevelOptions = [
-      { value: 0, label: "Countries" },
-      { value: 1, label: "Level 1 (State/Province/District)" }
+      { value: 0, label: T`Countries` },
+      { value: 1, label: T`Level 1 (State/Province/District)` }
     ]
 
     return R(
@@ -47,7 +47,7 @@ export default class AdminScopeAndDetailLevelComponent extends React.Component<A
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, "Region to Map"),
+        R("label", { className: "text-muted" }, T`Region to Map`),
         R(RegionSelectComponent, {
           region: this.props.scope,
           onChange: this.handleScopeChange,
@@ -60,7 +60,7 @@ export default class AdminScopeAndDetailLevelComponent extends React.Component<A
           return R(
             "div",
             { className: "mb-3" },
-            R("label", { className: "text-muted" }, "Detail Level"),
+            R("label", { className: "text-muted" }, T`Detail Level`),
             R(DetailLevelSelectComponent, {
               scope: this.props.scope,
               scopeLevel: this.props.scopeLevel,
@@ -75,7 +75,7 @@ export default class AdminScopeAndDetailLevelComponent extends React.Component<A
           return R(
             "div",
             { className: "mb-3" },
-            R("label", { className: "text-muted" }, "Detail Level"),
+            R("label", { className: "text-muted" }, T`Detail Level`),
             R(ReactSelect, {
               value: _.findWhere(basicDetailLevelOptions, { value: this.props.detailLevel }) || null,
               options: basicDetailLevelOptions,

package/src/maps/BaseLayerDesignerComponent.ts

@@ -56,7 +56,7 @@ export default class BaseLayerDesignerComponent extends React.Component<BaseLaye
     return R(
       "div",
       { className: "mb-3", style: { paddingTop: 10 } },
-      R("label", { className: "text-muted" }, R("span", null, `Opacity: ${Math.round(opacity * 100)}%`)),
+      R("label", { className: "text-muted" }, R("span", null, T`Opacity: ${Math.round(opacity * 100)}%`)),
       R(
         "div",
         { style: { padding: "10px" } },
@@ -76,7 +76,7 @@ export default class BaseLayerDesignerComponent extends React.Component<BaseLaye
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Background Map"),
+      R("label", { className: "text-muted" }, T`Background Map`),
 
       R(
         "div",
@@ -84,16 +84,16 @@ export default class BaseLayerDesignerComponent extends React.Component<BaseLaye
         R(
           "div",
           null,
-          this.renderBaseLayer("cartodb_positron", "Light"),
-          this.renderBaseLayer("cartodb_dark_matter", "Dark"),
-          this.renderBaseLayer("bing_road", "Roads"),
-          this.renderBaseLayer("bing_aerial", "Satellite"),
-          this.renderBaseLayer("blank", "Blank"),
+          this.renderBaseLayer("cartodb_positron", T`Light`),
+          this.renderBaseLayer("cartodb_dark_matter", T`Dark`),
+          this.renderBaseLayer("bing_road", T`Roads`),
+          this.renderBaseLayer("bing_aerial", T`Satellite`),
+          this.renderBaseLayer("blank", T`Blank`),
           " ",
           R(
             PopoverHelpComponent,
             { placement: "bottom" },
-            "Blank map backgrounds work best with chloropleth map layers"
+            T`Blank map backgrounds work best with chloropleth map layers`
           )
         ),
 

package/src/maps/BufferLayer.ts

@@ -633,7 +633,7 @@ marker-fill: ` +
         // Scope to item
         if (ids.length > 0) {
           results.scope = {
-            name: `Selected ${ids.length} Circle(s)`,
+            name: T`Selected ${ids.length} Circle(s)`,
             filter,
             filterExpr,
             data: ids
@@ -893,15 +893,15 @@ marker-fill: ` +
     const exprValidator = new ExprValidator(schema)
 
     if (!design.table) {
-      return "Missing table"
+      return T`Missing table`
     }
 
     if (design.radius == null) {
-      return "Missing radius"
+      return T`Missing radius`
     }
 
     if (!design.axes || !design.axes.geometry) {
-      return "Missing axes"
+      return T`Missing axes`
     }
 
     let error = axisBuilder.validateAxis({ axis: design.axes.geometry })
@@ -911,7 +911,7 @@ marker-fill: ` +
 
     // Check type of axis (prevents blank axes)
     if (axisBuilder.getAxisType(design.axes.geometry) != "geometry") {
-      return "Geometry axis required"
+      return T`Geometry axis required`
     }
 
     error = axisBuilder.validateAxis({ axis: design.axes.color })

package/src/maps/BufferLayerDesignerComponent.ts

@@ -73,7 +73,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       R(
         "div",
         { style: { marginLeft: 10 } },
@@ -93,7 +93,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
       return
     }
 
-    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Circle Centers")
+    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T`Circle Centers`)
 
     const filters = _.clone(this.props.filters) || []
 
@@ -130,7 +130,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Radius (meters)"),
+      R("label", { className: "text-muted" }, T`Radius (meters)`),
       ": ",
       React.createElement(NumberInputComponent, {
         value: this.props.design.radius,
@@ -154,7 +154,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
           value: this.props.design.unionShapes,
           onChange: this.handleUnionShapesChange
         },
-        "Combine circles (advanced)"
+        T`Combine circles (advanced)`
       )
     )
   }
@@ -181,7 +181,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
         ? R(
             "div",
             { className: "mb-3" },
-            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Circle Color"),
+            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Circle Color`),
 
             R(
               "div",
@@ -197,7 +197,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"),
+        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
 
         R(AxisComponent, {
           schema: this.props.schema,
@@ -221,7 +221,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Circle Opacity (%)"),
+      R("label", { className: "text-muted" }, T`Circle Opacity (%)`),
       ": ",
       React.createElement(Rcslider, {
         min: 0,
@@ -243,7 +243,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },

package/src/maps/ChoroplethLayer.ts

@@ -1642,10 +1642,10 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
     if (design.regionMode === "indirect") {
       if (!design.table) {
-        return "Missing table"
+        return T`Missing table`
       }
       if (!design.adminRegionExpr || exprUtils.getExprType(design.adminRegionExpr) !== "id") {
-        return "Missing admin region expr"
+        return T`Missing admin region expr`
       }
 
       error = axisBuilder.validateAxis({ axis: design.axes.color || null })
@@ -1676,7 +1676,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
     }
 
     if (design.detailLevel == null) {
-      return "Missing detail level"
+      return T`Missing detail level`
     }
 
     return null