@carbon/charts 0.28.0 → 0.29.2

package/charts/scatter.js

@@ -0,0 +1,45 @@
+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 { AxisChart } from "../axis-chart";
+import * as Configuration from "../configuration";
+import { Tools } from "../tools";
+// Components
+import { Grid, Scatter, TwoDimensionalAxes, TooltipScatter } from "../components/index";
+var ScatterChart = /** @class */ (function (_super) {
+    __extends(ScatterChart, _super);
+    function ScatterChart(holder, chartConfigs) {
+        var _this = _super.call(this, holder, chartConfigs) || this;
+        // Merge the default options for this chart
+        // With the user provided options
+        _this.model.setOptions(Tools.merge(Tools.clone(Configuration.options.scatterChart), chartConfigs.options));
+        // Initialize data, services, components etc.
+        _this.init(holder, chartConfigs);
+        return _this;
+    }
+    ScatterChart.prototype.getComponents = function () {
+        // Specify what to render inside the graph-frame
+        var graphFrameComponents = [
+            new TwoDimensionalAxes(this.model, this.services),
+            new Grid(this.model, this.services),
+            new Scatter(this.model, this.services)
+        ];
+        var components = this.getAxisChartComponents(graphFrameComponents);
+        components.push(new TooltipScatter(this.model, this.services));
+        return components;
+    };
+    return ScatterChart;
+}(AxisChart));
+export { ScatterChart };
+//# sourceMappingURL=../../src/charts/scatter.js.map

package/components/axes/axis.js

