@hpcc-js/html 2.43.0 → 3.1.0

package/dist/index.es6.js

@@ -1,1026 +0,0 @@
-import { select, HTMLWidget, format } from '@hpcc-js/common';
-import { scopedLogger } from '@hpcc-js/util';
-
-var PKG_NAME = "@hpcc-js/html";
-var PKG_VERSION = "2.43.0";
-var BUILD_VERSION = "2.106.0";
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-var extendStatics = function(d, b) {
-  extendStatics = Object.setPrototypeOf ||
-      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-      function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-  return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-  if (typeof b !== "function" && b !== null)
-      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-  extendStatics(d, b);
-  function __() { this.constructor = d; }
-  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-function __spreadArray(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));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var HTMLTooltip = /** @class */ (function (_super) {
-    __extends(HTMLTooltip, _super);
-    function HTMLTooltip() {
-        var _this = _super.call(this) || this;
-        _this._tooltipHTMLCallback = function (data) { return "<b>_tooltipHTMLCallback is undefined</b>"; };
-        _this._logger = scopedLogger("html/HTMLTooltip");
-        _this._closing = false;
-        _this.visible(false);
-        return _this;
-    }
-    HTMLTooltip.prototype.tooltipHTML = function (_) {
-        this._tooltipHTMLCallback = _;
-        return this;
-    };
-    HTMLTooltip.prototype.tooltipContent = function (_) {
-        if (!arguments.length)
-            return this._contentNode;
-        this._contentNode = _;
-        return this;
-    };
-    HTMLTooltip.prototype.triggerElement = function (_) {
-        this._triggerElement = _;
-        return this;
-    };
-    HTMLTooltip.prototype.enter = function (domNode, element) {
-        _super.prototype.enter.call(this, domNode, element);
-        var body = select("body");
-        this._tooltipElement = body.append("div")
-            .attr("class", "tooltip-div")
-            .style("z-index", "2147483638")
-            .style("position", "fixed");
-        this._arrowElement = body.append("div")
-            .attr("class", "arrow-div")
-            .style("z-index", "2147483638")
-            .style("position", "fixed");
-    };
-    HTMLTooltip.prototype.update = function (domNode, element) {
-        var _this = this;
-        _super.prototype.update.call(this, domNode, element);
-        if (this._contentNode !== this._prevContentNode) {
-            var node = this._tooltipElement.node();
-            __spreadArray([], node.querySelectorAll("*"), true).map(function (n) { return n.__data__; })
-                .filter(function (n) { return n; })
-                .forEach(function (w) {
-                if (typeof w.target === "function") {
-                    w.target(null);
-                }
-                if (typeof w.exit === "function") {
-                    w.exit();
-                }
-            });
-            node.innerHTML = "";
-            node.appendChild(this._contentNode);
-            this._prevContentNode = this._contentNode;
-        }
-        if (this._contentNode) {
-            this.onShowContent(this._contentNode);
-        }
-        else {
-            this._tooltipElement
-                .html(function () {
-                return _this._tooltipHTMLCallback(_this.data());
-            });
-        }
-        if (this.fitContent()) {
-            this._tooltipElement
-                .style("width", "auto")
-                .style("height", "auto")
-                .style("padding", "0px")
-                .style("box-sizing", "content-box");
-            var rect = this._tooltipElement.node().getBoundingClientRect();
-            this.tooltipWidth_default(rect.width);
-            this.tooltipHeight_default(rect.height);
-        }
-        this._closing = false;
-        this._tooltipElement
-            .style("background-color", this.tooltipColor())
-            .style("color", this.fontColor())
-            .style("width", this.tooltipWidth() + "px")
-            .style("height", this.tooltipHeight() + "px")
-            .style("opacity", 1)
-            .style("padding", this.padding() + "px")
-            .style("pointer-events", this.enablePointerEvents() ? "all" : "none")
-            .style("box-sizing", "content-box");
-        this._arrowElement
-            .style("opacity", 1)
-            .style("pointer-events", "none");
-        this.updateTooltipPosition();
-    };
-    HTMLTooltip.prototype.onShowContent = function (node) {
-    };
-    HTMLTooltip.prototype.updateTooltipPosition = function () {
-        var bbox = this.calcReferenceBBox();
-        var direction = this.calcTooltipDirection(bbox);
-        var box = bbox[direction];
-        this._tooltipElement
-            .style("top", box.y + "px")
-            .style("left", box.x + "px");
-        this.setArrowPosition(box, direction);
-        return box;
-    };
-    HTMLTooltip.prototype.calcTooltipDirection = function (bbox) {
-        var directions = Object.keys(bbox);
-        var defaultDirection = this.direction();
-        directions.sort(function (a, b) { return a === defaultDirection ? -1 : 1; });
-        var windowRect = {
-            top: 0,
-            left: 0,
-            width: window.innerWidth,
-            height: window.innerHeight
-        };
-        for (var i = 0; i < directions.length; i++) {
-            var tooltipRect = {
-                top: bbox[directions[i]].y,
-                left: bbox[directions[i]].x,
-                width: this.tooltipWidth(),
-                height: this.tooltipHeight()
-            };
-            if (this.rectFits(tooltipRect, windowRect)) {
-                return directions[i];
-            }
-        }
-        this._logger.warning("Tooltip doesn't fit in the window for any of the directions. Defaulting to '".concat(defaultDirection, "'"));
-        this._logger.debug(windowRect);
-        this._logger.debug({
-            top: bbox[defaultDirection].y,
-            left: bbox[defaultDirection].x,
-            width: this.tooltipWidth(),
-            height: this.tooltipHeight()
-        });
-        return defaultDirection;
-    };
-    HTMLTooltip.prototype.rectFits = function (innerRect, outerRect) {
-        return (innerRect.top >= outerRect.top &&
-            innerRect.left >= outerRect.left &&
-            innerRect.width + innerRect.left <= outerRect.width + outerRect.left &&
-            innerRect.height + innerRect.top <= outerRect.height + outerRect.top);
-    };
-    HTMLTooltip.prototype.setArrowPosition = function (point, direction) {
-        var top;
-        var left;
-        var visibleBorderStyle = "border-top-color";
-        this._arrowElement
-            .style("border", "".concat(this.arrowHeight(), "px solid ").concat(this.tooltipColor()))
-            .style("border-top-color", "transparent")
-            .style("border-right-color", "transparent")
-            .style("border-bottom-color", "transparent")
-            .style("border-left-color", "transparent");
-        switch (direction) {
-            case "n":
-                top = point.y + this.tooltipHeight() + (this.padding() * 2);
-                left = point.x + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2) + this.padding();
-                visibleBorderStyle = "border-top-color";
-                this._arrowElement
-                    .style("border-top-width", "".concat(this.arrowHeight(), "px"))
-                    .style("border-bottom-width", "0px")
-                    .style("border-left-width", "".concat(this.arrowWidth() / 2, "px"))
-                    .style("border-right-width", "".concat(this.arrowWidth() / 2, "px"));
-                break;
-            case "s":
-                top = point.y - this.arrowHeight();
-                left = point.x + this.padding() + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2);
-                visibleBorderStyle = "border-bottom-color";
-                this._arrowElement
-                    .style("border-top-width", "0px")
-                    .style("border-bottom-width", "".concat(this.arrowHeight(), "px"))
-                    .style("border-left-width", "".concat(this.arrowWidth() / 2, "px"))
-                    .style("border-right-width", "".concat(this.arrowWidth() / 2, "px"));
-                break;
-            case "e":
-                top = point.y + (this.tooltipHeight() / 2) + this.padding() - (this.arrowWidth() / 2);
-                left = point.x - this.arrowHeight();
-                visibleBorderStyle = "border-right-color";
-                this._arrowElement
-                    .style("border-top-width", "".concat(this.arrowWidth() / 2, "px"))
-                    .style("border-bottom-width", "".concat(this.arrowWidth() / 2, "px"))
-                    .style("border-left-width", "0px")
-                    .style("border-right-width", "".concat(this.arrowHeight(), "px"));
-                break;
-            case "w":
-                top = point.y + (this.tooltipHeight() / 2) - (this.arrowWidth() / 2) + this.padding();
-                left = point.x + this.tooltipWidth() + (this.padding() * 2);
-                visibleBorderStyle = "border-left-color";
-                this._arrowElement
-                    .style("border-top-width", "".concat(this.arrowWidth() / 2, "px"))
-                    .style("border-bottom-width", "".concat(this.arrowWidth() / 2, "px"))
-                    .style("border-left-width", "".concat(this.arrowHeight(), "px"))
-                    .style("border-right-width", "0px");
-                break;
-        }
-        if (typeof top !== "undefined" && typeof left !== "undefined") {
-            this._arrowElement
-                .style("top", top + "px")
-                .style("left", left + "px")
-                .style(visibleBorderStyle, this.tooltipColor())
-                .style("opacity", 1);
-        }
-        else {
-            this._arrowElement
-                .style("opacity", 0);
-        }
-        return point;
-    };
-    HTMLTooltip.prototype.getReferenceNode = function () {
-        if (!this._triggerElement) {
-            return this.element().node().parentNode.parentNode;
-        }
-        return this._triggerElement.node();
-    };
-    HTMLTooltip.prototype.calcReferenceBBox = function () {
-        var node = this.getReferenceNode();
-        var _a = node.getBoundingClientRect(), top = _a.top, left = _a.left, width = _a.width, height = _a.height;
-        var wholeW = this.tooltipWidth();
-        var wholeH = this.tooltipHeight();
-        var halfW = wholeW / 2;
-        var halfH = wholeH / 2;
-        var arrowH = this.arrowHeight();
-        var p = this.padding();
-        var p2 = p * 2;
-        if (this.followCursor() && this._cursorLoc) {
-            left = this._cursorLoc[0];
-            top = this._cursorLoc[1];
-            width = 1;
-            height = 1;
-        }
-        var bbox = {
-            n: {
-                x: left + (width / 2) - halfW - p,
-                y: top - wholeH - arrowH - p2
-            },
-            e: {
-                x: left + width + arrowH,
-                y: top + (height / 2) - halfH - p
-            },
-            s: {
-                x: left + (width / 2) - halfW - p,
-                y: top + height + arrowH
-            },
-            w: {
-                x: left - wholeW - arrowH - p2,
-                y: top + (height / 2) - halfH - p
-            },
-            nw: {
-                x: left - wholeW - p2,
-                y: top - wholeH - p2
-            },
-            ne: {
-                x: left + width,
-                y: top - wholeH - p2
-            },
-            se: {
-                x: left + width,
-                y: top + height
-            },
-            sw: {
-                x: left - wholeW - p2,
-                y: top + height
-            }
-        };
-        return bbox;
-    };
-    HTMLTooltip.prototype.mouseout = function () {
-        var _this = this;
-        this._closing = true;
-        this._tooltipElement.on("mouseover", function () {
-            _this._closing = false;
-        });
-        this._tooltipElement.on("mouseout", function () {
-            _this.mouseout();
-        });
-        setTimeout(function () {
-            if (_this._closing) {
-                _this.visible(false);
-            }
-        }, this.closeDelay());
-    };
-    HTMLTooltip.prototype.visible = function (_) {
-        if (!arguments.length)
-            return _super.prototype.visible.call(this);
-        if (this._arrowElement) {
-            this._arrowElement.style("visibility", _ ? "visible" : "hidden");
-            this._tooltipElement.style("visibility", _ ? "visible" : "hidden");
-        }
-        _super.prototype.visible.call(this, _);
-        return this;
-    };
-    HTMLTooltip.prototype.exit = function (domNode, element) {
-        if (this._arrowElement) {
-            this._arrowElement.remove();
-            this._tooltipElement.remove();
-        }
-        _super.prototype.exit.call(this, domNode, element);
-    };
-    return HTMLTooltip;
-}(HTMLWidget));
-HTMLTooltip.prototype._class += " html_HTMLTooltip";
-HTMLTooltip.prototype.publish("fitContent", false, "boolean", "If true, tooltip will grow to fit its html content");
-HTMLTooltip.prototype.publish("followCursor", false, "boolean", "If true, tooltip will display relative to cursor location");
-HTMLTooltip.prototype.publish("closeDelay", 400, "number", "Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");
-HTMLTooltip.prototype.publish("direction", "n", "set", "Direction in which to display the tooltip", ["n", "s", "e", "w", "ne", "nw", "se", "sw"]);
-HTMLTooltip.prototype.publish("padding", 8, "number", "Padding (pixels)");
-HTMLTooltip.prototype.publish("arrowWidth", 16, "number", "Width (or height depending on direction) of the tooltip arrow (pixels)");
-HTMLTooltip.prototype.publish("arrowHeight", 8, "number", "Height (or width depending on direction) of the tooltip arrow (pixels)");
-HTMLTooltip.prototype.publish("fontColor", "#FFF", "html-color", "The default font color for text in the tooltip");
-HTMLTooltip.prototype.publish("tooltipColor", "#000000EE", "html-color", "Background color of the tooltip");
-HTMLTooltip.prototype.publish("tooltipWidth", 200, "number", "Width of the tooltip (not including arrow) (pixels)");
-HTMLTooltip.prototype.publish("tooltipHeight", 200, "number", "Height of the tooltip (not including arrow) (pixels)");
-HTMLTooltip.prototype.publish("enablePointerEvents", false, "boolean", "If true, the 'pointer-events: all' style will be used");
-
-var SimpleTable = /** @class */ (function (_super) {
-    __extends(SimpleTable, _super);
-    function SimpleTable() {
-        return _super.call(this) || this;
-    }
-    SimpleTable.prototype.transformData = function () {
-        return this.data();
-    };
-    SimpleTable.prototype.enter = function (domNode, element) {
-        _super.prototype.enter.call(this, domNode, element);
-        this._table = element.append("table");
-        this._thead = this._table.append("thead");
-        this._theadRow = this._thead.append("tr");
-        this._tbody = this._table.append("tbody");
-    };
-    SimpleTable.prototype.update = function (domNode, element) {
-        _super.prototype.update.call(this, domNode, element);
-        this._table
-            .style("width", this.autoWidth() ? "auto" : "100%");
-        var theadTrSelection = this._theadRow.selectAll("th").data(this.columns());
-        theadTrSelection.enter()
-            .append("th")
-            .attr("class", function (n, i) { return "th-".concat(i); })
-            .merge(theadTrSelection)
-            .text(function (_d) { return (_d).toString(); });
-        theadTrSelection.exit().remove();
-        var trSelection = this._tbody.selectAll("tr").data(this.transformData());
-        trSelection.enter()
-            .append("tr")
-            .merge(trSelection)
-            .each(function (d) {
-            var tr = select(this);
-            var tdSelection = tr.selectAll("td").data(d);
-            tdSelection.enter()
-                .append("td")
-                .attr("class", function (n, i) { return "col-".concat(i); })
-                .merge(tdSelection)
-                .text(function (_d) { return (_d).toString(); });
-            tdSelection.exit().remove();
-        });
-        trSelection.exit().remove();
-    };
-    return SimpleTable;
-}(HTMLWidget));
-SimpleTable.prototype._class += " html_SimpleTable";
-SimpleTable.prototype.publish("autoWidth", false, "boolean", "If true, table width will be set to 'auto'. If false, the width is set to '100%'");
-
-var StyledTable = /** @class */ (function (_super) {
-    __extends(StyledTable, _super);
-    function StyledTable() {
-        return _super.call(this) || this;
-    }
-    StyledTable.prototype.applyStyleObject = function (selection, styleObject) {
-        Object.keys(styleObject).forEach(function (styleName) {
-            selection.style(styleName, styleObject[styleName]);
-        });
-    };
-    StyledTable.prototype.update = function (domNode, element) {
-        var _this = this;
-        _super.prototype.update.call(this, domNode, element);
-        element.selectAll("tr,th,td")
-            .attr("style", "")
-            .style("font-family", this.fontFamily())
-            .style("color", this.fontColor());
-        this.theadColumnStyles().forEach(function (styleObj, i) {
-            _this.applyStyleObject(element.select(".th-".concat(i)), styleObj);
-        });
-        this.tbodyColumnStyles().forEach(function (styleObj, i) {
-            _this.applyStyleObject(element.selectAll(".col-".concat(i)), styleObj);
-        });
-        var evenRowStylesExist = Object.keys(this.evenRowStyles()).length > 0;
-        var lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0;
-        var tbodyRows = element.selectAll("tbody > tr");
-        if (evenRowStylesExist) {
-            var tbodyEvenRows = tbodyRows.select(function (d, i) { return i % 2 ? this : null; });
-            this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
-        }
-        if (lastRowStylesExist) {
-            var tbodyLastRow = tbodyRows.select(function (d, i, arr) { return i === arr.length - 1 ? this : null; });
-            this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
-        }
-    };
-    return StyledTable;
-}(SimpleTable));
-StyledTable.prototype._class += " html_StyledTable";
-StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");
-StyledTable.prototype.publish("fontColor", "#333", "string", "Base font color used within the table");
-StyledTable.prototype.publish("theadColumnStyles", [], "array", 'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');
-StyledTable.prototype.publish("tbodyColumnStyles", [], "array", 'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');
-StyledTable.prototype.publish("lastRowStyles", {}, "object", 'Object containing styles for the last row (ex: {"color":"red"})');
-StyledTable.prototype.publish("evenRowStyles", {}, "object", 'Object containing styles for even rows (ex: {"background-color":"#AAA"})');
-
-var BreakdownTable = /** @class */ (function (_super) {
-    __extends(BreakdownTable, _super);
-    function BreakdownTable() {
-        return _super.call(this) || this;
-    }
-    BreakdownTable.prototype.transformData = function () {
-        var rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-        return this.breakdownData(rowCount);
-    };
-    BreakdownTable.prototype.breakdownData = function (limit) {
-        var len = this.data().length;
-        var sum = this.data().reduce(function (acc, row) { return acc + row[1]; }, 0);
-        var data = [];
-        var percSum = 0;
-        this.data().sort(function (a, b) { return a[1] > b[1] ? -1 : 1; });
-        var hiddenRowCount = len - limit;
-        var showOther = hiddenRowCount > 0;
-        this.data()
-            .filter(function (_, i) { return showOther ? i < limit - 1 : true; })
-            .forEach(function (row) {
-            var perc = Math.round((row[1] / sum) * 100);
-            percSum += perc;
-            data.push([row[0], perc + "%"]);
-        });
-        if (showOther) {
-            var otherLabel = "".concat(this.otherLabel(), " (").concat(len - limit + 1, ")");
-            var otherPercentage = "~" + (100 - percSum) + "%";
-            data.push([otherLabel, otherPercentage]);
-        }
-        return data;
-    };
-    BreakdownTable.prototype.calculateRowCount = function () {
-        var theadRowHeight = this.columns().length > 0 ? this.thFontSize() + 5 : 0;
-        var tbodyRowHeight = this.fontSize() + 5;
-        var tbodyAvailableHeight = this.height() - theadRowHeight;
-        var rowCount = Math.floor(tbodyAvailableHeight / tbodyRowHeight);
-        return rowCount;
-    };
-    BreakdownTable.prototype.enter = function (domNode, element) {
-        var _this = this;
-        _super.prototype.enter.call(this, domNode, element);
-        this._tooltip = new HTMLTooltip()
-            .target(domNode);
-        this._tooltip
-            .tooltipHTML(function (data) {
-            var _a;
-            var rowCount = _this.useCalculatedRowCount() ? _this.calculateRowCount() : _this.rowCount();
-            var rowHeight = (_a = Math.max.apply(Math, data.map(function (row) { return _this.textSize(row[0], _this.fontFamily(), _this.fontSize()).height; }))) !== null && _a !== void 0 ? _a : _this.fontSize();
-            var widestLabel = Math.max.apply(Math, data.map(function (row) { return _this.textSize(row[0], _this.fontFamily(), _this.fontSize()).width; }));
-            var widestPerc = 30;
-            var colCount = 2;
-            var w = colCount * (widestLabel + widestPerc) + (_this._tooltip.padding() * 2);
-            var h = rowHeight * Math.ceil((data.length - rowCount) / colCount) + (_this._tooltip.padding() * 2);
-            _this._tooltip.tooltipWidth(w);
-            _this._tooltip.tooltipHeight(h);
-            var otherData = _this.breakdownData(_this.data().length).slice(rowCount - 1);
-            return "<div style=\"\n                    width: 100%;\n                    height: 100%;\n                    font-size: ".concat(_this.fontSize(), "px;\n                \">").concat(otherData.map(function (row) {
-                return "<div style=\"\n                        float:left;\n                        width:".concat(Math.floor(99 / colCount), "%;\n                    \">").concat(row[0], ": ").concat(row[1], "</div>");
-            }).join(""), "</div>");
-        });
-    };
-    BreakdownTable.prototype.update = function (domNode, element) {
-        this.theadColumnStyles_default([
-            {
-                "color": this.thFirstColor(),
-                "font-size": this.thFontSize() + "px",
-                "font-weight": this.thFontWeight(),
-                "text-align": this.labelAlignment(),
-                "width": "auto",
-                "padding": "0px"
-            },
-            {
-                "width": "1%",
-                "font-size": this.thFontSize() + "px",
-                "font-weight": this.thFontWeight(),
-                "text-align": this.percentageAlignment(),
-                "padding": "0px"
-            }
-        ]);
-        this.tbodyColumnStyles_default([
-            {
-                "color": this.topLabelColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": "normal",
-                "text-align": this.labelAlignment(),
-                "width": "auto",
-                "padding": "0px"
-            },
-            {
-                "color": this.topPercentageColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": "normal",
-                "text-align": this.percentageAlignment(),
-                "width": "1%",
-                "padding": "0px"
-            }
-        ]);
-        this.lastRowStyles_default([
-            {
-                "color": this.otherLabelColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": this.otherLabelBold() ? "bold" : "normal",
-                "text-align": this.labelAlignment(),
-                "width": "auto",
-                "padding": "0px"
-            },
-            {
-                "color": this.otherLabelColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": this.otherPercentageBold() ? "bold" : "normal",
-                "text-align": this.percentageAlignment(),
-                "width": "1%",
-                "padding": "0px"
-            }
-        ]);
-        _super.prototype.update.call(this, domNode, element);
-        var rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-        if (rowCount < this.data().length) {
-            var lastRow_1 = element.select("tbody > tr:last-child");
-            var context_1 = this;
-            lastRow_1
-                .on("mouseout.tooltip", function (d) {
-                context_1._tooltip._triggerElement = lastRow_1;
-                context_1._tooltip
-                    .visible(false)
-                    .render();
-            })
-                .on("mouseenter.tooltip", function (d) {
-                context_1._tooltip._triggerElement = lastRow_1;
-                context_1._tooltip
-                    .direction("n")
-                    .data(context_1.data())
-                    .visible(true)
-                    .render();
-            });
-        }
-    };
-    return BreakdownTable;
-}(StyledTable));
-BreakdownTable.prototype._class += " html_BreakdownTable";
-BreakdownTable.prototype.publish("useCalculatedRowCount", true, "boolean", "If true, rowCount will be calculated and its default will be overwritten");
-BreakdownTable.prototype.publish("rowCount", 5, "number", "Number of total rows to display (including the 'other' row)", undefined, { disable: function (w) { return w.useCalculatedRowCount(); } });
-BreakdownTable.prototype.publish("fontSize", 14, "number", "Font size (pixels)");
-BreakdownTable.prototype.publish("labelAlignment", "left", "set", "Alignment of the label column text", ["left", "center", "right"]);
-BreakdownTable.prototype.publish("percentageAlignment", "center", "set", "Alignment of the percentage column text", ["left", "center", "right"]);
-BreakdownTable.prototype.publish("topLabelColor", "#333", "html-color", "Color of displayed 'top' labels");
-BreakdownTable.prototype.publish("topPercentageColor", "#1A99D5", "html-color", "Color of displayed 'top' percentages");
-BreakdownTable.prototype.publish("topPercentageBold", true, "html-color", "If true, the 'top' percentages will be bold");
-BreakdownTable.prototype.publish("otherLabel", "Other", "string", "Label text for the 'other' row");
-BreakdownTable.prototype.publish("otherLabelColor", "#AAA", "html-color", "Color of the 'other' label");
-BreakdownTable.prototype.publish("otherLabelBold", false, "html-color", "If true, the 'other' label will be bold");
-BreakdownTable.prototype.publish("otherPercentageColor", "#AAA", "html-color", "Color of the 'other' percentage");
-BreakdownTable.prototype.publish("otherPercentageBold", false, "html-color", "If true, the 'other' percentage will be bold");
-BreakdownTable.prototype.publish("thFontWeight", "bold", "string", "Font weight for th elements");
-BreakdownTable.prototype.publish("thFontSize", 26, "number", "Font size for th elements");
-BreakdownTable.prototype.publish("thFirstColor", "#333", "html-color", "Text color of the first th element");
-BreakdownTable.prototype.publish("thLastColor", "#333", "html-color", "Text color of the last th element");
-
-var n,l$1,u$1,i$1,o$1,r$1,f$1,e$1,c$1,s$1,h$1={},p$1=[],v$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,y$1=Array.isArray;function d$1(n,l){for(var u in l)n[u]=l[u];return n}function w$1(n){var l=n.parentNode;l&&l.removeChild(n);}function _$1(l,u,t){var i,o,r,f={};for(r in u)"key"==r?i=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):t),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return g(l,f,i,o,null)}function g(n,t,i,o,r){var f={type:n,props:t,key:i,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:null==r?++u$1:r,__i:-1,__u:0};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function k$1(n){return n.children}function b(n,l){this.props=n,this.context=l;}function x$1(n,l){if(null==l)return n.__?x$1(n.__,n.__i+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?x$1(n):null}function C$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return C$1(n)}}function M(n){(!n.__d&&(n.__d=!0)&&i$1.push(n)&&!P.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||r$1)(P);}function P(){var n,u,t,o,r,e,c,s;for(i$1.sort(f$1);n=i$1.shift();)n.__d&&(u=i$1.length,o=void 0,e=(r=(t=n).__v).__e,c=[],s=[],t.__P&&((o=d$1({},r)).__v=r.__v+1,l$1.vnode&&l$1.vnode(o),O(t.__P,o,r,t.__n,t.__P.namespaceURI,32&r.__u?[e]:null,c,null==e?x$1(r):e,!!(32&r.__u),s),o.__v=r.__v,o.__.__k[o.__i]=o,j$1(c,o,s),o.__e!=e&&C$1(o)),i$1.length>u&&i$1.sort(f$1));P.__r=0;}function S(n,l,u,t,i,o,r,f,e,c,s){var a,v,y,d,w,_=t&&t.__k||p$1,g=l.length;for(u.__d=e,$(u,l,_),e=u.__d,a=0;a<g;a++)null!=(y=u.__k[a])&&"boolean"!=typeof y&&"function"!=typeof y&&(v=-1===y.__i?h$1:_[y.__i]||h$1,y.__i=a,O(n,y,v,i,o,r,f,e,c,s),d=y.__e,y.ref&&v.ref!=y.ref&&(v.ref&&N(v.ref,null,y),s.push(y.ref,y.__c||d,y)),null==w&&null!=d&&(w=d),65536&y.__u||v.__k===y.__k?(e&&!e.isConnected&&(e=x$1(v)),e=I(y,e,n)):"function"==typeof y.type&&void 0!==y.__d?e=y.__d:d&&(e=d.nextSibling),y.__d=void 0,y.__u&=-196609);u.__d=e,u.__e=w;}function $(n,l,u){var t,i,o,r,f,e=l.length,c=u.length,s=c,a=0;for(n.__k=[],t=0;t<e;t++)r=t+a,null!=(i=n.__k[t]=null==(i=l[t])||"boolean"==typeof i||"function"==typeof i?null:"string"==typeof i||"number"==typeof i||"bigint"==typeof i||i.constructor==String?g(null,i,null,null,null):y$1(i)?g(k$1,{children:i},null,null,null):void 0===i.constructor&&i.__b>0?g(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i)?(i.__=n,i.__b=n.__b+1,f=L(i,u,r,s),i.__i=f,o=null,-1!==f&&(s--,(o=u[f])&&(o.__u|=131072)),null==o||null===o.__v?(-1==f&&a--,"function"!=typeof i.type&&(i.__u|=65536)):f!==r&&(f===r+1?a++:f>r?s>e-r?a+=f-r:a--:f<r?f==r-1&&(a=f-r):a=0,f!==t+a&&(i.__u|=65536))):(o=u[r])&&null==o.key&&o.__e&&0==(131072&o.__u)&&(o.__e==n.__d&&(n.__d=x$1(o)),V(o,o,!1),u[r]=null,s--);if(s)for(t=0;t<c;t++)null!=(o=u[t])&&0==(131072&o.__u)&&(o.__e==n.__d&&(n.__d=x$1(o)),V(o,o));}function I(n,l,u){var t,i;if("function"==typeof n.type){for(t=n.__k,i=0;t&&i<t.length;i++)t[i]&&(t[i].__=n,l=I(t[i],l,u));return l}n.__e!=l&&(u.insertBefore(n.__e,l||null),l=n.__e);do{l=l&&l.nextSibling;}while(null!=l&&8===l.nodeType);return l}function L(n,l,u,t){var i=n.key,o=n.type,r=u-1,f=u+1,e=l[u];if(null===e||e&&i==e.key&&o===e.type&&0==(131072&e.__u))return u;if(t>(null!=e&&0==(131072&e.__u)?1:0))for(;r>=0||f<l.length;){if(r>=0){if((e=l[r])&&0==(131072&e.__u)&&i==e.key&&o===e.type)return r;r--;}if(f<l.length){if((e=l[f])&&0==(131072&e.__u)&&i==e.key&&o===e.type)return f;f++;}}return -1}function T(n,l,u){"-"===l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||v$1.test(l)?u:u+"px";}function A(n,l,u,t,i){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof t&&(n.style.cssText=t=""),t)for(l in t)u&&l in u||T(n.style,l,"");if(u)for(l in u)t&&u[l]===t[l]||T(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/(PointerCapture)$|Capture$/i,"$1")),l=l.toLowerCase()in n||"onFocusOut"===l||"onFocusIn"===l?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?t?u.u=t.u:(u.u=e$1,n.addEventListener(l,o?s$1:c$1,o)):n.removeEventListener(l,o?s$1:c$1,o);else {if("http://www.w3.org/2000/svg"==i)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=l&&"height"!=l&&"href"!=l&&"list"!=l&&"form"!=l&&"tabIndex"!=l&&"download"!=l&&"rowSpan"!=l&&"colSpan"!=l&&"role"!=l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&"-"!==l[4]?n.removeAttribute(l):n.setAttribute(l,u));}}function F(n){return function(u){if(this.l){var t=this.l[u.type+n];if(null==u.t)u.t=e$1++;else if(u.t<t.u)return;return t(l$1.event?l$1.event(u):u)}}}function O(n,u,t,i,o,r,f,e,c,s){var a,h,p,v,w,_,g,m,x,C,M,P,$,I,H,L=u.type;if(void 0!==u.constructor)return null;128&t.__u&&(c=!!(32&t.__u),r=[e=u.__e=t.__e]),(a=l$1.__b)&&a(u);n:if("function"==typeof L)try{if(m=u.props,x=(a=L.contextType)&&i[a.__c],C=a?x?x.props.value:a.__:i,t.__c?g=(h=u.__c=t.__c).__=h.__E:("prototype"in L&&L.prototype.render?u.__c=h=new L(m,C):(u.__c=h=new b(m,C),h.constructor=L,h.render=q$1),x&&x.sub(h),h.props=m,h.state||(h.state={}),h.context=C,h.__n=i,p=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=L.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=d$1({},h.__s)),d$1(h.__s,L.getDerivedStateFromProps(m,h.__s))),v=h.props,w=h.state,h.__v=u,p)null==L.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==L.getDerivedStateFromProps&&m!==v&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(m,C),!h.__e&&(null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(m,h.__s,C)||u.__v===t.__v)){for(u.__v!==t.__v&&(h.props=m,h.state=h.__s,h.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.forEach(function(n){n&&(n.__=u);}),M=0;M<h._sb.length;M++)h.__h.push(h._sb[M]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(m,h.__s,C),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(v,w,_);});}if(h.context=C,h.props=m,h.__P=n,h.__e=!1,P=l$1.__r,$=0,"prototype"in L&&L.prototype.render){for(h.state=h.__s,h.__d=!1,P&&P(u),a=h.render(h.props,h.state,h.context),I=0;I<h._sb.length;I++)h.__h.push(h._sb[I]);h._sb=[];}else do{h.__d=!1,P&&P(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(i=d$1(d$1({},i),h.getChildContext())),p||null==h.getSnapshotBeforeUpdate||(_=h.getSnapshotBeforeUpdate(v,w)),S(n,y$1(H=null!=a&&a.type===k$1&&null==a.key?a.props.children:a)?H:[H],u,t,i,o,r,f,e,c,s),h.base=u.__e,u.__u&=-161,h.__h.length&&f.push(h),g&&(h.__E=h.__=null);}catch(n){u.__v=null,c||null!=r?(u.__e=e,u.__u|=c?160:32,r[r.indexOf(e)]=null):(u.__e=t.__e,u.__k=t.__k),l$1.__e(n,u,t);}else null==r&&u.__v===t.__v?(u.__k=t.__k,u.__e=t.__e):u.__e=z$1(t.__e,u,t,i,o,r,f,c,s);(a=l$1.diffed)&&a(u);}function j$1(n,u,t){u.__d=void 0;for(var i=0;i<t.length;i++)N(t[i],t[++i],t[++i]);l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function z$1(l,u,t,i,o,r,f,e,c){var s,a,p,v,d,_,g,m=t.props,k=u.props,b=u.type;if("svg"===b?o="http://www.w3.org/2000/svg":"math"===b?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),null!=r)for(s=0;s<r.length;s++)if((d=r[s])&&"setAttribute"in d==!!b&&(b?d.localName===b:3===d.nodeType)){l=d,r[s]=null;break}if(null==l){if(null===b)return document.createTextNode(k);l=document.createElementNS(o,b,k.is&&k),r=null,e=!1;}if(null===b)m===k||e&&l.data===k||(l.data=k);else {if(r=r&&n.call(l.childNodes),m=t.props||h$1,!e&&null!=r)for(m={},s=0;s<l.attributes.length;s++)m[(d=l.attributes[s]).name]=d.value;for(s in m)if(d=m[s],"children"==s);else if("dangerouslySetInnerHTML"==s)p=d;else if("key"!==s&&!(s in k)){if("value"==s&&"defaultValue"in k||"checked"==s&&"defaultChecked"in k)continue;A(l,s,null,d,o);}for(s in k)d=k[s],"children"==s?v=d:"dangerouslySetInnerHTML"==s?a=d:"value"==s?_=d:"checked"==s?g=d:"key"===s||e&&"function"!=typeof d||m[s]===d||A(l,s,d,m[s],o);if(a)e||p&&(a.__html===p.__html||a.__html===l.innerHTML)||(l.innerHTML=a.__html),u.__k=[];else if(p&&(l.innerHTML=""),S(l,y$1(v)?v:[v],u,t,i,"foreignObject"===b?"http://www.w3.org/1999/xhtml":o,r,f,r?r[0]:t.__k&&x$1(t,0),e,c),null!=r)for(s=r.length;s--;)null!=r[s]&&w$1(r[s]);e||(s="value",void 0!==_&&(_!==l[s]||"progress"===b&&!_||"option"===b&&_!==m[s])&&A(l,s,_,m[s],o),s="checked",void 0!==g&&g!==l[s]&&A(l,s,g,m[s],o));}return l}function N(n,u,t){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,t);}}function V(n,u,t){var i,o;if(l$1.unmount&&l$1.unmount(n),(i=n.ref)&&(i.current&&i.current!==n.__e||N(i,null,u)),null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(n){l$1.__e(n,u);}i.base=i.__P=null;}if(i=n.__k)for(o=0;o<i.length;o++)i[o]&&V(i[o],u,t||"function"!=typeof n.type);t||null==n.__e||w$1(n.__e),n.__c=n.__=n.__e=n.__d=void 0;}function q$1(n,l,u){return this.constructor(n,u)}function B$1(u,t,i){var o,r,f,e;l$1.__&&l$1.__(u,t),r=(o="function"==typeof i)?null:i&&i.__k||t.__k,f=[],e=[],O(t,u=(!o&&i||t).__k=_$1(k$1,null,[u]),r||h$1,h$1,t.namespaceURI,!o&&i?[i]:r?null:t.firstChild?n.call(t.childNodes):null,f,!o&&i?i:r?r.__e:t.firstChild,o,e),j$1(f,u,e);}n=p$1.slice,l$1={__e:function(n,l,u,t){for(var i,o,r;l=l.__;)if((i=l.__c)&&!i.__)try{if((o=i.constructor)&&null!=o.getDerivedStateFromError&&(i.setState(o.getDerivedStateFromError(n)),r=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(n,t||{}),r=i.__d),r)return i.__E=i}catch(l){n=l;}throw n}},u$1=0,b.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=d$1({},this.state),"function"==typeof n&&(n=n(d$1({},u),this.props)),n&&d$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),M(this));},b.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),M(this));},b.prototype.render=k$1,i$1=[],r$1="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f$1=function(n,l){return n.__v.__b-l.__v.__b},P.__r=0,e$1=0,c$1=F(!1),s$1=F(!0);
-
-var r,u,i,f=[],c=[],e=l$1,a=e.__b,v=e.__r,l=e.diffed,m=e.__c,s=e.unmount,d=e.__;function j(){for(var n;n=f.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(z),n.__H.__h.forEach(B),n.__H.__h=[];}catch(t){n.__H.__h=[],e.__e(t,n.__v);}}e.__b=function(n){r=null,a&&a(n);},e.__=function(n,t){n&&t.__k&&t.__k.__m&&(n.__m=t.__k.__m),d&&d(n,t);},e.__r=function(n){v&&v(n);var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(z),i.__h.forEach(B),i.__h=[],0)),u=r;},e.diffed=function(n){l&&l(n);var t=n.__c;t&&t.__H&&(t.__H.__h.length&&(1!==f.push(t)&&i===e.requestAnimationFrame||((i=e.requestAnimationFrame)||w)(j)),t.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r=null;},e.__c=function(n,t){t.some(function(n){try{n.__h.forEach(z),n.__h=n.__h.filter(function(n){return !n.__||B(n)});}catch(r){t.some(function(n){n.__h&&(n.__h=[]);}),t=[],e.__e(r,n.__v);}}),m&&m(n,t);},e.unmount=function(n){s&&s(n);var t,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{z(n);}catch(n){t=n;}}),r.__H=void 0,t&&e.__e(t,r.__v));};var k="function"==typeof requestAnimationFrame;function w(n){var t,r=function(){clearTimeout(u),k&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);k&&(t=requestAnimationFrame(r));}function z(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function B(n){var t=r;n.__c=n.__(),r=t;}
-
-var JSXWidget = /** @class */ (function (_super) {
-    __extends(JSXWidget, _super);
-    function JSXWidget() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    JSXWidget.prototype.jsxRender = function (jsx, domNode) {
-        this.rootNode = B$1(jsx, domNode, this.rootNode);
-    };
-    JSXWidget.Component = b;
-    JSXWidget.createElement = _$1;
-    return JSXWidget;
-}(HTMLWidget));
-JSXWidget.prototype._class += " html_JSXWidget";
-
-var VNode = /** @class */ (function () {
-    function VNode(attrs, children) {
-        this._attrs = attrs;
-        this._children = children;
-    }
-    VNode.prototype.type = function () {
-        return "div";
-    };
-    VNode.prototype.attrs = function () {
-        return this._attrs;
-    };
-    VNode.prototype.attr = function (key) {
-        return this._attrs[key];
-    };
-    VNode.prototype.children = function () {
-        return this._children;
-    };
-    VNode.prototype.update = function (targetElement) {
-        for (var key in this._attrs) {
-            targetElement.attr(key, this._attrs[key]);
-        }
-    };
-    VNode.prototype.render = function (targetElement) {
-        var thisElement = targetElement.selectAll("".concat(targetElement.node().tagName, " > *")).data([this]);
-        thisElement.exit()
-            .remove();
-        return thisElement.enter().append(this.type())
-            .attr("reactd3", 0)
-            .merge(thisElement)
-            .each(function (d) {
-            var element = select(this);
-            d.update(element);
-            d.renderChildren(element);
-        });
-    };
-    VNode.prototype.renderChildren = function (targetElement) {
-        var thisElement = targetElement.selectAll("".concat(targetElement.node().tagName, " > *")).data(this._children);
-        thisElement.exit()
-            .remove();
-        return thisElement.enter().append(function (d) { return document.createElement(d.type()); })
-            .attr("reactd3", function (_d, i) { return i; })
-            .merge(thisElement)
-            .each(function (d) {
-            var element = select(this);
-            d.update(element);
-            d.renderChildren(element);
-        });
-    };
-    return VNode;
-}());
-var ConstVNode = /** @class */ (function (_super) {
-    __extends(ConstVNode, _super);
-    function ConstVNode(type, attrs, children) {
-        var _this = _super.call(this, attrs, children) || this;
-        _this._type = type;
-        return _this;
-    }
-    ConstVNode.prototype.type = function () {
-        return this._type;
-    };
-    return ConstVNode;
-}(VNode));
-var TextVNode = /** @class */ (function (_super) {
-    __extends(TextVNode, _super);
-    function TextVNode(text) {
-        var _this = _super.call(this, {}, []) || this;
-        _this._text = text;
-        return _this;
-    }
-    TextVNode.prototype.type = function () {
-        return "span";
-    };
-    TextVNode.prototype.update = function (targetElement) {
-        _super.prototype.update.call(this, targetElement);
-        targetElement.text(this._text);
-    };
-    return TextVNode;
-}(VNode));
-function isReactFn(_) {
-    return typeof _ === "function";
-}
-function isIVNode(_) {
-    return _.prototype && _.prototype instanceof VNode;
-}
-var ReactD3 = /** @class */ (function () {
-    function ReactD3() {
-    }
-    // static createElementXXX(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
-    ReactD3.createElement = function (type, attrs) {
-        var children = [];
-        for (var _i = 2; _i < arguments.length; _i++) {
-            children[_i - 2] = arguments[_i];
-        }
-        if (isIVNode(type)) {
-            return new type(attrs);
-        }
-        else if (isReactFn(type)) {
-            return type(attrs);
-        }
-        return new ConstVNode(type, attrs, children.map(function (child) {
-            if (typeof child === "string") {
-                return new TextVNode(child);
-            }
-            return child;
-        }));
-    };
-    ReactD3.render = function (vdom, targetElement) {
-        vdom.render(targetElement);
-    };
-    return ReactD3;
-}());
-
-var VizComponent = /** @class */ (function (_super) {
-    __extends(VizComponent, _super);
-    function VizComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    VizComponent.prototype.refreshProps = function () {
-        for (var key in this.props) {
-            if (this.widget[key] && typeof this.widget[key] === "function") {
-                this.widget[key](this.props[key]);
-            }
-        }
-    };
-    VizComponent.prototype.componentDidMount = function () {
-        this.widget = new this.props.type()
-            .target(this.base);
-        this.refreshProps();
-        this.widget
-            .render();
-    };
-    VizComponent.prototype.componentWillUnmount = function () {
-        this.widget
-            .target(null)
-            .render();
-    };
-    VizComponent.prototype.render = function () {
-        return _$1("div", { style: this.props.style });
-    };
-    VizComponent.prototype.componentDidUpdate = function () {
-        this.refreshProps();
-        this.widget.render();
-    };
-    return VizComponent;
-}(JSXWidget.Component));
-
-var VizInstance = /** @class */ (function (_super) {
-    __extends(VizInstance, _super);
-    function VizInstance() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    VizInstance.prototype.refreshProps = function () {
-        for (var key in this.props) {
-            if (this.widget[key] && typeof this.widget[key] === "function") {
-                this.widget[key](this.props[key]);
-            }
-        }
-    };
-    VizInstance.prototype.componentDidMount = function () {
-        this.widget = this.props.instance
-            .target(this.base);
-        this.refreshProps();
-        this.widget
-            .render();
-    };
-    VizInstance.prototype.componentWillUnmount = function () {
-        this.widget
-            .target(null)
-            .render();
-    };
-    VizInstance.prototype.render = function () {
-        return _$1("div", { style: this.props.style });
-    };
-    VizInstance.prototype.componentDidUpdate = function () {
-        this.refreshProps();
-        this.widget.render();
-    };
-    return VizInstance;
-}(JSXWidget.Component));
-
-var StatsTable = /** @class */ (function (_super) {
-    __extends(StatsTable, _super);
-    function StatsTable() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StatsTable.prototype.transformData = function () {
-        var _this = this;
-        var totalRow = [["Total", 0, 0]];
-        var data = this.data();
-        data.forEach(function (row) {
-            totalRow[0][1] += row[1];
-            totalRow[0][2] += row[2];
-        });
-        return data
-            .concat(totalRow)
-            .map(function (row) {
-            return [
-                row[0],
-                _this.secondColumnFormat_exists() ? format(_this.secondColumnFormat())(row[1]) : row[1],
-                _this.thirdColumnFormat_exists() ? format(_this.thirdColumnFormat())(row[2]) : row[2]
-            ];
-        });
-    };
-    StatsTable.prototype.update = function (domNode, element) {
-        this.tbodyColumnStyles_default([
-            {
-                "font-weight": "bold",
-                "width": this.firstColumnWidth(),
-                "text-align": "left"
-            },
-            {
-                "width": this.secondColumnWidth(),
-                "text-align": "right"
-            },
-            {
-                "width": this.thirdColumnWidth(),
-                "text-align": "right"
-            }
-        ]);
-        this.evenRowStyles_default([
-            {
-                "font-weight": "bold",
-                "width": this.firstColumnWidth(),
-                "text-align": "left",
-                "font-color": this.evenRowFontColor(),
-                "background-color": this.evenRowBackgroundColor()
-            },
-            {
-                "width": this.secondColumnWidth(),
-                "text-align": "right",
-                "font-color": this.evenRowFontColor(),
-                "background-color": this.evenRowBackgroundColor()
-            },
-            {
-                "width": this.thirdColumnWidth(),
-                "text-align": "right",
-                "font-color": this.evenRowFontColor(),
-                "background-color": this.evenRowBackgroundColor()
-            }
-        ]);
-        this.lastRowStyles_default({
-            "font-weight": "bold"
-        });
-        _super.prototype.update.call(this, domNode, element);
-    };
-    return StatsTable;
-}(StyledTable));
-StatsTable.prototype._class += " html_StatsTable";
-StatsTable.prototype.publish("labelColor", "#333", "html-color", "Color of the text in the first column");
-StatsTable.prototype.publish("primaryValueColor", "#333", "html-color", "Color of the text in the second column");
-StatsTable.prototype.publish("secondaryValueColor", "#333", "html-color", "Color of the text in the third column");
-StatsTable.prototype.publish("evenRowBackgroundColor", "#333", "html-color", "Background color of the even rows");
-StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font color of the even rows");
-StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
-StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
-StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
-StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, { optional: true });
-StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, { optional: true });
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "#wrap{width:100%}#left,#right{padding:5px}#left{background-color:red;display:block;overflow:hidden;text-align:left;text-overflow:ellipsis}#left,#right{white-space:nowrap}#right{background-color:orange;float:right;text-align:right}.html_TitleBar>.main{display:block;width:100%}.html_TitleBar .title{display:block;font-size:20px;font-weight:700;overflow:hidden;padding:4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.html_TitleBar .icon-bar{float:right;line-height:28px;padding:4px;text-align:right;white-space:nowrap}.html_TitleBar .icon-bar-item,.html_TitleBar .icon-bar-item>div{display:inline}.html_TitleBar .icon-bar a{color:#a9a9a9;padding-bottom:4px;padding-top:4px;text-align:center;transition:all .3s ease}.html_TitleBar .icon-bar a:hover{background-color:#f5f5f5}.html_TitleBar .icon-bar a.selected{background-color:#efe5e5}.html_TitleBar .icon-bar a.spacer{color:none;padding-bottom:0;padding-left:8px;padding-top:2px;text-align:center}.html_TitleBar .icon-bar a.spacer:hover{background-color:transparent}.html_TitleBar .icon-bar .active{background-color:#4caf50}";
-styleInject(css_248z);
-
-var Item = /** @class */ (function (_super) {
-    __extends(Item, _super);
-    function Item(owner) {
-        var _this = _super.call(this) || this;
-        _this._owner = owner;
-        _this._tag = "a";
-        return _this;
-    }
-    return Item;
-}(HTMLWidget));
-var Button = /** @class */ (function (_super) {
-    __extends(Button, _super);
-    function Button(owner, icon) {
-        var _this = _super.call(this, owner) || this;
-        _this._icon = icon;
-        return _this;
-    }
-    Button.prototype.icon = function () {
-        return this._icon;
-    };
-    Button.prototype.enter = function (domNode, element) {
-        var _this = this;
-        _super.prototype.enter.call(this, domNode, element);
-        element
-            .attr("href", "#")
-            .on("click", function (d, idx, groups) { return _this._owner.titleBarClick(_this, d, idx, groups); })
-            .append("i")
-            .attr("class", "fa ".concat(this._icon, " fa-lg fa-fw"));
-    };
-    return Button;
-}(Item));
-var ToggleButton = /** @class */ (function (_super) {
-    __extends(ToggleButton, _super);
-    function ToggleButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ToggleButton.prototype.enter = function (domNode, element) {
-        var _this = this;
-        element.on("click.sel", function (d, idx, groups) {
-            _this.selected(!_this.selected());
-            _this.render();
-        });
-        _super.prototype.enter.call(this, domNode, element);
-    };
-    ToggleButton.prototype.update = function (domNode, element) {
-        _super.prototype.update.call(this, domNode, element);
-        this._element.classed("selected", this.selected());
-    };
-    return ToggleButton;
-}(Button));
-ToggleButton.prototype.publish("selected", false, "boolean");
-var Spacer = /** @class */ (function (_super) {
-    __extends(Spacer, _super);
-    function Spacer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Spacer.prototype.enter = function (domNode, element) {
-        _super.prototype.enter.call(this, domNode, element);
-        element
-            .attr("class", "spacer")
-            .attr("href", "#")
-            .append("i");
-    };
-    return Spacer;
-}(Item));
-var TitleBar = /** @class */ (function (_super) {
-    __extends(TitleBar, _super);
-    function TitleBar() {
-        return _super.call(this) || this;
-    }
-    TitleBar.prototype.enter = function (domNode, element) {
-        _super.prototype.enter.call(this, domNode, element);
-        this._divMain = element.append("div")
-            .attr("class", "main");
-        this._divIconBar = this._divMain.append("div")
-            .attr("class", "icon-bar");
-        this._divTitle = this._divMain.append("div")
-            .attr("class", "title");
-    };
-    TitleBar.prototype.update = function (domNode, element) {
-        _super.prototype.update.call(this, domNode, element);
-        this._divTitle.text(this.title());
-        var icons = this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());
-        icons.enter().append("div")
-            .attr("class", "icon-bar-item")
-            .each(function (d) {
-            d.target(this);
-        })
-            .merge(icons)
-            .each(function (d) {
-            d.render();
-        });
-        icons.exit()
-            .each(function (d) {
-            d.target(null);
-        })
-            .remove();
-        icons.order();
-    };
-    return TitleBar;
-}(JSXWidget));
-TitleBar.prototype._class += " html_TitleBar";
-TitleBar.prototype.publish("title", "", "string");
-TitleBar.prototype.publish("buttons", [], "widgetArray");
-
-export { BUILD_VERSION, BreakdownTable, Button, HTMLTooltip, Item, JSXWidget, PKG_NAME, PKG_VERSION, ReactD3, SimpleTable, Spacer, StatsTable, StyledTable, TitleBar, ToggleButton, VNode, VizComponent, VizInstance };
-//# sourceMappingURL=index.es6.js.map