@carbon/charts 0.44.1 → 0.46.4

package/components/essentials/tooltip-histogram.d.ts

@@ -1,26 +0,0 @@
-import { AxisChartsTooltip } from './tooltip-axis';
-export declare class TooltipHistogram extends AxisChartsTooltip {
-    init(): void;
-    /**
-     * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above
-     * positive valued data and below negative value data.
-     * @param hoveredElement
-     */
-    getTooltipPosition(hoveredElement: any, data?: any): {
-        placement: string;
-        position: {
-            left: number;
-            top: number;
-        };
-    };
-    /**
-     * Returns the html for the bar single point tooltip
-     * @param data associated values for the hovered bar
-     */
-    getTooltipHTML(e: any): string;
-    /**
-     * Multip tooltips for bar charts include totals for each stack
-     * @param data
-     */
-    getMultilineTooltipHTML(data: any): string;
-}

package/components/essentials/tooltip-histogram.js

@@ -1,154 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    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 (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { AxisChartsTooltip } from './tooltip-axis';
-import { Tools } from '../../tools';
-import { DOMUtils } from '../../services';
-import { CartesianOrientations, Events, } from './../../interfaces';
-// import the settings for the css prefix
-import settings from 'carbon-components/es/globals/js/settings';
-// D3 Imports
-import { select } from 'd3-selection';
-import { min } from 'd3-array';
-var TooltipHistogram = /** @class */ (function (_super) {
-    __extends(TooltipHistogram, _super);
-    function TooltipHistogram() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TooltipHistogram.prototype.init = function () {
-        var _this = this;
-        // Grab the tooltip element
-        var holder = select(this.services.domUtils.getHolder());
-        var chartprefix = Tools.getProperty(this.model.getOptions(), 'style', 'prefix');
-        this.tooltip = DOMUtils.appendOrSelect(holder, "div." + settings.prefix + "--" + chartprefix + "--tooltip");
-        // Apply html content to the tooltip
-        var tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, 'div.content-box');
-        this.tooltip.style('max-width', null);
-        // listen to show-tooltip Custom Events to render the tooltip
-        this.services.events.addEventListener(Events.Tooltip.SHOW, function (e) {
-            // check the type of tooltip and that it is enabled
-            if (Tools.getProperty(_this.model.getOptions(), 'tooltip', 'datapoint', 'enabled')) {
-                var data = e.detail.data;
-                console.log("data1", data);
-                var multidata = data.multidata;
-                var hoveredElement = e.detail.hoveredElement.node();
-                var defaultHTML = multidata.length > 1
-                    ? _this.getMultilineTooltipHTML(data)
-                    : _this.getTooltipHTML(data);
-                // if there is a provided tooltip HTML function call it and pass the defaultHTML
-                if (Tools.getProperty(_this.model.getOptions(), 'tooltip', 'customHTML')) {
-                    tooltipTextContainer.html(_this.model
-                        .getOptions()
-                        .tooltip.customHTML(data, defaultHTML));
-                }
-                else {
-                    // default tooltip
-                    tooltipTextContainer.html(defaultHTML);
-                }
-                var position = _this.getTooltipPosition(hoveredElement, data);
-                // Position the tooltip relative to the bars
-                _this.positionTooltip(e.detail.multidata ? undefined : position);
-            }
-            // Fade in
-            _this.tooltip.classed('hidden', false);
-        });
-        // listen to hide-tooltip Custom Events to hide the tooltip
-        this.services.events.addEventListener(Events.Tooltip.HIDE, function () {
-            _this.tooltip.classed('hidden', true);
-        });
-    };
-    /**
-     * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above
-     * positive valued data and below negative value data.
-     * @param hoveredElement
-     */
-    TooltipHistogram.prototype.getTooltipPosition = function (hoveredElement, data) {
-        var groupId = data['group-id'];
-        var groupElements = document.querySelectorAll("[group-id=\"" + groupId + "\"]");
-        var groupTop = min(Array.from(groupElements).map(function (d) { return d.getBoundingClientRect().top; }));
-        var holderPosition = select(this.services.domUtils.getHolder())
-            .node()
-            .getBoundingClientRect();
-        var verticalOffset = this.model.getOptions().tooltip.datapoint.verticalOffset;
-        var barPosition = hoveredElement.getBoundingClientRect();
-        var tooltipPos = {
-            left: barPosition.left - holderPosition.left + barPosition.width / 2,
-            top: groupTop - holderPosition.top - verticalOffset,
-        };
-        return { placement: "top", position: tooltipPos };
-    };
-    /**
-     * Returns the html for the bar single point tooltip
-     * @param data associated values for the hovered bar
-     */
-    TooltipHistogram.prototype.getTooltipHTML = function (e) {
-        var data = e.detail.data;
-        var options = this.model.getOptions();
-        var bin = data.bin;
-        console.log("data", data);
-        var value = data.multidata[0].value;
-        var cartesianScales = this.services.cartesianScales;
-        var domainTitle = Tools.getProperty(options, 'axes', cartesianScales.getDomainAxisPosition()).title;
-        var rangeTitle = Tools.getProperty(options, 'axes', cartesianScales.getRangeAxisPosition()).title;
-        var formattedValue = Tools.getProperty(this.model.getOptions(), 'tooltip', 'valueFormatter')
-            ? this.model.getOptions().tooltip.valueFormatter(value)
-            : value.toLocaleString('en');
-        return "\n\t\t<ul class='multi-tooltip'>\n\t\t\t<li>\n\t\t\t\t<div class='title-val'>\n\t\t\t\t\t<p class='label'>" + domainTitle + "</p>\n\t\t\t\t\t<p class='value'>" + (bin.x0 + '-' + (bin.x1 - 1)) + "</p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<div class='title-val'>\n\t\t\t\t\t<p class='label'>" + rangeTitle + "</p>\n\t\t\t\t\t<p class='value'>" + formattedValue + "</p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>\n\t\t";
-    };
-    /**
-     * Multip tooltips for bar charts include totals for each stack
-     * @param data
-     */
-    TooltipHistogram.prototype.getMultilineTooltipHTML = function (data) {
-        var _this = this;
-        var segments = data.multidata;
-        var options = this.model.getOptions();
-        segments.reverse();
-        // in a vertical bar chart the tooltip should display in order of the drawn bars
-        // in horizontal stacked bar, the order of the bars from Left to Right are displayed top down in tooltip
-        if (this.services.cartesianScales.getOrientation() ===
-            CartesianOrientations.VERTICAL) {
-            segments.reverse();
-        }
-        // get the total for the stacked tooltip
-        var total = segments.reduce(function (sum, item) { return sum + item.value; }, 0);
-        // format the total value
-        total = Tools.getProperty(this.model.getOptions(), 'tooltip', 'valueFormatter')
-            ? this.model.getOptions().tooltip.valueFormatter(total)
-            : total.toLocaleString('en');
-        var groupMapsTo = this.model.getOptions().data.groupMapsTo;
-        var bin = data.bin;
-        var cartesianScales = this.services.cartesianScales;
-        var title = Tools.getProperty(options, 'axes', cartesianScales.getDomainAxisPosition()).title;
-        var titleHTML = "<li>\n\t\t\t<div class='title-val'>\n\t\t\t\t<p class='label'>" + title + "</p>\n\t\t\t\t<p class='value'>" + (bin.x0 + '-' + (bin.x1 - 1)) + "</p>\n\t\t\t</div>\n\t\t</li>";
-        var totalHTML = "<li>\n\t\t\t<div class='total-val'>\n\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t<p class='value'>" + total + "</p>\n\t\t\t</div>\n\t\t</li>";
-        return ("<ul class='multi-tooltip'>" +
-            titleHTML +
-            segments
-                .map(function (datum) {
-                var formattedValue = Tools.getProperty(_this.model.getOptions(), 'tooltip', 'valueFormatter')
-                    ? _this.model
-                        .getOptions()
-                        .tooltip.valueFormatter(datum.value)
-                    : datum.value.toLocaleString('en');
-                var indicatorColor = _this.model.getStrokeColor(datum[groupMapsTo]);
-                return "\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t\t<p class=\"label\">" + datum[groupMapsTo] + "</p>\n\t\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>";
-            })
-                .join('') +
-            totalHTML +
-            "</ul>");
-    };
-    return TooltipHistogram;
-}(AxisChartsTooltip));
-export { TooltipHistogram };
-//# sourceMappingURL=../../../src/components/essentials/tooltip-histogram.js.map

