@carbon/charts 0.28.0 → 0.29.2

package/src/components/essentials/tooltip-bar.js

@@ -1,149 +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 { Tooltip } from "./tooltip";
-import { Tools } from "../../tools";
-import { DOMUtils } from "../../services";
-import { TooltipPosition, TooltipTypes, CartesianOrientations } from "./../../interfaces/enums";
-// import the settings for the css prefix
-import settings from "carbon-components/src/globals/js/settings";
-// D3 Imports
-import { select } from "d3-selection";
-var TooltipBar = /** @class */ (function (_super) {
-    __extends(TooltipBar, _super);
-    function TooltipBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TooltipBar.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("show-tooltip", function (e) {
-            // check the type of tooltip and that it is enabled
-            if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled"))
-                || (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled"))) {
-                var hoveredElement = e.detail.hoveredElement.node();
-                var defaultHTML = void 0;
-                if (e.detail.multidata) {
-                    // multi tooltip
-                    defaultHTML = _this.getMultilineTooltipHTML(e.detail.multidata);
-                }
-                else {
-                    defaultHTML = _this.getTooltipHTML(e.detail.hoveredElement.datum());
-                }
-                // 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(hoveredElement, defaultHTML));
-                }
-                else {
-                    // default tooltip
-                    tooltipTextContainer.html(defaultHTML);
-                }
-                var position = _this.getTooltipPosition(hoveredElement);
-                // Position the tooltip relative to the bars
-                _this.positionTooltip(e.detail.multidata ? undefined : position);
-            }
-            else if (e.detail.type === TooltipTypes.TITLE) {
-                // use the chart size to enforce a max width on the tooltip
-                var chart = DOMUtils.appendOrSelect(holder, "svg." + settings.prefix + "--" + chartprefix + "--chart-svg");
-                // use the configs to determine how large the tooltip should be
-                var tooltipMax = DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(_this.model.getOptions(), "tooltip", "title", "width");
-                _this.tooltip.style("max-width", tooltipMax);
-                // use tooltip.ts to get the tooltip html for titles
-                tooltipTextContainer.html(_super.prototype.getTooltipHTML.call(_this, e.detail.hoveredElement, TooltipTypes.TITLE));
-                // get the position based on the title positioning (static)
-                var position = _super.prototype.getTooltipPosition.call(_this, e.detail.hoveredElement.node());
-                _this.positionTooltip(position);
-            }
-            // Fade in
-            _this.tooltip.classed("hidden", false);
-        });
-        // listen to hide-tooltip Custom Events to hide the tooltip
-        this.services.events.addEventListener("hide-tooltip", 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
-     */
-    TooltipBar.prototype.getTooltipPosition = function (hoveredElement) {
-        var data = select(hoveredElement).datum();
-        var holderPosition = select(this.services.domUtils.getHolder()).node().getBoundingClientRect();
-        var barPosition = hoveredElement.getBoundingClientRect();
-        var verticalOffset = this.model.getOptions().tooltip.datapoint.verticalOffset;
-        // if there is a negative value bar chart, need to place the tooltip below the bar
-        if (data.value <= 0) {
-            // negative bars
-            var tooltipPos = {
-                left: (barPosition.left - holderPosition.left) + barPosition.width / 2,
-                top: (barPosition.bottom - holderPosition.top) + verticalOffset
-            };
-            return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
-        }
-        else {
-            // positive bars
-            var tooltipPos = {
-                left: (barPosition.left - holderPosition.left) + barPosition.width / 2,
-                top: (barPosition.top - holderPosition.top) - verticalOffset
-            };
-            return { placement: TooltipPosition.TOP, position: tooltipPos };
-        }
-    };
-    /**
-     * Returns the html for the bar single point tooltip
-     * @param data associated values for the hovered bar
-     */
-    TooltipBar.prototype.getTooltipHTML = function (data) {
-        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
-            this.model.getOptions().tooltip.valueFormatter(data.value) : data.value.toLocaleString("en");
-        return "<div class=\"datapoint-tooltip\"><p class=\"value\">" + formattedValue + "</p></div>";
-    };
-    /**
-     * Multip tooltips for bar charts include totals for each stack
-     * @param data
-     */
-    TooltipBar.prototype.getMultilineTooltipHTML = function (data) {
-        var _this = this;
-        var points = data;
-        points.reverse();
-        // in a vertical bar chart the tooltip should display in order of the drawn bars
-        // in horizontal stacked bar, the order of the segments from Left to Right are displayed top down in tooltip
-        if (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {
-            points.reverse();
-        }
-        // get the total for the stacked tooltip
-        var total = points.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");
-        return "<ul class='multi-tooltip'>" +
-            points.map(function (datapoint) {
-                var formattedValue = Tools.getProperty(_this.model.getOptions(), "tooltip", "valueFormatter") ?
-                    _this.model.getOptions().tooltip.valueFormatter(datapoint.value) : datapoint.value.toLocaleString("en");
-                var indicatorColor = _this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label, datapoint.value);
-                return "\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">" + datapoint.datasetLabel + "</p>\n\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
-            }).join("") +
-            ("<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>" + total + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>");
-    };
-    return TooltipBar;
-}(Tooltip));
-export { TooltipBar };
-//# sourceMappingURL=../../../../src/components/essentials/tooltip-bar.js.map

package/src/components/essentials/tooltip-bar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-bar.js","sourceRoot":"","sources":["tooltip-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport { TooltipPosition, TooltipTypes, CartesianOrientations } from \"./../../interfaces/enums\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/src/globals/js/settings\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\n\nexport class TooltipBar extends Tooltip {\n\tinit() {\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartprefix = Tools.getProperty(this.model.getOptions(), \"style\", \"prefix\");\n\t\tthis.tooltip = DOMUtils.appendOrSelect(holder, `div.${settings.prefix}--${chartprefix}--tooltip`);\n\n\t\t// Apply html content to the tooltip\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, \"div.content-box\");\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(\"show-tooltip\", e => {\n\t\t\t// check the type of tooltip and that it is enabled\n\t\t\tif ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), \"tooltip\", \"datapoint\", \"enabled\"))\n\t\t\t\t|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), \"tooltip\", \"gridline\", \"enabled\")) ) {\n\n\t\t\t\tconst hoveredElement = e.detail.hoveredElement.node();\n\n\t\t\t\tlet defaultHTML;\n\t\t\t\tif (e.detail.multidata) {\n\t\t\t\t\t// multi tooltip\n\t\t\t\t\tdefaultHTML = this.getMultilineTooltipHTML(e.detail.multidata);\n\t\t\t\t} else {\n\t\t\t\t\tdefaultHTML = this.getTooltipHTML(e.detail.hoveredElement.datum());\n\t\t\t\t}\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 (Tools.getProperty(this.model.getOptions(), \"tooltip\", \"customHTML\")) {\n\t\t\t\t\ttooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement, defaultHTML));\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);\n\t\t\t\t// Position the tooltip relative to the bars\n\t\t\t\tthis.positionTooltip(e.detail.multidata ? undefined : position );\n\n\t\t\t} else if (e.detail.type === TooltipTypes.TITLE) {\n\t\t\t\t// use the chart size to enforce a max width on the tooltip\n\t\t\t\tconst chart = DOMUtils.appendOrSelect(holder, `svg.${settings.prefix}--${chartprefix}--chart-svg`);\n\t\t\t\t// use the configs to determine how large the tooltip should be\n\t\t\t\tconst tooltipMax =  DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(this.model.getOptions(), \"tooltip\", \"title\", \"width\");\n\t\t\t\tthis.tooltip.style(\"max-width\", tooltipMax);\n\n\t\t\t\t// use tooltip.ts to get the tooltip html for titles\n\t\t\t\ttooltipTextContainer.html(super.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));\n\n\t\t\t\t// get the position based on the title positioning (static)\n\t\t\t\tconst position = super.getTooltipPosition(e.detail.hoveredElement.node());\n\t\t\t\tthis.positionTooltip(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(\"hide-tooltip\", () => {\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) {\n\t\tconst data = select(hoveredElement).datum() as any;\n\n\t\tconst holderPosition = select(this.services.domUtils.getHolder()).node().getBoundingClientRect();\n\t\tconst barPosition = hoveredElement.getBoundingClientRect();\n\n\t\tconst { verticalOffset } = this.model.getOptions().tooltip.datapoint;\n\t\t// if there is a negative value bar chart, need to place the tooltip below the bar\n\t\tif (data.value <= 0) {\n\t\t\t// negative bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft: (barPosition.left - holderPosition.left) + barPosition.width / 2,\n\t\t\t\ttop: (barPosition.bottom - holderPosition.top) + verticalOffset\n\t\t\t};\n\n\t\t\treturn {placement: TooltipPosition.BOTTOM, position: tooltipPos};\n\t\t} else {\n\t\t\t// positive bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft: (barPosition.left - holderPosition.left) + barPosition.width / 2,\n\t\t\t\ttop: (barPosition.top - holderPosition.top) - verticalOffset\n\t\t\t};\n\n\t\t\treturn {placement: TooltipPosition.TOP, position: tooltipPos};\n\t\t}\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(data: any) {\n\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(data.value) : data.value.toLocaleString(\"en\");\n\n\t\treturn `<div class=\"datapoint-tooltip\"><p class=\"value\">${formattedValue}</p></div>`;\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 points = data;\n\n\t\tpoints.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 segments from Left to Right are displayed top down in tooltip\n\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\tpoints.reverse();\n\t\t}\n\n\t\t// get the total for the stacked tooltip\n\t\tlet total = points.reduce((sum, item) => sum + item.value, 0);\n\n\t\t// format the total value\n\t\ttotal = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(total) : total.toLocaleString(\"en\");\n\n\t\treturn  \"<ul class='multi-tooltip'>\" +\n\t\t\tpoints.map(datapoint => {\n\t\t\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\t\t\tthis.model.getOptions().tooltip.valueFormatter(datapoint.value) : datapoint.value.toLocaleString(\"en\");\n\n\t\t\t\tconst indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label, datapoint.value);\n\n\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datapoint.datasetLabel}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t}).join(\"\") +\n\t\t\t\t`<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>${total}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>`;\n\t}\n}\n"]}

