@carbon/charts 0.28.0 → 0.29.2

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

@@ -1,138 +0,0 @@
-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.js

@@ -1,47 +0,0 @@
-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/component.js

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

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

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