@mwater/visualization 5.0.0

package/src/widgets/charts/pivot/PivotChartViewComponent.ts

@@ -0,0 +1,276 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+import ReactDOM from "react-dom"
+const R = React.createElement
+
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import TextComponent from "../../text/TextComponent"
+import * as PivotChartUtils from "./PivotChartUtils"
+import PivotChartLayoutComponent from "./PivotChartLayoutComponent"
+import PivotChartLayoutBuilder from "./PivotChartLayoutBuilder"
+import SegmentDesignerComponent from "./SegmentDesignerComponent"
+import IntersectionDesignerComponent from "./IntersectionDesignerComponent"
+import { JsonQLFilter, WidgetScope } from "../../.."
+import { PivotChartDesign } from "./PivotChartDesign"
+
+export interface PivotChartViewComponentProps {
+  schema: Schema
+  dataSource: DataSource
+
+  design: PivotChartDesign
+  onDesignChange?: (design: PivotChartDesign) => void
+
+  data: any
+  width: number
+  height?: number
+
+  /** scope of the widget (when the widget self-selects a particular scope) */
+  scope?: WidgetScope
+
+  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+  onScopeChange?: (scope: WidgetScope | null) => void
+
+  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+  filters?: JsonQLFilter[]
+}
+
+interface PivotChartViewComponentState {
+  editSegment: any
+  editIntersectionId: any
+  editIntersection: any
+}
+
+// Displays a pivot chart
+export default class PivotChartViewComponent extends React.Component<
+  PivotChartViewComponentProps,
+  PivotChartViewComponentState
+> {
+  static contextTypes = { locale: PropTypes.string }
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      editSegment: null, // Segment being edited
+      editIntersectionId: null, // id of intersection being edited
+      editIntersection: null // value of intersection being edited
+    }
+  }
+
+  handleHeaderChange = (header: any) => {
+    return this.props.onDesignChange!(_.extend({}, this.props.design, { header }))
+  }
+
+  handleFooterChange = (footer: any) => {
+    return this.props.onDesignChange!(_.extend({}, this.props.design, { footer }))
+  }
+
+  handleEditSection = (sectionId: any) => {
+    // If intersection
+    if (sectionId.match(":")) {
+      return this.setState({
+        editIntersectionId: sectionId,
+        editIntersection: this.props.design.intersections[sectionId] || {}
+      })
+    } else {
+      // Find segment
+      const segment =
+        PivotChartUtils.findSegment(this.props.design.rows, sectionId) ||
+        PivotChartUtils.findSegment(this.props.design.columns, sectionId)
+      return this.setState({ editSegment: segment })
+    }
+  }
+
+  handleSaveEditSegment = () => {
+    // Always has label when saved
+    let segment = this.state.editSegment
+
+    if (segment.label == null) {
+      segment = _.extend({}, segment, { label: "" })
+    }
+
+    const design = { ...this.props.design,
+      rows: PivotChartUtils.replaceSegment(this.props.design.rows, segment),
+      columns: PivotChartUtils.replaceSegment(this.props.design.columns, segment)
+    }
+
+    this.props.onDesignChange!(design)
+    return this.setState({ editSegment: null })
+  }
+
+  handleCancelEditSegment = () => {
+    return this.setState({ editSegment: null })
+  }
+
+  handleSaveEditIntersection = () => {
+    const intersections = _.clone(this.props.design.intersections)
+    intersections[this.state.editIntersectionId] = this.state.editIntersection
+
+    const design = { ...this.props.design, intersections }
+    this.props.onDesignChange!(design)
+    return this.setState({ editIntersectionId: null, editIntersection: null })
+  }
+
+  handleCancelEditIntersection = () => {
+    return this.setState({ editIntersectionId: null, editIntersection: null })
+  }
+
+  handleRemoveSegment = (segmentId: any) => {
+    const design = { ...this.props.design,
+      rows: PivotChartUtils.removeSegment(this.props.design.rows, segmentId),
+      columns: PivotChartUtils.removeSegment(this.props.design.columns, segmentId)
+    }
+
+    return this.props.onDesignChange!(design)
+  }
+
+  handleInsertBeforeSegment = (segmentId: any) => {
+    const design = { ...this.props.design,
+      rows: PivotChartUtils.insertBeforeSegment(this.props.design.rows, segmentId),
+      columns: PivotChartUtils.insertBeforeSegment(this.props.design.columns, segmentId)
+    }
+
+    return this.props.onDesignChange!(design)
+  }
+
+  handleInsertAfterSegment = (segmentId: any) => {
+    const design = { ...this.props.design, 
+      rows: PivotChartUtils.insertAfterSegment(this.props.design.rows, segmentId),
+      columns: PivotChartUtils.insertAfterSegment(this.props.design.columns, segmentId)
+    }
+
+    return this.props.onDesignChange!(design)
+  }
+
+  handleAddChildSegment = (segmentId: any) => {
+    const design = { ...this.props.design,
+      rows: PivotChartUtils.addChildSegment(this.props.design.rows, segmentId),
+      columns: PivotChartUtils.addChildSegment(this.props.design.columns, segmentId)
+    }
+
+    return this.props.onDesignChange!(design)
+  }
+
+  handleSummarizeSegment = (segmentId: any) => {
+    const design = PivotChartUtils.summarizeSegment(this.props.design, segmentId, "Summary")
+
+    return this.props.onDesignChange!(design)
+  }
+
+  renderHeader() {
+    return R(
+      "div",
+      { style: { paddingLeft: 10, paddingRight: 10 } },
+      R(TextComponent, {
+        design: this.props.design.header,
+        onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        exprValues: this.props.data.header || {},
+        width: this.props.width
+      })
+    )
+  }
+
+  renderFooter() {
+    return R(
+      "div",
+      { style: { paddingLeft: 10, paddingRight: 10 } },
+      R(TextComponent, {
+        design: this.props.design.footer,
+        onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        exprValues: this.props.data.footer || {},
+        width: this.props.width
+      })
+    )
+  }
+
+  renderEditSegmentModal() {
+    if (!this.state.editSegment) {
+      return
+    }
+
+    const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
+      ? "row"
+      : "column"
+
+    return R(
+      ActionCancelModalComponent,
+      {
+        title: `Edit ${segmentType}`,
+        onAction: this.handleSaveEditSegment,
+        onCancel: this.handleCancelEditSegment,
+        size: "large"
+      },
+      R(SegmentDesignerComponent, {
+        segment: this.state.editSegment,
+        table: this.props.design.table,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        segmentType,
+        onChange: (segment: any) => this.setState({ editSegment: segment }),
+        filters: this.props.filters
+      })
+    )
+  }
+
+  renderEditIntersectionModal() {
+    if (!this.state.editIntersectionId) {
+      return
+    }
+
+    return R(
+      ActionCancelModalComponent,
+      {
+        title: "Edit Value",
+        onAction: this.handleSaveEditIntersection,
+        onCancel: this.handleCancelEditIntersection,
+        size: "large"
+      },
+      R(IntersectionDesignerComponent, {
+        intersection: this.state.editIntersection,
+        table: this.props.design.table,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onChange: (intersection: any) => this.setState({ editIntersection: intersection }),
+        filters: this.props.filters
+      })
+    )
+  }
+
+  render() {
+    const layout = new PivotChartLayoutBuilder({ schema: this.props.schema }).buildLayout(
+      this.props.design,
+      this.props.data,
+      this.context.locale
+    )
+
+    return R(
+      "div",
+      { style: { width: this.props.width, height: this.props.height } },
+      this.renderHeader(),
+      this.renderEditSegmentModal(),
+      this.renderEditIntersectionModal(),
+      R(
+        "div",
+        { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } }, // Allow table to scroll since tables have hard minimum widths, Leave room for gear menu
+        R(PivotChartLayoutComponent, {
+          layout,
+          editable: this.props.onDesignChange != null,
+          onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined,
+          onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined,
+          onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined,
+          onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined,
+          onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined,
+          onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined
+        })
+      ),
+
+      this.renderFooter()
+    )
+  }
+}

