@carbon/charts 0.27.0 → 0.29.1

package/src/components/axes/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["grid.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\n\n// D3 Imports\nimport { axisBottom, axisLeft } from \"d3-axis\";\nimport { mouse, select } from \"d3-selection\";\nimport { TooltipTypes } from \"../../interfaces\";\n\nexport class Grid extends Component {\n\ttype = \"grid\";\n\n\tbackdrop: any;\n\n\trender() {\n\t\t// Draw the backdrop\n\t\tthis.drawBackdrop();\n\t\tDOMUtils.appendOrSelect(this.backdrop, \"g.x.grid\");\n\t\tDOMUtils.appendOrSelect(this.backdrop, \"g.y.grid\");\n\n\t\tthis.drawXGrid();\n\t\tthis.drawYGrid();\n\n\t\tif (Tools.getProperty(this.model.getOptions(), \"tooltip\", \"gridline\", \"enabled\")) {\n\t\t\tthis.addGridEventListeners();\n\t\t}\n\t}\n\n\tdrawXGrid() {\n\t\tconst svg = this.parent;\n\n\t\tconst height = this.backdrop.attr(\"height\");\n\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\t\tconst xGrid = axisBottom(mainXScale)\n\t\t\t.tickSizeInner(-height)\n\t\t\t.tickSizeOuter(0);\n\n\t\t// Determine number of ticks\n\t\tconst numberOfTicks = Tools.getProperty(this.model.getOptions(), \"grid\", \"x\", \"numberOfTicks\");\n\t\txGrid.ticks(numberOfTicks);\n\n\t\tconst g = svg.select(\".x.grid\")\n\t\t\t.attr(\"transform\", `translate(${-this.backdrop.attr(\"x\")}, ${height})`)\n\t\t\t.call(xGrid);\n\n\t\tthis.cleanGrid(g);\n\t}\n\n\tdrawYGrid() {\n\t\tconst svg = this.parent;\n\t\tconst width = this.backdrop.attr(\"width\");\n\n\t\tconst mainYScale = this.services.cartesianScales.getMainYScale();\n\t\tconst yGrid = axisLeft(mainYScale)\n\t\t\t.tickSizeInner(-width)\n\t\t\t.tickSizeOuter(0);\n\n\t\t// Determine number of ticks\n\t\tconst numberOfTicks = Tools.getProperty(this.model.getOptions(), \"grid\", \"y\", \"numberOfTicks\");\n\t\tyGrid.ticks(numberOfTicks);\n\n\t\tconst g = svg.select(\".y.grid\")\n\t\t\t.attr(\"transform\", `translate(0, ${-this.backdrop.attr(\"y\")})`)\n\t\t\t.call(yGrid);\n\n\t\tthis.cleanGrid(g);\n\t}\n\n\t/**\n\t * Returns the threshold for the gridline tooltips based on the mouse location.\n\t * Calculated based on the mouse position between the two closest gridlines or edges of chart.\n\t */\n\tgetGridlineThreshold(mousePos) {\n\t\t// use the space between axis grid ticks to adjust the threshold for the tooltips\n\t\tconst svg = this.parent;\n\n\t\t// sort in ascending x translation value order\n\t\tconst gridlinesX = svg.selectAll(\".x.grid .tick\").nodes()\n\t\t.sort((a, b) => {\n\t\t\treturn Number(Tools.getTranslationValues(a).tx) - Number(Tools.getTranslationValues(b).tx);\n\t\t});\n\n\t\t// find the 2 gridlines on either side of the mouse\n\t\tlet floor = -1; let ceiling;\n\t\tgridlinesX.forEach((line: HTMLElement, i: any) => {\n\t\t\tif (mousePos[0] >= +Tools.getTranslationValues(line).tx) {\n\t\t\t\tfloor ++;\n\t\t\t}\n\t\t});\n\t\tceiling = (floor + 1 < gridlinesX.length) ? floor + 1 : gridlinesX.length;\n\n\t\t// get the 'step' between chart gridlines\n\t\tconst line1 = gridlinesX[floor];\n\t\tconst line2 = gridlinesX[ceiling];\n\t\tlet lineSpacing;\n\n\t\t// if the mouse is on edge of charts (mouseX < first gridline || mouseX > last gridline)\n\t\t// we can use the chart edge to determind the threshold for the gridlines\n\t\tif (!line1) {\n\t\t\t// we are between the first gridline and the chart edge\n\t\t\tlineSpacing = +Tools.getTranslationValues(line2).tx;\n\t\t} else if (!line2) {\n\t\t\t// we need to use the chart right bounds in case there isnt a domain axis\n\t\t\tconst gridElement = svg.select(\"rect.chart-grid-backdrop\").node();\n\t\t\tconst width = DOMUtils.getSVGElementSize(gridElement).width;\n\n\t\t\tlineSpacing = width - +Tools.getTranslationValues(line1).tx;\n\t\t} else {\n\t\t\t// there are two gridlines to use\n\t\t\tlineSpacing = +Tools.getTranslationValues(line2).tx - +Tools.getTranslationValues(line1).tx;\n\t\t}\n\t\tconst { threshold }  = this.model.getOptions().tooltip.gridline;\n\t\t// return the threshold\n\t\treturn lineSpacing * threshold;\n\t}\n\n\t/**\n\t * Returns the active gridlines based on the gridline threshold and mouse position.\n\t * @param position mouse positon\n\t */\n\tgetActiveGridline(position) {\n\t\tconst threshold = Tools.getProperty(this.model.getOptions, \"tooltip\", \"gridline\", \"threshold\") ?\n\t\t\tTools.getProperty(this.model.getOptions, \"tooltip\", \"gridline\", \"threshold\") : this.getGridlineThreshold(position);\n\t\tconst svg = this.parent;\n\n\t\tconst gridlinesX = svg.selectAll(\".x.grid .tick\")\n\t\t.filter(function() {\n\t\t\tconst translations = Tools.getTranslationValues(this);\n\n\t\t\t// threshold for when to display a gridline tooltip\n\t\t\tconst bounds = {\n\t\t\t\tmin: Number(translations.tx) - threshold,\n\t\t\t\tmax: Number(translations.tx) + threshold };\n\n\t\t\treturn bounds.min <= position[0] && position[0] <= bounds.max;\n\t\t});\n\n\t\treturn gridlinesX;\n\t}\n\n\t/**\n\t * Adds the listener on the X grid to trigger multiple point tooltips along the x axis.\n\t */\n\taddGridEventListeners() {\n\t\tconst self = this;\n\t\tconst svg = this.parent;\n\t\tconst grid = DOMUtils.appendOrSelect(svg, \"rect.chart-grid-backdrop\");\n\n\t\tgrid\n\t\t.on(\"mousemove mouseover\", function() {\n\t\t\tconst chartContainer = self.services.domUtils.getMainSVG();\n\t\t\tconst pos = mouse(chartContainer);\n\t\t\tconst hoveredElement = select(this);\n\n\t\t\t// remove the styling on the lines\n\t\t\tconst allgridlines = svg.selectAll(\".x.grid .tick\");\n\t\t\tallgridlines.classed(\"active\", false);\n\n\t\t\tconst activeGridline = self.getActiveGridline(pos);\n\t\t\tif (activeGridline.empty()) {\n\t\t\t\tself.services.events.dispatchEvent(\"hide-tooltip\", {});\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// set active class to control dasharray and theme colors\n\t\t\tactiveGridline\n\t\t\t.classed(\"active\", true);\n\n\t\t\t// get the items that should be highlighted\n\t\t\tlet highlightItems;\n\n\t\t\t// use the selected gridline to get the data with associated domain\n\t\t\tactiveGridline.each(function(d) {\n\t\t\t\thighlightItems = self.services.cartesianScales.getDataFromDomain(d);\n\t\t\t});\n\n\t\t\tself.services.events.dispatchEvent(\"show-tooltip\", {\n\t\t\t\thoveredElement,\n\t\t\t\tmultidata: highlightItems,\n\t\t\t\ttype: TooltipTypes.GRIDLINE\n\t\t\t});\n\t\t})\n\t\t.on(\"mouseout\", function() {\n\t\t\tsvg.selectAll(\".x.grid .tick\")\n\t\t\t.classed(\"active\", false);\n\n\t\t\tself.services.events.dispatchEvent(\"hide-tooltip\", {});\n\t\t});\n\t}\n\n\tdrawBackdrop() {\n\t\tconst svg = this.parent;\n\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\t\tconst mainYScale = this.services.cartesianScales.getMainYScale();\n\n\t\tconst [xScaleStart, xScaleEnd] = mainXScale.range();\n\t\tconst [yScaleEnd, yScaleStart] = mainYScale.range();\n\n\t\t// Get height from the grid\n\t\tthis.backdrop = DOMUtils.appendOrSelect(svg, \"svg.chart-grid-backdrop\");\n\t\tconst backdropRect = DOMUtils.appendOrSelect(this.backdrop, \"rect.chart-grid-backdrop\");\n\n\t\tthis.backdrop.merge(backdropRect)\n\t\t\t.attr(\"x\", xScaleStart)\n\t\t\t.attr(\"y\", yScaleStart)\n\t\t\t.attr(\"width\", xScaleEnd - xScaleStart)\n\t\t\t.attr(\"height\", yScaleEnd - yScaleStart)\n\t\t\t.lower();\n\n\t\tbackdropRect.attr(\"width\", \"100%\")\n\t\t\t.attr(\"height\", \"100%\");\n\t}\n\n\tcleanGrid(g) {\n\t\tconst options = this.model.getOptions();\n\t\tg.selectAll(\"line\")\n\t\t\t.attr(\"stroke\", options.grid.strokeColor);\n\n\t\t// Remove extra elements\n\t\tg.selectAll(\"text\").remove();\n\t\tg.select(\".domain\").remove();\n\t}\n}\n"]}

