@carbon/charts 0.28.0 → 0.29.2

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

@@ -0,0 +1 @@
+{"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;;IAoBA,CAAC;IAnBA,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,2GAA2G;QAC3G,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhF,OAAO,oFAEwB,cAAc,oEACxB,IAAI,CAAC,YAAY,yCACjB,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,qBAAC;AAAD,CAAC,AApBD,CAAoC,OAAO,GAoB1C","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\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\tconst indicatorColor = this.model.getStrokeColor(data.datasetLabel, data.label);\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/components/essentials/tooltip.js

@@ -0,0 +1,178 @@
+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");
+                // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
+                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/components/essentials/tooltip.js.map

@@ -0,0 +1 @@
+{"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\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\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/components/graphs/bar-grouped.js

@@ -0,0 +1,206 @@
+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

package/components/graphs/bar-simple.js

@@ -0,0 +1,171 @@
+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 { Events, Roles, TooltipTypes } from "../../interfaces";
+import { Tools } from "../../tools";
+// D3 Imports
+import { select } from "d3-selection";
+import { color } from "d3-color";
+var SimpleBar = /** @class */ (function (_super) {
+    __extends(SimpleBar, _super);
+    function SimpleBar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "simple-bar";
+        _this.handleLegendOnHover = function (event) {
+            var hoveredElement = event.detail.hoveredElement;
+            _this.parent.selectAll("path.bar")
+                .transition(_this.services.transitions.getTransition("legend-hover-simple-bar"))
+                .attr("opacity", function (d) { return (d.label !== hoveredElement.datum()["key"]) ? 0.3 : 1; });
+        };
+        _this.handleLegendMouseOut = function (event) {
+            _this.parent.selectAll("path.bar")
+                .transition(_this.services.transitions.getTransition("legend-mouseout-simple-bar"))
+                .attr("opacity", 1);
+        };
+        return _this;
+    }
+    SimpleBar.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);
+    };
+    SimpleBar.prototype.render = function (animate) {
+        var _this = this;
+        // Grab container SVG
+        var svg = this.getContainerSVG();
+        // Update data on bar groups
+        var barGroups = svg.selectAll("g.bars")
+            .data(this.model.getDisplayData().datasets, function (dataset) { return dataset.label; });
+        // 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);
+        // Update data on all bars
+        var bars = barGroupsEnter.merge(barGroups)
+            .selectAll("path.bar")
+            .data(function (d, i) { return _this.addLabelsToDataPoints(d, i); }, function (d) { return d.label; });
+        // Remove bars that are no longer needed
+        bars.exit()
+            .attr("opacity", 0)
+            .remove();
+        // Add the paths that need to be introduced
+        var barsEnter = bars.enter()
+            .append("path")
+            .attr("opacity", 0);
+        barsEnter.merge(bars)
+            .classed("bar", true)
+            .attr("width", this.getBarWidth.bind(this))
+            .transition(this.services.transitions.getTransition("bar-update-enter", animate))
+            .attr("fill", function (d) { return _this.model.getFillScale()(d.label); })
+            .attr("d", function (d, i) {
+            /*
+            * 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 barWidth = _this.getBarWidth();
+            var x0 = _this.services.cartesianScales.getDomainValue(d, i) - barWidth / 2;
+            var x1 = x0 + barWidth;
+            var y0 = _this.services.cartesianScales.getRangeValue(0);
+            var y1 = _this.services.cartesianScales.getRangeValue(d, i);
+            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
+    SimpleBar.prototype.addLabelsToDataPoints = function (d, index) {
+        var labels = this.model.getDisplayData().labels;
+        return d.data.map(function (datum, i) { return ({
+            date: datum.date,
+            label: labels[i],
+            datasetLabel: d.label,
+            value: isNaN(datum) ? datum.value : datum
+        }); });
+    };
+    SimpleBar.prototype.addEventListeners = function () {
+        var self = this;
+        this.parent.selectAll("path.bar")
+            .on("mouseover", function (datum) {
+            var hoveredElement = select(this);
+            hoveredElement.classed("hovered", true);
+            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
+            });
+            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.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 });
+        });
+    };
+    SimpleBar.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 SimpleBar;
+}(Bar));
+export { SimpleBar };
+//# sourceMappingURL=../../../src/components/graphs/bar-simple.js.map