@mwater/visualization 5.4.5 → 5.5.0

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

@@ -1,11 +1,8 @@
-import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
-const R = React.createElement
 import AxisComponent from "../../../axes/AxisComponent"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import { FilterExprComponent } from "@mwater/expressions-ui"
-import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { DataSource, Schema, LiteralType, Expr } from "@mwater/expressions"
 import { ExprCompiler } from "@mwater/expressions"
 import ColorComponent from "../../../ColorComponent"
 import * as LayeredChartUtils from "./LayeredChartUtils"
@@ -15,61 +12,65 @@ import { TableSelectComponent } from "@mwater/expressions-ui"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { Checkbox } from "@mwater/react-library/lib/bootstrap"
 import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+import { LayeredChartDesignLayer, LayeredChartDesign } from "./LayeredChartDesign"
+import { Axis } from "../../../axes/Axis"
+import { JsonQLFilter } from "@mwater/visualization"
 
 export interface LayeredChartLayerDesignerComponentProps {
-  design: any
+  design: LayeredChartDesign
   schema: Schema
   dataSource: DataSource
   index: number
-  onChange: any
-  onRemove: any
-  filters?: any
+  onChange: (layer: LayeredChartDesignLayer) => void
+  onRemove: () => void
+  filters?: JsonQLFilter[]
 }
 
 export default class LayeredChartLayerDesignerComponent extends React.Component<LayeredChartLayerDesignerComponentProps> {
-  isLayerPolar(layer: any) {
+  isLayerPolar(layer: LayeredChartDesignLayer) {
     return ["pie", "donut"].includes(layer.type || this.props.design.type)
   }
 
-  doesLayerNeedGrouping(layer: any) {
+  doesLayerNeedGrouping(layer: LayeredChartDesignLayer) {
     return !["scatter"].includes(layer.type || this.props.design.type)
   }
 
   // Determine if x-axis required
-  isXAxisRequired(layer: any) {
+  isXAxisRequired(layer: LayeredChartDesignLayer) {
     return !this.isLayerPolar(layer)
   }
 
-  getAxisTypes(layer: any, axisKey: any) {
-    return LayeredChartUtils.getAxisTypes(this.props.design, layer, axisKey)
+  getAxisTypes(layer: LayeredChartDesignLayer, axisKey: any): LiteralType[] | undefined {
+    const types = LayeredChartUtils.getAxisTypes(this.props.design, layer, axisKey)
+    return types ?? undefined
   }
 
   getAxisLabel(icon: any, label: any) {
-    return R("span", null, R("span", { className: "glyphicon glyphicon-" + icon }), " " + label)
+    return <span><i className={`fas fa-${icon}`}/> {label}</span>
   }
 
   // Determine icon/label for color axis
-  getXAxisLabel(layer: any) {
+  getXAxisLabel(layer: LayeredChartDesignLayer) {
     if (this.props.design.transpose) {
-      return this.getAxisLabel("resize-vertical", T`Vertical Axis`)
+      return this.getAxisLabel("arrows-v", T`Vertical Axis`) 
     } else {
-      return this.getAxisLabel("resize-horizontal", T`Horizontal Axis`)
+      return this.getAxisLabel("arrows-h", T`Horizontal Axis`)
     }
   }
 
   // Determine icon/label for color axis
-  getYAxisLabel(layer: any) {
+  getYAxisLabel(layer: LayeredChartDesignLayer) {
     if (this.isLayerPolar(layer)) {
       return this.getAxisLabel("repeat", T`Angle Axis`)
     } else if (this.props.design.transpose) {
-      return this.getAxisLabel("resize-horizontal", T`Horizontal Axis`)
+      return this.getAxisLabel("arrows-h", T`Horizontal Axis`)
     } else {
-      return this.getAxisLabel("resize-vertical", T`Vertical Axis`)
+      return this.getAxisLabel("arrows-v", T`Vertical Axis`)
     }
   }
 
   // Determine icon/label for color axis
-  getColorAxisLabel(layer: any) {
+  getColorAxisLabel(layer: LayeredChartDesignLayer) {
     if (this.isLayerPolar(layer)) {
       return this.getAxisLabel("text-color", T`Label Axis`)
     } else {
@@ -78,25 +79,30 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
   }
 
   // Updates layer with the specified changes
-  updateLayer(changes: any) {
-    const layer = _.extend({}, this.props.design.layers[this.props.index], changes)
+  updateLayer(changes: Partial<LayeredChartDesignLayer>) {
+    const layer = { ...this.props.design.layers[this.props.index], ...changes }
     return this.props.onChange(layer)
   }
 
   // Update axes with specified changes
-  updateAxes(changes: any) {
-    const axes = _.extend({}, this.props.design.layers[this.props.index].axes, changes)
+  updateAxes(changes: Partial<LayeredChartDesignLayer["axes"]>) {
+    const axes = { ...this.props.design.layers[this.props.index].axes, ...changes }
     return this.updateLayer({ axes })
   }
 
   handleNameChange = (ev: any) => {
     return this.updateLayer({ name: ev.target.value })
   }
-  handleTableChange = (table: any) => {
+
+  handleLayerTypeChange = (type: LayeredChartDesignLayer["type"]) => {
+    this.updateLayer({ type: type === this.props.design.type ? undefined : type })
+  }
+
+  handleTableChange = (table: string) => {
     return this.updateLayer({ table })
   }
 
-  handleXAxisChange = (axis: any) => {
+  handleXAxisChange = (axis: Axis) => {
     const layer = this.props.design.layers[this.props.index]
     const axesChanges: any = { x: axis }
 
@@ -108,12 +114,11 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     return this.updateAxes(axesChanges)
   }
 
-  handleXColorMapChange = (xColorMap: any) => {
-    const layer = this.props.design.layers[this.props.index]
+  handleXColorMapChange = (xColorMap: boolean) => {
     return this.updateLayer({ xColorMap })
   }
 
-  handleColorAxisChange = (axis: any) => {
+  handleColorAxisChange = (axis: Axis) => {
     const layer = this.props.design.layers[this.props.index]
     const axesChanges: any = { color: axis }
 
@@ -125,64 +130,117 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     return this.updateAxes(axesChanges)
   }
 
-  handleYAxisChange = (axis: any) => {
+  handleYAxisChange = (axis: Axis) => {
     return this.updateAxes({ y: axis })
   }
-  handleFilterChange = (filter: any) => {
+  handleFilterChange = (filter: Expr) => {
     return this.updateLayer({ filter })
   }
-  handleColorChange = (color: any) => {
+  handleColorChange = (color: string) => {
     return this.updateLayer({ color })
   }
-  handleCumulativeChange = (value: any) => {
+  handleCumulativeChange = (value: boolean) => {
     return this.updateLayer({ cumulative: value })
   }
-  handleTrendlineChange = (value: any) => {
+  handleTrendlineChange = (value: boolean) => {
     return this.updateLayer({ trendline: value ? "linear" : undefined })
   }
-  handleStackedChange = (value: any) => {
+  handleStackedChange = (value: boolean) => {
     return this.updateLayer({ stacked: value })
   }
 
   renderName() {
     const layer = this.props.design.layers[this.props.index]
-
-    // R 'div', className: "form-group",
-    //   R 'label', className: "text-muted", "Series Name"
     const placeholder = this.props.design.layers.length === 1 ? T`Value` : T`Series ${this.props.index + 1}`
-    return R("input", {
-      type: "text",
-      className: "form-control form-control-sm",
-      value: layer.name,
-      onChange: this.handleNameChange,
-      placeholder
-    })
+    return <input
+      type="text"
+      className="form-control form-control-sm"
+      value={layer.name}
+      onChange={this.handleNameChange}
+      placeholder={placeholder}
+    />
   }
 
   renderRemove() {
     if (this.props.design.layers.length > 1) {
-      return R(
-        "button",
-        { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove },
-        R("span", { className: "fas fa-times" })
+      return (
+        <button className="btn btn-sm btn-link float-end" type="button" onClick={this.props.onRemove}>
+          <span className="fas fa-times"/>
+        </button>
       )
     }
-    return null
+    return undefined
   }
 
   renderTable() {
     const layer = this.props.design.layers[this.props.index]
 
-    return R(
-      uiComponents.SectionComponent,
-      { icon: "fa-database", label: T`Data Source` },
-      R(TableSelectComponent, {
-        schema: this.props.schema,
-        value: layer.table,
-        onChange: this.handleTableChange,
-        filter: layer.filter,
-        onFilterChange: this.handleFilterChange
-      })
+    return (
+      <uiComponents.SectionComponent icon="fa-database" label={T`Data Source`}>
+        <TableSelectComponent
+          schema={this.props.schema}
+          value={layer.table}
+          onChange={this.handleTableChange}
+          filter={layer.filter}
+          onFilterChange={this.handleFilterChange}
+        />
+      </uiComponents.SectionComponent>
+    )
+  }
+
+  renderLayerTypeSelector() {
+    const layer = this.props.design.layers[this.props.index]
+    const { design, index } = this.props
+
+    if (index === 0) {
+      return null
+    }
+
+    const mainType = design.type
+    const isMainPolar = ["pie", "donut"].includes(mainType)
+
+    const compatibleTypes: { value: LayeredChartDesignLayer["type"]; label: string; name?: string }[] = isMainPolar
+      ? [
+          { value: "pie", label: T`Pie` },
+          { value: "donut", label: T`Donut` }
+        ]
+      : [
+          { value: "bar", label: T`Bar` },
+          { value: "line", label: T`Line` },
+          { value: "spline", label: T`Smoothed Line` },
+          { value: "area", label: T`Area` }
+        ]
+
+    // Add the main type as the first option if it's not already there (e.g. if main is scatter)
+    if (!compatibleTypes.some((t) => t.value === mainType)) {
+      compatibleTypes.unshift({ value: mainType as any, label: T(mainType) })
+    }
+
+    // Assign names for OptionListComponent
+    compatibleTypes.forEach((t) => (t.name = t.label))
+
+    const currentType = layer.type || mainType
+    const currentTypeLabel = compatibleTypes.find((t) => t.value === currentType)?.label || T(currentType)
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Layer Chart Type`}</label>
+        <uiComponents.ToggleEditComponent
+          label={currentTypeLabel}
+          editor={(onClose: any) => (
+            <uiComponents.OptionListComponent
+              hint={T`Select a Chart Type`}
+              items={compatibleTypes.map((ct) => ({
+                name: ct.name || "",
+                onClick: () => {
+                  onClose() // Close editor first
+                  return this.handleLayerTypeChange(ct.value)
+                }
+              }))}
+            />
+          )}
+        />
+      </div>
     )
   }
 
@@ -193,122 +251,119 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
   renderXAxis() {
     const layer = this.props.design.layers[this.props.index]
     if (!layer.table) {
-      return
+      return undefined
     }
 
     if (!this.isXAxisRequired(layer)) {
-      return
+      return undefined
     }
 
     const title = this.getXAxisLabel(layer)
 
-    const filters = _.clone(this.props.filters) || []
+    const filters = this.props.filters ? this.props.filters.slice() : []
     if (layer.filter != null) {
       const exprCompiler = new ExprCompiler(this.props.schema)
       const jsonql = exprCompiler.compileExpr({ expr: layer.filter, tableAlias: "{alias}" })
 
       if (jsonql) {
-        filters.push({ table: layer.filter.table, jsonql })
+        filters.push({ table: (layer.filter as any).table, jsonql })
       }
     }
 
     const categoricalX = new LayeredChartCompiler({ schema: this.props.schema }).isCategoricalX(this.props.design)
 
     return [
-      R(
-        uiComponents.SectionComponent,
-        { label: title },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: layer.table,
-          types: this.getAxisTypes(layer, "x"),
-          aggrNeed: "none",
-          required: true,
-          value: layer.axes.x,
-          onChange: this.handleXAxisChange,
-          filters,
-          // Only show x color map if no color axis and is categorical and enabled
-          showColorMap: layer.xColorMap && categoricalX && !layer.axes.color,
-          autosetColors: false,
-          // Categorical X can exclude values
-          allowExcludedValues: categoricalX
-        })
-      ),
-      categoricalX ? R(ui.Checkbox, {
-        value: layer.xAxisOnlyValuesPresent,
-        onChange: this.handlexAxisOnlyValuesPresentChange
-      },
-        T`Only show values actually present `,
-        R(PopoverHelpComponent, { placement: 'bottom' }, T`Limits values to those that are present in the data, as opposed to all choices or all dates within range`)
-      ) : null,
-      <br/>
-    ]
+      <uiComponents.SectionComponent key="axis" label={title}>
+        <AxisComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={layer.table}
+          types={this.getAxisTypes(layer, "x")}
+          aggrNeed="none"
+          required={true}
+          value={layer.axes.x}
+          onChange={this.handleXAxisChange}
+          filters={filters}
+          showColorMap={layer.xColorMap && categoricalX && !layer.axes.color}
+          autosetColors={false}
+          allowExcludedValues={categoricalX}
+        />
+      </uiComponents.SectionComponent>,
+      categoricalX ? (
+        <ui.Checkbox
+          key="checkbox"
+          value={layer.xAxisOnlyValuesPresent}
+          onChange={this.handlexAxisOnlyValuesPresentChange}
+        >
+          {T`Only show values actually present `}
+          <PopoverHelpComponent placement="bottom">
+            {T`Limits values to those that are present in the data, as opposed to all choices or all dates within range`}
+          </PopoverHelpComponent>
+        </ui.Checkbox>
+      ) : undefined,
+      <br key="br"/>
+    ] as React.ReactNode[]
   }
 
   renderColorAxis() {
     const layer = this.props.design.layers[this.props.index]
     if (!layer.table) {
-      return
+      return undefined
     }
 
     const title = this.getColorAxisLabel(layer)
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, title),
-      R(
-        "div",
-        { style: { marginLeft: 10 } },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: layer.table,
-          types: this.getAxisTypes(layer, "color"),
-          aggrNeed: "none",
-          required: this.isLayerPolar(layer),
-          showColorMap: true,
-          value: layer.axes.color,
-          onChange: this.handleColorAxisChange,
-          allowExcludedValues: true,
-          filters: this.props.filters
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{title}</label>
+        <div style={{ marginLeft: 10 }}>
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={layer.table}
+            types={this.getAxisTypes(layer, "color")}
+            aggrNeed="none"
+            required={this.isLayerPolar(layer)}
+            showColorMap={true}
+            value={layer.axes.color}
+            onChange={this.handleColorAxisChange}
+            allowExcludedValues={true}
+            filters={this.props.filters}
+          />
+        </div>
+      </div>
     )
   }
 
   renderYAxis() {
     const layer = this.props.design.layers[this.props.index]
     if (!layer.table) {
-      return
+      return undefined
     }
 
     const title = this.getYAxisLabel(layer)
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, title),
-      R(
-        "div",
-        { style: { marginLeft: 10 } },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: layer.table,
-          types: this.getAxisTypes(layer, "y"),
-          aggrNeed: this.doesLayerNeedGrouping(layer) ? "required" : "none",
-          value: layer.axes.y,
-          required: true,
-          filters: this.props.filters,
-          showFormat: true,
-          onChange: this.handleYAxisChange
-        }),
-        this.renderCumulative(),
-        this.renderStacked(),
-        this.renderTrendline()
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{title}</label>
+        <div style={{ marginLeft: 10 }}>
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={layer.table}
+            types={this.getAxisTypes(layer, "y")}
+            aggrNeed={this.doesLayerNeedGrouping(layer) ? "required" : "none"}
+            value={layer.axes.y}
+            required={true}
+            filters={this.props.filters}
+            showFormat={true}
+            onChange={this.handleYAxisChange}
+          />
+          {this.renderCumulative()}
+          {this.renderStacked()}
+          {this.renderTrendline()}
+        </div>
+      </div>
     )
   }
 
@@ -321,12 +376,12 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
       return
     }
 
-    return R(
-      "div",
-      { key: "cumulative" },
-      <Checkbox inline value={layer.cumulative} onChange={this.handleCumulativeChange}>
-        {T`Cumulative`}
-      </Checkbox>
+    return (
+      <div key="cumulative">
+        <Checkbox inline value={layer.cumulative} onChange={this.handleCumulativeChange}>
+          {T`Cumulative`}
+        </Checkbox>
+      </div>
     )
   }
 
@@ -339,12 +394,12 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
       return
     }
 
-    return R(
-      "div",
-      { key: "trendline" },
-      <Checkbox value={layer.trendline === "linear"} onChange={this.handleTrendlineChange}>
-        {T`Show linear trendline`}
-      </Checkbox>
+    return (
+      <div key="trendline">
+        <Checkbox value={layer.trendline === "linear"} onChange={this.handleTrendlineChange}>
+          {T`Show linear trendline`}
+        </Checkbox>
+      </div>
     )
   }
 
@@ -355,16 +410,16 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     if (layer.axes.color && this.props.design.layers.length > 1) {
       const stacked = layer.stacked != null ? layer.stacked : true
 
-      return R(
-        "div",
-        { key: "stacked" },
-        <Checkbox value={stacked} onChange={this.handleStackedChange}>
-          {T`Stacked`}
-        </Checkbox>
+      return (
+        <div key="stacked">
+          <Checkbox value={stacked} onChange={this.handleStackedChange}>
+            {T`Stacked`}
+          </Checkbox>
+        </div>
       )
     }
 
-    return null
+    return undefined
   }
 
   renderColor() {
@@ -372,24 +427,23 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
 
     // If not table do nothing
     if (!layer.table) {
-      return
+      return undefined
     }
 
     const categoricalX = new LayeredChartCompiler({ schema: this.props.schema }).isCategoricalX(this.props.design)
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, layer.axes.color ? T`Default Color` : T`Color`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        R(ColorComponent, { color: layer.color, onChange: this.handleColorChange }),
-        // Allow toggling of colors
-        layer.axes.x && categoricalX && !layer.axes.color
-          ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, T`Set Individual Colors`)
-          : undefined
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{layer.axes.color ? T`Default Color` : T`Color`}</label>
+        <div style={{ marginLeft: 8 }}>
+          <ColorComponent color={layer.color} onChange={this.handleColorChange}/>
+          {layer.axes.x && categoricalX && !layer.axes.color ? (
+            <ui.Checkbox value={layer.xColorMap} onChange={this.handleXColorMapChange}>
+              {T`Set Individual Colors`}
+            </ui.Checkbox>
+          ) : undefined}
+        </div>
+      </div>
     )
   }
 
@@ -397,51 +451,46 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     const layer = this.props.design.layers[this.props.index]
 
     // If no table, hide
-    if (!layer.table) {      return null
+    if (!layer.table) {
+      return undefined
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        R(FilterExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.handleFilterChange,
-          table: layer.table,
-          value: layer.filter
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-filter"/> {T`Filters`}
+        </label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={layer.table}
+            value={layer.filter}
+          />
+        </div>
+      </div>
     )
   }
 
   render() {
     const layer = this.props.design.layers[this.props.index]
-    return R(
-      "div",
-      null,
-      this.props.index > 0 ? R("hr") : undefined,
-      this.renderRemove(),
-      this.renderTable(),
-      // Color axis first for pie
-      this.isLayerPolar(layer) ? this.renderColorAxis() : undefined,
-      this.renderXAxis(),
-      layer.axes.x || layer.axes.color ? this.renderYAxis() : undefined,
-      layer.axes.x && layer.axes.y && !this.isLayerPolar(layer) ? this.renderColorAxis() : undefined,
-      // No default color for polar
-      (() => {
-        if (!this.isLayerPolar(layer)) {
-          if (layer.axes.y) {
-            return this.renderColor()
-          }
-        }
-        return null
-      })(),
-      layer.axes.y ? this.renderFilter() : undefined,
-      layer.axes.y ? this.renderName() : undefined
+    return (
+      <div>
+        {this.props.index > 0 ? <hr/> : undefined}
+        {this.renderRemove()}
+        {this.renderTable()}
+        {this.renderLayerTypeSelector()}
+        {/* Color axis first for pie */}
+        {this.isLayerPolar(layer) ? this.renderColorAxis() : undefined}
+        {this.renderXAxis()}
+        {layer.axes.x || layer.axes.color ? this.renderYAxis() : undefined}
+        {layer.axes.x && layer.axes.y && !this.isLayerPolar(layer) ? this.renderColorAxis() : undefined}
+        {/* No default color for polar */}
+        {!this.isLayerPolar(layer) && layer.axes.y ? this.renderColor() : undefined}
+        {layer.axes.y ? this.renderFilter() : undefined}
+        {layer.axes.y ? this.renderName() : undefined}
+      </div>
     )
   }
 }