package/src/components/axes/two-dimensional-axes.js

@@ -0,0 +1,138 @@
+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 { Component } from "../component";
+import { AxisPositions, ScaleTypes } from "../../interfaces";
+import { Axis } from "./axis";
+import { Tools } from "../../tools";
+import { DOMUtils } from "../../services";
+var TwoDimensionalAxes = /** @class */ (function (_super) {
+    __extends(TwoDimensionalAxes, _super);
+    function TwoDimensionalAxes() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "2D-axes";
+        _this.children = {};
+        _this.margins = {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+        };
+        return _this;
+    }
+    TwoDimensionalAxes.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = false; }
+        var axes = {};
+        var axisPositions = Object.keys(AxisPositions);
+        var axesOptions = Tools.getProperty(this.model.getOptions(), "axes");
+        if (axesOptions) {
+            var primaryAxisOptions_1, secondaryAxisOptions_1;
+            axisPositions.forEach(function (axisPosition) {
+                var axisOptions = axesOptions[AxisPositions[axisPosition]];
+                if (axisOptions) {
+                    axes[AxisPositions[axisPosition]] = true;
+                    if (axisOptions.primary === true) {
+                        primaryAxisOptions_1 = axisOptions;
+                    }
+                    else if (axisOptions.secondary === true) {
+                        secondaryAxisOptions_1 = axisOptions;
+                    }
+                }
+            });
+        }
+        else {
+            this.model.getOptions().axes = {
+                left: {
+                    primary: true
+                },
+                bottom: {
+                    secondary: true,
+                    type: this.model.getDisplayData().labels ? ScaleTypes.LABELS : undefined
+                }
+            };
+            axes[AxisPositions.LEFT] = true;
+            axes[AxisPositions.BOTTOM] = true;
+        }
+        this.configs.axes = axes;
+        // Check the configs to know which axes need to be rendered
+        axisPositions.forEach(function (axisPositionKey) {
+            var axisPosition = AxisPositions[axisPositionKey];
+            if (_this.configs.axes[axisPosition] && !_this.children[axisPosition]) {
+                var axisComponent = new Axis(_this.model, _this.services, {
+                    position: axisPosition,
+                    axes: _this.configs.axes,
+                    margins: _this.margins
+                });
+                // Set model, services & parent for the new axis component
+                axisComponent.setModel(_this.model);
+                axisComponent.setServices(_this.services);
+                axisComponent.setParent(_this.parent);
+                _this.children[axisPosition] = axisComponent;
+            }
+        });
+        Object.keys(this.children).forEach(function (childKey) {
+            var child = _this.children[childKey];
+            child.render(animate);
+        });
+        var margins = {};
+        Object.keys(this.children).forEach(function (childKey) {
+            var child = _this.children[childKey];
+            var axisPosition = child.configs.position;
+            // Grab the invisibly rendered axis' width & height, and set margins
+            // Based off of that
+            // We draw the invisible axis because of the async nature of d3 transitions
+            // To be able to tell the final width & height of the axis when initiaing the transition
+            // The invisible axis is updated instantly and without a transition
+            var invisibleAxisRef = child.getInvisibleAxisRef();
+            var _a = DOMUtils.getSVGElementSize(invisibleAxisRef, { useBBox: true }), width = _a.width, height = _a.height;
+            var offset;
+            if (child.getTitleRef().empty()) {
+                offset = 0;
+            }
+            else {
+                offset = DOMUtils.getSVGElementSize(child.getTitleRef(), { useBBox: true }).height;
+            }
+            switch (axisPosition) {
+                case AxisPositions.TOP:
+                    margins.top = height + offset;
+                    break;
+                case AxisPositions.BOTTOM:
+                    margins.bottom = height + offset;
+                    break;
+                case AxisPositions.LEFT:
+                    margins.left = width + offset;
+                    break;
+                case AxisPositions.RIGHT:
+                    margins.right = width + offset;
+                    break;
+            }
+        });
+        // If the new margins are different than the existing ones
+        var isNotEqual = Object.keys(margins).some(function (marginKey) {
+            return _this.margins[marginKey] !== margins[marginKey];
+        });
+        if (isNotEqual) {
+            this.margins = Object.assign(this.margins, margins);
+            Object.keys(this.children).forEach(function (childKey) {
+                var child = _this.children[childKey];
+                child.margins = _this.margins;
+            });
+            this.render(true);
+        }
+    };
+    return TwoDimensionalAxes;
+}(Component));
+export { TwoDimensionalAxes };
+//# sourceMappingURL=../../../../src/components/axes/two-dimensional-axes.js.map