package/components/essentials/tooltip-histogram.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-histogram.js","sourceRoot":"","sources":["tooltip-histogram.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EACN,qBAAqB,EACrB,MAAM,GACN,MAAM,oBAAoB,CAAC;AAE5B,yCAAyC;AACzC,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAEhE,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B;IAAsC,oCAAiB;IAAvD;;IA0OA,CAAC;IAzOA,+BAAI,GAAJ;QAAA,iBAwEC;QAvEA,2BAA2B;QAC3B,IAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;QACF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,cAAc,CACrC,MAAM,EACN,SAAO,QAAQ,CAAC,MAAM,UAAK,WAAW,cAAW,CACjD,CAAC;QAEF,oCAAoC;QACpC,IAAM,oBAAoB,GAAG,QAAQ,CAAC,cAAc,CACnD,IAAI,CAAC,OAAO,EACZ,iBAAiB,CACjB,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAEtC,6DAA6D;QAC7D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,CAAC;YAC5D,mDAAmD;YACnD,IACC,KAAK,CAAC,WAAW,CAChB,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,WAAW,EACX,SAAS,CACT,EACA;gBACD,IAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;gBAC3B,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;gBAC1B,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBACjC,IAAM,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;gBAEtD,IAAM,WAAW,GAChB,SAAS,CAAC,MAAM,GAAG,CAAC;oBACnB,CAAC,CAAC,KAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;oBACpC,CAAC,CAAC,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBAE9B,gFAAgF;gBAChF,IACC,KAAK,CAAC,WAAW,CAChB,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,YAAY,CACZ,EACA;oBACD,oBAAoB,CAAC,IAAI,CACxB,KAAI,CAAC,KAAK;yBACR,UAAU,EAAE;yBACZ,OAAO,CAAC,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,CACvC,CAAC;iBACF;qBAAM;oBACN,kBAAkB;oBAClB,oBAAoB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBACvC;gBAED,IAAM,QAAQ,GAAG,KAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE,IAAI,CAAQ,CAAC;gBACtE,4CAA4C;gBAC5C,KAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;aAChE;YAED,UAAU;YACV,KAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,2DAA2D;QAC3D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1D,KAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,6CAAkB,GAAlB,UAAmB,cAAc,EAAE,IAAU;QAC5C,IAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,IAAM,aAAa,GAAG,QAAQ,CAAC,gBAAgB,CAC9C,iBAAc,OAAO,QAAI,CACzB,CAAC;QACF,IAAM,QAAQ,GAAG,GAAG,CACnB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,CAC5B,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,qBAAqB,EAAE,CAAC,GAAG,EAA7B,CAA6B,CACzC,CACD,CAAC;QACF,IAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;aAC/D,IAAI,EAAE;aACN,qBAAqB,EAAE,CAAC;QAClB,IAAA,yEAAc,CAA+C;QAErE,IAAM,WAAW,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAC3D,IAAM,UAAU,GAAG;YAClB,IAAI,EACH,WAAW,CAAC,IAAI,GAAG,cAAc,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC;YAC/D,GAAG,EAAE,QAAQ,GAAG,cAAc,CAAC,GAAG,GAAG,cAAc;SACnD,CAAC;QAEF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACnD,CAAC;IAED;;;OAGG;IACH,yCAAc,GAAd,UAAe,CAAM;QACpB,IAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAC3B,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAChC,IAAA,cAAG,CAAU;QACrB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;QACjB,IAAA,+BAAK,CAAuB;QAC5B,IAAA,+CAAe,CAAmB;QAClC,IAAA,+FAAkB,CAIxB;QACM,IAAA,6FAAiB,CAIvB;QACF,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACvC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB;YACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC;YACvD,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAE9B,OAAO,+GAIe,WAAW,0CACX,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,oHAK3B,UAAU,yCACV,cAAc,uDAInC,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,kDAAuB,GAAvB,UAAwB,IAAS;QAAjC,iBA6EC;QA5EA,IAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAExC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACnB,gFAAgF;QAChF,wGAAwG;QACxG,IACC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE;YAC9C,qBAAqB,CAAC,QAAQ,EAC7B;YACD,QAAQ,CAAC,OAAO,EAAE,CAAC;SACnB;QAED,wCAAwC;QACxC,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,IAAK,OAAA,GAAG,GAAG,IAAI,CAAC,KAAK,EAAhB,CAAgB,EAAE,CAAC,CAAC,CAAC;QAChE,yBAAyB;QACzB,KAAK,GAAG,KAAK,CAAC,WAAW,CACxB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB;YACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC;YACvD,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEtB,IAAA,sDAAW,CAAkC;QAC7C,IAAA,cAAG,CAAU;QACb,IAAA,+CAAe,CAAmB;QAClC,IAAA,yFAAK,CAIX;QACF,IAAM,SAAS,GAAG,mEAEG,KAAK,wCACL,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,mCAE1C,CAAC;QACP,IAAM,SAAS,GAAG,uGAGG,KAAK,kCAEpB,CAAC;QAEP,OAAO,CACN,4BAA4B;YAC5B,SAAS;YACT,QAAQ;iBACN,GAAG,CAAC,UAAC,KAAK;gBACV,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACvC,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB;oBACA,CAAC,CAAC,KAAI,CAAC,KAAK;yBACT,UAAU,EAAE;yBACZ,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;oBACtC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACpC,IAAM,cAAc,GAAG,KAAI,CAAC,KAAK,CAAC,cAAc,CAC/C,KAAK,CAAC,WAAW,CAAC,CAClB,CAAC;gBAEF,OAAO,gHAGwB,cAAc,0EACxB,KAAK,CAAC,WAAW,CAAC,+CAClB,cAAc,8CAE7B,CAAC;YACR,CAAC,CAAC;iBACD,IAAI,CAAC,EAAE,CAAC;YACV,SAAS;YACT,OAAO,CACP,CAAC;IACH,CAAC;IACF,uBAAC;AAAD,CAAC,AA1OD,CAAsC,iBAAiB,GA0OtD","sourcesContent":["import { AxisChartsTooltip } from './tooltip-axis';\nimport { Tools } from '../../tools';\nimport { DOMUtils } from '../../services';\nimport {\n\tCartesianOrientations,\n\tEvents,\n} from './../../interfaces';\n\n// import the settings for the css prefix\nimport settings from 'carbon-components/es/globals/js/settings';\n\n// D3 Imports\nimport { select } from 'd3-selection';\nimport { min } from 'd3-array';\n\nexport class TooltipHistogram extends AxisChartsTooltip {\n\tinit() {\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t'style',\n\t\t\t'prefix'\n\t\t);\n\t\tthis.tooltip = DOMUtils.appendOrSelect(\n\t\t\tholder,\n\t\t\t`div.${settings.prefix}--${chartprefix}--tooltip`\n\t\t);\n\n\t\t// Apply html content to the tooltip\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(\n\t\t\tthis.tooltip,\n\t\t\t'div.content-box'\n\t\t);\n\t\tthis.tooltip.style('max-width', null);\n\n\t\t// listen to show-tooltip Custom Events to render the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.SHOW, (e) => {\n\t\t\t// check the type of tooltip and that it is enabled\n\t\t\tif (\n\t\t\t\tTools.getProperty(\n\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t'tooltip',\n\t\t\t\t\t'datapoint',\n\t\t\t\t\t'enabled'\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst data = e.detail.data;\n\t\t\t\tconsole.log(\"data1\", data)\n\t\t\t\tconst multidata = data.multidata;\n\t\t\t\tconst hoveredElement = e.detail.hoveredElement.node();\n\n\t\t\t\tconst defaultHTML =\n\t\t\t\t\tmultidata.length > 1\n\t\t\t\t\t\t? this.getMultilineTooltipHTML(data)\n\t\t\t\t\t\t: this.getTooltipHTML(data);\n\n\t\t\t\t// if there is a provided tooltip HTML function call it and pass the defaultHTML\n\t\t\t\tif (\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t'tooltip',\n\t\t\t\t\t\t'customHTML'\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\ttooltipTextContainer.html(\n\t\t\t\t\t\tthis.model\n\t\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t\t.tooltip.customHTML(data, defaultHTML)\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t// default tooltip\n\t\t\t\t\ttooltipTextContainer.html(defaultHTML);\n\t\t\t\t}\n\n\t\t\t\tconst position = this.getTooltipPosition(hoveredElement, data) as any;\n\t\t\t\t// Position the tooltip relative to the bars\n\t\t\t\tthis.positionTooltip(e.detail.multidata ? undefined : position);\n\t\t\t}\n\n\t\t\t// Fade in\n\t\t\tthis.tooltip.classed('hidden', false);\n\t\t});\n\n\t\t// listen to hide-tooltip Custom Events to hide the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.HIDE, () => {\n\t\t\tthis.tooltip.classed('hidden', true);\n\t\t});\n\t}\n\n\t/**\n\t * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above\n\t * positive valued data and below negative value data.\n\t * @param hoveredElement\n\t */\n\tgetTooltipPosition(hoveredElement, data?: any) {\n\t\tconst groupId = data['group-id'];\n\t\tconst groupElements = document.querySelectorAll(\n\t\t\t`[group-id=\"${groupId}\"]`\n\t\t);\n\t\tconst groupTop = min(\n\t\t\tArray.from(groupElements).map(\n\t\t\t\t(d: any) => d.getBoundingClientRect().top\n\t\t\t)\n\t\t);\n\t\tconst holderPosition = select(this.services.domUtils.getHolder())\n\t\t\t.node()\n\t\t\t.getBoundingClientRect();\n\t\tconst { verticalOffset } = this.model.getOptions().tooltip.datapoint;\n\n\t\tconst barPosition = hoveredElement.getBoundingClientRect();\n\t\tconst tooltipPos = {\n\t\t\tleft:\n\t\t\t\tbarPosition.left - holderPosition.left + barPosition.width / 2,\n\t\t\ttop: groupTop - holderPosition.top - verticalOffset,\n\t\t};\n\n\t\treturn { placement: \"top\", position: tooltipPos };\n\t}\n\n\t/**\n\t * Returns the html for the bar single point tooltip\n\t * @param data associated values for the hovered bar\n\t */\n\tgetTooltipHTML(e: any) {\n\t\tconst data = e.detail.data;\n\t\tconst options = this.model.getOptions();\n\t\tconst { bin } = data;\n\t\tconsole.log(\"data\", data)\n\t\tconst { value } = data.multidata[0];\n\t\tconst { cartesianScales } = this.services;\n\t\tconst { title: domainTitle } = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'axes',\n\t\t\tcartesianScales.getDomainAxisPosition()\n\t\t);\n\t\tconst { title: rangeTitle } = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'axes',\n\t\t\tcartesianScales.getRangeAxisPosition()\n\t\t);\n\t\tconst formattedValue = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t'tooltip',\n\t\t\t'valueFormatter'\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(value)\n\t\t\t: value.toLocaleString('en');\n\n\t\treturn `\n\t\t<ul class='multi-tooltip'>\n\t\t\t<li>\n\t\t\t\t<div class='title-val'>\n\t\t\t\t\t<p class='label'>${domainTitle}</p>\n\t\t\t\t\t<p class='value'>${bin.x0 + '-' + (bin.x1 - 1)}</p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<div class='title-val'>\n\t\t\t\t\t<p class='label'>${rangeTitle}</p>\n\t\t\t\t\t<p class='value'>${formattedValue}</p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>\n\t\t`;\n\t}\n\n\t/**\n\t * Multip tooltips for bar charts include totals for each stack\n\t * @param data\n\t */\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst segments = data.multidata;\n\t\tconst options = this.model.getOptions();\n\n\t\tsegments.reverse();\n\t\t// in a vertical bar chart the tooltip should display in order of the drawn bars\n\t\t// in horizontal stacked bar, the order of the bars from Left to Right are displayed top down in tooltip\n\t\tif (\n\t\t\tthis.services.cartesianScales.getOrientation() ===\n\t\t\tCartesianOrientations.VERTICAL\n\t\t) {\n\t\t\tsegments.reverse();\n\t\t}\n\n\t\t// get the total for the stacked tooltip\n\t\tlet total = segments.reduce((sum, item) => sum + item.value, 0);\n\t\t// format the total value\n\t\ttotal = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t'tooltip',\n\t\t\t'valueFormatter'\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(total)\n\t\t\t: total.toLocaleString('en');\n\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\t\tconst { bin } = data;\n\t\tconst { cartesianScales } = this.services;\n\t\tconst { title } = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'axes',\n\t\t\tcartesianScales.getDomainAxisPosition()\n\t\t);\n\t\tconst titleHTML = `<li>\n\t\t\t<div class='title-val'>\n\t\t\t\t<p class='label'>${title}</p>\n\t\t\t\t<p class='value'>${bin.x0 + '-' + (bin.x1 - 1)}</p>\n\t\t\t</div>\n\t\t</li>`;\n\t\tconst totalHTML = `<li>\n\t\t\t<div class='total-val'>\n\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t<p class='value'>${total}</p>\n\t\t\t</div>\n\t\t</li>`;\n\n\t\treturn (\n\t\t\t`<ul class='multi-tooltip'>` +\n\t\t\ttitleHTML +\n\t\t\tsegments\n\t\t\t\t.map((datum) => {\n\t\t\t\t\tconst formattedValue = Tools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t'tooltip',\n\t\t\t\t\t\t'valueFormatter'\n\t\t\t\t\t)\n\t\t\t\t\t\t? this.model\n\t\t\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t\t\t.tooltip.valueFormatter(datum.value)\n\t\t\t\t\t\t: datum.value.toLocaleString('en');\n\t\t\t\t\tconst indicatorColor = this.model.getStrokeColor(\n\t\t\t\t\t\tdatum[groupMapsTo]\n\t\t\t\t\t);\n\n\t\t\t\t\treturn `\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>`;\n\t\t\t\t})\n\t\t\t\t.join('') +\n\t\t\ttotalHTML +\n\t\t\t`</ul>`\n\t\t);\n\t}\n}\n"]}