@mwater/visualization 5.3.1 → 5.4.0

package/src/MWaterCompleteTableSelectComponent.tsx

@@ -12,7 +12,7 @@ import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListCom
 import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
 import { Form } from "@mwater/forms"
 import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 const sitesOrder: { [table: string]: number } = {
   "entities.water_point": 1,
@@ -218,7 +218,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       <uiComponents.OptionListComponent items={items} />
       <div className="text-center mt-2 mb-2">
         <button className="btn btn-link" onClick={() => this.setState({ showLegacyAssets: !this.state.showLegacyAssets })}>
-          {this.state.showLegacyAssets ? "Hide" : "Show"} Legacy Assets
+          {this.state.showLegacyAssets ? T`Hide` : T`Show`} {T`Legacy Assets`}
         </button>
       </div>
       {this.state.showLegacyAssets && this.renderLegacyAssets()}
@@ -320,28 +320,28 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     const sweetSenseTables = this.getSweetSenseTables()
 
     const tabs: TabbedComponentTab[] = [
-      { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), " Sites"], elem: this.renderSites() },
-      { id: "forms", label: [R("i", { className: "fa fa-th-list" }), " Surveys"], elem: this.renderForms() },
+      { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), T` Sites`], elem: this.renderSites() },
+      { id: "forms", label: [R("i", { className: "fa fa-th-list" }), T` Surveys`], elem: this.renderForms() },
       {
         id: "indicators",
-        label: [R("i", { className: "fa fa-check-circle" }), " Indicators"],
+        label: [R("i", { className: "fa fa-check-circle" }), T` Indicators`],
         elem: this.renderIndicators()
       },
       {
         id: "issues",
-        label: [R("i", { className: "fa fa-exclamation-circle" }), " Issues"],
+        label: [R("i", { className: "fa fa-exclamation-circle" }), T` Issues`],
         elem: this.renderIssues()
       },
-      { id: "tablesets", label: [R("i", { className: "fa fa-table" }), " Tables"], elem: this.renderTablesets() },
-      { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), " Metrics"], elem: this.renderMetrics() },
-      { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), " Assets"], elem: this.renderAssets() }
+      { id: "tablesets", label: [R("i", { className: "fa fa-table" }), T` Tables`], elem: this.renderTablesets() },
+      { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), T` Metrics`], elem: this.renderMetrics() },
+      { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), T` Assets`], elem: this.renderAssets() }
     ]
 
     if (sweetSenseTables.length > 0) {
-      tabs.push({ id: "sensors", label: " Sensors", elem: this.renderSweetSense() })
+      tabs.push({ id: "sensors", label: T` Sensors`, elem: this.renderSweetSense() })
     }
 
