@carbon/charts 0.53.4 → 0.54.2

package/components/axes/hover-axis.js

@@ -0,0 +1,235 @@
+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 __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// Internal Imports
+import { Axis } from './axis';
+import { AxisPositions, Events, ScaleTypes } from '../../interfaces';
+import { DOMUtils } from '../../services';
+import { Tools } from '../../tools';
+import * as Configuration from '../../configuration';
+// D3 Imports
+import { select } from 'd3-selection';
+var HoverAxis = /** @class */ (function (_super) {
+    __extends(HoverAxis, _super);
+    function HoverAxis(model, services, configs) {
+        return _super.call(this, model, services, configs) || this;
+    }
+    HoverAxis.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        _super.prototype.render.call(this, animate);
+        // Remove existing event listeners to avoid flashing behavior
+        _super.prototype.destroy.call(this);
+        var axisPosition = this.configs.position;
+        var svg = this.getComponentContainer();
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var self = this;
+        container.selectAll('g.tick').each(function (_, index) {
+            var g = select(this);
+            g.classed('tick-hover', true).attr('tabindex', index === 0 ? 0 : -1);
+            var textNode = g.select('text');
+            var _a = DOMUtils.getSVGElementSize(textNode, {
+                useBBox: true,
+            }), width = _a.width, height = _a.height;
+            var rectangle = DOMUtils.appendOrSelect(g, 'rect.axis-holder');
+            var x = 0, y = 0;
+            // Depending on axis position, apply correct translation & rotation to align the rect
+            // with the text
+            switch (axisPosition) {
+                case AxisPositions.LEFT:
+                    x = -width + Number(textNode.attr('x'));
+                    y = -(height / 2);
+                    break;
+                case AxisPositions.RIGHT:
+                    x = Math.abs(Number(textNode.attr('x')));
+                    y = -(height / 2);
+                    break;
+                case AxisPositions.TOP:
+                    x = -(width / 2);
+                    y = -height + Number(textNode.attr('y')) / 2;
+                    if (self.truncation[axisPosition]) {
+                        x = 0;
+                        rectangle.attr('transform', "rotate(-45)");
+                    }
+                    break;
+                case AxisPositions.BOTTOM:
+                    x = -(width / 2);
+                    y = height / 2 - 2;
+                    if (self.truncation[axisPosition]) {
+                        x = -width;
+                        rectangle.attr('transform', "rotate(-45)");
+                    }
+                    break;
+            }
+            // Translates x position -4 left to keep center after padding
+            // Adds padding on left & right
+            rectangle
+                .attr('x', x - Configuration.axis.hover.rectanglePadding)
+                .attr('y', y)
+                .attr('width', width + Configuration.axis.hover.rectanglePadding * 2)
+                .attr('height', height)
+                .lower();
+            // Add keyboard event listeners to each group element
+            g.on('keydown', function (event) {
+                // Choose specific arrow key depending on the axis
+                if (axisPosition === AxisPositions.LEFT ||
+                    axisPosition === AxisPositions.RIGHT) {
+                    if (event.key && event.key === 'ArrowUp') {
+                        self.goNext(this, event);
+                    }
+                    else if (event.key && event.key === 'ArrowDown') {
+                        self.goPrevious(this, event);
+                    }
+                }
+                else {
+                    if (event.key && event.key === 'ArrowLeft') {
+                        self.goPrevious(this, event);
+                    }
+                    else if (event.key && event.key === 'ArrowRight') {
+                        self.goNext(this, event);
+                    }
+                }
+            });
+        });
+        // Add event listeners to element group
+        this.addEventListeners();
+    };
+    HoverAxis.prototype.addEventListeners = function () {
+        var svg = this.getComponentContainer();
+        var axisPosition = this.configs.position;
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var options = this.getOptions();
+        var axisOptions = Tools.getProperty(options, 'axes', axisPosition);
+        var axisScaleType = Tools.getProperty(axisOptions, 'scaleType');
+        var truncationThreshold = Tools.getProperty(axisOptions, 'truncation', 'threshold');
+        var self = this;
+        container
+            .selectAll('g.tick.tick-hover')
+            .on('mouseover', function (event) {
+            var hoveredElement = select(this).select('text');
+            var datum = hoveredElement.datum();
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOVER, {
+                event: event,
+                element: hoveredElement,
+                datum: datum,
+            });
+            if (axisScaleType === ScaleTypes.LABELS &&
+                datum.length > truncationThreshold) {
+                self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                    event: event,
+                    element: hoveredElement,
+                    datum: datum,
+                });
+            }
+        })
+            .on('mousemove', function (event) {
+            var hoveredElement = select(this).select('text');
+            var datum = hoveredElement.datum();
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEMOVE, {
+                event: event,
+                element: hoveredElement,
+                datum: datum,
+            });
+            self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
+                event: event,
+            });
+        })
+            .on('click', function (event) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {
+                event: event,
+                element: select(this).select('text'),
+                datum: select(this).select('text').datum(),
+            });
+        })
+            .on('mouseout', function (event) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {
+                event: event,
+                element: select(this).select('text'),
+                datum: select(this).select('text').datum(),
+            });
+            if (axisScaleType === ScaleTypes.LABELS) {
+                self.services.events.dispatchEvent(Events.Tooltip.HIDE);
+            }
+        })
+            .on('focus', function (event) {
+            var coordinates = { clientX: 0, clientY: 0 };
+            if (event.target) {
+                // Focus element since we are using arrow keys
+                event.target.focus();
+                var boundingRect = event.target.getBoundingClientRect();
+                coordinates.clientX = boundingRect.x;
+                coordinates.clientY = boundingRect.y;
+            }
+            // Dispatch focus event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_FOCUS, {
+                event: __assign(__assign({}, event), coordinates),
+                element: select(this),
+                datum: select(this).select('text').datum(),
+            });
+        })
+            .on('blur', function (event) {
+            // Dispatch blur event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {
+                event: event,
+                element: select(this),
+                datum: select(this).select('text').datum(),
+            });
+        });
+    };
+    // Focus on the next HTML element sibling
+    HoverAxis.prototype.goNext = function (element, event) {
+        if (element.nextElementSibling &&
+            element.nextElementSibling.tagName !== 'path') {
+            element.nextElementSibling.dispatchEvent(new Event('focus'));
+        }
+        event.preventDefault();
+    };
+    // Focus on the previous HTML element sibling
+    HoverAxis.prototype.goPrevious = function (element, event) {
+        if (element.previousElementSibling &&
+            element.previousElementSibling.tagName !== 'path') {
+            element.previousElementSibling.dispatchEvent(new Event('focus'));
+        }
+        event.preventDefault();
+    };
+    HoverAxis.prototype.destroy = function () {
+        var svg = this.getComponentContainer();
+        var axisPosition = this.configs.position;
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        // Remove event listeners
+        container
+            .selectAll('g.tick.tick-hover')
+            .on('mouseover', null)
+            .on('mousemove', null)
+            .on('mouseout', null)
+            .on('focus', null)
+            .on('blur', null);
+    };
+    return HoverAxis;
+}(Axis));
+export { HoverAxis };
+//# sourceMappingURL=../../../src/components/axes/hover-axis.js.map

