@mwater/visualization 5.4.1 → 5.4.2

package/src/widgets/charts/ChartViewComponent.ts

@@ -38,6 +38,12 @@ export interface ChartViewComponentProps {
 
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display */
+  translate: (input: string) => string
 }
 
 interface ChartViewComponentState {
@@ -197,15 +203,18 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
     if (this.state.dataError) {
       return this.renderError()
     }
+    
+    // Translate design if needed
+    const translatedDesign = this.props.onDesignChange || !this.props.translate || !this.state.validDesign ? this.state.validDesign : this.props.chart.translateDesign(this.state.validDesign, this.props.translate)
 
     return R(
       "div",
       { style },
-      this.state.validDesign
+      translatedDesign
         ? this.props.chart.createViewElement({
             schema: this.props.schema,
             dataSource: this.props.dataSource,
-            design: this.state.validDesign,
+            design: translatedDesign,
             onDesignChange: this.props.onDesignChange,
             data: this.state.data,
             scope: this.props.scope,
@@ -213,7 +222,8 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
             width: this.props.width,
             height: this.props.height,
             onRowClick: this.props.onRowClick,
-            filters: this.props.filters
+            filters: this.props.filters,
+            locale: this.props.locale,
           })
         : undefined,
       this.state.dataLoading ? this.renderSpinner() : undefined

package/src/widgets/charts/ChartWidget.ts

@@ -41,7 +41,9 @@ export default class ChartWidget extends Widget {
       width: options.width,
       height: options.height,
       onRowClick: options.onRowClick,
-      refreshKey: options.refreshKey
+      refreshKey: options.refreshKey,
+      locale: options.locale,
+      translate: options.translate
     })
   }
 
@@ -70,4 +72,12 @@ export default class ChartWidget extends Widget {
   isAutoHeight() {
     return this.chart.isAutoHeight()
   }
+
+  /** Get a list of translatable strings in the design */
+  getTranslatableStrings(design: any, schema: Schema) {
+    // Clean design first
+    const cleanDesign = this.chart.cleanDesign(design, schema)
+
+    return this.chart.getTranslatableStrings(cleanDesign, schema)
+  }
 }

package/src/widgets/charts/ChartWidgetComponent.tsx

@@ -48,6 +48,12 @@ export interface ChartWidgetComponentProps {
 
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display */
+  translate: (input: string) => string
 }
 
 // Complete chart widget
@@ -134,6 +140,8 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       onScopeChange={this.props.onScopeChange}
       onRowClick={this.props.onRowClick}
       refreshKey={this.props.refreshKey}
+      locale={this.props.locale}
+      translate={this.props.translate}
     />
   }
 
@@ -251,7 +259,7 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       this.props.filters
     )
     if (!designError) {
-      dropdownItems.push({ label: T`Export Data`, icon: "save-file", onClick: this.handleSaveCsvFile })
+      dropdownItems.push({ label: T`Export Data`, onClick: this.handleSaveCsvFile })
     }
     if (this.props.onDesignChange != null) {
       dropdownItems.unshift({

package/src/widgets/charts/calendar/CalendarChart.ts

@@ -224,4 +224,33 @@ export default class CalendarChart extends Chart {
   getPlaceholderIcon() {
     return "fa-calendar"
   }
+
+  translateDesign(design: CalendarChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate title text
+      if (draft.titleText) {
+        draft.titleText = translate(draft.titleText)
+      }
+
+      // Translate axis category labels
+      if (draft.dateAxis?.categoryLabels) {
+        for (const key in draft.dateAxis.categoryLabels) {
+          draft.dateAxis.categoryLabels[key] = translate(draft.dateAxis.categoryLabels[key])
+        }
+      }
+      if (draft.valueAxis?.categoryLabels) {
+        for (const key in draft.valueAxis.categoryLabels) {
+          draft.valueAxis.categoryLabels[key] = translate(draft.valueAxis.categoryLabels[key])
+        }
+      }
+
+      // Translate null labels
+      if (draft.dateAxis?.nullLabel) {
+        draft.dateAxis.nullLabel = translate(draft.dateAxis.nullLabel)
+      }
+      if (draft.valueAxis?.nullLabel) {
+        draft.valueAxis.nullLabel = translate(draft.valueAxis.nullLabel)
+      }
+    })
+  }
 }

package/src/widgets/charts/calendar/CalendarChartViewComponent.tsx

@@ -113,7 +113,9 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
     const scopeData: WidgetScope = {
       name:
         this.axisBuilder.summarizeAxis(this.props.design.dateAxis!, this.context) +
-        T` is ` +
+        " " +
+        T`is` +
+        " " +
         this.axisBuilder.formatValue(this.props.design.dateAxis!, data, this.context),
       filter: {
         jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis!, data),

package/src/widgets/charts/imagemosaic/ImageMosaicChart.ts

@@ -227,4 +227,13 @@ export default class ImageMosaicChart extends Chart {
   getPlaceholderIcon() {
     return "fa-th"
   }
+
+  translateDesign(design: ImageMosaicChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate title text
+      if (draft.titleText) {
+        draft.titleText = translate(draft.titleText)
+      }
+    })
+  }
 }