-    tabs.push({ id: "other", label: "Advanced", elem: this.renderOther() })
+    tabs.push({ id: "other", label: T`Advanced`, elem: this.renderOther() })
 
     return R(
       "div",
@@ -349,7 +349,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       R(
         "div",
         { className: "text-muted" },
-        "Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types."
+        T`Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types.`
       ),
 
       R(TabbedComponent, {
@@ -428,7 +428,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
           if (desc) {
             desc += " - "
           }
-          desc += `Modified ${moment(form.modified?.on, moment.ISO_8601).format("ll")}`
+          desc += T`Modified ${moment(form.modified?.on, moment.ISO_8601).format("ll")}`
 
           return {
             id: form._id,
@@ -445,7 +445,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
   handleTableRemove = (table: any) => {
     if (
       confirm(
-        `Remove ${ExprUtils.localizeString(
+        T`Remove ${ExprUtils.localizeString(
           table.name,
           this.context
         )}? Any widgets that depend on it will no longer work properly.`
@@ -491,7 +491,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
     return R(
       "div",
       null,
-      R("label", null, "Included Surveys:"),
+      R("label", null, T`Included Surveys:`),
       tables.length > 0
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
@@ -503,23 +503,23 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
               }
             })
           })
-        : R("div", null, "None"),
+        : R("div", null, T`None`),
 
       R("br"),
 
-      R("label", null, "All Surveys:"),
+      R("label", null, T`All Surveys:`),
       !this.state.forms || this.state.forms.length === 0
         ? R(
             "div",
             { className: "alert alert-info" },
             R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00A0Loading..."
+            "\u00A0" + T`Loading...`
           )
         : [
             R("input", {
               type: "text",
               className: "form-control form-control-sm",
-              placeholder: "Search...",
+              placeholder: T`Search...`,
               key: "search",
               ref: this.searchRef,
               style: { maxWidth: "20em", marginBottom: 10 },
@@ -610,7 +610,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
   handleTableRemove = (table: any) => {
     if (
       confirm(
-        `Remove ${ExprUtils.localizeString(
+        T`Remove ${ExprUtils.localizeString(
           table.name,
           this.context
         )}? Any widgets that depend on it will no longer work properly.`
@@ -674,7 +674,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         }
       }),
 
-      R("label", null, "Included Indicators:"),
+      R("label", null, T`Included Indicators:`),
       tables.length > 0
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
@@ -686,23 +686,23 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
               }
             })
           })
-        : R("div", null, "None"),
+        : R("div", null, T`None`),
 
       R("br"),
 
-      R("label", null, "All Indicators:"),
+      R("label", null, T`All Indicators:`),
       !this.state.indicators || this.state.indicators.length === 0
         ? R(
             "div",
             { className: "alert alert-info" },
             R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00A0Loading..."
+            "\u00A0" + T`Loading...`
           )
         : [
             R("input", {
               type: "text",
               className: "form-control form-control-sm",
-              placeholder: "Search...",
+              placeholder: T`Search...`,
               key: "search",
               ref: this.searchRef,
               style: { maxWidth: "20em", marginBottom: 10 },
@@ -759,7 +759,7 @@ class AddIndicatorConfirmPopupComponent extends React.Component<
         "div",
         { className: "alert alert-info" },
         R("i", { className: "fa fa-spinner fa-spin" }),
-        "\u00A0Loading..."
+        "\u00A0" + T`Loading...`
       )
     }
 
@@ -774,7 +774,7 @@ class AddIndicatorConfirmPopupComponent extends React.Component<
       R(
         "p",
         null,
-        `In general, it is better to get indicator values from the related site. Please select the site 
+        T`In general, it is better to get indicator values from the related site. Please select the site 
 below, then find the indicator values in the 'Related Indicators' section. Or click on 'Use Raw Indicator' if you 
 are certain that you want to use the raw indicator table`
       ),
@@ -799,7 +799,7 @@ are certain that you want to use the raw indicator table`
         R(
           "a",
           { className: "link-plain", onClick: this.props.onChange.bind(null, this.state.indicatorTable) },
-          "Use Raw Indicator"
+          T`Use Raw Indicator`
         )
       )
     )
@@ -815,7 +815,7 @@ are certain that you want to use the raw indicator table`
       {
         showCloseX: true,
         onClose: () => this.setState({ visible: false }),
-        header: "Add Indicator"
+        header: T`Add Indicator`
       },
       this.renderContents()
     )
@@ -889,7 +889,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
   handleTableRemove = (table: any) => {
     if (
       confirm(
-        `Remove ${ExprUtils.localizeString(
+        T`Remove ${ExprUtils.localizeString(
           table.name,
           this.context
         )}? Any widgets that depend on it will no longer work properly.`
@@ -935,7 +935,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
     return R(
       "div",
       null,
-      R("label", null, "Included Issues:"),
+      R("label", null, T`Included Issues:`),
       tables.length > 0
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
@@ -947,23 +947,24 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
               }
             })
           })
-        : R("div", null, "None"),
+        : R("div", null, T`None`),
 
       R("br"),
 
