@mwater/visualization 5.4.4 → 5.5.0

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

@@ -440,5 +440,161 @@ class PivotChart extends Chart_1.default {
             }
         });
     }
+    // Override to indicate this chart supports XLSX export
+    supportsXlsxExport() {
+        return true;
+    }
+    // Creates a SheetJS workbook for the pivot chart data
+    createXlsxWorkbook(design, schema, dataSource, data, locale) {
+        // Import XLSX here to ensure it's available
+        const XLSX = require("xlsx-js-style");
+        const Color = require("color");
+        // Create a new workbook
+        const workbook = XLSX.utils.book_new();
+        // Build layout using the layout builder 
+        const layoutBuilder = new PivotChartLayoutBuilder_1.default({ schema });
+        const layout = layoutBuilder.buildLayout(design, data, locale);
+        // Create a 2D array for the worksheet data
+        const wsData = [];
+        // Process each row in the layout
+        layout.rows.forEach(layoutRow => {
+            const rowData = [];
+            // Process each cell in the row
+            layoutRow.cells.forEach(cell => {
+                // For skipped cells, still add an empty placeholder
+                if (cell.skip) {
+                    rowData.push({ v: "", s: {} });
+                    return;
+                }
+                // Create cell value and style
+                const cellObj = {
+                    v: cell.text === null || cell.text === undefined ? "" : cell.text,
+                    s: {}
+                };
+                // Apply alignment based on cell type and subtype
+                if (cell.align === "right") {
+                    cellObj.s.alignment = { horizontal: "right" };
+                }
+                else if (cell.align === "center") {
+                    cellObj.s.alignment = { horizontal: "center" };
+                }
+                else {
+                    cellObj.s.alignment = { horizontal: "left" };
+                }
+                // Apply styles based on cell properties
+                if (cell.bold) {
+                    cellObj.s.font = { ...cellObj.s.font, bold: true };
+                }
+                if (cell.italic) {
+                    cellObj.s.font = { ...cellObj.s.font, italic: true };
+                }
+                // Apply background color if present
+                if (cell.backgroundColor) {
+                    try {
+                        const color = Color(cell.backgroundColor);
+                        const hex = color.hex().substring(1); // Remove #
+                        cellObj.s.fill = {
+                            patternType: "solid",
+                            fgColor: { rgb: hex },
+                            bgColor: { rgb: hex }
+                        };
+                        // Adjust text color based on background lightness
+                        const lightness = color.luminosity();
+                        cellObj.s.font = {
+                            ...cellObj.s.font,
+                            color: { rgb: lightness < 0.3 ? "FFFFFF" : "000000" }
+                        };
+                    }
+                    catch (e) {
+                        // Silently ignore color errors
+                    }
+                }
+                // Apply borders
+                const borders = {};
+                if (cell.borderTop) {
+                    const style = cell.borderTop === 1 ? "thin" : cell.borderTop === 2 ? "medium" : "thick";
+                    borders.top = { style };
+                }
+                if (cell.borderBottom) {
+                    const style = cell.borderBottom === 1 ? "thin" : cell.borderBottom === 2 ? "medium" : "thick";
+                    borders.bottom = { style };
+                }
+                if (cell.borderLeft) {
+                    const style = cell.borderLeft === 1 ? "thin" : cell.borderLeft === 2 ? "medium" : "thick";
+                    borders.left = { style };
+                }
+                if (cell.borderRight) {
+                    const style = cell.borderRight === 1 ? "thin" : cell.borderRight === 2 ? "medium" : "thick";
+                    borders.right = { style };
+                }
+                if (Object.keys(borders).length > 0) {
+                    cellObj.s.border = borders;
+                }
+                rowData.push(cellObj);
+            });
+            wsData.push(rowData);
+        });
+        // Create a worksheet from the data
+        const worksheet = XLSX.utils.aoa_to_sheet(wsData);
+        // Process merged cells
+        const merges = [];
+        // Track current row and column position
+        let rowOffset = 0;
+        // Traverse layout again to collect merge info
+        layout.rows.forEach((layoutRow, rowIndex) => {
+            let colOffset = 0;
+            layoutRow.cells.forEach((cell, colIndex) => {
+                // Skip cells that are part of spans (already handled)
+                if (cell.skip) {
+                    colOffset++;
+                    return;
+                }
+                // Handle row spans
+                if (cell.rowSpan && cell.rowSpan > 1) {
+                    merges.push({
+                        s: { r: rowOffset, c: colOffset },
+                        e: { r: rowOffset + cell.rowSpan - 1, c: colOffset }
+                    });
+                }
+                // Handle column spans
+                if (cell.columnSpan && cell.columnSpan > 1) {
+                    merges.push({
+                        s: { r: rowOffset, c: colOffset },
+                        e: { r: rowOffset, c: colOffset + cell.columnSpan - 1 }
+                    });
+                }
+                colOffset++;
+            });
+            rowOffset++;
+        });
+        // Apply merges to worksheet
+        if (merges.length > 0) {
+            worksheet["!merges"] = merges;
+        }
+        // Set column widths based on content
+        const colWidths = [];
+        if (wsData.length > 0) {
+            for (let colIndex = 0; colIndex < wsData[0].length; colIndex++) {
+                // Start with reasonable default width
+                let maxWidth = 10;
+                // Check all rows for this column
+                for (let rowIndex = 0; rowIndex < wsData.length; rowIndex++) {
+                    const cell = wsData[rowIndex][colIndex];
+                    if (cell && cell.v) {
+                        maxWidth = Math.max(maxWidth, String(cell.v).length);
+                    }
+                }
+                // Add some padding and cap at 50 characters
+                colWidths.push(Math.min(maxWidth + 2, 50));
+            }
+            worksheet['!cols'] = colWidths.map(width => ({ wch: width }));
+        }
+        // Add the worksheet to the workbook
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Pivot Table");
+        // Convert workbook to blob
+        const workbookBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+        const blob = new Blob([workbookBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+        return blob;
+    }
 }
 exports.default = PivotChart;

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.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";
 export interface PivotChartDesignerComponentProps {
     design: any;
@@ -19,24 +18,10 @@ export default class PivotChartDesignerComponent extends React.Component<PivotCh
     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<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup> | null;
-    renderSetup(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderTable(): React.JSX.Element;
+    renderFilter(): React.JSX.Element | null;
+    renderStriping(): React.JSX.Element | null;
+    renderSetup(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

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"));
     }
 }