package/src/components/essentials/tooltip-scatter.js

@@ -1,35 +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 { Tooltip } from "./tooltip";
-import { Tools } from "../../tools";
-import { TooltipTypes } from "./../../interfaces";
-var TooltipScatter = /** @class */ (function (_super) {
-    __extends(TooltipScatter, _super);
-    function TooltipScatter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TooltipScatter.prototype.getTooltipHTML = function (data, type) {
-        if (type === TooltipTypes.TITLE) {
-            // the main tooltip component handles title styles
-            return _super.prototype.getTooltipHTML.call(this, data, type);
-        }
-        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
-            this.model.getOptions().tooltip.valueFormatter(data.value) : data.value.toLocaleString("en");
-        var indicatorColor = this.model.getStrokeColor(data.datasetLabel, data.label, data.value);
-        return "\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">" + data.datasetLabel + "</p>\n\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t</div>";
-    };
-    return TooltipScatter;
-}(Tooltip));
-export { TooltipScatter };
-//# sourceMappingURL=../../../../src/components/essentials/tooltip-scatter.js.map

package/src/components/essentials/tooltip-scatter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-scatter.js","sourceRoot":"","sources":["tooltip-scatter.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD;IAAoC,kCAAO;IAA3C;;IAmBA,CAAC;IAlBA,uCAAc,GAAd,UAAe,IAAS,EAAE,IAAkB;QAC3C,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,kDAAkD;YAClD,OAAO,iBAAM,cAAc,YAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SACxC;QAED,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;YAChG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAE7F,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAE5F,OAAO,oFAEwB,cAAc,oEACxB,IAAI,CAAC,YAAY,yCACjB,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,qBAAC;AAAD,CAAC,AAnBD,CAAoC,OAAO,GAmB1C","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"./../../interfaces\";\n\n\nexport class TooltipScatter extends Tooltip {\n\tgetTooltipHTML(data: any, type: TooltipTypes) {\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\t// the main tooltip component handles title styles\n\t\t\treturn super.getTooltipHTML(data, type);\n\t\t}\n\n\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(data.value) : data.value.toLocaleString(\"en\");\n\n\t\tconst indicatorColor = this.model.getStrokeColor(data.datasetLabel, data.label, data.value);\n\n\t\treturn `\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">${data.datasetLabel}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`;\n\t}\n}\n"]}

package/src/components/essentials/tooltip.js

@@ -1,177 +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 { Component } from "../component";
-import { Tools } from "../../tools";
-import { DOMUtils } from "../../services";
-// Carbon position service
-import Position, { PLACEMENTS } from "@carbon/utils-position";
-// import the settings for the css prefix
-import settings from "carbon-components/src/globals/js/settings";
-// D3 Imports
-import { select, mouse, event } from "d3-selection";
-import { TooltipTypes, ScaleTypes, TooltipPosition } from "../../interfaces";
-var Tooltip = /** @class */ (function (_super) {
-    __extends(Tooltip, _super);
-    function Tooltip(model, services, configs) {
-        var _this = _super.call(this, model, services, configs) || this;
-        _this.type = "tooltip";
-        _this.positionService = new Position();
-        _this.init();
-        return _this;
-    }
-    Tooltip.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("show-tooltip", function (e) {
-            // check the type of tooltip and that it is enabled
-            if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled"))
-                || (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled"))) {
-                var data = select(event.target).datum();
-                // Generate default tooltip
-                var defaultHTML = void 0;
-                if (e.detail.multidata) {
-                    // multi tooltip
-                    data = e.detail.multidata;
-                    defaultHTML = _this.getMultilineTooltipHTML(data);
-                }
-                else {
-                    defaultHTML = _this.getTooltipHTML(data, TooltipTypes.DATAPOINT);
-                }
-                // if there is a provided tooltip HTML function call it
-                if (Tools.getProperty(_this.model.getOptions(), "tooltip", "customHTML")) {
-                    tooltipTextContainer.html(_this.model.getOptions().tooltip.customHTML(data, defaultHTML));
-                }
-                else {
-                    // Use default tooltip
-                    tooltipTextContainer.html(defaultHTML);
-                }
-                // Position the tooltip
-                _this.positionTooltip();
-            }
-            else if (e.detail.type === TooltipTypes.TITLE) {
-                var chart = DOMUtils.appendOrSelect(holder, "svg." + settings.prefix + "--" + chartprefix + "--chart-svg");
-                var chartWidth = DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(_this.model.getOptions(), "tooltip", "title", "width");
-                _this.tooltip.style("max-width", chartWidth);
-                tooltipTextContainer.html(_this.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));
-                // get the position based on the title positioning (static)
-                var position = _this.getTooltipPosition(e.detail.hoveredElement.node());
-                _this.positionTooltip(position);
-            }
-            // Fade in
-            _this.tooltip.classed("hidden", false);
-        });
-        // listen to hide-tooltip Custom Events to hide the tooltip
-        this.services.events.addEventListener("hide-tooltip", function () {
-            _this.tooltip.classed("hidden", true);
-        });
-    };
-    Tooltip.prototype.getTooltipHTML = function (data, type) {
-        // check if it is getting styles for a tooltip type
-        if (type === TooltipTypes.TITLE) {
-            var title = this.model.getOptions().title;
-            return "<div class=\"title-tooltip\"><text>" + title + "</text></div>";
-        }
-        // this cleans up the data item, pie slices have the data within the data.data but other datapoints are self contained within data
-        var dataVal = Tools.getProperty(data, "data") ? data.data : data;
-        // format the value if needed
-        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
-            this.model.getOptions().tooltip.valueFormatter(dataVal.value) : dataVal.value.toLocaleString("en");
-        // pie charts don't have a dataset label since they only support one dataset
-        var label = dataVal.datasetLabel ? dataVal.datasetLabel : dataVal.label;
-        return "<div class=\"datapoint-tooltip\">\n\t\t\t\t\t<p class=\"label\">" + label + "</p>\n\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t</div>";
-    };
-    Tooltip.prototype.getMultilineTooltipHTML = function (data) {
-        var _this = this;
-        var points = data;
-        // sort them so they are in the same order as the graph
-        points.sort(function (a, b) { return b.value - a.value; });
-        // tells us which value to use
-        var scaleType = this.services.cartesianScales.getDomainScale().scaleType;
-        return "<ul class='multi-tooltip'>" +
-            points.map(function (datapoint) {
-                // check if the datapoint has multiple values associates (multiple axes)
-                var datapointValue = datapoint.value;
-                if (datapointValue instanceof Object) {
-                    // scale type determines which value we care about since it should align with the scale data
-                    datapointValue = scaleType === ScaleTypes.TIME ? datapoint.value.date : datapoint.value.value;
-                }
-                var formattedValue = Tools.getProperty(_this.model.getOptions(), "tooltip", "valueFormatter") ?
-                    _this.model.getOptions().tooltip.valueFormatter(datapointValue) : datapointValue.toLocaleString("en");
-                var indicatorColor = _this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
-                return "\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">" + datapoint.datasetLabel + "</p>\n\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
-            }).join("") + "</ul>";
-    };
-    Tooltip.prototype.render = function () {
-        this.tooltip.classed("hidden", true);
-    };
-    // returns static position based on the element
-    Tooltip.prototype.getTooltipPosition = function (hoveredElement) {
-        var holderPosition = select(this.services.domUtils.getHolder()).node().getBoundingClientRect();
-        var elementPosition = hoveredElement.getBoundingClientRect();
-        // get the vertical offset
-        var verticalOffset = this.model.getOptions().tooltip.title.verticalOffset;
-        var tooltipPos = {
-            left: (elementPosition.left - holderPosition.left) + elementPosition.width / 2,
-            top: (elementPosition.top - holderPosition.top - verticalOffset)
-        };
-        return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
-    };
-    Tooltip.prototype.positionTooltip = function (positionOverride) {
-        var holder = this.services.domUtils.getHolder();
-        var target = this.tooltip.node();
-        var mouseRelativePos = mouse(holder);
-        var pos;
-        // override position to place tooltip at {placement:.., position:{top:.. , left:..}}
-        if (positionOverride) {
-            // placement determines whether the tooltip is centered above or below the position provided
-            var placement = positionOverride.placement === TooltipPosition.TOP ? PLACEMENTS.TOP : PLACEMENTS.BOTTOM;
-            pos = this.positionService.findPositionAt(positionOverride.position, target, placement);
-        }
-        else {
-            // Find out whether tooltip should be shown on the left or right side
-            var bestPlacementOption = this.positionService.findBestPlacementAt({
-                left: mouseRelativePos[0],
-                top: mouseRelativePos[1]
-            }, target, [
-                PLACEMENTS.RIGHT,
-                PLACEMENTS.LEFT,
-                PLACEMENTS.TOP,
-                PLACEMENTS.BOTTOM
-            ], function () { return ({
-                width: holder.offsetWidth,
-                height: holder.offsetHeight
-            }); });
-            var horizontalOffset = this.model.getOptions().tooltip.datapoint.horizontalOffset;
-            if (bestPlacementOption === PLACEMENTS.LEFT) {
-                horizontalOffset *= -1;
-            }
-            // Get coordinates to where tooltip should be positioned
-            pos = this.positionService.findPositionAt({
-                left: mouseRelativePos[0] + horizontalOffset,
-                top: mouseRelativePos[1]
-            }, target, bestPlacementOption);
-        }
-        this.positionService.setElement(target, pos);
-    };
-    return Tooltip;
-}(Component));
-export { Tooltip };
-//# sourceMappingURL=../../../../src/components/essentials/tooltip.js.map

package/src/components/essentials/tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import * as Configuration from \"../../configuration\";\nimport { Component } from \"../component\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport { ChartModel } from \"../../model\";\n\n// Carbon position service\nimport Position, { PLACEMENTS } from \"@carbon/utils-position\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/src/globals/js/settings\";\n\n// D3 Imports\nimport { select, mouse, event } from \"d3-selection\";\nimport { TooltipTypes, ScaleTypes, TooltipPosition } from \"../../interfaces\";\n\nexport class Tooltip extends Component {\n\ttype = \"tooltip\";\n\n\ttooltip: any;\n\tpositionService = new Position();\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tsuper(model, services, configs);\n\n\t\tthis.init();\n\t}\n\n\tinit() {\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartprefix = Tools.getProperty(this.model.getOptions(), \"style\", \"prefix\");\n\t\tthis.tooltip = DOMUtils.appendOrSelect(holder, `div.${settings.prefix}--${chartprefix}--tooltip`);\n\n\t\t// Apply html content to the tooltip\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, \"div.content-box\");\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(\"show-tooltip\", e => {\n\t\t\t// check the type of tooltip and that it is enabled\n\t\t\tif ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), \"tooltip\", \"datapoint\", \"enabled\"))\n\t\t\t\t|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), \"tooltip\", \"gridline\", \"enabled\")) ) {\n\n\t\t\t\tlet data = select(event.target).datum() as any;\n\n\t\t\t\t// Generate default tooltip\n\t\t\t\tlet defaultHTML;\n\t\t\t\tif (e.detail.multidata) {\n\t\t\t\t\t// multi tooltip\n\t\t\t\t\tdata = e.detail.multidata;\n\t\t\t\t\tdefaultHTML = this.getMultilineTooltipHTML(data);\n\t\t\t\t} else {\n\t\t\t\t\tdefaultHTML = this.getTooltipHTML(data, TooltipTypes.DATAPOINT);\n\t\t\t\t}\n\n\t\t\t\t// if there is a provided tooltip HTML function call it\n\t\t\t\tif (Tools.getProperty(this.model.getOptions(), \"tooltip\", \"customHTML\")) {\n\t\t\t\t\ttooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data, defaultHTML));\n\t\t\t\t} else {\n\t\t\t\t\t// Use default tooltip\n\t\t\t\t\ttooltipTextContainer.html(defaultHTML);\n\t\t\t\t}\n\n\t\t\t\t// Position the tooltip\n\t\t\t\tthis.positionTooltip();\n\n\t\t\t} else if (e.detail.type === TooltipTypes.TITLE) {\n\t\t\t\tconst chart = DOMUtils.appendOrSelect(holder, `svg.${settings.prefix}--${chartprefix}--chart-svg`);\n\t\t\t\tconst chartWidth =  DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(this.model.getOptions(), \"tooltip\", \"title\", \"width\");\n\n\t\t\t\tthis.tooltip.style(\"max-width\", chartWidth);\n\n\n\t\t\t\ttooltipTextContainer.html(this.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));\n\n\t\t\t\t// get the position based on the title positioning (static)\n\t\t\t\tconst position = this.getTooltipPosition(e.detail.hoveredElement.node());\n\t\t\t\tthis.positionTooltip(position);\n\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(\"hide-tooltip\", () => {\n\t\t\tthis.tooltip.classed(\"hidden\", true);\n\t\t});\n\t}\n\n\tgetTooltipHTML(data: any, type: TooltipTypes) {\n\t\t// check if it is getting styles for a tooltip type\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\tconst title = this.model.getOptions().title;\n\t\t\treturn `<div class=\"title-tooltip\"><text>${title}</text></div>`;\n\t\t}\n\t\t// this cleans up the data item, pie slices have the data within the data.data but other datapoints are self contained within data\n\t\tconst dataVal = Tools.getProperty(data, \"data\") ? data.data : data;\n\n\t\t// format the value if needed\n\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(dataVal.value) : dataVal.value.toLocaleString(\"en\");\n\n\t\t// pie charts don't have a dataset label since they only support one dataset\n\t\tconst label = dataVal.datasetLabel ? dataVal.datasetLabel : dataVal.label;\n\n\t\treturn `<div class=\"datapoint-tooltip\">\n\t\t\t\t\t<p class=\"label\">${label}</p>\n\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t</div>`;\n\t}\n\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst points = data;\n\n\t\t// sort them so they are in the same order as the graph\n\t\tpoints.sort((a, b) => b.value - a.value);\n\n\t\t// tells us which value to use\n\t\tconst scaleType = this.services.cartesianScales.getDomainScale().scaleType;\n\n\t\treturn  \"<ul class='multi-tooltip'>\" +\n\t\t\tpoints.map(datapoint => {\n\t\t\t\t// check if the datapoint has multiple values associates (multiple axes)\n\t\t\t\tlet datapointValue = datapoint.value;\n\t\t\t\tif (datapointValue instanceof Object) {\n\t\t\t\t\t// scale type determines which value we care about since it should align with the scale data\n\t\t\t\t\tdatapointValue = scaleType === ScaleTypes.TIME ? datapoint.value.date : datapoint.value.value;\n\t\t\t\t}\n\t\t\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\t\t\tthis.model.getOptions().tooltip.valueFormatter(datapointValue) : datapointValue.toLocaleString(\"en\");\n\n\t\t\t\tconst indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);\n\n\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datapoint.datasetLabel}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t\t}).join(\"\") + \"</ul>\";\n\t}\n\n\trender() {\n\t\tthis.tooltip.classed(\"hidden\", true);\n\t}\n\n\t// returns static position based on the element\n\tgetTooltipPosition(hoveredElement) {\n\t\tconst holderPosition = select(this.services.domUtils.getHolder()).node().getBoundingClientRect();\n\t\tconst elementPosition = hoveredElement.getBoundingClientRect();\n\n\t\t// get the vertical offset\n\t\tconst { verticalOffset } = this.model.getOptions().tooltip.title;\n\n\t\tconst tooltipPos = {\n\t\t\tleft: (elementPosition.left - holderPosition.left) + elementPosition.width / 2,\n\t\t\ttop: (elementPosition.top - holderPosition.top - verticalOffset)\n\t\t};\n\n\t\treturn { placement: TooltipPosition.BOTTOM, position: tooltipPos };\n\t}\n\n\tpositionTooltip(positionOverride?: any) {\n\t\tconst holder = this.services.domUtils.getHolder();\n\t\tconst target = this.tooltip.node();\n\t\tconst mouseRelativePos = mouse(holder);\n\t\tlet pos;\n\n\t\t// override position to place tooltip at {placement:.., position:{top:.. , left:..}}\n\t\tif (positionOverride) {\n\t\t\t// placement determines whether the tooltip is centered above or below the position provided\n\t\t\tconst placement = positionOverride.placement === TooltipPosition.TOP ? PLACEMENTS.TOP : PLACEMENTS.BOTTOM;\n\n\t\t\tpos = this.positionService.findPositionAt(\n\t\t\t\tpositionOverride.position,\n\t\t\t\ttarget,\n\t\t\t\tplacement\n\t\t\t);\n\t\t} else {\n\t\t\t// Find out whether tooltip should be shown on the left or right side\n\t\t\tconst bestPlacementOption = this.positionService.findBestPlacementAt(\n\t\t\t\t{\n\t\t\t\t\tleft: mouseRelativePos[0],\n\t\t\t\t\ttop: mouseRelativePos[1]\n\t\t\t\t},\n\t\t\t\ttarget,\n\t\t\t\t[\n\t\t\t\t\tPLACEMENTS.RIGHT,\n\t\t\t\t\tPLACEMENTS.LEFT,\n\t\t\t\t\tPLACEMENTS.TOP,\n\t\t\t\t\tPLACEMENTS.BOTTOM\n\t\t\t\t],\n\t\t\t\t() => ({\n\t\t\t\t\twidth: holder.offsetWidth,\n\t\t\t\t\theight: holder.offsetHeight\n\t\t\t\t})\n\t\t\t);\n\n\t\t\tlet { horizontalOffset } = this.model.getOptions().tooltip.datapoint;\n\t\t\tif (bestPlacementOption === PLACEMENTS.LEFT) {\n\t\t\t\thorizontalOffset *= -1;\n\t\t\t}\n\n\t\t\t// Get coordinates to where tooltip should be positioned\n\t\t\tpos = this.positionService.findPositionAt(\n\t\t\t\t{\n\t\t\t\t\tleft: mouseRelativePos[0] + horizontalOffset,\n\t\t\t\t\ttop: mouseRelativePos[1]\n\t\t\t\t},\n\t\t\t\ttarget,\n\t\t\t\tbestPlacementOption\n\t\t\t);\n\t\t}\n\n\t\tthis.positionService.setElement(target, pos);\n\t}\n}\n"]}

