@carbon/charts-vue 0.50.10 → 0.51.3

package/charts-vue.common.js

@@ -9967,6 +9967,20 @@ var model_ChartModel = /** @class */ (function () {
         });
         return tabularData;
     };
+    ChartModel.prototype.getTabularDataArray = function () {
+        return [];
+    };
+    ChartModel.prototype.exportToCSV = function () {
+        var data = this.getTabularDataArray().map(function (row) {
+            return row.map(function (column) { return "\"" + column + "\""; });
+        });
+        var csvString = '', csvData = '';
+        data.forEach(function (d, i) {
+            csvData = d.join(',');
+            csvString += i < data.length ? csvData + '\n' : csvData;
+        });
+        this.services.files.downloadCSV(csvString, 'myChart.csv');
+    };
     ChartModel.prototype.getTabularData = function (data) {
         // if data is not an array
         if (!Array.isArray(data)) {
@@ -18226,11 +18240,25 @@ var legend_Legend = /** @class */ (function (_super) {
                 hoveredElement: hoveredItem,
             });
         });
-        svg.selectAll('div.legend-item div.checkbox').on('keyup', function (event, d) {
-            if (event.key && (event.key === 'Enter' || event.key === ' ')) {
+        svg.selectAll('div.legend-item div.checkbox').on('keyup', function (event) {
+            if (event.key && event.key === 'Tab') {
+                // Higlight group
+                self.services.events.dispatchEvent(Events.Legend.ITEM_HOVER, {
+                    hoveredElement: src_select(this),
+                });
+            }
+        });
+        svg.selectAll('div.legend-item div.checkbox').on('keydown', function (event, d) {
+            if (event.key && event.key === ' ') {
                 event.preventDefault();
                 self.model.toggleDataLabel(d.name);
             }
+            else if (event.key && event.key === 'Tab') {
+                // Unhiglight group
+                self.services.events.dispatchEvent(Events.Legend.ITEM_MOUSEOUT, {
+                    hoveredElement: src_select(this),
+                });
+            }
         });
         svg.selectAll('g.additional-item').on('mouseover', function (event) {
             var hoveredItem = src_select(this);
@@ -26929,17 +26957,6 @@ var bullet_Bullet = /** @class */ (function (_super) {
         // Add event listeners to elements drawn
         this.addEventListeners();
     };
-    Bullet.prototype.getMatchingRangeIndexForDatapoint = function (datum) {
-        var matchingRangeIndex;
-        for (var i = datum.ranges.length - 1; i > 0; i--) {
-            var range = datum.ranges[i];
-            if (datum.value >= range) {
-                matchingRangeIndex = i;
-                return matchingRangeIndex;
-            }
-        }
-        return 0;
-    };
     Bullet.prototype.addEventListeners = function () {
         var self = this;
         var options = this.getOptions();
@@ -26957,7 +26974,7 @@ var bullet_Bullet = /** @class */ (function (_super) {
                 datum: datum,
             });
             var performanceAreaTitles = tools_Tools.getProperty(options, 'bullet', 'performanceAreaTitles');
-            var matchingRangeIndex = self.getMatchingRangeIndexForDatapoint(datum);
+            var matchingRangeIndex = self.model.getMatchingRangeIndexForDatapoint(datum);
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 event: event,
                 hoveredElement: hoveredElement,
@@ -31561,7 +31578,9 @@ function polarToCartesianCoords(a, r, t) {
     if (t === void 0) { t = { x: 0, y: 0 }; }
     var x = r * Math.cos(a) + t.x;
     var y = r * Math.sin(a) + t.y;
-    return { x: x, y: y };
+    // NaN is rendered at coordinate 0 in browsers
+    // By setting it to 0, further operations can be performed
+    return { x: isNaN(x) ? 0 : x, y: isNaN(y) ? 0 : y };
 }
 // Return the distance between a point (described with polar coordinates)
 // on a circumference and the vertical diameter.
@@ -35375,8 +35394,9 @@ var axis_Axis = /** @class */ (function (_super) {
                     var mockTextPiece = invisibleAxisRef
                         .append('text')
                         .text('A');
-                    var averageLetterWidth_1 = mockTextPiece.node().getBBox()
-                        .width;
+                    var averageLetterWidth_1 = dom_utils_DOMUtils.getSVGElementSize(mockTextPiece.node(), {
+                        useBBox: true,
+                    }).width;
                     var lastStartPosition_1;
                     // Find out whether any text nodes roughly collide
                     invisibleAxisRef.selectAll('g.tick').each(function () {
@@ -38551,6 +38571,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 .append('div')
                 .attr('class', 'toolbar-control bx--overflow-menu')
                 .attr('role', 'button');
+            var self_1 = this;
             var allToolbarControls = enteringToolbarControls
                 .merge(toolbarControls)
                 .classed('disabled', function (d) {
@@ -38561,16 +38582,23 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             })
                 .attr('aria-label', function (d) { return d.title; })
                 .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--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.iconWidth !== undefined ? d.iconWidth : '20px') + "; height: " + (d.iconWidth !== undefined ? d.iconHeight : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVGContent + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
-                .each(function (d) {
+                .each(function (d, index) {
                 src_select(this)
                     .select('button')
                     .on('click', !d.shouldBeDisabled() ? d.clickFunction : null)
-                    .on('keyup', function (event) {
+                    .on('keydown', function (event) {
                     if ((event.key && event.key === 'Enter') ||
                         event.key === ' ') {
                         event.preventDefault();
                         d.clickFunction();
                     }
+                    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.bx--overflow-menu__trigger#" + this.services.domUtils.generateElementIDString('control-toolbar-overflow-menu'));
@@ -38624,6 +38652,43 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             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 = src_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 = src_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;
@@ -38670,7 +38735,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             // show overflow menu
             this.updateOverflowMenu(true);
             // setup overflow menu item event listener
-            var self_1 = this;
+            var self_2 = this;
             var overflowMenuItems = this.getOverflowMenuItems();
             overflowMenuItems.forEach(function (menuItem, index) {
                 var element = src_select("#" + _this.services.domUtils.generateElementIDString("control-" + menuItem.id));
@@ -38679,29 +38744,37 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         // call the specified function
                         menuItem.clickFunction();
                         // hide overflow menu
-                        self_1.updateOverflowMenu(false);
+                        self_2.updateOverflowMenu(false);
                     });
-                    element.on('keyup', function () {
-                        if (event.key === 'Enter') {
+                    element.on('keydown', function (keyEvent) {
+                        if (keyEvent && keyEvent.key === 'Enter') {
                             // call the specified function
                             menuItem.clickFunction();
                         }
-                        else if (event.key === 'ArrowUp') {
+                        else if (keyEvent && keyEvent.key === 'ArrowUp') {
                             // focus on previous menu item
-                            self_1.focusOnPreviousEnabledMenuItem(index);
+                            self_2.focusOnPreviousEnabledMenuItem(index);
                         }
-                        else if (event.key === 'ArrowDown') {
+                        else if (keyEvent && keyEvent.key === 'ArrowDown') {
                             // focus on next menu item
-                            self_1.focusOnNextEnabledMenuItem(index);
+                            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_1.focusOnNextEnabledMenuItem(-1);
+            self_2.focusOnNextEnabledMenuItem(-1);
+        }
+        // propogation should not be stopped for keyboard events
+        if (!!event) {
+            event.stopImmediatePropagation();
         }
-        event.stopImmediatePropagation();
     };
     Toolbar.prototype.getControlConfigs = function () {
         var _this = this;
@@ -38734,6 +38807,16 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             overflowMenuItemList: controlList.concat(overflowSpecificControls),
         };
     };
+    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) {
@@ -39712,46 +39795,66 @@ var chart_Chart = /** @class */ (function () {
         this.model.set({ destroyed: true }, { skipUpdate: true });
     };
     Chart.prototype.getChartComponents = function (graphFrameComponents, configs) {
-        var titleComponent = {
-            id: 'title',
-            components: [new title_Title(this.model, this.services)],
-            growth: LayoutGrowth.PREFERRED,
-        };
+        var options = this.model.getOptions();
+        var toolbarEnabled = tools_Tools.getProperty(options, 'toolbar', 'enabled');
         var legendComponent = {
             id: 'legend',
             components: [new legend_Legend(this.model, this.services)],
             growth: LayoutGrowth.PREFERRED,
         };
         // if canvas zoom is enabled
-        var isZoomEnabled = tools_Tools.getProperty(this.model.getOptions(), 'canvasZoom', 'enabled');
+        var isZoomEnabled = tools_Tools.getProperty(options, 'canvasZoom', 'enabled');
         if (isZoomEnabled && isZoomEnabled === true) {
             graphFrameComponents.push(new canvas_chart_clip_CanvasChartClip(this.model, this.services));
         }
+        var titleAvailable = !!this.model.getOptions().title;
+        var titleComponent = {
+            id: 'title',
+            components: [new title_Title(this.model, this.services)],
+            growth: LayoutGrowth.STRETCH,
+        };
+        var toolbarComponent = {
+            id: 'toolbar',
+            components: [new toolbar_Toolbar(this.model, this.services)],
+            growth: LayoutGrowth.PREFERRED,
+        };
+        var headerComponent = {
+            id: 'header',
+            components: [
+                new layout_LayoutComponent(this.model, this.services, chart_spreadArrays([
+                    // always add title to keep layout correct
+                    titleComponent
+                ], (toolbarEnabled ? [toolbarComponent] : [])), {
+                    direction: LayoutDirection.ROW,
+                    alignItems: LayoutAlignItems.CENTER,
+                }),
+            ],
+            growth: LayoutGrowth.PREFERRED,
+        };
         var graphFrameComponent = {
             id: 'graph-frame',
             components: graphFrameComponents,
             growth: LayoutGrowth.STRETCH,
-            renderType: tools_Tools.getProperty(configs, 'graphFrameRenderType') || RenderTypes.SVG,
+            renderType: tools_Tools.getProperty(configs, 'graphFrameRenderType') ||
+                RenderTypes.SVG,
         };
         var isLegendEnabled = tools_Tools.getProperty(configs, 'excludeLegend') !== true &&
-            this.model.getOptions().legend.enabled !== false;
+            options.legend.enabled !== false;
         // TODORF - REUSE BETWEEN AXISCHART & CHART
         // Decide the position of the legend in reference to the chart
         var fullFrameComponentDirection = LayoutDirection.COLUMN;
         if (isLegendEnabled) {
-            var legendPosition = tools_Tools.getProperty(this.model.getOptions(), 'legend', 'position');
+            var legendPosition = tools_Tools.getProperty(options, 'legend', 'position');
             if (legendPosition === 'left') {
                 fullFrameComponentDirection = LayoutDirection.ROW;
-                if (!this.model.getOptions().legend.orientation) {
-                    this.model.getOptions().legend.orientation =
-                        LegendOrientations.VERTICAL;
+                if (!options.legend.orientation) {
+                    options.legend.orientation = LegendOrientations.VERTICAL;
                 }
             }
             else if (legendPosition === 'right') {
                 fullFrameComponentDirection = LayoutDirection.ROW_REVERSE;
-                if (!this.model.getOptions().legend.orientation) {
-                    this.model.getOptions().legend.orientation =
-                        LegendOrientations.VERTICAL;
+                if (!options.legend.orientation) {
+                    options.legend.orientation = LegendOrientations.VERTICAL;
                 }
             }
             else if (legendPosition === 'bottom') {
@@ -39776,11 +39879,13 @@ var chart_Chart = /** @class */ (function () {
         };
         // Add chart title if it exists
         var topLevelLayoutComponents = [];
-        if (this.model.getOptions().title) {
-            topLevelLayoutComponents.push(titleComponent);
+        if (titleAvailable || toolbarEnabled) {
+            topLevelLayoutComponents.push(headerComponent);
             var titleSpacerComponent = {
                 id: 'spacer',
-                components: [new spacer_Spacer(this.model, this.services)],
+                components: [
+                    new spacer_Spacer(this.model, this.services, toolbarEnabled ? { size: 15 } : undefined),
+                ],
                 growth: LayoutGrowth.PREFERRED,
             };
             topLevelLayoutComponents.push(titleSpacerComponent);
@@ -39909,17 +40014,6 @@ var cartesian_charts_ChartModelCartesian = /** @class */ (function (_super) {
             : [])); }));
         return result;
     };
-    ChartModelCartesian.prototype.exportToCSV = function () {
-        var data = this.getTabularDataArray().map(function (row) {
-            return row.map(function (column) { return "\"" + column + "\""; });
-        });
-        var csvString = '', csvData = '';
-        data.forEach(function (d, i) {
-            csvData = d.join(',');
-            csvString += i < data.length ? csvData + '\n' : csvData;
-        });
-        this.services.files.downloadCSV(csvString, 'myChart.csv');
-    };
     ChartModelCartesian.prototype.setData = function (newData) {
         var data;
         if (newData) {
@@ -40533,6 +40627,13 @@ var model_boxplot_extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var boxplot_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 // Internal Imports
 
 
@@ -40618,6 +40719,53 @@ var boxplot_BoxplotChartModel = /** @class */ (function (_super) {
         }
         return boxplotData;
     };
+    BoxplotChartModel.prototype.getTabularDataArray = function () {
+        var options = this.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var boxplotData = this.getBoxplotData();
+        var result = boxplot_spreadArrays([
+            [
+                'Group',
+                'Minimum',
+                'Q1',
+                'Median',
+                'Q3',
+                'Maximum',
+                'IQR',
+                'Outlier(s)',
+            ]
+        ], boxplotData.map(function (datum) {
+            var outliers = tools_Tools.getProperty(datum, 'outliers');
+            if (outliers === null || outliers.length === 0) {
+                outliers = ['&ndash;'];
+            }
+            return [
+                datum[groupMapsTo],
+                tools_Tools.getProperty(datum, 'whiskers', 'min') !== null
+                    ? tools_Tools.getProperty(datum, 'whiskers', 'min').toLocaleString()
+                    : '&ndash;',
+                tools_Tools.getProperty(datum, 'quartiles', 'q_25') !== null
+                    ? tools_Tools.getProperty(datum, 'quartiles', 'q_25').toLocaleString()
+                    : '&ndash;',
+                tools_Tools.getProperty(datum, 'quartiles', 'q_50') !== null
+                    ? tools_Tools.getProperty(datum, 'quartiles', 'q_50').toLocaleString()
+                    : '&ndash;',
+                tools_Tools.getProperty(datum, 'quartiles', 'q_75') !== null
+                    ? tools_Tools.getProperty(datum, 'quartiles', 'q_75').toLocaleString()
+                    : '&ndash;',
+                tools_Tools.getProperty(datum, 'whiskers', 'max') !== null
+                    ? tools_Tools.getProperty(datum, 'whiskers', 'max').toLocaleString()
+                    : '&ndash;',
+                tools_Tools.getProperty(datum, 'quartiles', 'q_75') !== null &&
+                    tools_Tools.getProperty(datum, 'quartiles', 'q_25') !== null
+                    ? (tools_Tools.getProperty(datum, 'quartiles', 'q_75') -
+                        tools_Tools.getProperty(datum, 'quartiles', 'q_25')).toLocaleString()
+                    : '&ndash;',
+                outliers.map(function (d) { return d.toLocaleString(); }).join(','),
+            ];
+        }));
+        return result;
+    };
     BoxplotChartModel.prototype.setColorClassNames = function () {
         // monochrome
         var numberOfColors = 1;
@@ -40746,6 +40894,81 @@ var bubble_BubbleChart = /** @class */ (function (_super) {
 }(axis_chart_AxisChart));
 
 //# sourceMappingURL=../../src/charts/bubble.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/bullet.js
+var model_bullet_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var bullet_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+// Internal Imports
+
+
+/**
+ * Bullet chart model layer
+ */
+var bullet_BulletChartModel = /** @class */ (function (_super) {
+    model_bullet_extends(BulletChartModel, _super);
+    function BulletChartModel(services) {
+        return _super.call(this, services) || this;
+    }
+    /**
+     * Determines the index of the performance area titles to use
+     * @param datum
+     * @returns number
+     */
+    BulletChartModel.prototype.getMatchingRangeIndexForDatapoint = function (datum) {
+        var matchingRangeIndex;
+        for (var i = datum.ranges.length - 1; i > 0; i--) {
+            var range = datum.ranges[i];
+            if (datum.value >= range) {
+                matchingRangeIndex = i;
+                return matchingRangeIndex;
+            }
+        }
+        return 0;
+    };
+    BulletChartModel.prototype.getTabularDataArray = function () {
+        var _this = this;
+        var displayData = this.getDisplayData();
+        var options = this.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
+        var performanceAreaTitles = tools_Tools.getProperty(options, 'bullet', 'performanceAreaTitles');
+        var result = bullet_spreadArrays([
+            ['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance']
+        ], displayData.map(function (datum) { return [
+            datum['title'],
+            datum[groupMapsTo],
+            datum['value'] === null ? '&ndash;' : datum['value'],
+            tools_Tools.getProperty(datum, 'marker') === null
+                ? '&ndash;'
+                : datum['marker'],
+            tools_Tools.getProperty(datum, 'marker') === null
+                ? '&ndash;'
+                : Math.floor((datum[rangeIdentifier] / datum.marker) * 100) + "%",
+            performanceAreaTitles[_this.getMatchingRangeIndexForDatapoint(datum)],
+        ]; }));
+        return result;
+    };
+    return BulletChartModel;
+}(cartesian_charts_ChartModelCartesian));
+
+//# sourceMappingURL=../../src/model/bullet.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/bullet.js
 var charts_bullet_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -40765,12 +40988,14 @@ var charts_bullet_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 // Components
 
 var bullet_BulletChart = /** @class */ (function (_super) {
     charts_bullet_extends(BulletChart, _super);
     function BulletChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
+        _this.model = new bullet_BulletChartModel(_this.services);
         // Merge the default options for this chart
         // With the user provided options
         _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.bulletChart, chartConfigs.options));
@@ -41061,6 +41286,13 @@ var model_pie_extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var pie_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 // Internal Imports
 
 /** The charting model layer which includes mainly the chart data and options,
@@ -41084,6 +41316,20 @@ var PieChartModel = /** @class */ (function (_super) {
         }
         return tabularData;
     };
+    PieChartModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        var options = this.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var result = pie_spreadArrays([
+            ['Group', 'Value']
+        ], displayData.map(function (datum) { return [
+            datum[groupMapsTo],
+            datum['value'] === null
+                ? '&ndash;'
+                : datum['value'].toLocaleString(),
+        ]; }));
+        return result;
+    };
     PieChartModel.prototype.sanitize = function (data) {
         var tabularData = this.getTabularData(data);
         // Sort data based on value
@@ -41210,6 +41456,13 @@ var meter_extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var meter_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 
 
 /** The meter chart model layer which extends some of the data setting options.
@@ -41262,6 +41515,39 @@ var meter_MeterChartModel = /** @class */ (function (_super) {
         }
         return null;
     };
+    MeterChartModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        var options = this.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var status = this.getStatus();
+        var proportional = tools_Tools.getProperty(options, 'meter', 'proportional');
+        var result = [];
+        var domainMax;
+        // Display the appropriate columns and fields depending on the type of meter
+        if (proportional === null) {
+            domainMax = 100;
+            var datum = displayData[0];
+            result = [
+                meter_spreadArrays(['Group', 'Value'], (status ? ['Status'] : [])),
+                meter_spreadArrays([
+                    datum[groupMapsTo],
+                    datum['value']
+                ], (status ? [status] : [])),
+            ];
+        }
+        else {
+            var total = tools_Tools.getProperty(proportional, 'total');
+            domainMax = total ? total : this.getMaximumDomain(displayData);
+            result = meter_spreadArrays([
+                ['Group', 'Value', 'Percentage of total']
+            ], displayData.map(function (datum) { return [
+                datum[groupMapsTo],
+                datum['value'],
+                ((datum['value'] / domainMax) * 100).toFixed(2) + ' %',
+            ]; }));
+        }
+        return result;
+    };
     return MeterChartModel;
 }(model_ChartModel));
 
@@ -41623,6 +41909,59 @@ var meter_MeterChart = /** @class */ (function (_super) {
 }(chart_Chart));
 
 //# sourceMappingURL=../../src/charts/meter.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/radar.js
+var model_radar_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var radar_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+// Internal Imports
+
+
+/** The charting model layer which includes mainly the chart data and options,
+ * as well as some misc. information to be shared among components */
+var radar_RadarChartModel = /** @class */ (function (_super) {
+    model_radar_extends(RadarChartModel, _super);
+    function RadarChartModel(services) {
+        return _super.call(this, services) || this;
+    }
+    RadarChartModel.prototype.getTabularDataArray = function () {
+        var options = this.getOptions();
+        var groupedData = this.getGroupedData();
+        var _a = tools_Tools.getProperty(options, 'radar', 'axes'), angle = _a.angle, value = _a.value;
+        var additionalHeaders = tools_Tools.getProperty(groupedData, '0', 'data').map(function (d) { return d[angle]; });
+        var result = radar_spreadArrays([
+            radar_spreadArrays(['Group'], additionalHeaders)
+        ], groupedData.map(function (datum) {
+            return radar_spreadArrays([
+                datum['name']
+            ], additionalHeaders.map(function (additionalHeader, i) {
+                return tools_Tools.getProperty(datum, 'data', i, value) !== null
+                    ? tools_Tools.getProperty(datum, 'data', i, value).toLocaleString()
+                    : '&ndash;';
+            }));
+        }));
+        return result;
+    };
+    return RadarChartModel;
+}(cartesian_charts_ChartModelCartesian));
+
+//# sourceMappingURL=../../src/model/radar.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/radar.js
 var charts_radar_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -41642,16 +41981,12 @@ var charts_radar_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var radar_RadarChart = /** @class */ (function (_super) {
     charts_radar_extends(RadarChart, _super);
-    // TODO - Optimize the use of "extending"
-    function RadarChart(holder, chartConfigs, extending) {
-        if (extending === void 0) { extending = false; }
+    function RadarChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
-        // TODO - Optimize the use of "extending"
-        if (extending) {
-            return _this;
-        }
+        _this.model = new radar_RadarChartModel(_this.services);
         // Merge the default options for this chart
         // With the user provided options
         _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.radarChart, chartConfigs.options));
@@ -41686,9 +42021,18 @@ var model_gauge_extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var gauge_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 // Internal Imports
 
-/** The gauge chart model layer */
+/**
+ * The gauge chart model layer
+ */
 var GaugeChartModel = /** @class */ (function (_super) {
     model_gauge_extends(GaugeChartModel, _super);
     function GaugeChartModel(services) {
@@ -41697,6 +42041,20 @@ var GaugeChartModel = /** @class */ (function (_super) {
     GaugeChartModel.prototype.getDataGroups = function () {
         return _super.prototype.getDataGroups.call(this).filter(function (item) { return item.name !== 'delta'; });
     };
+    GaugeChartModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        var options = this.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var result = gauge_spreadArrays([
+            ['Group', 'Value']
+        ], displayData.map(function (datum) { return [
+            datum[groupMapsTo],
+            datum['value'] === null
+                ? '&ndash;'
+                : datum['value'].toLocaleString(),
+        ]; }));
+        return result;
+    };
     return GaugeChartModel;
 }(model_ChartModel));
 
@@ -41877,6 +42235,63 @@ var combo_ComboChart = /** @class */ (function (_super) {
 }(axis_chart_AxisChart));
 
 //# sourceMappingURL=../../src/charts/combo.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/tree.js
+var model_tree_extends = (undefined && undefined.__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
+
+/**
+ * The tree chart model layer
+ */
+var TreeChartModel = /** @class */ (function (_super) {
+    model_tree_extends(TreeChartModel, _super);
+    function TreeChartModel(services) {
+        return _super.call(this, services) || this;
+    }
+    TreeChartModel.prototype.getTabularDataArray = function () {
+        var _this = this;
+        var displayData = this.getDisplayData();
+        var result = [['Child', 'Parent']];
+        displayData.forEach(function (datum) {
+            // Call recurisve function
+            _this.getChildrenDatums(datum, result);
+            result.push([datum.name, '&ndash;']);
+        });
+        return result;
+    };
+    /**
+     * Determine the child parent relationship in nested data
+     * @param datum: Object
+     * @param result: Array<Object>
+     */
+    TreeChartModel.prototype.getChildrenDatums = function (datum, result) {
+        var _this = this;
+        if (result === void 0) { result = []; }
+        // Check to see if datum has children before iterating through it
+        if (datum.children) {
+            if (datum.children.length > 0) {
+                datum.children.forEach(function (child) {
+                    _this.getChildrenDatums(child, result);
+                    result.push([child.name, datum.name]);
+                });
+            }
+        }
+    };
+    return TreeChartModel;
+}(model_ChartModel));
+
+//# sourceMappingURL=../../src/model/tree.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/tree.js
 var charts_tree_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -41895,12 +42310,14 @@ var charts_tree_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 // Components
 
 var tree_TreeChart = /** @class */ (function (_super) {
     charts_tree_extends(TreeChart, _super);
     function TreeChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
+        _this.model = new TreeChartModel(_this.services);
         // Merge the default options for this chart
         // With the user provided options
         _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.treeChart, chartConfigs.options));
@@ -41923,6 +42340,44 @@ var tree_TreeChart = /** @class */ (function (_super) {
 }(chart_Chart));
 
 //# sourceMappingURL=../../src/charts/tree.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/treemap.js
+var model_treemap_extends = (undefined && undefined.__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
+
+/**
+ * The treemap chart model layer
+ */
+var TreemapChartModel = /** @class */ (function (_super) {
+    model_treemap_extends(TreemapChartModel, _super);
+    function TreemapChartModel(services) {
+        return _super.call(this, services) || this;
+    }
+    TreemapChartModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        var result = [['Child', 'Group', 'Value']];
+        displayData.forEach(function (datum) {
+            datum.children.forEach(function (child) {
+                result.push([child.name, datum.name, child.value]);
+            });
+        });
+        return result;
+    };
+    return TreemapChartModel;
+}(model_ChartModel));
+
+//# sourceMappingURL=../../src/model/treemap.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/treemap.js
 var charts_treemap_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -41941,12 +42396,14 @@ var charts_treemap_extends = (undefined && undefined.__extends) || (function ()
 
 
 
+
 // Components
 
 var treemap_TreemapChart = /** @class */ (function (_super) {
     charts_treemap_extends(TreemapChart, _super);
     function TreemapChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
+        _this.model = new TreemapChartModel(_this.services);
         // Merge the default options for this chart
         // With the user provided options
         _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.treemapChart, chartConfigs.options));
@@ -42100,6 +42557,57 @@ var circle_pack_CirclePackChartModel = /** @class */ (function (_super) {
             return circle_pack_assign(circle_pack_assign({}, node), { dataGroupName: name });
         }
     };
+    CirclePackChartModel.prototype.getTabularDataArray = function () {
+        var _this = this;
+        var displayData = this.getDisplayData();
+        var result = [['Child', 'Parent', 'Value']];
+        displayData.forEach(function (datum) {
+            var value = datum.value ? datum.value : 0;
+            if (datum.children) {
+                // Call recursive function
+                value += _this.getChildrenDatums(datum.children, datum.name, result, 0);
+            }
+            result.push(['&ndash;', datum.name, value]);
+        });
+        return result;
+    };
+    /**
+     * Recursively determine the relationship between all the nested elements in the child
+     * @param children: Object
+     * @param parent: String
+     * @param result: Array<Object>
+     * @param totalSum: number
+     * @returns: number
+     */
+    CirclePackChartModel.prototype.getChildrenDatums = function (children, parent, result, totalSum) {
+        var _this = this;
+        if (result === void 0) { result = []; }
+        if (totalSum === void 0) { totalSum = 0; }
+        var grandParent = parent;
+        children.forEach(function (child) {
+            var parent = child.name;
+            var sum = 0;
+            if (child.children) {
+                if (child.children.length > 0) {
+                    if (typeof child.value === 'number') {
+                        totalSum += child.value;
+                    }
+                    sum += _this.getChildrenDatums(child.children, parent, result, sum);
+                    result.push([parent, grandParent, sum]);
+                    totalSum += sum;
+                }
+            }
+            else {
+                var value = 0;
+                if (typeof child.value === 'number') {
+                    value = child.value;
+                    totalSum += child.value;
+                }
+                result.push([child.name, grandParent, value]);
+            }
+        });
+        return totalSum;
+    };
     return CirclePackChartModel;
 }(model_ChartModel));
 
@@ -42150,6 +42658,54 @@ var circle_pack_CirclePackChart = /** @class */ (function (_super) {
 }(chart_Chart));
 
 //# sourceMappingURL=../../src/charts/circle-pack.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/wordcloud.js
+var model_wordcloud_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var wordcloud_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+// Internal Imports
+
+/** The charting model layer which includes mainly the chart data and options,
+ * as well as some misc. information to be shared among components */
+var WordCloudModel = /** @class */ (function (_super) {
+    model_wordcloud_extends(WordCloudModel, _super);
+    function WordCloudModel(services) {
+        return _super.call(this, services) || this;
+    }
+    WordCloudModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        var options = this.getOptions();
+        var _a = options.wordCloud, fontSizeMapsTo = _a.fontSizeMapsTo, wordMapsTo = _a.wordMapsTo;
+        var groupMapsTo = options.data.groupMapsTo;
+        var result = wordcloud_spreadArrays([
+            [options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel]
+        ], displayData.map(function (datum) { return [
+            datum[wordMapsTo],
+            datum[groupMapsTo],
+            datum[fontSizeMapsTo],
+        ]; }));
+        return result;
+    };
+    return WordCloudModel;
+}(model_ChartModel));
+
+//# sourceMappingURL=../../src/model/wordcloud.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/wordcloud.js
 var charts_wordcloud_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -42164,6 +42720,8 @@ var charts_wordcloud_extends = (undefined && undefined.__extends) || (function (
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+// Internal Imports
+
 
 
 
@@ -42174,6 +42732,7 @@ var wordcloud_WordCloudChart = /** @class */ (function (_super) {
     charts_wordcloud_extends(WordCloudChart, _super);
     function WordCloudChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
+        _this.model = new WordCloudModel(_this.services);
         // Merge the default options for this chart
         // With the user provided options
         _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.wordCloudChart, chartConfigs.options));
@@ -42197,6 +42756,54 @@ var wordcloud_WordCloudChart = /** @class */ (function (_super) {
 }(chart_Chart));
 
 //# sourceMappingURL=../../src/charts/wordcloud.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/alluvial.js
+var model_alluvial_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var alluvial_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+// Internal Imports
+
+/**
+ * Alluvial chart model layer
+ */
+var AlluvialChartModel = /** @class */ (function (_super) {
+    model_alluvial_extends(AlluvialChartModel, _super);
+    function AlluvialChartModel(services) {
+        return _super.call(this, services) || this;
+    }
+    AlluvialChartModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        // Sort array by source to get a close depiction of the alluvial chart
+        displayData.sort(function (a, b) { return a['source'].localeCompare(b['source']); });
+        var result = alluvial_spreadArrays([
+            ['Source', 'Target', 'Value']
+        ], displayData.map(function (datum) { return [
+            datum['source'],
+            datum['target'],
+            datum['value'],
+        ]; }));
+        return result;
+    };
+    return AlluvialChartModel;
+}(cartesian_charts_ChartModelCartesian));
+
+//# sourceMappingURL=../../src/model/alluvial.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/alluvial.js
 var charts_alluvial_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -42215,12 +42822,14 @@ var charts_alluvial_extends = (undefined && undefined.__extends) || (function ()
 
 
 
+
 // Components
 
 var alluvial_AlluvialChart = /** @class */ (function (_super) {
     charts_alluvial_extends(AlluvialChart, _super);
     function AlluvialChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
+        _this.model = new AlluvialChartModel(_this.services);
         // Merge the default options for this chart
         // With the user provided options
         _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.alluvialChart, chartConfigs.options));