@mwater/visualization 5.3.2 → 5.4.0

package/src/widgets/text/ExprItemEditorComponent.tsx

@@ -83,7 +83,7 @@ export default class ExprItemEditorComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Format"),
+      R("label", { className: "text-muted" }, T`Format`),
       ": ",
       R(
         "select",
@@ -105,7 +105,7 @@ export default class ExprItemEditorComponent extends React.Component<
       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,
@@ -119,7 +119,7 @@ export default class ExprItemEditorComponent 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,
@@ -142,7 +142,7 @@ export default class ExprItemEditorComponent extends React.Component<
               value={this.props.exprItem.includeLabel}
               onChange={this.handleIncludeLabelChange}
             >
-              Include Label
+              {T`Include Label`}
             </Checkbox>,
 
             this.props.exprItem.includeLabel

package/src/widgets/text/{ExprUpdateModalComponent.ts → ExprUpdateModalComponent.tsx}

@@ -1,6 +1,4 @@
 import React from "react"
-const R = React.createElement
-
 import { DataSource, Schema } from "@mwater/expressions"
 import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
 import ExprItemEditorComponent from "./ExprItemEditorComponent"
@@ -35,7 +33,7 @@ export default class ExprUpdateModalComponent extends React.Component<
     }
   }
 
-  open(item: any, onUpdate: any) {
+  open(item: HtmlItemExpr, onUpdate: (item: HtmlItemExpr) => void) {
     return this.setState({ open: true, exprItem: item, onUpdate })
   }
 
@@ -44,27 +42,27 @@ export default class ExprUpdateModalComponent extends React.Component<
       return null
     }
 
-    return R(
-      ActionCancelModalComponent,
-      {
-        actionLabel: "Update",
-        onAction: () => {
+    return (
+      <ActionCancelModalComponent
+        actionLabel={T`Update`}
+        onAction={() => {
           // Close first to avoid strange effects when mixed with pojoviews
           this.setState({ open: false }, () => {
             return this.state.onUpdate!(this.state.exprItem!)
           })
-        },
-        onCancel: () => this.setState({ open: false }),
-        title: "Update Field",
-        size: "x-large"
-      },
-      R(ExprItemEditorComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        exprItem: this.state.exprItem,
-        onChange: (exprItem: any) => this.setState({ exprItem }),
-        singleRowTable: this.props.singleRowTable
-      })
+        }}
+        onCancel={() => this.setState({ open: false })}
+        title={T`Update Field`}
+        size="x-large"
+      >
+        <ExprItemEditorComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          exprItem={this.state.exprItem!}
+          onChange={(exprItem: HtmlItemExpr) => this.setState({ exprItem })}
+          singleRowTable={this.props.singleRowTable}
+        />
+      </ActionCancelModalComponent>
     )
   }
 }

package/src/widgets/text/TextComponent.tsx

@@ -6,7 +6,7 @@ import ExprUpdateModalComponent from "./ExprUpdateModalComponent"
 import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter"
 import { TextWidgetDesign } from "./TextWidgetDesign"
 import { DataSource, Schema } from "@mwater/expressions"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface TextComponentProps {
   design: TextWidgetDesign
@@ -89,7 +89,7 @@ export default class TextComponent extends React.Component<TextComponentProps> {
     return (
       <div key="expr" className="mwater-visualization-text-palette-item" onMouseDown={this.handleAddExpr}>
         <i className="fa fa-plus" />
-        {" Expression"}
+        {T` Expression`}
       </div>
     )
   }

package/src/widgets/text/TextWidgetComponent.tsx

@@ -139,34 +139,34 @@ export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetCo
     }
 
     const spacingOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40].map(value => ({ value, label: `${value}px` }))