package/src/widgets/charts/layered/LayeredChart.ts

@@ -1,3 +1,4 @@
+
 import _ from "lodash"
 import React from "react"
 import async from "async"
@@ -16,8 +17,8 @@ import { JsonQLFilter } from "../../.."
 import { JsonQLQuery } from "@mwater/jsonql"
 import LayeredChartViewComponent from "./LayeredChartViewComponent"
 import LayeredChartDesignerComponent from "./LayeredChartDesignerComponent"
+import { translateHtmlItems } from "../../../richtext/ExprItemsTranslator"
 
-// See LayeredChart Design.md for the design
 export default class LayeredChart extends Chart {
   cleanDesign(design: LayeredChartDesign, schema: Schema): LayeredChartDesign {
     const exprCleaner = new ExprCleaner(schema)
@@ -130,7 +131,7 @@ export default class LayeredChart extends Chart {
         return T`Missing Y Axis`
       }
 
-      if (!layer.axes.x && compiler.isXAxisRequired(design, layerId)) {
+      if (!layer.axes.x && compiler.isXAxisRequired(design)) {
         return T`Missing X Axis`
       }
       if (!layer.axes.color && compiler.isColorAxisRequired(design, layerId)) {
@@ -246,7 +247,9 @@ export default class LayeredChart extends Chart {
       height: options.height,
 
       scope: options.scope,
-      onScopeChange: options.onScopeChange
+      onScopeChange: options.onScopeChange,
+
+      locale: options.locale,
     }
 
     return React.createElement(LayeredChartViewComponent, props)
@@ -356,4 +359,69 @@ export default class LayeredChart extends Chart {
   getPlaceholderIcon() {
     return "fa-bar-chart"
   }
+
+  /** Translates the design */
+  translateDesign(design: LayeredChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate axis labels
+      if (draft.xAxisLabelText) {
+        draft.xAxisLabelText = translate(draft.xAxisLabelText)
+      }
+      if (draft.yAxisLabelText) {
+        draft.yAxisLabelText = translate(draft.yAxisLabelText)
+      }
+
+      // Translate layer names
+      for (const layer of draft.layers) {
+        if (layer.name) {
+          layer.name = translate(layer.name)
+        }
+
+        // Translate axis category labels
+        if (layer.axes.x?.categoryLabels) {
+          for (const key in layer.axes.x.categoryLabels) {
+            layer.axes.x.categoryLabels[key] = translate(layer.axes.x.categoryLabels[key])
+          }
+        }
+        if (layer.axes.y?.categoryLabels) {
+          for (const key in layer.axes.y.categoryLabels) {
+            layer.axes.y.categoryLabels[key] = translate(layer.axes.y.categoryLabels[key])
+          }
+        }
+        if (layer.axes.color?.categoryLabels) {
+          for (const key in layer.axes.color.categoryLabels) {
+            layer.axes.color.categoryLabels[key] = translate(layer.axes.color.categoryLabels[key])
+          }
+        }
+
+        // Translate null labels
+        if (layer.axes.x?.nullLabel) {
+          layer.axes.x.nullLabel = translate(layer.axes.x.nullLabel)
+        }
+        if (layer.axes.y?.nullLabel) {
+          layer.axes.y.nullLabel = translate(layer.axes.y.nullLabel)
+        }
+        if (layer.axes.color?.nullLabel) {
+          layer.axes.color.nullLabel = translate(layer.axes.color.nullLabel)
+        }
+      }
+
+      // Translate y thresholds
+      if (draft.yThresholds) {
+        for (const threshold of draft.yThresholds) {
+          if (threshold.label) {
+            threshold.label = translate(threshold.label)
+          }
+        }
+      }
+
+      // Translate header and footer using ExprItemsTranslator
+      if (draft.header) {
+        draft.header.items = translateHtmlItems(draft.header.items || [], translate)
+      }
+      if (draft.footer) {
+        draft.footer.items = translateHtmlItems(draft.footer.items || [], translate)
+      }
+    })
+  }
 }

package/src/widgets/charts/layered/LayeredChartCompiler.ts

@@ -473,7 +473,7 @@ export default class LayeredChartCompiler {
   }
 
   // Compiles data for a polar chart (pie/donut) with no x axis
-  compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale: any): C3Data {
+  compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data {
     let order: "asc" | "desc" | null
     const columns: any = []
     const types: { [key: string]: ChartTypes } = {}
@@ -670,7 +670,7 @@ export default class LayeredChartCompiler {
           const trendlineSeries = seriesY + ":trendline"
           columns.push([trendlineSeries].concat(calculateLinearRegression(yValues, xValues)))
           types[trendlineSeries] = line ? line() : "line"
-          names[trendlineSeries] = names[seriesY] + T` Trendline`
+          names[trendlineSeries] = names[seriesY] + " " + T`Trendline`
           xs[trendlineSeries] = seriesX
           colors[trendlineSeries] = layer.color || defaultColors[layerIndex]
           legendHide.push(trendlineSeries) // Hide in legend

package/src/widgets/charts/layered/LayeredChartDesignerComponent.tsx

@@ -270,7 +270,8 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
             "button",
             { className: "btn btn-link", type: "button", onClick: this.handleAddLayer },
             R("span", { className: "fas fa-plus" }),
-            T` Add Another Series`
+            " ",
+            T`Add Another Series`
           )
         : undefined
     )
@@ -481,7 +482,8 @@ class ThresholdsComponent extends React.Component<{
         "button",
         { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
         R("i", { className: "fa fa-plus" }),
-        T` Add Y Threshold`
+        " ",
+        T`Add Y Threshold`
       )
     )
   }

package/src/widgets/charts/layered/LayeredChartViewComponent.ts

@@ -105,7 +105,8 @@ export default class LayeredChartViewComponent extends React.Component<
         schema: this.props.schema,
         dataSource: this.props.dataSource,
         exprValues: this.props.data.header || {},
-        width: this.props.width
+        width: this.props.width,
+        locale: this.context
       })
     )
   }
