@mwater/visualization 5.3.1 → 5.4.0

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

@@ -0,0 +1,128 @@
+import React from "react"
+import _ from "lodash"
+import { useCallback, useRef, useState, useEffect } from "react"
+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"
+import { ImageMosaicChartDesign } from "./ImageMosaicChart"
+
+export interface ImageMosaicChartViewComponentProps {
+  /** Design of chart */
+  design: ImageMosaicChartDesign
+  /** 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 an image mosaic chart */
+function ImageMosaicChartViewComponent(props: ImageMosaicChartViewComponentProps) {
+  const { design, data, dataSource, width, height, onRowClick } = props
+  const imagePopupRef = useRef<ImagePopupComponent | null>(null)
+  const [isPrinting, setIsPrinting] = useState(false)
+
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia('print')
+    const handlePrintChange = (mql: MediaQueryListEvent) => {
+      setIsPrinting(mql.matches)
+    }
+
+    mediaQueryList.addEventListener('change', handlePrintChange)
+    return () => {
+      mediaQueryList.removeEventListener('change', handlePrintChange)
+    }
+  }, [])
+
+  const handleClick = useCallback((primaryKey: any, image: any) => {
+    if (onRowClick) {
+      return onRowClick(design.table, primaryKey)
+    } else {
+      return imagePopupRef.current?.show(image)
+    }
+  }, [onRowClick, design.table])
+
+  // Render a single image
+  const renderImage = useCallback((primaryKey: any, image: any, imageManager: any) => {
+    const imageComponent = (
+      <RotationAwareImageComponent
+        imageManager={imageManager}
+        image={image}
+        thumbnail={true}
+        height={120}
+        width={80}
+        onClick={() => handleClick(primaryKey, image)}
+      />
+    )
+
+    // DISABLED PRINTING AS WAS CRASHING CHROME
+    return isPrinting && false ? (
+      <div style={{ display: "inline-block", minWidth: "50px" }} key={image.id}>{imageComponent}</div>
+    ) : (
+      <LazyLoad key={image.id}>{imageComponent}</LazyLoad>
+    )
+  }, [handleClick, isPrinting])
+
+  // Render images
+  const renderImages = useCallback((imageManager: any) => {
+    const result = []
+    for (let row of 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) => renderImage(row.id, image, imageManager)))
+      } else {
+        result.push(renderImage(row.id, imageObj, imageManager))
+      }
+    }
+    return result
+  }, [data, renderImage])
+
+  const titleStyle = {
+    textAlign: "center",
+    fontSize: "14px",
+    fontWeight: "bold"
+  } as React.CSSProperties
+
+  const style = {
+    width,
+    height,
+    position: "relative",
+    overflowY: "auto"
+  } as React.CSSProperties
+
+  const title = design.titleText
+
+  const imageManager = {
+    getImageThumbnailUrl: (id: any, success: any, error: any) => success(dataSource.getImageUrl(id, 100)),
+    getImageUrl: (id: any, success: any, error: any) => success(dataSource.getImageUrl(id))
+  }
+
+  return (
+    <div style={style} className="image-mosaic">
+      {title && <p style={titleStyle}>{title}</p>}
+
+      <ImagePopupComponent
+        ref={imagePopupRef}
+        imageManager={imageManager}
+      />
+      <div>{renderImages(imageManager)}</div>
+    </div>
+  )
+}
+
+export default ImageMosaicChartViewComponent

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