package/src/components/axes/zero-line.d.ts

@@ -0,0 +1,5 @@
+import { Component } from "../component";
+export declare class ZeroLine extends Component {
+    type: string;
+    render(animate: boolean): void;
+}

package/src/components/axes/zero-line.js

@@ -0,0 +1,47 @@
+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 { Component } from "../component";
+import { DOMUtils } from "../../services";
+import { Tools } from "../../tools";
+var ZeroLine = /** @class */ (function (_super) {
+    __extends(ZeroLine, _super);
+    function ZeroLine() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "zero-line";
+        return _this;
+    }
+    ZeroLine.prototype.render = function (animate) {
+        // Grab container SVG
+        var svg = this.getContainerSVG();
+        // Get x & y position of the line
+        var _a = this.services.cartesianScales.getDomainScale().range(), x0 = _a[0], x1 = _a[1];
+        var yPosition = +this.services.cartesianScales.getRangeValue(0) + 0.5;
+        var lineCoordinates = Tools.flipSVGCoordinatesBasedOnOrientation({
+            x0: x0,
+            x1: x1,
+            y0: yPosition,
+            y1: yPosition
+        }, this.services.cartesianScales.getOrientation());
+        var line = DOMUtils.appendOrSelect(svg, "line.domain");
+        line.transition(this.services.transitions.getTransition("zero-line-update", animate))
+            .attr("y1", lineCoordinates.y0)
+            .attr("y2", lineCoordinates.y1)
+            .attr("x1", lineCoordinates.x0)
+            .attr("x2", lineCoordinates.x1);
+    };
+    return ZeroLine;
+}(Component));
+export { ZeroLine };
+//# sourceMappingURL=../../../../src/components/axes/zero-line.js.map

