@mwater/visualization 5.0.0

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { PivotChartLayout, PivotChartLayoutRow } from "./PivotChartLayout";
+export interface PivotChartLayoutComponentProps {
+    layout: PivotChartLayout;
+    editable?: boolean;
+    /** Called with id of section (segment id or intersection id) */
+    onEditSection?: (sectionId: string) => void;
+    /** Called with id of segment */
+    onRemoveSegment?: (sectionId: string) => void;
+    /** Called with id of segment */
+    onInsertBeforeSegment?: (sectionId: string) => void;
+    /** Called with id of segment */
+    onInsertAfterSegment?: (sectionId: string) => void;
+    /** Called with id of segment */
+    onAddChildSegment?: (sectionId: string) => void;
+    /** Called with id of segment. Summarizes the segment */
+    onSummarizeSegment?: (sectionId: string) => void;
+}
+interface PivotChartLayoutComponentState {
+    hoverSection: string | null;
+}
+/** Displays a pivot chart from a layout */
+export default class PivotChartLayoutComponent extends React.Component<PivotChartLayoutComponentProps, PivotChartLayoutComponentState> {
+    cellComps: {
+        [key: string]: any;
+    };
+    constructor(props: PivotChartLayoutComponentProps);
+    recordCellComp: (rowIndex: any, columnIndex: any, comp: any) => any;
+    renderRow(row: PivotChartLayoutRow, rowIndex: number): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderHoverPlusIcon: (key: any, x: any, y: any, onClick: any) => React.DetailedReactHTMLElement<{
+        key: any;
+        onClick: any;
+        style: {
+            position: "absolute";
+            left: number;
+            top: number;
+            border: string;
+            backgroundColor: "white";
+            paddingLeft: number;
+            paddingRight: number;
+            paddingTop: number;
+            color: "#337ab7";
+            fontSize: number;
+            cursor: "pointer";
+            opacity: number;
+        };
+    }, HTMLElement>;
+    renderHoverRemoveIcon: (key: any, x: any, y: any, onClick: any) => React.DetailedReactHTMLElement<{
+        key: any;
+        onClick: any;
+        style: {
+            position: "absolute";
+            left: number;
+            top: number;
+            border: string;
+            backgroundColor: "white";
+            paddingLeft: number;
+            paddingRight: number;
+            paddingTop: number;
+            color: "#337ab7";
+            fontSize: number;
+            cursor: "pointer";
+            opacity: number;
+        };
+    }, HTMLElement>;
+    renderHoverControls: () => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null | undefined;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "relative";
+        };
+        onMouseLeave: () => void;
+    }, HTMLElement>;
+}
+export {};

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