@@ -125,7 +126,8 @@ export default class LayeredChartViewComponent extends React.Component<
         schema: this.props.schema,
         dataSource: this.props.dataSource,
         exprValues: this.props.data.footer || {},
-        width: this.props.width
+        width: this.props.width,
+        locale: this.context
       })
     )
   }
@@ -171,7 +173,7 @@ interface C3ChartComponentProps {
 class C3ChartComponent extends React.Component<C3ChartComponentProps> {
   throttledCreateChart: ((props: C3ChartComponentProps) => any) & _.Cancelable
   chart: any
-  chartDiv: any
+  chartDiv: HTMLDivElement | null
 
   constructor(props: C3ChartComponentProps) {
     super(props)
@@ -190,6 +192,10 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
       this.chart.destroy()
     }
 
+    if (!this.chartDiv) {
+      return
+    }
+
     const compiler = new LayeredChartCompiler({ schema: props.schema })
     const chartOptions: any = compiler.createChartOptions({
       design: this.props.design,
@@ -531,7 +537,7 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
 
     return R("div", {
       ref: c => {
-        return (this.chartDiv = c)
+        this.chartDiv = c
       }
     })
   }

package/src/widgets/charts/pivot/PivotChart.ts

@@ -14,6 +14,7 @@ import PivotChartLayoutBuilder from "./PivotChartLayoutBuilder"
 import { WidgetDataSource } from "../../WidgetDataSource"
 import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign"
 import { JsonQLFilter } from "../../../JsonQLFilter"
+import { translateHtmlItems } from "../../../richtext/ExprItemsTranslator"
 
 // Store true as a weakly cached value if a design is already clean
 const cleanDesignCache = new WeakCache()
@@ -422,4 +423,76 @@ export default class PivotChart extends Chart {
   getPlaceholderIcon() {
     return "fa-magic"
   }
+
+  translateDesign(design: PivotChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Helper function to translate a segment and its children
+      const translateSegment = (segment: PivotChartSegment) => {
+        // Translate segment label
+        if (segment.label) {
+          segment.label = translate(segment.label)
+        }
+
+        // Translate value axis labels
+        if (segment.valueAxis?.categoryLabels) {
+          for (const key in segment.valueAxis.categoryLabels) {
+            segment.valueAxis.categoryLabels[key] = translate(segment.valueAxis.categoryLabels[key])
+          }
+        }
+
+        // Translate null label
+        if (segment.valueAxis?.nullLabel) {
+          segment.valueAxis.nullLabel = translate(segment.valueAxis.nullLabel)
+        }
+
+        // Recursively translate children
+        if (segment.children) {
+          segment.children.forEach(translateSegment)
+        }
+      }
+
+      // Translate all row segments
+      draft.rows.forEach(translateSegment)
+
+      // Translate all column segments
+      draft.columns.forEach(translateSegment)
+
+      // Translate all intersections
+      for (const intersection of Object.values(draft.intersections)) {
+        // Translate value axis labels
+        if (intersection.valueAxis?.categoryLabels) {
+          for (const key in intersection.valueAxis.categoryLabels) {
+            intersection.valueAxis.categoryLabels[key] = translate(intersection.valueAxis.categoryLabels[key])
+          }
+        }
+
+        // Translate null label
+        if (intersection.valueAxis?.nullLabel) {
+          intersection.valueAxis.nullLabel = translate(intersection.valueAxis.nullLabel)
+        }
+
+        // Translate segment value axis override labels
+        if (intersection.segmentValueAxisOverrides) {
+          for (const axis of Object.values(intersection.segmentValueAxisOverrides)) {
+            if (axis?.categoryLabels) {
+              for (const key in axis.categoryLabels) {
+                axis.categoryLabels[key] = translate(axis.categoryLabels[key])
+              }
+            }
+            if (axis?.nullLabel) {
+              axis.nullLabel = translate(axis.nullLabel)
+            }
+          }
+        }
+      }
+
+      // Translate header and footer using ExprItemsTranslator
+      if (draft.header?.items) {
+        draft.header.items = translateHtmlItems(draft.header.items, translate)
+      }
+      if (draft.footer?.items) {
+        draft.footer.items = translateHtmlItems(draft.footer.items, translate)
+      }
+    })
+  }
 }

package/src/widgets/charts/pivot/PivotChartLayoutComponent.tsx

@@ -393,7 +393,7 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
       R("a", { className: "link-plain", onClick: this.props.onEditSection }, T`Edit`),
       cell.summarize
         ? [
-            R("span", { className: "text-muted" }, T` / `),
+            R("span", { className: "text-muted" }, ` / `),
             R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T`Summarize`)
           ]
         : undefined

