@mwater/visualization 5.3.2 → 5.4.0

package/src/widgets/ImageWidgetComponent.ts

@@ -78,7 +78,7 @@ export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidget
 
   renderExpression() {
     if (this.state.loading) {
-      return R("span", null, "Loading")
+      return R("span", null, T`Loading`)
     } else if (this.state.data) {
       // Make into array if not
       if (!_.isArray(this.state.data)) {
@@ -133,7 +133,7 @@ export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidget
   render() {
     const dropdownItems = []
     if (this.props.onDesignChange != null) {
-      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+      dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: this.handleStartEditing })
     }
 
     const captionPosition = this.props.design.captionPosition || "bottom"
@@ -325,7 +325,7 @@ class ImageWidgetDesignComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       ": ",
       R(TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }),
       R("br"),
@@ -334,7 +334,7 @@ class ImageWidgetDesignComponent extends React.Component<
         ? R(
             "div",
             { className: "mb-3" },
-            R("label", { className: "text-muted" }, "Field"),
+            R("label", { className: "text-muted" }, T`Field`),
             ": ",
             R(ExprComponent, {
               schema: this.props.schema,
@@ -354,26 +354,26 @@ class ImageWidgetDesignComponent extends React.Component<
     return R(
       "div",
       { style: { paddingTop: 10 } },
-      "Rotation: ",
+      T`Rotation: `,
       R(
         ui.Radio,
         { value: this.state.rotation || null, radioValue: null, onChange: this.handleRotationChange, inline: true },
-        "0 degrees"
+        T`0 degrees`
       ),
       R(
         ui.Radio,
         { value: this.state.rotation || null, radioValue: 90, onChange: this.handleRotationChange, inline: true },
-        "90 degrees"
+        T`90 degrees`
       ),
       R(
         ui.Radio,
         { value: this.state.rotation || null, radioValue: 180, onChange: this.handleRotationChange, inline: true },
-        "180 degrees"
+        T`180 degrees`
       ),
       R(
         ui.Radio,
         { value: this.state.rotation || null, radioValue: 270, onChange: this.handleRotationChange, inline: true },
-        "270 degrees"
+        T`270 degrees`
       )
     )
   }
@@ -382,14 +382,14 @@ class ImageWidgetDesignComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", null, "URL of image"),
+      R("label", null, T`URL of image`),
       R("input", {
         type: "text",
         className: "form-control",
         value: this.state.imageUrl || "",
         onChange: this.handleImageUrlChange
       }),
-      R("div", { className: "form-text text-muted" }, "e.g. http://somesite.com/image.jpg"),
+      R("div", { className: "form-text text-muted" }, T`e.g. http://somesite.com/image.jpg`),
       this.renderRotation()
     )
   }
@@ -398,20 +398,20 @@ class ImageWidgetDesignComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", null, "URL to open"),
+      R("label", null, T`URL to open`),
       R("input", {
         type: "text",
         className: "form-control",
         value: this.state.url || "",
         onChange: this.handleUrlChange
       }),
-      R("div", { className: "form-text text-muted" }, "e.g. http://somesite.com/"),
-      R("div", { className: "form-text text-muted" }, "When clicked on image, this link will open"),
+      R("div", { className: "form-text text-muted" }, T`e.g. http://somesite.com/`),
+      R("div", { className: "form-text text-muted" }, T`When clicked on image, this link will open`),
       R("div", null,
         R(ui.Checkbox, {
           value: !this.state.openUrlInSameTab, 
           onChange: this.handleOpenUrlInSameTabChange
-        }, "Open link in new tab")
+        }, T`Open link in new tab`)
       )
     )
   }
@@ -427,13 +427,13 @@ class ImageWidgetDesignComponent extends React.Component<
       R(
         "div",
         { className: "mb-3" },
-        R("label", null, "Caption"),
+        R("label", null, T`Caption`),
         R("input", {
           type: "text",
           className: "form-control",
           value: this.state.caption || "",
           onChange: this.handleCaptionChange,
-          placeholder: "Optional caption to display below image"
+          placeholder: T`Optional caption to display below image`
         })
       ),
 