package/components/axes/hover-axis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-axis.js","sourceRoot":"","sources":["hover-axis.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Axis } from './axis';\nimport { AxisPositions, Events, ScaleTypes } from '../../interfaces';\nimport { ChartModel } from '../../model/model';\nimport { DOMUtils } from '../../services';\nimport { Tools } from '../../tools';\nimport * as Configuration from '../../configuration';\n\n// D3 Imports\nimport { select } from 'd3-selection';\n\nexport class HoverAxis extends Axis {\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tsuper(model, services, configs);\n\t}\n\n\trender(animate = true) {\n\t\tsuper.render(animate);\n\n\t\t// Remove existing event listeners to avoid flashing behavior\n\t\tsuper.destroy();\n\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst svg = this.getComponentContainer();\n\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\tsvg,\n\t\t\t`g.axis.${axisPosition}`\n\t\t);\n\n\t\tconst self = this;\n\t\tcontainer.selectAll('g.tick').each(function (_, index) {\n\t\t\tconst g = select(this);\n\t\t\tg.classed('tick-hover', true).attr(\n\t\t\t\t'tabindex',\n\t\t\t\tindex === 0 ? 0 : -1\n\t\t\t);\n\t\t\tconst textNode = g.select('text');\n\t\t\tconst { width, height } = DOMUtils.getSVGElementSize(textNode, {\n\t\t\t\tuseBBox: true,\n\t\t\t});\n\n\t\t\tconst rectangle = DOMUtils.appendOrSelect(g, 'rect.axis-holder');\n\n\t\t\tlet x = 0,\n\t\t\t\ty = 0;\n\n\t\t\t// Depending on axis position, apply correct translation & rotation to align the rect\n\t\t\t// with the text\n\t\t\tswitch (axisPosition) {\n\t\t\t\tcase AxisPositions.LEFT:\n\t\t\t\t\tx = -width + Number(textNode.attr('x'));\n\t\t\t\t\ty = -(height / 2);\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\t\tx = Math.abs(Number(textNode.attr('x')));\n\t\t\t\t\ty = -(height / 2);\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.TOP:\n\t\t\t\t\tx = -(width / 2);\n\t\t\t\t\ty = -height + Number(textNode.attr('y')) / 2;\n\n\t\t\t\t\tif (self.truncation[axisPosition]) {\n\t\t\t\t\t\tx = 0;\n\t\t\t\t\t\trectangle.attr('transform', `rotate(-45)`);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\t\tx = -(width / 2);\n\t\t\t\t\ty = height / 2 - 2;\n\n\t\t\t\t\tif (self.truncation[axisPosition]) {\n\t\t\t\t\t\tx = -width;\n\t\t\t\t\t\trectangle.attr('transform', `rotate(-45)`);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\t// Translates x position -4 left to keep center after padding\n\t\t\t// Adds padding on left & right\n\t\t\trectangle\n\t\t\t\t.attr('x', x - Configuration.axis.hover.rectanglePadding)\n\t\t\t\t.attr('y', y)\n\t\t\t\t.attr(\n\t\t\t\t\t'width',\n\t\t\t\t\twidth + Configuration.axis.hover.rectanglePadding * 2\n\t\t\t\t)\n\t\t\t\t.attr('height', height)\n\t\t\t\t.lower();\n\n\t\t\t// Add keyboard event listeners to each group element\n\t\t\tg.on('keydown', function (event: KeyboardEvent) {\n\t\t\t\t// Choose specific arrow key depending on the axis\n\t\t\t\tif (\n\t\t\t\t\taxisPosition === AxisPositions.LEFT ||\n\t\t\t\t\taxisPosition === AxisPositions.RIGHT\n\t\t\t\t) {\n\t\t\t\t\tif (event.key && event.key === 'ArrowUp') {\n\t\t\t\t\t\tself.goNext(this as HTMLElement, event);\n\t\t\t\t\t} else if (event.key && event.key === 'ArrowDown') {\n\t\t\t\t\t\tself.goPrevious(this as HTMLElement, event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (event.key && event.key === 'ArrowLeft') {\n\t\t\t\t\t\tself.goPrevious(this as HTMLElement, event);\n\t\t\t\t\t} else if (event.key && event.key === 'ArrowRight') {\n\t\t\t\t\t\tself.goNext(this as HTMLElement, event);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\t// Add event listeners to element group\n\t\tthis.addEventListeners();\n\t}\n\n\taddEventListeners() {\n\t\tconst svg = this.getComponentContainer();\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\tsvg,\n\t\t\t`g.axis.${axisPosition}`\n\t\t);\n\t\tconst options = this.getOptions();\n\t\tconst axisOptions = Tools.getProperty(options, 'axes', axisPosition);\n\t\tconst axisScaleType = Tools.getProperty(axisOptions, 'scaleType');\n\t\tconst truncationThreshold = Tools.getProperty(\n\t\t\taxisOptions,\n\t\t\t'truncation',\n\t\t\t'threshold'\n\t\t);\n\n\t\tconst self = this;\n\t\tcontainer\n\t\t\t.selectAll('g.tick.tick-hover')\n\t\t\t.on('mouseover', function (event) {\n\t\t\t\tconst hoveredElement = select(this).select('text');\n\t\t\t\tconst datum = hoveredElement.datum() as string;\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(\n\t\t\t\t\tEvents.Axis.LABEL_MOUSEOVER,\n\t\t\t\t\t{\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\t\tdatum,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tif (\n\t\t\t\t\taxisScaleType === ScaleTypes.LABELS &&\n\t\t\t\t\tdatum.length > truncationThreshold\n\t\t\t\t) {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\t\tdatum,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t})\n\t\t\t.on('mousemove', function (event) {\n\t\t\t\tconst hoveredElement = select(this).select('text');\n\t\t\t\tconst datum = hoveredElement.datum() as string;\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(\n\t\t\t\t\tEvents.Axis.LABEL_MOUSEMOVE,\n\t\t\t\t\t{\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\t\tdatum,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.MOVE, {\n\t\t\t\t\tevent,\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('click', function (event) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {\n\t\t\t\t\tevent,\n\t\t\t\t\telement: select(this).select('text'),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('mouseout', function (event) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {\n\t\t\t\t\tevent,\n\t\t\t\t\telement: select(this).select('text'),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\n\t\t\t\tif (axisScaleType === ScaleTypes.LABELS) {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.on('focus', function (event) {\n\t\t\t\tconst coordinates = { clientX: 0, clientY: 0 };\n\n\t\t\t\tif (event.target) {\n\t\t\t\t\t// Focus element since we are using arrow keys\n\t\t\t\t\tevent.target.focus();\n\t\t\t\t\tconst boundingRect = event.target.getBoundingClientRect();\n\t\t\t\t\tcoordinates.clientX = boundingRect.x;\n\t\t\t\t\tcoordinates.clientY = boundingRect.y;\n\t\t\t\t}\n\n\t\t\t\t// Dispatch focus event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_FOCUS, {\n\t\t\t\t\tevent: { ...event, ...coordinates },\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('blur', function (event) {\n\t\t\t\t// Dispatch blur event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {\n\t\t\t\t\tevent,\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\t\t\t});\n\t}\n\n\t// Focus on the next HTML element sibling\n\tprivate goNext(element: HTMLElement, event: Event) {\n\t\tif (\n\t\t\telement.nextElementSibling &&\n\t\t\telement.nextElementSibling.tagName !== 'path'\n\t\t) {\n\t\t\telement.nextElementSibling.dispatchEvent(new Event('focus'));\n\t\t}\n\n\t\tevent.preventDefault();\n\t}\n\n\t// Focus on the previous HTML element sibling\n\tprivate goPrevious(element: HTMLElement, event: Event) {\n\t\tif (\n\t\t\telement.previousElementSibling &&\n\t\t\telement.previousElementSibling.tagName !== 'path'\n\t\t) {\n\t\t\telement.previousElementSibling.dispatchEvent(new Event('focus'));\n\t\t}\n\n\t\tevent.preventDefault();\n\t}\n\n\tdestroy() {\n\t\tconst svg = this.getComponentContainer();\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\tsvg,\n\t\t\t`g.axis.${axisPosition}`\n\t\t);\n\n\t\t// Remove event listeners\n\t\tcontainer\n\t\t\t.selectAll('g.tick.tick-hover')\n\t\t\t.on('mouseover', null)\n\t\t\t.on('mousemove', null)\n\t\t\t.on('mouseout', null)\n\t\t\t.on('focus', null)\n\t\t\t.on('blur', null);\n\t}\n}\n"]}

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

