@hpcc-js/html 2.42.11 → 2.42.13

package/dist/index.js

@@ -1,1042 +1,1047 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/common'), require('@hpcc-js/util')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/common', '@hpcc-js/util'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@hpcc-js/html"] = {}, global["@hpcc-js/common"], global["@hpcc-js/util"]));
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/common'), require('@hpcc-js/util')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/common', '@hpcc-js/util'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@hpcc-js/html"] = {}, global["@hpcc-js/common"], global["@hpcc-js/util"]));
 })(this, (function (exports, common, util) { 'use strict';
 
-    var PKG_NAME = "@hpcc-js/html";
-    var PKG_VERSION = "2.42.11";
-    var BUILD_VERSION = "2.104.27";
+  var PKG_NAME = "@hpcc-js/html";
+  var PKG_VERSION = "2.42.13";
+  var BUILD_VERSION = "2.104.30";
 
-    /******************************************************************************
-    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 */
-
-    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));
-    }
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
 
-    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 = util.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 = common.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;
-    }(common.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");
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
 
-    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 = common.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;
-    }(common.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%'");
+  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 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 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 __());
+  }
 
-    var BreakdownTable = /** @class */ (function (_super) {
-        __extends(BreakdownTable, _super);
-        function BreakdownTable() {
-            return _super.call(this) || this;
+  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];
         }
-        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 rowCount = _this.useCalculatedRowCount() ? _this.calculateRowCount() : _this.rowCount();
-                var rowHeight = _this.fontSize();
-                var widestLabel = Math.max.apply(Math, data.map(function (row) { return _this.textSize(row[0], "Verdana", _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");
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+  }
 
-    var n,l$1,u$1,t$1,o$1,r$1,f$1,c$1={},s$1=[],a$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,v$1=Array.isArray;function h$1(n,l){for(var u in l)n[u]=l[u];return n}function p$1(n){var l=n.parentNode;l&&l.removeChild(n);}function y(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return d$1(l,f,t,o,null)}function d$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function k$1(n){return n.children}function b$1(n,l){this.props=n,this.context=l;}function g$1(n,l){if(null==l)return n.__?g$1(n.__,n.__.__k.indexOf(n)+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?g$1(n):null}function m$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 m$1(n)}}function w$1(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!x.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||r$1)(x);}function x(){var n,l,u,i,o,r,e,c;for(t$1.sort(f$1);n=t$1.shift();)n.__d&&(l=t$1.length,i=void 0,o=void 0,e=(r=(u=n).__v).__e,(c=u.__P)&&(i=[],(o=h$1({},r)).__v=r.__v+1,L(c,r,o,u.__n,void 0!==c.ownerSVGElement,null!=r.__h?[e]:null,i,null==e?g$1(r):e,r.__h),M(i,r),r.__e!=e&&m$1(r)),t$1.length>l&&t$1.sort(f$1));x.__r=0;}function P(n,l,u,i,t,o,r,f,e,a){var h,p,y,_,b,m,w,x=i&&i.__k||s$1,P=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(_=u.__k[h]=null==(_=l[h])||"boolean"==typeof _||"function"==typeof _?null:"string"==typeof _||"number"==typeof _||"bigint"==typeof _?d$1(null,_,null,null,_):v$1(_)?d$1(k$1,{children:_},null,null,null):_.__b>0?d$1(_.type,_.props,_.key,_.ref?_.ref:null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(y=x[h])||y&&_.key==y.key&&_.type===y.type)x[h]=void 0;else for(p=0;p<P;p++){if((y=x[p])&&_.key==y.key&&_.type===y.type){x[p]=void 0;break}y=null;}L(n,_,y=y||c$1,t,o,r,f,e,a),b=_.__e,(p=_.ref)&&y.ref!=p&&(w||(w=[]),y.ref&&w.push(y.ref,null,_),w.push(p,_.__c||b,_)),null!=b?(null==m&&(m=b),"function"==typeof _.type&&_.__k===y.__k?_.__d=e=C(_,e,n):e=$(n,_,y,x,b,e),"function"==typeof u.type&&(u.__d=e)):e&&y.__e==e&&e.parentNode!=n&&(e=g$1(y));}for(u.__e=m,h=P;h--;)null!=x[h]&&("function"==typeof u.type&&null!=x[h].__e&&x[h].__e==u.__d&&(u.__d=A(i).nextSibling),q(x[h],x[h]));if(w)for(h=0;h<w.length;h++)O(w[h],w[++h],w[++h]);}function C(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?C(i,l,u):$(u,i,i,t,i.__e,l));return l}function $(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=1)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function A(n){var l,u,i;if(null==n.type||"string"==typeof n.type)return n.__e;if(n.__k)for(l=n.__k.length-1;l>=0;l--)if((u=n.__k[l])&&(i=A(u)))return i;return null}function H(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||T$1(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||T$1(n,o,l[o],u[o],i);}function I(n,l,u){"-"===l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||a$1.test(l)?u:u+"px";}function T$1(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||I(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||I(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?z$1:j$1,o):n.removeEventListener(l,o?z$1:j$1,o);else if("dangerouslySetInnerHTML"!==l){if(t)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&&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 j$1(n){return this.l[n.type+!1](l$1.event?l$1.event(n):n)}function z$1(n){return this.l[n.type+!0](l$1.event?l$1.event(n):n)}function L(n,u,i,t,o,r,f,e,c){var s,a,p,y,d,_,g,m,w,x,C,S,$,A,H,I=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(s=l$1.__b)&&s(u);try{n:if("function"==typeof I){if(m=u.props,w=(s=I.contextType)&&t[s.__c],x=s?w?w.props.value:s.__:t,i.__c?g=(a=u.__c=i.__c).__=a.__E:("prototype"in I&&I.prototype.render?u.__c=a=new I(m,x):(u.__c=a=new b$1(m,x),a.constructor=I,a.render=B$1),w&&w.sub(a),a.props=m,a.state||(a.state={}),a.context=x,a.__n=t,p=a.__d=!0,a.__h=[],a._sb=[]),null==a.__s&&(a.__s=a.state),null!=I.getDerivedStateFromProps&&(a.__s==a.state&&(a.__s=h$1({},a.__s)),h$1(a.__s,I.getDerivedStateFromProps(m,a.__s))),y=a.props,d=a.state,a.__v=u,p)null==I.getDerivedStateFromProps&&null!=a.componentWillMount&&a.componentWillMount(),null!=a.componentDidMount&&a.__h.push(a.componentDidMount);else {if(null==I.getDerivedStateFromProps&&m!==y&&null!=a.componentWillReceiveProps&&a.componentWillReceiveProps(m,x),!a.__e&&null!=a.shouldComponentUpdate&&!1===a.shouldComponentUpdate(m,a.__s,x)||u.__v===i.__v){for(u.__v!==i.__v&&(a.props=m,a.state=a.__s,a.__d=!1),a.__e=!1,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),C=0;C<a._sb.length;C++)a.__h.push(a._sb[C]);a._sb=[],a.__h.length&&f.push(a);break n}null!=a.componentWillUpdate&&a.componentWillUpdate(m,a.__s,x),null!=a.componentDidUpdate&&a.__h.push(function(){a.componentDidUpdate(y,d,_);});}if(a.context=x,a.props=m,a.__P=n,S=l$1.__r,$=0,"prototype"in I&&I.prototype.render){for(a.state=a.__s,a.__d=!1,S&&S(u),s=a.render(a.props,a.state,a.context),A=0;A<a._sb.length;A++)a.__h.push(a._sb[A]);a._sb=[];}else do{a.__d=!1,S&&S(u),s=a.render(a.props,a.state,a.context),a.state=a.__s;}while(a.__d&&++$<25);a.state=a.__s,null!=a.getChildContext&&(t=h$1(h$1({},t),a.getChildContext())),p||null==a.getSnapshotBeforeUpdate||(_=a.getSnapshotBeforeUpdate(y,d)),P(n,v$1(H=null!=s&&s.type===k$1&&null==s.key?s.props.children:s)?H:[H],u,i,t,o,r,f,e,c),a.base=u.__e,u.__h=null,a.__h.length&&f.push(a),g&&(a.__E=a.__=null),a.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=N(i.__e,u,i,t,o,r,f,c);(s=l$1.diffed)&&s(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function M(n,u){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 N(l,u,i,t,o,r,f,e){var s,a,h,y=i.props,d=u.props,_=u.type,k=0;if("svg"===_&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!_&&(_?s.localName===_:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===_)return document.createTextNode(d);l=o?document.createElementNS("http://www.w3.org/2000/svg",_):document.createElement(_,d.is&&d),r=null,e=!1;}if(null===_)y===d||e&&l.data===d||(l.data=d);else {if(r=r&&n.call(l.childNodes),a=(y=i.props||c$1).dangerouslySetInnerHTML,h=d.dangerouslySetInnerHTML,!e){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(h||a)&&(h&&(a&&h.__html==a.__html||h.__html===l.innerHTML)||(l.innerHTML=h&&h.__html||""));}if(H(l,d,y,o,e),h)u.__k=[];else if(P(l,v$1(k=u.props.children)?k:[k],u,i,t,o&&"foreignObject"!==_,r,f,r?r[0]:i.__k&&g$1(i,0),e),null!=r)for(k=r.length;k--;)null!=r[k]&&p$1(r[k]);e||("value"in d&&void 0!==(k=d.value)&&(k!==l.value||"progress"===_&&!k||"option"===_&&k!==y.value)&&T$1(l,"value",k,y.value,!1),"checked"in d&&void 0!==(k=d.checked)&&k!==l.checked&&T$1(l,"checked",k,y.checked,!1));}return l}function O(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function q(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||O(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&q(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||p$1(n.__e),n.__=n.__e=n.__d=void 0;}function B$1(n,l,u){return this.constructor(n,u)}function D(u,i,t){var o,r,f;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,f=[],L(i,u=(!o&&t||i).__k=y(k$1,null,[u]),r||c$1,c$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,f,!o&&t?t:r?r.__e:i.firstChild,o),M(f,u);}n=s$1.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,b$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=h$1({},this.state),"function"==typeof n&&(n=n(h$1({},u),this.props)),n&&h$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),w$1(this));},b$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),w$1(this));},b$1.prototype.render=k$1,t$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},x.__r=0;
+  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 r,u,i,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r=null,e&&e(n);},l$1.__r=function(n){a&&a(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(k),i.__h.forEach(w),i.__h=[],0)),u=r;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__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;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));}function k(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function w(n){var t=r;n.__c=n.__(),r=t;}
+  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 = util.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 = common.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;
+  }(common.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 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 = D(jsx, domNode, this.rootNode);
-        };
-        JSXWidget.Component = b$1;
-        JSXWidget.createElement = y;
-        return JSXWidget;
-    }(common.HTMLWidget));
-    JSXWidget.prototype._class += " html_JSXWidget";
+  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 = common.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;
+  }(common.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 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 = common.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 = common.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 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 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 y("div", { style: this.props.style });
-        };
-        VizComponent.prototype.componentDidUpdate = function () {
-            this.refreshProps();
-            this.widget.render();
-        };
-        return VizComponent;
-    }(JSXWidget.Component));
+  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 rowCount = _this.useCalculatedRowCount() ? _this.calculateRowCount() : _this.rowCount();
+              var rowHeight = _this.fontSize();
+              var widestLabel = Math.max.apply(Math, data.map(function (row) { return _this.textSize(row[0], "Verdana", _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 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 y("div", { style: this.props.style });
-        };
-        VizInstance.prototype.componentDidUpdate = function () {
-            this.refreshProps();
-            this.widget.render();
-        };
-        return VizInstance;
-    }(JSXWidget.Component));
+  var n,l$1,u$1,i$1,o$1,r$1,f$1,c$1={},s$1=[],a$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,v$1=Array.isArray;function h$1(n,l){for(var u in l)n[u]=l[u];return n}function p$1(n){var l=n.parentNode;l&&l.removeChild(n);}function y(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 d$1(l,f,i,o,null)}function d$1(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,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function k$1(n){return n.children}function b$1(n,l){this.props=n,this.context=l;}function g$1(n,l){if(null==l)return n.__?g$1(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__d||u.__e;return "function"==typeof n.type?g$1(n):null}function m$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 m$1(n)}}function w$1(n){(!n.__d&&(n.__d=!0)&&i$1.push(n)&&!x.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||r$1)(x);}function x(){var n,l,u,t,o,r,e,c,s;for(i$1.sort(f$1);n=i$1.shift();)n.__d&&(l=i$1.length,t=void 0,o=void 0,r=void 0,c=(e=(u=n).__v).__e,(s=u.__P)&&(t=[],o=[],(r=h$1({},e)).__v=e.__v+1,z$1(s,e,r,u.__n,void 0!==s.ownerSVGElement,null!=e.__h?[c]:null,t,null==c?g$1(e):c,e.__h,o),L(t,e,o),e.__e!=c&&m$1(e)),i$1.length>l&&i$1.sort(f$1));x.__r=0;}function P(n,l,u,t,i,o,r,f,e,a,h){var p,y,_,b,m,w,x,P,C,D=0,H=t&&t.__k||s$1,I=H.length,T=I,j=l.length;for(u.__k=[],p=0;p<j;p++)null!=(b=u.__k[p]=null==(b=l[p])||"boolean"==typeof b||"function"==typeof b?null:"string"==typeof b||"number"==typeof b||"bigint"==typeof b?d$1(null,b,null,null,b):v$1(b)?d$1(k$1,{children:b},null,null,null):b.__b>0?d$1(b.type,b.props,b.key,b.ref?b.ref:null,b.__v):b)?(b.__=u,b.__b=u.__b+1,-1===(P=A(b,H,x=p+D,T))?_=c$1:(_=H[P]||c$1,H[P]=void 0,T--),z$1(n,b,_,i,o,r,f,e,a,h),m=b.__e,(y=b.ref)&&_.ref!=y&&(_.ref&&N(_.ref,null,b),h.push(y,b.__c||m,b)),null!=m&&(null==w&&(w=m),(C=_===c$1||null===_.__v)?-1==P&&D--:P!==x&&(P===x+1?D++:P>x?T>j-x?D+=P-x:D--:D=P<x&&P==x-1?P-x:0),x=p+D,"function"!=typeof b.type||P===x&&_.__k!==b.__k?"function"==typeof b.type||P===x&&!C?void 0!==b.__d?(e=b.__d,b.__d=void 0):e=m.nextSibling:e=S(n,m,e):e=$(b,e,n),"function"==typeof u.type&&(u.__d=e))):(_=H[p])&&null==_.key&&_.__e&&(_.__e==e&&(_.__=t,e=g$1(_)),O(_,_,!1),H[p]=null);for(u.__e=w,p=I;p--;)null!=H[p]&&("function"==typeof u.type&&null!=H[p].__e&&H[p].__e==u.__d&&(u.__d=H[p].__e.nextSibling),O(H[p],H[p]));}function $(n,l,u){for(var t,i=n.__k,o=0;i&&o<i.length;o++)(t=i[o])&&(t.__=n,l="function"==typeof t.type?$(t,l,u):S(u,t.__e,l));return l}function S(n,l,u){return null==u||u.parentNode!==n?n.insertBefore(l,null):l==u&&null!=l.parentNode||n.insertBefore(l,u),l.nextSibling}function A(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)return u;if(t>(null!=e?1:0))for(;r>=0||f<l.length;){if(r>=0){if((e=l[r])&&i==e.key&&o===e.type)return r;r--;}if(f<l.length){if((e=l[f])&&i==e.key&&o===e.type)return f;f++;}}return -1}function D(n,l,u,t,i){var o;for(o in u)"children"===o||"key"===o||o in l||I(n,o,null,u[o],t);for(o in l)i&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||I(n,o,l[o],u[o],t);}function H(n,l,u){"-"===l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||a$1.test(l)?u:u+"px";}function I(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||H(n.style,l,"");if(u)for(l in u)t&&u[l]===t[l]||H(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/(PointerCapture)$|Capture$/,"$1")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?t?u.u=t.u:(u.u=Date.now(),n.addEventListener(l,o?j$1:T$1,o)):n.removeEventListener(l,o?j$1:T$1,o);else if("dangerouslySetInnerHTML"!==l){if(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 T$1(n){var u=this.l[n.type+!1];if(n.t){if(n.t<=u.u)return}else n.t=Date.now();return u(l$1.event?l$1.event(n):n)}function j$1(n){return this.l[n.type+!0](l$1.event?l$1.event(n):n)}function z$1(n,u,t,i,o,r,f,e,c,s){var a,p,y,d,_,g,m,w,x,$,C,S,A,D,H,I=u.type;if(void 0!==u.constructor)return null;null!=t.__h&&(c=t.__h,e=u.__e=t.__e,u.__h=null,r=[e]),(a=l$1.__b)&&a(u);n:if("function"==typeof I)try{if(w=u.props,x=(a=I.contextType)&&i[a.__c],$=a?x?x.props.value:a.__:i,t.__c?m=(p=u.__c=t.__c).__=p.__E:("prototype"in I&&I.prototype.render?u.__c=p=new I(w,$):(u.__c=p=new b$1(w,$),p.constructor=I,p.render=q),x&&x.sub(p),p.props=w,p.state||(p.state={}),p.context=$,p.__n=i,y=p.__d=!0,p.__h=[],p._sb=[]),null==p.__s&&(p.__s=p.state),null!=I.getDerivedStateFromProps&&(p.__s==p.state&&(p.__s=h$1({},p.__s)),h$1(p.__s,I.getDerivedStateFromProps(w,p.__s))),d=p.props,_=p.state,p.__v=u,y)null==I.getDerivedStateFromProps&&null!=p.componentWillMount&&p.componentWillMount(),null!=p.componentDidMount&&p.__h.push(p.componentDidMount);else {if(null==I.getDerivedStateFromProps&&w!==d&&null!=p.componentWillReceiveProps&&p.componentWillReceiveProps(w,$),!p.__e&&(null!=p.shouldComponentUpdate&&!1===p.shouldComponentUpdate(w,p.__s,$)||u.__v===t.__v)){for(u.__v!==t.__v&&(p.props=w,p.state=p.__s,p.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.forEach(function(n){n&&(n.__=u);}),C=0;C<p._sb.length;C++)p.__h.push(p._sb[C]);p._sb=[],p.__h.length&&f.push(p);break n}null!=p.componentWillUpdate&&p.componentWillUpdate(w,p.__s,$),null!=p.componentDidUpdate&&p.__h.push(function(){p.componentDidUpdate(d,_,g);});}if(p.context=$,p.props=w,p.__P=n,p.__e=!1,S=l$1.__r,A=0,"prototype"in I&&I.prototype.render){for(p.state=p.__s,p.__d=!1,S&&S(u),a=p.render(p.props,p.state,p.context),D=0;D<p._sb.length;D++)p.__h.push(p._sb[D]);p._sb=[];}else do{p.__d=!1,S&&S(u),a=p.render(p.props,p.state,p.context),p.state=p.__s;}while(p.__d&&++A<25);p.state=p.__s,null!=p.getChildContext&&(i=h$1(h$1({},i),p.getChildContext())),y||null==p.getSnapshotBeforeUpdate||(g=p.getSnapshotBeforeUpdate(d,_)),P(n,v$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),p.base=u.__e,u.__h=null,p.__h.length&&f.push(p),m&&(p.__E=p.__=null);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,t);}else null==r&&u.__v===t.__v?(u.__k=t.__k,u.__e=t.__e):u.__e=M(t.__e,u,t,i,o,r,f,c,s);(a=l$1.diffed)&&a(u);}function L(n,u,t){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 M(l,u,t,i,o,r,f,e,s){var a,h,y,d=t.props,_=u.props,k=u.type,b=0;if("svg"===k&&(o=!0),null!=r)for(;b<r.length;b++)if((a=r[b])&&"setAttribute"in a==!!k&&(k?a.localName===k:3===a.nodeType)){l=a,r[b]=null;break}if(null==l){if(null===k)return document.createTextNode(_);l=o?document.createElementNS("http://www.w3.org/2000/svg",k):document.createElement(k,_.is&&_),r=null,e=!1;}if(null===k)d===_||e&&l.data===_||(l.data=_);else {if(r=r&&n.call(l.childNodes),h=(d=t.props||c$1).dangerouslySetInnerHTML,y=_.dangerouslySetInnerHTML,!e){if(null!=r)for(d={},b=0;b<l.attributes.length;b++)d[l.attributes[b].name]=l.attributes[b].value;(y||h)&&(y&&(h&&y.__html==h.__html||y.__html===l.innerHTML)||(l.innerHTML=y&&y.__html||""));}if(D(l,_,d,o,e),y)u.__k=[];else if(P(l,v$1(b=u.props.children)?b:[b],u,t,i,o&&"foreignObject"!==k,r,f,r?r[0]:t.__k&&g$1(t,0),e,s),null!=r)for(b=r.length;b--;)null!=r[b]&&p$1(r[b]);e||("value"in _&&void 0!==(b=_.value)&&(b!==l.value||"progress"===k&&!b||"option"===k&&b!==d.value)&&I(l,"value",b,d.value,!1),"checked"in _&&void 0!==(b=_.checked)&&b!==l.checked&&I(l,"checked",b,d.checked,!1));}return l}function N(n,u,t){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,t);}}function O(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,n.__c=void 0;}if(i=n.__k)for(o=0;o<i.length;o++)i[o]&&O(i[o],u,t||"function"!=typeof n.type);t||null==n.__e||p$1(n.__e),n.__=n.__e=n.__d=void 0;}function q(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=[],z$1(t,u=(!o&&i||t).__k=y(k$1,null,[u]),r||c$1,c$1,void 0!==t.ownerSVGElement,!o&&i?[i]:r?null:t.firstChild?n.call(t.childNodes):null,f,!o&&i?i:r?r.__e:t.firstChild,o,e),L(f,u,e);}n=s$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$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=h$1({},this.state),"function"==typeof n&&(n=n(h$1({},u),this.props)),n&&h$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),w$1(this));},b$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),w$1(this));},b$1.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},x.__r=0;
 