package/src/components/axes/zero-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero-line.js","sourceRoot":"","sources":["zero-line.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC;IAA8B,4BAAS;IAAvC;QAAA,qEAyBC;QAxBA,UAAI,GAAG,WAAW,CAAC;;IAwBpB,CAAC;IAtBA,yBAAM,GAAN,UAAO,OAAgB;QACtB,qBAAqB;QACrB,IAAM,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnC,iCAAiC;QAC3B,IAAA,2DAAiE,EAAhE,UAAE,EAAE,UAA4D,CAAC;QACxE,IAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QAExE,IAAM,eAAe,GAAG,KAAK,CAAC,oCAAoC,CAAC;YAClE,EAAE,IAAA;YACF,EAAE,IAAA;YACF,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;SACb,EAAE,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC,CAAC;QAEnD,IAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;aACnF,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC;aAC9B,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC;aAC9B,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC;aAC9B,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC;IACF,eAAC;AAAD,CAAC,AAzBD,CAA8B,SAAS,GAyBtC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\n\nexport class ZeroLine extends Component {\n\ttype = \"zero-line\";\n\n\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Get x & y position of the line\n\t\tconst [x0, x1] = this.services.cartesianScales.getDomainScale().range();\n\t\tconst yPosition = +this.services.cartesianScales.getRangeValue(0) + 0.5;\n\n\t\tconst lineCoordinates = Tools.flipSVGCoordinatesBasedOnOrientation({\n\t\t\tx0,\n\t\t\tx1,\n\t\t\ty0: yPosition,\n\t\t\ty1: yPosition\n\t\t}, this.services.cartesianScales.getOrientation());\n\n\t\tconst line = DOMUtils.appendOrSelect(svg, \"line.domain\");\n\t\tline.transition(this.services.transitions.getTransition(\"zero-line-update\", animate))\n\t\t\t.attr(\"y1\", lineCoordinates.y0)\n\t\t\t.attr(\"y2\", lineCoordinates.y1)\n\t\t\t.attr(\"x1\", lineCoordinates.x0)\n\t\t\t.attr(\"x2\", lineCoordinates.x1);\n\t}\n}\n"]}

