@carbon/charts 0.59.0-beta.0 → 1.0.3

package/components/component.js

@@ -0,0 +1,102 @@
+import { DOMUtils } from '../services';
+import { RenderTypes } from '../interfaces';
+import { Tools } from '../tools';
+// D3 Imports
+import { select } from 'd3-selection';
+// import the settings for the css prefix
+import { carbonPrefix } from '../configuration-non-customizable';
+var Component = /** @class */ (function () {
+    function Component(model, services, configs) {
+        this.renderType = RenderTypes.HTML;
+        this.configs = {};
+        this.model = model;
+        this.services = services;
+        if (configs) {
+            this.configs = configs;
+            if (this.configs.id) {
+                var chartprefix = Tools.getProperty(this.model.getOptions(), 'style', 'prefix');
+                this.id = chartprefix + "--" + this.configs.id;
+            }
+        }
+        // Set parent element to shell SVG if no parent exists for component
+        if (!this.parent) {
+            this.setParent(select(this.services.domUtils.getMainContainer()));
+        }
+    }
+    Component.prototype.init = function () {
+        // do nothing.
+    };
+    Component.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        console.error('render() method is not implemented');
+    };
+    Component.prototype.destroy = function () {
+        // do nothing.
+    };
+    // 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(carbonPrefix + "--" + chartprefix + "--" + this.type, true);
+            if (oldParent) {
+                oldParent.classed(carbonPrefix + "--" + chartprefix + "--" + this.type, false);
+            }
+        }
+    };
+    Component.prototype.getParent = function () {
+        return this.parent;
+    };
+    Component.prototype.getComponentContainer = function (configs) {
+        if (configs === void 0) { configs = { withinChartClip: false }; }
+        if (this.type) {
+            var chartprefix = Tools.getProperty(this.model.getOptions(), 'style', 'prefix');
+            var idSelector = this.id ? "#" + this.id : '';
+            var container = DOMUtils.appendOrSelect(this.parent, "" + (this.renderType === RenderTypes.SVG ? 'svg' : 'div') + idSelector + "." + carbonPrefix + "--" + chartprefix + "--" + this.type);
+            if (configs.withinChartClip) {
+                // get unique chartClipId int this chart from model
+                var chartClipId = this.model.get('chartClipId');
+                if (chartClipId) {
+                    var chartClipSelection = select("#" + chartClipId);
+                    var chartClipRectSelection = chartClipSelection.select('rect');
+                    /*
+                     * these checks are needed because of a chrome bug
+                     * related to the rendering of the clip path
+                     */
+                    if (chartClipRectSelection.size() !== 0 &&
+                        parseFloat(chartClipRectSelection.attr('height')) > 0) {
+                        container.attr('clip-path', "url(#" + chartClipId + ")");
+                    }
+                }
+            }
+            return container.attr('width', '100%').attr('height', '100%');
+        }
+        return this.parent;
+    };
+    /**
+     * graphs used in combo charts share a model with global options but can receive their own local options.
+     * this function retrieves the global options and merges it with any options passed into this
+     * component's config.options object.
+     */
+    Component.prototype.getOptions = function () {
+        if (this.configs.options) {
+            var options = Tools.merge({}, this.model.getOptions(), this.configs.options);
+            return options;
+        }
+        return this.model.getOptions();
+    };
+    return Component;
+}());
+export { Component };
+//# sourceMappingURL=../../src/components/component.js.map

