@mwater/visualization 5.2.0 → 5.3.0

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

@@ -1,7 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-import async from "async"
 import uuid from "uuid"
 import { default as produce } from "immer"
 import { original } from "immer"
@@ -36,9 +34,12 @@ export default class PivotChart extends Chart {
       draft.rows = design.rows || []
       draft.columns = design.columns || []
       draft.intersections = design.intersections || {}
-      draft.header = design.header || { style: "footer", items: [] }
+      draft.header = design.header || { style: "header", items: [] }
       draft.footer = design.footer || { style: "footer", items: [] }
 
+      // Fix style of header
+      draft.header.style = "header"
+
       if (design.table) {
         // Add default row and column
         let intersectionId, segment
@@ -93,10 +94,12 @@ export default class PivotChart extends Chart {
         // Clean all intersections
         for (intersectionId in draft.intersections) {
           const intersection = draft.intersections[intersectionId]
+          const intersectionTable = intersection.tableOverride || design.table
+
           if (intersection.valueAxis) {
             intersection.valueAxis = axisBuilder.cleanAxis({
               axis: intersection.valueAxis ? original(intersection.valueAxis) : null,
-              table: design.table,
+              table: intersectionTable,
               aggrNeed: "required",
               types: ["enum", "text", "boolean", "date", "number"]
             })
@@ -105,7 +108,7 @@ export default class PivotChart extends Chart {
           if (intersection.backgroundColorAxis) {
             intersection.backgroundColorAxis = axisBuilder.cleanAxis({
               axis: intersection.backgroundColorAxis ? original(intersection.backgroundColorAxis) : null,
-              table: design.table,
+              table: intersectionTable,
               aggrNeed: "required",
               types: ["enum", "text", "boolean", "date"]
             })
@@ -117,7 +120,7 @@ export default class PivotChart extends Chart {
 
           for (const colorCondition of intersection.backgroundColorConditions || []) {
             colorCondition.condition = exprCleaner.cleanExpr(colorCondition.condition ? original(colorCondition.condition)! : null, {
-              table: design.table,
+              table: intersectionTable,
               types: ["boolean"],
               aggrStatuses: ["aggregate", "literal"]
             })
@@ -125,10 +128,44 @@ export default class PivotChart extends Chart {
 
           if (intersection.filter) {
             intersection.filter = exprCleaner.cleanExpr(intersection.filter ? original(intersection.filter)! : null, {
-              table: design.table,
+              table: intersectionTable,
               types: ["boolean"]
             })
           }
+
+          if (intersection.tableOverride) {
+            const allSegments = PivotChartUtils.getAllSegments(design.rows).concat(PivotChartUtils.getAllSegments(design.columns))
+
+            // Clean segment value axis overrides
+            intersection.segmentValueAxisOverrides = intersection.segmentValueAxisOverrides || {}
+            for (const segmentId of Object.keys(intersection.segmentValueAxisOverrides)) {
+              // Find segment
+              const segment = allSegments.find((s: PivotChartSegment) => s.id === segmentId)
+              if (!segment || !segment.valueAxis) {
+                delete intersection.segmentValueAxisOverrides[segmentId]
+                continue
+              }
+
+              // Get type of the segment
+              const segmentValueAxisType = axisBuilder.getAxisType(segment.valueAxis!)!
+
+              intersection.segmentValueAxisOverrides[segmentId] = axisBuilder.cleanAxis({
+                axis: intersection.segmentValueAxisOverrides[segmentId] ? original(intersection.segmentValueAxisOverrides[segmentId]) : null,
+                table: intersectionTable,
+                aggrNeed: "none",
+                types: [segmentValueAxisType]
+              })
+            }
+
+            // Determine all required segment overrides
+            const intersectingSegmentIds = intersectionId.split(/[,:]/).filter(id => id !== "")
+            const intersectingSegments = allSegments.filter(segment => intersectingSegmentIds.includes(segment.id) && segment.valueAxis)
+        
+            intersection.segmentValueAxisOverridesComplete = intersectingSegments.every(segment => intersection.segmentValueAxisOverrides![segment.id])
+          }
+          else {
+            delete intersection.segmentValueAxisOverridesComplete
+          }
         }
 
         // Get all intersection ids
@@ -201,6 +238,12 @@ export default class PivotChart extends Chart {
       if (intersection.valueAxis) {
         error = error || axisBuilder.validateAxis({ axis: intersection.valueAxis })
       }
+
+      if (intersection.segmentValueAxisOverrides) {
+        for (const segmentId of Object.keys(intersection.segmentValueAxisOverrides)) {
+          error = error || axisBuilder.validateAxis({ axis: intersection.segmentValueAxisOverrides[segmentId] })
+        }
+      }
     }
 
     return error
@@ -314,17 +357,12 @@ export default class PivotChart extends Chart {
     }
   }
 
-  // Create a view element for the chart
-  // Options include:
-  //   schema: schema to use
-  //   dataSource: dataSource to use
-  //   design: design of the chart
-  //   onDesignChange: when design changes
-  //   data: results from queries
-  //   width, height: size of the chart view
-  //   scope: current scope of the view element
-  //   onScopeChange: called when scope changes with new scope
-  //   filters: array of filters
+  /**
+   * Create a view element for the chart
+   * 
+   * @param options - Options for the view element
+   * @returns - React element
+   */
   createViewElement(options: ChartCreateViewElementOptions) {
     const PivotChartViewComponent = require("./PivotChartViewComponent").default
 

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

@@ -112,4 +112,16 @@ export interface PivotChartIntersection {
 
   /** true if italic */
   italic?: boolean
+
+  /** Overrides table */
+  tableOverride?: string
+
+  /** If table is overridden, each related segment needs to have its valueAxis overridden */
+  segmentValueAxisOverrides?: { [id: string]: Axis | null }
+
+  /** Set true when overrides are all present. If false and tableOverride is not null, then intersection cannot be rendered.
+   * This is set by cleanDesign. If some are missing, the design is still valid, but the intersection will not be queried
+   * and the intersection will be shaded red in design mode.
+   */
+  segmentValueAxisOverridesComplete?: boolean
 }

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

@@ -8,6 +8,7 @@ import { FilterExprComponent } from "@mwater/expressions-ui"
 import { TableSelectComponent } from "@mwater/expressions-ui"
 import AxisComponent from "../../../axes/AxisComponent"
 import { DataSource, Schema } from "@mwater/expressions"
+import { PivotChartIntersection } from "./PivotChartDesign"
 
 export interface PivotChartDesignerComponentProps {
   design: any
@@ -45,10 +46,10 @@ export default class PivotChartDesignerComponent extends React.Component<
     const row = { id: uuid(), label: "" }
     const column = { id: uuid(), label: "" }
 
-    const intersections = {}
+    const intersections: { [key: string]: PivotChartIntersection } = {}
     intersections[`${row.id}:${column.id}`] = { valueAxis: { expr: { type: "op", op: "count", table, exprs: [] } } }
 
-    return this.updateDesign({
+    this.updateDesign({
       table,
       rows: [row],
       columns: [column],
@@ -71,7 +72,7 @@ export default class PivotChartDesignerComponent extends React.Component<
   handleIntersectionValueAxisChange = (valueAxis: any) => {
     const intersectionId = `${this.props.design.rows[0].id}:${this.props.design.columns[0].id}`
 
-    const intersections = {}
+    const intersections: { [key: string]: PivotChartIntersection } = {}
     intersections[intersectionId] = { valueAxis }
     return this.updateDesign({ intersections })
   }

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

@@ -118,7 +118,7 @@ export default class PivotChartLayoutBuilder {
     for (let row of rows) {
       // Emit special row header for any segments that have changed and have both axis and label
       const needsSpecialRowHeader = []
-      for (let depth = 0; depth < rowsDepth; depth++) {      
+      for (let depth = 0; depth < rowsDepth; depth++) {
         if (
           row[depth] &&
           rowSegments[depth] !== row[depth].segment &&
@@ -210,7 +210,7 @@ export default class PivotChartLayoutBuilder {
 
     // Set up section top/left/bottom/right info
     for (let columnIndex = 0; columnIndex < layout.rows[0].cells.length; columnIndex++) {
-      for (let rowIndex = 0; rowIndex < layout.rows.length; rowIndex++) {    
+      for (let rowIndex = 0; rowIndex < layout.rows.length; rowIndex++) {
         cell = layout.rows[rowIndex].cells[columnIndex]
 
         cell.sectionTop =
@@ -349,10 +349,10 @@ export default class PivotChartLayoutBuilder {
   // from getRowsOrColumns
   // dataIndexed is created above. See there for format
   buildIntersectionCell(
-    design: PivotChartDesign, 
-    dataIndexed: any, 
-    locale: string, 
-    row: { segment: PivotChartSegment, label: string, value: any }[], 
+    design: PivotChartDesign,
+    dataIndexed: any,
+    locale: string,
+    row: { segment: PivotChartSegment, label: string, value: any }[],
     column: { segment: PivotChartSegment, label: string, value: any }[]) {
 
     // Get intersection id
@@ -420,7 +420,12 @@ export default class PivotChartLayoutBuilder {
     }
 
     if (!backgroundColor && intersection.backgroundColor && !intersection.backgroundColorAxis) {
-      ;({ backgroundColor } = intersection)
+      ; ({ backgroundColor } = intersection)
+    }
+
+    // Override to light red if segment value axis overrides are incomplete
+    if (intersection.tableOverride && !intersection.segmentValueAxisOverridesComplete) {
+      backgroundColor = "#FFCDCD"
     }
 
     if (backgroundColor) {
@@ -433,29 +438,20 @@ export default class PivotChartLayoutBuilder {
 
   // Determine summarize value for unconfigured cells
   setupSummarize(design: any, layout: any) {
-    return __range__(0, layout.rows[0].cells.length, false).map((columnIndex) =>
-      (() => {
-        const result = []
-        for (
-          let rowIndex = 0, end = layout.rows.length, asc = 0 <= end;
-          asc ? rowIndex < end : rowIndex > end;
-          asc ? rowIndex++ : rowIndex--
-        ) {
-          const cell = layout.rows[rowIndex].cells[columnIndex]
+    for (let columnIndex = 0; columnIndex < layout.rows[0].cells.length; columnIndex++) {
+      for (let rowIndex = 0; rowIndex < layout.rows.length; rowIndex++) {
+        const cell = layout.rows[rowIndex].cells[columnIndex]
 
-          if (cell.unconfigured && cell.type === "row") {
-            cell.summarize = PivotChartUtils.canSummarizeSegment(design.rows, cell.section)
-          }
+        if (cell.unconfigured && cell.type === "row") {
+          cell.summarize = PivotChartUtils.canSummarizeSegment(design.rows, cell.section)
+        }
 
-          if (cell.unconfigured && cell.type === "column") {
-            result.push((cell.summarize = PivotChartUtils.canSummarizeSegment(design.columns, cell.section)))
-          } else {
-            result.push(undefined)
-          }
+        if (cell.unconfigured && cell.type === "column") {
+          cell.summarize = PivotChartUtils.canSummarizeSegment(design.columns, cell.section)
         }
-        return result
-      })()
-    )
+      }
+
+    }
   }
 
   // Determine borders, mutating cells
@@ -463,7 +459,6 @@ export default class PivotChartLayoutBuilder {
     // Set up borders for row and column cells
     let cell, columnIndex, rowIndex
     let asc, end
-    let asc2, end2
     const borderTops: any = [] // Array of border top information for intersections. index is layout row number
     const borderBottoms: any = [] // Array of border bottom information for intersections. index is layout row number
     const borderLefts: any = [] // Array of border left information for intersections. index is layout column number
@@ -584,17 +579,8 @@ export default class PivotChartLayoutBuilder {
     }
 
     // Propagate borders across row cells and down column cells so that heavier border win
-    for (
-      columnIndex = 1, end2 = layout.rows[0].cells.length, asc2 = 1 <= end2;
-      asc2 ? columnIndex < end2 : columnIndex > end2;
-      asc2 ? columnIndex++ : columnIndex--
-    ) {
-      var asc3, end3
-      for (
-        rowIndex = 1, end3 = layout.rows.length, asc3 = 1 <= end3;
-        asc3 ? rowIndex < end3 : rowIndex > end3;
-        asc3 ? rowIndex++ : rowIndex--
-      ) {
+    for (let columnIndex = 1; columnIndex < layout.rows[0].cells.length; columnIndex++) {
+      for (let rowIndex = 1; rowIndex < layout.rows.length; rowIndex++) {
         cell = layout.rows[rowIndex].cells[columnIndex]
 
         if (cell.type === "row") {
@@ -610,41 +596,19 @@ export default class PivotChartLayoutBuilder {
     }
 
     // Setup borders of intersections
-    return (() => {
-      let asc4, end4
-      const result = []
-      for (
-        columnIndex = 0, end4 = layout.rows[0].cells.length, asc4 = 0 <= end4;
-        asc4 ? columnIndex < end4 : columnIndex > end4;
-        asc4 ? columnIndex++ : columnIndex--
-      ) {
-        result.push(
-          (() => {
-            let asc5, end5
-            const result1 = []
-            for (
-              rowIndex = 0, end5 = layout.rows.length, asc5 = 0 <= end5;
-              asc5 ? rowIndex < end5 : rowIndex > end5;
-              asc5 ? rowIndex++ : rowIndex--
-            ) {
-              cell = layout.rows[rowIndex].cells[columnIndex]
-
-              if (cell.type === "intersection") {
-                cell.borderLeft = borderLefts[columnIndex]
-                cell.borderRight = borderRights[columnIndex]
-
-                cell.borderTop = borderTops[rowIndex]
-                result1.push((cell.borderBottom = borderBottoms[rowIndex]))
-              } else {
-                result1.push(undefined)
-              }
-            }
-            return result1
-          })()
-        )
+    for (let columnIndex = 0; columnIndex < layout.rows[0].cells.length; columnIndex++) {
+      for (let rowIndex = 0; rowIndex < layout.rows.length; rowIndex++) {
+        cell = layout.rows[rowIndex].cells[columnIndex]
+
+        if (cell.type === "intersection") {
+          cell.borderLeft = borderLefts[columnIndex]
+          cell.borderRight = borderRights[columnIndex]
+
+          cell.borderTop = borderTops[rowIndex]
+          cell.borderBottom = borderBottoms[rowIndex]
+        }
       }
-      return result
-    })()
+    }
   }
 
   // Get rows or columns in format of array of
@@ -652,8 +616,7 @@ export default class PivotChartLayoutBuilder {
   // For segments with no children, there will be an array of single value array entries (array of array)
   // data is lookup of query results by intersection id
   // parentSegments are ancestry of current segment, starting with root
-  getRowsOrColumns(isRow: boolean, segment: PivotChartSegment, data: { [intersectionId: string]: any[] }, locale: string, parentSegments: PivotChartSegment[] = [], parentValues: any[] = []): 
-    { segment: PivotChartSegment, label: string, value: any }[][] {
+  getRowsOrColumns(isRow: boolean, segment: PivotChartSegment, data: { [intersectionId: string]: any[] }, locale: string, parentSegments: PivotChartSegment[] = [], parentValues: any[] = []): { segment: PivotChartSegment, label: string, value: any }[][] {
     // If no axis, categories are just null
     let categories, value
     if (!segment.valueAxis) {
@@ -710,7 +673,7 @@ export default class PivotChartLayoutBuilder {
 
       // Get categories, mapping label
       categories = _.map(this.axisBuilder.getCategories(segment.valueAxis, allValues, { locale, onlyValuesPresent: segment.valueAxisOnlyValuesPresent }), (category) => {
-        return { value: category.value, label: this.axisBuilder.formatCategory(segment.valueAxis, category) }
+        return { value: category.value, label: this.axisBuilder.formatCategory(segment.valueAxis!, category) }
       })
 
       // Filter excluded values

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

@@ -287,7 +287,6 @@ position: relative;
 .pivot-chart-table .cell {
 padding: 5px;
 vertical-align: top;
-background-color: white;
 }
 
 .pivot-chart-table .bt1 { border-top: solid 1px #f4f4f4 }