package/src/widgets/charts/pivot/SegmentDesignerComponent.tsx

@@ -95,13 +95,15 @@ export default class SegmentDesignerComponent extends React.Component<
       <ui.Radio key="single" value={this.state.mode} radioValue={"single"} onChange={this.handleMode}>
         {T`Single ${this.props.segmentType}`}
         <span className="text-muted">
-          {T` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
+          {` - `}
+          {T`used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
         </span>
       </ui.Radio>,
 
       <ui.Radio key="multiple" value={this.state.mode} radioValue={"multiple"} onChange={this.handleMode}>
         {T`Multiple ${this.props.segmentType}s`}
-        <span className="text-muted">{T` - disaggregate data by a field`}</span>
+        {" - "}
+        <span className="text-muted">{T`disaggregate data by a field`}</span>
       </ui.Radio>
     )
   }
@@ -170,7 +172,7 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: [R(ui.Icon, { id: "glyphicon-filter" }), T` Filters`],
+        label: [R(ui.Icon, { id: "glyphicon-filter" }), " ", T`Filters`],
         hint: T`Filters all data associated with this ${this.props.segmentType}`
       },
       R(FilterExprComponent, {
@@ -265,7 +267,7 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), T` Sort`],
+        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " ", T`Sort`],
         hint: T`Sorts the display of this ${this.props.segmentType}`
       },
       R(ExprComponent, {

package/src/widgets/charts/table/OrderingsComponent.tsx

@@ -56,7 +56,8 @@ export default class OrderingsComponent extends React.Component<OrderingsCompone
         "button",
         { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" },
         R("span", { className: "fas fa-plus" }),
-        T` Add Ordering`
+        " ",
+        T`Add Ordering`
       )
     )
   }