package/components/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;IAaC,mBAAY,KAAiB,EAAE,QAAa,EAAE,OAAa;QAXpD,eAAU,GAAG,WAAW,CAAC,IAAI,CAAC;QAM3B,YAAO,GAAQ,EAAE,CAAC;QAM3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,IAAI,OAAO,EAAE;YACZ,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACvB,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE;gBACpB,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;gBACF,IAAI,CAAC,EAAE,GAAM,WAAW,UAAK,IAAI,CAAC,OAAO,CAAC,EAAI,CAAC;aAC/C;SACD;QAED,oEAAoE;QACpE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;SAClE;IACF,CAAC;IAED,wBAAI,GAAJ;QACC,cAAc;IACf,CAAC;IAED,0BAAM,GAAN,UAAO,OAAc;QAAd,wBAAA,EAAA,cAAc;QACpB,OAAO,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAC;IACrD,CAAC;IAED,2BAAO,GAAP;QACC,cAAc;IACf,CAAC;IAED,kDAAkD;IAClD,4BAAQ,GAAR,UAAS,MAAM;QACd,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;IACrB,CAAC;IAED,kDAAkD;IAClD,+BAAW,GAAX,UAAY,MAAM;QACjB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;IACxB,CAAC;IAED,6BAAS,GAAT,UAAU,MAAM;QACf,IAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,IAAI,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,EAAE,EAAE;YACpD,OAAO;SACP;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;YACF,IAAI,CAAC,MAAM,CAAC,OAAO,CACf,YAAY,UAAK,WAAW,UAAK,IAAI,CAAC,IAAM,EAC/C,IAAI,CACJ,CAAC;YAEF,IAAI,SAAS,EAAE;gBACd,SAAS,CAAC,OAAO,CACb,YAAY,UAAK,WAAW,UAAK,IAAI,CAAC,IAAM,EAC/C,KAAK,CACL,CAAC;aACF;SACD;IACF,CAAC;IAED,6BAAS,GAAT;QACC,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAED,yCAAqB,GAArB,UAAsB,OAAoC;QAApC,wBAAA,EAAA,YAAY,eAAe,EAAE,KAAK,EAAE;QACzD,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;YAEF,IAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAI,IAAI,CAAC,EAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAChD,IAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CACxC,IAAI,CAAC,MAAM,EACX,MACC,IAAI,CAAC,UAAU,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IACjD,UAAU,SAAI,YAAY,UAAK,WAAW,UAAK,IAAI,CAAC,IAAM,CAC7D,CAAC;YAEF,IAAI,OAAO,CAAC,eAAe,EAAE;gBAC5B,mDAAmD;gBACnD,IAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBAElD,IAAI,WAAW,EAAE;oBAChB,IAAM,kBAAkB,GAAG,MAAM,CAAC,MAAI,WAAa,CAAC,CAAC;oBACrD,IAAM,sBAAsB,GAAG,kBAAkB,CAAC,MAAM,CACvD,MAAM,CACN,CAAC;oBAEF;;;uBAGG;oBACH,IACC,sBAAsB,CAAC,IAAI,EAAE,KAAK,CAAC;wBACnC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,EACpD;wBACD,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,UAAQ,WAAW,MAAG,CAAC,CAAC;qBACpD;iBACD;aACD;YAED,OAAO,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;SAC9D;QAED,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAED;;;;OAIG;IACH,8BAAU,GAAV;QACC,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACzB,IAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAC1B,EAAE,EACF,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,IAAI,CAAC,OAAO,CAAC,OAAO,CACpB,CAAC;YACF,OAAO,OAAO,CAAC;SACf;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAChC,CAAC;IACF,gBAAC;AAAD,CAAC,AAtJD,IAsJC","sourcesContent":["// Internal Imports\nimport { ChartModel } from '../model/model';\nimport { DOMUtils } from '../services';\nimport { RenderTypes } from '../interfaces';\nimport { Tools } from '../tools';\n\n// D3 Imports\nimport { select } from 'd3-selection';\n\n// import the settings for the css prefix\nimport { carbonPrefix } from '../configuration-non-customizable';\n\nexport class Component {\n\tpublic type: string;\n\tpublic renderType = RenderTypes.HTML;\n\n\tpublic id: string;\n\n\tprotected parent: any;\n\n\tprotected configs: any = {};\n\n\tprotected model: any;\n\tprotected services: any;\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tthis.model = model;\n\t\tthis.services = services;\n\n\t\tif (configs) {\n\t\t\tthis.configs = configs;\n\t\t\tif (this.configs.id) {\n\t\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t'style',\n\t\t\t\t\t'prefix'\n\t\t\t\t);\n\t\t\t\tthis.id = `${chartprefix}--${this.configs.id}`;\n\t\t\t}\n\t\t}\n\n\t\t// Set parent element to shell SVG if no parent exists for component\n\t\tif (!this.parent) {\n\t\t\tthis.setParent(select(this.services.domUtils.getMainContainer()));\n\t\t}\n\t}\n\n\tinit() {\n\t\t// do nothing.\n\t}\n\n\trender(animate = true) {\n\t\tconsole.error('render() method is not implemented');\n\t}\n\n\tdestroy() {\n\t\t// do nothing.\n\t}\n\n\t// Used to pass down information to the components\n\tsetModel(newObj) {\n\t\tthis.model = newObj;\n\t}\n\n\t// Used to pass down information to the components\n\tsetServices(newObj) {\n\t\tthis.services = newObj;\n\t}\n\n\tsetParent(parent) {\n\t\tconst oldParent = this.parent;\n\t\tthis.parent = parent;\n\n\t\tif (oldParent && oldParent.node() === parent.node()) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t'style',\n\t\t\t\t'prefix'\n\t\t\t);\n\t\t\tthis.parent.classed(\n\t\t\t\t`${carbonPrefix}--${chartprefix}--${this.type}`,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\tif (oldParent) {\n\t\t\t\toldParent.classed(\n\t\t\t\t\t`${carbonPrefix}--${chartprefix}--${this.type}`,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tgetParent() {\n\t\treturn this.parent;\n\t}\n\n\tgetComponentContainer(configs = { withinChartClip: false }) {\n\t\tif (this.type) {\n\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t'style',\n\t\t\t\t'prefix'\n\t\t\t);\n\n\t\t\tconst idSelector = this.id ? `#${this.id}` : '';\n\t\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\t\tthis.parent,\n\t\t\t\t`${\n\t\t\t\t\tthis.renderType === RenderTypes.SVG ? 'svg' : 'div'\n\t\t\t\t}${idSelector}.${carbonPrefix}--${chartprefix}--${this.type}`\n\t\t\t);\n\n\t\t\tif (configs.withinChartClip) {\n\t\t\t\t// get unique chartClipId int this chart from model\n\t\t\t\tconst chartClipId = this.model.get('chartClipId');\n\n\t\t\t\tif (chartClipId) {\n\t\t\t\t\tconst chartClipSelection = select(`#${chartClipId}`);\n\t\t\t\t\tconst chartClipRectSelection = chartClipSelection.select(\n\t\t\t\t\t\t'rect'\n\t\t\t\t\t);\n\n\t\t\t\t\t/*\n\t\t\t\t\t * these checks are needed because of a chrome bug\n\t\t\t\t\t * related to the rendering of the clip path\n\t\t\t\t\t */\n\t\t\t\t\tif (\n\t\t\t\t\t\tchartClipRectSelection.size() !== 0 &&\n\t\t\t\t\t\tparseFloat(chartClipRectSelection.attr('height')) > 0\n\t\t\t\t\t) {\n\t\t\t\t\t\tcontainer.attr('clip-path', `url(#${chartClipId})`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn container.attr('width', '100%').attr('height', '100%');\n\t\t}\n\n\t\treturn this.parent;\n\t}\n\n\t/**\n\t * graphs used in combo charts share a model with global options but can receive their own local options.\n\t * this function retrieves the global options and merges it with any options passed into this\n\t * component's config.options object.\n\t */\n\tgetOptions() {\n\t\tif (this.configs.options) {\n\t\t\tconst options = Tools.merge(\n\t\t\t\t{},\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\tthis.configs.options\n\t\t\t);\n\t\t\treturn options;\n\t\t}\n\t\treturn this.model.getOptions();\n\t}\n}\n"]}

