@carbon/charts 0.59.0-beta.0 → 1.0.3

package/components/axes/toolbar.js

@@ -0,0 +1,544 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// Internal Imports
+import { Component } from '../component';
+import { Events, RenderTypes, ToolbarControlTypes } from '../../interfaces';
+import { Tools } from '../../tools';
+// D3 Imports
+import { select } from 'd3-selection';
+var Toolbar = /** @class */ (function (_super) {
+    __extends(Toolbar, _super);
+    function Toolbar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'toolbar';
+        _this.renderType = RenderTypes.HTML;
+        return _this;
+    }
+    Toolbar.prototype.init = function () {
+        var _this = this;
+        var bodyOnClickHandler = function () { return _this.updateOverflowMenu(false); };
+        // Grab the tooltip element
+        this.services.events.addEventListener(Events.Toolbar.SHOW_OVERFLOW_MENU, function () {
+            _this.renderOverflowMenu();
+            // hide overflow menu if user clicks on somewhere in web page
+            document.body.addEventListener('click', bodyOnClickHandler);
+        });
+        // listen to hide overflow menu event to hide the overflow menu
+        this.services.events.addEventListener(Events.Toolbar.HIDE_OVERFLOW_MENU, function () {
+            // // hide overflow menu if user clicks on somewhere in web page
+            document.body.removeEventListener('click', bodyOnClickHandler);
+        });
+    };
+    Toolbar.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = true; }
+        var container = this.getComponentContainer().attr('role', 'toolbar');
+        var isDataLoading = Tools.getProperty(this.getOptions(), 'data', 'loading');
+        if (isDataLoading) {
+            container.html('');
+            // Set overflow menu to null if data is loading
+            // This will render in a new overflow menu when data is done loading
+            this.overflowMenu = null;
+        }
+        else {
+            if (!this.overflowMenu) {
+                this.overflowMenu = container
+                    .append('div')
+                    .attr('class', 'cds--overflow-menu-options cds--overflow-menu--flip cds--overflow-menu-options cds--overflow-menu--flip')
+                    .attr('tabindex', -1)
+                    .attr('role', 'menu')
+                    .html("<ul></ul>");
+            }
+            // get the toolbar buttons
+            var _a = this.getControlConfigs(), buttonList = _a.buttonList, overflowMenuItemList = _a.overflowMenuItemList;
+            // overflow button is required only if overflow menu item list is valid
+            if (!!overflowMenuItemList) {
+                buttonList.push(this.getOverflowButtonConfig());
+            }
+            var toolbarControls = container
+                .selectAll('div.toolbar-control')
+                .data(buttonList, function (button) { return button.id; });
+            toolbarControls.exit().remove();
+            var enteringToolbarControls = toolbarControls
+                .enter()
+                .append('div')
+                .attr('class', 'toolbar-control cds--overflow-menu cds--overflow-menu')
+                .attr('role', 'button');
+            var self_1 = this;
+            var allToolbarControls = enteringToolbarControls
+                .merge(toolbarControls)
+                .classed('disabled', function (d) { return d.shouldBeDisabled(); })
+                .attr('aria-disabled', function (d) { return d.shouldBeDisabled(); })
+                .attr('aria-label', function (d) { return d.title; })
+                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"cds--overflow-menu__trigger cds--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconSVG.width !== undefined ? d.iconSVG.width : '20px') + "; height: " + (d.iconSVG.height !== undefined
+                ? d.iconSVG.height
+                : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cds--overflow-menu__icon cds--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVG.content + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
+                .each(function (d, index) {
+                var _this = this;
+                select(this)
+                    .select('button')
+                    .on('click', function (event) {
+                    if (!d.shouldBeDisabled()) {
+                        self_1.triggerFunctionAndEvent(d, event, _this);
+                    }
+                })
+                    .on('keydown', function (event) {
+                    if ((event.key && event.key === 'Enter') ||
+                        event.key === ' ') {
+                        event.preventDefault();
+                        self_1.triggerFunctionAndEvent(d, event, _this);
+                    }
+                    else if (event.key && event.key === 'ArrowLeft') {
+                        self_1.focusOnPreviousEnabledToolbarItem(index);
+                    }
+                    else if (event.key &&
+                        event.key === 'ArrowRight') {
+                        self_1.focusOnNextEnabledToolbarItem(index);
+                    }
+                });
+            });
+            this.overflowButton = this.getComponentContainer().select("button.cds--overflow-menu__trigger#" + this.services.domUtils.generateElementIDString('control-toolbar-overflow-menu'));
+        }
+    };
+    Toolbar.prototype.renderOverflowMenu = function () {
+        var _this = this;
+        var overflowMenuItemList = this.getControlConfigs().overflowMenuItemList;
+        var overflowMenuControls = this.overflowMenu
+            .select('ul')
+            .selectAll('li.cds--overflow-menu-options__option')
+            .data(overflowMenuItemList, function (button) {
+            return Tools.getProperty(button, 'id');
+        });
+        overflowMenuControls.exit().remove();
+        var enteringOverflowMenuControls = overflowMenuControls
+            .enter()
+            .append('li')
+            .attr('id', function (d) {
+            return _this.services.domUtils.generateElementIDString("control-" + d.id);
+        })
+            .attr('class', 'cds--overflow-menu-options__option cds--overflow-menu-options__option')
+            .attr('role', 'menuitem');
+        enteringOverflowMenuControls
+            .append('button')
+            .attr('class', 'cds--overflow-menu-options__btn cds--overflow-menu-options__btn');
+        enteringOverflowMenuControls
+            .merge(overflowMenuControls)
+            .classed('cds--overflow-menu-options__option--disabled', function (d) {
+            return d.shouldBeDisabled();
+        })
+            .classed('cds--overflow-menu-options__option--disabled', function (d) {
+            return d.shouldBeDisabled();
+        })
+            .attr('aria-disabled', function (d) { return d.shouldBeDisabled(); })
+            .selectAll('button')
+            .text(function (d) { return d.text; });
+    };
+    Toolbar.prototype.isOverflowMenuOpen = function () {
+        return this.overflowMenu.classed('is-open');
+    };
+    // show/hide overflow menu
+    Toolbar.prototype.updateOverflowMenu = function (show) {
+        if (!this.overflowMenu) {
+            return;
+        }
+        this.overflowMenu.classed('is-open', show);
+        // update overflow button background
+        if (this.overflowButton) {
+            this.overflowButton.attr('aria-expanded', show);
+            select(this.overflowButton.node().parentNode)
+                .classed('cds--overflow-menu--open', show)
+                .classed('cds--overflow-menu--open', show);
+        }
+        if (show) {
+            this.services.events.dispatchEvent(Events.Toolbar.SHOW_OVERFLOW_MENU);
+        }
+        else {
+            this.services.events.dispatchEvent(Events.Toolbar.HIDE_OVERFLOW_MENU);
+        }
+    };
+    // Toolbar controllers
+    Toolbar.prototype.focusOnPreviousEnabledToolbarItem = function (currentItemIndex) {
+        var buttonList = this.getToolbarButtonItems();
+        var previousItemIndex = buttonList.length;
+        for (var i = currentItemIndex - 1; i >= 0; i--) {
+            var previousButtonItem = buttonList[i];
+            if (!previousButtonItem.shouldBeDisabled()) {
+                previousItemIndex = i;
+                break;
+            }
+        }
+        // only if previous enabled menu item found
+        if (previousItemIndex < buttonList.length) {
+            var previousItemNode = select("button#" + this.services.domUtils.generateElementIDString("control-" + buttonList[previousItemIndex].id)).node();
+            if ('focus' in previousItemNode) {
+                previousItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.focusOnNextEnabledToolbarItem = function (currentItemIndex) {
+        var buttonList = this.getToolbarButtonItems();
+        var nextItemIndex = -1;
+        for (var i = currentItemIndex + 1; i < buttonList.length; i++) {
+            var nextOverflowMenuItem = buttonList[i];
+            if (!nextOverflowMenuItem.shouldBeDisabled()) {
+                nextItemIndex = i;
+                break;
+            }
+        }
+        // only if next enabled menu item found
+        if (nextItemIndex > -1) {
+            var nextItemNode = select("button#" + this.services.domUtils.generateElementIDString("control-" + buttonList[nextItemIndex].id)).node();
+            if ('focus' in nextItemNode) {
+                nextItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.focusOnPreviousEnabledMenuItem = function (currentItemIndex) {
+        var overflowMenuItems = this.getOverflowMenuItems();
+        var previousItemIndex = overflowMenuItems.length;
+        for (var i = currentItemIndex - 1; i >= 0; i--) {
+            var previousOverflowMenuItem = overflowMenuItems[i];
+            if (!previousOverflowMenuItem.shouldBeDisabled()) {
+                previousItemIndex = i;
+                break;
+            }
+        }
+        // only if previous enabled menu item found
+        if (previousItemIndex < overflowMenuItems.length) {
+            var previousItemNode = select("#" + this.services.domUtils.generateElementIDString("control-" + overflowMenuItems[previousItemIndex].id) + " button").node();
+            if ('focus' in previousItemNode) {
+                previousItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.focusOnNextEnabledMenuItem = function (currentItemIndex) {
+        var overflowMenuItems = this.getOverflowMenuItems();
+        var nextItemIndex = -1;
+        for (var i = currentItemIndex + 1; i < overflowMenuItems.length; i++) {
+            var nextOverflowMenuItem = overflowMenuItems[i];
+            if (!nextOverflowMenuItem.shouldBeDisabled()) {
+                nextItemIndex = i;
+                break;
+            }
+        }
+        // only if next enabled menu item found
+        if (nextItemIndex > -1) {
+            var nextItemNode = select("#" + this.services.domUtils.generateElementIDString("control-" + overflowMenuItems[nextItemIndex].id) + " button").node();
+            if ('focus' in nextItemNode) {
+                nextItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.toggleOverflowMenu = function (event) {
+        var _this = this;
+        if (this.isOverflowMenuOpen()) {
+            // hide overflow menu
+            this.updateOverflowMenu(false);
+        }
+        else {
+            // show overflow menu
+            this.updateOverflowMenu(true);
+            // setup overflow menu item event listener
+            var self_2 = this;
+            var overflowMenuItems = this.getOverflowMenuItems();
+            overflowMenuItems.forEach(function (menuItem, index) {
+                var element = select("#" + _this.services.domUtils.generateElementIDString("control-" + menuItem.id));
+                if (element !== null) {
+                    element.on('click', function () {
+                        self_2.triggerFunctionAndEvent(menuItem, event, element.node());
+                        // hide overflow menu
+                        self_2.updateOverflowMenu(false);
+                    });
+                    element.on('keydown', function (keyEvent) {
+                        if (keyEvent && keyEvent.key === 'Enter') {
+                            self_2.triggerFunctionAndEvent(menuItem, event, element.node());
+                        }
+                        else if (keyEvent && keyEvent.key === 'ArrowUp') {
+                            // focus on previous menu item
+                            self_2.focusOnPreviousEnabledMenuItem(index);
+                        }
+                        else if (keyEvent && keyEvent.key === 'ArrowDown') {
+                            // focus on next menu item
+                            self_2.focusOnNextEnabledMenuItem(index);
+                        }
+                        else if (keyEvent && keyEvent.key === 'Escape') {
+                            self_2.updateOverflowMenu(false);
+                        }
+                        // Not hide overflow menu by keyboard arrow up/down event
+                        // Prevent page from scrolling up/down
+                        keyEvent.preventDefault();
+                    });
+                }
+            });
+            // default to focus on the first enabled menu item
+            self_2.focusOnNextEnabledMenuItem(-1);
+        }
+        // propogation should not be stopped for keyboard events
+        if (!!event) {
+            event.stopImmediatePropagation();
+        }
+    };
+    // Calls passed function && dispatches event
+    Toolbar.prototype.triggerFunctionAndEvent = function (control, event, element) {
+        // Call custom function only if it exists
+        if (typeof control.clickFunction === 'function') {
+            control.clickFunction(event);
+        }
+        // Dispatch selection event
+        this.services.events.dispatchEvent(Events.Toolbar.BUTTON_CLICK, {
+            control: control,
+            event: event,
+            element: element,
+        });
+    };
+    Toolbar.prototype.getControlConfigs = function () {
+        var _this = this;
+        var numberOfIcons = Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons') -
+            1;
+        var controls = Tools.getProperty(this.getOptions(), 'toolbar', 'controls');
+        var overflowSpecificControls = [];
+        var buttonList = [];
+        var overflowList = [];
+        controls.forEach(function (control) {
+            var controlConfig = null;
+            // check if button is custom or default control
+            if (control.type === ToolbarControlTypes.CUSTOM) {
+                // add generic id if missing
+                if (Tools.getProperty(control, 'id') === null) {
+                    // add id directly to the data passed so that id isn't reassigned on rerender
+                    control.id = "toolbar-button-" + Toolbar.buttonID++;
+                }
+                // define function if missing
+                if (Tools.getProperty(control, 'shouldBeDisabled') === null) {
+                    control.shouldBeDisabled = function () { return false; };
+                }
+                controlConfig = control;
+            }
+            else {
+                controlConfig = _this.getControlConfigByType(control.type);
+            }
+            // add to list if config is valid
+            if (controlConfig) {
+                controlConfig.text = control.text ? control.text : control.type;
+                if (controlConfig.id.indexOf('toolbar-export') !== -1) {
+                    overflowSpecificControls.push(controlConfig);
+                }
+                else if (buttonList.length < numberOfIcons) {
+                    // check if icon exists else assign to the overflow list
+                    if (Tools.getProperty(controlConfig, 'iconSVG', 'content') === null) {
+                        overflowList.push(controlConfig);
+                    }
+                    else {
+                        buttonList.push(controlConfig);
+                    }
+                }
+                else {
+                    overflowList.push(controlConfig);
+                }
+            }
+        });
+        // Ensures the `export` controls are always at the bottom
+        overflowList.push.apply(overflowList, overflowSpecificControls);
+        if (!overflowList.length) {
+            return {
+                buttonList: buttonList,
+            };
+        }
+        return {
+            buttonList: buttonList,
+            overflowMenuItemList: overflowList,
+        };
+    };
+    Toolbar.prototype.getToolbarButtonItems = function () {
+        var _a = this.getControlConfigs(), buttonList = _a.buttonList, overflowMenuItemList = _a.overflowMenuItemList;
+        if (!!overflowMenuItemList) {
+            buttonList.push(this.getOverflowButtonConfig());
+        }
+        if (!!buttonList) {
+            return buttonList;
+        }
+        return [];
+    };
+    Toolbar.prototype.getOverflowMenuItems = function () {
+        var overflowMenuItemList = this.getControlConfigs().overflowMenuItemList;
+        if (!!overflowMenuItemList) {
+            return overflowMenuItemList;
+        }
+        else {
+            return [];
+        }
+    };
+    // special button config for overflow button
+    Toolbar.prototype.getOverflowButtonConfig = function () {
+        var _this = this;
+        return {
+            id: 'toolbar-overflow-menu',
+            title: 'More options',
+            shouldBeDisabled: function () { return false; },
+            iconSVG: {
+                content: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            },
+            clickFunction: function (event) { return _this.toggleOverflowMenu(event); },
+        };
+    };
+    Toolbar.prototype.getControlConfigByType = function (controlType) {
+        var _this = this;
+        var isZoomBarEnabled = this.services.zoom &&
+            this.services.zoom.isZoomBarEnabled() &&
+            !this.services.zoom.isEmptyState();
+        var displayData = this.model.getDisplayData();
+        var controlConfig;
+        switch (controlType) {
+            case ToolbarControlTypes.ZOOM_IN:
+                if (isZoomBarEnabled) {
+                    controlConfig = {
+                        id: 'toolbar-zoomIn',
+                        title: 'Zoom in',
+                        shouldBeDisabled: function () {
+                            return _this.services.zoom.isMinZoomDomain();
+                        },
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
+                        clickFunction: function () { return _this.services.zoom.zoomIn(); },
+                    };
+                }
+                break;
+            case ToolbarControlTypes.ZOOM_OUT:
+                if (isZoomBarEnabled) {
+                    controlConfig = {
+                        id: 'toolbar-zoomOut',
+                        title: 'Zoom out',
+                        shouldBeDisabled: function () {
+                            return _this.services.zoom.isMaxZoomDomain();
+                        },
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
+                        clickFunction: function () { return _this.services.zoom.zoomOut(); },
+                    };
+                }
+                break;
+            case ToolbarControlTypes.RESET_ZOOM:
+                if (isZoomBarEnabled) {
+                    controlConfig = {
+                        id: 'toolbar-resetZoom',
+                        title: 'Reset zoom',
+                        shouldBeDisabled: function () {
+                            return _this.services.zoom.isMaxZoomDomain();
+                        },
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
+                        clickFunction: function () {
+                            return _this.services.zoom.resetZoomDomain();
+                        },
+                    };
+                }
+                break;
+            case ToolbarControlTypes.MAKE_FULLSCREEN:
+                controlConfig = {
+                    id: 'toolbar-makefullscreen',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                        width: '15px',
+                        height: '15px',
+                    },
+                    title: 'Make fullscreen',
+                    shouldBeDisabled: function () { return false; },
+                    clickFunction: function () {
+                        _this.services.domUtils.toggleFullscreen();
+                    },
+                };
+                break;
+            case ToolbarControlTypes.SHOW_AS_DATATABLE:
+                controlConfig = {
+                    id: 'toolbar-showasdatatable',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
+                    title: 'Show as table',
+                    shouldBeDisabled: function () { return displayData.length === 0; },
+                    clickFunction: function () {
+                        return _this.services.events.dispatchEvent(Events.Modal.SHOW);
+                    },
+                };
+                break;
+            case ToolbarControlTypes.EXPORT_CSV:
+                controlConfig = {
+                    id: 'toolbar-export-CSV',
+                    title: 'Export as CSV',
+                    shouldBeDisabled: function () { return false; },
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
+                    clickFunction: function () { return _this.model.exportToCSV(); },
+                };
+                break;
+            case ToolbarControlTypes.EXPORT_PNG:
+                controlConfig = {
+                    id: 'toolbar-export-PNG',
+                    title: 'Export as PNG',
+                    shouldBeDisabled: function () { return false; },
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
+                    clickFunction: function () { return _this.services.domUtils.exportToPNG(); },
+                };
+                break;
+            case ToolbarControlTypes.EXPORT_JPG:
+                controlConfig = {
+                    id: 'toolbar-export-JPG',
+                    title: 'Export as JPG',
+                    shouldBeDisabled: function () { return false; },
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
+                    clickFunction: function () { return _this.services.domUtils.exportToJPG(); },
+                };
+                break;
+            // add more toolbar control configuration here
+            default:
+                throw Error('Not supported toolbar control type: ' + controlType);
+        }
+        return controlConfig;
+    };
+    Toolbar.prototype.getControlIconByType = function (controlType) {
+        switch (controlType) {
+            case ToolbarControlTypes.ZOOM_IN:
+                return "<polygon points=\"19 13 15 13 15 9 13 9 13 13 9 13 9 15 13 15 13 19 15 19 15 15 19 15 19 13\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>";
+            case ToolbarControlTypes.ZOOM_OUT:
+                return "<rect x=\"9\" y=\"13\" width=\"10\" height=\"2\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>";
+            case ToolbarControlTypes.RESET_ZOOM:
+                return "<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>";
+            case ToolbarControlTypes.MAKE_FULLSCREEN:
+                return "<polygon points=\"21 2 21 4 26.59 4 17 13.58 18.41 15 28 5.41 28 11 30 11 30 2 21 2\"/><polygon points=\"15 18.42 13.59 17 4 26.59 4 21 2 21 2 30 11 30 11 28 5.41 28 15 18.42\"/>";
+            case ToolbarControlTypes.SHOW_AS_DATATABLE:
+                return "<rect x=\"4\" y=\"6\" width=\"18\" height=\"2\"/><rect x=\"4\" y=\"12\" width=\"18\" height=\"2\"/><rect x=\"4\" y=\"18\" width=\"18\" height=\"2\"/><rect x=\"4\" y=\"24\" width=\"18\" height=\"2\"/><rect x=\"26\" y=\"6\" width=\"2\" height=\"2\"/><rect x=\"26\" y=\"12\" width=\"2\" height=\"2\"/><rect x=\"26\" y=\"18\" width=\"2\" height=\"2\"/><rect x=\"26\" y=\"24\" width=\"2\" height=\"2\"/>";
+            case ToolbarControlTypes.EXPORT_CSV:
+                return "<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>";
+            case ToolbarControlTypes.EXPORT_JPG:
+                return "<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>";
+            case ToolbarControlTypes.EXPORT_PNG:
+                return "<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>"; // add more icons here
+            // svg icon must be with 32x32 viewBox
+            default:
+                throw Error('Not supported toolbar control type: ' + controlType);
+        }
+    };
+    Toolbar.buttonID = 0;
+    return Toolbar;
+}(Component));
+export { Toolbar };
+//# sourceMappingURL=../../../src/components/axes/toolbar.js.map

package/components/axes/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport { Events, RenderTypes, ToolbarControlTypes } from '../../interfaces';\nimport { Tools } from '../../tools';\n\n// D3 Imports\nimport { select } from 'd3-selection';\n\nexport class Toolbar extends Component {\n\tstatic buttonID = 0;\n\ttype = 'toolbar';\n\trenderType = RenderTypes.HTML;\n\n\t// overflow menu button to control background color\n\toverflowButton: any;\n\n\t// div options list element\n\toverflowMenu: any;\n\n\tinit() {\n\t\tconst bodyOnClickHandler = () => this.updateOverflowMenu(false);\n\n\t\t// Grab the tooltip element\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Toolbar.SHOW_OVERFLOW_MENU,\n\t\t\t() => {\n\t\t\t\tthis.renderOverflowMenu();\n\n\t\t\t\t// hide overflow menu if user clicks on somewhere in web page\n\t\t\t\tdocument.body.addEventListener('click', bodyOnClickHandler);\n\t\t\t}\n\t\t);\n\n\t\t// listen to hide overflow menu event to hide the overflow menu\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Toolbar.HIDE_OVERFLOW_MENU,\n\t\t\t() => {\n\t\t\t\t// // hide overflow menu if user clicks on somewhere in web page\n\t\t\t\tdocument.body.removeEventListener('click', bodyOnClickHandler);\n\t\t\t}\n\t\t);\n\t}\n\n\trender(animate = true) {\n\t\tconst container = this.getComponentContainer().attr('role', 'toolbar');\n\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'data',\n\t\t\t'loading'\n\t\t);\n\n\t\tif (isDataLoading) {\n\t\t\tcontainer.html('');\n\t\t\t// Set overflow menu to null if data is loading\n\t\t\t// This will render in a new overflow menu when data is done loading\n\t\t\tthis.overflowMenu = null;\n\t\t} else {\n\t\t\tif (!this.overflowMenu) {\n\t\t\t\tthis.overflowMenu = container\n\t\t\t\t\t.append('div')\n\t\t\t\t\t.attr(\n\t\t\t\t\t\t'class',\n\t\t\t\t\t\t'cds--overflow-menu-options cds--overflow-menu--flip cds--overflow-menu-options cds--overflow-menu--flip'\n\t\t\t\t\t)\n\t\t\t\t\t.attr('tabindex', -1)\n\t\t\t\t\t.attr('role', 'menu')\n\t\t\t\t\t.html(`<ul></ul>`);\n\t\t\t}\n\n\t\t\t// get the toolbar buttons\n\t\t\tconst {\n\t\t\t\tbuttonList,\n\t\t\t\toverflowMenuItemList,\n\t\t\t} = this.getControlConfigs();\n\n\t\t\t// overflow button is required only if overflow menu item list is valid\n\t\t\tif (!!overflowMenuItemList) {\n\t\t\t\tbuttonList.push(this.getOverflowButtonConfig());\n\t\t\t}\n\n\t\t\tconst toolbarControls = container\n\t\t\t\t.selectAll('div.toolbar-control')\n\t\t\t\t.data(buttonList, (button) => button.id);\n\n\t\t\ttoolbarControls.exit().remove();\n\n\t\t\tconst enteringToolbarControls = toolbarControls\n\t\t\t\t.enter()\n\t\t\t\t.append('div')\n\t\t\t\t.attr(\n\t\t\t\t\t'class',\n\t\t\t\t\t'toolbar-control cds--overflow-menu cds--overflow-menu'\n\t\t\t\t)\n\t\t\t\t.attr('role', 'button');\n\n\t\t\tconst self = this;\n\t\t\tconst allToolbarControls = enteringToolbarControls\n\t\t\t\t.merge(toolbarControls)\n\t\t\t\t.classed('disabled', (d) => d.shouldBeDisabled())\n\t\t\t\t.attr('aria-disabled', (d) => d.shouldBeDisabled())\n\t\t\t\t.attr('aria-label', (d) => d.title)\n\t\t\t\t.html(\n\t\t\t\t\t(d) => `\n\t\t\t<button\n\t\t\t\tclass=\"cds--overflow-menu__trigger cds--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t`control-${d.id}`\n\t\t\t\t)}\" aria-label=\"${d.title}\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: ${\n\t\t\t\t\td.iconSVG.width !== undefined ? d.iconSVG.width : '20px'\n\t\t\t\t}; height: ${\n\t\t\t\t\t\td.iconSVG.height !== undefined\n\t\t\t\t\t\t\t? d.iconSVG.height\n\t\t\t\t\t\t\t: '20px'\n\t\t\t\t\t}\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cds--overflow-menu__icon cds--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t${d.iconSVG.content}\n\t\t\t\t</svg>\n\t\t\t</button>`\n\t\t\t\t)\n\t\t\t\t.each(function (d, index) {\n\t\t\t\t\tselect(this)\n\t\t\t\t\t\t.select('button')\n\t\t\t\t\t\t.on('click', (event) => {\n\t\t\t\t\t\t\tif (!d.shouldBeDisabled()) {\n\t\t\t\t\t\t\t\tself.triggerFunctionAndEvent(d, event, this);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.on('keydown', (event: KeyboardEvent) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t(event.key && event.key === 'Enter') ||\n\t\t\t\t\t\t\t\tevent.key === ' '\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tself.triggerFunctionAndEvent(d, event, this);\n\t\t\t\t\t\t\t} else if (event.key && event.key === 'ArrowLeft') {\n\t\t\t\t\t\t\t\tself.focusOnPreviousEnabledToolbarItem(index);\n\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\tevent.key &&\n\t\t\t\t\t\t\t\tevent.key === 'ArrowRight'\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tself.focusOnNextEnabledToolbarItem(index);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\tthis.overflowButton = this.getComponentContainer().select(\n\t\t\t\t`button.cds--overflow-menu__trigger#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t'control-toolbar-overflow-menu'\n\t\t\t\t)}`\n\t\t\t);\n\t\t}\n\t}\n\n\trenderOverflowMenu() {\n\t\tconst { overflowMenuItemList } = this.getControlConfigs();\n\n\t\tconst overflowMenuControls = this.overflowMenu\n\t\t\t.select('ul')\n\t\t\t.selectAll('li.cds--overflow-menu-options__option')\n\t\t\t.data(overflowMenuItemList, (button) =>\n\t\t\t\tTools.getProperty(button, 'id')\n\t\t\t);\n\n\t\toverflowMenuControls.exit().remove();\n\n\t\tconst enteringOverflowMenuControls = overflowMenuControls\n\t\t\t.enter()\n\t\t\t.append('li')\n\t\t\t.attr('id', (d) =>\n\t\t\t\tthis.services.domUtils.generateElementIDString(\n\t\t\t\t\t`control-${d.id}`\n\t\t\t\t)\n\t\t\t)\n\t\t\t.attr(\n\t\t\t\t'class',\n\t\t\t\t'cds--overflow-menu-options__option cds--overflow-menu-options__option'\n\t\t\t)\n\t\t\t.attr('role', 'menuitem');\n\n\t\tenteringOverflowMenuControls\n\t\t\t.append('button')\n\t\t\t.attr(\n\t\t\t\t'class',\n\t\t\t\t'cds--overflow-menu-options__btn cds--overflow-menu-options__btn'\n\t\t\t);\n\n\t\tenteringOverflowMenuControls\n\t\t\t.merge(overflowMenuControls)\n\t\t\t.classed('cds--overflow-menu-options__option--disabled', (d) =>\n\t\t\t\td.shouldBeDisabled()\n\t\t\t)\n\t\t\t.classed('cds--overflow-menu-options__option--disabled', (d) =>\n\t\t\t\td.shouldBeDisabled()\n\t\t\t)\n\t\t\t.attr('aria-disabled', (d) => d.shouldBeDisabled())\n\t\t\t.selectAll('button')\n\t\t\t.text((d) => d.text);\n\t}\n\n\tisOverflowMenuOpen() {\n\t\treturn this.overflowMenu.classed('is-open');\n\t}\n\n\t// show/hide overflow menu\n\tupdateOverflowMenu(show: boolean) {\n\t\tif (!this.overflowMenu) {\n\t\t\treturn;\n\t\t}\n\t\tthis.overflowMenu.classed('is-open', show);\n\n\t\t// update overflow button background\n\t\tif (this.overflowButton) {\n\t\t\tthis.overflowButton.attr('aria-expanded', show);\n\t\t\tselect(this.overflowButton.node().parentNode)\n\t\t\t\t.classed('cds--overflow-menu--open', show)\n\t\t\t\t.classed('cds--overflow-menu--open', show);\n\t\t}\n\n\t\tif (show) {\n\t\t\tthis.services.events.dispatchEvent(\n\t\t\t\tEvents.Toolbar.SHOW_OVERFLOW_MENU\n\t\t\t);\n\t\t} else {\n\t\t\tthis.services.events.dispatchEvent(\n\t\t\t\tEvents.Toolbar.HIDE_OVERFLOW_MENU\n\t\t\t);\n\t\t}\n\t}\n\n\t// Toolbar controllers\n\tfocusOnPreviousEnabledToolbarItem(currentItemIndex) {\n\t\tconst buttonList = this.getToolbarButtonItems();\n\t\tlet previousItemIndex = buttonList.length;\n\n\t\tfor (let i = currentItemIndex - 1; i >= 0; i--) {\n\t\t\tconst previousButtonItem = buttonList[i];\n\t\t\tif (!previousButtonItem.shouldBeDisabled()) {\n\t\t\t\tpreviousItemIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// only if previous enabled menu item found\n\t\tif (previousItemIndex < buttonList.length) {\n\t\t\tconst previousItemNode = select(\n\t\t\t\t`button#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t`control-${buttonList[previousItemIndex].id}`\n\t\t\t\t)}`\n\t\t\t).node();\n\t\t\tif ('focus' in previousItemNode) {\n\t\t\t\tpreviousItemNode.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tfocusOnNextEnabledToolbarItem(currentItemIndex) {\n\t\tconst buttonList = this.getToolbarButtonItems();\n\t\tlet nextItemIndex = -1;\n\n\t\tfor (let i = currentItemIndex + 1; i < buttonList.length; i++) {\n\t\t\tconst nextOverflowMenuItem = buttonList[i];\n\t\t\tif (!nextOverflowMenuItem.shouldBeDisabled()) {\n\t\t\t\tnextItemIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// only if next enabled menu item found\n\t\tif (nextItemIndex > -1) {\n\t\t\tconst nextItemNode = select(\n\t\t\t\t`button#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t`control-${buttonList[nextItemIndex].id}`\n\t\t\t\t)}`\n\t\t\t).node();\n\n\t\t\tif ('focus' in nextItemNode) {\n\t\t\t\tnextItemNode.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tfocusOnPreviousEnabledMenuItem(currentItemIndex) {\n\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\tlet previousItemIndex = overflowMenuItems.length;\n\n\t\tfor (let i = currentItemIndex - 1; i >= 0; i--) {\n\t\t\tconst previousOverflowMenuItem = overflowMenuItems[i];\n\t\t\tif (!previousOverflowMenuItem.shouldBeDisabled()) {\n\t\t\t\tpreviousItemIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// only if previous enabled menu item found\n\t\tif (previousItemIndex < overflowMenuItems.length) {\n\t\t\tconst previousItemNode = select(\n\t\t\t\t`#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t`control-${overflowMenuItems[previousItemIndex].id}`\n\t\t\t\t)} button`\n\t\t\t).node();\n\t\t\tif ('focus' in previousItemNode) {\n\t\t\t\tpreviousItemNode.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tfocusOnNextEnabledMenuItem(currentItemIndex) {\n\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\tlet nextItemIndex = -1;\n\n\t\tfor (let i = currentItemIndex + 1; i < overflowMenuItems.length; i++) {\n\t\t\tconst nextOverflowMenuItem = overflowMenuItems[i];\n\t\t\tif (!nextOverflowMenuItem.shouldBeDisabled()) {\n\t\t\t\tnextItemIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// only if next enabled menu item found\n\t\tif (nextItemIndex > -1) {\n\t\t\tconst nextItemNode = select(\n\t\t\t\t`#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t`control-${overflowMenuItems[nextItemIndex].id}`\n\t\t\t\t)} button`\n\t\t\t).node();\n\n\t\t\tif ('focus' in nextItemNode) {\n\t\t\t\tnextItemNode.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\ttoggleOverflowMenu(event) {\n\t\tif (this.isOverflowMenuOpen()) {\n\t\t\t// hide overflow menu\n\t\t\tthis.updateOverflowMenu(false);\n\t\t} else {\n\t\t\t// show overflow menu\n\t\t\tthis.updateOverflowMenu(true);\n\n\t\t\t// setup overflow menu item event listener\n\t\t\tconst self = this;\n\t\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\t\toverflowMenuItems.forEach((menuItem, index) => {\n\t\t\t\tconst element = select(\n\t\t\t\t\t`#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t\t`control-${menuItem.id}`\n\t\t\t\t\t)}`\n\t\t\t\t);\n\t\t\t\tif (element !== null) {\n\t\t\t\t\telement.on('click', () => {\n\t\t\t\t\t\tself.triggerFunctionAndEvent(\n\t\t\t\t\t\t\tmenuItem,\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\telement.node()\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// hide overflow menu\n\t\t\t\t\t\tself.updateOverflowMenu(false);\n\t\t\t\t\t});\n\n\t\t\t\t\telement.on('keydown', (keyEvent: KeyboardEvent) => {\n\t\t\t\t\t\tif (keyEvent && keyEvent.key === 'Enter') {\n\t\t\t\t\t\t\tself.triggerFunctionAndEvent(\n\t\t\t\t\t\t\t\tmenuItem,\n\t\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\t\telement.node()\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} else if (keyEvent && keyEvent.key === 'ArrowUp') {\n\t\t\t\t\t\t\t// focus on previous menu item\n\t\t\t\t\t\t\tself.focusOnPreviousEnabledMenuItem(index);\n\t\t\t\t\t\t} else if (keyEvent && keyEvent.key === 'ArrowDown') {\n\t\t\t\t\t\t\t// focus on next menu item\n\t\t\t\t\t\t\tself.focusOnNextEnabledMenuItem(index);\n\t\t\t\t\t\t} else if (keyEvent && keyEvent.key === 'Escape') {\n\t\t\t\t\t\t\tself.updateOverflowMenu(false);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Not hide overflow menu by keyboard arrow up/down event\n\t\t\t\t\t\t// Prevent page from scrolling up/down\n\t\t\t\t\t\tkeyEvent.preventDefault();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// default to focus on the first enabled menu item\n\t\t\tself.focusOnNextEnabledMenuItem(-1);\n\t\t}\n\n\t\t// propogation should not be stopped for keyboard events\n\t\tif (!!event) {\n\t\t\tevent.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t// Calls passed function && dispatches event\n\ttriggerFunctionAndEvent(control, event, element?) {\n\t\t// Call custom function only if it exists\n\t\tif (typeof control.clickFunction === 'function') {\n\t\t\tcontrol.clickFunction(event);\n\t\t}\n\n\t\t// Dispatch selection event\n\t\tthis.services.events.dispatchEvent(Events.Toolbar.BUTTON_CLICK, {\n\t\t\tcontrol,\n\t\t\tevent,\n\t\t\telement,\n\t\t});\n\t}\n\n\tgetControlConfigs() {\n\t\tconst numberOfIcons =\n\t\t\tTools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons') -\n\t\t\t1;\n\t\tconst controls = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'toolbar',\n\t\t\t'controls'\n\t\t);\n\n\t\tconst overflowSpecificControls = [];\n\t\tconst buttonList = [];\n\t\tconst overflowList = [];\n\n\t\tcontrols.forEach((control) => {\n\t\t\tlet controlConfig = null;\n\t\t\t// check if button is custom or default control\n\t\t\tif (control.type === ToolbarControlTypes.CUSTOM) {\n\t\t\t\t// add generic id if missing\n\t\t\t\tif (Tools.getProperty(control, 'id') === null) {\n\t\t\t\t\t// add id directly to the data passed so that id isn't reassigned on rerender\n\t\t\t\t\tcontrol.id = `toolbar-button-${Toolbar.buttonID++}`;\n\t\t\t\t}\n\t\t\t\t// define function if missing\n\t\t\t\tif (Tools.getProperty(control, 'shouldBeDisabled') === null) {\n\t\t\t\t\tcontrol.shouldBeDisabled = () => false;\n\t\t\t\t}\n\n\t\t\t\tcontrolConfig = control;\n\t\t\t} else {\n\t\t\t\tcontrolConfig = this.getControlConfigByType(control.type);\n\t\t\t}\n\n\t\t\t// add to list if config is valid\n\t\t\tif (controlConfig) {\n\t\t\t\tcontrolConfig.text = control.text ? control.text : control.type;\n\n\t\t\t\tif (controlConfig.id.indexOf('toolbar-export') !== -1) {\n\t\t\t\t\toverflowSpecificControls.push(controlConfig);\n\t\t\t\t} else if (buttonList.length < numberOfIcons) {\n\t\t\t\t\t// check if icon exists else assign to the overflow list\n\t\t\t\t\tif (\n\t\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\t\tcontrolConfig,\n\t\t\t\t\t\t\t'iconSVG',\n\t\t\t\t\t\t\t'content'\n\t\t\t\t\t\t) === null\n\t\t\t\t\t) {\n\t\t\t\t\t\toverflowList.push(controlConfig);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tbuttonList.push(controlConfig);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\toverflowList.push(controlConfig);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\t// Ensures the `export` controls are always at the bottom\n\t\toverflowList.push(...overflowSpecificControls);\n\n\t\tif (!overflowList.length) {\n\t\t\treturn {\n\t\t\t\tbuttonList,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tbuttonList,\n\t\t\toverflowMenuItemList: overflowList,\n\t\t};\n\t}\n\n\tgetToolbarButtonItems() {\n\t\tconst { buttonList, overflowMenuItemList } = this.getControlConfigs();\n\t\tif (!!overflowMenuItemList) {\n\t\t\tbuttonList.push(this.getOverflowButtonConfig());\n\t\t}\n\t\tif (!!buttonList) {\n\t\t\treturn buttonList;\n\t\t}\n\n\t\treturn [];\n\t}\n\n\tgetOverflowMenuItems() {\n\t\tconst { overflowMenuItemList } = this.getControlConfigs();\n\t\tif (!!overflowMenuItemList) {\n\t\t\treturn overflowMenuItemList;\n\t\t} else {\n\t\t\treturn [];\n\t\t}\n\t}\n\n\t// special button config for overflow button\n\tgetOverflowButtonConfig() {\n\t\treturn {\n\t\t\tid: 'toolbar-overflow-menu',\n\t\t\ttitle: 'More options',\n\t\t\tshouldBeDisabled: () => false,\n\t\t\ticonSVG: {\n\t\t\t\tcontent: `<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"24\" r=\"2\"></circle>`,\n\t\t\t},\n\t\t\tclickFunction: (event) => this.toggleOverflowMenu(event),\n\t\t};\n\t}\n\n\tgetControlConfigByType(controlType: ToolbarControlTypes) {\n\t\tconst isZoomBarEnabled =\n\t\t\tthis.services.zoom &&\n\t\t\tthis.services.zoom.isZoomBarEnabled() &&\n\t\t\t!this.services.zoom.isEmptyState();\n\n\t\tconst displayData = this.model.getDisplayData();\n\n\t\tlet controlConfig;\n\t\tswitch (controlType) {\n\t\t\tcase ToolbarControlTypes.ZOOM_IN:\n\t\t\t\tif (isZoomBarEnabled) {\n\t\t\t\t\tcontrolConfig = {\n\t\t\t\t\t\tid: 'toolbar-zoomIn',\n\t\t\t\t\t\ttitle: 'Zoom in',\n\t\t\t\t\t\tshouldBeDisabled: () =>\n\t\t\t\t\t\t\tthis.services.zoom.isMinZoomDomain(),\n\t\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t\t},\n\t\t\t\t\t\tclickFunction: () => this.services.zoom.zoomIn(),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.ZOOM_OUT:\n\t\t\t\tif (isZoomBarEnabled) {\n\t\t\t\t\tcontrolConfig = {\n\t\t\t\t\t\tid: 'toolbar-zoomOut',\n\t\t\t\t\t\ttitle: 'Zoom out',\n\t\t\t\t\t\tshouldBeDisabled: () =>\n\t\t\t\t\t\t\tthis.services.zoom.isMaxZoomDomain(),\n\t\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t\t},\n\t\t\t\t\t\tclickFunction: () => this.services.zoom.zoomOut(),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.RESET_ZOOM:\n\t\t\t\tif (isZoomBarEnabled) {\n\t\t\t\t\tcontrolConfig = {\n\t\t\t\t\t\tid: 'toolbar-resetZoom',\n\t\t\t\t\t\ttitle: 'Reset zoom',\n\t\t\t\t\t\tshouldBeDisabled: () =>\n\t\t\t\t\t\t\tthis.services.zoom.isMaxZoomDomain(),\n\t\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t\t},\n\t\t\t\t\t\tclickFunction: () =>\n\t\t\t\t\t\t\tthis.services.zoom.resetZoomDomain(),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.MAKE_FULLSCREEN:\n\t\t\t\tcontrolConfig = {\n\t\t\t\t\tid: 'toolbar-makefullscreen',\n\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t\twidth: '15px',\n\t\t\t\t\t\theight: '15px',\n\t\t\t\t\t},\n\t\t\t\t\ttitle: 'Make fullscreen',\n\t\t\t\t\tshouldBeDisabled: () => false,\n\t\t\t\t\tclickFunction: () => {\n\t\t\t\t\t\tthis.services.domUtils.toggleFullscreen();\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.SHOW_AS_DATATABLE:\n\t\t\t\tcontrolConfig = {\n\t\t\t\t\tid: 'toolbar-showasdatatable',\n\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t},\n\t\t\t\t\ttitle: 'Show as table',\n\t\t\t\t\tshouldBeDisabled: () => displayData.length === 0,\n\t\t\t\t\tclickFunction: () =>\n\t\t\t\t\t\tthis.services.events.dispatchEvent(Events.Modal.SHOW),\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.EXPORT_CSV:\n\t\t\t\tcontrolConfig = {\n\t\t\t\t\tid: 'toolbar-export-CSV',\n\t\t\t\t\ttitle: 'Export as CSV',\n\t\t\t\t\tshouldBeDisabled: () => false,\n\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t},\n\t\t\t\t\tclickFunction: () => this.model.exportToCSV(),\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.EXPORT_PNG:\n\t\t\t\tcontrolConfig = {\n\t\t\t\t\tid: 'toolbar-export-PNG',\n\t\t\t\t\ttitle: 'Export as PNG',\n\t\t\t\t\tshouldBeDisabled: () => false,\n\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t},\n\t\t\t\t\tclickFunction: () => this.services.domUtils.exportToPNG(),\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.EXPORT_JPG:\n\t\t\t\tcontrolConfig = {\n\t\t\t\t\tid: 'toolbar-export-JPG',\n\t\t\t\t\ttitle: 'Export as JPG',\n\t\t\t\t\tshouldBeDisabled: () => false,\n\t\t\t\t\ticonSVG: {\n\t\t\t\t\t\tcontent: this.getControlIconByType(controlType),\n\t\t\t\t\t},\n\t\t\t\t\tclickFunction: () => this.services.domUtils.exportToJPG(),\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\t// add more toolbar control configuration here\n\n\t\t\tdefault:\n\t\t\t\tthrow Error(\n\t\t\t\t\t'Not supported toolbar control type: ' + controlType\n\t\t\t\t);\n\t\t}\n\t\treturn controlConfig;\n\t}\n\n\tgetControlIconByType(controlType: ToolbarControlTypes) {\n\t\tswitch (controlType) {\n\t\t\tcase ToolbarControlTypes.ZOOM_IN:\n\t\t\t\treturn `<polygon points=\"19 13 15 13 15 9 13 9 13 13 9 13 9 15 13 15 13 19 15 19 15 15 19 15 19 13\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>`;\n\t\t\tcase ToolbarControlTypes.ZOOM_OUT:\n\t\t\t\treturn `<rect x=\"9\" y=\"13\" width=\"10\" height=\"2\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>`;\n\t\t\tcase ToolbarControlTypes.RESET_ZOOM:\n\t\t\t\treturn `<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>`;\n\t\t\tcase ToolbarControlTypes.MAKE_FULLSCREEN:\n\t\t\t\treturn `<polygon points=\"21 2 21 4 26.59 4 17 13.58 18.41 15 28 5.41 28 11 30 11 30 2 21 2\"/><polygon points=\"15 18.42 13.59 17 4 26.59 4 21 2 21 2 30 11 30 11 28 5.41 28 15 18.42\"/>`;\n\t\t\tcase ToolbarControlTypes.SHOW_AS_DATATABLE:\n\t\t\t\treturn `<rect x=\"4\" y=\"6\" width=\"18\" height=\"2\"/><rect x=\"4\" y=\"12\" width=\"18\" height=\"2\"/><rect x=\"4\" y=\"18\" width=\"18\" height=\"2\"/><rect x=\"4\" y=\"24\" width=\"18\" height=\"2\"/><rect x=\"26\" y=\"6\" width=\"2\" height=\"2\"/><rect x=\"26\" y=\"12\" width=\"2\" height=\"2\"/><rect x=\"26\" y=\"18\" width=\"2\" height=\"2\"/><rect x=\"26\" y=\"24\" width=\"2\" height=\"2\"/>`;\n\t\t\tcase ToolbarControlTypes.EXPORT_CSV:\n\t\t\t\treturn `<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>`;\n\t\t\tcase ToolbarControlTypes.EXPORT_JPG:\n\t\t\t\treturn `<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>`;\n\t\t\tcase ToolbarControlTypes.EXPORT_PNG:\n\t\t\t\treturn `<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>`; // add more icons here\n\t\t\t// svg icon must be with 32x32 viewBox\n\n\t\t\tdefault:\n\t\t\t\tthrow Error(\n\t\t\t\t\t'Not supported toolbar control type: ' + controlType\n\t\t\t\t);\n\t\t}\n\t}\n}\n"]}