@carbon/charts 1.7.6 → 1.9.0-next.0

package/services/canvas-zoom.js

@@ -1,72 +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 { Service } from './service';
-import { Events } from './../interfaces/enums';
-import * as Configuration from '../configuration';
-// Services
-import { DOMUtils } from './essentials/dom-utils';
-import { select } from 'd3-selection';
-var CanvasZoom = /** @class */ (function (_super) {
-    __extends(CanvasZoom, _super);
-    function CanvasZoom() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * focal:  object to zoom into
-     * canvasElements: all the elements to translate and zoom on the chart area
-     * zoomSettings: object containing duration, easing and zoomlevel for the zoom behaviours
-     *  */
-    CanvasZoom.prototype.zoomIn = function (focal, canvasElements, zoomSettings) {
-        var x;
-        var y;
-        var zoomLevel;
-        var settings = zoomSettings
-            ? zoomSettings
-            : Configuration.canvasZoomSettings;
-        if (focal) {
-            x = focal.x;
-            y = focal.y;
-            zoomLevel = 2;
-        }
-        // the 'viewport' size of the chart
-        var _a = DOMUtils.getSVGElementSize(this.services.domUtils.getHolder(), {
-            useClientDimensions: true,
-        }), width = _a.width, height = _a.height;
-        canvasElements
-            .transition()
-            .duration(settings.duration)
-            .ease(settings.ease)
-            .attr('transform', "translate(" + width / 2 + ", " + height / 2 + ") scale(" + zoomLevel + ") translate(" + -x + "," + -y + ")");
-        // Dispatch canvas zoom in event
-        this.services.events.dispatchEvent(Events.CanvasZoom.CANVAS_ZOOM_IN, {
-            element: select(focal),
-        });
-    };
-    CanvasZoom.prototype.zoomOut = function (canvasElements, zoomSettings) {
-        var settings = zoomSettings
-            ? zoomSettings
-            : Configuration.canvasZoomSettings;
-        canvasElements
-            .transition()
-            .duration(settings.duration)
-            .ease(settings.ease)
-            .attr('transform', '');
-        // Dispatch canvas zoom out event
-        this.services.events.dispatchEvent(Events.CanvasZoom.CANVAS_ZOOM_OUT);
-    };
-    return CanvasZoom;
-}(Service));
-export { CanvasZoom };
-//# sourceMappingURL=../../src/services/canvas-zoom.js.map