-      R("label", null, "All Issues:"),
+      R("label", null, T`All Issues:`),
       !this.state.issueTypes || this.state.issueTypes.length === 0
         ? R(
             "div",
             { className: "alert alert-info" },
             R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00A0Loading..."
+            "\u00A0",
+            T`Loading...`
           )
         : [
             R("input", {
               type: "text",
               className: "form-control form-control-sm",
-              placeholder: "Search...",
+              placeholder: T`Search...`,
               key: "search",
               ref: this.searchRef,
               style: { maxWidth: "20em", marginBottom: 10 },

package/src/MWaterCustomTablesetListComponent.tsx

@@ -71,7 +71,7 @@ export const MWaterCustomTablesetListComponent = (props: {
     // Remove from extra tables
     const match = props.extraTables.find((t) => (t || "").startsWith(`custom.${ts.code}.`))
     if (match) {
-      if (confirm("Remove this set of tables? Some widgets may not work correctly.")) {
+      if (confirm(T`Remove this set of tables? Some widgets may not work correctly.`)) {
         props.onChange(null)
         props.onExtraTableRemove(match)
       }
@@ -81,7 +81,7 @@ export const MWaterCustomTablesetListComponent = (props: {
   if (!tablesets || extraTableNeeded) {
     return (
       <div>
-        <i className="fa fa-spin fa-spinner" /> Loading...
+        <i className="fa fa-spin fa-spinner" /> {T`Loading...`}
       </div>
     )
   }
@@ -126,11 +126,11 @@ export const MWaterCustomTablesetListComponent = (props: {
 
   return (
     <div>
-      <TextInput value={search} onChange={setSearch} placeholder="Search..." />
+      <TextInput value={search} onChange={setSearch} placeholder={T`Search...`} />
       {visibleTablesets.map((ts) => renderTableset(ts))}
       <div>
         <button className="btn btn-link btn-sm" onClick={() => setShowSystem(!showSystem)}>
-          {showSystem ? "Hide system tables" : "Show system tables"}
+          {showSystem ? T`Hide system tables` : T`Show system tables`}
         </button>
       </div>
     </div>

package/src/MWaterGlobalFiltersComponent.ts

@@ -85,14 +85,14 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       null,
       R(
         ui.FormGroup,
-        { label: "Only sites managed by", labelMuted: true },
+        { label: T`Only sites managed by`, labelMuted: true },
         R(IdLiteralComponent, {
           value: managedBy,
           onChange: this.handleManagedByChange,
           idTable: "groups",
           schema: this.props.schema,
           dataSource: this.props.dataSource,
-          placeholder: "All Organizations",
+          placeholder: T`All Organizations`,
           multi: false,
           filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
         })
@@ -100,14 +100,14 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
 
       R(
         ui.FormGroup,
-        { label: "Only sites located in", labelMuted: true },
+        { label: T`Only sites located in`, labelMuted: true },
         R(IdLiteralComponent, {
           value: adminRegions,
           onChange: this.handleRegionsChange,
           idTable: "admin_regions",
           schema: this.props.schema,
           dataSource: this.props.dataSource,
-          placeholder: "All Regions",
+          placeholder: T`All Regions`,
           multi: true,
           orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
         })

package/src/MWaterLoaderComponent.ts

@@ -80,7 +80,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
       },
       (error: any, config: any) => {
         if (error) {
-          const defaultError = `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`
+          const defaultError = T`Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`
           if (this.props.errorFormatter) {
             try {
               const parsedError = JSON.parse(error.message)

package/src/MWaterMetricsTableListComponent.tsx

@@ -66,7 +66,7 @@ export const MWaterMetricsTableListComponent = (props: {
     // Remove from extra tables
     const match = props.extraTables.find((t) => t == `metrics:${metric._id}`)
     if (match) {
-      if (confirm("Remove this table? Some widgets may not work correctly.")) {
+      if (confirm(T`Remove this table? Some widgets may not work correctly.`)) {
         props.onChange(null)
         props.onExtraTableRemove(match)
       }
@@ -76,7 +76,7 @@ export const MWaterMetricsTableListComponent = (props: {
   if (!metrics || extraTableNeeded) {
     return (
       <div>
-        <i className="fa fa-spin fa-spinner" /> Loading...
+        <i className="fa fa-spin fa-spinner" /> {T`Loading...`}
       </div>
     )
   }
@@ -99,7 +99,7 @@ export const MWaterMetricsTableListComponent = (props: {
 
   return (
     <div>
-      <TextInput value={search} onChange={setSearch} placeholder="Search..." />
+      <TextInput value={search} onChange={setSearch} placeholder={T`Search...`} />
       {renderMetrics()}
     </div>
   )

package/src/MWaterResponsesFilterComponent.ts

@@ -151,7 +151,7 @@ export default class MWaterResponsesFilterComponent extends React.Component<MWat
     return R(
       "div",
       { style: { paddingLeft: 5, paddingTop: 5 } },
-      R("div", { style: { paddingBottom: 5 } }, "Data Source Options:"),
+      R("div", { style: { paddingBottom: 5 } }, T`Data Source Options:`),
 
       R(
         "div",
@@ -160,22 +160,22 @@ export default class MWaterResponsesFilterComponent extends React.Component<MWat
           ? R(
               "div",
               null,
-              R("i", null, "This data source contains links to monitoring sites. Would you like to:"),
+              R("i", null, T`This data source contains links to monitoring sites. Would you like to:`),
               R(
                 "div",
                 { style: { paddingLeft: 8 } },
                 R(
                   ui.Radio,
                   { key: "all", value: siteColumnId, radioValue: null, onChange: this.handleSiteChange },
-                  "Show all survey responses (even if there are more than one per site)"
+                  T`Show all survey responses (even if there are more than one per site)`
                 ),
                 _.map(siteColumns, (column) => {
                   return R(
                     ui.Radio,
                     { key: column.id, value: siteColumnId, radioValue: column.id, onChange: this.handleSiteChange },
-                    "Show only the latest response for each ",
+                    T`Show only the latest response for each `,
                     R("i", null, `${ExprUtils.localizeString(this.props.schema.getTable(column.join.toTable)?.name)}`),
-                    " in the question ",
+                    T` in the question `,
                     R("i", null, `'${ExprUtils.localizeString(column.name)}'`)
                   )
                 })
@@ -186,7 +186,7 @@ export default class MWaterResponsesFilterComponent extends React.Component<MWat
         R(
           ui.Checkbox,
           { value: this.isFinal(), onChange: this.handleFinalChange },
-          "Only include final responses (recommended)"
+          T`Only include final responses (recommended)`
         )
       )
     )

package/src/MWaterTableSelectComponent.tsx

@@ -1,5 +1,4 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import { ToggleEditComponent, OptionListComponent } from "./UIComponents"
@@ -40,7 +39,7 @@ export default class MWaterTableSelectComponent extends React.Component<
   
   toggleEdit: any
 
-  constructor(props: any) {
+  constructor(props: MWaterTableSelectComponentProps) {
     super(props)
 
     this.state = {
@@ -127,7 +126,7 @@ export default class MWaterTableSelectComponent extends React.Component<
             "div",
             { className: "alert alert-info", key: "pendingExtraTable" },
             R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00a0Please wait..."
+            `\u00a0${T`Please wait...`}`
           )
         : undefined,
 
@@ -254,7 +253,7 @@ class EditModeTableSelectComponent extends React.Component<
           <div>
             {this.state.completeMode ? (
               <ModalPopupComponent
-                header="Select Data Source"
+                header={T`Select Data Source`}
                 onClose={() => this.setState({ completeMode: false })}
                 showCloseX={true}
                 size="x-large"
@@ -274,7 +273,7 @@ class EditModeTableSelectComponent extends React.Component<
 
             {this.getTableShortlist(activeTables).length > 0 ? (
               <>
-                <div className="text-muted">Select Data Source:</div>
+                <div className="text-muted">{T`Select Data Source:`}</div>
                 <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
                   const table = this.props.schema.getTable(tableId)!
                   return {
@@ -289,7 +288,7 @@ class EditModeTableSelectComponent extends React.Component<
                     className="btn btn-link btn-sm"
                     onClick={this.handleShowMore}
                   >
-                    Show All Available Data Sources...
+                    {T`Show All Available Data Sources...`}
                   </button>
                 </div>
               </>
@@ -299,7 +298,7 @@ class EditModeTableSelectComponent extends React.Component<
                 className="btn btn-link"
                 onClick={this.handleShowMore}
               >
-                Select Data Source...
+                {T`Select Data Source...`}
               </button>
             )}
           </div>