@@ -0,0 +1,201 @@
+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, Roles } from "../../interfaces";
+import { Tools } from "../../tools";
+import { DOMUtils } from "../../services";
+import * as Configuration from "../../configuration";
+// D3 Imports
+import { axisBottom, axisLeft, axisRight, axisTop } from "d3-axis";
+var Axis = /** @class */ (function (_super) {
+    __extends(Axis, _super);
+    function Axis(model, services, configs) {
+        var _this = _super.call(this, model, services, configs) || this;
+        _this.type = "axes";
+        if (configs) {
+            _this.configs = configs;
+        }
+        _this.margins = _this.configs.margins;
+        return _this;
+    }
+    Axis.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        var axisPosition = this.configs.position;
+        var options = this.model.getOptions();
+        var axisOptions = Tools.getProperty(options, "axes", axisPosition);
+        var svg = this.getContainerSVG();
+        var _a = DOMUtils.getSVGElementSize(this.parent, { useAttrs: true }), width = _a.width, height = _a.height;
+        var startPosition, endPosition;
+        if (axisPosition === AxisPositions.BOTTOM || axisPosition === AxisPositions.TOP) {
+            startPosition = this.configs.axes[AxisPositions.LEFT] ? this.margins.left : 0;
+            endPosition = this.configs.axes[AxisPositions.RIGHT] ? width - this.margins.right : width;
+        }
+        else {
+            startPosition = height - this.margins.bottom;
+            endPosition = this.margins.top;
+        }
+        // Grab the scale off of the Scales service
+        var scale = this.services.cartesianScales.getScaleByPosition(axisPosition);
+        if (this.scaleType === ScaleTypes.LABELS) {
+            scale.rangeRound([startPosition, endPosition]);
+        }
+        else {
+            scale.range([startPosition, endPosition]);
+        }
+        // Identify the corresponding d3 axis function
+        var axisFunction;
+        switch (axisPosition) {
+            case AxisPositions.LEFT:
+                axisFunction = axisLeft;
+                break;
+            case AxisPositions.BOTTOM:
+                axisFunction = axisBottom;
+                break;
+            case AxisPositions.RIGHT:
+                axisFunction = axisRight;
+                break;
+            case AxisPositions.TOP:
+                axisFunction = axisTop;
+                break;
+        }
+        // Initialize axis object
+        var axis = axisFunction(scale)
+            .tickSizeOuter(0)
+            .tickFormat(Tools.getProperty(axisOptions, "ticks", "formatter"));
+        if (scale.ticks) {
+            var numberOfTicks = Tools.getProperty(axisOptions, "ticks", "number") || Configuration.axis.ticks.number;
+            axis.ticks(numberOfTicks);
+            if (this.scaleType === ScaleTypes.TIME) {
+                var tickValues = scale.ticks(numberOfTicks).concat(scale.domain())
+                    .map(function (date) { return +date; }).sort();
+                tickValues = Tools.removeArrayDuplicates(tickValues);
+                // Remove labels on the edges
+                // If there are more than 2 labels to show
+                if (Tools.getProperty(options, "timeScale", "addSpaceOnEdges") && tickValues.length > 2) {
+                    tickValues.splice(tickValues.length - 1, 1);
+                    tickValues.splice(0, 1);
+                }
+                axis.tickValues(tickValues);
+            }
+        }
+        // Add axis into the parent
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var axisRefExists = !container.select("g.ticks").empty();
+        var axisRef = DOMUtils.appendOrSelect(container, "g.ticks");
+        if (!axisRefExists) {
+            axisRef.attr("role", Roles.GRAPHICS_OBJECT + " " + Roles.GROUP);
+        }
+        // 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 = DOMUtils.appendOrSelect(container, "g.ticks.invisible")
+            .style("opacity", "0")
+            .attr("aria-hidden", true);
+        // Position and transition the axis
+        switch (axisPosition) {
+            case AxisPositions.LEFT:
+                axisRef.attr("transform", "translate(" + this.margins.left + ", 0)");
+                break;
+            case AxisPositions.BOTTOM:
+                axisRef.attr("transform", "translate(0, " + (height - this.margins.bottom) + ")");
+                break;
+            case AxisPositions.RIGHT:
+                axisRef.attr("transform", "translate(" + (width - this.margins.right) + ", 0)");
+                break;
+            case AxisPositions.TOP:
+                axisRef.attr("transform", "translate(0, " + this.margins.top + ")");
+                break;
+        }
+        // Position the axis title
+        if (axisOptions.title) {
+            var axisTitleRef = DOMUtils.appendOrSelect(container, "text.axis-title")
+                .text(axisOptions.title);
+            switch (axisPosition) {
+                case AxisPositions.LEFT:
+                    axisTitleRef.attr("transform", "rotate(-90)")
+                        .attr("y", 0)
+                        .attr("x", -(scale.range()[0] / 2))
+                        .attr("dy", "1em")
+                        .style("text-anchor", "middle");
+                    break;
+                case AxisPositions.BOTTOM:
+                    axisTitleRef.attr("transform", "translate(" + (this.margins.left / 2 + scale.range()[1] / 2) + ", " + height + ")")
+                        .style("text-anchor", "middle");
+                    break;
+                case AxisPositions.RIGHT:
+                    axisTitleRef.attr("transform", "rotate(90)")
+                        .attr("y", -width)
+                        .attr("x", scale.range()[0] / 2)
+                        .attr("dy", "1em")
+                        .style("text-anchor", "middle");
+                    break;
+                case AxisPositions.TOP:
+                    var titleHeight = DOMUtils.getSVGElementSize(axisTitleRef, { useBBox: true }).height;
+                    axisTitleRef.attr("transform", "translate(" + (this.margins.left / 2 + scale.range()[1] / 2) + ", " + titleHeight / 2 + ")")
+                        .style("text-anchor", "middle");
+                    break;
+            }
+        }
+        // Apply new axis to the axis element
+        if (!animate || !axisRefExists) {
+            axisRef = axisRef.call(axis);
+        }
+        else {
+            axisRef = axisRef.transition(this.services.transitions.getTransition("axis-update"))
+                .call(axis);
+        }
+        invisibleAxisRef.call(axis);
+        if (axisPosition === AxisPositions.BOTTOM || axisPosition === AxisPositions.TOP) {
+            var rotateTicks = false;
+            // If we're dealing with a discrete scale type
+            // We're able to grab the spacing between the ticks
+            if (scale.step) {
+                var textNodes = invisibleAxisRef.selectAll("g.tick text").nodes();
+                // If any ticks are any larger than the scale step size
+                rotateTicks = textNodes.some(function (textNode) { return DOMUtils.getSVGElementSize(textNode, { useBBox: true }).width >= scale.step(); });
+            }
+            else {
+                // When dealing with a continuous scale
+                // We need to calculate an estimated size of the ticks
+                var minTickSize = Tools.getProperty(axisOptions, "ticks", "rotateIfSmallerThan") || Configuration.axis.ticks.rotateIfSmallerThan;
+                var estimatedTickSize = width / scale.ticks().length / 2;
+                rotateTicks = estimatedTickSize < minTickSize;
+            }
+            if (rotateTicks) {
+                container.selectAll("g.ticks g.tick text")
+                    .attr("transform", "rotate(45)")
+                    .style("text-anchor", axisPosition === AxisPositions.TOP ? "end" : "start");
+            }
+            else {
+                container.selectAll("g.ticks g.tick text")
+                    .attr("transform", null)
+                    .style("text-anchor", null);
+            }
+        }
+    };
+    Axis.prototype.getInvisibleAxisRef = function () {
+        var axisPosition = this.configs.position;
+        return this.getContainerSVG()
+            .select("g.axis." + axisPosition + " g.ticks.invisible");
+    };
+    Axis.prototype.getTitleRef = function () {
+        var axisPosition = this.configs.position;
+        return this.getContainerSVG()
+            .select("g.axis." + axisPosition + " text.axis-title");
+    };
+    return Axis;
+}(Component));
+export { Axis };
+//# sourceMappingURL=../../../src/components/axes/axis.js.map