package/services/canvas-zoom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas-zoom.js","sourceRoot":"","sources":["canvas-zoom.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAClD,WAAW;AACX,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC;IAAgC,8BAAO;IAAvC;;IA4DA,CAAC;IAzDA;;;;UAIM;IACN,2BAAM,GAAN,UAAO,KAAK,EAAE,cAAc,EAAE,YAAa;QAC1C,IAAI,CAAC,CAAC;QACN,IAAI,CAAC,CAAC;QACN,IAAI,SAAS,CAAC;QACd,IAAM,QAAQ,GAAG,YAAY;YAC5B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAEpC,IAAI,KAAK,EAAE;YACV,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YACZ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YACZ,SAAS,GAAG,CAAC,CAAC;SACd;QAED,mCAAmC;QAC7B,IAAA;;UAKL,EALO,gBAAK,EAAE,kBAKd,CAAC;QAEF,cAAc;aACZ,UAAU,EAAE;aACZ,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;aAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;aACnB,IAAI,CACJ,WAAW,EACX,eAAa,KAAK,GAAG,CAAC,UACrB,MAAM,GAAG,CAAC,gBACA,SAAS,oBAAe,CAAC,CAAC,SAAI,CAAC,CAAC,MAAG,CAC9C,CAAC;QAEH,gCAAgC;QAChC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE;YACpE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC;SACtB,CAAC,CAAC;IACJ,CAAC;IAED,4BAAO,GAAP,UAAQ,cAAc,EAAE,YAAa;QACpC,IAAM,QAAQ,GAAG,YAAY;YAC5B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,aAAa,CAAC,kBAAkB,CAAC;QACpC,cAAc;aACZ,UAAU,EAAE;aACZ,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;aAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;aACnB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QAExB,iCAAiC;QACjC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACvE,CAAC;IACF,iBAAC;AAAD,CAAC,AA5DD,CAAgC,OAAO,GA4DtC","sourcesContent":["// Internal Imports\nimport { Service } from './service';\nimport { Events } from './../interfaces/enums';\nimport * as Configuration from '../configuration';\n// Services\nimport { DOMUtils } from './essentials/dom-utils';\nimport { select } from 'd3-selection';\n\nexport class CanvasZoom extends Service {\n\tprotected model: any;\n\n\t/**\n\t * focal:  object to zoom into\n\t * canvasElements: all the elements to translate and zoom on the chart area\n\t * zoomSettings: object containing duration, easing and zoomlevel for the zoom behaviours\n\t *  */\n\tzoomIn(focal, canvasElements, zoomSettings?) {\n\t\tlet x;\n\t\tlet y;\n\t\tlet zoomLevel;\n\t\tconst settings = zoomSettings\n\t\t\t? zoomSettings\n\t\t\t: Configuration.canvasZoomSettings;\n\n\t\tif (focal) {\n\t\t\tx = focal.x;\n\t\t\ty = focal.y;\n\t\t\tzoomLevel = 2;\n\t\t}\n\n\t\t// the 'viewport' size of the chart\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(\n\t\t\tthis.services.domUtils.getHolder(),\n\t\t\t{\n\t\t\t\tuseClientDimensions: true,\n\t\t\t}\n\t\t);\n\n\t\tcanvasElements\n\t\t\t.transition()\n\t\t\t.duration(settings.duration)\n\t\t\t.ease(settings.ease)\n\t\t\t.attr(\n\t\t\t\t'transform',\n\t\t\t\t`translate(${width / 2}, ${\n\t\t\t\t\theight / 2\n\t\t\t\t}) scale(${zoomLevel}) translate(${-x},${-y})`\n\t\t\t);\n\n\t\t// Dispatch canvas zoom in event\n\t\tthis.services.events.dispatchEvent(Events.CanvasZoom.CANVAS_ZOOM_IN, {\n\t\t\telement: select(focal),\n\t\t});\n\t}\n\n\tzoomOut(canvasElements, zoomSettings?) {\n\t\tconst settings = zoomSettings\n\t\t\t? zoomSettings\n\t\t\t: Configuration.canvasZoomSettings;\n\t\tcanvasElements\n\t\t\t.transition()\n\t\t\t.duration(settings.duration)\n\t\t\t.ease(settings.ease)\n\t\t\t.attr('transform', '');\n\n\t\t// Dispatch canvas zoom out event\n\t\tthis.services.events.dispatchEvent(Events.CanvasZoom.CANVAS_ZOOM_OUT);\n\t}\n}\n"]}

package/services/curves.d.ts

@@ -1,25 +0,0 @@
-import { CurveBundleFactory, CurveCardinalFactory, CurveCatmullRomFactory } from 'd3-shape';
-import { Service } from './service';
-export declare class Curves extends Service {
-    curveTypes: {
-        curveLinear: import("d3-shape").CurveFactory;
-        curveLinearClosed: import("d3-shape").CurveFactory;
-        curveBasis: import("d3-shape").CurveFactory;
-        curveBasisClosed: import("d3-shape").CurveFactory;
-        curveBasisOpen: import("d3-shape").CurveFactory;
-        curveBundle: CurveBundleFactory;
-        curveCardinal: CurveCardinalFactory;
-        curveCardinalClosed: CurveCardinalFactory;
-        curveCardinalOpen: CurveCardinalFactory;
-        curveCatmullRom: CurveCatmullRomFactory;
-        curveCatmullRomClosed: CurveCatmullRomFactory;
-        curveCatmullRomOpen: CurveCatmullRomFactory;
-        curveMonotoneX: import("d3-shape").CurveFactory;
-        curveMonotoneY: import("d3-shape").CurveFactory;
-        curveNatural: import("d3-shape").CurveFactory;
-        curveStep: import("d3-shape").CurveFactory;
-        curveStepAfter: import("d3-shape").CurveFactory;
-        curveStepBefore: import("d3-shape").CurveFactory;
-    };
-    getD3Curve(): any;
-}