-    const borderThicknessOptions = [0, 1, 2, 3, 4, 5].map(value => ({ value, label: value === 0 ? "None" : `${value}px` }))
+    const borderThicknessOptions = [0, 1, 2, 3, 4, 5].map(value => ({ value, label: value === 0 ? T`None` : `${value}px` }))
 
     return (
       <ActionCancelModalComponent
-        title="Edit Text Widget"
+        title={T`Edit Text Widget`}
         onCancel={this.handleEditModalClose}
         onAction={this.handleEditModalClose}
       >
-        <FormGroup label="Background Color">
+        <FormGroup label={T`Background Color`}>
           <ColorComponent
             color={this.props.design.backgroundColor || null}
             onChange={this.handleBackgroundColorChange}
           />
           <div className="text-muted">
-            Choose a background color for the text widget
+            {T`Choose a background color for the text widget`}
           </div>
         </FormGroup>
-        <FormGroup label="Padding">
+        <FormGroup label={T`Padding`}>
           <Select
             value={this.props.design.padding ?? 0}
             onChange={this.handleSpacingChange}
             options={spacingOptions}
           />
           <div className="text-muted">
-            Choose extra padding for the text widget
+            {T`Choose extra padding for the text widget`}
           </div>
         </FormGroup>
-        <FormGroup label="Border Thickness" help="Choose the border thickness for the text widget">
+        <FormGroup label={T`Border Thickness`} help={T`Choose the border thickness for the text widget`}>
           <Select
             value={this.props.design.borderThickness ?? 0}
             onChange={this.handleBorderThicknessChange}
@@ -174,7 +174,7 @@ export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetCo
           />
         </FormGroup>
         {this.props.design.borderThickness &&
-          <FormGroup label="Border Color" help="Choose the border color for the text widget">
+          <FormGroup label={T`Border Color`} help={T`Choose the border color for the text widget`}>
             <ColorComponent
               color={this.props.design.borderColor || null}
               onChange={this.handleBorderColorChange}
@@ -182,7 +182,7 @@ export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetCo
           </FormGroup>
         }
         {this.props.design.borderThickness &&
-          <FormGroup label="Border Radius" help="Choose the border radius for the text widget">
+          <FormGroup label={T`Border Radius`} help={T`Choose the border radius for the text widget`}>
             <Select
               value={this.props.design.borderRadius ?? 0}
               onChange={this.handleBorderRadiusChange}
@@ -233,7 +233,7 @@ export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetCo
         {this.props.onDesignChange ? (
           <DropdownWidgetComponent
             dropdownItems={[{
-              label: "Edit",
+              label: T`Edit`,
               onClick: this.handleEditClick
             }]}
           >

package/src/widgets/text/TextWidgetDesign.ts

@@ -1,9 +1,11 @@
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
 import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
 
+export type TextWidgetItem = HtmlItem | HtmlItemExpr
+
 export interface TextWidgetDesign {
   /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-  items: (HtmlItem | HtmlItemExpr)[]
+  items: TextWidgetItem[]
 
   /** "title" for title block. default is "default" */
   style?: "title" | "default" | "header" | "footer"

package/src/axes/AxisColorEditorComponent.ts

@@ -1,210 +0,0 @@
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import CategoryMapComponent from "./CategoryMapComponent"
-import ColorSchemeFactory from "../ColorSchemeFactory"
-import ColorPaletteCollectionComponent from "./ColorPaletteCollectionComponent"
-import AxisBuilder from "./AxisBuilder"
-import produce from "immer"
-import { Axis, AxisCategory, ColorMap } from "./Axis"
-import { Schema } from "@mwater/expressions"
-
-export interface AxisColorEditorComponentProps {
-  schema: Schema
-  axis: Axis
-  /** Called with new axis */
-  onChange: (axis: Axis) => void
-
-  /** Categories of the axis */
-  categories?: AxisCategory[]
-
-  /** is the color map reorderable */
-  reorderable?: boolean
-
-  defaultColor?: string
-  /** True to allow excluding of values via checkboxes */
-  allowExcludedValues?: boolean
-  /** True to start values expanded */
-  initiallyExpanded?: boolean
-  /** True to automatically set the colors if blank */
-  autosetColors?: boolean
-}
-
-interface AxisColorEditorComponentState {
-  mode: any
-}
-
-// Color editor for axis. Allows switching between editing individial colors (using CategoryMapComponent)
-// and setting the colors from a palette (using ColorPaletteCollectionComponent)
-export default class AxisColorEditorComponent extends React.Component<
-  AxisColorEditorComponentProps,
-  AxisColorEditorComponentState
-> {
-  static defaultProps = {
-    reorderable: false,
-    autosetColors: true
-  }
-
-  constructor(props: any) {
-    super(props)
-
-    this.state = {
-      mode: "normal"
-    }
-  }
-
-  componentWillMount() {
-    return this.updateColorMap()
-  }
-
-  componentDidUpdate() {
-    return this.updateColorMap()
-  }
-
-  // Update color map if categories no longer match
-  updateColorMap() {
-    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
-
-    // If no categories, can't do anything
-    if (!this.props.categories) {
-      return
-    }
-
-    // If no color map or color map values have changed
-    if (
-      !this.props.axis.colorMap ||
-      !_.isEqual(_.pluck(this.props.axis.colorMap, "value").sort(), _.pluck(this.props.categories, "value").sort())
-    ) {
-      let colorMap
-      if (this.props.autosetColors) {
-        colorMap = ColorSchemeFactory.createColorMapForCategories(
-          this.props.categories,
-          axisBuilder.isCategorical(this.props.axis)
-        )
-      } else {
-        // Keep existing
-        const existing = _.indexBy(this.props.axis.colorMap || [], "value")
-        colorMap = _.map(this.props.categories, (category, i) => ({
-          value: category.value,
-          color: existing[category.value] ? existing[category.value].color : null
-        }))
-      }
-
-      this.handlePaletteChange(colorMap)
-      return this.setState({ mode: "normal" })
-    }
-  }
-
-  handleSelectPalette = () => {
-    return this.setState({ mode: "palette" })
-  }
-
-  handleResetPalette = () => {
-    // Completely reset
-    const colorMap = _.map(this.props.categories || [], (category, i) => ({
-      value: category.value,
-      color: null
-    }))
-
-    this.handlePaletteChange(colorMap)
-    return this.setState({ mode: "normal" })
-  }
-
-  handlePaletteChange = (palette: ColorMap) => {
-    this.props.onChange(
-      produce(this.props.axis, (draft) => {
-        draft.colorMap = palette
-        draft.drawOrder = _.pluck(palette, "value")
-      })
-    )
-    this.setState({ mode: "normal" })
-  }
-
-  handleCancelCustomize = () => {
-    return this.setState({ mode: "normal" })
-  }
-
-  // renderPreview() {
-  //   return R(
-  //     "div",
-  //     { className: "axis-palette" },
-  //     _.map(this.props.categories.slice(0, 6), (category, i) => {
-  //       const color = _.find(this.props.axis.colorMap, { value: category.value })
-  //       const cellStyle = {
-  //         display: "inline-block",
-  //         height: 20,
-  //         width: 20,
-  //         backgroundColor: color ? color.color : this.props.defaultColor
-  //       }
-  //       return R("div", { style: cellStyle, key: i }, " ")
-  //     })
-  //   )
-  // }
-
-  render() {
-    return R(
-      "div",
-      null,
-      (() => {
-        if (this.state.mode === "palette") {
-          if (this.props.categories) {
-            return R(ColorPaletteCollectionComponent, {
-              onPaletteSelected: this.handlePaletteChange,
-              axis: this.props.axis,
-              categories: this.props.categories,
-              onCancel: this.handleCancelCustomize
-            })
-          }
-        }
-        return null
-      })(),
-      this.state.mode === "normal"
-        ? R(
-            "div",
-            null,
-            R(
-              "p",
-              null,
-              R(
-                "a",
-                { className: "link-plain", onClick: this.handleSelectPalette, key: "select-palette" },
-                "Change color scheme"
-              ),
-              !this.props.autosetColors
-                ? R(
-                    "a",
-                    {
-                      className: "btn btn-sm btn-link",
-                      onClick: this.handleResetPalette,
-                      key: "reset-palette"
-                    },
-                    "Reset colors"
-                  )
-                : undefined
-            ),
-            this.props.axis.colorMap
-              ? R(
-                  "div",
-                  { key: "selected-palette" },
-                  R(
-                    "div",
-                    null,
-                    R(CategoryMapComponent, {
-                      schema: this.props.schema,
-                      axis: this.props.axis,
-                      onChange: this.props.onChange,
-                      categories: this.props.categories,
-                      key: "colorMap",
-                      reorderable: this.props.reorderable,
-                      allowExcludedValues: this.props.allowExcludedValues,
-                      showColorMap: true,
-                      initiallyExpanded: this.props.initiallyExpanded
-                    })
-                  )
-                )
-              : undefined
-          )
-        : undefined
-    )
-  }
-}

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

@@ -1,117 +0,0 @@
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-
-import { LazyLoadComponent as LazyLoad } from "react-lazy-load-image-component"
-import RotationAwareImageComponent from "@mwater/forms/lib/RotationAwareImageComponent"
-import ImagePopupComponent from "./ImagePopupComponent"
-import { DataSource } from "@mwater/expressions"
-
-export interface ImageMosaicChartViewComponentProps {
-  /** Design of chart */
-  design: any
-  /** Data that the chart has requested. In format  [image: {image data or imagelist data}] */
-  data: any
-  /** Data source to use */
-  dataSource: DataSource
-  width?: number
-  height?: number
-  onRowClick?: any
-}
-
-/** creates a d3 calendar visualization */
-export default class ImageMosaicChartViewComponent extends React.Component<ImageMosaicChartViewComponentProps> {
-  imagePopup: ImagePopupComponent | null
-  shouldComponentUpdate(prevProps: any) {
-    return !_.isEqual(prevProps, this.props)
-  }
-
-  handleClick = (primaryKey: any, image: any) => {
-    if (this.props.onRowClick) {
-      return this.props.onRowClick(this.props.design.table, primaryKey)
-    } else {
-      return this.imagePopup?.show(image)
-    }
-  }
-
-  // Render a single image
-  renderImage = (primaryKey: any, image: any, imageManager: any) => {
-    return R(
-      LazyLoad,
-      { key: image.id },
-      R(RotationAwareImageComponent, {
-        imageManager,
-        image,
-        thumbnail: true,
-        height: 120,
-        width: 80,
-        onClick: () => this.handleClick(primaryKey, image)
-      })
-    )
-  }
-
-  // Render images
-  renderImages(imageManager: any) {
-    const imageElems = []
-
-    // For each image
-    return (() => {
-      const result = []
-      for (var row of this.props.data) {
-        let imageObj = row.image
-
-        // Ignore nulls (https://github.com/mWater/mwater-server/issues/202)
-        if (!imageObj) {
-          continue
-        }
-
-        if (_.isString(imageObj)) {
-          imageObj = JSON.parse(imageObj)
-        }
-
-        if (_.isArray(imageObj)) {
-          result.push(imageObj.map((image) => this.renderImage(row.id, image, imageManager)))
-        } else {
-          result.push(this.renderImage(row.id, imageObj, imageManager))
-        }
-      }
-      return result
-    })()
-  }
-
-  render() {
-    const titleStyle = {
-      textAlign: "center",
-      fontSize: "14px",
-      fontWeight: "bold"
-    }
-
-    const style = {
-      width: this.props.width,
-      height: this.props.height,
-      position: "relative",
-      overflowY: "auto"
-    }
-
-    const title = this.props.design.titleText
-
-    const imageManager = {
-      getImageThumbnailUrl: (id: any, success: any, error: any) => success(this.props.dataSource.getImageUrl(id, 100)),
-      getImageUrl: (id: any, success: any, error: any) => success(this.props.dataSource.getImageUrl(id))
-    }
-
-    return R(
-      "div",
-      { style, className: "image-mosaic" },
-      title ? R("p", { style: titleStyle }, title) : undefined,
-
-      R(ImagePopupComponent, {
-        ref: (c: ImagePopupComponent | null) => {
-          this.imagePopup = c
-        },
-        imageManager
-      }),
-      R("div", null, this.renderImages(imageManager))
-    )
-  }
-}