@mwater/visualization 5.0.0

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

@@ -0,0 +1,263 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
+const expressions_3 = require("@mwater/expressions");
+const PivotChartUtils = __importStar(require("./PivotChartUtils"));
+/** Builds pivot table queries.
+ * Result is flat list for each intersection with each row being data for a single cell
+ * columns of result are:
+ *  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)
+ *  ...
+ * Also produces queries needed to order row/column segments when ordered
+ * These are indexed by the segment id and contain the values in order (already asc/desc corrected)
+ * each row containing only { value: }
+ */
+class PivotChartQueryBuilder {
+    schema;
+    exprUtils;
+    axisBuilder;
+    constructor(options) {
+        this.schema = options.schema;
+        this.exprUtils = new expressions_2.ExprUtils(this.schema);
+        this.axisBuilder = new AxisBuilder_1.default({ schema: this.schema });
+    }
+    // Create the queries needed for the chart.
+    // 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: this.axisBuilder.compileAxis({ axis: columnSegment.valueAxis, tableAlias: "main" }),
+                        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 (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) {
+            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" }));
+                }
+                // 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: [
+                        {
+                            expr: exprCompiler.compileExpr({ expr: segment.orderExpr, tableAlias: "main" }),
+                            direction: segment.orderDir || "asc"
+                        }
+                    ]
+                };
+            }
+        }
+        return queries;
+    }
+}
+exports.default = PivotChartQueryBuilder;

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

@@ -0,0 +1,12 @@
+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 findSegment(segments: PivotChartSegment[], id: any): PivotChartSegment | null | undefined;
+export declare function canSummarizeSegment(segments: any, id: any): 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[];
+export declare function insertBeforeSegment(segments: any, id: any): PivotChartSegment[];
+export declare function insertAfterSegment(segments: any, id: any): PivotChartSegment[];
+export declare function addChildSegment(segments: any, id: any): PivotChartSegment[];

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

