@mwater/visualization 5.4.1 → 5.4.3

package/src/IdSelection.ts

@@ -0,0 +1,62 @@
+/** Immutable selection class for selecting ids */
+export default class IdSelection {
+  ids: { [id: string]: true }
+  inverted: boolean
+
+  // ids is map of ids to true, inverted is boolean
+  constructor(ids = {}, inverted = false) {
+    this.ids = ids
+    this.inverted = inverted
+  }
+
+  isSelected(id: string) {
+    if (this.ids[id]) {
+      return !this.inverted
+    }
+    return this.inverted
+  }
+
+  isNone() {
+    return Object.keys(this.ids).length === 0 && !this.inverted
+  }
+
+  all() {
+    return new IdSelection({}, true)
+  }
+
+  none() {
+    return new IdSelection({}, false)
+  }
+
+  invert() {
+    return new IdSelection(this.ids, !this.inverted)
+  }
+
+  add(id: string) {
+    if (this.inverted) {
+      const newIds = { ...this.ids }
+      delete newIds[id]
+      return new IdSelection(newIds, true)
+    } else {
+      return new IdSelection({ ...this.ids, [id]: true }, false)
+    }
+  }
+
+  remove(id: string) {
+    if (!this.inverted) {
+      const newIds = { ...this.ids }
+      delete newIds[id]
+      return new IdSelection(newIds, false)
+    } else {
+      return new IdSelection({ ...this.ids, [id]: true }, true)
+    }
+  }
+
+  toggle(id: string) {
+    if (this.isSelected(id)) {
+      return this.remove(id)
+    } else {
+      return this.add(id)
+    }
+  }
+}

package/src/MWaterAddRelatedIndicatorComponent.ts

@@ -124,10 +124,11 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
         { style: { paddingLeft: 5 }, className: "text-muted" },
         T`Other Available Indicators. Click to enable. `,
         R("i", { className: "fa fa-check-circle" }),
-        T` = recommended`,
+        " = ",
+        T`recommended`,
 
         !this.state.indicators
-          ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), T` Loading...`)
+          ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), " ", T`Loading...`)
           : undefined,
 
         R(

package/src/MWaterCompleteTableSelectComponent.tsx

@@ -12,7 +12,6 @@ import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListCom
 import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
 import { Form } from "@mwater/forms"
 import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
-import { LocaleContext } from "@mwater/expressions-ui"
 
 const sitesOrder: { [table: string]: number } = {
   "entities.water_point": 1,
@@ -52,8 +51,6 @@ interface MWaterCompleteTableSelectComponentProps {
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
   showLegacyAssets: boolean
 }> {
-  static contextType = LocaleContext
-
   constructor(props: MWaterCompleteTableSelectComponentProps) {
     super(props)
 
@@ -104,8 +101,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         _.map(types, (tableId) => {
           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.bind(null, table.id)
           }
         })
@@ -159,8 +156,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(sweetSenseTables, (table) => {
         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.bind(null, table.id)
         }
       })
@@ -177,7 +174,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context
+      locale: T.locale
     })
   }
 
@@ -191,7 +188,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context
+      locale: T.locale
     })
   }
 
@@ -208,8 +205,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         continue
       }
       items.push({
-        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.bind(null, table.id)
       })
     }
@@ -236,7 +233,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context
+      locale: T.locale
     })
   }
 
@@ -294,8 +291,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(otherTables, (table) => {
         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.bind(null, table.id)
         }
       })
@@ -320,25 +317,25 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     const sweetSenseTables = this.getSweetSenseTables()
 
     const tabs: TabbedComponentTab[] = [
-      { 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: "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" }), T` Indicators`],
+        label: [R("i", { className: "fa fa-check-circle" }), " ", T`Indicators`],
         elem: this.renderIndicators()
       },
       {
         id: "issues",
-        label: [R("i", { className: "fa fa-exclamation-circle" }), T` Issues`],
+        label: [R("i", { className: "fa fa-exclamation-circle" }), " ", T`Issues`],
         elem: this.renderIssues()
       },