package/services/curves.js

@@ -1,77 +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 { curveBasis, curveBasisClosed, curveBasisOpen, curveBundle, curveCardinal, curveCardinalClosed, curveCardinalOpen, curveCatmullRom, curveCatmullRomClosed, curveCatmullRomOpen, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, } from 'd3-shape';
-// Internal Imports
-import { Service } from './service';
-var Curves = /** @class */ (function (_super) {
-    __extends(Curves, _super);
-    function Curves() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.curveTypes = {
-            curveLinear: curveLinear,
-            curveLinearClosed: curveLinearClosed,
-            curveBasis: curveBasis,
-            curveBasisClosed: curveBasisClosed,
-            curveBasisOpen: curveBasisOpen,
-            curveBundle: curveBundle,
-            curveCardinal: curveCardinal,
-            curveCardinalClosed: curveCardinalClosed,
-            curveCardinalOpen: curveCardinalOpen,
-            curveCatmullRom: curveCatmullRom,
-            curveCatmullRomClosed: curveCatmullRomClosed,
-            curveCatmullRomOpen: curveCatmullRomOpen,
-            curveMonotoneX: curveMonotoneX,
-            curveMonotoneY: curveMonotoneY,
-            curveNatural: curveNatural,
-            curveStep: curveStep,
-            curveStepAfter: curveStepAfter,
-            curveStepBefore: curveStepBefore,
-        };
-        return _this;
-    }
-    Curves.prototype.getD3Curve = function () {
-        var curveName = 'curveLinear';
-        var curveOptions = this.model.getOptions().curve;
-        // Parse curve type whether the user provided a string
-        // Or an object with more options
-        if (curveOptions) {
-            if (typeof curveOptions === 'string') {
-                // curve: 'string'
-                curveName = curveOptions;
-            }
-            else {
-                // curve: { name: 'string' }
-                curveName = curveOptions.name;
-            }
-        }
-        if (this.curveTypes[curveName]) {
-            // Grab correct d3 curve function
-            var curve_1 = this.curveTypes[curveName];
-            // Apply user-provided options to the d3 curve
-            if (curveOptions) {
-                Object.keys(curveOptions).forEach(function (optionName) {
-                    if (curve_1[optionName]) {
-                        curve_1 = curve_1[optionName](curveOptions[optionName]);
-                    }
-                });
-            }
-            return curve_1;
-        }
-        console.warn("The curve type '" + curveName + "' is invalid, using 'curveLinear' instead");
-        return this.curveTypes['curveLinear'];
-    };
-    return Curves;
-}(Service));
-export { Curves };
-//# sourceMappingURL=../../src/services/curves.js.map

