svg-table 0.0.1

package/dist/tableSvg.js

@@ -0,0 +1,634 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elementInfoFrom = elementInfoFrom;
+exports.createTable = createTable;
+exports.tableId = tableId;
+var d3_1 = require("d3");
+var tableUtils_1 = require("./tableUtils");
+var tableData_1 = require("./tableData");
+var stylings_1 = require("./stylings");
+var data_frame_ts_1 = require("data-frame-ts");
+var tableFormatter_1 = require("./tableFormatter");
+function textAnchorFrom(align) {
+    switch (align) {
+        case "left":
+            return "start";
+        case "center":
+            return "middle";
+        case "right":
+            return "end";
+    }
+}
+function dominantBaselineFrom(align) {
+    switch (align) {
+        case "top":
+            return "hanging";
+        case "middle":
+            return "central";
+        case "bottom":
+            return "auto";
+    }
+}
+function elementInfoFrom(textSelection, cellSelection, borderSelection, cellStyle) {
+    return {
+        cellSelection: cellSelection,
+        textSelection: textSelection,
+        borderSelection: borderSelection,
+        textWidth: (0, tableUtils_1.textWidthOf)(textSelection),
+        textHeight: (0, tableUtils_1.textHeightOf)(textSelection),
+        cellStyle: cellStyle
+    };
+}
+// export class SvgTable<V> {
+//     private constructor(
+//         private readonly uniqueTableId: string,
+//         private readonly tableSelection: GSelection,
+//         private readonly renderingInfo: TableRenderingInfo,
+//         private readonly styledTable: StyledTable<V>,
+//         private readonly container: SVGSVGElement,
+//         private readonly coordinates: [x: number, y: number] | ((width: number, height: number) => [x: number, y: number])
+//     ) {
+//     }
+//
+//     static createTable<V>(
+//         styledTable: StyledTable<V>,
+//         container: SVGSVGElement,
+//         uniqueTableId: string,
+//         coordinates: [x: number, y: number] | ((width: number, height: number) => [x: number, y: number])
+//     ): Result<SvgTable<V>, string> {
+//         // return new SvgTable(styledTable, container, uniqueTableId, coordinates)
+//         // grab a copy of the data as a data-frame
+//         const tableData = styledTable.tableData()
+//
+//         // add the group <g> representing the table, to which all the elements will be added, and
+//         // the group will be translated to the mouse (x, y) coordinates as appropriate
+//         const tableSelection = select<SVGSVGElement | null, any>(container)
+//             .append('g')
+//             .attr('id', tableId(uniqueTableId))
+//             .attr('class', 'tooltip')
+//             .style('fill', styledTable.tableBackground().color)
+//             .style('font-family', styledTable.tableFont().family)
+//             .style('font-size', styledTable.tableFont().size)
+//             .style('font-weight', styledTable.tableFont().weight)
+//
+//         // creates an SVG group to hold the column header (if there is one), and
+//         // then add a cell for each column header element
+//         const {data: columnHeaders} = createColumnHeaderPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable)
+//         const {columnHeader, data: rowHeaders, footer} = createRowHeaderPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable)
+//         const {rowHeader, data: footers} = createFooterPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable)
+//         const data = createDataPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable)
+//
+//         const {top, left} = styledTable.tablePadding()
+//
+//         return TableData
+//             .fromDataFrame<ElementPlacementInfo>(data)
+//             // the column header doesn't need to deal with the value providers, because it is
+//             // the first one added and so there are no row-headers or footers yet.
+//             .withColumnHeader(columnHeaders)
+//             .flatMap(td => td.withRowHeader(
+//                 rowHeaders,
+//                 defaultFormatting<ElementPlacementInfo>(),
+//                 () => columnHeader,
+//                 () => footer
+//             ))
+//             .flatMap(td => td.withFooter(
+//                 footers,
+//                 defaultFormatting<ElementPlacementInfo>(),
+//                 () => rowHeader
+//             ))
+//             .map(td => {
+//                 const info = calculateRenderingInfo(td, styledTable, coordinates)
+//                 tableSelection.attr('transform', `translate(${info.tableX + left}, ${info.tableY + top})`)
+//                 return info
+//             })
+//             .map(renderingInfo => placeTextInTable(renderingInfo))
+//             .map(renderingInfo => new SvgTable(uniqueTableId, tableSelection, renderingInfo, styledTable, container, coordinates))
+//     }
+//
+//     private static updateTable<V>(
+//         styledTable: StyledTable<V>,
+//         container: SVGSVGElement,
+//         uniqueTableId: string,
+//         coordinates: [x: number, y: number] | ((width: number, height: number) => [x: number, y: number])
+//     ): Result<SvgTable<V>, string> {
+//         const {top, left} = styledTable.tablePadding()
+//
+//         return TableData
+//             .fromDataFrame<ElementPlacementInfo>(data)
+//             // the column header doesn't need to deal with the value providers, because it is
+//             // the first one added and so there are no row-headers or footers yet.
+//             .withColumnHeader(columnHeaders)
+//             .flatMap(td => td.withRowHeader(
+//                 rowHeaders,
+//                 defaultFormatting<ElementPlacementInfo>(),
+//                 () => columnHeader,
+//                 () => footer
+//             ))
+//             .flatMap(td => td.withFooter(
+//                 footers,
+//                 defaultFormatting<ElementPlacementInfo>(),
+//                 () => rowHeader
+//             ))
+//             .map(td => {
+//                 const info = calculateRenderingInfo(td, styledTable, coordinates)
+//                 tableSelection.attr('transform', `translate(${info.tableX + left}, ${info.tableY + top})`)
+//                 return info
+//             })
+//             .map(renderingInfo => placeTextInTable(renderingInfo))
+//             .map(renderingInfo => new SvgTable(uniqueTableId, tableSelection, renderingInfo, styledTable, container, coordinates))
+//     }
+// }
+/**
+ * Creates the table
+ * @param styledTable
+ * @param container
+ * @param uniqueTableId
+ * @param coordinates
+ */
+function createTable(styledTable, container, uniqueTableId, coordinates) {
+    // grab a copy of the data as a data-frame
+    var tableData = styledTable.tableData();
+    // add the group <g> representing the table, to which all the elements will be added, and
+    // the group will be translated to the mouse (x, y) coordinates as appropriate
+    var tableSelection = (0, d3_1.select)(container)
+        .append('g')
+        .attr('id', tableId(uniqueTableId))
+        .attr('class', 'tooltip')
+        .style('fill', styledTable.tableBackground().color)
+        .style('font-family', styledTable.tableFont().family)
+        .style('font-size', styledTable.tableFont().size)
+        .style('font-weight', styledTable.tableFont().weight);
+    // creates an SVG group to hold the column header (if there is one), and
+    // then add a cell for each column header element
+    var columnHeaders = createColumnHeaderPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable).data;
+    var _a = createRowHeaderPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable), columnHeader = _a.columnHeader, rowHeaders = _a.data, footer = _a.footer;
+    var _b = createFooterPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable), rowHeader = _b.rowHeader, footers = _b.data;
+    var data = createDataPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable);
+    var _c = styledTable.tablePadding(), top = _c.top, left = _c.left;
+    return tableData_1.TableData
+        .fromDataFrame(data)
+        // the column header doesn't need to deal with the value providers, because it is
+        // the first one added and so there are no row-headers or footers yet.
+        .withColumnHeader(columnHeaders)
+        .flatMap(function (td) { return td.withRowHeader(rowHeaders, (0, tableFormatter_1.defaultFormatting)(), function () { return columnHeader; }, function () { return footer; }); })
+        .flatMap(function (td) { return td.withFooter(footers, (0, tableFormatter_1.defaultFormatting)(), function () { return rowHeader; }); })
+        .map(function (td) {
+        var info = calculateRenderingInfo(td, styledTable, coordinates);
+        tableSelection.attr('transform', "translate(".concat(info.tableX + left, ", ").concat(info.tableY + top, ")"));
+        return info;
+    })
+        .map(function (renderingInfo) { return placeTextInTable(renderingInfo); });
+}
+/*
+    HELPER STUFF
+ */
+/*
+    Add all the SVG elements representing the table and then update the
+    coordinates for each of those elements to make a table
+ */
+var ELEMENT_TYPE_ID;
+(function (ELEMENT_TYPE_ID) {
+    ELEMENT_TYPE_ID["ROW_HEADER"] = "row-header";
+    ELEMENT_TYPE_ID["COLUMN_HEADER"] = "column-header";
+    ELEMENT_TYPE_ID["DATA"] = "data";
+    ELEMENT_TYPE_ID["FOOTER"] = "footer";
+    ELEMENT_TYPE_ID["CELL_TEXT"] = "cell-data";
+    ELEMENT_TYPE_ID["CELL"] = "cell";
+})(ELEMENT_TYPE_ID || (ELEMENT_TYPE_ID = {}));
+function tableId(uniqueTableId) {
+    return "svg-table-group-".concat(uniqueTableId);
+}
+function columnHeaderGroupId(uniqueTableId) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.COLUMN_HEADER, "-group-").concat(uniqueTableId);
+}
+function rowHeaderGroupId(uniqueTableId) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.ROW_HEADER, "-group-").concat(uniqueTableId);
+}
+function footerGroupId(uniqueTableId) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.FOOTER, "-group-").concat(uniqueTableId);
+}
+function dataGroupId(uniqueTableId) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.DATA, "-group-").concat(uniqueTableId);
+}
+function cellTextId(uniqueTableId, rowIndex, columnIndex) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.CELL_TEXT, "-").concat(rowIndex, "-").concat(columnIndex, "-").concat(uniqueTableId);
+}
+function cellId(uniqueTableId, rowIndex, columnIndex) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.CELL, "-").concat(rowIndex, "-").concat(columnIndex, "-").concat(uniqueTableId);
+}
+function borderId(uniqueTableId, location, rowIndex, columnIndex) {
+    return "svg-table-".concat(ELEMENT_TYPE_ID.CELL, "-").concat(rowIndex, "-").concat(columnIndex, "-border-").concat(location, "-").concat(uniqueTableId);
+}
+function createCellSelection(uniqueTableId, rowIndex, columnIndex, groupSelection, style) {
+    return groupSelection
+        .append("rect")
+        .attr('id', cellId(uniqueTableId, rowIndex, columnIndex))
+        .style('fill', style.background.color)
+        .style('fill-opacity', style.background.opacity);
+}
+function createBorderSelection(uniqueTableId, rowIndex, columnIndex, groupSelection, style) {
+    var borderSelection = {};
+    if (style.border.top) {
+        borderSelection.top = groupSelection
+            .append("line")
+            .attr('id', borderId(uniqueTableId, stylings_1.BorderLocation.TOP, rowIndex, columnIndex))
+            .style('stroke', style.border.top.color)
+            .style('stroke-width', style.border.top.width);
+    }
+    if (style.border.bottom) {
+        borderSelection.bottom = groupSelection
+            .append("line")
+            .attr('id', borderId(uniqueTableId, stylings_1.BorderLocation.BOTTOM, rowIndex, columnIndex))
+            .style('stroke', style.border.bottom.color)
+            .style('stroke-width', style.border.bottom.width);
+    }
+    if (style.border.left) {
+        borderSelection.left = groupSelection
+            .append("line")
+            .attr('id', borderId(uniqueTableId, stylings_1.BorderLocation.LEFT, rowIndex, columnIndex))
+            .style('stroke', style.border.left.color)
+            .style('stroke-width', style.border.left.width);
+    }
+    if (style.border.right) {
+        borderSelection.right = groupSelection
+            .append("line")
+            .attr('id', borderId(uniqueTableId, stylings_1.BorderLocation.RIGHT, rowIndex, columnIndex))
+            .style('stroke', style.border.right.color)
+            .style('stroke-width', style.border.right.width);
+    }
+    return borderSelection;
+}
+function createTextSelection(uniqueTableId, rowIndex, columnIndex, groupSelection, style, element) {
+    return groupSelection
+        .append("text")
+        .attr('id', cellTextId(uniqueTableId, rowIndex, columnIndex))
+        .style('font-family', style.font.family)
+        .style('font-size', style.font.size)
+        .style('font-weight', style.font.weight)
+        .style('fill', style.font.color)
+        .text(function () { return "".concat(element); });
+}
+function createColumnHeaderPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable) {
+    return tableData.columnHeader(true)
+        .map(function (columnHeader) {
+        var groupSelection = tableSelection
+            .append('g')
+            .attr('id', columnHeaderGroupId(uniqueTableId))
+            .attr('class', 'tooltip-table-header');
+        return columnHeader.map(function (header, columnIndex) {
+            // the style with the highest priority for the cell
+            var style = styledTable
+                .stylesForTableCoordinates(0, columnIndex)
+                .getOrElse(__assign({}, stylings_1.defaultCellStyle));
+            var cellSelection = createCellSelection(uniqueTableId, 0, columnIndex, groupSelection, style);
+            var borderSelection = createBorderSelection(uniqueTableId, 0, columnIndex, groupSelection, style);
+            var textSelection = createTextSelection(uniqueTableId, 0, columnIndex, groupSelection, style, header);
+            return elementInfoFrom(textSelection, cellSelection, borderSelection, __assign({}, style));
+        });
+    })
+        .map(function (columnHeader) {
+        var rowHeaderElem = tableData.hasRowHeader() ? columnHeader.shift() : undefined;
+        return { rowHeader: rowHeaderElem, data: columnHeader };
+    })
+        .getOrElse({ rowHeader: undefined, data: [] });
+}
+/**
+ *
+ * @param tableData
+ * @param tableSelection
+ * @param uniqueTableId
+ * @param styledTable
+ */
+function createRowHeaderPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable) {
+    return tableData
+        .rowHeader(true, true)
+        .map(function (rowHeader) {
+        var groupSelection = tableSelection
+            .append('g')
+            .attr('id', rowHeaderGroupId(uniqueTableId))
+            .attr('class', 'tooltip-table-row-header')
+            .style('fill', styledTable.rowHeaderStyle()
+            .map(function (styling) { return styling.style.background.color; })
+            .getOrElse(stylings_1.defaultRowHeaderStyle.background.color));
+        return rowHeader.map(function (header, rowIndex) {
+            // the style with the highest priority for the cell
+            var style = styledTable
+                .stylesForTableCoordinates(rowIndex, 0)
+                .getOrElse(__assign({}, stylings_1.defaultCellStyle));
+            var cellSelection = createCellSelection(uniqueTableId, rowIndex, 0, groupSelection, style);
+            var borderSelection = createBorderSelection(uniqueTableId, rowIndex, 0, groupSelection, style);
+            var textSelection = createTextSelection(uniqueTableId, rowIndex, 0, groupSelection, style, header);
+            return elementInfoFrom(textSelection, cellSelection, borderSelection, __assign({}, style));
+        });
+    })
+        .map(function (rowHeader) {
+        var columnHeaderElem = tableData.hasRowHeader() ? rowHeader.shift() : undefined;
+        var footerElem = tableData.hasFooter() ? rowHeader.pop() : undefined;
+        return { columnHeader: columnHeaderElem, data: rowHeader, footer: footerElem };
+    })
+        .getOrElse({ columnHeader: undefined, data: [], footer: undefined });
+}
+/**
+ *
+ * @param tableData
+ * @param tableSelection
+ * @param uniqueTableId
+ * @param styledTable
+ */
+function createFooterPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable) {
+    return tableData
+        .footer(true)
+        .map(function (footer) {
+        var groupSelection = tableSelection
+            .append('g')
+            .attr('id', footerGroupId(uniqueTableId))
+            .attr('class', 'tooltip-table-footer')
+            .style('fill', styledTable.columnHeaderStyle()
+            .map(function (styling) { return styling.style.background.color; })
+            .getOrElse(stylings_1.defaultFooterStyle.background.color));
+        return footer.map(function (ftr, columnIndex) {
+            // the style with the highest priority for the cell
+            var style = styledTable
+                .stylesForTableCoordinates(footer.length - 1, columnIndex)
+                .getOrElse(__assign({}, stylings_1.defaultCellStyle));
+            var cellSelection = createCellSelection(uniqueTableId, footer.length - 1, columnIndex, groupSelection, style);
+            var borderSelection = createBorderSelection(uniqueTableId, footer.length - 1, columnIndex, groupSelection, style);
+            var textSelection = createTextSelection(uniqueTableId, footer.length - 1, columnIndex, groupSelection, style, ftr);
+            return elementInfoFrom(textSelection, cellSelection, borderSelection, __assign({}, style));
+        });
+    })
+        .map(function (footer) {
+        var rowHeaderElem = tableData.hasRowHeader() ? footer.shift() : undefined;
+        return { rowHeader: rowHeaderElem, data: footer };
+    })
+        .getOrElse({ rowHeader: undefined, data: [] });
+}
+/**
+ *
+ * @param tableData
+ * @param tableSelection
+ * @param uniqueTableId
+ * @param styledTable
+ */
+function createDataPlacementInfo(tableData, tableSelection, uniqueTableId, styledTable) {
+    // when the table has a column header, then the data starts at row 1
+    // otherwise, the data starts at row 0
+    var rowOffset = tableData.hasRowHeader() ? 1 : 0;
+    var columnOffset = tableData.hasColumnHeader() ? 1 : 0;
+    return tableData
+        .data()
+        .map(function (df) {
+        var groupSelection = tableSelection
+            .append('g')
+            .attr('class', 'tooltip-table-data')
+            .attr('id', dataGroupId(uniqueTableId));
+        //
+        return df.mapElements(function (element, rowIndex, columnIndex) {
+            // the style with the highest priority for the cell
+            var style = styledTable
+                .stylesForTableCoordinates(rowIndex + rowOffset, columnIndex + columnOffset)
+                .getOrElse(__assign({}, stylings_1.defaultCellStyle));
+            var cellSelection = createCellSelection(uniqueTableId, rowIndex + rowOffset, columnIndex + columnOffset, groupSelection, style);
+            var borderSelection = createBorderSelection(uniqueTableId, rowIndex + rowOffset, columnIndex + columnOffset, groupSelection, style);
+            var textSelection = createTextSelection(uniqueTableId, rowIndex + rowOffset, columnIndex + columnOffset, groupSelection, style, element);
+            return elementInfoFrom(textSelection, cellSelection, borderSelection, __assign({}, style));
+        });
+    })
+        .getOrElse(data_frame_ts_1.DataFrame.empty());
+}
+/**
+ * Calculates the
+ * 1. table width and height,
+ * 2. width of each column in the table,
+ * 3. height of each row in the table,
+ * 4.
+ *
+ * @param tableData
+ * @param styledTable
+ * @param coordinates
+ */
+function calculateRenderingInfo(tableData, styledTable, coordinates) {
+    /**
+     * Calculates the min and max values for the extracted value from the cell
+     * @param elements An array of rows (data frame row slices) or columns (data
+     * frame column slices)
+     * @param extractor
+     */
+    function minMaxFor(elements, extractor) {
+        return elements.reduce(function (minMax, row) {
+            var cellValue = row.map(function (cell) { return Math.ceil(extractor(cell)); });
+            var min = minMax.min, max = minMax.max, minValues = minMax.minValues, maxValues = minMax.maxValues;
+            var mins = Math.min.apply(Math, __spreadArray([], __read(cellValue), false));
+            minValues.push(mins);
+            var maxes = Math.max.apply(Math, __spreadArray([], __read(cellValue), false));
+            maxValues.push(maxes);
+            return {
+                minValues: minValues,
+                min: Math.min(min, mins),
+                maxValues: maxValues,
+                max: Math.max(max, maxes)
+            };
+        }, { min: Infinity, max: -Infinity, minValues: [], maxValues: [] });
+    }
+    var df = tableData.unwrapDataFrame();
+    // 1. calculate the bounding box for the element
+    // 2. calculate the cell width/height using the bounding width/height and the
+    //    maximum and minimum cell width/height from the styling
+    var whdf = df.mapElements(function (element, rowIndex, columnIndex) {
+        // grab the style for the cell
+        var style = styledTable
+            .stylesForTableCoordinates(rowIndex, columnIndex)
+            .getOrElse(__assign({}, stylings_1.defaultCellStyle));
+        // calculate the actual width and height of the cell
+        var _a = calculateCellDimensions(style, element.textWidth, element.textHeight), width = _a.width, height = _a.height;
+        return __assign(__assign({}, element), { cellWidth: width, cellHeight: height });
+    });
+    // 3. calculate the cell width for each column based on the max and min width of
+    //    all the cells in the column
+    // 4. calculate the cell height for each row based on the max and min height of
+    //    all the cells in the row
+    // 5. calculate the table width/height by adding up all the column-widths/row-heights
+    // 6. calculate the (x, y)-coordinates of the text for each cell
+    // 7. update each cell's coordinates (here we need to update the header groups, footer
+    //    groups, and then the cell's coordinates relative to their group.. :()
+    var minMaxColumnWidths = minMaxFor(whdf.columnSlices(), function (cell) { return cell.cellWidth; });
+    var minMaxRowHeights = minMaxFor(whdf.rowSlices(), function (cell) { return cell.cellHeight; });
+    var columnWidths = df.columnSlices().map(function (_, index) {
+        if (index === 0 && tableData.hasRowHeader()) {
+            return styledTable.rowHeaderStyle()
+                // todo update the styling for the row-headers to include the width and the min and max width
+                .map(function (_) { return minMaxColumnWidths.maxValues[index]; })
+                .getOrElse(Math.max(stylings_1.defaultColumnStyle.dimension.minWidth, Math.min(stylings_1.defaultColumnStyle.dimension.maxWidth, minMaxColumnWidths.maxValues[index])));
+        }
+        return styledTable.columnStyleFor(index)
+            .map(function (styling) { return Math.max(styling.style.dimension.minWidth, Math.min(styling.style.dimension.maxWidth, minMaxColumnWidths.maxValues[index])); })
+            .getOrElse(Math.max(stylings_1.defaultColumnStyle.dimension.minWidth, Math.min(stylings_1.defaultColumnStyle.dimension.maxWidth, minMaxColumnWidths.maxValues[index])));
+    });
+    var rowHeights = df.rowSlices().map(function (_, index) {
+        if (index === 0 && tableData.hasColumnHeader()) {
+            return styledTable.columnHeaderStyle()
+                .map(function (styling) { return Math.max(styling.style.dimension.minHeight, Math.min(styling.style.dimension.maxHeight, minMaxRowHeights.maxValues[index])); })
+                .getOrElse(Math.max(stylings_1.defaultRowStyle.dimension.minHeight, Math.min(stylings_1.defaultRowStyle.dimension.maxHeight, minMaxRowHeights.maxValues[index])));
+        }
+        return styledTable.rowStyleFor(index)
+            .map(function (styling) { return Math.max(styling.style.dimension.minHeight, Math.min(styling.style.dimension.maxHeight, minMaxRowHeights.maxValues[index])); })
+            .getOrElse(Math.max(stylings_1.defaultRowStyle.dimension.minHeight, Math.min(stylings_1.defaultRowStyle.dimension.maxHeight, minMaxRowHeights.maxValues[index])));
+    });
+    var dimAdjustedDf = df
+        .mapElements(function (element, rowIndex, columnIndex) {
+        return (__assign(__assign({}, element), { cellStyle: __assign(__assign({}, element.cellStyle), { dimension: __assign(__assign({}, element.cellStyle.dimension), { width: columnWidths[columnIndex], height: rowHeights[rowIndex] }) }) }));
+    });
+    // todo gross as shit, is there a better way
+    var cumColumnWidths = columnWidths.reduce(function (sum, curr, index) {
+        sum.push(Math.ceil(curr) + sum[index]);
+        return sum;
+    }, [0]);
+    var cumRowHeights = rowHeights.reduce(function (sum, curr, index) {
+        sum.push(Math.ceil(curr) + sum[index]);
+        return sum;
+    }, [0]);
+    var positionAdjustedDf = dimAdjustedDf
+        .mapElements(function (element, rowIndex, columnIndex) {
+        var cellWidth = element.cellStyle.dimension.width;
+        var cellHeight = element.cellStyle.dimension.height;
+        return __assign(__assign({}, element), { width: cellWidth, height: cellHeight, x: cumColumnWidths[columnIndex] + textXOffset(element, cellWidth), y: cumRowHeights[rowIndex] + textYOffset(element, cellHeight), cellX: cumColumnWidths[columnIndex], cellY: cumRowHeights[rowIndex] });
+    });
+    var tableWidth = columnWidths.reduce(function (sum, width) { return sum + width; }, 0);
+    var tableHeight = rowHeights.reduce(function (sum, height) { return sum + height; }, 0);
+    var _a = __read((Array.isArray(coordinates)) ? coordinates : coordinates(tableWidth, tableWidth), 2), x = _a[0], y = _a[1];
+    return {
+        tableWidth: tableWidth,
+        tableHeight: tableHeight,
+        tableX: x,
+        tableY: y,
+        renderingInfo: tableData_1.TableData.fromDataFrame(positionAdjustedDf)
+    };
+}
+/**
+ * Calculates the row and column dimensions based on the min and max width and hieght of
+ * the cells.
+ * @param style
+ * @param width
+ * @param height
+ */
+function calculateCellDimensions(style, width, height) {
+    return {
+        width: Math.max(Math.min(width + style.padding.left + style.padding.right, style.dimension.maxWidth), style.dimension.minWidth),
+        height: Math.max(Math.min(height + style.padding.top + style.padding.bottom, style.dimension.maxHeight), style.dimension.minHeight)
+    };
+}
+/**
+ * Calculates the x-offset of the text with the cell
+ * @param element The element to render
+ * @param cellWidth The width of the cell into which the text is rendered
+ */
+function textXOffset(element, cellWidth) {
+    switch (element.cellStyle.alignText) {
+        case "left":
+            return element.cellStyle.padding.left;
+        case "center":
+            return cellWidth / 2;
+        case "right":
+            return cellWidth - element.cellStyle.padding.right;
+        default:
+            return cellWidth / 2;
+    }
+}
+function textYOffset(element, cellHeight) {
+    switch (element.cellStyle.verticalAlignText) {
+        case "top":
+            return element.cellStyle.padding.top;
+        case "middle":
+            return cellHeight / 2;
+        case "bottom":
+            return cellHeight - element.cellStyle.padding.bottom;
+        default:
+            return cellHeight / 2;
+    }
+}
+/**
+ * Places the text into the table at its (x, y) coordinates, and returns the {@link TableData} holding
+ * the updated values.
+ * @param tableRenderingInfo The information for rendering the text as a table
+ * @return A {@link TableData} holding the updated values.
+ */
+function placeTextInTable(tableRenderingInfo) {
+    var updatedDf = tableRenderingInfo.renderingInfo.unwrapDataFrame()
+        .mapElements(function (info) {
+        info.cellSelection
+            .attr('width', info.width)
+            .attr('height', info.height)
+            .attr('transform', "translate(".concat(info.cellX, ", ").concat(info.cellY, ")"));
+        info.textSelection
+            .attr('text-anchor', textAnchorFrom(info.cellStyle.alignText))
+            .attr('dominant-baseline', dominantBaselineFrom(info.cellStyle.verticalAlignText))
+            .attr('transform', "translate(".concat(info.x, ", ").concat(info.y, ")"));
+        if (info.borderSelection.top) {
+            info.borderSelection.top
+                .attr('x1', info.cellX)
+                .attr('y1', info.cellY)
+                .attr('x2', info.cellX + info.width)
+                .attr('y2', info.cellY);
+        }
+        if (info.borderSelection.bottom) {
+            info.borderSelection.bottom
+                .attr('x1', info.cellX)
+                .attr('y1', info.cellY + info.height)
+                .attr('x2', info.cellX + info.width)
+                .attr('y2', info.cellY + info.height);
+        }
+        if (info.borderSelection.right) {
+            info.borderSelection.right
+                .attr('x1', info.cellX + info.width)
+                .attr('y1', info.cellY)
+                .attr('x2', info.cellX + info.width)
+                .attr('y2', info.cellY + info.height);
+        }
+        if (info.borderSelection.left) {
+            info.borderSelection.left
+                .attr('x1', info.cellX)
+                .attr('y1', info.cellY)
+                .attr('x2', info.cellX)
+                .attr('y2', info.cellY + info.height);
+        }
+        return info;
+    });
+    return __assign(__assign({}, tableRenderingInfo), { renderingInfo: tableData_1.TableData.fromDataFrame(updatedDf) });
+}
+//# sourceMappingURL=tableSvg.js.map