@mwater/visualization 5.2.0 → 5.3.0

package/lib/widgets/charts/pivot/PivotChartLayoutBuilder.js

@@ -381,6 +381,10 @@ class PivotChartLayoutBuilder {
             ;
             ({ backgroundColor } = intersection);
         }
+        // Override to light red if segment value axis overrides are incomplete
+        if (intersection.tableOverride && !intersection.segmentValueAxisOverridesComplete) {
+            backgroundColor = "#FFCDCD";
+        }
         if (backgroundColor) {
             backgroundColor = (0, color_1.default)(backgroundColor).alpha(intersection.backgroundColorOpacity || 1).string();
             cell.backgroundColor = backgroundColor;
@@ -389,29 +393,23 @@ class PivotChartLayoutBuilder {
     }
     // Determine summarize value for unconfigured cells
     setupSummarize(design, layout) {
-        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--) {
+        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 === "column") {
-                    result.push((cell.summarize = PivotChartUtils.canSummarizeSegment(design.columns, cell.section)));
-                }
-                else {
-                    result.push(undefined);
+                    cell.summarize = PivotChartUtils.canSummarizeSegment(design.columns, cell.section);
                 }
             }
-            return result;
-        })());
+        }
     }
     // Determine borders, mutating cells
     setupBorders(layout) {
         // Set up borders for row and column cells
         let cell, columnIndex, rowIndex;
         let asc, end;
-        let asc2, end2;
         const borderTops = []; // Array of border top information for intersections. index is layout row number
         const borderBottoms = []; // Array of border bottom information for intersections. index is layout row number
         const borderLefts = []; // Array of border left information for intersections. index is layout column number
@@ -526,9 +524,8 @@ 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") {
                     cell.borderTop = Math.max(layout.rows[rowIndex].cells[columnIndex - 1].borderTop, cell.borderTop);
@@ -541,30 +538,17 @@ 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
     // [{ segment:, label:, value:  }, ...]

package/lib/widgets/charts/pivot/PivotChartLayoutComponent.js

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

package/lib/widgets/charts/pivot/PivotChartQueryBuilder.d.ts

@@ -1,9 +1,9 @@
 import { Schema } from "@mwater/expressions";
 import { ExprUtils } from "@mwater/expressions";
 import AxisBuilder from "../../../axes/AxisBuilder";
-import { PivotChartDesign } from "./PivotChartDesign";
+import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign";
 import { JsonQLFilter } from "../../../JsonQLFilter";
-import { JsonQLQuery } from "@mwater/jsonql";
+import { JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql";
 /** Builds pivot table queries.
  * Result is flat list for each intersection with each row being data for a single cell
  * columns of result are:
@@ -28,4 +28,25 @@ export default class PivotChartQueryBuilder {
     createQueries(design: PivotChartDesign, extraFilters: JsonQLFilter[]): {
         [intersectionId: string]: JsonQLQuery;
     };
+    /**
+     * 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[]): JsonQLSelectQuery | null;
+    createSegmentOrderQuery(design: PivotChartDesign, segment: PivotChartSegment, extraFilters: JsonQLFilter[]): JsonQLSelectQuery;
 }

package/lib/widgets/charts/pivot/PivotChartQueryBuilder.js

@@ -59,205 +59,239 @@ 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, extraFilters) {
-        let filter, intersectionId, relevantFilters, whereClauses;
         const exprCompiler = new expressions_1.ExprCompiler(this.schema);
         const queries = {};
         // 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 = {
-                    type: "query",
-                    selects: [],
-                    from: exprCompiler.compileTable(design.table, "main"),
-                    limit: 10000,
-                    groupBy: []
-                };
-                // Filters to add (not yet compiled)
-                const filters = [];
-                const compileSegmentAxis = (axis) => {
-                    // Get axis type
-                    const axisType = this.axisBuilder.getAxisType(axis);
-                    // 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 (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);
-                    }
-                }
-                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);
-                    }
-                }
-                // 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 background color
-                if (intersection?.backgroundColorAxis) {
-                    query.selects.push({
-                        type: "select",
-                        expr: this.axisBuilder.compileAxis({ axis: intersection?.backgroundColorAxis, tableAlias: "main" }),
-                        alias: "bc"
-                    });
+                const query = this.createIntersectionQuery(design, rowPath, columnPath, extraFilters);
+                if (query) {
+                    queries[PivotChartUtils.getIntersectionId(rowPath, columnPath)] = query;
                 }
-                // 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}`
-                    });
-                }
-                // If all selects are null, don't create query
-                if (lodash_1.default.all(query.selects, (select) => select.expr == null)) {
-                    continue;
-                }
-                // Add where
-                whereClauses = [];
-                if (design.filter) {
-                    whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
-                }
-                // Add other filters
-                whereClauses = whereClauses.concat(lodash_1.default.map(filters, (filter) => exprCompiler.compileExpr({ expr: filter, tableAlias: "main" })));
-                // Add filters
-                if (extraFilters && extraFilters.length > 0) {
-                    // Get relevant filters
-                    relevantFilters = lodash_1.default.where(extraFilters, { table: design.table });
-                    // Add filters
-                    for (filter of relevantFilters) {
-                        whereClauses.push((0, expressions_3.injectTableAlias)(filter.jsonql, "main"));
-                    }
-                }
-                whereClauses = lodash_1.default.compact(whereClauses);
-                if (whereClauses.length === 1) {
-                    query.where = whereClauses[0];
-                }
-                else if (whereClauses.length > 1) {
-                    query.where = { type: "op", op: "and", exprs: whereClauses };
-                }
-                queries[intersectionId] = query;
             }
         }
         // For each segment
         const segments = PivotChartUtils.getAllSegments(design.rows).concat(PivotChartUtils.getAllSegments(design.columns));
-        for (let segment of segments) {
+        for (const 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 = [];
-                if (segment.filter) {
-                    whereClauses.push(exprCompiler.compileExpr({ expr: segment.filter, tableAlias: "main" }));
+                const query = this.createSegmentOrderQuery(design, segment, extraFilters);
+                if (query) {
+                    queries[segment.id] = query;
                 }
-                // Get all intersection filters
-                const intersectionFilters = [];
-                for (intersectionId of lodash_1.default.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 });
-                        }
-                    }
-                }
-                if (intersectionFilters.length > 0) {
-                    whereClauses.push({
-                        type: "op",
-                        op: "or",
-                        exprs: lodash_1.default.map(intersectionFilters, (filter) => exprCompiler.compileExpr({ expr: filter, tableAlias: "main" }))
-                    });
-                }
-                if (design.filter) {
-                    whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
-                }
-                // Add extra filters
-                if (extraFilters && extraFilters.length > 0) {
-                    // Get relevant filters
-                    relevantFilters = lodash_1.default.where(extraFilters, { table: design.table });
-                    // Add filters
-                    for (filter of relevantFilters) {
-                        whereClauses.push((0, expressions_3.injectTableAlias)(filter.jsonql, "main"));
-                    }
-                }
-                whereClauses = lodash_1.default.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
-                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: [
+            }
+        }
+        return queries;
+    }
+    /**
+     * 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, rowPath, columnPath, extraFilters) {
+        const exprCompiler = new expressions_1.ExprCompiler(this.schema);
+        // Get id of intersection
+        const intersectionId = PivotChartUtils.getIntersectionId(rowPath, columnPath);
+        // Get intersection
+        const intersection = design.intersections[intersectionId];
+        // Get intersection table
+        const intersectionTable = intersection.tableOverride || design.table;
+        // Create shell of query
+        const query = {
+            type: "query",
+            selects: [],
+            from: exprCompiler.compileTable(intersectionTable, "main"),
+            limit: 10000,
+            groupBy: []
+        };
+        // Filters to add (not yet compiled)
+        const filters = [];
+        const compileSegmentAxis = (segment) => {
+            // Get axis type
+            const axisType = this.axisBuilder.getAxisType(segment.valueAxis);
+            // 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: [
                         {
-                            expr: exprCompiler.compileExpr({ expr: segment.orderExpr, tableAlias: "main" }),
-                            direction: segment.orderDir || "asc"
+                            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);
+            }
         }
-        return queries;
+        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 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 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}`
+            });
+        }
+        // If all selects are null, don't create query
+        if (lodash_1.default.all(query.selects, (select) => select.expr == null)) {
+            return null;
+        }
+        // Add where
+        let whereClauses = [];
+        if (design.filter) {
+            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
+        }
+        // Add other filters
+        whereClauses = whereClauses.concat(lodash_1.default.map(filters, (filter) => exprCompiler.compileExpr({ expr: filter, tableAlias: "main" })));
+        // Add filters
+        if (extraFilters && extraFilters.length > 0) {
+            // Get relevant filters
+            const relevantFilters = lodash_1.default.where(extraFilters, { table: intersection.tableOverride ?? design.table });
+            // Add filters
+            for (const filter of relevantFilters) {
+                whereClauses.push((0, expressions_3.injectTableAlias)(filter.jsonql, "main"));
+            }
+        }
+        whereClauses = lodash_1.default.compact(whereClauses);
+        if (whereClauses.length === 1) {
+            query.where = whereClauses[0];
+        }
+        else if (whereClauses.length > 1) {
+            query.where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        return query;
+    }
+    createSegmentOrderQuery(design, segment, extraFilters) {
+        const exprCompiler = new expressions_1.ExprCompiler(this.schema);
+        // Create where which includes the segments filter (if present) and the "or" of all intersections that are present
+        let whereClauses = [];
+        if (segment.filter) {
+            whereClauses.push(exprCompiler.compileExpr({ expr: segment.filter, tableAlias: "main" }));
+        }
+        // Get all intersection filters
+        const intersectionFilters = [];
+        for (const intersectionId of lodash_1.default.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 });
+                }
+            }
+        }
+        if (intersectionFilters.length > 0) {
+            whereClauses.push({
+                type: "op",
+                op: "or",
+                exprs: lodash_1.default.map(intersectionFilters, (filter) => exprCompiler.compileExpr({ expr: filter, tableAlias: "main" }))
+            });
+        }
+        if (design.filter) {
+            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
+        }
+        // Add extra filters
+        if (extraFilters && extraFilters.length > 0) {
+            // Get relevant filters
+            const relevantFilters = lodash_1.default.where(extraFilters, { table: design.table });
+            // Add filters
+            for (const filter of relevantFilters) {
+                whereClauses.push((0, expressions_3.injectTableAlias)(filter.jsonql, "main"));
+            }
+        }
+        whereClauses = lodash_1.default.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"
+                }
+            ]
+        };
     }
 }
 exports.default = PivotChartQueryBuilder;

package/lib/widgets/charts/pivot/PivotChartUtils.d.ts

@@ -1,9 +1,9 @@
 import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign";
 export declare function getSegmentPaths(segments: PivotChartSegment[]): PivotChartSegment[][];
 export declare function getAllSegments(segments: PivotChartSegment[]): PivotChartSegment[];
-export declare function getIntersectionId(rowPath: any, columnPath: any): string;
+export declare function getIntersectionId(rowPath: PivotChartSegment[], columnPath: PivotChartSegment[]): string;
 export declare function findSegment(segments: PivotChartSegment[], id: any): PivotChartSegment | null | undefined;
-export declare function canSummarizeSegment(segments: any, id: any): boolean;
+export declare function canSummarizeSegment(segments: PivotChartSegment[], id: string): boolean;
 export declare function summarizeSegment(design: PivotChartDesign, id: any, label: any): PivotChartDesign;
 export declare function replaceSegment(segments: any, replacement: any): PivotChartSegment[];
 export declare function removeSegment(segments: any, id: any): PivotChartSegment[];

package/lib/widgets/charts/pivot/PivotChartViewComponent.d.ts

@@ -1,9 +1,7 @@
-import PropTypes from "prop-types";
 import React from "react";
-import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter, WidgetScope } from "../../..";
-import { PivotChartDesign } from "./PivotChartDesign";
+import { PivotChartDesign, PivotChartIntersection } from "./PivotChartDesign";
 export interface PivotChartViewComponentProps {
     schema: Schema;
     dataSource: DataSource;
@@ -21,13 +19,11 @@ export interface PivotChartViewComponentProps {
 }
 interface PivotChartViewComponentState {
     editSegment: any;
-    editIntersectionId: any;
-    editIntersection: any;
+    editIntersectionId: string | null;
+    editIntersection: PivotChartIntersection | null;
 }
 export default class PivotChartViewComponent extends React.Component<PivotChartViewComponentProps, PivotChartViewComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     handleHeaderChange: (header: any) => void;
     handleFooterChange: (footer: any) => void;
@@ -41,25 +37,10 @@ export default class PivotChartViewComponent extends React.Component<PivotChartV
     handleInsertAfterSegment: (segmentId: any) => void;
     handleAddChildSegment: (segmentId: any) => void;
     handleSummarizeSegment: (segmentId: any) => void;
-    renderHeader(): React.DetailedReactHTMLElement<{
-        style: {
-            paddingLeft: number;
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-    renderFooter(): React.DetailedReactHTMLElement<{
-        style: {
-            paddingLeft: number;
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-    renderEditSegmentModal(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | undefined;
-    renderEditIntersectionModal(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | undefined;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: number;
-            height: number | undefined;
-        };
-    }, HTMLElement>;
+    renderHeader(): React.JSX.Element;
+    renderFooter(): React.JSX.Element;
+    renderEditSegmentModal(): React.JSX.Element | null;
+    renderEditIntersectionModal(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export {};