@carbon/charts 0.30.4 → 0.30.8

package/components/graphs/bar-stacked.js

@@ -14,23 +14,11 @@ var __extends = (this && this.__extends) || (function () {
 // Internal Imports
 import { Tools } from "../../tools";
 import { Bar } from "./bar";
-import { Roles, ScaleTypes, TooltipTypes, Events, CartesianOrientations } from "../../interfaces";
+import { Roles, TooltipTypes, Events, CartesianOrientations } from "../../interfaces";
 // D3 Imports
 import { select } from "d3-selection";
-import { stack } from "d3-shape";
 import { color } from "d3-color";
-// Add datasetLabel to each piece of data
-// To be used to get the fill color
-var addLabelsAndValueToData = function (d) {
-    Object.keys(d).map(function (key) {
-        if (typeof d[key] === "object") {
-            d[key]["datasetLabel"] = d.key;
-            d[key]["label"] = d[key].data["label"];
-            d[key]["value"] = d[key].data[d.key];
-        }
-    });
-    return d;
-};
+import { map } from "d3-collection";
 var StackedBar = /** @class */ (function (_super) {
     __extends(StackedBar, _super);
     function StackedBar() {
@@ -54,69 +42,25 @@ var StackedBar = /** @class */ (function (_super) {
     StackedBar.prototype.init = function () {
         var eventsFragment = this.services.events;
         // Highlight correct circle on legend item hovers
-        eventsFragment.addEventListener("legend-item-onhover", this.handleLegendOnHover);
+        eventsFragment.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
         // Un-highlight circles on legend item mouseouts
-        eventsFragment.addEventListener("legend-item-onmouseout", this.handleLegendMouseOut);
-    };
-    StackedBar.prototype.getStackData = function () {
-        var stackDataArray;
-        var displayData = this.model.getDisplayData();
-        // the domain axis for stack data depends on the orientation of the bar chart
-        var domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition();
-        var domainScaleType = this.services.cartesianScales.getScaleTypeByPosition(domainAxisPosition);
-        // get scale type for the main axis
-        var timeSeries = domainScaleType === ScaleTypes.TIME;
-        if (timeSeries) {
-            // Get all date values provided in data
-            // TODO - Could be re-used through the model
-            var allDates_1 = [];
-            displayData.datasets.forEach(function (dataset) {
-                allDates_1 = allDates_1.concat(dataset.data.map(function (datum) { return Number(datum.date); }));
-            });
-            allDates_1 = Tools.removeArrayDuplicates(allDates_1).sort();
-            // Go through all date values
-            // And get corresponding data from each dataset
-            stackDataArray = allDates_1.map(function (date, i) {
-                var correspondingData = {};
-                displayData.datasets.forEach(function (dataset) {
-                    var correspondingDatum = dataset.data.find(function (datum) { return Number(datum.date) === Number(date); });
-                    if (correspondingDatum) {
-                        correspondingData[dataset.label] = correspondingDatum.value;
-                    }
-                    else {
-                        correspondingData[dataset.label] = 0;
-                    }
-                });
-                correspondingData["label"] = date;
-                return correspondingData;
-            });
-        }
-        else {
-            // Create the stack datalist
-            stackDataArray = displayData.labels.map(function (label, i) {
-                var correspondingData = {};
-                displayData.datasets.forEach(function (dataset) {
-                    correspondingData[dataset.label] = !isNaN(dataset.data[i]) ? dataset.data[i] : dataset.data[i].value;
-                });
-                correspondingData["label"] = label;
-                return correspondingData;
-            });
-        }
-        return stackDataArray;
+        eventsFragment.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
     };
     StackedBar.prototype.render = function (animate) {
         var _this = this;
-        // Chart options mixed with the internal configurations
-        var options = this.model.getOptions();
         // Grab container SVG
         var svg = this.getContainerSVG();
-        // Create the data and keys that'll be used by the stack layout
+        // Chart options mixed with the internal configurations
         var displayData = this.model.getDisplayData();
-        var stackDataArray = this.getStackData();
-        var stackKeys = displayData.datasets.map(function (dataset) { return dataset.label; });
+        var options = this.model.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
+        // Create the data and keys that'll be used by the stack layout
+        var stackKeys = map(displayData, function (datum) { return datum[domainIdentifier]; }).keys();
+        var stackData = this.model.getStackedData();
         // Update data on all bar groups
         var barGroups = svg.selectAll("g.bars")
-            .data(stack().keys(stackKeys)(stackDataArray), function (d) { return d.key; });
+            .data(stackData, function (d) { return d.key; });
         // Remove elements that need to be exited
         // We need exit at the top here to make sure that
         // Data filters are processed before entering new elements
@@ -131,35 +75,19 @@ var StackedBar = /** @class */ (function (_super) {
             .attr("role", Roles.GROUP);
         // Update data on all bars
         var bars = svg.selectAll("g.bars").selectAll("path.bar")
-            .data(function (d) { return addLabelsAndValueToData(d); }, function (d) { return d.label; });
+            // Remove bars with a start and end value of 0
+            .data(function (data) { return data.filter(function (d) { return !(d[0] === 0 && d[1] === 0); }); });
         // Remove bars that need to be removed
         bars.exit()
             .remove();
-        var yScale = this.services.cartesianScales.getRangeScale();
         bars.enter()
             .append("path")
             .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("height", function (d, i) {
-            var datasetLabel = d.datasetLabel;
-            var datasetLabelIndex = stackKeys.indexOf(datasetLabel);
-            var height;
-            // determine height based on the y axis
-            if (yScale.scaleType === ScaleTypes.LABELS) {
-                height = Math.abs(yScale.scale.range()[0] - _this.services.cartesianScales.getRangeValue(d.label, i));
-            }
-            else {
-                height = _this.services.cartesianScales.getRangeValue(d[0]) - _this.services.cartesianScales.getRangeValue(d[1]);
-            }
-            // create dividers between bars
-            if (datasetLabelIndex > 0 && height >= options.bars.dividerSize) {
-                return height - options.bars.dividerSize;
-            }
-            return height;
-        })
+            .attr("fill", function (d) { return _this.model.getFillColor(d[groupMapsTo]); })
             .attr("d", function (d, i) {
+            var key = stackKeys[i];
             /*
             * Orientation support for horizontal/vertical bar charts
             * Determine coordinates needed for a vertical set of paths
@@ -167,7 +95,7 @@ var StackedBar = /** @class */ (function (_super) {
             * generateSVGPathString() to decide whether it needs to flip them
             */
             var barWidth = _this.getBarWidth();
-            var x0 = _this.services.cartesianScales.getDomainValue(d, i) - barWidth / 2;
+            var x0 = _this.services.cartesianScales.getDomainValue(key, i) - barWidth / 2;
             var x1 = x0 + barWidth;
             var y0 = _this.services.cartesianScales.getRangeValue(d[0], i);
             var y1 = _this.services.cartesianScales.getRangeValue(d[1], i);
@@ -191,6 +119,8 @@ var StackedBar = /** @class */ (function (_super) {
         this.addEventListeners();
     };
     StackedBar.prototype.addEventListeners = function () {
+        var options = this.model.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
         var self = this;
         this.parent.selectAll("path.bar")
             .on("mouseover", function (datum) {
@@ -204,29 +134,18 @@ var StackedBar = /** @class */ (function (_super) {
             });
         })
             .on("mousemove", function (datum) {
+            var _a;
             var hoveredElement = select(this);
-            var itemData = select(this).datum();
-            hoveredElement.classed("hovered", true);
-            var stackedData = itemData["data"];
-            var sharedLabel = stackedData["label"];
-            // Remove the label field
-            delete stackedData["label"];
-            // filter out the label from the datasets' and associated values
-            var activePoints = Object.keys(stackedData)
-                .map(function (key) { return ({
-                datasetLabel: key,
-                value: stackedData[key],
-                label: sharedLabel
-            }); });
-            // Dispatch mouse event
-            self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
-                element: hoveredElement,
-                datum: datum
-            });
+            var itemData = datum.data[datum.group];
+            var rangeIdentifier = self.services.cartesianScales.getRangeIdentifier();
+            var groupMapsTo = self.model.getOptions().data.groupMapsTo;
             // Show tooltip
             self.services.events.dispatchEvent("show-tooltip", {
-                multidata: activePoints,
                 hoveredElement: hoveredElement,
+                data: (_a = {},
+                    _a[rangeIdentifier] = itemData,
+                    _a[groupMapsTo] = datum.group,
+                    _a),
                 type: TooltipTypes.DATAPOINT
             });
         })
@@ -241,14 +160,14 @@ var StackedBar = /** @class */ (function (_super) {
             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); });
+                .attr("fill", function (d) { return self.model.getFillColor(d[groupMapsTo]); });
             // 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 });
+            self.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement: hoveredElement });
         });
     };
     StackedBar.prototype.destroy = function () {
@@ -259,8 +178,8 @@ var StackedBar = /** @class */ (function (_super) {
             .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);
+        eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
+        eventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
     };
     return StackedBar;
 }(Bar));

package/components/graphs/bar-stacked.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-stacked.js","sourceRoot":"","sources":["bar-stacked.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Tools } from \"../../tools\";\nimport { Bar } from \"./bar\";\nimport {\n\tRoles,\n\tScaleTypes,\n\tTooltipTypes,\n\tEvents,\n\tCartesianOrientations\n} from \"../../interfaces\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { stack } from \"d3-shape\";\nimport { color } from \"d3-color\";\n\n// Add datasetLabel to each piece of data\n// To be used to get the fill color\nconst addLabelsAndValueToData = d => {\n\tObject.keys(d).map(key => {\n\t\tif (typeof d[key] === \"object\") {\n\t\t\td[key][\"datasetLabel\"] = d.key;\n\t\t\td[key][\"label\"] = d[key].data[\"label\"];\n\t\t\td[key][\"value\"] = d[key].data[d.key];\n\t\t}\n\t});\n\n\treturn d;\n};\n\nexport class StackedBar extends Bar {\n\ttype = \"stacked-bar\";\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct circle on legend item hovers\n\t\teventsFragment.addEventListener(\"legend-item-onhover\", this.handleLegendOnHover);\n\n\t\t// Un-highlight circles on legend item mouseouts\n\t\teventsFragment.addEventListener(\"legend-item-onmouseout\", this.handleLegendMouseOut);\n\t}\n\n\tgetStackData() {\n\t\tlet stackDataArray;\n\t\tconst displayData = this.model.getDisplayData();\n\n\t\t// the domain axis for stack data depends on the orientation of the bar chart\n\t\tconst domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition();\n\t\tconst domainScaleType = this.services.cartesianScales.getScaleTypeByPosition(domainAxisPosition);\n\t\t// get scale type for the main axis\n\t\tconst timeSeries = domainScaleType === ScaleTypes.TIME;\n\n\t\tif (timeSeries) {\n\t\t\t// Get all date values provided in data\n\t\t\t// TODO - Could be re-used through the model\n\t\t\tlet allDates = [];\n\t\t\tdisplayData.datasets.forEach(dataset => {\n\t\t\t\tallDates = allDates.concat(dataset.data.map(datum => Number(datum.date)));\n\t\t\t});\n\t\t\tallDates = Tools.removeArrayDuplicates(allDates).sort();\n\n\t\t\t// Go through all date values\n\t\t\t// And get corresponding data from each dataset\n\t\t\tstackDataArray = allDates.map((date, i) => {\n\t\t\t\tconst correspondingData = {};\n\n\t\t\t\tdisplayData.datasets.forEach(dataset => {\n\t\t\t\t\tconst correspondingDatum = dataset.data.find(datum => Number(datum.date) === Number(date));\n\t\t\t\t\tif (correspondingDatum) {\n\t\t\t\t\t\tcorrespondingData[dataset.label] = correspondingDatum.value;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcorrespondingData[dataset.label] = 0;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tcorrespondingData[\"label\"] = date;\n\n\t\t\t\treturn correspondingData;\n\t\t\t});\n\t\t} else {\n\t\t\t// Create the stack datalist\n\t\t\tstackDataArray = displayData.labels.map((label, i) => {\n\t\t\t\tconst correspondingData = {};\n\n\t\t\t\tdisplayData.datasets.forEach(dataset => {\n\t\t\t\t\tcorrespondingData[dataset.label] = !isNaN(dataset.data[i]) ? dataset.data[i] : dataset.data[i].value;\n\t\t\t\t});\n\t\t\t\tcorrespondingData[\"label\"] = label;\n\n\t\t\t\treturn correspondingData;\n\t\t\t});\n\t\t}\n\n\t\treturn stackDataArray;\n\t}\n\n\trender(animate: boolean) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst options = this.model.getOptions();\n\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Create the data and keys that'll be used by the stack layout\n\t\tconst displayData = this.model.getDisplayData();\n\t\tconst stackDataArray = this.getStackData();\n\t\tconst stackKeys = displayData.datasets.map(dataset => dataset.label);\n\n\t\t// Update data on all bar groups\n\t\tconst barGroups = svg.selectAll(\"g.bars\")\n\t\t\t.data(stack().keys(stackKeys)(stackDataArray), d => d.key);\n\n\t\t// Remove elements that need to be exited\n\t\t// We need exit at the top here to make sure that\n\t\t// Data filters are processed before entering new elements\n\t\t// Or updating existing ones\n\t\tbarGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add bar groups that need to be introduced\n\t\tbarGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t.classed(\"bars\", true)\n\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\t// Update data on all bars\n\t\tconst bars = svg.selectAll(\"g.bars\").selectAll(\"path.bar\")\n\t\t\t.data(d => addLabelsAndValueToData(d), d => d.label);\n\n\t\t// Remove bars that need to be removed\n\t\tbars.exit()\n\t\t\t.remove();\n\n\t\tconst yScale = this.services.cartesianScales.getRangeScale();\n\t\tbars.enter()\n\t\t\t.append(\"path\")\n\t\t\t.merge(bars)\n\t\t\t\t.classed(\"bar\", true)\n\t\t\t\t.transition(this.services.transitions.getTransition(\"bar-update-enter\", animate))\n\t\t\t\t.attr(\"fill\", d => this.model.getFillScale()[d.datasetLabel](d.label))\n\t\t\t\t.attr(\"height\", (d, i) => {\n\t\t\t\t\tconst { datasetLabel } = d;\n\t\t\t\t\tconst datasetLabelIndex = stackKeys.indexOf(datasetLabel);\n\t\t\t\t\tlet height;\n\t\t\t\t\t// determine height based on the y axis\n\t\t\t\t\tif (yScale.scaleType === ScaleTypes.LABELS) {\n\t\t\t\t\t\theight = Math.abs(yScale.scale.range()[0] - this.services.cartesianScales.getRangeValue(d.label, i));\n\t\t\t\t\t} else {\n\t\t\t\t\t\theight = this.services.cartesianScales.getRangeValue(d[0]) - this.services.cartesianScales.getRangeValue(d[1]);\n\t\t\t\t\t}\n\t\t\t\t\t// create dividers between bars\n\t\t\t\t\tif (datasetLabelIndex > 0 && height >= options.bars.dividerSize) {\n\t\t\t\t\t\treturn height - options.bars.dividerSize;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn height;\n\t\t\t\t})\n\t\t\t\t.attr(\"d\", (d, i) => {\n\t\t\t\t\t/*\n\t\t\t\t\t* Orientation support for horizontal/vertical bar charts\n\t\t\t\t\t* Determine coordinates needed for a vertical set of paths\n\t\t\t\t\t* to draw the bars needed, and pass those coordinates down to\n\t\t\t\t\t* generateSVGPathString() to decide whether it needs to flip them\n\t\t\t\t\t*/\n\t\t\t\t\tconst barWidth = this.getBarWidth();\n\t\t\t\t\tconst x0 = this.services.cartesianScales.getDomainValue(d, i) - barWidth / 2;\n\t\t\t\t\tconst x1 = x0 + barWidth;\n\t\t\t\t\tconst y0 = this.services.cartesianScales.getRangeValue(d[0], i);\n\t\t\t\t\tlet y1 = this.services.cartesianScales.getRangeValue(d[1], i);\n\n\t\t\t\t\t// Add the divider gap\n\t\t\t\t\tif (Math.abs(y1 - y0) > 0 && Math.abs(y1 - y0) > options.bars.dividerSize) {\n\t\t\t\t\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\t\t\t\t\ty1 += 1;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\ty1 -= 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn Tools.generateSVGPathString(\n\t\t\t\t\t\t{ x0, x1, y0, y1 },\n\t\t\t\t\t\tthis.services.cartesianScales.getOrientation()\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t\t.attr(\"opacity\", 1)\n\t\t\t\t// a11y\n\t\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t\t.attr(\"aria-roledescription\", \"bar\")\n\t\t\t\t.attr(\"aria-label\", d => d.value);\n\n\t\t// Add event listeners for the above elements\n\t\tthis.addEventListeners();\n\t}\n\n\t// Highlight elements that match the hovered legend item\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-hover-bar\"))\n\t\t\t.attr(\"opacity\", d => (d.datasetLabel !== hoveredElement.datum()[\"key\"]) ? 0.3 : 1);\n\t}\n\n\t// Un-highlight all elements\n\thandleLegendMouseOut = (event: CustomEvent)  => {\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-bar\"))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\taddEventListeners() {\n\t\tconst self = this;\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseover_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", color(hoveredElement.attr(\"fill\")).darker(0.7).toString());\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mousemove\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\tconst itemData = select(this).datum();\n\t\t\t\thoveredElement.classed(\"hovered\", true);\n\n\t\t\t\tconst stackedData = itemData[\"data\"];\n\t\t\t\tconst sharedLabel = stackedData[\"label\"];\n\n\t\t\t\t// Remove the label field\n\t\t\t\tdelete stackedData[\"label\"];\n\n\t\t\t\t// filter out the label from the datasets' and associated values\n\t\t\t\tconst activePoints =  Object.keys(stackedData)\n\t\t\t\t\t.map(key => ({\n\t\t\t\t\t\tdatasetLabel: key,\n\t\t\t\t\t\tvalue: stackedData[key],\n\t\t\t\t\t\tlabel: sharedLabel\n\t\t\t\t\t}));\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Show tooltip\n\t\t\t\tself.services.events.dispatchEvent(\"show-tooltip\", {\n\t\t\t\t\tmultidata: activePoints,\n\t\t\t\t\thoveredElement,\n\t\t\t\t\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"click\", function(datum) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\thoveredElement.classed(\"hovered\", false);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseout_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", (d: any) => self.model.getFillScale()[d.datasetLabel](d.label));\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Hide tooltip\n\t\t\t\tself.services.events.dispatchEvent(\"hide-tooltip\", { hoveredElement });\n\t\t\t});\n\t}\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", null)\n\t\t\t.on(\"mousemove\", null)\n\t\t\t.on(\"mouseout\", null);\n\n\t\t// Remove legend listeners\n\t\tconst eventsFragment = this.services.events;\n\t\teventsFragment.removeEventListener(\"legend-item-onhover\", this.handleLegendOnHover);\n\t\teventsFragment.removeEventListener(\"legend-item-onmouseout\", this.handleLegendMouseOut);\n\t}\n}\n"]}
+{"version":3,"file":"bar-stacked.js","sourceRoot":"","sources":["bar-stacked.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Tools } from \"../../tools\";\nimport { Bar } from \"./bar\";\nimport {\n\tRoles,\n\tTooltipTypes,\n\tEvents,\n\tCartesianOrientations\n} from \"../../interfaces\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { color } from \"d3-color\";\nimport { map } from \"d3-collection\";\n\nexport class StackedBar extends Bar {\n\ttype = \"stacked-bar\";\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct circle on legend item hovers\n\t\teventsFragment.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\n\t\t// Un-highlight circles on legend item mouseouts\n\t\teventsFragment.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n\n\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Chart options mixed with the internal configurations\n\t\tconst displayData = this.model.getDisplayData();\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\n\t\t// Create the data and keys that'll be used by the stack layout\n\t\tconst stackKeys = map(displayData, datum => datum[domainIdentifier]).keys();\n\t\tconst stackData = this.model.getStackedData();\n\n\t\t// Update data on all bar groups\n\t\tconst barGroups = svg.selectAll(\"g.bars\")\n\t\t\t.data(stackData, d => d.key);\n\n\t\t// Remove elements that need to be exited\n\t\t// We need exit at the top here to make sure that\n\t\t// Data filters are processed before entering new elements\n\t\t// Or updating existing ones\n\t\tbarGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add bar groups that need to be introduced\n\t\tbarGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t.classed(\"bars\", true)\n\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\t// Update data on all bars\n\t\tconst bars = svg.selectAll(\"g.bars\").selectAll(\"path.bar\")\n\t\t\t// Remove bars with a start and end value of 0\n\t\t\t.data(data => data.filter(d => !(d[0] === 0 && d[1] === 0)));\n\n\t\t// Remove bars that need to be removed\n\t\tbars.exit()\n\t\t\t.remove();\n\n\t\tbars.enter()\n\t\t\t.append(\"path\")\n\t\t\t.merge(bars)\n\t\t\t.classed(\"bar\", true)\n\t\t\t.transition(this.services.transitions.getTransition(\"bar-update-enter\", animate))\n\t\t\t.attr(\"fill\", d => this.model.getFillColor(d[groupMapsTo]))\n\t\t\t.attr(\"d\", (d, i) => {\n\t\t\t\tconst key = stackKeys[i];\n\n\t\t\t\t/*\n\t\t\t\t* Orientation support for horizontal/vertical bar charts\n\t\t\t\t* Determine coordinates needed for a vertical set of paths\n\t\t\t\t* to draw the bars needed, and pass those coordinates down to\n\t\t\t\t* generateSVGPathString() to decide whether it needs to flip them\n\t\t\t\t*/\n\t\t\t\tconst barWidth = this.getBarWidth();\n\t\t\t\tconst x0 = this.services.cartesianScales.getDomainValue(key, i) - barWidth / 2;\n\t\t\t\tconst x1 = x0 + barWidth;\n\t\t\t\tconst y0 = this.services.cartesianScales.getRangeValue(d[0], i);\n\t\t\t\tlet y1 = this.services.cartesianScales.getRangeValue(d[1], i);\n\n\t\t\t\t// Add the divider gap\n\t\t\t\tif (Math.abs(y1 - y0) > 0 && Math.abs(y1 - y0) > options.bars.dividerSize) {\n\t\t\t\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\t\t\t\ty1 += 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\ty1 -= 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn Tools.generateSVGPathString(\n\t\t\t\t\t{ x0, x1, y0, y1 },\n\t\t\t\t\tthis.services.cartesianScales.getOrientation()\n\t\t\t\t);\n\t\t\t})\n\t\t\t.attr(\"opacity\", 1)\n\t\t\t// a11y\n\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr(\"aria-roledescription\", \"bar\")\n\t\t\t.attr(\"aria-label\", d => d.value);\n\n\t\t// Add event listeners for the above elements\n\t\tthis.addEventListeners();\n\t}\n\n\t// Highlight elements that match the hovered legend item\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-hover-bar\"))\n\t\t\t.attr(\"opacity\", d => (d.datasetLabel !== hoveredElement.datum()[\"key\"]) ? 0.3 : 1);\n\t}\n\n\t// Un-highlight all elements\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-bar\"))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\taddEventListeners() {\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst self = this;\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseover_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", color(hoveredElement.attr(\"fill\")).darker(0.7).toString());\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mousemove\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\tconst itemData = datum.data[datum.group];\n\n\t\t\t\tconst rangeIdentifier = self.services.cartesianScales.getRangeIdentifier();\n\t\t\t\tconst { groupMapsTo } = self.model.getOptions().data;\n\t\t\n\t\t\t\t// Show tooltip\n\t\t\t\tself.services.events.dispatchEvent(\"show-tooltip\", {\n\t\t\t\t\thoveredElement,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\t[rangeIdentifier]: itemData,\n\t\t\t\t\t\t[groupMapsTo]: datum.group\n\t\t\t\t\t},\n\t\t\t\t\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"click\", function(datum) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\thoveredElement.classed(\"hovered\", false);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseout_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", (d: any) => self.model.getFillColor(d[groupMapsTo]));\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Hide tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement });\n\t\t\t});\n\t}\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", null)\n\t\t\t.on(\"mousemove\", null)\n\t\t\t.on(\"mouseout\", null);\n\n\t\t// Remove legend listeners\n\t\tconst eventsFragment = this.services.events;\n\t\teventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\teventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n}\n"]}

package/components/graphs/bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar.js","sourceRoot":"","sources":["bar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC;IAAyB,uBAAS;IAAlC;;IAkBA,CAAC;IAjBA,oEAAoE;IAC1D,yBAAW,GAArB;QACC,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxC,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QAEjE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CACvD,CAAC;SACF;QAED,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CACrB,CAAC;IACH,CAAC;IACF,UAAC;AAAD,CAAC,AAlBD,CAAyB,SAAS,GAkBjC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { CartesianOrientations } from \"../../interfaces\";\n\nexport class Bar extends Component {\n\t// Gets the correct width for bars based on options & configurations\n\tprotected getBarWidth() {\n\t\tconst options = this.model.getOptions();\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\n\t\tif (!mainXScale.step) {\n\t\t\treturn Math.min(\n\t\t\t\toptions.bars.maxWidth,\n\t\t\t\t(5 / mainXScale.ticks().length) * options.bars.maxWidth\n\t\t\t);\n\t\t}\n\n\t\treturn Math.min(\n\t\t\toptions.bars.maxWidth,\n\t\t\tmainXScale.step() / 2\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"bar.js","sourceRoot":"","sources":["bar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;IAAyB,uBAAS;IAAlC;;IAkBA,CAAC;IAjBA,oEAAoE;IAC1D,yBAAW,GAArB;QACC,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxC,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QAEjE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CACvD,CAAC;SACF;QAED,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CACrB,CAAC;IACH,CAAC;IACF,UAAC;AAAD,CAAC,AAlBD,CAAyB,SAAS,GAkBjC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\n\nexport class Bar extends Component {\n\t// Gets the correct width for bars based on options & configurations\n\tprotected getBarWidth() {\n\t\tconst options = this.model.getOptions();\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\n\t\tif (!mainXScale.step) {\n\t\t\treturn Math.min(\n\t\t\t\toptions.bars.maxWidth,\n\t\t\t\t(5 / mainXScale.ticks().length) * options.bars.maxWidth\n\t\t\t);\n\t\t}\n\n\t\treturn Math.min(\n\t\t\toptions.bars.maxWidth,\n\t\t\tmainXScale.step() / 2\n\t\t);\n\t}\n}\n"]}

package/components/graphs/bubble.d.ts

@@ -4,5 +4,4 @@ export declare class Bubble extends Scatter {
     type: string;
     getRadiusScale(selection: Selection<any, any, any, any>): import("d3-scale").ScaleLinear<number, number>;
     styleCircles(selection: Selection<any, any, any, any>, animate: boolean): void;
-    addLabelsToDataPoints(d: any, index: any): any;
 }

package/components/graphs/bubble.js

@@ -24,43 +24,39 @@ var Bubble = /** @class */ (function (_super) {
         return _this;
     }
     Bubble.prototype.getRadiusScale = function (selection) {
+        var options = this.model.getOptions();
+        var radiusMapsTo = options.bubble.radiusMapsTo;
         var data = selection.data();
         // Filter out any null/undefined values
-        var allRadii = data.map(function (d) { return d.radius; }).filter(function (radius) { return radius; });
-        var options = this.model.getOptions();
+        var allRadii = data.map(function (d) { return d[radiusMapsTo]; }).filter(function (radius) { return radius; });
         var chartSize = DOMUtils.getSVGElementSize(this.services.domUtils.getMainSVG(), { useAttr: true });
-        return scaleLinear().domain(extent(allRadii))
-            .range(options.bubble.radiusRange(chartSize, data));
+        // We need the ternary operator here in case the user
+        // doesn't provide radius values in data
+        var radiusDataIsValid = allRadii.length > 0;
+        var domain = radiusDataIsValid ? extent(allRadii) : [1, 1];
+        return scaleLinear().domain(domain)
+            .range(radiusDataIsValid ? options.bubble.radiusRange(chartSize, data) : [4, 4]);
     };
     Bubble.prototype.styleCircles = function (selection, animate) {
         var _this = this;
         // Chart options mixed with the internal configurations
         var options = this.model.getOptions();
+        var radiusMapsTo = options.bubble.radiusMapsTo;
         var radiusScale = this.getRadiusScale(selection);
+        var groupMapsTo = options.data.groupMapsTo;
+        var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
         selection.raise()
             .classed("dot", true)
             .attr("cx", function (d, i) { return _this.services.cartesianScales.getDomainValue(d, i); })
             .transition(this.services.transitions.getTransition("bubble-update-enter", animate))
             .attr("cy", function (d, i) { return _this.services.cartesianScales.getRangeValue(d, i); })
-            .attr("r", function (d) { return radiusScale(d.radius); })
-            .attr("fill", function (d) { return _this.model.getFillScale()[d.datasetLabel](d.label); })
+            // We need `|| 1` here in case the user doesn't provide radius values in data
+            .attr("r", function (d) { return radiusScale(d[radiusMapsTo] || 1); })
+            .attr("fill", function (d) { return _this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d); })
             .attr("fill-opacity", options.bubble.fillOpacity)
-            .attr("stroke", function (d) { return _this.model.getStrokeColor(d.datasetLabel, d.label, d.value); })
+            .attr("stroke", function (d) { return _this.model.getStrokeColor(d[groupMapsTo], d[domainIdentifier], d); })
             .attr("opacity", 1);
     };
-    // TODO - This method could be re-used in more graphs
-    Bubble.prototype.addLabelsToDataPoints = function (d, index) {
-        // Chart options mixed with the internal configurations
-        var options = this.model.getOptions();
-        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,
-            radius: datum.radius || options.points.radius
-        }); });
-    };
     return Bubble;
 }(Scatter));
 export { Bubble };

