@mwater/visualization 5.4.1 → 5.4.2

package/src/MWaterResponsesFilterComponent.ts

@@ -173,9 +173,12 @@ export default class MWaterResponsesFilterComponent extends React.Component<MWat
                   return R(
                     ui.Radio,
                     { key: column.id, value: siteColumnId, radioValue: column.id, onChange: this.handleSiteChange },
-                    T`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)}`),
-                    T` in the question `,
+                    " ",
+                    T`in the question`,
+                    " ",
                     R("i", null, `'${ExprUtils.localizeString(column.name)}'`)
                   )
                 })

package/src/MWaterTableSelectComponent.tsx

@@ -6,7 +6,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
-import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
+import { ActiveTablesContext } from "@mwater/expressions-ui"
 
 export interface MWaterTableSelectComponentProps {
   /** Url to hit api */
@@ -35,8 +35,6 @@ export default class MWaterTableSelectComponent extends React.Component<
   MWaterTableSelectComponentProps,
   MWaterTableSelectComponentState
 > {
-  static contextType = LocaleContext
-  
   toggleEdit: any
 
   constructor(props: MWaterTableSelectComponentProps) {
@@ -136,7 +134,7 @@ export default class MWaterTableSelectComponent extends React.Component<
         },
         forceOpen: !this.props.table, // Must have table
         label: this.props.table
-          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context)
+          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
           : "",
         editor,
         onRemove: () => {
@@ -184,8 +182,6 @@ class EditModeTableSelectComponent extends React.Component<
   EditModeTableSelectComponentProps,
   EditModeTableSelectComponentState
 > {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
 
@@ -235,7 +231,7 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Sort by name
     tables = _.sortBy(tables, (tableId) =>
-      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, this.context)
+      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, T.locale)
     )
 
     return tables
@@ -277,8 +273,8 @@ class EditModeTableSelectComponent extends React.Component<
                 <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
                   const table = this.props.schema.getTable(tableId)!
                   return {
-                    name: ExprUtils.localizeString(table.name, this.context),
-                    desc: ExprUtils.localizeString(table.desc, this.context),
+                    name: ExprUtils.localizeString(table.name, T.locale),
+                    desc: ExprUtils.localizeString(table.desc, T.locale),
                     onClick: () => this.props.onChange(table.id)
                   }
                 })} />

package/src/autotranslate.ts