@@ -441,11 +441,11 @@ class ImageWidgetDesignComponent extends React.Component<
         ? R(
             "div",
             { className: "mb-3" },
-            R("label", null, "Caption position"),
+            R("label", null, T`Caption position`),
             R(ui.Select, {
               options: [
-                { value: "bottom", label: "Bottom" },
-                { value: "top", label: "Top" }
+                { value: "bottom", label: T`Bottom` },
+                { value: "top", label: T`Top` }
               ],
               value: this.state.captionPosition,
               onChange: this.handleCaptionPositionChange
@@ -455,9 +455,9 @@ class ImageWidgetDesignComponent extends React.Component<
 
       R(TabbedComponent, {
         tabs: [
-          { id: "upload", label: "Upload", elem: this.renderUploadEditor() },
-          { id: "expression", label: "From Data", elem: this.renderExpressionEditor() },
-          { id: "url", label: "From URL", elem: this.renderImageUrlEditor() }
+          { id: "upload", label: T`Upload`, elem: this.renderUploadEditor() },
+          { id: "expression", label: T`From Data`, elem: this.renderExpressionEditor() },
+          { id: "url", label: T`From URL`, elem: this.renderImageUrlEditor() }
         ],
         initialTabId: this.state.currentTab
       }),
@@ -468,18 +468,18 @@ class ImageWidgetDesignComponent extends React.Component<
     const footer = R(
       "div",
       null,
-      R("button", { key: "save", type: "button", className: "btn btn-primary me-2", onClick: this.handleSave }, "Save"),
+      R("button", { key: "save", type: "button", className: "btn btn-primary me-2", onClick: this.handleSave }, T`Save`),
       R(
         "button",
         { key: "cancel", type: "button", className: "btn btn-secondary", onClick: this.handleCancel },
-        "Cancel"
+        T`Cancel`
       )
     )
 
     return R(
       ModalPopupComponent,
       {
-        header: "Image",
+        header: T`Image`,
         footer
       },
       content

package/src/widgets/ImagelistCarouselComponent.ts

@@ -97,12 +97,12 @@ export default class ImagelistCarouselComponent extends React.Component<
       R(
         "button",
         { className: "carousel-control-prev", onClick: this.handleLeft },
-        R("span", { className: "carousel-control-prev-icon" })
+        R("span", { className: "carousel-control-prev-icon", "aria-label": T`Previous` })
       ),
       R(
         "button",
         { className: "carousel-control-next", onClick: this.handleRight },
-        R("span", { className: "carousel-control-next-icon" })
+        R("span", { className: "carousel-control-next-icon", "aria-label": T`Next` })
       )
     )
   }

package/src/widgets/MapWidget.ts

@@ -197,7 +197,7 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
   render() {
     const dropdownItems = []
     if (this.props.onDesignChange != null) {
-      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+      dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: this.handleStartEditing })
     }
 
     const handleDesignChange = (d: any) => this.setState({ transientDesign: d })

package/src/widgets/MarkdownWidget.ts

@@ -138,7 +138,7 @@ class MarkdownWidgetComponent extends React.Component<MarkdownWidgetComponentPro
   render() {
     const dropdownItems = []
     if (this.props.onDesignChange != null) {
-      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+      dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: this.handleStartEditing })
     }
 
     // Wrap in a simple widget

package/src/widgets/TOCWidget.ts

@@ -92,7 +92,7 @@ class TOCWidgetComponent extends React.Component {
       ModalPopupComponent,
       {
         showCloseX: true,
-        header: "Table of Contents Options",
+        header: T`Table of Contents Options`,
         onClose: this.handleEndEditing
       },
       editor
@@ -113,7 +113,7 @@ class TOCWidgetComponent extends React.Component {
   render() {
     const dropdownItems = []
     if (this.props.onDesignChange != null) {
-      dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing })
+      dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: this.handleStartEditing })
     }
 
     // Wrap in a simple widget