-      { 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() }
+      { 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: T` Sensors`, elem: this.renderSweetSense() })
+      tabs.push({ id: "sensors", label: T`Sensors`, elem: this.renderSweetSense() })
     }
 
     tabs.push({ id: "other", label: T`Advanced`, elem: this.renderOther() })
@@ -383,8 +380,6 @@ interface FormsListComponentState {
 
 // Searchable list of forms
 class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
     this.state = {
@@ -447,7 +442,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
       confirm(
         T`Remove ${ExprUtils.localizeString(
           table.name,
-          this.context
+          T.locale
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -496,8 +491,8 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               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.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -562,7 +557,6 @@ interface IndicatorsListComponentState {
 
 // Searchable list of indicators
 class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
-  static contextType = LocaleContext
   addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
 
   constructor(props: any) {
@@ -590,7 +584,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         [
           (indicator: any) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
           (indicator: any) => (indicator.design.recommended ? 0 : 1),
-          (indicator: any) => ExprUtils.localizeString(indicator.design.name, this.context)
+          (indicator: any) => ExprUtils.localizeString(indicator.design.name, T.locale)
         ],
         ["asc", "asc", "asc"]
       )
@@ -598,8 +592,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       return this.setState({
         indicators: _.map(indicators, (indicator) => ({
           id: indicator._id,
-          name: ExprUtils.localizeString(indicator.design.name, this.context),
-          desc: ExprUtils.localizeString(indicator.design.desc, this.context)
+          name: ExprUtils.localizeString(indicator.design.name, T.locale),
+          desc: ExprUtils.localizeString(indicator.design.desc, T.locale)
         }))
       })
     }).fail((xhr: any) => {
@@ -612,7 +606,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       confirm(
         T`Remove ${ExprUtils.localizeString(
           table.name,
-          this.context
+          T.locale
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -679,8 +673,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               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.handleSelect.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -738,8 +732,6 @@ class AddIndicatorConfirmPopupComponent extends React.Component<
   AddIndicatorConfirmPopupComponentProps,
   AddIndicatorConfirmPopupComponentState
 > {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
     this.state = {
@@ -781,8 +773,8 @@ are certain that you want to use the raw indicator table`
 
       R(uiComponents.OptionListComponent, {
         items: _.map(entityColumns, (entityColumn) => ({
-          name: ExprUtils.localizeString(entityColumn.name, this.context),
-          desc: ExprUtils.localizeString(entityColumn.desc, this.context),
+          name: ExprUtils.localizeString(entityColumn.name, T.locale),
+          desc: ExprUtils.localizeString(entityColumn.desc, T.locale),
           onClick: () => {
             // Select table
             this.props.onChange(entityColumn.join!.toTable)
@@ -845,8 +837,6 @@ interface IssuesListComponentState {
 
 // Searchable list of issue types
 class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
     this.state = {
@@ -869,7 +859,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         [
           (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
           (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
-          (issueType) => ExprUtils.localizeString(issueType.name, this.context)
+          (issueType) => ExprUtils.localizeString(issueType.name, T.locale)
         ],
         ["asc", "asc", "asc"]
       )
@@ -877,8 +867,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       return this.setState({
         issueTypes: _.map(issueTypes, (issueType) => ({
           id: issueType._id,
-          name: ExprUtils.localizeString(issueType.name, this.context),
-          desc: ExprUtils.localizeString(issueType.desc, this.context)
+          name: ExprUtils.localizeString(issueType.name, T.locale),
+          desc: ExprUtils.localizeString(issueType.desc, T.locale)
         }))
       })
     }).fail((xhr: any) => {
@@ -891,7 +881,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       confirm(
         T`Remove ${ExprUtils.localizeString(
           table.name,
-          this.context
+          T.locale
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -940,8 +930,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               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.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }

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 `???`
         }
       }
     }