package/src/components/component.js

@@ -0,0 +1,63 @@
+import { DOMUtils } from "../services";
+import { Tools } from "../tools";
+// D3 Imports
+import { select } from "d3-selection";
+// import the settings for the css prefix
+import settings from "carbon-components/src/globals/js/settings";
+var Component = /** @class */ (function () {
+    function Component(model, services, configs) {
+        this.configs = {};
+        this.model = model;
+        this.services = services;
+        if (configs) {
+            this.configs = configs;
+        }
+        // Set parent element to shell SVG if no parent exists for component
+        if (!this.parent) {
+            this.setParent(select(this.services.domUtils.getMainSVG()));
+        }
+    }
+    Component.prototype.init = function () {
+    };
+    Component.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        console.error("render() method is not implemented");
+    };
+    Component.prototype.destroy = function () {
+    };
+    // Used to pass down information to the components
+    Component.prototype.setModel = function (newObj) {
+        this.model = newObj;
+    };
+    // Used to pass down information to the components
+    Component.prototype.setServices = function (newObj) {
+        this.services = newObj;
+    };
+    Component.prototype.setParent = function (parent) {
+        var oldParent = this.parent;
+        this.parent = parent;
+        if (oldParent && oldParent.node() === parent.node()) {
+            return;
+        }
+        if (this.type) {
+            var chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
+            this.parent.classed(settings.prefix + "--" + chartprefix + "--" + this.type, true);
+            if (oldParent) {
+                oldParent.classed(settings.prefix + "--" + chartprefix + "--" + this.type, false);
+            }
+        }
+    };
+    Component.prototype.getParent = function () {
+        return this.parent;
+    };
+    Component.prototype.getContainerSVG = function () {
+        if (this.type) {
+            var chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
+            return DOMUtils.appendOrSelect(this.parent, "g." + settings.prefix + "--" + chartprefix + "--" + this.type);
+        }
+        return this.parent;
+    };
+    return Component;
+}());
+export { Component };
+//# sourceMappingURL=../../../src/components/component.js.map

