@mwater/visualization 5.4.5 → 5.5.0

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

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (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");
@@ -76,84 +75,55 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ intersections });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange,
-            filter: this.props.design.filter,
-            onFilterChange: this.handleFilterChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " ",
+                T `Data Source`),
+            ": ",
+            " ",
+            react_1.default.createElement(expressions_ui_2.TableSelectComponent, { 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" }), " ", T `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
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                " ",
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(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: T `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 }) }, T `None`), react_1.default.createElement(ui.Radio, { key: "columns", inline: true, radioValue: "columns", value: this.props.design.striping, onChange: (value) => this.updateDesign({ striping: value }) }, T `Columns`), react_1.default.createElement(ui.Radio, { key: "rows", inline: true, value: this.props.design.striping, radioValue: "rows", onChange: (value) => this.updateDesign({ striping: value }) }, T `Rows`));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `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 }) }, T `None`),
+            react_1.default.createElement(ui.Radio, { key: "columns", inline: true, radioValue: "columns", value: this.props.design.striping, onChange: (value) => this.updateDesign({ striping: value }) }, T `Columns`),
+            react_1.default.createElement(ui.Radio, { key: "rows", inline: true, value: this.props.design.striping, radioValue: "rows", onChange: (value) => this.updateDesign({ striping: value }) }, T `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: T `Columns`,
-            help: T `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: T `Rows`,
-            help: T `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: T `Value`,
-            help: T `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
-        })));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Columns`, help: T `Field to optionally make columns out of` },
+                react_1.default.createElement(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 })),
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Rows`, help: T `Field to optionally make rows out of` },
+                react_1.default.createElement(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 })),
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Value`, help: T `Field show in cells` },
+                react_1.default.createElement(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());
+        return (react_1.default.createElement("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/PivotChartLayoutBuilder.d.ts

@@ -5,6 +5,10 @@ import { PivotChartLayout, PivotChartLayoutCell } from "./PivotChartLayout";
 export type PivotChartData = {
     [intersectionId: string]: any[];
 };
+/**
+ * Builds pivot table layout from the design and data
+ * See PivotChartDesign.ts for more details
+ */
 export default class PivotChartLayoutBuilder {
     schema: Schema;
     exprUtils: ExprUtils;

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

@@ -34,8 +34,10 @@ const PivotChartUtils = __importStar(require("./PivotChartUtils"));
 const canonical_json_1 = __importDefault(require("canonical-json"));
 const maxRows = 500;
 const maxColumns = 50;
-// Builds pivot table layout from the design and data
-// See PivotChart Design.md for more detauls
+/**
+ * Builds pivot table layout from the design and data
+ * See PivotChartDesign.ts for more details
+ */
 class PivotChartLayoutBuilder {
     schema;
     exprUtils;

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

@@ -26,49 +26,10 @@ export default class PivotChartLayoutComponent extends React.Component<PivotChar
     };
     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>;
+    renderRow(row: PivotChartLayoutRow, rowIndex: number): React.JSX.Element;
+    renderHoverPlusIcon: (key: any, x: any, y: any, onClick: any) => React.JSX.Element;
+    renderHoverRemoveIcon: (key: any, x: any, y: any, onClick: any) => React.JSX.Element;
+    renderHoverControls: () => React.JSX.Element | null | undefined;
+    render(): React.JSX.Element;
 }
 export {};

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

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (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"));
@@ -55,28 +54,15 @@ class PivotChartLayoutComponent extends react_1.default.Component {
         }
     };
     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 ?? null }) : 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
+        return react_1.default.createElement("tr", { key: rowIndex }, lodash_1.default.map(row.cells, (cell, columnIndex) => {
+            return react_1.default.createElement(LayoutCellComponent, { ref: this.recordCellComp.bind(null, rowIndex, columnIndex), key: columnIndex, layout: this.props.layout, rowIndex: rowIndex, columnIndex: columnIndex, onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section ?? null }) : 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
-            });
+                    : undefined });
         }));
     }
     renderHoverPlusIcon = (key, x, y, onClick) => {
         // Render a plus box
-        return R("div", {
-            key,
-            onClick,
-            style: {
+        return react_1.default.createElement("div", { key: key, onClick: onClick, style: {
                 position: "absolute",
                 left: x - 7,
                 top: y - 6,
@@ -89,15 +75,12 @@ class PivotChartLayoutComponent extends react_1.default.Component {
                 fontSize: 9,
                 cursor: "pointer",
                 opacity: 0.8
-            }
-        }, R(ui.Icon, { id: "fa-plus" }));
+            } },
+            react_1.default.createElement(ui.Icon, { id: "fa-plus" }));
     };
     renderHoverRemoveIcon = (key, x, y, onClick) => {
         // Render a plus box
-        return R("div", {
-            key,
-            onClick,
-            style: {
+        return react_1.default.createElement("div", { key: key, onClick: onClick, style: {
                 position: "absolute",
                 left: x - 7,
                 top: y - 6,
@@ -110,8 +93,8 @@ class PivotChartLayoutComponent extends react_1.default.Component {
                 fontSize: 9,
                 cursor: "pointer",
                 opacity: 0.8
-            }
-        }, R(ui.Icon, { id: "fa-remove" }));
+            } },
+            react_1.default.createElement(ui.Icon, { id: "fa-remove" }));
     };
     // Render floating hover controls
     renderHoverControls = () => {
@@ -175,18 +158,11 @@ class PivotChartLayoutComponent extends react_1.default.Component {
         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);
+        return react_1.default.createElement("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, `\
+        return react_1.default.createElement("div", { style: { position: "relative" }, onMouseLeave: () => this.setState({ hoverSection: null }) },
+            react_1.default.createElement("style", null, `\
 .pivot-chart-table {
 width: 100%;
 border-spacing: 0;
@@ -214,13 +190,19 @@ vertical-align: top;
 .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" }), T `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" }), T `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()));
+`),
+            this.props.layout.tooManyRows ? (react_1.default.createElement("div", { className: "text-warning", style: { fontSize: 12 } },
+                react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+                T `Warning: Too many rows in table to display`)) : undefined,
+            this.props.layout.tooManyColumns ? (react_1.default.createElement("div", { className: "text-warning", style: { fontSize: 12 } },
+                react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+                T `Warning: Too many columns in table to display`)) : undefined,
+            react_1.default.createElement("div", { style: { position: "relative" } },
+                react_1.default.createElement("table", { className: "pivot-chart-table" },
+                    react_1.default.createElement("tbody", null, lodash_1.default.map(this.props.layout.rows, (row, rowIndex) => {
+                        return this.renderRow(row, rowIndex);
+                    }))),
+                this.renderHoverControls()));
     }
 }
 exports.default = PivotChartLayoutComponent;
@@ -250,12 +232,12 @@ class LayoutCellComponent extends react_1.default.Component {
         if (!cell.section) {
             return null;
         }
-        return R("span", { style: { fontSize: "90%" } }, R("a", { className: "link-plain", onClick: this.props.onEditSection }, T `Edit`), cell.summarize
-            ? [
-                R("span", { className: "text-muted" }, ` / `),
-                R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T `Summarize`)
-            ]
-            : undefined);
+        return react_1.default.createElement("span", { style: { fontSize: "90%" } },
+            react_1.default.createElement("a", { className: "link-plain", onClick: this.props.onEditSection }, T `Edit`),
+            cell.summarize ? [
+                react_1.default.createElement("span", { className: "text-muted" }, " / "),
+                react_1.default.createElement("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T `Summarize`)
+            ] : undefined);
     }
     render() {
         const cell = this.props.layout.rows[this.props.rowIndex].cells[this.props.columnIndex];
@@ -291,10 +273,10 @@ class LayoutCellComponent extends react_1.default.Component {
             textColor = lightness < 0.5 ? "rgb(204,204,204)" : undefined;
         }
         const style = {
-            backgroundColor,
+            backgroundColor: backgroundColor || undefined,
             textAlign: cell.align,
             cursor: isHover && !cell.unconfigured ? "pointer" : undefined,
-            color: textColor
+            color: textColor || undefined
         };
         const classes = (0, classnames_1.default)({
             cell: true,
@@ -318,18 +300,11 @@ class LayoutCellComponent extends react_1.default.Component {
             fontStyle: cell.italic ? "italic" : undefined,
             marginLeft: cell.indent ? cell.indent * 5 : undefined
         };
-        return R("td", {
-            ref: (c) => {
+        return react_1.default.createElement("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"));
+            }, onMouseEnter: this.props.onHover, onClick: this.handleClick, className: classes, style: style, colSpan: cell.columnSpan || undefined, rowSpan: cell.rowSpan || undefined },
+            react_1.default.createElement("span", { style: innerStyle }, cell.unconfigured && this.props.onEditSection
+                ? this.renderUnconfigured(cell)
+                : cell.text || "\u00A0\u00A0\u00A0"));
     }
 }

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

@@ -1,5 +1,4 @@
 import React from "react";
-import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Schema } from "@mwater/expressions";
 import { PivotChartSegment } from "./PivotChartDesign";
 export interface SegmentDesignerComponentProps {
@@ -27,73 +26,13 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
     handleFilterChange: (filter: any) => any;
     handleOrderExprChange: (orderExpr: any) => any;
     handleOrderDirChange: (orderDir: any) => any;
-    renderMode(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderLabel(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
+    renderMode(): React.JSX.Element;
+    renderLabel(): React.JSX.Element;
     renderValueAxis(): React.JSX.Element;
-    renderFilter(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderStyling(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderBorders(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderOrderExpr(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderFilter(): React.JSX.Element;
+    renderStyling(): React.JSX.Element;
+    renderBorders(): React.JSX.Element;
+    renderOrderExpr(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};