package/components/essentials/modal.js

@@ -0,0 +1,89 @@
+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 { DOMUtils } from '../../services';
+import { Events } from '../../interfaces';
+// Carbon modal
+import { Modal as CarbonModalComponent } from 'carbon-components';
+// import the settings for the css prefix
+import { carbonPrefix } from '../../configuration-non-customizable';
+// D3 Imports
+import { select } from 'd3-selection';
+import { get } from 'lodash-es';
+var Modal = /** @class */ (function (_super) {
+    __extends(Modal, _super);
+    function Modal(model, services, configs) {
+        var _this = _super.call(this, model, services, configs) || this;
+        _this.type = 'modal';
+        // flag for checking whether tooltip event listener is added or not
+        _this.isEventListenerAdded = false;
+        _this.handleShowModal = function () {
+            _this.modal.html(_this.getModalHTML());
+            _this.modal
+                .select('div.cds--modal-footer button.cds--btn')
+                .on('click', function () { return _this.model.exportToCSV(); });
+            var modalInstance = CarbonModalComponent.create(_this.modal.node());
+            modalInstance.show();
+        };
+        _this.init();
+        return _this;
+    }
+    Modal.prototype.addEventListeners = function () {
+        // listen to show-modal Custom Events to render the modal
+        this.services.events.addEventListener(Events.Modal.SHOW, this.handleShowModal);
+    };
+    Modal.prototype.removeEventListeners = function () {
+        // remove show-modal Custom Events
+        this.services.events.removeEventListener(Events.Modal.SHOW, this.handleShowModal);
+    };
+    Modal.prototype.getModalHTML = function () {
+        var options = this.model.getOptions();
+        var chartprefix = Tools.getProperty(options, 'style', 'prefix');
+        var tableArray = this.model.getTabularDataArray();
+        return "\n\t\t<div class=\"cds--modal-container cds--modal-container\">\n\t\t\t<div class=\"cds--modal-header cds--modal-header\">\n\t\t\t\t<p class=\"cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta\" id=\"modal-title\">Tabular representation</p>\n\n\t\t\t\t<p class=\"cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta\" id=\"modal-description\">" + options.title + "</p>\n\n\t\t\t\t<button class=\"cds--modal-close cds--modal-close\" type=\"button\" data-modal-close aria-label=\"close modal\"  data-modal-primary-focus>\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Close\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\" class=\"cds--modal-close__icon cds--modal-close__icon\">\n\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--modal-content cds--modal-content\">\n\t\t\t\t<table class=\"cds--data-table cds--data-table--no-border cds--data-table cds--data-table--no-border\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t" + get(tableArray, 0)
+            .map(function (heading) { return "<th scope=\"col\">\n\t\t\t\t\t\t\t\t<div class=\"cds--table-header-label cds--table-header-label\">" + heading + "</div>\n\t\t\t\t\t\t\t</th>"; })
+            .join('') + "\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\n\t\t\t\t\t<tbody>" + tableArray
+            .slice(1)
+            .map(function (row) { return "\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t" + row.map(function (column) { return "<td>" + column + "</td>"; }).join('') + "\n\t\t\t\t\t\t\t</tr>"; })
+            .join('') + "\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--modal-footer cds--modal-footer\">\n\t\t\t  <div class=\"" + carbonPrefix + "--" + chartprefix + "-modal-footer-spacer\"></div>\n\t\t\t  <button class=\"cds--btn cds--btn--primary cds--btn cds--btn--primary\" type=\"button\" data-modal-primary-focus>Download as CSV</button>\n\t\t\t</div>\n\t\t</div>";
+    };
+    Modal.prototype.render = function () {
+        var options = this.model.getOptions();
+        if (!this.isEventListenerAdded) {
+            // Grab the tooltip element
+            var holder = select(this.services.domUtils.getHolder());
+            var chartprefix = Tools.getProperty(options, 'style', 'prefix');
+            this.modal = DOMUtils.appendOrSelect(holder, "div." + carbonPrefix + "--" + chartprefix + "--modal");
+            this.addEventListeners();
+            this.isEventListenerAdded = true;
+            this.modal
+                .attr('data-modal', true)
+                .attr('class', 'cds--modal cds--modal')
+                .attr('role', 'dialog')
+                .attr('aria-modal', true)
+                .attr('aria-labelledby', 'modal-title')
+                .attr('aria-describedby', 'modal-description')
+                .attr('tabindex', -1);
+        }
+    };
+    Modal.prototype.destroy = function () {
+        // remove tooltip eventListener
+        this.removeEventListeners();
+        this.isEventListenerAdded = false;
+    };
+    return Modal;
+}(Component));
+export { Modal };
+//# sourceMappingURL=../../../src/components/essentials/modal.js.map