@@ -155,7 +155,6 @@ class TOCWidgetViewComponent extends React.Component {
   }
 
   handleEntryClick = (tocEntry: any) => {
-    debugger
     return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id)
   }
 
@@ -233,7 +232,7 @@ class TOCWidgetViewComponent extends React.Component {
         ? R(
             "div",
             { className: "text-muted" },
-            "Table of Contents will appear here as text blocks with headings are added to the dashboard"
+            T`Table of Contents will appear here as text blocks with headings are added to the dashboard`
           )
         : undefined
     )
@@ -268,17 +267,17 @@ class TOCWidgetDesignerComponent extends React.Component {
       null,
       R(
         ui.FormGroup,
-        { label: "Header" },
-        R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: "None" })
+        { label: T`Header` },
+        R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: T`None` })
       ),
       R(
         ui.FormGroup,
-        { label: "Border" },
+        { label: T`Border` },
         R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })
       ),
       R(
         ui.FormGroup,
-        { label: "Numbering" },
+        { label: T`Numbering` },
         R(
           ui.Radio,
           {
@@ -287,7 +286,7 @@ class TOCWidgetDesignerComponent extends React.Component {
             radioValue: true,
             onChange: this.update("numbering")
           },
-          "On"
+          T`On`
         ),
         R(
           ui.Radio,
@@ -297,7 +296,7 @@ class TOCWidgetDesignerComponent extends React.Component {
             radioValue: false,
             onChange: this.update("numbering")
           },
-          "Off"
+          T`Off`
         )
       )
     )
@@ -318,10 +317,10 @@ class BorderComponent extends React.Component {
     return R(
       "div",
       null,
-      R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, "None"),
-      R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, "Light"),
-      R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, "Medium"),
-      R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, "Heavy")
+      R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, T`None`),
+      R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, T`Light`),
+      R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, T`Medium`),
+      R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, T`Heavy`)
     )
   }
 }

package/src/widgets/WidgetScopesViewComponent.ts

@@ -47,7 +47,7 @@ export default class WidgetScopesViewComponent extends React.Component<WidgetSco
       "div",
       { className: "alert alert-info" },
       R("span", { className: "fas fa-filter" }),
-      " Filters: ",
+      T` Filters: `,
       _.map(_.keys(scopes), (id) => this.renderScope(id, scopes[id]))
     )
   }

package/src/widgets/charts/Chart.ts

