@mwater/visualization 5.2.0 → 5.3.0

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

@@ -4,7 +4,7 @@ import { ExprUtils } from "@mwater/expressions"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import { injectTableAlias } from "@mwater/expressions"
 import * as PivotChartUtils from "./PivotChartUtils"
-import { PivotChartDesign } from "./PivotChartDesign"
+import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign"
 import { JsonQLFilter } from "../../../JsonQLFilter"
 import { JsonQLExpr, JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql"
 import { Axis } from "../../../axes/Axis"
@@ -40,7 +40,6 @@ export default class PivotChartQueryBuilder {
   // extraFilters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. }
   // Queries are indexed by intersection id, as one query is made for each intersection
   createQueries(design: PivotChartDesign, extraFilters: JsonQLFilter[]) {
-    let filter, intersectionId, relevantFilters, whereClauses
     const exprCompiler = new ExprCompiler(this.schema)
 
     const queries: { [intersectionId: string]: JsonQLQuery } = {}
@@ -48,226 +47,268 @@ export default class PivotChartQueryBuilder {
     // For each intersection
     for (let rowPath of PivotChartUtils.getSegmentPaths(design.rows)) {
       for (let columnPath of PivotChartUtils.getSegmentPaths(design.columns)) {
-        // Get id of intersection
-        var i
-        intersectionId = PivotChartUtils.getIntersectionId(rowPath, columnPath)
-
-        // Get intersection
-        const intersection = design.intersections[intersectionId]
-
-        // Create shell of query
-        const query: JsonQLSelectQuery = {
-          type: "query",
-          selects: [],
-          from: exprCompiler.compileTable(design.table, "main"),
-          limit: 10000,
-          groupBy: []
+        const query = this.createIntersectionQuery(design, rowPath, columnPath, extraFilters)
+        if (query) {
+          queries[PivotChartUtils.getIntersectionId(rowPath, columnPath)] = query
         }
+      }
+    }
 
-        // Filters to add (not yet compiled)
-        const filters = []
+    // For each segment
+    const segments = PivotChartUtils.getAllSegments(design.rows).concat(PivotChartUtils.getAllSegments(design.columns))
+    for (const segment of segments) {
+      if (segment.orderExpr) {
+        const query = this.createSegmentOrderQuery(design, segment, extraFilters)
+        if (query) {
+          queries[segment.id] = query
+        }
+      }
+    }
 
-        const compileSegmentAxis = (axis: Axis | null | undefined): JsonQLExpr => {
-          // Get axis type
-          const axisType = this.axisBuilder.getAxisType(axis)
+    return queries
+  }
 
-          // Enumset needs to be unwrapped
-          if (axisType === "enumset") {
-            // Use to_jsonb(x) to convert to jsonb then jsonb_array_elements_text to convert to unnested array
-            return {
-              type: "op",
-              op: "jsonb_array_elements_text",
-              exprs: [
-                {
-                  type: "op",
-                  op: "to_jsonb",
-                  exprs: [this.axisBuilder.compileAxis({ axis, tableAlias: "main" })]
-                }
-              ]
-            }
-          } else {
-            return this.axisBuilder.compileAxis({ axis, tableAlias: "main" })
-          }
-        }
+  /**
+   * Create a query for an intersection. Query has columns:
+   *  value: value of the cell (aggregate)
+   *  r0: row segment value (if present)
+   *  r1: inner row segment value (if present)
+   *  ...
+   *  c0: column segment value (if present)
+   *  c1: inner column segment value (if present)
+   *  ...
+   *  bc: background color of the cell (if present)
+   *  bcc0: background color condition 0 of the cell (if present)
+   *  bcc1: background color condition 1 of the cell (if present)
+   *  ...
+   * @param design - Design of the chart
+   * @param rowPath - Row path
+   * @param columnPath - Column path
+   * @param extraFilters - Extra filters
+   * @returns Query for the intersection
+   */
+  createIntersectionQuery(design: PivotChartDesign, rowPath: PivotChartSegment[], columnPath: PivotChartSegment[], extraFilters: JsonQLFilter[]) {
+    const exprCompiler = new ExprCompiler(this.schema)
 
-        // Add segments
-        for (i = 0; i < rowPath.length; i++) {
-          const rowSegment = rowPath[i]
-          query.selects.push({
-            type: "select",
-            expr: compileSegmentAxis(rowSegment.valueAxis),
-            alias: `r${i}`
-          })
-          query.groupBy!.push(i + 1)
-          if (rowSegment.filter) {
-            filters.push(rowSegment.filter)
-          }
-        }
+    // Get id of intersection
+    const intersectionId = PivotChartUtils.getIntersectionId(rowPath, columnPath)
 
-        for (i = 0; i < columnPath.length; i++) {
-          const columnSegment = columnPath[i]
-          query.selects.push({
-            type: "select",
-            expr: compileSegmentAxis(columnSegment.valueAxis),
-            alias: `c${i}`
-          })
-          query.groupBy!.push(i + 1 + rowPath.length)
-          if (columnSegment.filter) {
-            filters.push(columnSegment.filter)
-          }
-        }
+    // Get intersection
+    const intersection = design.intersections[intersectionId]
 
-        // Add value
-        query.selects.push({
-          type: "select",
-          expr: this.axisBuilder.compileAxis({ axis: intersection?.valueAxis, tableAlias: "main" }),
-          alias: "value"
-        })
-        if (intersection?.filter) {
-          filters.push(intersection.filter)
-        }
+    // Get intersection table
+    const intersectionTable = intersection.tableOverride || design.table
 
-        // Add background color
-        if (intersection?.backgroundColorAxis) {
-          query.selects.push({
-            type: "select",
-            expr: this.axisBuilder.compileAxis({ axis: intersection?.backgroundColorAxis, tableAlias: "main" }),
-            alias: "bc"
-          })
-        }
+    // Create shell of query
+    const query: JsonQLSelectQuery = {
+      type: "query",
+      selects: [],
+      from: exprCompiler.compileTable(intersectionTable, "main"),
+      limit: 10000,
+      groupBy: []
+    }
 
-        // Add background color conditions
-        const iterable = intersection.backgroundColorConditions || []
-        for (i = 0; i < iterable.length; i++) {
-          const backgroundColorCondition = iterable[i]
-          query.selects.push({
-            type: "select",
-            expr: exprCompiler.compileExpr({ expr: backgroundColorCondition.condition ?? null, tableAlias: "main" }),
-            alias: `bcc${i}`
-          })
-        }
+    // Filters to add (not yet compiled)
+    const filters = []
 
-        // If all selects are null, don't create query
-        if (_.all(query.selects, (select) => select.expr == null)) {
-          continue
-        }
+    const compileSegmentAxis = (segment: PivotChartSegment): JsonQLExpr => {
+      // Get axis type
+      const axisType = this.axisBuilder.getAxisType(segment.valueAxis!)
 
-        // Add where
-        whereClauses = []
-        if (design.filter) {
-          whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
+      // Get axis (which can be overridden)
+      const axis = intersection.tableOverride ? (intersection.segmentValueAxisOverrides || {})[segment.id] : segment.valueAxis
+
+      // Enumset needs to be unwrapped
+      if (axisType === "enumset") {
+        // Use to_jsonb(x) to convert to jsonb then jsonb_array_elements_text to convert to unnested array
+        return {
+          type: "op",
+          op: "jsonb_array_elements_text",
+          exprs: [
+            {
+              type: "op",
+              op: "to_jsonb",
+              exprs: [this.axisBuilder.compileAxis({ axis, tableAlias: "main" })]
+            }
+          ]
         }
+      } else {
+        return this.axisBuilder.compileAxis({ axis, tableAlias: "main" })
+      }
+    }
+    
+    // Add segments
+    for (let i = 0; i < rowPath.length; i++) {
+      const rowSegment = rowPath[i]
+      query.selects.push({
+        type: "select",
+        expr: compileSegmentAxis(rowSegment),
+        alias: `r${i}`
+      })
+      query.groupBy!.push(i + 1)
+      if (rowSegment.filter) {
+        filters.push(rowSegment.filter)
+      }
+    }
 
-        // Add other filters
-        whereClauses = whereClauses.concat(
-          _.map(filters, (filter) => exprCompiler.compileExpr({ expr: filter, tableAlias: "main" }))
-        )
+    for (let i = 0; i < columnPath.length; i++) {
+      const columnSegment = columnPath[i]
+      query.selects.push({
+        type: "select",
+        expr: compileSegmentAxis(columnSegment),
+        alias: `c${i}`
+      })
+      query.groupBy!.push(i + 1 + rowPath.length)
+      if (columnSegment.filter) {
+        filters.push(columnSegment.filter)
+      }
+    }
 
-        // Add filters
-        if (extraFilters && extraFilters.length > 0) {
-          // Get relevant filters
-          relevantFilters = _.where(extraFilters, { table: design.table })
+    // Add value
+    query.selects.push({
+      type: "select",
+      expr: this.axisBuilder.compileAxis({ axis: intersection?.valueAxis, tableAlias: "main" }),
+      alias: "value"
+    })
+    if (intersection?.filter) {
+      filters.push(intersection.filter)
+    }
 
-          // Add filters
-          for (filter of relevantFilters) {
-            whereClauses.push(injectTableAlias(filter.jsonql, "main"))
-          }
-        }
+    // Add background color
+    if (intersection?.backgroundColorAxis) {
+      query.selects.push({
+        type: "select",
+        expr: this.axisBuilder.compileAxis({ axis: intersection?.backgroundColorAxis, tableAlias: "main" }),
+        alias: "bc"
+      })
+    }
+
+    // Add background color conditions
+    const iterable = intersection.backgroundColorConditions || []
+    for (let i = 0; i < iterable.length; i++) {
+      const backgroundColorCondition = iterable[i]
+      query.selects.push({
+        type: "select",
+        expr: exprCompiler.compileExpr({ expr: backgroundColorCondition.condition ?? null, tableAlias: "main" }),
+        alias: `bcc${i}`
+      })
+    }
 
-        whereClauses = _.compact(whereClauses)
+    // If all selects are null, don't create query
+    if (_.all(query.selects, (select) => select.expr == null)) {
+      return null
+    }
 
-        if (whereClauses.length === 1) {
-          query.where = whereClauses[0]
-        } else if (whereClauses.length > 1) {
-          query.where = { type: "op", op: "and", exprs: whereClauses }
-        }
+    // Add where
+    let whereClauses = []
+    if (design.filter) {
+      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
+    }
+
+    // Add other filters
+    whereClauses = whereClauses.concat(
+      _.map(filters, (filter) => exprCompiler.compileExpr({ expr: filter, tableAlias: "main" }))
+    )
 
-        queries[intersectionId] = query
+    // Add filters
+    if (extraFilters && extraFilters.length > 0) {
+      // Get relevant filters
+      const relevantFilters = _.where(extraFilters, { table: intersection.tableOverride ?? design.table })
+
+      // Add filters
+      for (const filter of relevantFilters) {
+        whereClauses.push(injectTableAlias(filter.jsonql, "main"))
       }
     }
 
-    // For each segment
-    const segments = PivotChartUtils.getAllSegments(design.rows).concat(PivotChartUtils.getAllSegments(design.columns))
-    for (let segment of segments) {
-      if (segment.orderExpr) {
-        // Create where which includes the segments filter (if present) and the "or" of all intersections that are present
-        whereClauses = []
+    whereClauses = _.compact(whereClauses)
 
-        if (segment.filter) {
-          whereClauses.push(exprCompiler.compileExpr({ expr: segment.filter, tableAlias: "main" }))
-        }
+    if (whereClauses.length === 1) {
+      query.where = whereClauses[0]
+    } else if (whereClauses.length > 1) {
+      query.where = { type: "op", op: "and", exprs: whereClauses }
+    }
 
-        // Get all intersection filters
-        const intersectionFilters: Expr[] = []
-        for (intersectionId of _.keys(design.intersections)) {
-          if (intersectionId.includes(segment.id)) {
-            ;({ filter } = design.intersections[intersectionId])
-            if (filter) {
-              intersectionFilters.push(filter)
-            } else {
-              // If intersection has no filter, still needs to "or" with true
-              intersectionFilters.push({ type: "literal", valueType: "boolean", value: true })
-            }
-          }
-        }
+    return query
+  }
 
-        if (intersectionFilters.length > 0) {
-          whereClauses.push({
-            type: "op",
-            op: "or",
-            exprs: _.map(intersectionFilters, (filter) =>
-              exprCompiler.compileExpr({ expr: filter, tableAlias: "main" })
-            )
-          })
-        }
+  createSegmentOrderQuery(design: PivotChartDesign, segment: PivotChartSegment, extraFilters: JsonQLFilter[]) {
+    const exprCompiler = new ExprCompiler(this.schema)
 
-        if (design.filter) {
-          whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
-        }
+    // Create where which includes the segments filter (if present) and the "or" of all intersections that are present
+    let whereClauses = []
 
-        // Add extra filters
-        if (extraFilters && extraFilters.length > 0) {
-          // Get relevant filters
-          relevantFilters = _.where(extraFilters, { table: design.table })
+    if (segment.filter) {
+      whereClauses.push(exprCompiler.compileExpr({ expr: segment.filter, tableAlias: "main" }))
+    }
 
-          // Add filters
-          for (filter of relevantFilters) {
-            whereClauses.push(injectTableAlias(filter.jsonql, "main"))
-          }
+    // Get all intersection filters
+    const intersectionFilters: Expr[] = []
+    for (const intersectionId of _.keys(design.intersections)) {
+      if (intersectionId.includes(segment.id)) {
+        const { filter } = design.intersections[intersectionId]
+        if (filter) {
+          intersectionFilters.push(filter)
+        } else {
+          // If intersection has no filter, still needs to "or" with true
+          intersectionFilters.push({ type: "literal", valueType: "boolean", value: true })
         }
+      }
+    }
 
-        whereClauses = _.compact(whereClauses)
+    if (intersectionFilters.length > 0) {
+      whereClauses.push({
+        type: "op",
+        op: "or",
+        exprs: _.map(intersectionFilters, (filter) =>
+          exprCompiler.compileExpr({ expr: filter, tableAlias: "main" })
+        )
+      })
+    }
 
-        let where = null
-        if (whereClauses.length === 1) {
-          where = whereClauses[0]
-        } else if (whereClauses.length > 1) {
-          where = { type: "op", op: "and", exprs: whereClauses }
-        }
+    if (design.filter) {
+      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
+    }
 
-        // Create query to get ordering
-        queries[segment.id] = {
-          type: "query",
-          selects: [
-            {
-              type: "select",
-              expr: this.axisBuilder.compileAxis({ axis: segment.valueAxis!, tableAlias: "main" }),
-              alias: "value"
-            }
-          ],
-          from: exprCompiler.compileTable(design.table, "main"),
-          where,
-          groupBy: [1],
-          orderBy: [
-            {
-              expr: exprCompiler.compileExpr({ expr: segment.orderExpr, tableAlias: "main" }),
-              direction: segment.orderDir || "asc"
-            }
-          ]
-        }
+    // Add extra filters
+    if (extraFilters && extraFilters.length > 0) {
+      // Get relevant filters
+      const relevantFilters = _.where(extraFilters, { table: design.table })
+
+      // Add filters
+      for (const filter of relevantFilters) {
+        whereClauses.push(injectTableAlias(filter.jsonql, "main"))
       }
     }
 
-    return queries
+    whereClauses = _.compact(whereClauses)
+
+    let where = null
+    if (whereClauses.length === 1) {
+      where = whereClauses[0]
+    } else if (whereClauses.length > 1) {
+      where = { type: "op", op: "and", exprs: whereClauses }
+    }
+
+    // Create query to get ordering
+    return {
+      type: "query",
+      selects: [
+        {
+          type: "select",
+          expr: this.axisBuilder.compileAxis({ axis: segment.valueAxis!, tableAlias: "main" }),
+          alias: "value"
+        }
+      ],
+      from: exprCompiler.compileTable(design.table, "main"),
+      where,
+      groupBy: [1],
+      orderBy: [
+        {
+          expr: exprCompiler.compileExpr({ expr: segment.orderExpr!, tableAlias: "main" }),
+          direction: segment.orderDir || "asc"
+        }
+      ]
+    } as JsonQLSelectQuery
   }
 }

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

@@ -36,7 +36,7 @@ export function getAllSegments(segments: PivotChartSegment[]): PivotChartSegment
 }
 
 // Gets the id of the intersection of the two paths
-export function getIntersectionId(rowPath: any, columnPath: any) {
+export function getIntersectionId(rowPath: PivotChartSegment[], columnPath: PivotChartSegment[]) {
   return `${_.pluck(rowPath, "id").join(",")}:${_.pluck(columnPath, "id").join(",")}`
 }
 
@@ -45,7 +45,7 @@ export function findSegment(segments: PivotChartSegment[], id: any): PivotChartS
 }
 
 // Determine if can summarize segment (if segment before has a value axis and has no children)
-export function canSummarizeSegment(segments: any, id: any) {
+export function canSummarizeSegment(segments: PivotChartSegment[], id: string) {
   const prevSegment = findPreviousSegment(segments, id)
   if (prevSegment && prevSegment.valueAxis && !prevSegment.children?.[0]) {
     return true
@@ -117,7 +117,7 @@ export function summarizeSegment(design: PivotChartDesign, id: any, label: any)
         summaryIntersection = _.cloneDeep(prevIntersection)
 
         // Find new row path (since has no children, will be only one)
-        const summaryRowPath = _.find(getSegmentPaths(design.rows), (path) => path.includes(rowSegment))
+        const summaryRowPath = _.find(getSegmentPaths(design.rows), (path) => path.includes(rowSegment))!
         design.intersections[getIntersectionId(summaryRowPath, columnPath)] = summaryIntersection
       }
     }
@@ -142,7 +142,7 @@ export function summarizeSegment(design: PivotChartDesign, id: any, label: any)
         // Find new column path (since has no children, will be only one)
         const summaryColumnPath = _.find(getSegmentPaths(design.columns), (path) =>
           path.includes(columnSegment)
-        )
+        )!
         design.intersections[getIntersectionId(rowPath, summaryColumnPath)] = summaryIntersection
       }
     }