@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addChildSegment = exports.insertAfterSegment = exports.insertBeforeSegment = exports.removeSegment = exports.replaceSegment = exports.summarizeSegment = exports.canSummarizeSegment = exports.findSegment = exports.getIntersectionId = exports.getAllSegments = exports.getSegmentPaths = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const uuid_1 = __importDefault(require("uuid"));
+// Misc utils for working with pivot charts
+// Get all paths through a set of segments (e.g. if a contains b, c, then [[a,b], [a,c]])
+function getSegmentPaths(segments) {
+    let paths = [];
+    // Use recursive
+    for (var segment of segments) {
+        if (!segment.children || segment.children.length === 0) {
+            paths.push([segment]);
+        }
+        else {
+            paths = paths.concat(lodash_1.default.map(getSegmentPaths(segment.children), (childPath) => [segment].concat(childPath)));
+        }
+    }
+    return paths;
+}
+exports.getSegmentPaths = getSegmentPaths;
+// Get all paths through a set of segments (e.g. if a contains b, c, then [[a,b], [a,c]])
+function getAllSegments(segments) {
+    let allSegments = [];
+    // Use recursive
+    for (let segment of segments) {
+        allSegments.push(segment);
+        if (segment.children && segment.children.length > 0) {
+            allSegments = allSegments.concat(getAllSegments(segment.children));
+        }
+    }
+    return allSegments;
+}
+exports.getAllSegments = getAllSegments;
+// Gets the id of the intersection of the two paths
+function getIntersectionId(rowPath, columnPath) {
+    return `${lodash_1.default.pluck(rowPath, "id").join(",")}:${lodash_1.default.pluck(columnPath, "id").join(",")}`;
+}
+exports.getIntersectionId = getIntersectionId;
+function findSegment(segments, id) {
+    return lodash_1.default.findWhere(getAllSegments(segments), { id });
+}
+exports.findSegment = findSegment;
+// Determine if can summarize segment (if segment before has a value axis and has no children)
+function canSummarizeSegment(segments, id) {
+    const prevSegment = findPreviousSegment(segments, id);
+    if (prevSegment && prevSegment.valueAxis && !prevSegment.children?.[0]) {
+        return true;
+    }
+    return false;
+}
+exports.canSummarizeSegment = canSummarizeSegment;
+// Finds the segment before one with id
+function findPreviousSegment(segments, id) {
+    // Find in list (shallow)
+    const index = lodash_1.default.findIndex(segments, { id });
+    // Null if first
+    if (index === 0) {
+        return null;
+    }
+    // If found, check previous
+    if (index > 0) {
+        return segments[index - 1];
+    }
+    // Find recursively
+    for (let segment of segments) {
+        if (segment.children) {
+            const prevSegment = findPreviousSegment(segment.children, id);
+            if (prevSegment) {
+                return prevSegment;
+            }
+        }
+    }
+    return null;
+}
+// Summarize a segment, returning a new copy of the design with
+// all intersections created.
+function summarizeSegment(design, id, label) {
+    let columnPath, prevIntersection, prevSegment, rowPath, summaryIntersection;
+    design = lodash_1.default.cloneDeep(design);
+    // Label segment
+    const rowSegment = findSegment(design.rows, id);
+    const columnSegment = findSegment(design.columns, id);
+    if (rowSegment) {
+        rowSegment.label = label;
+    }
+    if (columnSegment) {
+        columnSegment.label = label;
+    }
+    if (rowSegment) {
+        // Find previous segment
+        prevSegment = findPreviousSegment(design.rows, id);
+        // Copy all intersections
+        for (rowPath of getSegmentPaths(design.rows)) {
+            for (columnPath of getSegmentPaths(design.columns)) {
+                // Skip if prev segment not part of it
+                if (!prevSegment || !rowPath.includes(prevSegment)) {
+                    continue;
+                }
+                // Create copy of intersection
+                prevIntersection = design.intersections[getIntersectionId(rowPath, columnPath)];
+                summaryIntersection = lodash_1.default.cloneDeep(prevIntersection);
+                // Find new row path (since has no children, will be only one)
+                const summaryRowPath = lodash_1.default.find(getSegmentPaths(design.rows), (path) => path.includes(rowSegment));
+                design.intersections[getIntersectionId(summaryRowPath, columnPath)] = summaryIntersection;
+            }
+        }
+    }
+    if (columnSegment) {
+        prevSegment = findPreviousSegment(design.columns, id);
+        // Copy all intersections
+        for (columnPath of getSegmentPaths(design.columns)) {
+            for (rowPath of getSegmentPaths(design.rows)) {
+                // Skip if prev segment not part of it
+                if (!prevSegment || !columnPath.includes(prevSegment)) {
+                    continue;
+                }
+                // Create copy of intersection
+                prevIntersection = design.intersections[getIntersectionId(rowPath, columnPath)];
+                summaryIntersection = lodash_1.default.cloneDeep(prevIntersection);
+                // Find new column path (since has no children, will be only one)
+                const summaryColumnPath = lodash_1.default.find(getSegmentPaths(design.columns), (path) => path.includes(columnSegment));
+                design.intersections[getIntersectionId(rowPath, summaryColumnPath)] = summaryIntersection;
+            }
+        }
+    }
+    return design;
+}
+exports.summarizeSegment = summarizeSegment;
+// Recursively map segments, flattening and compacting
+function mapSegments(segments, mapFunc) {
+    let segments2 = lodash_1.default.map(segments, mapFunc);
+    // Map children
+    segments2 = lodash_1.default.map(segments2, function (segment) {
+        if (!segment || !segment.children || segment.children.length === 0) {
+            return segment;
+        }
+        return { ...segment, children: mapSegments(segment.children, mapFunc) };
+    });
+    // Flatten and compact
+    return lodash_1.default.compact(lodash_1.default.flatten(segments2));
+}
+// Replace segment
+function replaceSegment(segments, replacement) {
+    return mapSegments(segments, function (segment) {
+        if (segment.id === replacement.id) {
+            return replacement;
+        }
+        return segment;
+    });
+}
+exports.replaceSegment = replaceSegment;
+// Remove segment
+function removeSegment(segments, id) {
+    return mapSegments(segments, function (segment) {
+        if (segment.id === id) {
+            return null;
+        }
+        return segment;
+    });
+}
+exports.removeSegment = removeSegment;
+// Inserts before
+function insertBeforeSegment(segments, id) {
+    return mapSegments(segments, function (segment) {
+        if (segment.id === id) {
+            return [{ id: (0, uuid_1.default)() }, segment];
+        }
+        return segment;
+    });
+}
+exports.insertBeforeSegment = insertBeforeSegment;
+// Inserts after
+function insertAfterSegment(segments, id) {
+    return mapSegments(segments, function (segment) {
+        if (segment.id === id) {
+            return [segment, { id: (0, uuid_1.default)() }];
+        }
+        return segment;
+    });
+}
+exports.insertAfterSegment = insertAfterSegment;
+// Adds child
+function addChildSegment(segments, id) {
+    return mapSegments(segments, function (segment) {
+        if (segment.id === id) {
+            return lodash_1.default.extend({}, segment, { children: (segment.children || []).concat([{ id: (0, uuid_1.default)() }]) });
+        }
+        return segment;
+    });
+}
+exports.addChildSegment = addChildSegment;

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

@@ -0,0 +1,84 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+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;
+}
+export default class PivotChartViewComponent extends React.Component<PivotChartViewComponentProps, PivotChartViewComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    handleHeaderChange: (header: any) => void;
+    handleFooterChange: (footer: any) => void;
+    handleEditSection: (sectionId: any) => void;
+    handleSaveEditSegment: () => void;
+    handleCancelEditSegment: () => void;
+    handleSaveEditIntersection: () => void;
+    handleCancelEditIntersection: () => void;
+    handleRemoveSegment: (segmentId: any) => void;
+    handleInsertBeforeSegment: (segmentId: any) => void;
+    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<{
+        title: string;
+        onAction: () => void;
+        onCancel: () => void;
+        size: string;
+    }, React.Component<{
+        title: string;
+        onAction: () => void;
+        onCancel: () => void;
+        size: string;
+    }, any, any>> | undefined;
+    renderEditIntersectionModal(): React.CElement<{
+        title: string;
+        onAction: () => void;
+        onCancel: () => void;
+        size: string;
+    }, React.Component<{
+        title: string;
+        onAction: () => void;
+        onCancel: () => void;
+        size: string;
+    }, any, any>> | undefined;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            width: number;
+            height: number | undefined;
+        };
+    }, HTMLElement>;
+}
+export {};