package/src/components/essentials/legend.js

@@ -0,0 +1,193 @@
+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 { LegendOrientations, Roles } from "../../interfaces";
+import { DOMUtils } from "../../services";
+// D3 Imports
+import { select } from "d3-selection";
+var Legend = /** @class */ (function (_super) {
+    __extends(Legend, _super);
+    function Legend() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "legend";
+        return _this;
+    }
+    Legend.prototype.render = function () {
+        var _this = this;
+        var svg = this.getContainerSVG().attr("role", Roles.GRAPHICS_DOCUMENT);
+        var options = this.model.getOptions();
+        var legendItems = svg.selectAll("g.legend-item")
+            .data(this.getLegendItemArray());
+        var addedLegendItems = legendItems.enter()
+            .append("g")
+            .classed("legend-item", true);
+        // Configs
+        var checkboxRadius = options.legend.checkbox.radius;
+        addedLegendItems.append("rect")
+            .classed("checkbox", true)
+            .merge(legendItems.select("rect.checkbox"))
+            .attr("width", checkboxRadius * 2)
+            .attr("height", checkboxRadius * 2)
+            .attr("rx", 1)
+            .attr("ry", 1)
+            .style("fill", function (d) {
+            return d.value === options.legend.items.status.ACTIVE ? _this.model.getStrokeColor(d.key) : null;
+        }).classed("active", function (d, i) {
+            return d.value === options.legend.items.status.ACTIVE;
+        });
+        addedLegendItems.append("text")
+            .merge(legendItems.select("text"))
+            .text(function (d) { return d.key; })
+            .attr("alignment-baseline", "middle");
+        this.breakItemsIntoLines(addedLegendItems);
+        // Remove old elements as needed.
+        legendItems.exit()
+            .on("mouseover", null)
+            .on("click", null)
+            .on("mouseout", null)
+            .remove();
+        var legendClickable = Tools.getProperty(this.model.getOptions(), "legend", "clickable");
+        svg.classed("clickable", legendClickable);
+        if (legendClickable && addedLegendItems.size() > 0) {
+            this.addEventListeners();
+        }
+    };
+    Legend.prototype.breakItemsIntoLines = function (addedLegendItems) {
+        var self = this;
+        var svg = this.getContainerSVG();
+        var options = this.model.getOptions();
+        // Configs
+        var checkboxRadius = options.legend.checkbox.radius;
+        var legendItemsHorizontalSpacing = options.legend.items.horizontalSpace;
+        var legendItemsVerticalSpacing = options.legend.items.verticalSpace;
+        var legendTextYOffset = options.legend.items.textYOffset;
+        var spaceNeededForCheckbox = (checkboxRadius * 2) + options.legend.checkbox.spaceAfter;
+        // Check if there are disabled legend items
+        var DISABLED = options.legend.items.status.DISABLED;
+        var dataLabels = this.model.get("dataLabels");
+        var hasDeactivatedItems = Object.keys(dataLabels).some(function (label) { return dataLabels[label] === DISABLED; });
+        var legendOrientation = Tools.getProperty(options, "legend", "orientation");
+        // Keep track of line numbers and positions
+        var startingPoint = 0;
+        var lineNumber = 0;
+        var itemIndexInLine = 0;
+        var lastYPosition;
+        addedLegendItems.merge(svg.selectAll("g.legend-item"))
+            .each(function (d, i) {
+            var legendItem = select(this);
+            var previousLegendItem = select(svg.selectAll("g.legend-item").nodes()[i - 1]);
+            if (itemIndexInLine === 0 || previousLegendItem.empty() || legendOrientation === LegendOrientations.VERTICAL) {
+                if (legendOrientation === LegendOrientations.VERTICAL && i !== 0) {
+                    lineNumber++;
+                }
+            }
+            else {
+                var svgDimensions = DOMUtils.getSVGElementSize(self.parent, { useAttr: true });
+                var legendItemTextDimensions = DOMUtils.getSVGElementSize(select(this).select("text"), { useBBox: true });
+                var lastLegendItemTextDimensions = DOMUtils.getSVGElementSize(previousLegendItem.select("text"), { useBBox: true });
+                startingPoint = startingPoint + lastLegendItemTextDimensions.width + spaceNeededForCheckbox + legendItemsHorizontalSpacing;
+                if (startingPoint + spaceNeededForCheckbox + legendItemTextDimensions.width > svgDimensions.width) {
+                    lineNumber++;
+                    startingPoint = 0;
+                    itemIndexInLine = 0;
+                }
+            }
+            var yOffset = 0;
+            // Position checkbox
+            // TODO - Replace with layout component margins
+            legendItem.select("rect.checkbox")
+                .attr("x", startingPoint)
+                .attr("y", yOffset + lineNumber * legendItemsVerticalSpacing);
+            // Position text
+            // TODO - Replace with layout component margins
+            var yPosition = legendTextYOffset + (lineNumber * legendItemsVerticalSpacing);
+            legendItem.select("text")
+                .attr("x", startingPoint + spaceNeededForCheckbox)
+                .attr("y", yOffset + yPosition);
+            lastYPosition = yPosition;
+            // Render checkbox check icon
+            if (hasDeactivatedItems && legendItem.select("g.check").empty()) {
+                legendItem.append("g")
+                    .classed("check", true)
+                    .html("\n\t\t\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 32 32\" aria-hidden=\"true\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\">\n\t\t\t\t\t\t\t\t<path d=\"M13 21.2l-7.1-7.1-1.4 1.4 7.1 7.1L13 24 27.1 9.9l-1.4-1.5z\"></path>\n\t\t\t\t\t\t\t\t<title>Checkmark</title>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t");
+                legendItem.select("g.check svg")
+                    .attr("width", checkboxRadius * 2 - 1)
+                    .attr("height", checkboxRadius * 2 - 1)
+                    .attr("x", parseFloat(legendItem.select("rect.checkbox").attr("x")) + 0.5)
+                    .attr("y", parseFloat(legendItem.select("rect.checkbox").attr("y")) + 0.5);
+            }
+            else if (!hasDeactivatedItems && !legendItem.select("g.check").empty()) {
+                legendItem.select("g.check").remove();
+            }
+            itemIndexInLine++;
+        });
+        // TODO - Replace with layout component margins
+        DOMUtils.appendOrSelect(svg, "rect.spacer")
+            .attr("x", 0)
+            .attr("y", lastYPosition)
+            .attr("width", 16)
+            .attr("height", 16)
+            .attr("fill", "none");
+    };
+    Legend.prototype.getLegendItemArray = function () {
+        var legendItems = this.model.get("dataLabels");
+        var legendItemKeys = Object.keys(legendItems);
+        return legendItemKeys.map(function (key) { return ({
+            key: key,
+            value: legendItems[key]
+        }); });
+    };
+    Legend.prototype.addEventListeners = function () {
+        var self = this;
+        var svg = this.getContainerSVG();
+        var options = this.model.getOptions();
+        svg.selectAll("g.legend-item")
+            .on("mouseover", function () {
+            self.services.events.dispatchEvent("legend-item-onhover", {
+                hoveredElement: select(this)
+            });
+            // Configs
+            var checkboxRadius = options.legend.checkbox.radius;
+            var hoveredItem = select(this);
+            hoveredItem.append("rect")
+                .classed("hover-stroke", true)
+                .attr("x", parseFloat(hoveredItem.select("rect.checkbox").attr("x")) - 2)
+                .attr("y", parseFloat(hoveredItem.select("rect.checkbox").attr("y")) - 2)
+                .attr("width", checkboxRadius * 2 + 4)
+                .attr("height", checkboxRadius * 2 + 4)
+                .attr("rx", 3)
+                .attr("ry", 3)
+                .lower();
+        })
+            .on("click", function () {
+            self.services.events.dispatchEvent("legend-item-onclick", {
+                clickedElement: select(this)
+            });
+            var clickedItem = select(this);
+            var clickedItemData = clickedItem.datum();
+            self.model.toggleDataLabel(clickedItemData.key);
+        })
+            .on("mouseout", function () {
+            var hoveredItem = select(this);
+            hoveredItem.select("rect.hover-stroke").remove();
+            self.services.events.dispatchEvent("legend-item-onmouseout", {
+                hoveredElement: hoveredItem
+            });
+        });
+    };
+    return Legend;
+}(Component));
+export { Legend };
+//# sourceMappingURL=../../../../src/components/essentials/legend.js.map