package/components/essentials/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '../component';\nimport { Tools } from '../../tools';\nimport { DOMUtils } from '../../services';\nimport { ChartModel } from '../../model/model';\nimport { Events } from '../../interfaces';\n\n// Carbon modal\nimport { Modal as CarbonModalComponent } from 'carbon-components';\n\n// import the settings for the css prefix\nimport { carbonPrefix } from '../../configuration-non-customizable';\n\n// D3 Imports\nimport { select } from 'd3-selection';\n\nimport { get } from 'lodash-es';\n\nexport class Modal extends Component {\n\ttype = 'modal';\n\n\t// flag for checking whether tooltip event listener is added or not\n\tisEventListenerAdded = false;\n\tmodal: any;\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tsuper(model, services, configs);\n\n\t\tthis.init();\n\t}\n\n\thandleShowModal = () => {\n\t\tthis.modal.html(this.getModalHTML());\n\t\tthis.modal\n\t\t\t.select('div.cds--modal-footer button.cds--btn')\n\t\t\t.on('click', () => this.model.exportToCSV());\n\n\t\tconst modalInstance = CarbonModalComponent.create(this.modal.node());\n\t\tmodalInstance.show();\n\t};\n\n\taddEventListeners() {\n\t\t// listen to show-modal Custom Events to render the modal\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Modal.SHOW,\n\t\t\tthis.handleShowModal\n\t\t);\n\t}\n\n\tremoveEventListeners() {\n\t\t// remove show-modal Custom Events\n\t\tthis.services.events.removeEventListener(\n\t\t\tEvents.Modal.SHOW,\n\t\t\tthis.handleShowModal\n\t\t);\n\t}\n\n\tgetModalHTML() {\n\t\tconst options = this.model.getOptions();\n\n\t\tconst chartprefix = Tools.getProperty(options, 'style', 'prefix');\n\n\t\tconst tableArray = this.model.getTabularDataArray();\n\n\t\treturn `\n\t\t<div class=\"cds--modal-container cds--modal-container\">\n\t\t\t<div class=\"cds--modal-header cds--modal-header\">\n\t\t\t\t<p class=\"cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta\" id=\"modal-title\">Tabular representation</p>\n\n\t\t\t\t<p class=\"cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta\" id=\"modal-description\">${\n\t\t\t\t\toptions.title\n\t\t\t\t}</p>\n\n\t\t\t\t<button class=\"cds--modal-close cds--modal-close\" type=\"button\" data-modal-close aria-label=\"close modal\"  data-modal-primary-focus>\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Close\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\" class=\"cds--modal-close__icon cds--modal-close__icon\">\n\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--modal-content cds--modal-content\">\n\t\t\t\t<table class=\"cds--data-table cds--data-table--no-border cds--data-table cds--data-table--no-border\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t${get(tableArray, 0)\n\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t(heading) => `<th scope=\"col\">\n\t\t\t\t\t\t\t\t<div class=\"cds--table-header-label cds--table-header-label\">${heading}</div>\n\t\t\t\t\t\t\t</th>`\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t.join('')}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\n\t\t\t\t\t<tbody>${tableArray\n\t\t\t\t\t\t.slice(1)\n\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t(row) => `\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t${row.map((column) => `<td>${column}</td>`).join('')}\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.join('')}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--modal-footer cds--modal-footer\">\n\t\t\t  <div class=\"${carbonPrefix}--${chartprefix}-modal-footer-spacer\"></div>\n\t\t\t  <button class=\"cds--btn cds--btn--primary cds--btn cds--btn--primary\" type=\"button\" data-modal-primary-focus>Download as CSV</button>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n\n\trender() {\n\t\tconst options = this.model.getOptions();\n\t\tif (!this.isEventListenerAdded) {\n\t\t\t// Grab the tooltip element\n\t\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\t\tconst chartprefix = Tools.getProperty(options, 'style', 'prefix');\n\t\t\tthis.modal = DOMUtils.appendOrSelect(\n\t\t\t\tholder,\n\t\t\t\t`div.${carbonPrefix}--${chartprefix}--modal`\n\t\t\t);\n\n\t\t\tthis.addEventListeners();\n\t\t\tthis.isEventListenerAdded = true;\n\t\t\tthis.modal\n\t\t\t\t.attr('data-modal', true)\n\t\t\t\t.attr('class', 'cds--modal cds--modal')\n\t\t\t\t.attr('role', 'dialog')\n\t\t\t\t.attr('aria-modal', true)\n\t\t\t\t.attr('aria-labelledby', 'modal-title')\n\t\t\t\t.attr('aria-describedby', 'modal-description')\n\t\t\t\t.attr('tabindex', -1);\n\t\t}\n\t}\n\n\tdestroy() {\n\t\t// remove tooltip eventListener\n\t\tthis.removeEventListeners();\n\t\tthis.isEventListenerAdded = false;\n\t}\n}\n"]}