package/src/components/graphs/bar-grouped.js

@@ -1,206 +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 __());
-    };
-})();
-// Internal Imports
-import { Bar } from "./bar";
-import { Tools } from "../../tools";
-import { CartesianOrientations, Events, Roles, TooltipTypes } from "../../interfaces";
-// D3 Imports
-import { select } from "d3-selection";
-import { color } from "d3-color";
-import { scaleBand } from "d3-scale";
-var GroupedBar = /** @class */ (function (_super) {
-    __extends(GroupedBar, _super);
-    function GroupedBar() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = "grouped-bar";
-        // Highlight elements that match the hovered legend item
-        _this.handleLegendOnHover = function (event) {
-            var hoveredElement = event.detail.hoveredElement;
-            _this.parent.selectAll("path.bar")
-                .transition(_this.services.transitions.getTransition("legend-hover-bar"))
-                .attr("opacity", function (d) { return (d.datasetLabel !== hoveredElement.datum()["key"]) ? 0.3 : 1; });
-        };
-        // Un-highlight all elements
-        _this.handleLegendMouseOut = function (event) {
-            _this.parent.selectAll("path.bar")
-                .transition(_this.services.transitions.getTransition("legend-mouseout-bar"))
-                .attr("opacity", 1);
-        };
-        return _this;
-    }
-    GroupedBar.prototype.init = function () {
-        var eventsFragment = this.services.events;
-        // Highlight correct circle on legend item hovers
-        eventsFragment.addEventListener("legend-item-onhover", this.handleLegendOnHover);
-        // Un-highlight circles on legend item mouseouts
-        eventsFragment.addEventListener("legend-item-onmouseout", this.handleLegendMouseOut);
-    };
-    GroupedBar.prototype.getGroupWidth = function () {
-        var datasets = this.model.getDisplayData().datasets;
-        var padding = 5;
-        return datasets.length * this.getBarWidth() + (padding * (datasets.length - 1));
-    };
-    GroupedBar.prototype.setGroupScale = function () {
-        var datasets = this.model.getDisplayData().datasets;
-        this.groupScale = scaleBand()
-            .domain(datasets.map(function (dataset) { return dataset.label; }))
-            .rangeRound([0, this.getGroupWidth()]);
-    };
-    // Gets the correct width for bars based on options & configurations
-    GroupedBar.prototype.getBarWidth = function () {
-        var datasets = this.model.getDisplayData().datasets;
-        var domainScale = this.services.cartesianScales.getDomainScale();
-        return Math.min(domainScale.step() / 2 / datasets.length, _super.prototype.getBarWidth.call(this));
-    };
-    GroupedBar.prototype.render = function (animate) {
-        var _this = this;
-        // Chart options mixed with the internal configurations
-        var displayData = this.model.getDisplayData();
-        this.setGroupScale();
-        // Grab container SVG
-        var svg = this.getContainerSVG();
-        // Update data on bar groups
-        var barGroups = svg.selectAll("g.bars")
-            .data(displayData.labels);
-        // Remove dot groups that need to be removed
-        barGroups.exit()
-            .attr("opacity", 0)
-            .remove();
-        // Add the bar groups that need to be introduced
-        var barGroupsEnter = barGroups.enter()
-            .append("g")
-            .classed("bars", true)
-            .attr("role", Roles.GROUP)
-            .attr("aria-labelledby", function (d) { return d; });
-        // Update data on all bars
-        var bars = barGroupsEnter.merge(barGroups)
-            .attr("transform", function (d, i) {
-            var scaleValue = _this.services.cartesianScales.getDomainValue(d, i);
-            var translateBy = scaleValue - _this.getGroupWidth() / 2 + _this.getBarWidth();
-            if (_this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {
-                return "translate(" + translateBy + ", 0)";
-            }
-            else {
-                // translate in the y direction for horizontal groups
-                return "translate(0, " + translateBy + ")";
-            }
-        })
-            .selectAll("path.bar")
-            .data(function (d, i) { return _this.addLabelsToDataPoints(d, i); });
-        // Remove bars that are no longer needed
-        bars.exit()
-            .attr("opacity", 0)
-            .remove();
-        // Add the circles that need to be introduced
-        var barsEnter = bars.enter()
-            .append("path")
-            .attr("opacity", 0);
-        // code for vertical grouped bar charts
-        barsEnter.merge(bars)
-            .classed("bar", true)
-            .transition(this.services.transitions.getTransition("bar-update-enter", animate))
-            .attr("fill", function (d) { return _this.model.getFillScale()[d.datasetLabel](d.label); })
-            .attr("d", function (d) {
-            /*
-             * Orientation support for horizontal/vertical bar charts
-             * Determine coordinates needed for a vertical set of paths
-             * to draw the bars needed, and pass those coordinates down to
-             * generateSVGPathString() to decide whether it needs to flip them
-             */
-            var centerX = _this.groupScale(d.datasetLabel);
-            var barWidth = _this.getBarWidth();
-            var x0 = centerX - barWidth / 2;
-            var x1 = centerX + barWidth / 2;
-            var y0 = _this.services.cartesianScales.getRangeValue(0);
-            var y1 = _this.services.cartesianScales.getRangeValue(d.value);
-            return Tools.generateSVGPathString({ x0: x0, x1: x1, y0: y0, y1: y1 }, _this.services.cartesianScales.getOrientation());
-        })
-            .attr("opacity", 1)
-            // a11y
-            .attr("role", Roles.GRAPHICS_SYMBOL)
-            .attr("aria-roledescription", "bar")
-            .attr("aria-label", function (d) { return d.value; });
-        // Add event listeners to elements drawn
-        this.addEventListeners();
-    };
-    // TODO - This method could be re-used in more graphs
-    GroupedBar.prototype.addLabelsToDataPoints = function (d, index) {
-        var datasets = this.model.getDisplayData().datasets;
-        return datasets.map(function (dataset) { return ({
-            label: d,
-            datasetLabel: dataset.label,
-            value: dataset.data[index].value ? dataset.data[index].value : dataset.data[index]
-        }); });
-    };
-    GroupedBar.prototype.addEventListeners = function () {
-        var self = this;
-        this.parent.selectAll("path.bar")
-            .on("mouseover", function (datum) {
-            var hoveredElement = select(this);
-            hoveredElement.transition(self.services.transitions.getTransition("graph_element_mouseover_fill_update"))
-                .attr("fill", color(hoveredElement.attr("fill")).darker(0.7).toString());
-            // Dispatch mouse event
-            self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
-                element: hoveredElement,
-                datum: datum
-            });
-            // Show tooltip
-            self.services.events.dispatchEvent("show-tooltip", {
-                hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT
-            });
-        })
-            .on("mousemove", function (datum) {
-            // Dispatch mouse event
-            self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
-                element: select(this),
-                datum: datum
-            });
-        })
-            .on("click", function (datum) {
-            // Dispatch mouse event
-            self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
-                element: select(this),
-                datum: datum
-            });
-        })
-            .on("mouseout", function (datum) {
-            var hoveredElement = select(this);
-            hoveredElement.classed("hovered", false);
-            hoveredElement.transition(self.services.transitions.getTransition("graph_element_mouseout_fill_update"))
-                .attr("fill", function (d) { return self.model.getFillScale()[d.datasetLabel](d.label); });
-            // Dispatch mouse event
-            self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
-                element: hoveredElement,
-                datum: datum
-            });
-            // Hide tooltip
-            self.services.events.dispatchEvent("hide-tooltip", { hoveredElement: hoveredElement });
-        });
-    };
-    GroupedBar.prototype.destroy = function () {
-        // Remove event listeners
-        this.parent.selectAll("path.bar")
-            .on("mouseover", null)
-            .on("mousemove", null)
-            .on("mouseout", null);
-        // Remove legend listeners
-        var eventsFragment = this.services.events;
-        eventsFragment.removeEventListener("legend-item-onhover", this.handleLegendOnHover);
-        eventsFragment.removeEventListener("legend-item-onmouseout", this.handleLegendMouseOut);
-    };
-    return GroupedBar;
-}(Bar));
-export { GroupedBar };
-//# sourceMappingURL=../../../../src/components/graphs/bar-grouped.js.map