package/components/graphs/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","sourceRoot":"","sources":["bubble.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC;IAA4B,0BAAO;IAAnC;QAAA,qEAgDC;QA/CA,UAAI,GAAG,QAAQ,CAAC;;IA+CjB,CAAC;IA7CA,+BAAc,GAAd,UAAe,SAAwC;QACtD,IAAM,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC;QAC9B,uCAAuC;QACvC,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,MAAM,EAAR,CAAQ,CAAC,CAAC,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,EAAN,CAAM,CAAC,CAAC;QAElE,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxC,IAAM,SAAS,GAAG,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAErG,OAAO,WAAW,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aAC3C,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,6BAAY,GAAZ,UAAa,SAAwC,EAAE,OAAgB;QAAvE,iBAgBC;QAfA,uDAAuD;QACvD,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAExC,IAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAEnD,SAAS,CAAC,KAAK,EAAE;aACf,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC;aACpB,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAAlD,CAAkD,CAAC;aACxE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC;aACnF,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EAAjD,CAAiD,CAAC;aACvE,IAAI,CAAC,GAAG,EAAE,UAAA,CAAC,IAAI,OAAA,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAArB,CAAqB,CAAC;aACrC,IAAI,CAAC,MAAM,EAAE,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAQ,EAAzD,CAAyD,CAAC;aAC5E,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;aAChD,IAAI,CAAC,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,EAA3D,CAA2D,CAAC;aAChF,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,qDAAqD;IACrD,sCAAqB,GAArB,UAAsB,CAAC,EAAE,KAAK;QAC7B,uDAAuD;QACvD,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAEhC,IAAA,2CAAM,CAAiC;QAE/C,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,CAAC,IAAK,OAAA,CAAC;YAChC,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;YAChB,YAAY,EAAE,CAAC,CAAC,KAAK;YACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YACzC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM;SAC7C,CAAC,EAN8B,CAM9B,CAAC,CAAC;IACL,CAAC;IACF,aAAC;AAAD,CAAC,AAhDD,CAA4B,OAAO,GAgDlC","sourcesContent":["// Internal Imports\nimport { Scatter } from \"./scatter\";\nimport { DOMUtils } from \"../../services\";\n\n// D3 Imports\nimport { Selection } from \"d3-selection\";\nimport { extent } from \"d3-array\";\nimport { scaleLinear } from \"d3-scale\";\n\nexport class Bubble extends Scatter {\n\ttype = \"bubble\";\n\n\tgetRadiusScale(selection: Selection<any, any, any, any>) {\n\t\tconst data = selection.data();\n\t\t// Filter out any null/undefined values\n\t\tconst allRadii = data.map(d => d.radius).filter(radius => radius);\n\n\t\tconst options = this.model.getOptions();\n\t\tconst chartSize = DOMUtils.getSVGElementSize(this.services.domUtils.getMainSVG(), { useAttr: true });\n\n\t\treturn scaleLinear().domain(extent(allRadii))\n\t\t\t.range(options.bubble.radiusRange(chartSize, data));\n\t}\n\n\tstyleCircles(selection: Selection<any, any, any, any>, animate: boolean) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst options = this.model.getOptions();\n\n\t\tconst radiusScale = this.getRadiusScale(selection);\n\n\t\tselection.raise()\n\t\t\t.classed(\"dot\", true)\n\t\t\t.attr(\"cx\", (d, i) => this.services.cartesianScales.getDomainValue(d, i))\n\t\t\t.transition(this.services.transitions.getTransition(\"bubble-update-enter\", animate))\n\t\t\t.attr(\"cy\", (d, i) => this.services.cartesianScales.getRangeValue(d, i))\n\t\t\t.attr(\"r\", d => radiusScale(d.radius))\n\t\t\t.attr(\"fill\", d => this.model.getFillScale()[d.datasetLabel](d.label) as any)\n\t\t\t.attr(\"fill-opacity\", options.bubble.fillOpacity)\n\t\t\t.attr(\"stroke\", d => this.model.getStrokeColor(d.datasetLabel, d.label, d.value))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\t// TODO - This method could be re-used in more graphs\n\taddLabelsToDataPoints(d, index) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst options = this.model.getOptions();\n\n\t\tconst { labels } = this.model.getDisplayData();\n\n\t\treturn d.data.map((datum, i) => ({\n\t\t\tdate: datum.date,\n\t\t\tlabel: labels[i],\n\t\t\tdatasetLabel: d.label,\n\t\t\tvalue: isNaN(datum) ? datum.value : datum,\n\t\t\tradius: datum.radius || options.points.radius\n\t\t}));\n\t}\n}\n"]}
+{"version":3,"file":"bubble.js","sourceRoot":"","sources":["bubble.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC;IAA4B,0BAAO;IAAnC;QAAA,qEA0CC;QAzCA,UAAI,GAAG,QAAQ,CAAC;;IAyCjB,CAAC;IAvCA,+BAAc,GAAd,UAAe,SAAwC;QACtD,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAChC,IAAA,0CAAY,CAAoB;QAExC,IAAM,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC;QAC9B,uCAAuC;QACvC,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,YAAY,CAAC,EAAf,CAAe,CAAC,CAAC,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,EAAN,CAAM,CAAC,CAAC;QACzE,IAAM,SAAS,GAAG,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAErG,qDAAqD;QACrD,wCAAwC;QACxC,IAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9C,IAAM,MAAM,GAAG,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7D,OAAO,WAAW,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;aACjC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC;IAED,6BAAY,GAAZ,UAAa,SAAwC,EAAE,OAAgB;QAAvE,iBAqBC;QApBA,uDAAuD;QACvD,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAChC,IAAA,0CAAY,CAAoB;QAExC,IAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAE3C,IAAA,sCAAW,CAAkB;QACrC,IAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,mBAAmB,EAAE,CAAC;QAE7E,SAAS,CAAC,KAAK,EAAE;aACf,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC;aACpB,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAAlD,CAAkD,CAAC;aACxE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC;aACnF,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EAAjD,CAAiD,CAAC;YACxE,6EAA6E;aAC5E,IAAI,CAAC,GAAG,EAAE,UAAA,CAAC,IAAI,OAAA,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAjC,CAAiC,CAAC;aACjD,IAAI,CAAC,MAAM,EAAE,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAA/D,CAA+D,CAAC;aAClF,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;aAChD,IAAI,CAAC,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAjE,CAAiE,CAAC;aACtF,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACtB,CAAC;IACF,aAAC;AAAD,CAAC,AA1CD,CAA4B,OAAO,GA0ClC","sourcesContent":["// Internal Imports\nimport { Scatter } from \"./scatter\";\nimport { DOMUtils } from \"../../services\";\n\n// D3 Imports\nimport { Selection } from \"d3-selection\";\nimport { extent } from \"d3-array\";\nimport { scaleLinear } from \"d3-scale\";\n\nexport class Bubble extends Scatter {\n\ttype = \"bubble\";\n\n\tgetRadiusScale(selection: Selection<any, any, any, any>) {\n\t\tconst options = this.model.getOptions();\n\t\tconst { radiusMapsTo } = options.bubble;\n\n\t\tconst data = selection.data();\n\t\t// Filter out any null/undefined values\n\t\tconst allRadii = data.map(d => d[radiusMapsTo]).filter(radius => radius);\n\t\tconst chartSize = DOMUtils.getSVGElementSize(this.services.domUtils.getMainSVG(), { useAttr: true });\n\n\t\t// We need the ternary operator here in case the user\n\t\t// doesn't provide radius values in data\n\t\tconst radiusDataIsValid = allRadii.length > 0;\n\t\tconst domain = radiusDataIsValid ? extent(allRadii) : [1, 1];\n\t\treturn scaleLinear().domain(domain)\n\t\t\t.range(radiusDataIsValid ? options.bubble.radiusRange(chartSize, data) : [4, 4]);\n\t}\n\n\tstyleCircles(selection: Selection<any, any, any, any>, animate: boolean) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst options = this.model.getOptions();\n\t\tconst { radiusMapsTo } = options.bubble;\n\n\t\tconst radiusScale = this.getRadiusScale(selection);\n\n\t\tconst { groupMapsTo } = options.data;\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\n\t\tselection.raise()\n\t\t\t.classed(\"dot\", true)\n\t\t\t.attr(\"cx\", (d, i) => this.services.cartesianScales.getDomainValue(d, i))\n\t\t\t.transition(this.services.transitions.getTransition(\"bubble-update-enter\", animate))\n\t\t\t.attr(\"cy\", (d, i) => this.services.cartesianScales.getRangeValue(d, i))\n\t\t\t// We need `|| 1` here in case the user doesn't provide radius values in data\n\t\t\t.attr(\"r\", d => radiusScale(d[radiusMapsTo] || 1))\n\t\t\t.attr(\"fill\", d => this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d))\n\t\t\t.attr(\"fill-opacity\", options.bubble.fillOpacity)\n\t\t\t.attr(\"stroke\", d => this.model.getStrokeColor(d[groupMapsTo], d[domainIdentifier], d))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n}\n"]}

package/components/graphs/donut.js

@@ -58,7 +58,7 @@ var Donut = /** @class */ (function (_super) {
         var options = this.model.getOptions();
         var donutCenterFigure = Tools.getProperty(options, "donut", "center", "number");
         if (!donutCenterFigure) {
-            donutCenterFigure = this.getDataList().reduce(function (accumulator, d) {
+            donutCenterFigure = this.model.getDisplayData().reduce(function (accumulator, d) {
                 return accumulator + d.value;
             }, 0);
         }

package/components/graphs/donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut.js","sourceRoot":"","sources":["donut.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Pie } from \"./pie\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { interpolateNumber } from \"d3-interpolate\";\n\nexport class Donut extends Pie {\n\ttype = \"donut\";\n\n\trender(animate = true) {\n\t\t// Call render() from Pie\n\t\tsuper.render(animate);\n\n\t\tconst self = this;\n\n\t\tconst svg = DOMUtils.appendOrSelect(this.getContainerSVG(), \"g.center\");\n\t\tconst options = this.model.getOptions();\n\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\t// Add the number shown in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-figure\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.numberFontSize(radius))\n\t\t\t.transition(this.services.transitions.getTransition(\"donut-figure-enter-update\", animate))\n\t\t\t.tween(\"text\", function() {\n\t\t\t\treturn self.centerNumberTween(select(this));\n\t\t\t});\n\n\t\t// Add the label below the number in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-title\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.titleFontSize(radius))\n\t\t\t.attr(\"y\", options.donut.center.titleYPosition(radius))\n\t\t\t.text(Tools.getProperty(options, \"donut\", \"center\", \"label\"));\n\t}\n\n\tgetInnerRadius() {\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\treturn radius * (3 / 4);\n\t}\n\n\tcenterNumberTween(d3Ref) {\n\t\tconst options = this.model.getOptions();\n\n\t\tlet donutCenterFigure = Tools.getProperty(options, \"donut\", \"center\", \"number\");\n\t\tif (!donutCenterFigure) {\n\t\t\tdonutCenterFigure = this.getDataList().reduce((accumulator, d) => {\n\t\t\t\treturn accumulator + d.value;\n\t\t\t}, 0);\n\t\t}\n\n\t\t// Remove commas from the current value string, and convert to an int\n\t\tconst currentValue = parseInt(d3Ref.text().replace(/[, ]+/g, \"\"), 10) || 0;\n\t\tconst i = interpolateNumber(currentValue, donutCenterFigure);\n\n\t\treturn t => {\n\t\t\tconst { numberFormatter } = options.donut.center;\n\t\t\td3Ref.text(numberFormatter(i(t)));\n\t\t};\n\t}\n}\n"]}
+{"version":3,"file":"donut.js","sourceRoot":"","sources":["donut.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Pie } from \"./pie\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { interpolateNumber } from \"d3-interpolate\";\n\nexport class Donut extends Pie {\n\ttype = \"donut\";\n\n\trender(animate = true) {\n\t\t// Call render() from Pie\n\t\tsuper.render(animate);\n\n\t\tconst self = this;\n\n\t\tconst svg = DOMUtils.appendOrSelect(this.getContainerSVG(), \"g.center\");\n\t\tconst options = this.model.getOptions();\n\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\t// Add the number shown in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-figure\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.numberFontSize(radius))\n\t\t\t.transition(this.services.transitions.getTransition(\"donut-figure-enter-update\", animate))\n\t\t\t.tween(\"text\", function() {\n\t\t\t\treturn self.centerNumberTween(select(this));\n\t\t\t});\n\n\t\t// Add the label below the number in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-title\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.titleFontSize(radius))\n\t\t\t.attr(\"y\", options.donut.center.titleYPosition(radius))\n\t\t\t.text(Tools.getProperty(options, \"donut\", \"center\", \"label\"));\n\t}\n\n\tgetInnerRadius() {\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\treturn radius * (3 / 4);\n\t}\n\n\tcenterNumberTween(d3Ref) {\n\t\tconst options = this.model.getOptions();\n\n\t\tlet donutCenterFigure = Tools.getProperty(options, \"donut\", \"center\", \"number\");\n\t\tif (!donutCenterFigure) {\n\t\t\tdonutCenterFigure = this.model.getDisplayData().reduce((accumulator, d) => {\n\t\t\t\treturn accumulator + d.value;\n\t\t\t}, 0);\n\t\t}\n\n\t\t// Remove commas from the current value string, and convert to an int\n\t\tconst currentValue = parseInt(d3Ref.text().replace(/[, ]+/g, \"\"), 10) || 0;\n\t\tconst i = interpolateNumber(currentValue, donutCenterFigure);\n\n\t\treturn t => {\n\t\t\tconst { numberFormatter } = options.donut.center;\n\t\t\td3Ref.text(numberFormatter(i(t)));\n\t\t};\n\t}\n}\n"]}

package/components/graphs/line.d.ts

@@ -1,7 +1,9 @@
 import { Component } from "../component";
 export declare class Line extends Component {
     type: string;
-    lineGenerator: any;
     init(): void;
     render(animate?: boolean): void;
+    handleLegendOnHover: (event: CustomEvent<any>) => void;
+    handleLegendMouseOut: (event: CustomEvent<any>) => void;
+    destroy(): void;
 }

package/components/graphs/line.js

@@ -14,58 +14,59 @@ var __extends = (this && this.__extends) || (function () {
 // Internal Imports
 import { Component } from "../component";
 import * as Configuration from "../../configuration";
-import { Roles } from "../../interfaces";
-// D3 Imports
-import { select } from "d3-selection";
+import { Roles, Events } from "../../interfaces";
 import { line } from "d3-shape";
 var Line = /** @class */ (function (_super) {
     __extends(Line, _super);
     function Line() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.type = "line";
-        return _this;
-    }
-    // TODORF - Remove these listeners in destroy()
-    Line.prototype.init = function () {
-        var _this = this;
-        // Highlight correct scatter on legend item hovers
-        this.services.events.addEventListener("legend-item-onhover", function (e) {
-            var hoveredElement = e.detail.hoveredElement;
+        _this.handleLegendOnHover = function (event) {
+            var hoveredElement = event.detail.hoveredElement;
             _this.parent.selectAll("g.lines")
                 .transition(_this.services.transitions.getTransition("legend-hover-line"))
-                .attr("opacity", function (d) {
-                if (d.label !== hoveredElement.datum()["key"]) {
+                .attr("opacity", function (group) {
+                if (group.name !== hoveredElement.datum()["name"]) {
                     return Configuration.lines.opacity.unselected;
                 }
                 return Configuration.lines.opacity.selected;
             });
-        });
-        // Un-highlight lines on legend item mouseouts
-        this.services.events.addEventListener("legend-item-onmouseout", function (e) {
+        };
+        _this.handleLegendMouseOut = function (event) {
             _this.parent.selectAll("g.lines")
                 .transition(_this.services.transitions.getTransition("legend-mouseout-line"))
                 .attr("opacity", Configuration.lines.opacity.selected);
-        });
+        };
+        return _this;
+    }
+    Line.prototype.init = function () {
+        var events = this.services.events;
+        // Highlight correct line legend item hovers
+        events.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
+        // Un-highlight lines on legend item mouseouts
+        events.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
     };
     Line.prototype.render = function (animate) {
         var _this = this;
         if (animate === void 0) { animate = true; }
         var svg = this.getContainerSVG();
         // D3 line generator function
-        this.lineGenerator = line()
+        var lineGenerator = line()
             .x(function (d, i) { return _this.services.cartesianScales.getDomainValue(d, i); })
             .y(function (d, i) { return _this.services.cartesianScales.getRangeValue(d, i); })
             .curve(this.services.curves.getD3Curve())
             .defined(function (datum, i) {
-            var value = isNaN(datum) ? datum.value : datum;
+            var rangeIdentifier = _this.services.cartesianScales.getRangeIdentifier();
+            var value = datum[rangeIdentifier];
             if (value === null || value === undefined) {
                 return false;
             }
             return true;
         });
+        var groupedData = this.model.getGroupedData();
         // Update the bound data on line groups
         var lineGroups = svg.selectAll("g.lines")
-            .data(this.model.getDisplayData().datasets, function (dataset) { return dataset.label; });
+            .data(groupedData, function (group) { return group.name; });
         // Remove elements that need to be exited
         // We need exit at the top here to make sure that
         // Data filters are processed before entering new elements
@@ -77,30 +78,40 @@ var Line = /** @class */ (function (_super) {
         var enteringLineGroups = lineGroups.enter()
             .append("g")
             .classed("lines", true);
-        var self = this;
         // Enter paths that need to be introduced
         var enteringPaths = enteringLineGroups.append("path")
             .attr("opacity", 0);
         // Apply styles and datum
         enteringPaths.merge(svg.selectAll("g.lines path"))
-            .attr("stroke", function (d) {
-            var parentDatum = select(this.parentNode).datum();
-            return self.model.getStrokeColor(parentDatum.label);
-        })
-            .datum(function (d) {
-            var parentDatum = select(this.parentNode).datum();
-            this._datasetLabel = parentDatum.label;
-            return parentDatum.data;
+            .attr("stroke", function (group, i) {
+            return _this.model.getStrokeColor(group.name);
         })
             // a11y
             .attr("role", Roles.GRAPHICS_SYMBOL)
             .attr("aria-roledescription", "line")
-            .attr("aria-label", function (d) { return d.map(function (datum) { return datum.value || datum; }).join(","); })
+            .attr("aria-label", function (group) {
+            var data = group.data;
+            var rangeIdentifier = _this.services.cartesianScales.getRangeIdentifier();
+            return data.map(function (datum) { return datum[rangeIdentifier]; }).join(",");
+        })
             // Transition
             .transition(this.services.transitions.getTransition("line-update-enter", animate))
             .attr("opacity", 1)
             .attr("class", "line")
-            .attr("d", this.lineGenerator);
+            .attr("d", function (group) {
+            var data = group.data;
+            return lineGenerator(data);
+        });
+    };
+    Line.prototype.destroy = function () {
+        // Remove event listeners
+        this.parent.selectAll("path")
+            .on("mousemove", null)
+            .on("mouseout", null);
+        // Remove legend listeners
+        var eventsFragment = this.services.events;
+        eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
+        eventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
     };
     return Line;
 }(Component));