-    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() ? common.format(_this.secondColumnFormat())(row[1]) : row[1],
-                    _this.thirdColumnFormat_exists() ? common.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 });
+  var r,u,i,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r=null,e&&e(n);},l$1.__r=function(n){a&&a(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(k),i.__h.forEach(w),i.__h=[],0)),u=r;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__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;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));}function k(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function w(n){var t=r;n.__c=n.__(),r=t;}
 
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
+  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$1;
+      JSXWidget.createElement = y;
+      return JSXWidget;
+  }(common.HTMLWidget));
+  JSXWidget.prototype._class += " html_JSXWidget";
 
-      if (!css || typeof document === 'undefined') { return; }
+  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 = common.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 = common.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 head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
+  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 y("div", { style: this.props.style });
+      };
+      VizComponent.prototype.componentDidUpdate = function () {
+          this.refreshProps();
+          this.widget.render();
+      };
+      return VizComponent;
+  }(JSXWidget.Component));
 
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
+  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 y("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() ? common.format(_this.secondColumnFormat())(row[1]) : row[1],
+                  _this.thirdColumnFormat_exists() ? common.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 (!css || typeof document === 'undefined') { return; }
 
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
+    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 {
-        style.appendChild(document.createTextNode(css));
+        head.appendChild(style);
       }
+    } else {
+      head.appendChild(style);
     }
 