package/components/essentials/threshold.js

@@ -0,0 +1,304 @@
+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 { DOMUtils } from '../../services';
+import { AxisPositions, Events, RenderTypes, ScaleTypes, } from '../../interfaces';
+// D3 Imports
+// @ts-ignore
+// ts-ignore is needed because `@types/d3`
+// is missing the `pointer` function
+import { select, pointer } from 'd3-selection';
+// Carbon position service
+import Position, { PLACEMENTS } from '@carbon/utils-position';
+// import the settings for the css prefix
+import { carbonPrefix } from '../../configuration-non-customizable';
+import { formatTick, computeTimeIntervalName, } from '../../services/time-series';
+var Threshold = /** @class */ (function (_super) {
+    __extends(Threshold, _super);
+    function Threshold(model, services) {
+        var _this = _super.call(this, model, services) || this;
+        _this.type = 'threshold';
+        _this.renderType = RenderTypes.SVG;
+        _this.positionService = new Position();
+        return _this;
+    }
+    Threshold.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = false; }
+        var axesOptions = Tools.getProperty(this.getOptions(), 'axes');
+        var thresholdData = [];
+        Object.keys(axesOptions).forEach(function (axisPosition) {
+            var _a, _b;
+            if (Object.values(AxisPositions).includes(axisPosition)) {
+                var axisOptions = axesOptions[axisPosition];
+                if (axisOptions.thresholds &&
+                    axisOptions.thresholds.length > 0) {
+                    thresholdData.push({
+                        axisPosition: axisPosition,
+                        thresholds: axisOptions.thresholds,
+                        correspondingDatasets: (_a = axisOptions) === null || _a === void 0 ? void 0 : _a.correspondingDatasets,
+                        mapsTo: (_b = axisOptions) === null || _b === void 0 ? void 0 : _b.mapsTo,
+                    });
+                }
+            }
+        });
+        // Grab container SVG
+        var svg = this.getComponentContainer({ withinChartClip: true });
+        // Update data on all axis threshold groups
+        var thresholdAxisGroups = svg
+            .selectAll('g.axis-thresholds')
+            .data(thresholdData, function (thresholdData) { return thresholdData.axisPosition; });
+        // Remove axis threshold groups that are no longer needed
+        thresholdAxisGroups.exit().attr('opacity', 0).remove();
+        // Add the axis threshold groups that need to be introduced
+        var thresholdAxisGroupsEnter = thresholdAxisGroups
+            .enter()
+            .append('g');
+        var thresholdAxisGroupsMerge = thresholdAxisGroupsEnter.merge(thresholdAxisGroups);
+        thresholdAxisGroupsMerge.attr('class', function (d) { return "axis-thresholds " + d.axisPosition; });
+        var thresholdGroups = thresholdAxisGroupsMerge
+            .selectAll('g.threshold-group')
+            .data(function (d) {
+            return d.thresholds.map(function (threshold) {
+                // Merge relevant keys into the threshold object
+                threshold.axisPosition = d.axisPosition;
+                threshold.datum = _this.constructDatumObj(d, threshold);
+                return threshold;
+            });
+        });
+        // Remove threshold groups that are no longer needed
+        thresholdGroups.exit().attr('opacity', 0).remove();
+        // Add the threshold groups that need to be introduced
+        var thresholdGroupsEnter = thresholdGroups.enter().append('g');
+        thresholdGroupsEnter.append('line').attr('class', 'threshold-line');
+        thresholdGroupsEnter
+            .append('rect')
+            .attr('class', 'threshold-hoverable-area');
+        var thresholdGroupsMerge = thresholdGroupsEnter.merge(thresholdGroups);
+        thresholdGroupsMerge.attr('class', 'threshold-group');
+        var self = this;
+        thresholdAxisGroupsMerge.each(function (_a) {
+            var axisPosition = _a.axisPosition;
+            var scale = self.services.cartesianScales.getScaleByPosition(axisPosition);
+            var scaleType = self.services.cartesianScales.getScaleTypeByPosition(axisPosition);
+            var xScale = null;
+            var yScale = null;
+            // Depending on type of axis position, assign scale and main perpendicular axis
+            if (axisPosition === AxisPositions.LEFT ||
+                axisPosition === AxisPositions.RIGHT) {
+                yScale = scale;
+                xScale = self.services.cartesianScales.getMainXScale();
+            }
+            else {
+                xScale = scale;
+                yScale = self.services.cartesianScales.getMainYScale();
+            }
+            var isScaleTypeLabels = scaleType === ScaleTypes.LABELS;
+            var _b = xScale.range(), xScaleStart = _b[0], xScaleEnd = _b[1];
+            var _c = yScale.range(), yScaleEnd = _c[0], yScaleStart = _c[1];
+            var cartesianScales = self.services.cartesianScales;
+            var orientation = cartesianScales.getOrientation();
+            var getDomainValue = function (d) { return cartesianScales.getDomainValue(d); };
+            var getRangeValue = function (d) { return cartesianScales.getRangeValue(d); };
+            var _d = Tools.flipDomainAndRangeBasedOnOrientation(getDomainValue, getRangeValue, orientation), getXValue = _d[0], getYValue = _d[1];
+            var group = select(this);
+            if (axisPosition === AxisPositions.TOP ||
+                axisPosition === AxisPositions.BOTTOM) {
+                group
+                    .selectAll('line.threshold-line')
+                    .transition()
+                    .call(function (t) {
+                    return self.services.transitions.setupTransition({
+                        transition: t,
+                        name: 'threshold-line-update',
+                        animate: animate,
+                    });
+                })
+                    .attr('y1', yScaleStart)
+                    .attr('y2', yScaleEnd)
+                    .attr('x1', function (_a) {
+                    var datum = _a.datum;
+                    return getXValue(datum) +
+                        (isScaleTypeLabels ? scale.step() / 2 : 0);
+                })
+                    .attr('x2', function (_a) {
+                    var datum = _a.datum;
+                    return getXValue(datum) +
+                        (isScaleTypeLabels ? scale.step() / 2 : 0);
+                })
+                    .style('stroke', function (_a) {
+                    var fillColor = _a.fillColor;
+                    return fillColor;
+                });
+                // Set hoverable area width and rotate it
+                group
+                    .selectAll('rect.threshold-hoverable-area')
+                    .attr('x', 0)
+                    .attr('y', function (_a) {
+                    var datum = _a.datum;
+                    return -getXValue(datum);
+                })
+                    .attr('width', Math.abs(yScaleEnd - yScaleStart))
+                    .classed('rotate', true);
+            }
+            else {
+                group
+                    .selectAll('line.threshold-line')
+                    .transition()
+                    .call(function (t) {
+                    return self.services.transitions.setupTransition({
+                        transition: t,
+                        name: 'threshold-line-update',
+                        animate: animate,
+                    });
+                })
+                    .attr('x1', xScaleStart)
+                    .attr('x2', xScaleEnd)
+                    .attr('y1', function (_a) {
+                    var datum = _a.datum;
+                    return getYValue(datum) +
+                        (isScaleTypeLabels ? scale.step() / 2 : 0);
+                })
+                    .attr('y2', function (_a) {
+                    var datum = _a.datum;
+                    return getYValue(datum) +
+                        (isScaleTypeLabels ? scale.step() / 2 : 0);
+                })
+                    .style('stroke', function (_a) {
+                    var fillColor = _a.fillColor;
+                    return fillColor;
+                });
+                // Set hoverable area width
+                group
+                    .selectAll('rect.threshold-hoverable-area')
+                    .attr('x', xScaleStart)
+                    .attr('y', function (_a) {
+                    var datum = _a.datum;
+                    return getYValue(datum);
+                })
+                    .attr('width', Math.abs(xScaleEnd - xScaleStart))
+                    .classed('rotate', false);
+            }
+        });
+        // Add event listener for showing the threshold tooltip
+        this.services.events.addEventListener(Events.Threshold.SHOW, function (e) {
+            _this.setThresholdLabelPosition(e.detail);
+            _this.label.classed('hidden', false);
+        });
+        // Add event listener for hiding the threshold tooltip
+        this.services.events.addEventListener(Events.Threshold.HIDE, function (e) {
+            _this.label.classed('hidden', true);
+        });
+        this.appendThresholdLabel();
+        this.addEventListeners();
+    };
+    Threshold.prototype.getFormattedValue = function (datum) {
+        var value = datum.value, axisPosition = datum.axisPosition;
+        var options = this.getOptions();
+        var scaleType = this.services.cartesianScales.getScaleTypeByPosition(axisPosition);
+        // If scale is time, format the threshold date as the ticks format
+        if (scaleType === ScaleTypes.TIME) {
+            var isVertical = [
+                AxisPositions.LEFT,
+                AxisPositions.RIGHT,
+            ].includes(axisPosition);
+            var mainXScale = this.services.cartesianScales.getMainXScale();
+            var mainYScale = this.services.cartesianScales.getMainYScale();
+            var scale = isVertical ? mainYScale : mainXScale;
+            var timeScaleOptions = Tools.getProperty(options, 'timeScale');
+            var timeInterval = computeTimeIntervalName(scale.ticks());
+            return formatTick(value, 0, scale.ticks(), timeInterval, timeScaleOptions);
+        }
+        return value.toLocaleString('en');
+    };
+    Threshold.prototype.appendThresholdLabel = function () {
+        var holder = select(this.services.domUtils.getHolder());
+        var chartprefix = Tools.getProperty(this.getOptions(), 'style', 'prefix');
+        this.label = DOMUtils.appendOrSelect(holder, "div." + carbonPrefix + "--" + chartprefix + "--threshold--label").classed('hidden', true);
+    };
+    Threshold.prototype.setThresholdLabelPosition = function (_a) {
+        var event = _a.event, datum = _a.datum;
+        var holder = this.services.domUtils.getHolder();
+        var mouseRelativePos = pointer(event, holder);
+        // Format the threshold value using valueFormatter if defined in user-provided options
+        var formattedValue = datum.valueFormatter
+            ? datum.valueFormatter(datum.value)
+            : this.getFormattedValue(datum);
+        this.label
+            .html((datum.label || 'Threshold') + ": " + formattedValue)
+            .style('background-color', datum.fillColor);
+        var target = this.label.node();
+        // Find out whether threshold label should be shown on the left or right side
+        var bestPlacementOption = this.positionService.findBestPlacementAt({
+            left: mouseRelativePos[0],
+            top: mouseRelativePos[1],
+        }, target, [
+            PLACEMENTS.RIGHT,
+            PLACEMENTS.LEFT,
+            PLACEMENTS.TOP,
+            PLACEMENTS.BOTTOM,
+        ], function () { return ({
+            width: holder.offsetWidth,
+            height: holder.offsetHeight,
+        }); });
+        // Get coordinates to where label should be positioned
+        var pos = this.positionService.findPositionAt({
+            left: mouseRelativePos[0],
+            top: mouseRelativePos[1],
+        }, target, bestPlacementOption);
+        this.positionService.setElement(target, pos);
+    };
+    // Constructs object to pass in scale functions
+    Threshold.prototype.constructDatumObj = function (d, element) {
+        var datum = {};
+        // We only need to specify group only if correpsonding dataset is defined
+        if (d.correspondingDatasets) {
+            datum['group'] = Tools.getProperty(d, 'correspondingDatasets', 0);
+        }
+        // Add attribute with the mapsTo value as key
+        datum[d['mapsTo']] = element.value;
+        return datum;
+    };
+    Threshold.prototype.addEventListeners = function () {
+        var self = this;
+        // Grab container SVG
+        var svg = this.getComponentContainer({ withinChartClip: true });
+        // Add events to the threshold hoverable area
+        svg.selectAll('rect.threshold-hoverable-area')
+            .on('mouseover mousemove', function (event) {
+            select(this.parentNode)
+                .select('line.threshold-line')
+                .classed('active', true);
+            self.services.events.dispatchEvent(Events.Threshold.SHOW, {
+                event: event,
+                hoveredElement: select(this),
+                datum: select(this).datum(),
+            });
+        })
+            .on('mouseout', function (event) {
+            select(this.parentNode)
+                .select('line.threshold-line')
+                .classed('active', false);
+            self.services.events.dispatchEvent(Events.Threshold.HIDE, {
+                event: event,
+                hoveredElement: select(this),
+                datum: select(this).datum(),
+            });
+        });
+    };
+    return Threshold;
+}(Component));
+export { Threshold };
+//# sourceMappingURL=../../../src/components/essentials/threshold.js.map