@mwater/visualization 5.2.0 → 5.3.1

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

@@ -1,22 +1,24 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import update from "@mwater/react-library/lib/update"
 import { default as Rcslider } from "rc-slider"
 import AxisComponent from "../../../axes/AxisComponent"
 import ColorComponent from "../../../ColorComponent"
-import { FilterExprComponent } from "@mwater/expressions-ui"
+import { FilterExprComponent, TableSelectComponent } from "@mwater/expressions-ui"
 import { ExprComponent } from "@mwater/expressions-ui"
 import { DataSource, Expr, Schema } from "@mwater/expressions"
-import { PivotChartIntersection } from "./PivotChartDesign"
+import { PivotChartDesign, PivotChartIntersection, PivotChartSegment } from "./PivotChartDesign"
 import { JsonQLFilter } from "../../../JsonQLFilter"
 import { ListEditorComponent } from "@mwater/react-library/lib/ListEditorComponent"
+import { getAllSegments } from "./PivotChartUtils"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import produce from "immer"
 
 export interface IntersectionDesignerComponentProps {
+  design: PivotChartDesign
   intersection: PivotChartIntersection
+  intersectionId: string
   table: string
   schema: Schema
   dataSource: DataSource
@@ -25,211 +27,289 @@ export interface IntersectionDesignerComponentProps {
 }
 
 // Design an intersection of a pivot table
-export default class IntersectionDesignerComponent extends React.Component<IntersectionDesignerComponentProps> {
-  constructor(props: IntersectionDesignerComponentProps) {
-    super(props)
-
-    this.update = this.update.bind(this)
-  }
+export default function IntersectionDesignerComponent(props: IntersectionDesignerComponentProps) {
+  // Determine table to use (use overrideTable if set, otherwise use table from props)
+  const table = props.intersection.tableOverride || props.table
 
-  // Updates intersection with the specified changes
-  update(...args: any[]) {
-    return update(this.props.intersection, this.props.onChange, arguments)
+  const handleBackgroundColorAxisChange = (backgroundColorAxis: any) => {
+    const opacity = props.intersection.backgroundColorOpacity || 1
+    props.onChange({ ...props.intersection, backgroundColorAxis, backgroundColorOpacity: opacity })
   }
 
-  handleBackgroundColorAxisChange = (backgroundColorAxis: any) => {
-    const opacity = this.props.intersection.backgroundColorOpacity || 1
-    return this.update({ backgroundColorAxis, backgroundColorOpacity: opacity })
+  const handleBackgroundColorChange = (backgroundColor: any) => {
+    const opacity = props.intersection.backgroundColorOpacity || 1
+    props.onChange({ ...props.intersection, backgroundColor, backgroundColorOpacity: opacity })
   }
 
-  handleBackgroundColorChange = (backgroundColor: any) => {
-    const opacity = this.props.intersection.backgroundColorOpacity || 1
-    return this.update({ backgroundColor, backgroundColorOpacity: opacity })
+  const handleBackgroundColorConditionsChange = (backgroundColorConditions: any) => {
+    const opacity = props.intersection.backgroundColorOpacity || 1
+    props.onChange({ ...props.intersection, backgroundColorConditions, backgroundColorOpacity: opacity })
   }
 
-  handleBackgroundColorConditionsChange = (backgroundColorConditions: any) => {
-    const opacity = this.props.intersection.backgroundColorOpacity || 1
-    return this.update({ backgroundColorConditions, backgroundColorOpacity: opacity })
+  const handleBackgroundColorOpacityChange = (newValue: any) => {
+    props.onChange({ ...props.intersection, backgroundColorOpacity: newValue / 100 })
   }
 
-  handleBackgroundColorOpacityChange = (newValue: any) => {
-    return this.update({ backgroundColorOpacity: newValue / 100 })
+  const handleFilterChange = (filter: any) => {
+    props.onChange({ ...props.intersection, filter })
   }
 
-  handleFilterChange = (filter: any) => {
-    return this.update({ filter })
+  const handleTableOverrideChange = (tableOverride: string) => {
+    props.onChange({ ...props.intersection, tableOverride })
   }
 
-  renderValueAxis() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: "Calculation",
-        help: "This is the calculated value that is displayed. Leave as blank to make an empty section"
-      },
-      R(AxisComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        table: this.props.table,
-        types: ["enum", "text", "boolean", "date", "number"],
-        aggrNeed: "required",
-        value: this.props.intersection.valueAxis,
-        onChange: this.update("valueAxis"),
-        showFormat: true,
-        filters: this.props.filters
-      })
+  const renderValueAxis = () => {
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label="Calculation"
+        help="This is the calculated value that is displayed. Leave as blank to make an empty section"
+      >
+        <AxisComponent
+          schema={props.schema}
+          dataSource={props.dataSource}
+          table={table}
+          types={["enum", "text", "boolean", "date", "number"]}
+          aggrNeed="required"
+          value={props.intersection.valueAxis}
+          onChange={valueAxis => props.onChange({ ...props.intersection, valueAxis })}
+          showFormat={true}
+          filters={props.filters}
+        />
+      </ui.FormGroup>
     )
   }
 
-  renderNullValue() {
-    if (this.props.intersection.valueAxis) {
-      return R(
-        ui.FormGroup,
-        {
-          labelMuted: true,
-          label: "Show Empty Cells as"
-        },
-        R(ui.TextInput, {
-          value: this.props.intersection.valueAxis.nullLabel ?? null,
-          emptyNull: true,
-          onChange: this.update("valueAxis.nullLabel"),
-          placeholder: "Blank"
-        })
+  const renderNullValue = () => {
+    if (props.intersection.valueAxis) {
+      return (
+        <ui.FormGroup
+          labelMuted={true}
+          label="Show Empty Cells as"
+        >
+          <ui.TextInput
+            value={props.intersection.valueAxis.nullLabel ?? null}
+            emptyNull={true}
+            onChange={nullLabel => props.onChange({ ...props.intersection, valueAxis: { ...props.intersection.valueAxis!, nullLabel: nullLabel ?? undefined } })}
+            placeholder="Blank"
+          />
+        </ui.FormGroup>
       )
     }
     return null
   }
 
-  renderFilter() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"]
-      },
-      R(FilterExprComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        onChange: this.handleFilterChange,
-        table: this.props.table,
-        value: this.props.intersection.filter
-      })
+  const renderFilter = () => {
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={<><ui.Icon id="glyphicon-filter" /> Filters</>}
+      >
+        <FilterExprComponent
+          schema={props.schema}
+          dataSource={props.dataSource}
+          onChange={handleFilterChange}
+          table={table}
+          value={props.intersection.filter}
+        />
+      </ui.FormGroup>
     )
   }
 
-  renderStyling() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        key: "styling",
-        label: "Styling"
-      },
-      R(
-        ui.Checkbox,
-        { key: "bold", inline: true, value: this.props.intersection.bold, onChange: this.update("bold") },
-        "Bold"
-      ),
-      R(
-        ui.Checkbox,
-        { key: "italic", inline: true, value: this.props.intersection.italic, onChange: this.update("italic") },
-        "Italic"
-      )
+  const renderStyling = () => {
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        key="styling"
+        label="Styling"
+      >
+        <ui.Checkbox
+          key="bold"
+          inline={true}
+          value={props.intersection.bold}
+          onChange={bold => props.onChange({ ...props.intersection, bold })}
+        >
+          Bold
+        </ui.Checkbox>
+        <ui.Checkbox
+          key="italic"
+          inline={true}
+          value={props.intersection.italic}
+          onChange={italic => props.onChange({ ...props.intersection, italic })}
+        >
+          Italic
+        </ui.Checkbox>
+      </ui.FormGroup>
     )
   }
 
-  renderBackgroundColorConditions() {
-    return R(BackgroundColorConditionsComponent, {
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.table,
-      colorConditions: this.props.intersection.backgroundColorConditions,
-      onChange: this.handleBackgroundColorConditionsChange
-    })
+  const renderBackgroundColorConditions = () => {
+    return (
+      <BackgroundColorConditionsComponent
+        schema={props.schema}
+        dataSource={props.dataSource}
+        table={table}
+        colorConditions={props.intersection.backgroundColorConditions}
+        onChange={handleBackgroundColorConditionsChange}
+      />
+    )
   }
 
-  renderBackgroundColorAxis() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: "Background Color From Values",
-        help: "This is an optional background color to set on cells that is controlled by the data"
-      },
-      R(AxisComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        table: this.props.table,
-        types: ["enum", "text", "boolean", "date"],
-        aggrNeed: "required",
-        value: this.props.intersection.backgroundColorAxis,
-        onChange: this.handleBackgroundColorAxisChange,
-        showColorMap: true,
-        filters: this.props.filters
-      })
+  const renderBackgroundColorAxis = () => {
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label="Background Color From Values"
+        help="This is an optional background color to set on cells that is controlled by the data"
+      >
+        <AxisComponent
+          schema={props.schema}
+          dataSource={props.dataSource}
+          table={table}
+          types={["enum", "text", "boolean", "date"]}
+          aggrNeed="required"
+          value={props.intersection.backgroundColorAxis}
+          onChange={handleBackgroundColorAxisChange}
+          showColorMap={true}
+          filters={props.filters}
+        />
+      </ui.FormGroup>
     )
   }
 
-  renderBackgroundColor() {
-    if (this.props.intersection.backgroundColorAxis) {
+  const renderBackgroundColor = () => {
+    if (props.intersection.backgroundColorAxis) {
       return
     }
 
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: "Background Color",
-        help: "This is an optional background color to set on all cells"
-      },
-      R(ColorComponent, {
-        color: this.props.intersection.backgroundColor,
-        onChange: this.handleBackgroundColorChange
-      })
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label="Background Color"
+        help="This is an optional background color to set on all cells"
+      >
+        <ColorComponent
+          color={props.intersection.backgroundColor}
+          onChange={handleBackgroundColorChange}
+        />
+      </ui.FormGroup>
     )
   }
 
-  renderBackgroundColorOpacityControl() {
+  const renderBackgroundColorOpacityControl = () => {
     if (
-      !this.props.intersection.backgroundColorAxis &&
-      !this.props.intersection.backgroundColor &&
-      !this.props.intersection.backgroundColorConditions?.[0]
+      !props.intersection.backgroundColorAxis &&
+      !props.intersection.backgroundColor &&
+      !props.intersection.backgroundColorConditions?.[0]
     ) {
       return
     }
 
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: `Background Opacity: ${Math.round((this.props.intersection.backgroundColorOpacity ?? 1) * 100)}%`
-      },
-      R(Rcslider, {
-        min: 0,
-        max: 100,
-        step: 1,
-        tipTransitionName: "rc-slider-tooltip-zoom-down",
-        value: (this.props.intersection.backgroundColorOpacity ?? 1) * 100,
-        onChange: this.handleBackgroundColorOpacityChange
-      })
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={`Background Opacity: ${Math.round((props.intersection.backgroundColorOpacity ?? 1) * 100)}%`}
+      >
+        <Rcslider
+          min={0}
+          max={100}
+          step={1}
+          tipTransitionName="rc-slider-tooltip-zoom-down"
+          value={(props.intersection.backgroundColorOpacity ?? 1) * 100}
+          onChange={handleBackgroundColorOpacityChange}
+        />
+      </ui.FormGroup>
     )
   }
 
-  render() {
-    return R(
-      "div",
-      null,
-      this.renderValueAxis(),
-      this.renderNullValue(),
-      this.renderFilter(),
-      this.renderStyling(),
-      this.renderBackgroundColorAxis(),
-      this.renderBackgroundColorConditions(),
-      this.renderBackgroundColor(),
-      this.renderBackgroundColorOpacityControl()
+  const renderSegmentValueAxisOverride = (segment: PivotChartSegment) => {
+    // Get type of segment axis
+    const axisBuilder = new AxisBuilder({ schema: props.schema })
+
+    const segmentValueAxisType = axisBuilder.getAxisType(segment.valueAxis!)
+    if (!segmentValueAxisType) {
+      return null
+    }
+
+    const overrideValueAxis = (props.intersection.segmentValueAxisOverrides || {})[segment.id]
+
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={(segment.label || axisBuilder.summarizeAxis(segment.valueAxis!)) + ":"}
+      >
+        <AxisComponent
+          schema={props.schema}
+          dataSource={props.dataSource}
+          table={table}
+          types={[segmentValueAxisType]}
+          aggrNeed="none"
+          value={overrideValueAxis}
+          onChange={valueAxis => props.onChange(produce(props.intersection, (draft: PivotChartIntersection) => {
+            draft.segmentValueAxisOverrides = draft.segmentValueAxisOverrides || {}
+            draft.segmentValueAxisOverrides[segment.id] = valueAxis
+          }))}
+          allowExcludedValues={false}
+          collapseCategories={true}
+        />
+      </ui.FormGroup>
     )
   }
+
+  const renderSegmentValueAxisOverrides = () => {
+    if (!props.intersection.tableOverride) {
+      return null
+    }
+
+    // Get all segments
+    const segments = getAllSegments(props.design.rows).concat(getAllSegments(props.design.columns))
+
+    // Filter out segments that are not intersecting
+    const intersectingSegmentIds = props.intersectionId.split(/[,:]/).filter(id => id !== "")
+    const intersectingSegments = segments.filter(segment => intersectingSegmentIds.includes(segment.id) && segment.valueAxis)
+
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label="Fields to disaggregate data by (required)"
+      >
+        {intersectingSegments.map(segment => renderSegmentValueAxisOverride(segment))}
+      </ui.FormGroup>
+    )
+  }
+
+  const renderOverrideTable = () => {
+    return (
+      <ui.CollapsibleSection
+        label="Advanced: Override Data Source"
+        hint="Use a different data source for this cell"
+        labelMuted={true}
+        initiallyOpen={props.intersection.tableOverride != null}
+      >
+        <TableSelectComponent
+          schema={props.schema}
+          value={props.intersection.tableOverride}
+          onChange={handleTableOverrideChange}
+        />
+        <br />
+        {renderSegmentValueAxisOverrides()}
+      </ui.CollapsibleSection>
+    )
+  }
+
+  return (
+    <div>
+      {renderValueAxis()}
+      {renderNullValue()}
+      {renderFilter()}
+      {renderStyling()}
+      {renderBackgroundColorAxis()}
+      {renderBackgroundColorConditions()}
+      {renderBackgroundColor()}
+      {renderBackgroundColorOpacityControl()}
+      {renderOverrideTable()}
+    </div>
+  )
 }
 
 interface BackgroundColorConditionsComponentProps {
@@ -250,33 +330,37 @@ class BackgroundColorConditionsComponent extends React.Component<BackgroundColor
 
   render() {
     // List conditions
-    return R(
-      ui.FormGroup,
-      {
-        label: "Color Conditions",
-        labelMuted: true,
-        help: "Add conditions that, if met, set the color of the cell. Useful for flagging certain values"
-      },
-      <ListEditorComponent<{ condition?: Expr, color?: string }>
-        items={this.props.colorConditions || []}
-        renderItem={(item, index, onItemChange) => {
-          return R(BackgroundColorConditionComponent, {
-            key: index,
-            colorCondition: item,
-            table: this.props.table,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: onItemChange
-          })
-        }}
-        onItemsChange={this.props.onChange}
-      />,
-      R(
-        ui.Button,
-        { type: "link", size: "sm", onClick: this.handleAdd },
-        R(ui.Icon, { id: "fa-plus" }),
-        " Add Condition"
-      )
+    return (
+      <ui.FormGroup
+        label="Color Conditions"
+        labelMuted={true}
+        help="Add conditions that, if met, set the color of the cell. Useful for flagging certain values"
+      >
+        <ListEditorComponent<{ condition?: Expr, color?: string }>
+          items={this.props.colorConditions || []}
+          renderItem={(item, index, onItemChange) => {
+            return (
+              <BackgroundColorConditionComponent
+                key={index}
+                colorCondition={item}
+                table={this.props.table}
+                schema={this.props.schema}
+                dataSource={this.props.dataSource}
+                onChange={onItemChange}
+              />
+            )
+          }}
+          onItemsChange={this.props.onChange}
+        />
+        <ui.Button
+          type="link"
+          size="sm"
+          onClick={this.handleAdd}
+        >
+          <ui.Icon id="fa-plus" />
+          Add Condition
+        </ui.Button>
+      </ui.FormGroup>
     )
   }
 }
@@ -289,7 +373,9 @@ interface BackgroundColorConditionComponentProps {
   onChange: any
 }
 
-// Displays single background color condition
+/**
+ * Displays single background color condition
+ */
 class BackgroundColorConditionComponent extends React.Component<BackgroundColorConditionComponentProps> {
   constructor(props: BackgroundColorConditionComponentProps) {
     super(props)
@@ -302,37 +388,35 @@ class BackgroundColorConditionComponent extends React.Component<BackgroundColorC
   }
 
   render() {
-    return R(
-      "div", {},
-      R(
-        ui.FormGroup,
-        {
-          labelMuted: true,
-          label: "Condition"
-        },
-        R(ExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.update("condition"),
-          types: ["boolean"],
-          aggrStatuses: ["aggregate", "literal"],
-          table: this.props.table,
-          value: this.props.colorCondition.condition
-        })
-      ),
-
-      R(
-        ui.FormGroup,
-        {
-          labelMuted: true,
-          label: "Color",
-          hint: "Color to display when condition is met"
-        },
-        R(ColorComponent, {
-          color: this.props.colorCondition.color,
-          onChange: this.update("color")
-        })
-      )
+    return (
+      <div>
+        <ui.FormGroup
+          labelMuted={true}
+          label="Condition"
+        >
+          <ExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.update("condition")}
+            types={["boolean"]}
+            aggrStatuses={["aggregate", "literal"]}
+            table={this.props.table}
+            value={this.props.colorCondition.condition}
+          />
+        </ui.FormGroup>
+
+        <ui.FormGroup
+          labelMuted={true}
+          label="Color"
+          hint="Color to display when condition is met"
+        >
+          <ColorComponent
+            color={this.props.colorCondition.color}
+            onChange={this.update("color")}
+          />
+        </ui.FormGroup>
+      </div>
     )
   }
 }
+