@@ -110,7 +110,7 @@ export default class LayeredChart extends Chart {
     )
 
     if (xAxisTypes.length > 1) {
-      return "All x axes must be of same type"
+      return T`All x axes must be of same type`
     }
 
     for (
@@ -122,19 +122,19 @@ export default class LayeredChart extends Chart {
 
       // Check that has table
       if (!layer.table) {
-        return "Missing data source"
+        return T`Missing data source`
       }
 
       // Check that has y axis
       if (!layer.axes.y) {
-        return "Missing Y Axis"
+        return T`Missing Y Axis`
       }
 
       if (!layer.axes.x && compiler.isXAxisRequired(design, layerId)) {
-        return "Missing X Axis"
+        return T`Missing X Axis`
       }
       if (!layer.axes.color && compiler.isColorAxisRequired(design, layerId)) {
-        return "Missing Color Axis"
+        return T`Missing Color Axis`
       }
 
       error = null
@@ -258,7 +258,7 @@ export default class LayeredChart extends Chart {
       design = this.cleanDesign(design, schema)
       return widgetDataSource.getData(design, filters, (err: any, data: any) => {
         if (err) {
-          return alert("Unable to load data")
+          return alert(T`Unable to load data`)
         } else {
           return LayeredChartSvgFileSaver.save(design, data, schema, format)
         }
@@ -271,8 +271,8 @@ export default class LayeredChart extends Chart {
     }
 
     return [
-      { label: "Save as SVG", onClick: save.bind(null, "svg") },
-      { label: "Save as PNG", onClick: save.bind(null, "png") }
+      { label: T`Save as SVG`, onClick: save.bind(null, "svg") },
+      { label: T`Save as PNG`, onClick: save.bind(null, "png") }
     ]
   }
 
@@ -284,7 +284,7 @@ export default class LayeredChart extends Chart {
 
     // Only allow if either all layers have x axis or one layer
     if (!design.layers.every((layer) => layer.axes.x != null) && design.layers.length > 1) {
-      throw new Error("Cannot export multi-layer charts without x axis")
+      throw new Error(T`Cannot export multi-layer charts without x axis`)
     }
 
     for (let layerNum = 0; layerNum < design.layers.length; layerNum++) {

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

@@ -378,8 +378,8 @@ export default class LayeredChartCompiler {
     if (options.design.labels) {
       // same color values gets hidden!! https://github.com/naver/billboard.js/issues/871
       chartDesign.data!.labels = {
-        colors: chartDesign.data!.columns!.reduce((a, c) => {
-          a[c[0] as string] = "#000"
+        colors: chartDesign.data!.columns!.reduce((a: any, c: any) => {
+          a[c[0]] = "var(--chart-text-color)"
           return a
         }, {})
       }
@@ -435,7 +435,7 @@ export default class LayeredChartCompiler {
     // # If x axis is year only, display year in ticks
     // if options.design.layers[0]?.axes.x?.xform?.type == "year"
     //   chartDesign.axis.x.tick.format = (x) -> if _.isDate(x) then x.getFullYear() else x
-    console.log(chartDesign)
+    // console.log(chartDesign)
     return chartDesign
   }
 
@@ -476,11 +476,11 @@ export default class LayeredChartCompiler {
   compileDataPolar(design: LayeredChartDesign, data: C3ChartData, locale: any): C3Data {
     let order: "asc" | "desc" | null
     const columns: any = []
-    const types = {}
-    const names = {}
-    const dataMap = {}
-    const colors = {}
-    const format = {}
+    const types: { [key: string]: ChartTypes } = {}
+    const names: Record<string, string> = {}
+    const dataMap: Record<string, { layerIndex: number; row: any }> = {}
+    const colors: Record<string, string> = {}
+    const format: Record<string, (value: any) => string> = {}
 
     // For each layer
     _.each(design.layers, (layer, layerIndex) => {
@@ -492,7 +492,7 @@ export default class LayeredChartCompiler {
         const categories = this.axisBuilder.getCategories(layer.axes.color, _.pluck(layerData, "color"), { locale })
 
         // Get indexed ordering of categories (lookup from value to index) without removing excluded values
-        const categoryOrder = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
+        const categoryOrder: Record<string, number> = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
 
         // Sort by category order
         layerData = _.sortBy(layerData, row => categoryOrder[row.color])
@@ -528,7 +528,7 @@ export default class LayeredChartCompiler {
           types[series] = this.getLayerType(design, layerIndex)
 
           // Name is name of entire layer
-          names[series] = layer.name || (design.layers.length === 1 ? "Value" : `Series ${layerIndex + 1}`)
+          names[series] = layer.name || (design.layers.length === 1 ? T`Value` : T`Series ${layerIndex + 1}`)
           dataMap[series] = { layerIndex, row }
           format[series] = (value: any) =>
             value != null ? this.axisBuilder.formatValue(layer.axes.y!, value, locale, true) : ""
@@ -568,15 +568,15 @@ export default class LayeredChartCompiler {
   // Compiles data for a chart like line or scatter that does not have a categorical x axis
   compileDataNonCategorical(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data {
     const columns: any = []
-    const types = {}
-    const names = {}
-    const dataMap = {}
-    const colors = {}
-    const xs = {}
+    const types: { [key: string]: ChartTypes } = {}
+    const names: Record<string, string> = {}
+    const dataMap: Record<string, { layerIndex: number; row: any }> = {}
+    const colors: Record<string, string> = {}
+    const xs: Record<string, string> = {}
     let groups: any = []
-    const format = {}
+    const format: Record<string, (value: any) => string> = {}
     const legendHide: any = [] // Which series to hide
-    const classes = {} // Custom classes to add to series
+    const classes: Record<string, string> = {} // Custom classes to add to series
 
     const xType = this.axisBuilder.getAxisType(design.layers[0].axes.x)
 
@@ -603,7 +603,7 @@ export default class LayeredChartCompiler {
         const categories = this.axisBuilder.getCategories(layer.axes.color, colorValues, { locale })
 
         // Get indexed ordering of categories (lookup from value to index) without removing excluded values
-        const categoryOrder = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
+        const categoryOrder: Record<string, number> = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
 
         // Sort
         colorValues = _.sortBy(colorValues, v => categoryOrder[v])
@@ -654,7 +654,7 @@ export default class LayeredChartCompiler {
         columns.push([seriesX].concat(xValues))
 
         types[seriesY] = this.getLayerType(design, layerIndex)
-        names[seriesY] = layer.name || (design.layers.length === 1 ? "Value" : `Series ${layerIndex + 1}`)
+        names[seriesY] = layer.name || (design.layers.length === 1 ? T`Value` : T`Series ${layerIndex + 1}`)
         xs[seriesY] = seriesX
         colors[seriesY] = layer.color || defaultColors[layerIndex]
         format[seriesY] = (value: any) =>
@@ -670,7 +670,7 @@ export default class LayeredChartCompiler {
           const trendlineSeries = seriesY + ":trendline"
           columns.push([trendlineSeries].concat(calculateLinearRegression(yValues, xValues)))
           types[trendlineSeries] = line()
-          names[trendlineSeries] = names[seriesY] + " Trendline"
+          names[trendlineSeries] = names[seriesY] + T` Trendline`
           xs[trendlineSeries] = seriesX
           colors[trendlineSeries] = layer.color || defaultColors[layerIndex]
           legendHide.push(trendlineSeries) // Hide in legend
@@ -756,16 +756,16 @@ export default class LayeredChartCompiler {
   compileDataCategorical(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data {
     let categoryXs: any
     const columns: any[][] = []
-    const types = {}
-    const names = {}
-    const dataMap = {}
-    const colors = {}
-    const xs = {}
+    const types: { [key: string]: ChartTypes } = {}
+    const names: Record<string, string> = {}
+    const dataMap: Record<string, { layerIndex: number; row: any }> = {}
+    const colors: Record<string, string> = {}
+    const xs: Record<string, string> = {}
     let groups: any[][] = []
-    const format = {}
-    const colorOverrides = {} // Mapping of "<layer>:<index>" to color if overridden
+    const format: Record<string, (value: any) => string> = {}
+    const colorOverrides: Record<string, string> = {} // Mapping of "<layer>:<index>" to color if overridden
     const legendHide: any = [] // Which series to hide
-    const classes = {} // Custom classes to add to series
+    const classes: Record<string, string> = {} // Custom classes to add to series
 
     // Get all values of the x-axis, taking into account values that might be missing
     const xAxis: Axis = _.extend({}, design.layers[0].axes.x)
@@ -789,7 +789,7 @@ export default class LayeredChartCompiler {
     })
 
     // Get indexed ordering of categories (lookup from value to index) without removing excluded values
-    const categoryOrder = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
+    const categoryOrder: Record<string, number> = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
 
     // Exclude excluded values
     categories = _.filter(categories, category => !_.includes(xAxis.excludedValues || [], category.value))
@@ -802,7 +802,7 @@ export default class LayeredChartCompiler {
     }
 
     // Create map of category value to index
-    const categoryMap = _.object(_.map(categories, (c, i) => [c.value, i]))
+    const categoryMap: Record<string, number> = _.object(_.map(categories, (c, i) => [c.value, i]))
 
     // Create common x series
     columns.push(["x"].concat(_.map(categories, category => this.axisBuilder.formatCategory(xAxis, category))))
@@ -844,7 +844,7 @@ export default class LayeredChartCompiler {
         const colorCategories = this.axisBuilder.getCategories(layer.axes.color, colorValues, { locale })
 
         // Get indexed ordering of categories (lookup from value to index) without removing excluded values
-        const colorCategoryOrder = _.zipObject(_.map(colorCategories, (c, i) => [c.value, i]))
+        const colorCategoryOrder: Record<string, number> = _.zipObject(_.map(colorCategories, (c, i) => [c.value, i]))
 
         // Sort
         colorValues = _.sortBy(colorValues, v => colorCategoryOrder[v])
@@ -1035,7 +1035,7 @@ export default class LayeredChartCompiler {
       legendHide,
       classes,
       xAxisType: "category",
-      xAxisTickFit: xType !== "date", // Put a tick for each point since categorical unless date
+      xAxisTickFit: xType !== "date" || xAxis.xform?.type != "date", // Put a tick for each point since categorical unless untransformed date which has too many ticks
       xAxisTickMultiline: design.xAxisTickMultiline,
       xAxisLabelText: this.compileXAxisLabelText(design, locale),
       yAxisLabelText: this.compileYAxisLabelText(design, locale),
@@ -1074,7 +1074,7 @@ export default class LayeredChartCompiler {
   }
 
   // Get layer type, defaulting to overall type
-  getLayerType(design: any, layerIndex: any) {
+  getLayerType(design: LayeredChartDesign, layerIndex: number) {
     // Special handling for mocha tests where chartTypes has all undefined values
     // See https://github.com/mWater/mwater-visualization/issues/453#issuecomment-1103671467
     const chartTypeString = design.layers[layerIndex].type || design.type
@@ -1084,22 +1084,22 @@ export default class LayeredChartCompiler {
     return chartTypeString
   }
 
-  getLayerTypeString(design: any, layerIndex: any) {
+  getLayerTypeString(design: LayeredChartDesign, layerIndex: number) {
     return design.layers[layerIndex].type || design.type
   }
 
   // Determine if layer required grouping by x (and color)
-  doesLayerNeedGrouping(design: any, layerIndex: any) {
+  doesLayerNeedGrouping(design: LayeredChartDesign, layerIndex: number) {
     return this.getLayerTypeString(design, layerIndex) !== "scatter"
   }
 
   // Determine if layer can use x axis
-  canLayerUseXExpr(design: any, layerIndex: any) {
+  canLayerUseXExpr(design: LayeredChartDesign, layerIndex: number) {
     let needle
     return (needle = this.getLayerTypeString(design, layerIndex)), !["pie", "donut"].includes(needle)
   }
 
-  isXAxisRequired(design: any, layerIndex: any) {
+  isXAxisRequired(design: LayeredChartDesign) {
     let needle
     return _.any(
       design.layers,
@@ -1107,12 +1107,12 @@ export default class LayeredChartCompiler {
     )
   }
 
-  isColorAxisRequired(design: any, layerIndex: any) {
+  isColorAxisRequired(design: LayeredChartDesign, layerIndex: number) {
     let needle
     return (needle = this.getLayerTypeString(design, layerIndex)), ["pie", "donut"].includes(needle)
   }
 
-  compileDefaultTitleText(design: any, locale: any) {
+  compileDefaultTitleText(design: LayeredChartDesign, locale?: string) {
     // Don't default this for now
     return ""
   }
@@ -1121,8 +1121,8 @@ export default class LayeredChartCompiler {
   // else
   //   return @compileYAxisLabelText(design) + " by " + @axisBuilder.summarizeAxis(design.layers[0].axes.color)
 
-  compileDefaultYAxisLabelText(design: any, locale?: string) {
-    return this.axisBuilder.summarizeAxis(design.layers[0].axes.y, locale)
+  compileDefaultYAxisLabelText(design: LayeredChartDesign, locale?: string) {
+    return this.axisBuilder.summarizeAxis(design.layers[0].axes.y!, locale)
   }
 
   compileDefaultXAxisLabelText(design: any, locale?: string) {
@@ -1189,7 +1189,7 @@ export default class LayeredChartCompiler {
 
         names.push(
           this.axisBuilder.summarizeAxis(layer.axes.x, locale) +
-            " includes " +
+            ` ${T`includes`} ` +
             this.exprUtils.stringifyExprLiteral(layer.axes.x.expr, [row.x], locale)
         )
         data.x = row.x
@@ -1210,7 +1210,7 @@ export default class LayeredChartCompiler {
       filterExprs.push(this.axisBuilder.createValueFilterExpr(layer.axes.color, row.color))
       names.push(
         this.axisBuilder.summarizeAxis(layer.axes.color, locale) +
-          " is " +
+          ` ${T`is`} ` +
           this.axisBuilder.formatValue(layer.axes.color, row.color, locale, true)
       )
       data.color = row.color
@@ -1240,7 +1240,7 @@ export default class LayeredChartCompiler {
     }
 
     const scope: WidgetScope = {
-      name: ExprUtils.localizeString(this.schema.getTable(layer.table)!.name, locale) + " " + names.join(" and "),
+      name: ExprUtils.localizeString(this.schema.getTable(layer.table)!.name, locale) + " " + names.join(` ${T`and`} `),
       filter,
       filterExpr,
       data
@@ -1252,7 +1252,7 @@ export default class LayeredChartCompiler {
   // Converts a series of rows to have cumulative y axis, separating out by color axis if present
   makeRowsCumulative(rows: any) {
     // Indexed by color
-    const totals = {}
+    const totals: Record<string, number> = {}
 
     const newRows = []
     for (let row of rows) {