@@ -67,7 +67,7 @@ export default class Chart {
 
   // Label for the edit gear dropdown
   getEditLabel() {
-    return "Edit"
+    return T`Edit`
   }
 
   // Creates a design element with specified options

package/src/widgets/charts/ChartViewComponent.ts

@@ -146,8 +146,8 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
     return R("div", { style: { marginTop: 20, textAlign: "center" } }, 
       R("div", { className: "text-danger" }, 
         isTimeout ?
-          "This widget has timed out. Placing widgets across console tabs instead of having them all in one dashboard can improve performance."
-          : "There was an error loading data for this widget."
+          T`This widget has timed out. Placing widgets across console tabs instead of having them all in one dashboard can improve performance.`
+          : T`There was an error loading data for this widget.`
         ),
       R("div", { className: "mt-3" },
         R("button", { 
@@ -158,14 +158,14 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
           }
         }, 
           R("i", { className: "fas fa-redo" }),
-          " Try again"
+          T`Try again`
         ),
       ),
       R("button", { 
         className: "btn btn-link btn-sm mt-2",
         onClick: () => this.setState({ showErrorDetails: !this.state.showErrorDetails })
       },
-         this.state.showErrorDetails ? "Hide details" : "Show details"
+         this.state.showErrorDetails ? T`Hide details` : T`Show details`
       ),
       this.state.showErrorDetails ?
         R("div", { style: { marginTop: 10, fontSize: 10 } },

package/src/widgets/charts/ChartWidgetComponent.tsx

@@ -9,7 +9,7 @@ import { DataSource, Schema } from "@mwater/expressions"
 import { WidgetDataSource } from "../WidgetDataSource"
 import Chart from "./Chart"
 import { JsonQLFilter } from "../../JsonQLFilter"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 import { BlocksLayoutOptionsContext, createDashboardStyles, DashboardStyleWrapper, getDefaultLayoutOptions } from "../../dashboards/layoutOptions"
 
 export interface ChartWidgetComponentProps {
@@ -68,7 +68,7 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
     // Get the data
     return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err: any, data: any) => {
       if (err) {
-        return alert("Failed to get data: " + err.message)
+        return alert(T`Failed to get data: ${err.message}`)
       }
 
       // Create data table
@@ -251,7 +251,7 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       this.props.filters
     )
     if (!designError) {
-      dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile })
+      dropdownItems.push({ label: T`Export Data`, icon: "save-file", onClick: this.handleSaveCsvFile })
     }
     if (this.props.onDesignChange != null) {
       dropdownItems.unshift({

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

@@ -69,17 +69,17 @@ export default class CalendarChart extends Chart {
 
     // Check that has table
     if (!design.table) {
-      return "Missing data source"
+      return T`Missing data source`
     }
 
     // Check that has axes
     let error = null
 
     if (!design.dateAxis) {
-      error = error || "Missing date"
+      error = error || T`Missing date`
     }
     if (!design.valueAxis) {
-      error = error || "Missing value"
+      error = error || T`Missing value`
     }
 
     error = error || axisBuilder.validateAxis({ axis: design.dateAxis })
@@ -210,7 +210,7 @@ export default class CalendarChart extends Chart {
   }
 
   createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any) {
-    const header = ["Date", "Value"]
+    const header = [T`Date`, T`Value`]
     const rows = _.map(data, (row: any) => [moment(row.date).format("YYYY-MM-DD"), row.value])
     return [header].concat(rows)
   }

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

@@ -59,7 +59,7 @@ export default class CalendarChartDesignerComponent extends React.Component<Cale
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       ": ",
       R(TableSelectComponent, {
         schema: this.props.schema,
@@ -75,13 +75,13 @@ export default class CalendarChartDesignerComponent extends React.Component<Cale
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Title"),
+      R("label", { className: "text-muted" }, T`Title`),
       R("input", {
         type: "text",
         className: "form-control form-control-sm",
         value: this.props.design.titleText,
         onChange: this.handleTitleTextChange,
-        placeholder: "Untitled"
+        placeholder: T`Untitled`
       })
     )
   }
@@ -95,7 +95,7 @@ export default class CalendarChartDesignerComponent extends React.Component<Cale
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -117,7 +117,7 @@ export default class CalendarChartDesignerComponent extends React.Component<Cale
 
     return R(
       ui.SectionComponent,
-      { label: "Date Axis" },
+      { label: T`Date Axis` },
       R(AxisComponent, {
         schema: this.props.schema,
         dataSource: this.props.dataSource,
@@ -139,7 +139,7 @@ export default class CalendarChartDesignerComponent extends React.Component<Cale
 
     return R(
       ui.SectionComponent,
-      { label: "Value Axis" },
+      { label: T`Value Axis` },
       R(AxisComponent, {
         schema: this.props.schema,
         dataSource: this.props.dataSource,
@@ -158,7 +158,7 @@ export default class CalendarChartDesignerComponent extends React.Component<Cale
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Cell Color"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Cell Color`),
 
       R(
         "div",

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

@@ -6,7 +6,7 @@ import moment from "moment"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import { Schema } from "@mwater/expressions"
 import * as d3 from "d3"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 // Require d3-tip to use it
 import { default as d3Tip } from "d3-tip"
@@ -113,7 +113,7 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
     const scopeData: WidgetScope = {
       name:
         this.axisBuilder.summarizeAxis(this.props.design.dateAxis!, this.context) +
-        " 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

@@ -1,14 +1,31 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import { default as produce } from "immer"
-import { DataSource, injectTableAlias, Schema } from "@mwater/expressions"
+import { DataSource, Expr, injectTableAlias, Schema } from "@mwater/expressions"
 import Chart, { ChartCreateViewElementOptions } from "../Chart"
 import { ExprCleaner } from "@mwater/expressions"
 import { ExprCompiler } from "@mwater/expressions"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import { JsonQLSelectQuery } from "@mwater/jsonql"
 import { JsonQLFilter } from "../../.."
+import { Axis } from "../../../axes/Axis"
+
+export interface ImageMosaicChartDesign {
+  /** Version of design */
+  version?: number
+
+  /** Table to use */
+  table: string
+
+  /** Title text */
+  titleText: string
+
+  /** Image axis */
+  imageAxis: Axis
+
+  /** Optional filter */
+  filter: Expr
+}
 
 /*
 Design is:
@@ -20,7 +37,7 @@ Design is:
 
 */
 export default class ImageMosaicChart extends Chart {
-  cleanDesign(design: any, schema: Schema) {
+  cleanDesign(design: ImageMosaicChartDesign, schema: Schema) {
     const exprCleaner = new ExprCleaner(schema)
     const axisBuilder = new AxisBuilder({ schema })
 
@@ -42,19 +59,19 @@ export default class ImageMosaicChart extends Chart {
     return design
   }
 
-  validateDesign(design: any, schema: Schema) {
+  validateDesign(design: ImageMosaicChartDesign, schema: Schema) {
     const axisBuilder = new AxisBuilder({ schema })
 
     // Check that has table
     if (!design.table) {
-      return "Missing data source"
+      return T`Missing data source`
     }
 
     // Check that has axes
     let error = null
 
     if (!design.imageAxis) {
-      error = error || "Missing image"
+      error = error || T`Missing image`
     }
 
     error = error || axisBuilder.validateAxis({ axis: design.imageAxis })
@@ -62,7 +79,7 @@ export default class ImageMosaicChart extends Chart {
     return error
   }
 
-  isEmpty(design: any) {
+  isEmpty(design: ImageMosaicChartDesign) {
     return !design.imageAxis
   }
 
@@ -182,7 +199,7 @@ export default class ImageMosaicChart extends Chart {
   }
 
   createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any) {
-    alert("Not available for Image Mosaics")
+    alert(T`Not available for Image Mosaics`)
     return []
   }
   // TODO

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

@@ -42,7 +42,7 @@ export default class ImageMosaicChartDesignerComponent extends React.Component<I
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       ": ",
       R(TableSelectComponent, {
         schema: this.props.schema,
@@ -58,13 +58,13 @@ export default class ImageMosaicChartDesignerComponent extends React.Component<I
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Title"),
+      R("label", { className: "text-muted" }, T`Title`),
       R("input", {
         type: "text",
         className: "form-control form-control-sm",
         value: this.props.design.titleText,
         onChange: this.handleTitleTextChange,
-        placeholder: "Untitled"
+        placeholder: T`Untitled`
       })
     )
   }
@@ -78,7 +78,7 @@ export default class ImageMosaicChartDesignerComponent extends React.Component<I
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -100,7 +100,7 @@ export default class ImageMosaicChartDesignerComponent extends React.Component<I
 
     return R(
       ui.SectionComponent,
-      { label: "Image Axis" },
+      { label: T`Image Axis` },
       R(AxisComponent, {
         schema: this.props.schema,
         dataSource: this.props.dataSource,