@mwater/visualization 5.0.0

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

@@ -0,0 +1,88 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../../../axes/Axis";
+import { TextWidgetDesign } from "../../text/TextWidgetDesign";
+export interface PivotChartDesign {
+    version: number;
+    /** text widget design to display in header */
+    header: TextWidgetDesign;
+    /** text widget design to display in header */
+    footer: TextWidgetDesign;
+    /** table of pivot chart */
+    table: string;
+    /** array of segments that make up rows */
+    rows: PivotChartSegment[];
+    /** array of segments that make up columns */
+    columns: PivotChartSegment[];
+    /** lookup of intersection id (e.g. "rowid:columnid" or "rowid,rowid:columnid,columnid" etc.) to intersection */
+    intersections: {
+        [intersectionId: string]: PivotChartIntersection;
+    };
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** to put in light striping */
+    striping?: "columns" | "rows";
+}
+/**
+ * Segments are the building block of pivot tables. Each is either on the row or column axis. They represent one
+ * expression (enum/text) that is analyzed.
+ * Segments can be nested to allow sub-division and are ordered.
+ */
+export interface PivotChartSegment {
+    /** id of segment */
+    id: string;
+    /** optional label of segment */
+    label?: string;
+    /** enum/text axis that determines values. Optional. */
+    valueAxis?: Axis | null;
+    /** Limit date-type and enum fields to values actually present */
+    valueAxisOnlyValuesPresent?: boolean;
+    /** array of child segments if any. Optional */
+    children?: PivotChartSegment[];
+    /** optional aggregate ordering expression */
+    orderExpr?: Expr;
+    orderDir?: "asc" | "desc";
+    /** color of filler for intersections that are filler type */
+    fillerColor?: string;
+    /** optional logical expression to filter by (filters all intersections related to it) */
+    filter?: Expr;
+    /** true if bold (values and label) */
+    bold?: boolean;
+    /** true if italic */
+    italic?: boolean;
+    /** true if label alone is bold (only when has valueAxis and label) */
+    valueLabelBold?: boolean;
+    /** weight of border before segment (0 = none, 1 = light, 2 = medium (default), 3 = heavy) */
+    borderBefore?: 0 | 1 | 2 | 3;
+    /** weight of border within segment (0 = none, 1 = light (default), 2 = medium, 3 = heavy) */
+    borderWithin?: 0 | 1 | 2 | 3;
+    /** weight of border after segment (0 = none, 1 = light, 2 = medium (default), 3 = heavy) */
+    borderAfter?: 0 | 1 | 2 | 3;
+}
+/** These compose the data area of the table. There is an intersection for each possible
+ * combination that makes sense of segments that form a rectangle. An intersection is
+ * id-ed by "rowid:columnid" or "rowid,rowid:columnid,columnid" etc. depending on its component
+ * ids.
+ */
+export interface PivotChartIntersection {
+    /** axis that determines value to display in cells. Must be aggregate */
+    valueAxis?: Axis | null;
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** color axis for background of cells */
+    backgroundColorAxis?: Axis | null;
+    /** fractional background opacity */
+    backgroundColorOpacity?: number;
+    /** color of background if no color axis */
+    backgroundColor?: string;
+    /** array of conditional colors that override axis and background color
+     * Each contains: { condition: aggregate boolean expression, color: color value }
+     */
+    backgroundColorConditions?: {
+        condition?: Expr;
+        color?: string;
+    }[];
+    /** true if bold */
+    bold?: boolean;
+    /** true if italic */
+    italic?: boolean;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface PivotChartDesignerComponentProps {
+    design: any;
+    schema: Schema;
+    dataSource: DataSource;
+    onDesignChange: any;
+    filters?: any;
+}
+interface PivotChartDesignerComponentState {
+    isNew: any;
+}
+export default class PivotChartDesignerComponent extends React.Component<PivotChartDesignerComponentProps, PivotChartDesignerComponentState> {
+    constructor(props: any);
+    updateDesign(changes: any): any;
+    handleTableChange: (table: any) => any;
+    handleColumnChange: (axis: any) => any;
+    handleRowChange: (axis: any) => any;
+    handleFilterChange: (filter: any) => any;
+    handleIntersectionValueAxisChange: (valueAxis: any) => any;
+    renderTable(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    renderStriping(): React.CElement<{
+        labelMuted: boolean;
+        label: string;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: string;
+    }, any, any>> | null;
+    renderSetup(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

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

@@ -0,0 +1,159 @@
+"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 uuid_1 = __importDefault(require("uuid"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
+// Designer for overall chart. Has a special setup mode first time it is run
+class PivotChartDesignerComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isNew: !props.design.table // True if new pivot table
+        };
+    }
+    // Updates design with the specified changes
+    updateDesign(changes) {
+        const design = lodash_1.default.extend({}, this.props.design, changes);
+        return this.props.onDesignChange(design);
+    }
+    handleTableChange = (table) => {
+        // Create default
+        const row = { id: (0, uuid_1.default)(), label: "" };
+        const column = { id: (0, uuid_1.default)(), label: "" };
+        const intersections = {};
+        intersections[`${row.id}:${column.id}`] = { valueAxis: { expr: { type: "op", op: "count", table, exprs: [] } } };
+        return this.updateDesign({
+            table,
+            rows: [row],
+            columns: [column],
+            intersections
+        });
+    };
+    handleColumnChange = (axis) => {
+        return this.updateDesign({ columns: [lodash_1.default.extend({}, this.props.design.columns[0], { valueAxis: axis })] });
+    };
+    handleRowChange = (axis) => {
+        return this.updateDesign({ rows: [lodash_1.default.extend({}, this.props.design.rows[0], { valueAxis: axis })] });
+    };
+    handleFilterChange = (filter) => {
+        return this.updateDesign({ filter });
+    };
+    handleIntersectionValueAxisChange = (valueAxis) => {
+        const intersectionId = `${this.props.design.rows[0].id}:${this.props.design.columns[0].id}`;
+        const intersections = {};
+        intersections[intersectionId] = { valueAxis };
+        return this.updateDesign({ intersections });
+    };
+    renderTable() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: this.props.design.table,
+            onChange: this.handleTableChange,
+            filter: this.props.design.filter,
+            onFilterChange: this.handleFilterChange
+        }));
+    }
+    renderFilter() {
+        // If no table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleFilterChange,
+            table: this.props.design.table,
+            value: this.props.design.filter
+        })));
+    }
+    renderStriping() {
+        // If no table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Striping"
+        }, react_1.default.createElement(ui.Radio, { key: "none", inline: true, radioValue: null, value: this.props.design.striping || null, onChange: (value) => this.updateDesign({ striping: value }) }, "None"), react_1.default.createElement(ui.Radio, { key: "columns", inline: true, radioValue: "columns", value: this.props.design.striping, onChange: (value) => this.updateDesign({ striping: value }) }, "Columns"), react_1.default.createElement(ui.Radio, { key: "rows", inline: true, value: this.props.design.striping, radioValue: "rows", onChange: (value) => this.updateDesign({ striping: value }) }, "Rows"));
+    }
+    // Show setup options
+    renderSetup() {
+        const intersectionId = `${this.props.design.rows[0].id}:${this.props.design.columns[0].id}`;
+        return R("div", null, R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Columns",
+            help: "Field to optionally make columns out of"
+        }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["enum", "enumset", "text", "boolean", "date"],
+            aggrNeed: "none",
+            value: this.props.design.columns[0].valueAxis,
+            onChange: this.handleColumnChange,
+            filters: this.props.filters
+        })), R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Rows",
+            help: "Field to optionally make rows out of"
+        }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["enum", "enumset", "text", "boolean", "date"],
+            aggrNeed: "none",
+            value: this.props.design.rows[0].valueAxis,
+            onChange: this.handleRowChange,
+            filters: this.props.filters
+        })), R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Value",
+            help: "Field show in cells"
+        }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["enum", "text", "boolean", "date", "number"],
+            aggrNeed: "required",
+            value: this.props.design.intersections[intersectionId].valueAxis,
+            onChange: this.handleIntersectionValueAxisChange,
+            showFormat: true,
+            filters: this.props.filters
+        })));
+    }
+    render() {
+        return R("div", null, this.renderTable(), this.state.isNew && this.props.design.table ? this.renderSetup() : undefined, this.renderFilter(), this.renderStriping());
+    }
+}
+exports.default = PivotChartDesignerComponent;

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