package/services/curves.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"curves.js","sourceRoot":"","sources":["curves.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EACN,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,YAAY,EACZ,SAAS,EACT,cAAc,EACd,eAAe,GAMf,MAAM,UAAU,CAAC;AAKlB,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;IAA4B,0BAAO;IAAnC;QAAA,qEA2DC;QA1DA,gBAAU,GAAG;YACZ,WAAW,aAAA;YACX,iBAAiB,mBAAA;YACjB,UAAU,YAAA;YACV,gBAAgB,kBAAA;YAChB,cAAc,gBAAA;YACd,WAAW,aAAA;YACX,aAAa,eAAA;YACb,mBAAmB,qBAAA;YACnB,iBAAiB,mBAAA;YACjB,eAAe,iBAAA;YACf,qBAAqB,uBAAA;YACrB,mBAAmB,qBAAA;YACnB,cAAc,gBAAA;YACd,cAAc,gBAAA;YACd,YAAY,cAAA;YACZ,SAAS,WAAA;YACT,cAAc,gBAAA;YACd,eAAe,iBAAA;SACf,CAAC;;IAuCH,CAAC;IArCA,2BAAU,GAAV;QACC,IAAI,SAAS,GAAG,aAAa,CAAC;QAC9B,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC;QAEnD,sDAAsD;QACtD,iCAAiC;QACjC,IAAI,YAAY,EAAE;YACjB,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;gBACrC,kBAAkB;gBAClB,SAAS,GAAG,YAAY,CAAC;aACzB;iBAAM;gBACN,4BAA4B;gBAC5B,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC;aAC9B;SACD;QAED,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;YAC/B,iCAAiC;YACjC,IAAI,OAAK,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;YAEvC,8CAA8C;YAC9C,IAAI,YAAY,EAAE;gBACjB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,UAAC,UAAU;oBAC5C,IAAI,OAAK,CAAC,UAAU,CAAC,EAAE;wBACtB,OAAK,GAAG,OAAK,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;qBACpD;gBACF,CAAC,CAAC,CAAC;aACH;YAED,OAAO,OAAK,CAAC;SACb;QAED,OAAO,CAAC,IAAI,CACX,qBAAmB,SAAS,8CAA2C,CACvE,CAAC;QACF,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IACF,aAAC;AAAD,CAAC,AA3DD,CAA4B,OAAO,GA2DlC","sourcesContent":["import {\n\tcurveBasis,\n\tcurveBasisClosed,\n\tcurveBasisOpen,\n\tcurveBundle,\n\tcurveCardinal,\n\tcurveCardinalClosed,\n\tcurveCardinalOpen,\n\tcurveCatmullRom,\n\tcurveCatmullRomClosed,\n\tcurveCatmullRomOpen,\n\tcurveLinear,\n\tcurveLinearClosed,\n\tcurveMonotoneX,\n\tcurveMonotoneY,\n\tcurveNatural,\n\tcurveStep,\n\tcurveStepAfter,\n\tcurveStepBefore,\n\t// the imports below are needed because of typescript bug (error TS4029)\n\tCurveBundleFactory,\n\tCurveCardinalFactory,\n\tCurveCatmullRomFactory,\n\tCurveGenerator,\n} from 'd3-shape';\n\n// this import is needed because of typescript bug (error TS4029)\nimport { Path } from 'd3-path';\n\n// Internal Imports\nimport { Service } from './service';\n\nexport class Curves extends Service {\n\tcurveTypes = {\n\t\tcurveLinear,\n\t\tcurveLinearClosed,\n\t\tcurveBasis,\n\t\tcurveBasisClosed,\n\t\tcurveBasisOpen,\n\t\tcurveBundle,\n\t\tcurveCardinal,\n\t\tcurveCardinalClosed,\n\t\tcurveCardinalOpen,\n\t\tcurveCatmullRom,\n\t\tcurveCatmullRomClosed,\n\t\tcurveCatmullRomOpen,\n\t\tcurveMonotoneX,\n\t\tcurveMonotoneY,\n\t\tcurveNatural,\n\t\tcurveStep,\n\t\tcurveStepAfter,\n\t\tcurveStepBefore,\n\t};\n\n\tgetD3Curve() {\n\t\tlet curveName = 'curveLinear';\n\t\tconst curveOptions = this.model.getOptions().curve;\n\n\t\t// Parse curve type whether the user provided a string\n\t\t// Or an object with more options\n\t\tif (curveOptions) {\n\t\t\tif (typeof curveOptions === 'string') {\n\t\t\t\t// curve: 'string'\n\t\t\t\tcurveName = curveOptions;\n\t\t\t} else {\n\t\t\t\t// curve: { name: 'string' }\n\t\t\t\tcurveName = curveOptions.name;\n\t\t\t}\n\t\t}\n\n\t\tif (this.curveTypes[curveName]) {\n\t\t\t// Grab correct d3 curve function\n\t\t\tlet curve = this.curveTypes[curveName];\n\n\t\t\t// Apply user-provided options to the d3 curve\n\t\t\tif (curveOptions) {\n\t\t\t\tObject.keys(curveOptions).forEach((optionName) => {\n\t\t\t\t\tif (curve[optionName]) {\n\t\t\t\t\t\tcurve = curve[optionName](curveOptions[optionName]);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn curve;\n\t\t}\n\n\t\tconsole.warn(\n\t\t\t`The curve type '${curveName}' is invalid, using 'curveLinear' instead`\n\t\t);\n\t\treturn this.curveTypes['curveLinear'];\n\t}\n}\n"]}