package/components/axes/axis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis.js","sourceRoot":"","sources":["axis.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { AxisPositions, ScaleTypes, Roles } from \"../../interfaces\";\nimport { Tools } from \"../../tools\";\nimport { ChartModel } from \"../../model\";\nimport { DOMUtils } from \"../../services\";\nimport * as Configuration from \"../../configuration\";\n\n// D3 Imports\nimport { axisBottom, axisLeft, axisRight, axisTop } from \"d3-axis\";\n\nexport class Axis extends Component {\n\ttype = \"axes\";\n\n\tmargins: any;\n\n\tscale: any;\n\tscaleType: ScaleTypes;\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tsuper(model, services, configs);\n\n\t\tif (configs) {\n\t\t\tthis.configs = configs;\n\t\t}\n\n\t\tthis.margins = this.configs.margins;\n\t}\n\n\trender(animate = true) {\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst options = this.model.getOptions();\n\t\tconst axisOptions = Tools.getProperty(options, \"axes\", axisPosition);\n\n\t\tconst svg = this.getContainerSVG();\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(this.parent, { useAttrs: true });\n\n\t\tlet startPosition, endPosition;\n\t\tif (axisPosition === AxisPositions.BOTTOM || axisPosition === AxisPositions.TOP) {\n\t\t\tstartPosition = this.configs.axes[AxisPositions.LEFT] ? this.margins.left : 0;\n\t\t\tendPosition = this.configs.axes[AxisPositions.RIGHT] ? width - this.margins.right : width;\n\t\t} else {\n\t\t\tstartPosition = height - this.margins.bottom;\n\t\t\tendPosition = this.margins.top;\n\t\t}\n\n\t\t// Grab the scale off of the Scales service\n\t\tconst scale = this.services.cartesianScales.getScaleByPosition(axisPosition);\n\n\t\tif (this.scaleType === ScaleTypes.LABELS) {\n\t\t\tscale.rangeRound([startPosition, endPosition]);\n\t\t} else {\n\t\t\tscale.range([startPosition, endPosition]);\n\t\t}\n\n\t\t// Identify the corresponding d3 axis function\n\t\tlet axisFunction;\n\t\tswitch (axisPosition) {\n\t\t\tcase AxisPositions.LEFT:\n\t\t\t\taxisFunction = axisLeft;\n\t\t\t\tbreak;\n\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\taxisFunction = axisBottom;\n\t\t\t\tbreak;\n\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\taxisFunction = axisRight;\n\t\t\t\tbreak;\n\t\t\tcase AxisPositions.TOP:\n\t\t\t\taxisFunction = axisTop;\n\t\t\t\tbreak;\n\t\t}\n\n\t\t// Initialize axis object\n\t\tconst axis = axisFunction(scale)\n\t\t\t.tickSizeOuter(0)\n\t\t\t.tickFormat(Tools.getProperty(axisOptions, \"ticks\", \"formatter\"));\n\n\t\tif (scale.ticks) {\n\t\t\tconst numberOfTicks = Tools.getProperty(axisOptions, \"ticks\", \"number\") || Configuration.axis.ticks.number;\n\t\t\taxis.ticks(numberOfTicks);\n\n\t\t\tif (this.scaleType === ScaleTypes.TIME) {\n\t\t\t\tlet tickValues = scale.ticks(numberOfTicks).concat(scale.domain())\n\t\t\t\t\t.map(date => +date).sort();\n\t\t\t\ttickValues = Tools.removeArrayDuplicates(tickValues);\n\n\t\t\t\t// Remove labels on the edges\n\t\t\t\t// If there are more than 2 labels to show\n\t\t\t\tif (Tools.getProperty(options, \"timeScale\", \"addSpaceOnEdges\") && tickValues.length > 2) {\n\t\t\t\t\ttickValues.splice(tickValues.length - 1, 1);\n\t\t\t\t\ttickValues.splice(0, 1);\n\t\t\t\t}\n\n\t\t\t\taxis.tickValues(tickValues);\n\t\t\t}\n\t\t}\n\n\t\t// Add axis into the parent\n\t\tconst container = DOMUtils.appendOrSelect(svg, `g.axis.${axisPosition}`);\n\t\tconst axisRefExists = !container.select(`g.ticks`).empty();\n\t\tlet axisRef = DOMUtils.appendOrSelect(container, `g.ticks`);\n\t\tif (!axisRefExists) {\n\t\t\taxisRef.attr(\"role\", `${Roles.GRAPHICS_OBJECT} ${Roles.GROUP}`);\n\t\t}\n\n\t\t// We draw the invisible axis because of the async nature of d3 transitions\n\t\t// To be able to tell the final width & height of the axis when initiaing the transition\n\t\t// The invisible axis is updated instantly and without a transition\n\t\tconst invisibleAxisRef = DOMUtils.appendOrSelect(container, `g.ticks.invisible`)\n\t\t\t.style(\"opacity\", \"0\")\n\t\t\t.attr(\"aria-hidden\", true);\n\n\t\t// Position and transition the axis\n\t\tswitch (axisPosition) {\n\t\t\tcase AxisPositions.LEFT:\n\t\t\t\taxisRef.attr(\"transform\", `translate(${this.margins.left}, 0)`);\n\t\t\t\tbreak;\n\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\taxisRef.attr(\"transform\", `translate(0, ${height - this.margins.bottom})`);\n\t\t\t\tbreak;\n\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\taxisRef.attr(\"transform\", `translate(${width - this.margins.right}, 0)`);\n\t\t\t\tbreak;\n\t\t\tcase AxisPositions.TOP:\n\t\t\t\taxisRef.attr(\"transform\", `translate(0, ${this.margins.top})`);\n\t\t\t\tbreak;\n\t\t}\n\n\t\t// Position the axis title\n\t\tif (axisOptions.title) {\n\t\t\tconst axisTitleRef = DOMUtils.appendOrSelect(container, `text.axis-title`)\n\t\t\t\t.text(axisOptions.title);\n\n\t\t\tswitch (axisPosition) {\n\t\t\t\tcase AxisPositions.LEFT:\n\t\t\t\t\taxisTitleRef.attr(\"transform\", \"rotate(-90)\")\n\t\t\t\t\t\t.attr(\"y\", 0)\n\t\t\t\t\t\t.attr(\"x\", -(scale.range()[0] / 2))\n\t\t\t\t\t\t.attr(\"dy\", \"1em\")\n\t\t\t\t\t\t.style(\"text-anchor\", \"middle\");\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\t\taxisTitleRef.attr(\"transform\", `translate(${this.margins.left / 2 + scale.range()[1] / 2}, ${height})`)\n\t\t\t\t\t\t.style(\"text-anchor\", \"middle\");\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\t\taxisTitleRef.attr(\"transform\", \"rotate(90)\")\n\t\t\t\t\t\t.attr(\"y\", -width)\n\t\t\t\t\t\t.attr(\"x\", scale.range()[0] / 2)\n\t\t\t\t\t\t.attr(\"dy\", \"1em\")\n\t\t\t\t\t\t.style(\"text-anchor\", \"middle\");\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.TOP:\n\t\t\t\t\tconst { height: titleHeight } = DOMUtils.getSVGElementSize(axisTitleRef, { useBBox: true });\n\t\t\t\t\taxisTitleRef.attr(\"transform\", `translate(${this.margins.left / 2 + scale.range()[1] / 2}, ${titleHeight / 2})`)\n\t\t\t\t\t\t.style(\"text-anchor\", \"middle\");\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// Apply new axis to the axis element\n\t\tif (!animate || !axisRefExists) {\n\t\t\taxisRef = axisRef.call(axis);\n\t\t} else {\n\t\t\taxisRef = axisRef.transition(this.services.transitions.getTransition(\"axis-update\"))\n\t\t\t\t.call(axis);\n\t\t}\n\n\t\tinvisibleAxisRef.call(axis);\n\n\t\tif (axisPosition === AxisPositions.BOTTOM || axisPosition === AxisPositions.TOP) {\n\t\t\tlet rotateTicks = false;\n\n\t\t\t// If we're dealing with a discrete scale type\n\t\t\t// We're able to grab the spacing between the ticks\n\t\t\tif (scale.step) {\n\t\t\t\tconst textNodes = invisibleAxisRef.selectAll(\"g.tick text\").nodes();\n\n\t\t\t\t// If any ticks are any larger than the scale step size\n\t\t\t\trotateTicks = textNodes.some(textNode => DOMUtils.getSVGElementSize(textNode, { useBBox: true }).width >= scale.step());\n\t\t\t} else {\n\t\t\t\t// When dealing with a continuous scale\n\t\t\t\t// We need to calculate an estimated size of the ticks\n\t\t\t\tconst minTickSize = Tools.getProperty(axisOptions, \"ticks\", \"rotateIfSmallerThan\") || Configuration.axis.ticks.rotateIfSmallerThan;\n\t\t\t\tconst estimatedTickSize = width / scale.ticks().length / 2;\n\n\t\t\t\trotateTicks = estimatedTickSize < minTickSize;\n\t\t\t}\n\n\t\t\tif (rotateTicks) {\n\t\t\t\tcontainer.selectAll(\"g.ticks g.tick text\")\n\t\t\t\t\t.attr(\"transform\", `rotate(45)`)\n\t\t\t\t\t.style(\"text-anchor\", axisPosition === AxisPositions.TOP ? \"end\" : \"start\");\n\t\t\t} else {\n\t\t\t\tcontainer.selectAll(\"g.ticks g.tick text\")\n\t\t\t\t\t.attr(\"transform\", null)\n\t\t\t\t\t.style(\"text-anchor\", null);\n\t\t\t}\n\t\t}\n\t}\n\n\tgetInvisibleAxisRef() {\n\t\tconst { position: axisPosition } = this.configs;\n\n\t\treturn this.getContainerSVG()\n\t\t\t.select(`g.axis.${axisPosition} g.ticks.invisible`);\n\t}\n\n\tgetTitleRef() {\n\t\tconst { position: axisPosition } = this.configs;\n\n\t\treturn this.getContainerSVG()\n\t\t\t.select(`g.axis.${axisPosition} text.axis-title`);\n\t}\n}\n"]}