@@ -13,11 +13,12 @@ var __extends = (this && this.__extends) || (function () {
 })();
 // Internal Imports
 import { Component } from '../component';
-import { AxisPositions, RenderTypes, } from '../../interfaces';
+import { AxisPositions, RenderTypes, AxisFlavor } from '../../interfaces';
 import { Axis } from './axis';
 import { Tools } from '../../tools';
 import { DOMUtils } from '../../services';
 import { Events } from './../../interfaces';
+import { HoverAxis } from './hover-axis';
 var TwoDimensionalAxes = /** @class */ (function (_super) {
     __extends(TwoDimensionalAxes, _super);
     function TwoDimensionalAxes() {
@@ -52,11 +53,14 @@ var TwoDimensionalAxes = /** @class */ (function (_super) {
             var axisPosition = AxisPositions[axisPositionKey];
             if (_this.configs.axes[axisPosition] &&
                 !_this.children[axisPosition]) {
-                var axisComponent = new Axis(_this.model, _this.services, {
+                var configs = {
                     position: axisPosition,
                     axes: _this.configs.axes,
                     margins: _this.margins,
-                });
+                };
+                var axisComponent = _this.model.axisFlavor === AxisFlavor.DEFAULT
+                    ? new Axis(_this.model, _this.services, configs)
+                    : new HoverAxis(_this.model, _this.services, configs);
                 // Set model, services & parent for the new axis component
                 axisComponent.setModel(_this.model);
                 axisComponent.setServices(_this.services);
@@ -107,6 +111,7 @@ var TwoDimensionalAxes = /** @class */ (function (_super) {
                     break;
             }
         });
+        this.services.events.dispatchEvent(Events.Axis.RENDER_COMPLETE);
         // If the new margins are different than the existing ones
         var isNotEqual = Object.keys(margins).some(function (marginKey) {
             return _this.margins[marginKey] !== margins[marginKey];

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

@@ -1 +1 @@
-{"version":3,"file":"two-dimensional-axes.js","sourceRoot":"","sources":["two-dimensional-axes.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport {\n\tAxisPositions,\n\tScaleTypes,\n\tAxesOptions,\n\tRenderTypes,\n} from '../../interfaces';\nimport { Axis } from './axis';\nimport { Tools } from '../../tools';\nimport { DOMUtils } from '../../services';\nimport { Threshold } from '../essentials/threshold';\nimport { Events } from './../../interfaces';\n\nexport class TwoDimensionalAxes extends Component {\n\ttype = '2D-axes';\n\trenderType = RenderTypes.SVG;\n\n\tchildren: any = {};\n\n\tthresholds: Threshold[] = [];\n\n\tmargins = {\n\t\ttop: 0,\n\t\tright: 0,\n\t\tbottom: 0,\n\t\tleft: 0,\n\t};\n\n\trender(animate = false) {\n\t\tconst axes = {};\n\t\tconst axisPositions = Object.keys(AxisPositions);\n\t\tconst axesOptions = Tools.getProperty(this.getOptions(), 'axes');\n\n\t\taxisPositions.forEach((axisPosition) => {\n\t\t\tconst axisOptions = axesOptions[AxisPositions[axisPosition]];\n\t\t\tif (axisOptions) {\n\t\t\t\taxes[AxisPositions[axisPosition]] = true;\n\t\t\t}\n\t\t});\n\n\t\tthis.configs.axes = axes;\n\n\t\t// Check the configs to know which axes need to be rendered\n\t\taxisPositions.forEach((axisPositionKey) => {\n\t\t\tconst axisPosition = AxisPositions[axisPositionKey];\n\t\t\tif (\n\t\t\t\tthis.configs.axes[axisPosition] &&\n\t\t\t\t!this.children[axisPosition]\n\t\t\t) {\n\t\t\t\tconst axisComponent = new Axis(this.model, this.services, {\n\t\t\t\t\tposition: axisPosition,\n\t\t\t\t\taxes: this.configs.axes,\n\t\t\t\t\tmargins: this.margins,\n\t\t\t\t});\n\n\t\t\t\t// Set model, services & parent for the new axis component\n\t\t\t\taxisComponent.setModel(this.model);\n\t\t\t\taxisComponent.setServices(this.services);\n\t\t\t\taxisComponent.setParent(this.parent);\n\n\t\t\t\tthis.children[axisPosition] = axisComponent;\n\t\t\t}\n\t\t});\n\n\t\tObject.keys(this.children).forEach((childKey) => {\n\t\t\tconst child = this.children[childKey];\n\t\t\tchild.render(animate);\n\t\t});\n\n\t\tconst margins = {} as any;\n\n\t\tObject.keys(this.children).forEach((childKey) => {\n\t\t\tconst child = this.children[childKey];\n\t\t\tconst axisPosition = child.configs.position;\n\n\t\t\t// Grab the invisibly rendered axis' width & height, and set margins\n\t\t\t// Based off of that\n\t\t\t// We draw the invisible axis because of the async nature of d3 transitions\n\t\t\t// To be able to tell the final width & height of the axis when initiaing the transition\n\t\t\t// The invisible axis is updated instantly and without a transition\n\t\t\tconst invisibleAxisRef = child.getInvisibleAxisRef();\n\t\t\tconst {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} = DOMUtils.getSVGElementSize(invisibleAxisRef, { useBBox: true });\n\n\t\t\tlet offset;\n\t\t\tif (child.getTitleRef().empty()) {\n\t\t\t\toffset = 0;\n\t\t\t} else {\n\t\t\t\toffset = DOMUtils.getSVGElementSize(child.getTitleRef(), {\n\t\t\t\t\tuseBBox: true,\n\t\t\t\t}).height;\n\n\t\t\t\tif (\n\t\t\t\t\taxisPosition === AxisPositions.LEFT ||\n\t\t\t\t\taxisPosition === AxisPositions.RIGHT\n\t\t\t\t) {\n\t\t\t\t\toffset += 5;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tswitch (axisPosition) {\n\t\t\t\tcase AxisPositions.TOP:\n\t\t\t\t\tmargins.top = height + offset;\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\t\tmargins.bottom = height + offset;\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.LEFT:\n\t\t\t\t\tmargins.left = width + offset;\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\t\tmargins.right = width + offset;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\n\t\t// If the new margins are different than the existing ones\n\t\tconst isNotEqual = Object.keys(margins).some((marginKey) => {\n\t\t\treturn this.margins[marginKey] !== margins[marginKey];\n\t\t});\n\n\t\tif (isNotEqual) {\n\t\t\tthis.margins = Object.assign(this.margins, margins);\n\n\t\t\t// also set new margins to model to allow external components to access\n\t\t\tthis.model.set({ axesMargins: this.margins }, { skipUpdate: true });\n\t\t\tthis.services.events.dispatchEvent(Events.ZoomBar.UPDATE);\n\n\t\t\tObject.keys(this.children).forEach((childKey) => {\n\t\t\t\tconst child = this.children[childKey];\n\t\t\t\tchild.margins = this.margins;\n\t\t\t});\n\n\t\t\tthis.render(true);\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"two-dimensional-axes.js","sourceRoot":"","sources":["two-dimensional-axes.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport { AxisPositions, RenderTypes, AxisFlavor } from '../../interfaces';\nimport { Axis } from './axis';\nimport { Tools } from '../../tools';\nimport { DOMUtils } from '../../services';\nimport { Threshold } from '../essentials/threshold';\nimport { Events } from './../../interfaces';\nimport { HoverAxis } from './hover-axis';\n\nexport class TwoDimensionalAxes extends Component {\n\ttype = '2D-axes';\n\trenderType = RenderTypes.SVG;\n\n\tchildren: any = {};\n\n\tthresholds: Threshold[] = [];\n\n\tmargins = {\n\t\ttop: 0,\n\t\tright: 0,\n\t\tbottom: 0,\n\t\tleft: 0,\n\t};\n\n\trender(animate = false) {\n\t\tconst axes = {};\n\t\tconst axisPositions = Object.keys(AxisPositions);\n\t\tconst axesOptions = Tools.getProperty(this.getOptions(), 'axes');\n\n\t\taxisPositions.forEach((axisPosition) => {\n\t\t\tconst axisOptions = axesOptions[AxisPositions[axisPosition]];\n\t\t\tif (axisOptions) {\n\t\t\t\taxes[AxisPositions[axisPosition]] = true;\n\t\t\t}\n\t\t});\n\n\t\tthis.configs.axes = axes;\n\n\t\t// Check the configs to know which axes need to be rendered\n\t\taxisPositions.forEach((axisPositionKey) => {\n\t\t\tconst axisPosition = AxisPositions[axisPositionKey];\n\t\t\tif (\n\t\t\t\tthis.configs.axes[axisPosition] &&\n\t\t\t\t!this.children[axisPosition]\n\t\t\t) {\n\t\t\t\tconst configs = {\n\t\t\t\t\tposition: axisPosition,\n\t\t\t\t\taxes: this.configs.axes,\n\t\t\t\t\tmargins: this.margins,\n\t\t\t\t};\n\n\t\t\t\tconst axisComponent =\n\t\t\t\t\tthis.model.axisFlavor === AxisFlavor.DEFAULT\n\t\t\t\t\t\t? new Axis(this.model, this.services, configs)\n\t\t\t\t\t\t: new HoverAxis(this.model, this.services, configs);\n\n\t\t\t\t// Set model, services & parent for the new axis component\n\t\t\t\taxisComponent.setModel(this.model);\n\t\t\t\taxisComponent.setServices(this.services);\n\t\t\t\taxisComponent.setParent(this.parent);\n\n\t\t\t\tthis.children[axisPosition] = axisComponent;\n\t\t\t}\n\t\t});\n\n\t\tObject.keys(this.children).forEach((childKey) => {\n\t\t\tconst child = this.children[childKey];\n\t\t\tchild.render(animate);\n\t\t});\n\n\t\tconst margins = {} as any;\n\n\t\tObject.keys(this.children).forEach((childKey) => {\n\t\t\tconst child = this.children[childKey];\n\t\t\tconst axisPosition = child.configs.position;\n\n\t\t\t// Grab the invisibly rendered axis' width & height, and set margins\n\t\t\t// Based off of that\n\t\t\t// We draw the invisible axis because of the async nature of d3 transitions\n\t\t\t// To be able to tell the final width & height of the axis when initiaing the transition\n\t\t\t// The invisible axis is updated instantly and without a transition\n\t\t\tconst invisibleAxisRef = child.getInvisibleAxisRef();\n\t\t\tconst {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} = DOMUtils.getSVGElementSize(invisibleAxisRef, { useBBox: true });\n\n\t\t\tlet offset;\n\t\t\tif (child.getTitleRef().empty()) {\n\t\t\t\toffset = 0;\n\t\t\t} else {\n\t\t\t\toffset = DOMUtils.getSVGElementSize(child.getTitleRef(), {\n\t\t\t\t\tuseBBox: true,\n\t\t\t\t}).height;\n\n\t\t\t\tif (\n\t\t\t\t\taxisPosition === AxisPositions.LEFT ||\n\t\t\t\t\taxisPosition === AxisPositions.RIGHT\n\t\t\t\t) {\n\t\t\t\t\toffset += 5;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tswitch (axisPosition) {\n\t\t\t\tcase AxisPositions.TOP:\n\t\t\t\t\tmargins.top = height + offset;\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\t\tmargins.bottom = height + offset;\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.LEFT:\n\t\t\t\t\tmargins.left = width + offset;\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\t\tmargins.right = width + offset;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\n\t\tthis.services.events.dispatchEvent(Events.Axis.RENDER_COMPLETE);\n\n\t\t// If the new margins are different than the existing ones\n\t\tconst isNotEqual = Object.keys(margins).some((marginKey) => {\n\t\t\treturn this.margins[marginKey] !== margins[marginKey];\n\t\t});\n\n\t\tif (isNotEqual) {\n\t\t\tthis.margins = Object.assign(this.margins, margins);\n\n\t\t\t// also set new margins to model to allow external components to access\n\t\t\tthis.model.set({ axesMargins: this.margins }, { skipUpdate: true });\n\t\t\tthis.services.events.dispatchEvent(Events.ZoomBar.UPDATE);\n\n\t\t\tObject.keys(this.children).forEach((childKey) => {\n\t\t\t\tconst child = this.children[childKey];\n\t\t\t\tchild.margins = this.margins;\n\t\t\t});\n\n\t\t\tthis.render(true);\n\t\t}\n\t}\n}\n"]}

package/components/essentials/color-scale-legend.d.ts

@@ -0,0 +1,11 @@
+import { RenderTypes } from '../../interfaces';
+import { Legend } from './legend';
+export declare class ColorScaleLegend extends Legend {
+    type: string;
+    renderType: RenderTypes;
+    private gradient_id;
+    init(): void;
+    handleAxisComplete: (event: CustomEvent<any>) => void;
+    render(animate?: boolean): void;
+    destroy(): void;
+}

package/components/essentials/color-scale-legend.js

@@ -0,0 +1,236 @@
+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 { Tools } from '../../tools';
+import { ColorLegendType, Events, RenderTypes } from '../../interfaces';
+import * as Configuration from '../../configuration';
+import { Legend } from './legend';
+import { DOMUtils } from '../../services';
+// D3 imports
+import { axisBottom } from 'd3-axis';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { interpolateRound, quantize } from 'd3-interpolate';
+var ColorScaleLegend = /** @class */ (function (_super) {
+    __extends(ColorScaleLegend, _super);
+    function ColorScaleLegend() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'color-legend';
+        _this.renderType = RenderTypes.SVG;
+        _this.gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
+        _this.handleAxisComplete = function (event) {
+            var svg = _this.getComponentContainer();
+            var width = DOMUtils.getSVGElementSize(svg, {
+                useAttrs: true,
+            }).width;
+            var isDataLoading = Tools.getProperty(_this.getOptions(), 'data', 'loading');
+            if (width > Configuration.legend.color.barWidth && !isDataLoading) {
+                var title = Tools.getProperty(_this.getOptions(), 'heatmap', 'colorLegend', 'title');
+                var cartesianScales = _this.services.cartesianScales;
+                // Get available chart area
+                var mainXScale = cartesianScales.getMainXScale();
+                var xDimensions = mainXScale.range();
+                // Align legend with the axis
+                if (xDimensions[0] > 1) {
+                    svg.select('g.legend').attr('transform', "translate(" + xDimensions[0] + ", 0)");
+                    if (title) {
+                        var textWidth = DOMUtils.getSVGElementSize(svg.select('g.legend-title').select('text'), { useBBox: true }).width;
+                        // -9 since LEFT y-axis labels are moved towards the left by 9 by d3
+                        var availableSpace = xDimensions[0] - textWidth - 9;
+                        // If space is available align the the label with the axis labels
+                        if (availableSpace > 1) {
+                            svg.select('g.legend-title').attr('transform', "translate(" + availableSpace + ", 0)");
+                        }
+                        else {
+                            // Move the legend down by 16 pixels to display legend text on top
+                            svg.select('g.legend').attr('transform', "translate(" + xDimensions[0] + ", 16)");
+                            // Align legend title with start of axis
+                            svg.select('g.legend-title').attr('transform', "translate(" + xDimensions[0] + ", 0)");
+                        }
+                    }
+                }
+            }
+        };
+        return _this;
+    }
+    ColorScaleLegend.prototype.init = function () {
+        var eventsFragment = this.services.events;
+        // Highlight correct circle on legend item hovers
+        eventsFragment.addEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+    };
+    ColorScaleLegend.prototype.render = function (animate) {
+        if (animate === void 0) { animate = false; }
+        var options = this.getOptions();
+        var customColors = Tools.getProperty(options, 'color', 'gradient', 'colors');
+        var colorScaleType = Tools.getProperty(options, 'heatmap', 'colorLegend', 'type');
+        var colorPairingOption = Tools.getProperty(options, 'color', 'pairing', 'option');
+        var title = Tools.getProperty(options, 'heatmap', 'colorLegend', 'title');
+        var customColorsEnabled = !Tools.isEmpty(customColors);
+        var domain = this.model.getValueDomain();
+        var svg = this.getComponentContainer();
+        // Clear DOM if loading
+        var isDataLoading = Tools.getProperty(this.getOptions(), 'data', 'loading');
+        if (isDataLoading) {
+            svg.html('');
+            return;
+        }
+        var legend = DOMUtils.appendOrSelect(svg, 'g.legend');
+        var axis = DOMUtils.appendOrSelect(legend, 'g.legend-axis');
+        var width = DOMUtils.getSVGElementSize(svg, {
+            useAttrs: true,
+        }).width;
+        var barWidth = Configuration.legend.color.barWidth;
+        if (width <= Configuration.legend.color.barWidth) {
+            barWidth = width;
+        }
+        if (title) {
+            var legendTitleGroup = DOMUtils.appendOrSelect(svg, 'g.legend-title');
+            var legendTitle = DOMUtils.appendOrSelect(legendTitleGroup, 'text');
+            legendTitle.text(title).attr('dy', '0.7em');
+            // Move the legend down by 16 pixels to display legend text on top
+            legend.attr('transform', "translate(0, 16)");
+        }
+        // If domain consists of negative and positive values, use diverging palettes
+        var colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
+        // Use default color pairing options if not in defined range
+        if (colorPairingOption < 1 &&
+            colorPairingOption > 4 &&
+            colorScheme === 'mono') {
+            colorPairingOption = 1;
+        }
+        else if (colorPairingOption < 1 &&
+            colorPairingOption > 2 &&
+            colorScheme === 'diverge') {
+            colorPairingOption = 1;
+        }
+        var colorPairing = [];
+        // Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette
+        var colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;
+        if (!customColorsEnabled) {
+            // Add class names to list and the amount based on the color scheme
+            for (var i = 1; i < colorGroupingLength + 1; i++) {
+                colorPairing.push(colorScaleType === ColorLegendType.LINEAR
+                    ? "stop-color-" + colorScheme + "-" + colorPairingOption + "-" + i
+                    : "fill-" + colorScheme + "-" + colorPairingOption + "-" + i);
+            }
+        }
+        else {
+            // Use custom colors
+            colorPairing = customColors;
+        }
+        if (colorScaleType === ColorLegendType.LINEAR) {
+            var stopLengthPercentage_1 = 100 / (colorPairing.length - 1);
+            // Generate the gradient
+            var linearGradient = DOMUtils.appendOrSelect(legend, 'linearGradient');
+            linearGradient
+                .attr('id', this.gradient_id + "-legend")
+                .selectAll('stop')
+                .data(colorPairing)
+                .enter()
+                .append('stop')
+                .attr('offset', function (_, i) { return i * stopLengthPercentage_1 + "%"; })
+                .attr('class', function (_, i) { return colorPairing[i]; })
+                .attr('stop-color', function (d) { return d; });
+            // Create the legend container
+            var rectangle = DOMUtils.appendOrSelect(legend, 'rect');
+            rectangle
+                .attr('width', barWidth)
+                .attr('height', Configuration.legend.color.barHeight)
+                .style('fill', "url(#" + this.gradient_id + "-legend)");
+            // Create scale & ticks
+            var linearScale = scaleLinear()
+                .domain(domain)
+                .range([0, barWidth]);
+            domain.splice(1, 0, (domain[0] + domain[1]) / 2);
+            var xAxis = axisBottom(linearScale)
+                .tickSize(0)
+                .tickValues(domain);
+            // Align axes at the bottom of the rectangle and delete the domain line
+            axis.attr('transform', "translate(0," + Configuration.legend.color.axisYTranslation + ")").call(xAxis);
+            // Remove domain
+            axis.select('.domain').remove();
+            // Align text to fit in container
+            axis.style('text-anchor', 'start');
+        }
+        else if (colorScaleType === ColorLegendType.QUANTIZE) {
+            // Generate equal chunks between range to act as ticks
+            var interpolator = interpolateRound(domain[0], domain[1]);
+            var quant_1 = quantize(interpolator, colorPairing.length);
+            // If divergent && non-custom color, remove 0/white from being displayed
+            if (!customColorsEnabled && colorScheme === 'diverge') {
+                colorPairing.splice(colorPairing.length / 2, 1);
+            }
+            var colorScaleBand_1 = scaleBand()
+                .domain(colorPairing)
+                .range([0, barWidth]);
+            // Render the quantized rectangles
+            var rectangle = DOMUtils.appendOrSelect(legend, 'g.quantized-rect');
+            rectangle
+                .selectAll('rect')
+                .data(colorScaleBand_1.domain())
+                .join('rect')
+                .attr('x', function (d) { return colorScaleBand_1(d); })
+                .attr('y', 0)
+                .attr('width', Math.max(0, colorScaleBand_1.bandwidth()) - 1)
+                .attr('height', Configuration.legend.color.barHeight)
+                .attr('class', function (d) { return d; })
+                .attr('fill', function (d) { return d; });
+            var xAxis = axisBottom(colorScaleBand_1)
+                .tickSize(0)
+                .tickValues(colorPairing)
+                .tickFormat(function (_, i) {
+                // Display every other tick to create space
+                if (!customColorsEnabled &&
+                    ((i + 1) % 2 === 0 || i === colorPairing.length - 1)) {
+                    return null;
+                }
+                // Use the quant interpolators as ticks
+                return quant_1[i].toString();
+            });
+            // Align axis to match bandwidth start after initial (white)
+            var axisTranslation = colorScaleBand_1.bandwidth() / 2;
+            axis.attr('transform', "translate(" + (!customColorsEnabled && colorScheme === 'diverge' ? '-' : '') + axisTranslation + ", " + Configuration.legend.color.axisYTranslation + ")").call(xAxis);
+            // Append the last tick
+            var firstTick = axis.select('g.tick').clone(true);
+            firstTick
+                .attr('transform', "translate(" + (barWidth +
+                (!customColorsEnabled && colorScheme === 'diverge'
+                    ? axisTranslation
+                    : -axisTranslation)) + ", 0)")
+                .classed('final-tick', true)
+                .select('text')
+                .text(quant_1[quant_1.length - 1]);
+            axis.enter().append(firstTick.node());
+            axis.select('.domain').remove();
+        }
+        else {
+            throw Error('Entered color legend type is not supported.');
+        }
+        // Translate last axis tick if barWidth equals chart width
+        if (width <= Configuration.legend.color.barWidth) {
+            var lastTick = axis.select('g.tick:last-of-type text');
+            var width_1 = DOMUtils.getSVGElementSize(lastTick, {
+                useBBox: true,
+            }).width;
+            lastTick.attr('x', "-" + width_1);
+        }
+    };
+    ColorScaleLegend.prototype.destroy = function () {
+        // Remove legend listeners
+        var eventsFragment = this.services.events;
+        eventsFragment.removeEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+    };
+    return ColorScaleLegend;
+}(Legend));
+export { ColorScaleLegend };
+//# sourceMappingURL=../../../src/components/essentials/color-scale-legend.js.map