@@ -0,0 +1,141 @@
+import { LocalizedString, Locale } from "ez-localize/lib/utils"
+
+/** Translates an array of strings from a source language to a target language using the mWater translation API.
+ * @param strings Array of strings to translate
+ * @param sourceLanguage Source language code (e.g. "en")
+ * @param targetLanguage Target language code to translate to
+ * @returns Promise that resolves to array of translated strings in same order as input
+ * @throws Error if translation fails
+ */
+export async function translateStrings(
+  strings: string[],
+  sourceLanguage: string,
+  targetLanguage: string
+): Promise<string[]> {
+  // Call translation API
+  const response = await fetch(
+    `https://api.mwater.co/v3/translate?source_language=${sourceLanguage}&target_language=${targetLanguage}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        phrases: strings
+      })
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error("Translation failed")
+  }
+
+  const result = await response.json()
+  return result.phrases
+}
+
+/** Ensures that all LocalizedString objects have translations for all specified locales.
+ * Only translates missing translations, preserving existing ones and base strings.
+ * Each string's _base property is used as the source language for translations.
+ * @param strings Array of LocalizedString objects to ensure are fully translated
+ * @param locales Array of language codes specifying which languages to ensure exist
+ * @param baseLanguage Language code of the _base strings (e.g. "en", "fr", etc)
+ * @returns Promise that resolves to array of fully translated LocalizedString objects
+ */
+export async function translateLocalizedStrings(
+  strings: LocalizedString[],
+  locales: string[],
+  baseLanguage: string
+): Promise<LocalizedString[]> {
+  // Create copy of strings to modify
+  const translatedStrings = strings.map(str => ({ ...str }))
+
+  // For each locale
+  for (const locale of locales) {
+    // Skip if it's the base language
+    if (locale === baseLanguage) {
+      continue
+    }
+
+    // Group strings by their current source language
+    // Start with base language strings
+    const stringsBySourceLang = new Map<string, { str: LocalizedString; index: number }[]>()
+
+    translatedStrings.forEach((str, index) => {
+      // Skip if translation already exists
+      if (str[locale]) {
+        return
+      }
+
+      // Add to list to translate from base language
+      if (!stringsBySourceLang.has(baseLanguage)) {
+        stringsBySourceLang.set(baseLanguage, [])
+      }
+      stringsBySourceLang.get(baseLanguage)!.push({ str, index })
+    })
+
+    // Translate each group
+    for (const [sourceLang, stringsToTranslate] of stringsBySourceLang.entries()) {
+      try {
+        // Get source strings
+        const sourceStrings = stringsToTranslate.map(item => item.str[item.str._base])
+
+        // Translate all strings at once
+        const translations = await translateStrings(sourceStrings, sourceLang, locale)
+
+        // Add translations back to strings
+        translations.forEach((translation, i) => {
+          translatedStrings[stringsToTranslate[i].index][locale] = translation
+        })
+      } catch (error) {
+        console.error(`Failed to translate from ${sourceLang} to ${locale}:`, error)
+        throw error
+      }
+    }
+  }
+
+  return translatedStrings
+}
+
+/** Returns true if the given language code can be automatically translated. */
+export function canAutoTranslate(languageCode: string) {
+  const languageCodes = [
+    "en", // English
+    "fr", // French
+    "es", // Spanish
+    "pt", // Portuguese
+    "sw", // Swahili
+    "id", // Indonesian
+    "hi", // Hindi
+    "ne", // Nepali
+    "rw", // Kinyarwanda
+    "sd", // Sindhi
+    "tet", // Tetum
+    "ur", // Urdu
+    "ja", // Japanese
+    "de", // German
+    "it", // Italian
+    "su", // Sundanese
+    "ar", // Arabic
+    "vi", // Vietnamese
+    "mg", // Malagasy
+    "tl", // Tagalog/Filipino
+    "ht", // Haitian Creole
+    "fi", // Finnish
+    "bn", // Bangla
+    "my", // Burmese
+    "km", // Khmer
+    "so", // Somali
+    "jv", // Javanese
+    "ko", // Korean
+    "zh", // Chinese
+    "ru", // Russian
+    "tr", // Turkish
+    "nl", // Dutch
+    "pl", // Polish
+    "hu", // Hungarian
+    "cs", // Czech
+    "sk" // Slovak
+  ]
+  return languageCodes.includes(languageCode)
+}

package/src/axes/AxisBuilder.ts

@@ -532,7 +532,7 @@ export default class AxisBuilder {
 
             if (range.maxValue != null) {
               if (label) {
-                label += T` and `
+                label += ` ${T`and`} `
               }
               if (range.maxOpen) {
                 label += `< ${range.maxValue}`
@@ -1024,7 +1024,7 @@ export default class AxisBuilder {
           if (category) {
             return this.formatCategory(axis, category)
           } else {
-            return T`???`
+            return `???`
           }
         }).join(", ")
       } else {
@@ -1032,7 +1032,7 @@ export default class AxisBuilder {
         if (category) {
           return this.formatCategory(axis, category)
         } else {
-          return T`???`
+          return `???`
         }
       }
     }

package/src/axes/AxisColorEditorComponent.tsx

@@ -86,6 +86,11 @@ export default class AxisColorEditorComponent extends React.Component<
           axisBuilder.isCategorical(this.props.axis)
         )
         colorMap = (this.props.axis.colorMap || []).concat(missingColorMap)
+
+        // If there are categories present, remove any color map values that are not in the categories
+        if (this.props.categories.length > 0) {
+          colorMap = _.filter(colorMap, (cm) => this.props.categories!.find((c) => c.value === cm.value))
+        }
       } else {
         // Keep existing
         const existing = _.indexBy(this.props.axis.colorMap || [], "value")

package/src/axes/{AxisComponent.ts → AxisComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import uuid from "uuid"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
 import { ExprComponent, LocaleContext } from "@mwater/expressions-ui"
@@ -16,7 +15,7 @@ import { injectTableAlias } from "@mwater/expressions"
 import { getFormatOptions } from "../valueFormatter"
 import { getDefaultFormat } from "../valueFormatter"
 import { JsonQLFilter } from "../JsonQLFilter"
-import { Axis, AxisXform, AxisXformRange } from "./Axis"
+import { Axis, AxisCategory, AxisXform, AxisXformRange } from "./Axis"
 import produce from "immer"
 import { JsonQLSelectQuery } from "@mwater/jsonql"
 
@@ -54,7 +53,7 @@ export interface AxisComponentProps {
 // Axis component that allows designing of an axis
 export default class AxisComponent extends AsyncLoadComponent<
   AxisComponentProps,
-  { categories: any; loading: boolean }
+  { categories: AxisCategory[] | null; loading: boolean }
 > {
   static defaultProps = {
     reorderable: false,
@@ -146,14 +145,14 @@ export default class AxisComponent extends AsyncLoadComponent<
       valuesQuery.where = whereClauses[0]
     }
 
-    return props.dataSource.performQuery(valuesQuery, (error: any, rows: any) => {
+    props.dataSource.performQuery(valuesQuery, (error: any, rows: any) => {
       if (error) {
         return // Ignore errors
       }
 
       // Get categories (value + label)
       categories = axisBuilder.getCategories(axis, _.pluck(rows, "val"))
-      return callback({ categories })
+      callback({ categories })
     })
   }
 
@@ -254,37 +253,37 @@ export default class AxisComponent extends AsyncLoadComponent<
     if (axis.xform && ["bin", "ranges", "floor"].includes(axis.xform.type)) {
       let comp
       if (axis.xform.type === "ranges") {
-        comp = R(RangesComponent, {
-          schema: this.props.schema,
-          expr: axis.expr,
-          xform: axis.xform,
-          onChange: this.handleXformChange
-        })
+        comp = <RangesComponent
+          schema={this.props.schema}
+          expr={axis.expr}
+          xform={axis.xform}
+          onChange={this.handleXformChange}
+        />
       } else if (axis.xform.type === "bin") {
-        comp = R(BinsComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          expr: axis.expr,
-          xform: axis.xform,
-          onChange: this.handleXformChange
-        })
+        comp = <BinsComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          expr={axis.expr}
+          xform={axis.xform}
+          onChange={this.handleXformChange}
+        />
       } else {
         comp = null
       }
 
-      return R(
-        "div",
-        null,
-        R(ui.RadioToggleComponent, {
-          value: axis.xform ? axis.xform.type : null,
-          options: [
-            { value: "bin", label: T`Equal Bins` },
-            { value: "ranges", label: T`Custom Ranges` },
-            { value: "floor", label: T`Whole Numbers` }
-          ],
-          onChange: this.handleXformTypeChange
-        }),
-        comp
+      return (
+        <div>
+          <ui.RadioToggleComponent
+            value={axis.xform ? axis.xform.type : null}
+            options={[
+              { value: "bin", label: T`Equal Bins` },
+              { value: "ranges", label: T`Custom Ranges` },
+              { value: "floor", label: T`Whole Numbers` }
+            ]}
+            onChange={this.handleXformTypeChange}
+          />
+          {comp}
+        </div>
       )
     }
 
@@ -293,9 +292,9 @@ export default class AxisComponent extends AsyncLoadComponent<
 
     switch (exprType) {
       case "date":
-        return R(ui.RadioToggleComponent, {
-          value: axis.xform ? axis.xform.type : null,
-          options: [
+        return <ui.RadioToggleComponent
+          value={axis.xform ? axis.xform.type : null}
+          options={[
             { value: null, label: T`Exact Date` },
             { value: "year", label: T`Year` },
             { value: "yearmonth", label: T`Year/Month` },
@@ -303,13 +302,13 @@ export default class AxisComponent extends AsyncLoadComponent<
             { value: "week", label: T`Week` },
             { value: "yearweek", label: T`Year/Week` },
             { value: "yearquarter", label: T`Year/Quarter` }
-          ],
-          onChange: this.handleXformTypeChange
-        })
+          ]}
+          onChange={this.handleXformTypeChange}
+        />
       case "datetime":
-        return R(ui.RadioToggleComponent, {
-          value: axis.xform ? axis.xform.type : null,
-          options: [
+        return <ui.RadioToggleComponent
+          value={axis.xform ? axis.xform.type : null}
+          options={[
             { value: "date", label: T`Date` },
             { value: "year", label: T`Year` },
             { value: "yearmonth", label: T`Year/Month` },
@@ -317,9 +316,9 @@ export default class AxisComponent extends AsyncLoadComponent<
             { value: "week", label: T`Week` },
             { value: "yearweek", label: T`Year/Week` },
             { value: "yearquarter", label: T`Year/Quarter` }
-          ],
-          onChange: this.handleXformTypeChange
-        })
+          ]}
+          onChange={this.handleXformTypeChange}
+        />
     }
     return null
   }
@@ -329,20 +328,22 @@ export default class AxisComponent extends AsyncLoadComponent<
       return null
     }
 
-    return [
-      R("br"),
-      R(AxisColorEditorComponent, {
-        schema: this.props.schema,
-        axis,
-        categories: this.state.categories,
-        onChange: this.props.onChange,
-        reorderable: this.props.reorderable,
-        defaultColor: this.props.defaultColor,
-        allowExcludedValues: this.props.allowExcludedValues,
-        autosetColors: this.props.autosetColors,
-        initiallyExpanded: this.props.collapseCategories !== true
-      })
-    ]
+    return (
+      <>
+        <br/>
+        <AxisColorEditorComponent
+          schema={this.props.schema}
+          axis={axis}
+          categories={this.state.categories ?? undefined}
+          onChange={this.props.onChange}
+          reorderable={this.props.reorderable}
+          defaultColor={this.props.defaultColor ?? undefined}
+          allowExcludedValues={this.props.allowExcludedValues}
+          autosetColors={this.props.autosetColors}
+          initiallyExpanded={this.props.collapseCategories !== true}
+        />
+      </>
+    )
   }
 
   renderExcludedValues(axis: any) {
@@ -356,19 +357,21 @@ export default class AxisComponent extends AsyncLoadComponent<
       return null
     }
 
-    return [
-      R("br"),
-      R(CategoryMapComponent, {
-        schema: this.props.schema,
-        axis,
-        onChange: this.props.onChange,
-        categories: this.state.categories,
-        reorderable: false,
-        showColorMap: false,
-        allowExcludedValues: true,
-        initiallyExpanded: this.props.collapseCategories !== true
-      })
-    ]
+    return (
+      <>
+        <br/>
+        <CategoryMapComponent
+          schema={this.props.schema}
+          axis={axis}
+          onChange={this.props.onChange}
+          categories={this.state.categories}
+          reorderable={false}
+          showColorMap={false}
+          allowExcludedValues={true}
+          initiallyExpanded={this.props.collapseCategories !== true}
+        />
+      </>
+    )
   }
 
   renderFormat(axis: any) {
@@ -384,21 +387,21 @@ export default class AxisComponent extends AsyncLoadComponent<
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Format`),
-      ": ",
-      R(
-        "select",
-        {
-          value: axis.format != null ? axis.format : getDefaultFormat(valueType),
-          className: "form-select",
-          style: { width: "auto", display: "inline-block" },
-          onChange: this.handleFormatChange
-        },
-        _.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Format`}</label>
+        {": "}
+        <select
+          value={axis.format != null ? axis.format : getDefaultFormat(valueType)}
+          className="form-select"
+          style={{ width: "auto", display: "inline-block" }}
+          onChange={this.handleFormatChange}
+        >
+          {_.map(formats, (format) => (
+            <option key={format.value} value={format.value}>{format.label}</option>
+          ))}
+        </select>
+      </div>
     )
   }
 
@@ -422,27 +425,24 @@ export default class AxisComponent extends AsyncLoadComponent<
         break
     }
 
-    return R(
-      "div",
-      null,
-      R(
-        "div",
-        null,
-        R(ExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.table,
-          types: axisBuilder.getExprTypes(this.props.types),
-          // preventRemove: @props.required
-          onChange: this.handleExprChange,
-          value: this.props.value ? this.props.value.expr : null,
-          aggrStatuses
-        })
-      ),
-      this.renderXform(axis),
-      this.props.showFormat ? this.renderFormat(axis) : undefined,
-      this.renderColorMap(axis),
-      this.renderExcludedValues(axis)
+    return (
+      <div>
+        <div>
+          <ExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.table}
+            types={axisBuilder.getExprTypes(this.props.types)}
+            onChange={this.handleExprChange}
+            value={this.props.value ? this.props.value.expr : null}
+            aggrStatuses={aggrStatuses}
+          />
+        </div>
+        {this.renderXform(axis)}
+        {this.props.showFormat ? this.renderFormat(axis) : undefined}
+        {this.renderColorMap(axis)}
+        {this.renderExcludedValues(axis)}
+      </div>
     )
   }
 }

package/src/axes/CategoryMapComponent.ts

@@ -44,7 +44,7 @@ export default class CategoryMapComponent extends React.Component<
 
   handleReorder = (map: any) => {
     const order = _.pluck(map, "value")
-    return this.props.onChange(update(this.props.axis, { drawOrder: { $set: order } }))
+    this.props.onChange(update(this.props.axis, { drawOrder: { $set: order } }))
   }
 
   handleColorChange = (value: any, color: any) => {
@@ -56,7 +56,7 @@ export default class CategoryMapComponent extends React.Component<
       colorMap.push({ value, color })
     }
 
-    return this.props.onChange(update(this.props.axis, { colorMap: { $set: colorMap } }))
+    this.props.onChange(update(this.props.axis, { colorMap: { $set: colorMap } }))
   }
 
   handleExcludeChange = (value: any, ev: any) => {
@@ -67,7 +67,7 @@ export default class CategoryMapComponent extends React.Component<
       excludedValues = _.union(this.props.axis.excludedValues || [], [value])
     }
 
-    return this.props.onChange(update(this.props.axis, { excludedValues: { $set: excludedValues } }))
+    this.props.onChange(update(this.props.axis, { excludedValues: { $set: excludedValues } }))
   }
 
   // Gets the current color value if known
@@ -82,7 +82,7 @@ export default class CategoryMapComponent extends React.Component<
   handleNullLabelChange = (e: any) => {
     const name = prompt(T`Enter label for none value`, this.props.axis.nullLabel || T`None`)
     if (name) {
-      return this.props.onChange(update(this.props.axis, { nullLabel: { $set: name } }))
+      this.props.onChange(update(this.props.axis, { nullLabel: { $set: name } }))
     }
   }
 

package/src/axes/RangesComponent.ts

@@ -95,7 +95,8 @@ 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" }),
-        T` Add Range`
+        " ",
+        T`Add Range`
       )
     )
   }
@@ -145,7 +146,7 @@ class RangeComponent extends React.Component<RangeComponentProps> {
 
     if (this.props.range.maxValue != null) {
       if (placeholder) {
-        placeholder += T` and `
+        placeholder += ` ${T`and`} `
       }
       if (this.props.range.maxOpen) {
         placeholder += `< ${this.props.range.maxValue}`