@@ -0,0 +1,333 @@
+"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 react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const color_1 = __importDefault(require("color"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const classnames_1 = __importDefault(require("classnames"));
+/** Displays a pivot chart from a layout */
+class PivotChartLayoutComponent extends react_1.default.Component {
+    cellComps;
+    constructor(props) {
+        super(props);
+        this.state = {
+            hoverSection: null // Current section being hovered over
+        };
+        // Index of cell components by "<rowIndex>:<columnIndex>"
+        this.cellComps = {};
+    }
+    // Records the cell components. This is to be able to calculate the bounds of sections
+    // to allow floating hover controls
+    recordCellComp = (rowIndex, columnIndex, comp) => {
+        const key = `${rowIndex}:${columnIndex}`;
+        if (comp) {
+            return (this.cellComps[key] = comp);
+        }
+        else {
+            return delete this.cellComps[key];
+        }
+    };
+    renderRow(row, rowIndex) {
+        return R("tr", { key: rowIndex }, lodash_1.default.map(row.cells, (cell, columnIndex) => {
+            return R(LayoutCellComponent, {
+                ref: this.recordCellComp.bind(null, rowIndex, columnIndex),
+                key: columnIndex,
+                layout: this.props.layout,
+                rowIndex,
+                columnIndex,
+                onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section }) : undefined,
+                hoverSection: this.props.editable ? this.state.hoverSection : undefined,
+                onEditSection: this.props.onEditSection ? this.props.onEditSection.bind(null, cell.section) : undefined,
+                onSummarizeSegment: this.props.onSummarizeSegment
+                    ? this.props.onSummarizeSegment.bind(null, cell.section)
+                    : undefined
+            });
+        }));
+    }
+    renderHoverPlusIcon = (key, x, y, onClick) => {
+        // Render a plus box
+        return R("div", {
+            key,
+            onClick,
+            style: {
+                position: "absolute",
+                left: x - 7,
+                top: y - 6,
+                border: "solid 1px #337ab7",
+                backgroundColor: "white",
+                paddingLeft: 2,
+                paddingRight: 2,
+                paddingTop: 0,
+                color: "#337ab7",
+                fontSize: 9,
+                cursor: "pointer",
+                opacity: 0.8
+            }
+        }, R(ui.Icon, { id: "fa-plus" }));
+    };
+    renderHoverRemoveIcon = (key, x, y, onClick) => {
+        // Render a plus box
+        return R("div", {
+            key,
+            onClick,
+            style: {
+                position: "absolute",
+                left: x - 7,
+                top: y - 6,
+                border: "solid 1px #337ab7",
+                backgroundColor: "white",
+                paddingLeft: 3,
+                paddingRight: 3,
+                paddingTop: 0,
+                color: "#337ab7",
+                fontSize: 9,
+                cursor: "pointer",
+                opacity: 0.8
+            }
+        }, R(ui.Icon, { id: "fa-remove" }));
+    };
+    // Render floating hover controls
+    renderHoverControls = () => {
+        if (!this.state.hoverSection) {
+            return;
+        }
+        // Determine hover rectangle and section type (row, column or intersection)
+        let minX = null;
+        let minY = null;
+        let maxX = null;
+        let maxY = null;
+        let sectionType = null;
+        for (const key in this.cellComps) {
+            const cell = this.cellComps[key];
+            const rowIndex = parseInt(key.split(":")[0]);
+            const columnIndex = parseInt(key.split(":")[1]);
+            const cellTd = cell.getTdComponent();
+            if (!cellTd) {
+                continue;
+            }
+            // If hover
+            if (this.props.layout.rows[rowIndex]?.cells[columnIndex]?.section === this.state.hoverSection) {
+                // Add bounds
+                minX = minX == null || cellTd.offsetLeft < minX ? cellTd.offsetLeft : minX;
+                minY = minY == null || cellTd.offsetTop < minY ? cellTd.offsetTop : minY;
+                maxX =
+                    maxX == null || cellTd.offsetLeft + cellTd.offsetWidth > maxX
+                        ? cellTd.offsetLeft + cellTd.offsetWidth
+                        : maxX;
+                maxY =
+                    maxY == null || cellTd.offsetTop + cellTd.offsetHeight > maxY
+                        ? cellTd.offsetTop + cellTd.offsetHeight
+                        : maxY;
+                // Record type
+                sectionType = this.props.layout.rows[rowIndex].cells[columnIndex].type;
+            }
+        }
+        if (minX == null || !sectionType) {
+            return null;
+        }
+        // Determine types of controls to show
+        const controls = [];
+        if (sectionType === "row" && this.props.onInsertBeforeSegment) {
+            controls.push(this.renderHoverPlusIcon("top", (minX + maxX) / 2, minY, this.props.onInsertBeforeSegment.bind(null, this.state.hoverSection)));
+        }
+        if (sectionType === "row" && this.props.onInsertAfterSegment) {
+            controls.push(this.renderHoverPlusIcon("bottom", (minX + maxX) / 2, maxY - 2, this.props.onInsertAfterSegment.bind(null, this.state.hoverSection)));
+        }
+        if (sectionType === "row" && this.props.onAddChildSegment) {
+            controls.push(this.renderHoverPlusIcon("right", maxX, (minY + maxY) / 2, this.props.onAddChildSegment.bind(null, this.state.hoverSection)));
+        }
+        if (sectionType === "column" && this.props.onInsertBeforeSegment) {
+            controls.push(this.renderHoverPlusIcon("left", minX, (minY + maxY) / 2, this.props.onInsertBeforeSegment.bind(null, this.state.hoverSection)));
+        }
+        if (sectionType === "column" && this.props.onInsertAfterSegment) {
+            controls.push(this.renderHoverPlusIcon("right", maxX, (minY + maxY) / 2, this.props.onInsertAfterSegment.bind(null, this.state.hoverSection)));
+        }
+        if (sectionType === "column" && this.props.onAddChildSegment) {
+            controls.push(this.renderHoverPlusIcon("bottom", (minX + maxX) / 2, maxY, this.props.onAddChildSegment.bind(null, this.state.hoverSection)));
+        }
+        if (["row", "column"].includes(sectionType) && this.props.onRemoveSegment) {
+            controls.push(this.renderHoverRemoveIcon("topright", maxX, minY, this.props.onRemoveSegment.bind(null, this.state.hoverSection)));
+        }
+        return R("div", { key: "hover-controls" }, controls);
+    };
+    render() {
+        return R("div", {
+            style: { position: "relative" },
+            onMouseLeave: () => this.setState({ hoverSection: null })
+        }, 
+        // Define CSS classes to keep HTML as small as possible
+        // https://stackoverflow.com/a/19047221/876117
+        // https://github.com/mWater/mwater-portal/issues/1183
+        // cell borders not visible in firefox when you have a cell with position relative inside a table with collapsed borders
+        R("style", null, `\
+.pivot-chart-table {
+width: 100%;
+border-spacing: 0;
+border-collapse: collapse;
+position: relative;
+}
+
+.pivot-chart-table .cell {
+padding: 5px;
+vertical-align: top;
+background-color: white;
+}
+
+.pivot-chart-table .bt1 { border-top: solid 1px #f4f4f4 }
+.pivot-chart-table .bt2 { border-top: solid 1px #ccc }
+.pivot-chart-table .bt3 { border-top: solid 1px #888 }
+
+.pivot-chart-table .bb1 { border-bottom: solid 1px #f4f4f4 }
+.pivot-chart-table .bb2 { border-bottom: solid 1px #ccc }
+.pivot-chart-table .bb3 { border-bottom: solid 1px #888 }
+
+.pivot-chart-table .bl1 { border-left: solid 1px #f4f4f4 }
+.pivot-chart-table .bl2 { border-left: solid 1px #ccc }
+.pivot-chart-table .bl3 { border-left: solid 1px #888 }
+
+.pivot-chart-table .br1 { border-right: solid 1px #f4f4f4 }
+.pivot-chart-table .br2 { border-right: solid 1px #ccc }
+.pivot-chart-table .br3 { border-right: solid 1px #888 }\
+`), this.props.layout.tooManyRows
+            ? R("div", { className: "text-warning", style: { fontSize: 12 } }, R("i", { className: "fa fa-exclamation-circle" }), " Warning: Too many rows in table to display")
+            : undefined, this.props.layout.tooManyColumns
+            ? R("div", { className: "text-warning", style: { fontSize: 12 } }, R("i", { className: "fa fa-exclamation-circle" }), " Warning: Too many columns in table to display")
+            : undefined, R("div", { style: { position: "relative" } }, R("table", { className: "pivot-chart-table" }, R("tbody", null, lodash_1.default.map(this.props.layout.rows, (row, rowIndex) => {
+            return this.renderRow(row, rowIndex);
+        }))), this.renderHoverControls()));
+    }
+}
+exports.default = PivotChartLayoutComponent;
+/** Single layout cell */
+class LayoutCellComponent extends react_1.default.Component {
+    tdComponent;
+    handleClick = (ev) => {
+        // Ignore blanks
+        const cell = this.props.layout.rows[this.props.rowIndex].cells[this.props.columnIndex];
+        if (!cell.section) {
+            return;
+        }
+        // Ignore unconfigured cells
+        if (cell.unconfigured) {
+            return;
+        }
+        if (this.props.onEditSection) {
+            return this.props.onEditSection();
+        }
+    };
+    // Gets cell component
+    getTdComponent() {
+        return this.tdComponent;
+    }
+    // Render an unconfigured cell
+    renderUnconfigured(cell) {
+        return R("span", { style: { fontSize: "90%" } }, R("a", { className: "link-plain", onClick: this.props.onEditSection }, "Edit"), cell.summarize
+            ? [
+                R("span", { className: "text-muted" }, " / "),
+                R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, "Summarize")
+            ]
+            : undefined);
+    }
+    render() {
+        const cell = this.props.layout.rows[this.props.rowIndex].cells[this.props.columnIndex];
+        if (cell.skip) {
+            return null;
+        }
+        const isHover = this.props.hoverSection && cell.section === this.props.hoverSection;
+        // Determine background color
+        let backgroundColor = cell.unconfigured && this.props.onEditSection ? "#eff5fb" : cell.backgroundColor || null;
+        if (isHover) {
+            backgroundColor = (0, color_1.default)(backgroundColor || "#ffffff").darken(0.03).toString();
+        }
+        // Add striping
+        if (this.props.layout.striping === "columns" &&
+            ["column", "intersection"].includes(cell.type) &&
+            this.props.columnIndex % 2 === 0) {
+            backgroundColor = (0, color_1.default)(backgroundColor || "#ffffff").darken(0.03).toString();
+        }
+        else if (this.props.layout.striping === "rows" &&
+            ["row", "intersection"].includes(cell.type) &&
+            this.props.rowIndex % 2 === 0) {
+            backgroundColor = (0, color_1.default)(backgroundColor || "#ffffff").darken(0.03).toString();
+        }
+        const borderWeights = [null, "solid 1px #f4f4f4", "solid 1px #ccc", "solid 1px #888"];
+        // Collapsed borders mean that weights need to be combined for adjacent cells
+        const borderBottom = Math.max(cell.borderBottom || 0, this.props.layout.rows[this.props.rowIndex + 1]?.cells[this.props.columnIndex].borderTop || 0);
+        const borderRight = Math.max(cell.borderRight || 0, this.props.layout.rows[this.props.rowIndex].cells[this.props.columnIndex + 1]?.borderLeft || 0);
+        let textColor = null;
+        if (backgroundColor) {
+            const c = (0, color_1.default)(backgroundColor);
+            // Get lightness (taking into account alpha)
+            const lightness = 1 - ((1 - c.luminosity()) * c.alpha());
+            textColor = lightness < 0.5 ? "rgb(204,204,204)" : undefined;
+        }
+        const style = {
+            backgroundColor,
+            textAlign: cell.align,
+            cursor: isHover && !cell.unconfigured ? "pointer" : undefined,
+            color: textColor
+        };
+        const classes = (0, classnames_1.default)({
+            cell: true,
+            // List out borders in compact way to keep HTML smaller
+            bt1: cell.borderTop === 1,
+            bt2: cell.borderTop === 2,
+            bt3: cell.borderTop === 3,
+            bb1: cell.borderBottom === 1,
+            bb2: cell.borderBottom === 2,
+            bb3: cell.borderBottom === 3,
+            bl1: cell.borderLeft === 1,
+            bl2: cell.borderLeft === 2,
+            bl3: cell.borderLeft === 3,
+            br1: cell.borderRight === 1,
+            br2: cell.borderRight === 2,
+            br3: cell.borderRight === 3
+        });
+        // Style that should not affect popup menu
+        const innerStyle = {
+            fontWeight: cell.bold ? "bold" : undefined,
+            fontStyle: cell.italic ? "italic" : undefined,
+            marginLeft: cell.indent ? cell.indent * 5 : undefined
+        };
+        return R("td", {
+            ref: (c) => {
+                this.tdComponent = c;
+            },
+            onMouseEnter: this.props.onHover,
+            onClick: this.handleClick,
+            className: classes,
+            style,
+            colSpan: cell.columnSpan || null,
+            rowSpan: cell.rowSpan || null
+        }, R("span", { style: innerStyle }, cell.unconfigured && this.props.onEditSection
+            ? this.renderUnconfigured(cell)
+            : cell.text || "\u00A0\u00A0\u00A0"));
+    }
+}

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

@@ -0,0 +1,31 @@
+import { Schema } from "@mwater/expressions";
+import { ExprUtils } from "@mwater/expressions";
+import AxisBuilder from "../../../axes/AxisBuilder";
+import { PivotChartDesign } from "./PivotChartDesign";
+import { JsonQLFilter } from "../../../JsonQLFilter";
+import { JsonQLQuery } 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:
+ *  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: }
+ */
+export default class PivotChartQueryBuilder {
+    schema: Schema;
+    exprUtils: ExprUtils;
+    axisBuilder: AxisBuilder;
+    constructor(options: {
+        schema: Schema;
+    });
+    createQueries(design: PivotChartDesign, extraFilters: JsonQLFilter[]): {
+        [intersectionId: string]: JsonQLQuery;
+    };
+}