package/services/essentials/dom-utils.d.ts

@@ -1,39 +0,0 @@
-import { Service } from '../service';
-import { Selection } from 'd3-selection';
-interface getSVGElementSizeOptions {
-    useAttrs?: boolean;
-    useClientDimensions?: boolean;
-    useBBox?: boolean;
-    useBoundingRect?: boolean;
-}
-export declare class DOMUtils extends Service {
-    private chartID;
-    constructor(model: any, services: any);
-    static getHTMLElementSize(element: HTMLElement): {
-        width: number;
-        height: number;
-    };
-    static getSVGElementSize(svgSelector: Selection<any, any, any, any>, options?: getSVGElementSizeOptions): any;
-    static appendOrSelect(parent: any, query: any): any;
-    protected mainContainer: HTMLElement;
-    protected width: string;
-    protected height: string;
-    init(): void;
-    getChartID(): any;
-    generateElementIDString(originalID: any): string;
-    private initializeID;
-    addMainContainer(): void;
-    update(): void;
-    styleHolderElement(): void;
-    getHolder(): any;
-    exportToJPG(): void;
-    exportToPNG(): void;
-    toggleFullscreen(): void;
-    handleFullscreenChange(): void;
-    verifyCSSStylesBeingApplied(): void;
-    setSVGMaxHeight(): void;
-    getMainContainer(): HTMLElement;
-    addHolderListeners(): void;
-    addResizeListener(): void;
-}
-export {};

package/services/essentials/dom-utils.js

