@mwater/visualization 5.4.0 → 5.4.2

package/src/MWaterLoaderComponent.ts

@@ -8,34 +8,36 @@ import LoadingComponent from "@mwater/react-library/lib/LoadingComponent"
 import mWaterLoader from "./mWaterLoader"
 import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent"
 
+export interface MWaterLoaderComponentProps {
+  apiUrl: string
+  client?: string
+  share?: string
+  /**  user id of logged in user */
+  user?: string
+  /**  Load schema as a specific user (for shared dashboards, etc) */
+  asUser?: string
+  /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
+  extraTables?: string[]
+  /**  Called when extra tables are changed and schema will be reloaded */
+  onExtraTablesChange?: (extraTables: string[]) => void
+  /** Locales of the schema to load. Default is all. */
+  locales?: string[]
+  /**  Override default add layer component. See AddLayerComponent for details */
+  addLayerElementFactory?: AddLayerElementFactory
+  children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
+  /** Custom error formatter that returns React node or string, gets passed the error response from server */
+  errorFormatter?: (data: any, defaultError: string) => string
+  /** Origin of usage. e.g. "dashboards:43445364..." */
+  origin?: string
+}
+
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
  * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 export default class MWaterLoaderComponent extends AsyncLoadComponent<
-  {
-    apiUrl: string
-    client?: string
-    share?: string
-    /**  user id of logged in user */
-    user?: string
-    /**  Load schema as a specific user (for shared dashboards, etc) */
-    asUser?: string
-    /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
-    extraTables?: string[]
-    /**  Called when extra tables are changed and schema will be reloaded */
-    onExtraTablesChange?: (extraTables: string[]) => void
-    /** Locales of the schema to load. Default is all. */
-    locales?: string[]
-    /**  Override default add layer component. See AddLayerComponent for details */
-    addLayerElementFactory?: AddLayerElementFactory
-    children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
-    /** Custom error formatter that returns React node or string, gets passed the error response from server */
-    errorFormatter?: (data: any, defaultError: string) => string
-    /** Origin of usage. e.g. "dashboards:43445364..." */
-    origin?: string
-  },
+  MWaterLoaderComponentProps,
   {
     error: any
     schema: Schema | null
@@ -45,7 +47,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
 > {
   mounted: boolean
 
-  constructor(props: any) {
+  constructor(props: MWaterLoaderComponentProps) {
     super(props)
     this.state = {
       error: null,
@@ -58,7 +60,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
   }
 
   // Override to determine if a load is needed. Not called on mounting
-  isLoadNeeded(newProps: any, oldProps: any) {
+  isLoadNeeded(newProps: MWaterLoaderComponentProps, oldProps: MWaterLoaderComponentProps) {
     return !_.isEqual(
       _.pick(newProps, "apiUrl", "client", "user", "share", "asUser", "extraTables", "locales"),
       _.pick(oldProps, "apiUrl", "client", "user", "share", "asUser", "extraTables", "locales")
@@ -66,9 +68,9 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
   }
 
   // Call callback with state changes
-  load(props: any, prevProps: any, callback: any) {
+  load(props: MWaterLoaderComponentProps, prevProps: MWaterLoaderComponentProps, callback: any) {
     // Load schema and data source
-    return mWaterLoader(
+    mWaterLoader(
       {
         apiUrl: props.apiUrl,
         client: props.client,

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>
     )
   }
 }