package/src/widgets/charts/table/TableChart.ts

@@ -431,4 +431,21 @@ export default class TableChart extends Chart {
   getPlaceholderIcon() {
     return "fa-table"
   }
+
+  translateDesign(design: TableChartDesign, translate: (input: string) => string) {
+    return produce(design, draft => {
+      // Translate title text
+      if (draft.titleText) {
+        draft.titleText = translate(draft.titleText)
+      }
+
+      // Translate column headers and axis labels
+      for (const column of draft.columns) {
+        // Translate header text
+        if (column.headerText) {
+          column.headerText = translate(column.headerText)
+        }
+      }
+    })
+  }
 }

package/src/widgets/text/TextComponent.tsx

@@ -3,18 +3,22 @@ import _ from "lodash"
 import RichTextComponent from "../../richtext/RichTextComponent"
 import ExprInsertModalComponent from "./ExprInsertModalComponent"
 import ExprUpdateModalComponent from "./ExprUpdateModalComponent"
-import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter"
+import ExprItemsHtmlConverter, { HtmlItemExpr, HtmlItemOrExpr } from "../../richtext/ExprItemsHtmlConverter"
 import { TextWidgetDesign } from "./TextWidgetDesign"
 import { DataSource, Schema } from "@mwater/expressions"
 import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface TextComponentProps {
   design: TextWidgetDesign
+
+  /** Called when design changes. If not set, will be in display mode, otherwise in edit mode */
   onDesignChange?: (design: TextWidgetDesign) => void
   schema: Schema
   dataSource: DataSource
+
   /** Expression values */
   exprValues: { [key: string]: any }
+
   width?: number
   height?: number
   
@@ -23,10 +27,15 @@ export interface TextComponentProps {
 
   /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
   namedStrings?: { [key: string]: string }
+
+  /** Locale to use for display */
+  locale: string
 }
 
-// Text component which is provided with the data it needs, rather than loading it.
-// Used by TextWidgetComponent and also by other components that embed text fields
+/**
+ * Text component which is provided with the data it needs, rather than loading it.
+ * Used by TextWidgetComponent and also by other components that embed text fields
+ */
 export default class TextComponent extends React.Component<TextComponentProps> {
   static contextType = LocaleContext
   exprInsertModal: ExprInsertModalComponent | null = null
@@ -38,7 +47,7 @@ export default class TextComponent extends React.Component<TextComponentProps> {
       this.props.schema,
       this.props.onDesignChange != null,
       this.props.exprValues,
-      // Display summaries if in design more and singleRowTable is set
+      // Display summaries if in design mode and singleRowTable is set
       this.props.onDesignChange != null && this.props.singleRowTable != null,
       // Only replace named strings if not editing
       this.props.onDesignChange == null ? this.props.namedStrings : undefined,
@@ -46,12 +55,12 @@ export default class TextComponent extends React.Component<TextComponentProps> {
     )
   }
 
-  handleItemsChange = (items: any) => {
+  handleItemsChange = (items: HtmlItemOrExpr[]) => {
     const design = { ...this.props.design, items }
     return this.props.onDesignChange!(design)
   }
 
-  handleInsertExpr = (item: any) => {
+  handleInsertExpr = (item: HtmlItemExpr) => {
     const html = '<div data-embed="' + _.escape(JSON.stringify(item)) + '"></div>'
 
     return this.editor!.pasteHTML(html)
@@ -70,26 +79,27 @@ export default class TextComponent extends React.Component<TextComponentProps> {
       })
 
     const items = replaceItemInItems(this.props.design.items || [], item)
-    return this.props.onDesignChange!({ ...this.props.design, items })
+    this.props.onDesignChange!({ ...this.props.design, items })
   }
 
-  handleItemClick = (item: any) => {
-    return this.exprUpdateModal!.open(item, (item: any) => {
+  handleItemClick = (item: HtmlItemExpr) => {
+    this.exprUpdateModal!.open(item, (item) => {
       // Replace in items
-      return this.replaceItem(item)
+      this.replaceItem(item)
     })
   }
 
   handleAddExpr = (ev: React.MouseEvent<HTMLDivElement>) => {
     ev.preventDefault()
-    return this.exprInsertModal!.open()
+    this.exprInsertModal!.open()
   }
 
   renderExtraPaletteButtons() {
     return (
       <div key="expr" className="mwater-visualization-text-palette-item" onMouseDown={this.handleAddExpr}>
         <i className="fa fa-plus" />
-        {T` Expression`}
+        {" "}
+        {T`Expression`}
       </div>
     )
   }

package/src/widgets/text/TextWidget.ts

@@ -12,6 +12,7 @@ import { JsonQLSelectQuery } from "@mwater/jsonql"
 import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
 import { TextWidgetDesign } from "./TextWidgetDesign"
+import { getHtmlItemsStrings } from "../../richtext/ExprItemsTranslator"
 
 export default class TextWidget extends Widget {
   // Creates a React element that is a view of the widget
@@ -44,7 +45,9 @@ export default class TextWidget extends Widget {
       singleRowTable: options.singleRowTable,
       namedStrings: options.namedStrings,
       ref: options.widgetRef,
-      refreshKey: options.refreshKey
+      refreshKey: options.refreshKey,
+      locale: options.locale,
+      translate: options.translate
     })
   }
 
@@ -191,7 +194,7 @@ export default class TextWidget extends Widget {
   }
 
   // Get expression items recursively
-  getExprItems(items: HtmlItem[]): HtmlItemExpr[] {
+  getExprItems(items?: HtmlItem[]): HtmlItemExpr[] {
     let exprItems: any[] = []
     for (let item of items || []) {
       if ((item as any).type === "expr") {
@@ -267,4 +270,8 @@ export default class TextWidget extends Widget {
 
     return entries
   }
+
+  getTranslatableStrings(design: TextWidgetDesign, schema: Schema): string[] {
+    return getHtmlItemsStrings(design.items || [])
+  }
 }