@@ -1,423 +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 { Service } from '../service';
-import { Events } from './../../interfaces';
-// D3 Imports
-import { select } from 'd3-selection';
-import * as Tools from '../../tools';
-// import the settings for the css prefix
-import { carbonPrefix } from '../../configuration-non-customizable';
-// MISC
-import ResizeObserver from 'resize-observer-polyfill';
-import domToImage from 'dom-to-image-more';
-var CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';
-var DOMUtils = /** @class */ (function (_super) {
-    __extends(DOMUtils, _super);
-    function DOMUtils(model, services) {
-        return _super.call(this, model, services) || this;
-    }
-    DOMUtils.getHTMLElementSize = function (element) {
-        return {
-            width: element.clientWidth,
-            height: element.clientHeight,
-        };
-    };
-    DOMUtils.getSVGElementSize = function (svgSelector, options) {
-        if (options === void 0) { options = {
-            useAttrs: false,
-            useClientDimensions: false,
-            useBBox: false,
-            useBoundingRect: false,
-        }; }
-        if (!svgSelector.attr) {
-            svgSelector = select(svgSelector);
-        }
-        var finalDimensions = {
-            width: 0,
-            height: 0,
-        };
-        var validateAndSetDimensions = function (dimensions) {
-            if (dimensions) {
-                Object.keys(finalDimensions).forEach(function (dimensionKey) {
-                    if (dimensions[dimensionKey]) {
-                        var dimension = dimensions[dimensionKey];
-                        var dimensionNumber = parseFloat(dimension);
-                        if (dimension &&
-                            dimensionNumber > finalDimensions[dimensionKey] &&
-                            ('' + dimension).indexOf('%') === -1) {
-                            finalDimensions[dimensionKey] = dimensionNumber;
-                        }
-                    }
-                });
-            }
-        };
-        var attrDimensions = {
-            width: svgSelector.attr('width'),
-            height: svgSelector.attr('height'),
-        };
-        var bbox, bboxDimensions, boundingRect, boundingRectDimensions;
-        // In many versions of Firefox
-        // getBBox will cause an "NSFailure" error
-        try {
-            bbox = svgSelector.node().getBBox();
-            bboxDimensions = {
-                width: bbox.width,
-                height: bbox.height,
-            };
-        }
-        catch (e) { }
-        try {
-            boundingRect = svgSelector.node().getBoundingClientRect();
-            boundingRectDimensions = {
-                width: boundingRect.width,
-                height: boundingRect.height,
-            };
-        }
-        catch (e) { }
-        var clientDimensions = {
-            width: svgSelector.node().clientWidth,
-            height: svgSelector.node().clientHeight,
-        };
-        // If both attribute values are numbers
-        // And not percentages or NaN
-        if (options) {
-            if (options.useAttrs) {
-                validateAndSetDimensions(attrDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return finalDimensions;
-                }
-            }
-            if (options.useClientDimensions) {
-                validateAndSetDimensions(clientDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return clientDimensions;
-                }
-            }
-            if (options.useBBox) {
-                validateAndSetDimensions(bboxDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return bboxDimensions;
-                }
-            }
-            if (options.useBoundingRect) {
-                validateAndSetDimensions(boundingRectDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return boundingRectDimensions;
-                }
-            }
-        }
-        try {
-            var nativeDimensions = {
-                width: Tools.getProperty(svgSelector.node(), 'width', 'baseVal', 'value'),
-                height: Tools.getProperty(svgSelector.node(), 'height', 'baseVal', 'value'),
-            };
-            validateAndSetDimensions(nativeDimensions);
-        }
-        catch (e) {
-            validateAndSetDimensions(clientDimensions);
-            validateAndSetDimensions(bboxDimensions);
-            validateAndSetDimensions(attrDimensions);
-        }
-        return finalDimensions;
-    };
-    DOMUtils.appendOrSelect = function (parent, query) {
-        var selection = parent.select("" + query);
-        if (selection.empty()) {
-            // see if there is an id
-            var querySections = query.split('#');
-            var elementToAppend = void 0;
-            var id = void 0;
-            // if there is an id
-            if (querySections.length === 2) {
-                // take out the element to append
-                elementToAppend = querySections[0];
-                // split it by classes
-                querySections = querySections[1].split('.');
-                // the first string is the id
-                id = querySections[0];
-            }
-            else {
-                querySections = query.split('.');
-                elementToAppend = querySections[0];
-            }
-            return parent
-                .append(elementToAppend)
-                .attr('id', id)
-                .attr('class', querySections.slice(1).join(' '));
-        }
-        return selection;
-    };
-    DOMUtils.prototype.init = function () {
-        // Add width & height to the chart holder if necessary, and add a classname
-        this.styleHolderElement();
-        // Initialize chart ID
-        this.initializeID();
-        this.addMainContainer();
-        this.verifyCSSStylesBeingApplied();
-        if (this.model.getOptions().resizable) {
-            this.addResizeListener();
-        }
-        this.addHolderListeners();
-        this.handleFullscreenChange();
-    };
-    DOMUtils.prototype.getChartID = function () {
-        return this.chartID;
-    };
-    DOMUtils.prototype.generateElementIDString = function (originalID) {
-        return "chart-" + this.chartID + "-" + originalID;
-    };
-    DOMUtils.prototype.initializeID = function () {
-        this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16);
-    };
-    DOMUtils.prototype.addMainContainer = function () {
-        var options = this.model.getOptions();
-        var chartsprefix = Tools.getProperty(options, 'style', 'prefix');
-        var mainContainer = select(this.getHolder())
-            .append('div')
-            .classed(carbonPrefix + "--" + chartsprefix + "--chart-wrapper", true)
-            .attr('id', "chart-" + this.getChartID())
-            .style('height', '100%')
-            .style('width', '100%');
-        mainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);
-        this.mainContainer = mainContainer.node();
-    };
-    DOMUtils.prototype.update = function () {
-        this.styleHolderElement();
-    };
-    DOMUtils.prototype.styleHolderElement = function () {
-        var holderElement = this.getHolder();
-        // In order for resize events to not clash with these updates
-        // We'll check if the width & height values passed in options
-        // Have changed, before setting them to the holder
-        var _a = this.model.getOptions(), width = _a.width, height = _a.height, theme = _a.theme;
-        if (width !== this.width) {
-            // Apply formatted width attribute to chart
-            holderElement.style.width = width;
-            this.width = width;
-        }
-        if (height !== this.height) {
-            // Apply formatted width attribute to chart
-            holderElement.style.height = height;
-            this.height = height;
-        }
-        // Add class to chart holder
-        select(this.getHolder())
-            .classed(carbonPrefix + "--chart-holder", true)
-            .attr('data-carbon-theme', theme);
-    };
-    DOMUtils.prototype.getHolder = function () {
-        return this.model.get('holder');
-    };
-    DOMUtils.prototype.exportToJPG = function () {
-        var self = this;
-        var options = this.model.getOptions();
-        var holder = this.getHolder();
-        var holderSelection = select(holder);
-        holderSelection.classed('filled', true);
-        domToImage
-            .toJpeg(this.getMainContainer(), {
-            bgcolor: typeof window !== 'undefined'
-                ? window
-                    .getComputedStyle(holder)
-                    .getPropertyValue('background-color')
-                : undefined,
-            quality: 1,
-            // Remove the toolbar
-            filter: function (node) {
-                if (node.classList &&
-                    node.classList.contains('cds--cc--toolbar')) {
-                    return false;
-                }
-                return true;
-            },
-        })
-            .then(function (dataUrl) {
-            var fileName = 'myChart';
-            var customFilename = Tools.getProperty(options, 'fileDownload', 'fileName');
-            if (typeof customFilename === 'function') {
-                fileName = customFilename('jpg');
-            }
-            self.services.files.downloadImage(dataUrl, fileName + ".jpg");
-            holderSelection.classed('filled', false);
-        });
-    };
-    DOMUtils.prototype.exportToPNG = function () {
-        var self = this;
-        var options = this.model.getOptions();
-        var holder = this.getHolder();
-        var holderSelection = select(holder);
-        holderSelection.classed('filled', true);
-        domToImage
-            .toPng(this.getMainContainer(), {
-            bgcolor: typeof window !== 'undefined'
-                ? window
-                    .getComputedStyle(holder)
-                    .getPropertyValue('background-color')
-                : undefined,
-            quality: 1,
-            // Remove the toolbar
-            filter: function (node) {
-                if (node.classList &&
-                    node.classList.contains('cds--cc--toolbar')) {
-                    return false;
-                }
-                return true;
-            },
-        })
-            .then(function (dataUrl) {
-            var fileName = 'myChart';
-            var customFilename = Tools.getProperty(options, 'fileDownload', 'fileName');
-            if (typeof customFilename === 'function') {
-                fileName = customFilename('png');
-            }
-            self.services.files.downloadImage(dataUrl, fileName + ".png");
-            holderSelection.classed('filled', false);
-        })
-            .catch(function (error) {
-            console.error('oops, something went wrong!', error);
-        });
-    };
-    DOMUtils.prototype.toggleFullscreen = function () {
-        var holder = this.getHolder();
-        var holderSelection = select(holder);
-        var isFullScreen = holderSelection.classed('fullscreen');
-        if (isFullScreen &&
-            (document.fullscreenElement ||
-                document['webkitFullscreenElement'] ||
-                document['mozFullScreenElement'] ||
-                document['msFullscreenElement'])) {
-            // Call the correct function depending on the browser
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-            else if (document['webkitExitFullscreen']) {
-                document['webkitExitFullscreen']();
-            }
-            else if (document['mozCancelFullScreen']) {
-                document['mozCancelFullScreen']();
-            }
-            else if (document['msExitFullscreen']) {
-                document['msExitFullscreen']();
-            }
-        }
-        else {
-            // Call the correct function depending on the browser
-            if (holder.requestFullscreen) {
-                holder.requestFullscreen();
-            }
-            else if (holder.webkitRequestFullscreen) {
-                holder.webkitRequestFullscreen();
-            }
-            else if (holder.mozRequestFullScreen) {
-                holder.mozRequestFullScreen();
-            }
-            else if (holder.msRequestFullscreen) {
-                holder.msRequestFullscreen();
-            }
-        }
-    };
-    DOMUtils.prototype.handleFullscreenChange = function () {
-        var _this = this;
-        document.addEventListener('fullscreenchange', function () {
-            var holderSelection = select(_this.getHolder());
-            var isFullScreen = holderSelection.classed('fullscreen');
-            // Toggle the `fullscreen` classname
-            holderSelection.classed('fullscreen', !isFullScreen);
-        });
-    };
-    DOMUtils.prototype.verifyCSSStylesBeingApplied = function () {
-        var _this = this;
-        // setTimeout is needed here since in `addSVGElement()` we're appending the
-        // CSS verifier element, and need to allow some time for it to become available
-        // in the DOM
-        setTimeout(function () {
-            var cssVerifierElement = select(_this.mainContainer)
-                .select("g." + CSS_VERIFIER_ELEMENT_CLASSNAME)
-                .node();
-            var computedStyles = getComputedStyle(cssVerifierElement);
-            if (computedStyles.getPropertyValue('overflow') !== 'hidden' ||
-                computedStyles.getPropertyValue('opacity') !== '0') {
-                console.error('Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.');
-            }
-        });
-    };
-    DOMUtils.prototype.setSVGMaxHeight = function () {
-        // if there is a set height on the holder, leave the chart svg height at 100%
-        if (!this.model.getOptions().height) {
-            var chartHeight = DOMUtils.getSVGElementSize(select(this.mainContainer), { useBBox: true }).height;
-            var chartSVGSelector = select(this.mainContainer).attr('class');
-            var children = select(this.mainContainer).selectAll("." + chartSVGSelector + " > svg");
-            // get the height of the children SVGs (spacers, titles, etc)
-            var childrenHeight_1 = 0;
-            children.nodes().forEach(function (childSVG) {
-                childrenHeight_1 += Number(DOMUtils.getSVGElementSize(select(childSVG), {
-                    useBBox: true,
-                }).height);
-            });
-            // set the chart svg height to the children height
-            // forcing the chart not to take up any more space than it requires
-            childrenHeight_1 <= chartHeight
-                ? select(this.mainContainer).attr('height', childrenHeight_1)
-                : select(this.mainContainer).attr('height', '100%');
-        }
-    };
-    DOMUtils.prototype.getMainContainer = function () {
-        return this.mainContainer;
-    };
-    DOMUtils.prototype.addHolderListeners = function () {
-        var _this = this;
-        var holder = this.getHolder();
-        if (!holder) {
-            return;
-        }
-        select(holder)
-            .on('mouseover', function () {
-            // Dispatch event
-            _this.services.events.dispatchEvent(Events.Chart.MOUSEOVER);
-        })
-            .on('mouseout', function () {
-            // Dispatch event
-            _this.services.events.dispatchEvent(Events.Chart.MOUSEOUT);
-        });
-    };
-    DOMUtils.prototype.addResizeListener = function () {
-        var _this = this;
-        var holder = this.getHolder();
-        if (!holder) {
-            return;
-        }
-        // Grab current dimensions of the chart holder
-        var containerWidth = holder.clientWidth;
-        var containerHeight = holder.clientHeight;
-        // The resize callback function
-        var resizeCallback = Tools.debounce(function (entries, observer) {
-            if (!holder) {
-                return;
-            }
-            if (Math.abs(containerWidth - holder.clientWidth) > 1 ||
-                Math.abs(containerHeight - holder.clientHeight) > 1) {
-                containerWidth = holder.clientWidth;
-                containerHeight = holder.clientHeight;
-                _this.services.events.dispatchEvent(Events.Chart.RESIZE);
-            }
-        }, 12.5);
-        // Observe the behaviour of resizing on the holder
-        var resizeObserver = new ResizeObserver(resizeCallback);
-        resizeObserver.observe(holder);
-    };
-    return DOMUtils;
-}(Service));
-export { DOMUtils };
-//# sourceMappingURL=../../../src/services/essentials/dom-utils.js.map