@carbon/charts 0.27.0 → 0.29.1

package/src/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/src/components/graphs/bar-grouped.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-grouped.js","sourceRoot":"","sources":["bar-grouped.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Bar } from \"./bar\";\nimport { Tools } from \"../../tools\";\nimport {\n\tCartesianOrientations,\n\tEvents,\n\tRoles,\n\tTooltipTypes\n} from \"../../interfaces\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { color } from \"d3-color\";\nimport { ScaleBand, scaleBand } from \"d3-scale\";\n\nexport class GroupedBar extends Bar {\n\ttype = \"grouped-bar\";\n\n\tgroupScale: ScaleBand<any>;\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\tgetGroupWidth() {\n\t\tconst { datasets } = this.model.getDisplayData();\n\t\tconst padding = 5;\n\n\t\treturn datasets.length * this.getBarWidth() + (padding * (datasets.length - 1));\n\t}\n\n\tsetGroupScale() {\n\t\tconst { datasets } = this.model.getDisplayData();\n\n\t\tthis.groupScale = scaleBand()\n\t\t\t.domain(datasets.map(dataset => dataset.label))\n\t\t\t.rangeRound([0, this.getGroupWidth()]);\n\t}\n\n\t// Gets the correct width for bars based on options & configurations\n\tgetBarWidth() {\n\t\tconst { datasets } = this.model.getDisplayData();\n\t\tconst domainScale = this.services.cartesianScales.getDomainScale();\n\n\t\treturn Math.min(\n\t\t\tdomainScale.step() / 2 / datasets.length,\n\t\t\tsuper.getBarWidth()\n\t\t);\n\t}\n\n\trender(animate: boolean) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst displayData = this.model.getDisplayData();\n\n\t\tthis.setGroupScale();\n\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Update data on bar groups\n\t\tconst barGroups = svg.selectAll(\"g.bars\")\n\t\t\t.data(displayData.labels);\n\n\t\t// Remove dot groups that need to be removed\n\t\tbarGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add the bar groups that need to be introduced\n\t\tconst barGroupsEnter = barGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t\t.classed(\"bars\", true)\n\t\t\t\t.attr(\"role\", Roles.GROUP)\n\t\t\t\t.attr(\"aria-labelledby\", d => d);\n\n\t\t// Update data on all bars\n\t\tconst bars = barGroupsEnter.merge(barGroups)\n\t\t\t.attr(\"transform\", (d, i) => {\n\t\t\t\tconst scaleValue = this.services.cartesianScales.getDomainValue(d, i);\n\t\t\t\tconst translateBy = scaleValue - this.getGroupWidth() / 2 + this.getBarWidth();\n\n\t\t\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\t\t\treturn `translate(${translateBy}, 0)`;\n\t\t\t\t} else {\n\t\t\t\t\t// translate in the y direction for horizontal groups\n\t\t\t\t\treturn `translate(0, ${translateBy})`;\n\t\t\t\t}\n\t\t\t})\n\t\t\t.selectAll(\"path.bar\")\n\t\t\t.data((d, i) => this.addLabelsToDataPoints(d, i));\n\n\t\t// Remove bars that are no longer needed\n\t\tbars.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add the circles that need to be introduced\n\t\tconst barsEnter = bars.enter()\n\t\t\t.append(\"path\")\n\t\t\t.attr(\"opacity\", 0);\n\n\t\t// code for vertical grouped bar charts\n\t\tbarsEnter.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.getFillScale()[d.datasetLabel](d.label))\n\t\t\t.attr(\"d\", d => {\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 centerX = this.groupScale(d.datasetLabel);\n\t\t\t\tconst barWidth = this.getBarWidth();\n\t\t\t\tconst x0 = centerX - barWidth / 2;\n\t\t\t\tconst x1 = centerX + barWidth / 2;\n\t\t\t\tconst y0 = this.services.cartesianScales.getRangeValue(0);\n\t\t\t\tconst y1 = this.services.cartesianScales.getRangeValue(d.value);\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 to elements drawn\n\t\tthis.addEventListeners();\n\t}\n\n\t// TODO - This method could be re-used in more graphs\n\taddLabelsToDataPoints(d, index) {\n\t\tconst { datasets } = this.model.getDisplayData();\n\n\t\treturn datasets.map(dataset => ({\n\t\t\tlabel: d,\n\t\t\tdatasetLabel: dataset.label,\n\t\t\tvalue: dataset.data[index].value ? dataset.data[index].value : dataset.data[index]\n\t\t}));\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\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\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mousemove\", function(datum) {\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: select(this),\n\t\t\t\t\tdatum\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"]}

package/src/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

package/src/components/graphs/bar-simple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-simple.js","sourceRoot":"","sources":["bar-simple.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Bar } from \"./bar\";\nimport {\n\tEvents,\n\tRoles,\n\tTooltipTypes\n} from \"../../interfaces\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { color } from \"d3-color\";\n\nexport class SimpleBar extends Bar {\n\ttype = \"simple-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\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Update data on bar groups\n\t\tconst barGroups = svg.selectAll(\"g.bars\")\n\t\t\t.data(this.model.getDisplayData().datasets, dataset => dataset.label);\n\n\t\t// Remove dot groups that need to be removed\n\t\tbarGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add the bar groups that need to be introduced\n\t\tconst barGroupsEnter = barGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t\t.classed(\"bars\", true)\n\t\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\t// Update data on all bars\n\t\tconst bars = barGroupsEnter.merge(barGroups)\n\t\t\t.selectAll(\"path.bar\")\n\t\t\t.data((d, i) => this.addLabelsToDataPoints(d, i), d => d.label);\n\n\t\t// Remove bars that are no longer needed\n\t\tbars.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add the paths that need to be introduced\n\t\tconst barsEnter = bars.enter()\n\t\t\t.append(\"path\")\n\t\t\t.attr(\"opacity\", 0);\n\n\t\tbarsEnter.merge(bars)\n\t\t\t.classed(\"bar\", true)\n\t\t\t.attr(\"width\", this.getBarWidth.bind(this))\n\t\t\t.transition(this.services.transitions.getTransition(\"bar-update-enter\", animate))\n\t\t\t.attr(\"fill\", d => this.model.getFillScale()(d.label))\n\t\t\t.attr(\"d\", (d, i) => {\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(d, i) - barWidth / 2;\n\t\t\t\tconst x1 = x0 + barWidth;\n\t\t\t\tconst y0 = this.services.cartesianScales.getRangeValue(0);\n\t\t\t\tconst y1 = this.services.cartesianScales.getRangeValue(d, i);\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 to elements drawn\n\t\tthis.addEventListeners();\n\t}\n\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-simple-bar\"))\n\t\t\t.attr(\"opacity\", d => (d.label !== hoveredElement.datum()[\"key\"]) ? 0.3 : 1);\n\t}\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-simple-bar\"))\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\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}));\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\t\t\t\thoveredElement.classed(\"hovered\", true);\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\n\t\t\t\tself.services.events.dispatchEvent(\"show-tooltip\", {\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(\"mousemove\", function(datum) {\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: select(this),\n\t\t\t\t\tdatum\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.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"]}