-    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);
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
 
-    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;
-    }(common.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");
+  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;
+  }(common.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");
 
-    exports.BUILD_VERSION = BUILD_VERSION;
-    exports.BreakdownTable = BreakdownTable;
-    exports.Button = Button;
-    exports.HTMLTooltip = HTMLTooltip;
-    exports.Item = Item;
-    exports.JSXWidget = JSXWidget;
-    exports.PKG_NAME = PKG_NAME;
-    exports.PKG_VERSION = PKG_VERSION;
-    exports.ReactD3 = ReactD3;
-    exports.SimpleTable = SimpleTable;
-    exports.Spacer = Spacer;
-    exports.StatsTable = StatsTable;
-    exports.StyledTable = StyledTable;
-    exports.TitleBar = TitleBar;
-    exports.ToggleButton = ToggleButton;
-    exports.VNode = VNode;
-    exports.VizComponent = VizComponent;
-    exports.VizInstance = VizInstance;
+  exports.BUILD_VERSION = BUILD_VERSION;
+  exports.BreakdownTable = BreakdownTable;
+  exports.Button = Button;
+  exports.HTMLTooltip = HTMLTooltip;
+  exports.Item = Item;
+  exports.JSXWidget = JSXWidget;
+  exports.PKG_NAME = PKG_NAME;
+  exports.PKG_VERSION = PKG_VERSION;
+  exports.ReactD3 = ReactD3;
+  exports.SimpleTable = SimpleTable;
+  exports.Spacer = Spacer;
+  exports.StatsTable = StatsTable;
+  exports.StyledTable = StyledTable;
+  exports.TitleBar = TitleBar;
+  exports.ToggleButton = ToggleButton;
+  exports.VNode = VNode;
+  exports.VizComponent = VizComponent;
+  exports.VizInstance = VizInstance;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
+  Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=index.js.map