package/src/components/essentials/title.js

@@ -0,0 +1,102 @@
+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 { Component } from "../component";
+import { DOMUtils } from "../../services";
+import { TooltipTypes } from "./../../interfaces";
+var Title = /** @class */ (function (_super) {
+    __extends(Title, _super);
+    function Title() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "title";
+        return _this;
+    }
+    /**
+     * Truncates title creating ellipses and attaching tooltip for exposing full title.
+     */
+    Title.prototype.truncateTitle = function () {
+        // get a reference to the title elements to calculate the size the title can be
+        var containerWidth = DOMUtils.getSVGElementSize(this.services.domUtils.getMainSVG(), { useAttr: true }).width;
+        var title = DOMUtils.appendOrSelect(this.parent, "text.title");
+        // sanity check to prevent stack overflow on binary search
+        if (containerWidth <= 0) {
+            return;
+        }
+        // check if the title is too big for the containing svg
+        if (title.node().getComputedTextLength() > containerWidth) {
+            // append the ellipses to their own tspan to calculate the text length
+            title.append("tspan")
+                .text("...");
+            // get the bounding width including the elipses '...'
+            var tspanLength = DOMUtils.appendOrSelect(title, "tspan").node().getComputedTextLength();
+            var truncatedSize = Math.floor(containerWidth - tspanLength);
+            var titleString = this.model.getOptions().title;
+            // get the index for creating the max length substring that fit within the svg
+            // use one less than the index to avoid crowding (the elipsis)
+            var substringIndex = this.getSubstringIndex(title.node(), 0, titleString.length - 1, truncatedSize);
+            // use the substring as the title
+            title.text(titleString.substring(0, substringIndex - 1))
+                .append("tspan")
+                .text("...");
+            // add events for displaying the tooltip with the title
+            var self_1 = this;
+            title
+                .on("mouseenter", function () {
+                self_1.services.events.dispatchEvent("show-tooltip", {
+                    hoveredElement: title,
+                    type: TooltipTypes.TITLE
+                });
+            })
+                .on("mouseout", function () {
+                self_1.services.events.dispatchEvent("hide-tooltip", {
+                    hoveredElement: title,
+                });
+            });
+        }
+    };
+    Title.prototype.render = function () {
+        var svg = this.getContainerSVG();
+        var text = DOMUtils.appendOrSelect(svg, "text.title");
+        text.attr("x", 0)
+            .attr("y", 20)
+            .text(this.model.getOptions().title);
+        // title needs to first render so that we can check for overflow
+        this.truncateTitle();
+    };
+    /**
+     * Returns the index for a maximum length substring that is less than the width parameter.
+     * @param title the title node used for getting the text lengths of substrings
+     * @param start the start index for the binary search
+     * @param end the end index for the binary search
+     * @param width the width of the svg container that holds the title
+     */
+    Title.prototype.getSubstringIndex = function (title, start, end, width) {
+        var mid = Math.floor((end + start) / 2);
+        if (title.getSubStringLength(0, mid) > width) {
+            return this.getSubstringIndex(title, start, mid, width);
+        }
+        else if (title.getSubStringLength(0, mid) < width) {
+            if (title.getSubStringLength(0, mid + 1) > width) {
+                return mid;
+            }
+            return this.getSubstringIndex(title, mid, end, width);
+        }
+        else {
+            return mid;
+        }
+    };
+    return Title;
+}(Component));
+export { Title };
+//# sourceMappingURL=../../../../src/components/essentials/title.js.map