@carbon/charts 0.59.0-beta.0 → 1.0.3

package/services/essentials/dom-utils.js

@@ -0,0 +1,405 @@
+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 { 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';
+var CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';
+var DOMUtils = /** @class */ (function (_super) {
+    __extends(DOMUtils, _super);
+    function DOMUtils(model, services) {
+        var _this = _super.call(this, model, services) || this;
+        _this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16);
+        return _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();
+        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.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)
+            .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();
+        // Add class to chart holder
+        select(this.getHolder()).classed(carbonPrefix + "--chart-holder", true);
+        // 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;
+        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;
+        }
+    };
+    DOMUtils.prototype.getHolder = function () {
+        return this.model.get('holder');
+    };
+    DOMUtils.prototype.exportToJPG = function () {
+        var self = this;
+        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) {
+            self.services.files.downloadImage(dataUrl, 'myChart.jpg');
+            holderSelection.classed('filled', false);
+        });
+    };
+    DOMUtils.prototype.exportToPNG = function () {
+        var self = this;
+        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) {
+            self.services.files.downloadImage(dataUrl, 'myChart.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

package/services/essentials/dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-utils.js","sourceRoot":"","sources":["dom-utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Service } from '../service';\nimport { Events } from './../../interfaces';\n\n// D3 Imports\nimport { select, Selection } from 'd3-selection';\nimport { Tools } from '../../tools';\n\n// import the settings for the css prefix\nimport { carbonPrefix } from '../../configuration-non-customizable';\n\n// MISC\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport domToImage from 'dom-to-image';\n\nconst CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';\n\ninterface getSVGElementSizeOptions {\n\tuseAttrs?: boolean;\n\tuseClientDimensions?: boolean;\n\tuseBBox?: boolean;\n\tuseBoundingRect?: boolean;\n}\n\nexport class DOMUtils extends Service {\n\tprivate chartID = Math.floor(\n\t\t(1 + Math.random()) * 0x1000000000000\n\t).toString(16);\n\n\tconstructor(model: any, services: any) {\n\t\tsuper(model, services);\n\t}\n\n\tstatic getHTMLElementSize(element: HTMLElement) {\n\t\treturn {\n\t\t\twidth: element.clientWidth,\n\t\t\theight: element.clientHeight,\n\t\t};\n\t}\n\n\tstatic getSVGElementSize(\n\t\tsvgSelector: Selection<any, any, any, any>,\n\t\toptions: getSVGElementSizeOptions = {\n\t\t\tuseAttrs: false,\n\t\t\tuseClientDimensions: false,\n\t\t\tuseBBox: false,\n\t\t\tuseBoundingRect: false,\n\t\t}\n\t) {\n\t\tif (!svgSelector.attr) {\n\t\t\tsvgSelector = select(svgSelector as any);\n\t\t}\n\n\t\tconst finalDimensions = {\n\t\t\twidth: 0,\n\t\t\theight: 0,\n\t\t};\n\n\t\tconst validateAndSetDimensions = (dimensions) => {\n\t\t\tif (dimensions) {\n\t\t\t\tObject.keys(finalDimensions).forEach((dimensionKey) => {\n\t\t\t\t\tif (dimensions[dimensionKey]) {\n\t\t\t\t\t\tconst dimension = dimensions[dimensionKey];\n\t\t\t\t\t\tconst dimensionNumber = parseFloat(dimension);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tdimension &&\n\t\t\t\t\t\t\tdimensionNumber > finalDimensions[dimensionKey] &&\n\t\t\t\t\t\t\t('' + dimension).indexOf('%') === -1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tfinalDimensions[dimensionKey] = dimensionNumber;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst attrDimensions = {\n\t\t\twidth: svgSelector.attr('width'),\n\t\t\theight: svgSelector.attr('height'),\n\t\t};\n\n\t\tlet bbox, bboxDimensions, boundingRect, boundingRectDimensions;\n\t\t// In many versions of Firefox\n\t\t// getBBox will cause an \"NSFailure\" error\n\t\ttry {\n\t\t\tbbox = svgSelector.node().getBBox();\n\t\t\tbboxDimensions = {\n\t\t\t\twidth: bbox.width,\n\t\t\t\theight: bbox.height,\n\t\t\t};\n\t\t} catch (e) {}\n\n\t\ttry {\n\t\t\tboundingRect = svgSelector.node().getBoundingClientRect();\n\t\t\tboundingRectDimensions = {\n\t\t\t\twidth: boundingRect.width,\n\t\t\t\theight: boundingRect.height,\n\t\t\t};\n\t\t} catch (e) {}\n\n\t\tconst clientDimensions = {\n\t\t\twidth: svgSelector.node().clientWidth,\n\t\t\theight: svgSelector.node().clientHeight,\n\t\t};\n\n\t\t// If both attribute values are numbers\n\t\t// And not percentages or NaN\n\t\tif (options) {\n\t\t\tif (options.useAttrs) {\n\t\t\t\tvalidateAndSetDimensions(attrDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn finalDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useClientDimensions) {\n\t\t\t\tvalidateAndSetDimensions(clientDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn clientDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useBBox) {\n\t\t\t\tvalidateAndSetDimensions(bboxDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn bboxDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useBoundingRect) {\n\t\t\t\tvalidateAndSetDimensions(boundingRectDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn boundingRectDimensions;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttry {\n\t\t\tconst nativeDimensions = {\n\t\t\t\twidth: Tools.getProperty(\n\t\t\t\t\tsvgSelector.node(),\n\t\t\t\t\t'width',\n\t\t\t\t\t'baseVal',\n\t\t\t\t\t'value'\n\t\t\t\t),\n\t\t\t\theight: Tools.getProperty(\n\t\t\t\t\tsvgSelector.node(),\n\t\t\t\t\t'height',\n\t\t\t\t\t'baseVal',\n\t\t\t\t\t'value'\n\t\t\t\t),\n\t\t\t};\n\n\t\t\tvalidateAndSetDimensions(nativeDimensions);\n\t\t} catch (e) {\n\t\t\tvalidateAndSetDimensions(clientDimensions);\n\t\t\tvalidateAndSetDimensions(bboxDimensions);\n\t\t\tvalidateAndSetDimensions(attrDimensions);\n\t\t}\n\n\t\treturn finalDimensions;\n\t}\n\n\tstatic appendOrSelect(parent, query) {\n\t\tconst selection = parent.select(`${query}`);\n\n\t\tif (selection.empty()) {\n\t\t\t// see if there is an id\n\t\t\tlet querySections = query.split('#');\n\t\t\tlet elementToAppend;\n\t\t\tlet id;\n\t\t\t// if there is an id\n\t\t\tif (querySections.length === 2) {\n\t\t\t\t// take out the element to append\n\t\t\t\telementToAppend = querySections[0];\n\t\t\t\t// split it by classes\n\t\t\t\tquerySections = querySections[1].split('.');\n\t\t\t\t// the first string is the id\n\t\t\t\tid = querySections[0];\n\t\t\t} else {\n\t\t\t\tquerySections = query.split('.');\n\t\t\t\telementToAppend = querySections[0];\n\t\t\t}\n\n\t\t\treturn parent\n\t\t\t\t.append(elementToAppend)\n\t\t\t\t.attr('id', id)\n\t\t\t\t.attr('class', querySections.slice(1).join(' '));\n\t\t}\n\n\t\treturn selection;\n\t}\n\n\tprotected mainContainer: HTMLElement;\n\tprotected width: string;\n\tprotected height: string;\n\n\tinit() {\n\t\t// Add width & height to the chart holder if necessary, and add a classname\n\t\tthis.styleHolderElement();\n\n\t\tthis.addMainContainer();\n\t\tthis.verifyCSSStylesBeingApplied();\n\n\t\tif (this.model.getOptions().resizable) {\n\t\t\tthis.addResizeListener();\n\t\t}\n\n\t\tthis.addHolderListeners();\n\n\t\tthis.handleFullscreenChange();\n\t}\n\n\tgetChartID() {\n\t\treturn this.chartID;\n\t}\n\n\tgenerateElementIDString(originalID) {\n\t\treturn `chart-${this.chartID}-${originalID}`;\n\t}\n\n\taddMainContainer() {\n\t\tconst options = this.model.getOptions();\n\t\tconst chartsprefix = Tools.getProperty(options, 'style', 'prefix');\n\n\t\tconst mainContainer = select(this.getHolder())\n\t\t\t.append('div')\n\t\t\t.classed(`${carbonPrefix}--${chartsprefix}--chart-wrapper`, true)\n\t\t\t.style('height', '100%')\n\t\t\t.style('width', '100%');\n\n\t\tmainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);\n\n\t\tthis.mainContainer = mainContainer.node();\n\t}\n\n\tupdate() {\n\t\tthis.styleHolderElement();\n\t}\n\n\tstyleHolderElement() {\n\t\tconst holderElement = this.getHolder() as HTMLElement;\n\n\t\t// Add class to chart holder\n\t\tselect(this.getHolder()).classed(`${carbonPrefix}--chart-holder`, true);\n\n\t\t// In order for resize events to not clash with these updates\n\t\t// We'll check if the width & height values passed in options\n\t\t// Have changed, before setting them to the holder\n\t\tconst { width, height } = this.model.getOptions();\n\t\tif (width !== this.width) {\n\t\t\t// Apply formatted width attribute to chart\n\t\t\tholderElement.style.width = width;\n\n\t\t\tthis.width = width;\n\t\t}\n\n\t\tif (height !== this.height) {\n\t\t\t// Apply formatted width attribute to chart\n\t\t\tholderElement.style.height = height;\n\n\t\t\tthis.height = height;\n\t\t}\n\t}\n\n\tgetHolder() {\n\t\treturn this.model.get('holder');\n\t}\n\n\texportToJPG() {\n\t\tconst self = this;\n\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\t\tholderSelection.classed('filled', true);\n\n\t\tdomToImage\n\t\t\t.toJpeg(this.getMainContainer(), {\n\t\t\t\tbgcolor:\n\t\t\t\t\ttypeof window !== 'undefined'\n\t\t\t\t\t\t? window\n\t\t\t\t\t\t\t\t.getComputedStyle(holder)\n\t\t\t\t\t\t\t\t.getPropertyValue('background-color')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tquality: 1,\n\t\t\t\t// Remove the toolbar\n\t\t\t\tfilter: (node) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.classList &&\n\t\t\t\t\t\tnode.classList.contains('cds--cc--toolbar')\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (dataUrl) {\n\t\t\t\tself.services.files.downloadImage(dataUrl, 'myChart.jpg');\n\t\t\t\tholderSelection.classed('filled', false);\n\t\t\t});\n\t}\n\n\texportToPNG() {\n\t\tconst self = this;\n\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\t\tholderSelection.classed('filled', true);\n\n\t\tdomToImage\n\t\t\t.toPng(this.getMainContainer(), {\n\t\t\t\tbgcolor:\n\t\t\t\t\ttypeof window !== 'undefined'\n\t\t\t\t\t\t? window\n\t\t\t\t\t\t\t\t.getComputedStyle(holder)\n\t\t\t\t\t\t\t\t.getPropertyValue('background-color')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tquality: 1,\n\t\t\t\t// Remove the toolbar\n\t\t\t\tfilter: (node) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.classList &&\n\t\t\t\t\t\tnode.classList.contains('cds--cc--toolbar')\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (dataUrl) {\n\t\t\t\tself.services.files.downloadImage(dataUrl, 'myChart.png');\n\t\t\t\tholderSelection.classed('filled', false);\n\t\t\t})\n\t\t\t.catch(function (error) {\n\t\t\t\tconsole.error('oops, something went wrong!', error);\n\t\t\t});\n\t}\n\n\ttoggleFullscreen() {\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\n\t\tconst isFullScreen = holderSelection.classed('fullscreen');\n\n\t\tif (\n\t\t\tisFullScreen &&\n\t\t\t(document.fullscreenElement ||\n\t\t\t\tdocument['webkitFullscreenElement'] ||\n\t\t\t\tdocument['mozFullScreenElement'] ||\n\t\t\t\tdocument['msFullscreenElement'])\n\t\t) {\n\t\t\t// Call the correct function depending on the browser\n\t\t\tif (document.exitFullscreen) {\n\t\t\t\tdocument.exitFullscreen();\n\t\t\t} else if (document['webkitExitFullscreen']) {\n\t\t\t\tdocument['webkitExitFullscreen']();\n\t\t\t} else if (document['mozCancelFullScreen']) {\n\t\t\t\tdocument['mozCancelFullScreen']();\n\t\t\t} else if (document['msExitFullscreen']) {\n\t\t\t\tdocument['msExitFullscreen']();\n\t\t\t}\n\t\t} else {\n\t\t\t// Call the correct function depending on the browser\n\t\t\tif (holder.requestFullscreen) {\n\t\t\t\tholder.requestFullscreen();\n\t\t\t} else if (holder.webkitRequestFullscreen) {\n\t\t\t\tholder.webkitRequestFullscreen();\n\t\t\t} else if (holder.mozRequestFullScreen) {\n\t\t\t\tholder.mozRequestFullScreen();\n\t\t\t} else if (holder.msRequestFullscreen) {\n\t\t\t\tholder.msRequestFullscreen();\n\t\t\t}\n\t\t}\n\t}\n\n\thandleFullscreenChange() {\n\t\tdocument.addEventListener('fullscreenchange', () => {\n\t\t\tconst holderSelection = select(this.getHolder());\n\t\t\tconst isFullScreen = holderSelection.classed('fullscreen');\n\n\t\t\t// Toggle the `fullscreen` classname\n\t\t\tholderSelection.classed('fullscreen', !isFullScreen);\n\t\t});\n\t}\n\n\tverifyCSSStylesBeingApplied() {\n\t\t// setTimeout is needed here since in `addSVGElement()` we're appending the\n\t\t// CSS verifier element, and need to allow some time for it to become available\n\t\t// in the DOM\n\t\tsetTimeout(() => {\n\t\t\tconst cssVerifierElement = select(this.mainContainer)\n\t\t\t\t.select(`g.${CSS_VERIFIER_ELEMENT_CLASSNAME}`)\n\t\t\t\t.node();\n\t\t\tconst computedStyles = getComputedStyle(cssVerifierElement as any);\n\t\t\tif (\n\t\t\t\tcomputedStyles.getPropertyValue('overflow') !== 'hidden' ||\n\t\t\t\tcomputedStyles.getPropertyValue('opacity') !== '0'\n\t\t\t) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.'\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\t}\n\n\tsetSVGMaxHeight() {\n\t\t// if there is a set height on the holder, leave the chart svg height at 100%\n\t\tif (!this.model.getOptions().height) {\n\t\t\tconst { height: chartHeight } = DOMUtils.getSVGElementSize(\n\t\t\t\tselect(this.mainContainer),\n\t\t\t\t{ useBBox: true }\n\t\t\t);\n\t\t\tconst chartSVGSelector = select(this.mainContainer).attr('class');\n\t\t\tconst children = select(this.mainContainer).selectAll(\n\t\t\t\t`.${chartSVGSelector} > svg`\n\t\t\t);\n\n\t\t\t// get the height of the children SVGs (spacers, titles, etc)\n\t\t\tlet childrenHeight = 0;\n\t\t\tchildren.nodes().forEach(function (childSVG) {\n\t\t\t\tchildrenHeight += Number(\n\t\t\t\t\tDOMUtils.getSVGElementSize(select(childSVG), {\n\t\t\t\t\t\tuseBBox: true,\n\t\t\t\t\t}).height\n\t\t\t\t);\n\t\t\t});\n\n\t\t\t// set the chart svg height to the children height\n\t\t\t// forcing the chart not to take up any more space than it requires\n\t\t\tchildrenHeight <= chartHeight\n\t\t\t\t? select(this.mainContainer).attr('height', childrenHeight)\n\t\t\t\t: select(this.mainContainer).attr('height', '100%');\n\t\t}\n\t}\n\n\tgetMainContainer() {\n\t\treturn this.mainContainer;\n\t}\n\n\taddHolderListeners() {\n\t\tconst holder = this.getHolder();\n\n\t\tif (!holder) {\n\t\t\treturn;\n\t\t}\n\n\t\tselect(holder)\n\t\t\t.on('mouseover', () => {\n\t\t\t\t// Dispatch event\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.MOUSEOVER);\n\t\t\t})\n\t\t\t.on('mouseout', () => {\n\t\t\t\t// Dispatch event\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.MOUSEOUT);\n\t\t\t});\n\t}\n\n\taddResizeListener() {\n\t\tconst holder = this.getHolder();\n\n\t\tif (!holder) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Grab current dimensions of the chart holder\n\t\tlet containerWidth = holder.clientWidth;\n\t\tlet containerHeight = holder.clientHeight;\n\n\t\t// The resize callback function\n\t\tconst resizeCallback = Tools.debounce((entries, observer) => {\n\t\t\tif (!holder) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tMath.abs(containerWidth - holder.clientWidth) > 1 ||\n\t\t\t\tMath.abs(containerHeight - holder.clientHeight) > 1\n\t\t\t) {\n\t\t\t\tcontainerWidth = holder.clientWidth;\n\t\t\t\tcontainerHeight = holder.clientHeight;\n\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.RESIZE);\n\t\t\t}\n\t\t}, 12.5);\n\n\t\t// Observe the behaviour of resizing on the holder\n\t\tconst resizeObserver = new ResizeObserver(resizeCallback);\n\t\tresizeObserver.observe(holder);\n\t}\n}\n"]}

package/styles/_chart-holder.scss

@@ -0,0 +1,50 @@
+@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles/scss/themes";
+
+.#{$prefix}--chart-holder {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 100%;
+
+	&.filled,
+	&.fullscreen {
+		background-color: $background;
+
+		.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+			background-color: $background;
+		}
+	}
+
+	.DONT_STYLE_ME_css_styles_verifier {
+		overflow: hidden;
+		opacity: 0;
+	}
+}
+
+.#{$prefix}--chart-holder {
+	@include theme(themes.$white);
+}
+
+.#{$prefix}--chart-holder[data-carbon-theme='g10'] {
+	@include theme(themes.$g10);
+}
+
+.#{$prefix}--chart-holder[data-carbon-theme='g90'] {
+	@include theme(themes.$g90);
+}
+
+.#{$prefix}--chart-holder[data-carbon-theme='g100'] {
+	@include theme(themes.$g100);
+}
+
+.#{$prefix}--chart-holder.fullscreen,
+.#{$prefix}--chart-holder:-webkit-full-screen {
+	/* !important is used here to get closer to
+	a truly fullscreen experience */
+	width: 100% !important;
+	height: 100% !important;
+	max-width: unset !important;
+	max-height: unset !important;
+	padding: 2em;
+}