package/src/widgets/charts/pivot/README.md

@@ -0,0 +1,30 @@
+# Pivot Chart
+
+The pivot chart (pivot table) allows building of a complex pivot table with nested rows and columns.
+
+## Terminology
+
+### Segment
+
+Segments are the building block of pivot tables. Each is either on the row or column axis. They represent one expression (enum/text) that
+is analyzed.
+
+Segments can be nested to allow sub-division and are ordered.
+
+### Intersection
+
+These compose the data area of the table. There is an intersection for each possible combination that makes sense of segments that form
+a rectangle. An intersection is id-ed by "rowid:columnid" or "rowid,rowid:columnid,columnid" etc. depending on its component ids.
+
+### Section
+
+Either a segment or intersection or blank area. Always a rectangle. Id is like intersection id if intersection, id of segment if segment
+
+## Rendering
+
+Rendering a pivot chart is first done by getting the data for each intersection (see PivotChartQueryBuilder).
+
+The data results from the queries is a lookup of intersection id to array of rows ([{ value: , r0: , c0: ,... }, ...])
+
+The data and design together are passed to the PivotChartLayoutBuilder which converts it into a layout which is
+the list of rows and cells.

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

@@ -0,0 +1,353 @@
+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 AxisComponent from "../../../axes/AxisComponent"
+import ColorComponent from "../../../ColorComponent"
+import { ExprComponent } from "@mwater/expressions-ui"
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { Radio } from "@mwater/react-library/lib/bootstrap"
+import { DataSource, Schema } from "@mwater/expressions"
+import { AxisBuilder } from "../../.."
+import { PivotChartSegment } from "./PivotChartDesign"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+
+export interface SegmentDesignerComponentProps {
+  segment: PivotChartSegment
+  table: string
+  schema: Schema
+  dataSource: DataSource
+  /** "row" or "column" */
+  segmentType: "row" | "column"
+  onChange: any
+  filters?: any
+}
+
+interface SegmentDesignerComponentState {
+  mode: any
+}
+
+// Design a single segment of a pivot table
+export default class SegmentDesignerComponent extends React.Component<
+  SegmentDesignerComponentProps,
+  SegmentDesignerComponentState
+> {
+  labelElem: HTMLInputElement | null
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      // Mode switcher to make UI clearer
+      mode:
+        props.segment.label == null && !props.segment.valueAxis ? null : props.segment.valueAxis ? "multiple" : "single"
+    }
+  }
+
+  componentDidMount() {
+    return this.labelElem?.focus()
+  }
+
+  // Updates segment with the specified changes
+  update(changes: any) {
+    const segment = _.extend({}, this.props.segment, changes)
+    return this.props.onChange(segment)
+  }
+
+  handleMode = (mode: any) => {
+    this.update({ valueAxis: null })
+    return this.setState({ mode })
+  }
+
+  handleValueAxisChange = (valueAxis: any) => {
+    return this.update({ valueAxis })
+  }
+
+  handleValueAxisOnlyValuesPresentChange = (valueAxisOnlyValuesPresent: boolean) => {
+    return this.update({ valueAxisOnlyValuesPresent })
+  }
+
+  handleLabelChange = (ev: any) => {
+    return this.update({ label: ev.target.value })
+  }
+
+  handleFilterChange = (filter: any) => {
+    return this.update({ filter })
+  }
+
+  handleOrderExprChange = (orderExpr: any) => {
+    return this.update({ orderExpr })
+  }
+
+  handleOrderDirChange = (orderDir: any) => {
+    return this.update({ orderDir })
+  }
+
+  renderMode() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Type"
+      },
+      <ui.Radio key="single" value={this.state.mode} radioValue={"single"} onChange={this.handleMode}>
+        {`Single ${this.props.segmentType}`}
+        <span className="text-muted">
+          {` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
+        </span>
+      </ui.Radio>,
+
+      <ui.Radio key="multiple" value={this.state.mode} radioValue={"multiple"} onChange={this.handleMode}>
+        {`Multiple ${this.props.segmentType}s`}
+        <span className="text-muted">{` - disaggregate data by a field`}</span>
+      </ui.Radio>
+    )
+  }
+
+  renderLabel() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Label",
+        help: this.state.mode === "multiple" ? `Optional label for the ${this.props.segmentType}s` : undefined
+      },
+      R("input", {
+        ref: (elem: HTMLInputElement | null) => {
+          this.labelElem = elem
+        },
+        type: "text",
+        className: "form-control",
+        value: this.props.segment.label || "",
+        onChange: this.handleLabelChange
+      })
+    )
+  }
+
+  renderValueAxis() {
+    // Get type of axis
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+
+    const axisType = axisBuilder.getAxisType(this.props.segment.valueAxis)
+    const allowValueAxisOnlyValuesPresent = axisType == "enum" || axisType == "enumset" || axisType == "date"
+
+    return <ui.FormGroup labelMuted label="Field" help="Field to disaggregate data by">
+      <div style={{ marginLeft: 8 }}>
+        {
+          R(AxisComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.table,
+            types: ["enum", "enumset", "text", "boolean", "date"],
+            aggrNeed: "none",
+            value: this.props.segment.valueAxis,
+            onChange: this.handleValueAxisChange,
+            allowExcludedValues: true,
+            filters: this.props.filters,
+            collapseCategories: true
+          })
+        }
+        { allowValueAxisOnlyValuesPresent ?
+          <ui.Checkbox
+            value={this.props.segment.valueAxisOnlyValuesPresent}
+            onChange={this.handleValueAxisOnlyValuesPresentChange}
+          >
+            Only show values actually present&nbsp;
+            <PopoverHelpComponent placement="bottom">
+              Limits values to those that are present in the data, as opposed
+              to all choices or all dates within range
+            </PopoverHelpComponent>
+          </ui.Checkbox>
+        : null }
+      </div>
+    </ui.FormGroup>
+  }
+
+  renderFilter() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"],
+        hint: `Filters all data associated with this ${this.props.segmentType}`
+      },
+      R(FilterExprComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onChange: this.handleFilterChange,
+        table: this.props.table,
+        value: this.props.segment.filter
+      })
+    )
+  }
+
+  renderStyling() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Styling"
+      },
+      <div>
+        <ui.Checkbox
+          key="bold"
+          inline
+          value={this.props.segment.bold === true}
+          onChange={(value) => this.update({ bold: value })}
+        >
+          Bold
+        </ui.Checkbox>
+        <ui.Checkbox
+          key="italic"
+          inline
+          value={this.props.segment.italic === true}
+          onChange={(value) => this.update({ italic: value })}
+        >
+          Italic
+        </ui.Checkbox>
+        { this.props.segment.valueAxis && this.props.segment.label ? 
+        <ui.Checkbox
+          key="valueLabelBold"
+          inline
+          value={this.props.segment.valueLabelBold === true}
+          onChange={(value) => this.update({ valueLabelBold: value })}
+        >
+          Header Bold
+        </ui.Checkbox>
+        : undefined}
+        {this.props.segment.valueAxis && this.props.segment.label
+          ? R(
+              "div",
+              { style: { paddingTop: 5 } },
+              "Shade filler cells: ",
+              R(ColorComponent, {
+                color: this.props.segment.fillerColor,
+                onChange: (color: any) => this.update({ fillerColor: color })
+              })
+            )
+          : undefined}
+      </div>
+    )
+  }
+
+  renderBorders() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: "Borders"
+      },
+      R("div", { key: "before" }, this.props.segmentType === "row" ? "Top: " : "Left: "),
+      R(BorderComponent, {
+        value: this.props.segment.borderBefore,
+        defaultValue: 2,
+        onChange: (value: any) => this.update({ borderBefore: value })
+      }),
+      R("div", { key: "within" }, "Within: "),
+      R(BorderComponent, {
+        value: this.props.segment.borderWithin,
+        defaultValue: 1,
+        onChange: (value: any) => this.update({ borderWithin: value })
+      }),
+      R("div", { key: "after" }, this.props.segmentType === "row" ? "Bottom: " : "Right: "),
+      R(BorderComponent, {
+        value: this.props.segment.borderAfter,
+        defaultValue: 2,
+        onChange: (value: any) => this.update({ borderAfter: value })
+      })
+    )
+  }
+
+  renderOrderExpr() {
+    return R(
+      ui.FormGroup,
+      {
+        labelMuted: true,
+        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " Sort"],
+        hint: `Sorts the display of this ${this.props.segmentType}`
+      },
+      R(ExprComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onChange: this.handleOrderExprChange,
+        table: this.props.table,
+        types: ["enum", "text", "boolean", "date", "datetime", "number"],
+        aggrStatuses: ["aggregate"],
+        value: this.props.segment.orderExpr ?? null
+      }),
+
+      this.props.segment.orderExpr
+        ? R(
+            "div",
+            null,
+            R(
+              ui.Radio,
+              {
+                value: this.props.segment.orderDir || "asc",
+                radioValue: "asc",
+                onChange: this.handleOrderDirChange,
+                inline: true
+              },
+              "Ascending"
+            ),
+            R(
+              ui.Radio,
+              {
+                value: this.props.segment.orderDir || "asc",
+                radioValue: "desc",
+                onChange: this.handleOrderDirChange,
+                inline: true
+              },
+              "Descending"
+            )
+          )
+        : undefined
+    )
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      this.renderMode(),
+      this.state.mode ? this.renderLabel() : undefined,
+      this.state.mode === "multiple" ? this.renderValueAxis() : undefined,
+      this.state.mode ? this.renderFilter() : undefined,
+      this.state.mode === "multiple" ? this.renderOrderExpr() : undefined,
+      this.state.mode ? this.renderStyling() : undefined,
+      this.state.mode ? this.renderBorders() : undefined
+    )
+  }
+}
+
+interface BorderComponentProps {
+  value?: number
+  defaultValue?: number
+  onChange: any
+}
+
+// Allows setting border heaviness
+class BorderComponent extends React.Component<BorderComponentProps> {
+  render() {
+    const value = this.props.value != null ? this.props.value : this.props.defaultValue
+
+    return R(
+      "span",
+      null,
+      <Radio inline value={value} radioValue={0} onChange={() => this.props.onChange(0)}>
+        None
+      </Radio>,
+      <Radio inline value={value} radioValue={1} onChange={() => this.props.onChange(1)}>
+        Light
+      </Radio>,
+      <Radio inline value={value} radioValue={2} onChange={() => this.props.onChange(2)}>
+        Medium
+      </Radio>,
+      <Radio inline value={value} radioValue={3} onChange={() => this.props.onChange(3)}>
+        Heavy
+      </Radio>
+    )
+  }
+}