@@ -0,0 +1,73 @@
+import { PivotChartSegment } from "./PivotChartDesign";
+/** Layout for a compiled pivot chart to display */
+export interface PivotChartLayout {
+    rows: PivotChartLayoutRow[];
+    /** To put in light striping */
+    striping?: "columns" | "rows";
+    /** true if row limit exceeded */
+    tooManyRows?: boolean;
+    /** true if column limit exceeded */
+    tooManyColumns?: boolean;
+}
+export interface PivotChartLayoutRow {
+    row: PivotChartLayoutRow;
+    cells: PivotChartLayoutCell[];
+}
+export interface PivotChartLayoutCell {
+    /**
+     * row: part of rows, has section as row segment id
+     * column: part of columns, has section as column segment id
+     * intersection: part of intersections, has section as intersection path
+     * blank: filler cells at top left
+     */
+    type: "row" | "column" | "blank" | "intersection";
+    /**
+     * value: data-driven value
+     * label: label row/column
+     * valueLabel: header for values (rows and columns that have value and label)
+     * filler: intersection cells that have no data but fill space for row label
+     */
+    subtype: "value" | "filler" | "label" | "valueLabel";
+    /** Text content of the cell */
+    text?: string;
+    align: "left" | "center" | "right";
+    /** section id of either a segment or intersection or blank area. Always a rectangle.
+     * Id is like intersection id if intersection, id of segment if segment */
+    section: string;
+    /** true if cell is on top edge of section */
+    sectionTop?: boolean;
+    /** true if cell is on bottom edge of section */
+    sectionBottom?: boolean;
+    /** true if cell is on left edge of section */
+    sectionLeft?: boolean;
+    /** true if cell is on right edge of section */
+    sectionRight?: boolean;
+    /** segment if a row or column cell */
+    segment?: PivotChartSegment;
+    /** weight of border (0 = none, 1 = light, 2 = medium, 3 = heavy) */
+    borderLeft?: number;
+    /** weight of border (0 = none, 1 = light, 2 = medium, 3 = heavy) */
+    borderRight?: number;
+    /** weight of border (0 = none, 1 = light, 2 = medium, 3 = heavy) */
+    borderTop?: number;
+    /** weight of border (0 = none, 1 = light, 2 = medium, 3 = heavy) */
+    borderBottom?: number;
+    /** true if bold */
+    bold?: boolean;
+    /** true if italic */
+    italic?: boolean;
+    /** number of units to indent cell */
+    indent?: number;
+    /** background color of cell */
+    backgroundColor?: string;
+    /** if spans more than one row. Next n-1 cells below will be type "skip" */
+    rowSpan?: number;
+    /** if spans more than one column. Next n-1 cells will be type "skip" */
+    columnSpan?: number;
+    /** true if should skip cell because of row/column span */
+    skip?: boolean;
+    /** true if cell is a placeholder that needs to be configured */
+    unconfigured?: boolean;
+    /** true if cell is unconfigured and can be turned into a summary */
+    summarize?: boolean;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,37 @@
+import { ExprUtils, Schema } from "@mwater/expressions";
+import AxisBuilder from "../../../axes/AxisBuilder";
+import { PivotChartDesign, PivotChartSegment } from "./PivotChartDesign";
+import { PivotChartLayout, PivotChartLayoutCell } from "./PivotChartLayout";
+export type PivotChartData = {
+    [intersectionId: string]: any[];
+};
+export default class PivotChartLayoutBuilder {
+    schema: Schema;
+    exprUtils: ExprUtils;
+    axisBuilder: AxisBuilder;
+    constructor(options: {
+        schema: Schema;
+    });
+    buildLayout(design: PivotChartDesign, data: PivotChartData, locale: string): PivotChartLayout;
+    buildIntersectionCell(design: PivotChartDesign, dataIndexed: any, locale: string, row: {
+        segment: PivotChartSegment;
+        label: string;
+        value: any;
+    }[], column: {
+        segment: PivotChartSegment;
+        label: string;
+        value: any;
+    }[]): PivotChartLayoutCell | {
+        type: string;
+        text: null;
+    };
+    setupSummarize(design: any, layout: any): (boolean | undefined)[][];
+    setupBorders(layout: any): any[][];
+    getRowsOrColumns(isRow: boolean, segment: PivotChartSegment, data: {
+        [intersectionId: string]: any[];
+    }, locale: string, parentSegments?: PivotChartSegment[], parentValues?: any[]): {
+        segment: PivotChartSegment;
+        label: string;
+        value: any;
+    }[][];
+}