package/components/axes/grid.js

@@ -0,0 +1,205 @@
+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 { Tools } from "../../tools";
+import { DOMUtils } from "../../services";
+// D3 Imports
+import { axisBottom, axisLeft } from "d3-axis";
+import { mouse, select } from "d3-selection";
+import { TooltipTypes } from "../../interfaces";
+var Grid = /** @class */ (function (_super) {
+    __extends(Grid, _super);
+    function Grid() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "grid";
+        return _this;
+    }
+    Grid.prototype.render = function () {
+        // Draw the backdrop
+        this.drawBackdrop();
+        DOMUtils.appendOrSelect(this.backdrop, "g.x.grid");
+        DOMUtils.appendOrSelect(this.backdrop, "g.y.grid");
+        this.drawXGrid();
+        this.drawYGrid();
+        if (Tools.getProperty(this.model.getOptions(), "tooltip", "gridline", "enabled")) {
+            this.addGridEventListeners();
+        }
+    };
+    Grid.prototype.drawXGrid = function () {
+        var svg = this.parent;
+        var height = this.backdrop.attr("height");
+        var mainXScale = this.services.cartesianScales.getMainXScale();
+        var xGrid = axisBottom(mainXScale)
+            .tickSizeInner(-height)
+            .tickSizeOuter(0);
+        // Determine number of ticks
+        var numberOfTicks = Tools.getProperty(this.model.getOptions(), "grid", "x", "numberOfTicks");
+        xGrid.ticks(numberOfTicks);
+        var g = svg.select(".x.grid")
+            .attr("transform", "translate(" + -this.backdrop.attr("x") + ", " + height + ")")
+            .call(xGrid);
+        this.cleanGrid(g);
+    };
+    Grid.prototype.drawYGrid = function () {
+        var svg = this.parent;
+        var width = this.backdrop.attr("width");
+        var mainYScale = this.services.cartesianScales.getMainYScale();
+        var yGrid = axisLeft(mainYScale)
+            .tickSizeInner(-width)
+            .tickSizeOuter(0);
+        // Determine number of ticks
+        var numberOfTicks = Tools.getProperty(this.model.getOptions(), "grid", "y", "numberOfTicks");
+        yGrid.ticks(numberOfTicks);
+        var g = svg.select(".y.grid")
+            .attr("transform", "translate(0, " + -this.backdrop.attr("y") + ")")
+            .call(yGrid);
+        this.cleanGrid(g);
+    };
+    /**
+     * Returns the threshold for the gridline tooltips based on the mouse location.
+     * Calculated based on the mouse position between the two closest gridlines or edges of chart.
+     */
+    Grid.prototype.getGridlineThreshold = function (mousePos) {
+        // use the space between axis grid ticks to adjust the threshold for the tooltips
+        var svg = this.parent;
+        // sort in ascending x translation value order
+        var gridlinesX = svg.selectAll(".x.grid .tick").nodes()
+            .sort(function (a, b) {
+            return Number(Tools.getTranslationValues(a).tx) - Number(Tools.getTranslationValues(b).tx);
+        });
+        // find the 2 gridlines on either side of the mouse
+        var floor = -1;
+        var ceiling;
+        gridlinesX.forEach(function (line, i) {
+            if (mousePos[0] >= +Tools.getTranslationValues(line).tx) {
+                floor++;
+            }
+        });
+        ceiling = (floor + 1 < gridlinesX.length) ? floor + 1 : gridlinesX.length;
+        // get the 'step' between chart gridlines
+        var line1 = gridlinesX[floor];
+        var line2 = gridlinesX[ceiling];
+        var lineSpacing;
+        // if the mouse is on edge of charts (mouseX < first gridline || mouseX > last gridline)
+        // we can use the chart edge to determind the threshold for the gridlines
+        if (!line1) {
+            // we are between the first gridline and the chart edge
+            lineSpacing = +Tools.getTranslationValues(line2).tx;
+        }
+        else if (!line2) {
+            // we need to use the chart right bounds in case there isnt a domain axis
+            var gridElement = svg.select("rect.chart-grid-backdrop").node();
+            var width = DOMUtils.getSVGElementSize(gridElement).width;
+            lineSpacing = width - +Tools.getTranslationValues(line1).tx;
+        }
+        else {
+            // there are two gridlines to use
+            lineSpacing = +Tools.getTranslationValues(line2).tx - +Tools.getTranslationValues(line1).tx;
+        }
+        var threshold = this.model.getOptions().tooltip.gridline.threshold;
+        // return the threshold
+        return lineSpacing * threshold;
+    };
+    /**
+     * Returns the active gridlines based on the gridline threshold and mouse position.
+     * @param position mouse positon
+     */
+    Grid.prototype.getActiveGridline = function (position) {
+        var threshold = Tools.getProperty(this.model.getOptions, "tooltip", "gridline", "threshold") ?
+            Tools.getProperty(this.model.getOptions, "tooltip", "gridline", "threshold") : this.getGridlineThreshold(position);
+        var svg = this.parent;
+        var gridlinesX = svg.selectAll(".x.grid .tick")
+            .filter(function () {
+            var translations = Tools.getTranslationValues(this);
+            // threshold for when to display a gridline tooltip
+            var bounds = {
+                min: Number(translations.tx) - threshold,
+                max: Number(translations.tx) + threshold
+            };
+            return bounds.min <= position[0] && position[0] <= bounds.max;
+        });
+        return gridlinesX;
+    };
+    /**
+     * Adds the listener on the X grid to trigger multiple point tooltips along the x axis.
+     */
+    Grid.prototype.addGridEventListeners = function () {
+        var self = this;
+        var svg = this.parent;
+        var grid = DOMUtils.appendOrSelect(svg, "rect.chart-grid-backdrop");
+        grid
+            .on("mousemove mouseover", function () {
+            var chartContainer = self.services.domUtils.getMainSVG();
+            var pos = mouse(chartContainer);
+            var hoveredElement = select(this);
+            // remove the styling on the lines
+            var allgridlines = svg.selectAll(".x.grid .tick");
+            allgridlines.classed("active", false);
+            var activeGridline = self.getActiveGridline(pos);
+            if (activeGridline.empty()) {
+                self.services.events.dispatchEvent("hide-tooltip", {});
+                return;
+            }
+            // set active class to control dasharray and theme colors
+            activeGridline
+                .classed("active", true);
+            // get the items that should be highlighted
+            var highlightItems;
+            // use the selected gridline to get the data with associated domain
+            activeGridline.each(function (d) {
+                highlightItems = self.services.cartesianScales.getDataFromDomain(d);
+            });
+            self.services.events.dispatchEvent("show-tooltip", {
+                hoveredElement: hoveredElement,
+                multidata: highlightItems,
+                type: TooltipTypes.GRIDLINE
+            });
+        })
+            .on("mouseout", function () {
+            svg.selectAll(".x.grid .tick")
+                .classed("active", false);
+            self.services.events.dispatchEvent("hide-tooltip", {});
+        });
+    };
+    Grid.prototype.drawBackdrop = function () {
+        var svg = this.parent;
+        var mainXScale = this.services.cartesianScales.getMainXScale();
+        var mainYScale = this.services.cartesianScales.getMainYScale();
+        var _a = mainXScale.range(), xScaleStart = _a[0], xScaleEnd = _a[1];
+        var _b = mainYScale.range(), yScaleEnd = _b[0], yScaleStart = _b[1];
+        // Get height from the grid
+        this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop");
+        var backdropRect = DOMUtils.appendOrSelect(this.backdrop, "rect.chart-grid-backdrop");
+        this.backdrop.merge(backdropRect)
+            .attr("x", xScaleStart)
+            .attr("y", yScaleStart)
+            .attr("width", xScaleEnd - xScaleStart)
+            .attr("height", yScaleEnd - yScaleStart)
+            .lower();
+        backdropRect.attr("width", "100%")
+            .attr("height", "100%");
+    };
+    Grid.prototype.cleanGrid = function (g) {
+        var options = this.model.getOptions();
+        g.selectAll("line")
+            .attr("stroke", options.grid.strokeColor);
+        // Remove extra elements
+        g.selectAll("text").remove();
+        g.select(".domain").remove();
+    };
+    return Grid;
+}(Component));
+export { Grid };
+//# sourceMappingURL=../../../src/components/axes/grid.js.map

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