@carbon/charts-vue 0.54.14 → 0.56.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.56.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.55.1...v0.56.0) (2022-03-28)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.55.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.55.0...v0.55.1) (2022-03-14)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+# [0.55.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.14...v0.55.0) (2022-03-14)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 ## [0.54.14](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.13...v0.54.14) (2022-03-14)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -8535,7 +8535,7 @@ var axisChart = tools_Tools.merge({}, chart, {
 var baseBarChart = tools_Tools.merge({}, axisChart, {
     bars: {
         maxWidth: 16,
-        spacingFactor: 0.25
+        spacingFactor: 0.25,
     },
     timeScale: tools_Tools.merge(timeScale, {
         addSpaceOnEdges: 1,
@@ -8828,6 +8828,7 @@ var alluvialChart = tools_Tools.merge({}, chart, {
         data: tools_Tools.merge(chart.data, {
             groupMapsTo: 'source',
         }),
+        nodeAlignment: Alignments.CENTER,
         nodePadding: 24,
         monochrome: false,
         nodes: [],
@@ -20580,12 +20581,12 @@ var essentials_modal_Modal = /** @class */ (function (_super) {
         var options = this.model.getOptions();
         var chartprefix = tools_Tools.getProperty(options, 'style', 'prefix');
         var tableArray = this.model.getTabularDataArray();
-        return "\n\t\t<div class=\"bx--modal-container\">\n\t\t\t<div class=\"bx--modal-header\">\n\t\t\t\t<p class=\"bx--modal-header__label bx--type-delta\" id=\"modal-title\">Tabular representation</p>\n\t\t\t\t<p class=\"bx--modal-header__heading bx--type-beta\" id=\"modal-description\">" + options.title + "</p>\n\t\t\t\t<button class=\"bx--modal-close\" type=\"button\" data-modal-close aria-label=\"close modal\"  data-modal-primary-focus>\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Close\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\" class=\"bx--modal-close__icon\">\n\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div class=\"bx--modal-content\"><table class=\"bx--data-table bx--data-table--no-border\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t" + lodash_es_get(tableArray, 0)
-            .map(function (heading) { return "<th scope=\"col\">\n\t\t\t\t\t\t\t\t<div class=\"bx--table-header-label\">" + heading + "</div>\n\t\t\t\t\t\t\t</th>"; })
-            .join('') + "\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>" + tableArray
+        return "\n\t\t<div class=\"bx--modal-container cds--modal-container\">\n\t\t\t<div class=\"bx--modal-header cds--modal-header\">\n\t\t\t\t<p class=\"bx--modal-header__label bx--type-delta cds--modal-header__label cds--type-delta\" id=\"modal-title\">Tabular representation</p>\n\n\t\t\t\t<p class=\"bx--modal-header__heading bx--type-beta cds--modal-header__heading cds--type-beta\" id=\"modal-description\">" + options.title + "</p>\n\n\t\t\t\t<button class=\"bx--modal-close cds--modal-close\" type=\"button\" data-modal-close aria-label=\"close modal\"  data-modal-primary-focus>\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Close\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\" class=\"bx--modal-close__icon cds--modal-close__icon\">\n\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class=\"bx--modal-content cds--modal-content\">\n\t\t\t\t<table class=\"bx--data-table bx--data-table--no-border cds--data-table cds--data-table--no-border\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t" + lodash_es_get(tableArray, 0)
+            .map(function (heading) { return "<th scope=\"col\">\n\t\t\t\t\t\t\t\t<div class=\"bx--table-header-label cds--table-header-label\">" + heading + "</div>\n\t\t\t\t\t\t\t</th>"; })
+            .join('') + "\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\n\t\t\t\t\t<tbody>" + tableArray
             .slice(1)
             .map(function (row) { return "\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t" + row.map(function (column) { return "<td>" + column + "</td>"; }).join('') + "\n\t\t\t\t\t\t\t</tr>"; })
-            .join('') + "\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"bx--modal-footer\">\n\t\t\t  <div class=\"" + js_settings.prefix + "--" + chartprefix + "-modal-footer-spacer\"></div>\n\t\t\t  <button class=\"bx--btn bx--btn--primary\" type=\"button\" data-modal-primary-focus>Download as CSV</button>\n\t\t\t</div>\n\t\t</div>";
+            .join('') + "\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t<div class=\"bx--modal-footer cds--modal-footer\">\n\t\t\t  <div class=\"" + js_settings.prefix + "--" + chartprefix + "-modal-footer-spacer\"></div>\n\t\t\t  <button class=\"bx--btn bx--btn--primary cds--btn cds--btn--primary\" type=\"button\" data-modal-primary-focus>Download as CSV</button>\n\t\t\t</div>\n\t\t</div>";
     };
     Modal.prototype.render = function () {
         var options = this.model.getOptions();
@@ -20598,7 +20599,7 @@ var essentials_modal_Modal = /** @class */ (function (_super) {
             this.isEventListenerAdded = true;
             this.modal
                 .attr('data-modal', true)
-                .attr('class', 'bx--modal')
+                .attr('class', 'bx--modal cds--modal')
                 .attr('role', 'dialog')
                 .attr('aria-modal', true)
                 .attr('aria-labelledby', 'modal-title')
@@ -34713,11 +34714,21 @@ var alluvial_Alluvial = /** @class */ (function (_super) {
         if (options.alluvial.nodePadding > alluvial.minNodePadding) {
             nodePadding = options.alluvial.nodePadding;
         }
+        var alignment = tools_Tools.getProperty(options, 'alluvial', 'nodeAlignment');
+        var nodeAlignment = justify;
+        if (alignment === Alignments.LEFT) {
+            nodeAlignment = align_left;
+        }
+        else if (alignment === Alignments.RIGHT) {
+            nodeAlignment = align_right;
+        }
         var sankey = Sankey()
             .nodeId(function (d) { return d.name; })
             .nodeWidth(alluvial.nodeWidth)
             // Distance nodes are apart from each other
             .nodePadding(nodePadding)
+            // Alignment of nodes within chart
+            .nodeAlign(nodeAlignment)
             // Size of the chart and its padding
             // Chart starts at 2 and ends at width - 2 so the outer nodes can expand from center
             // Chart starts from 30 so node categories can be displayed
@@ -39586,7 +39597,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             if (!this.overflowMenu) {
                 this.overflowMenu = container
                     .append('div')
-                    .attr('class', 'bx--overflow-menu-options bx--overflow-menu--flip')
+                    .attr('class', 'bx--overflow-menu-options bx--overflow-menu--flip cds--overflow-menu-options cds--overflow-menu--flip')
                     .attr('tabindex', -1)
                     .attr('role', 'menu')
                     .html("<ul></ul>");
@@ -39604,7 +39615,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             var enteringToolbarControls = toolbarControls
                 .enter()
                 .append('div')
-                .attr('class', 'toolbar-control bx--overflow-menu')
+                .attr('class', 'toolbar-control bx--overflow-menu cds--overflow-menu')
                 .attr('role', 'button');
             var self_1 = this;
             var allToolbarControls = enteringToolbarControls
@@ -39612,9 +39623,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 .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=\"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.iconSVG.width !== undefined ? d.iconSVG.width : '20px') + "; height: " + (d.iconSVG.height !== undefined
+                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--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=\"bx--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>"; })
+                : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--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;
                 src_select(this)
@@ -39658,15 +39669,18 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             .attr('id', function (d) {
             return _this.services.domUtils.generateElementIDString("control-" + d.id);
         })
-            .attr('class', 'bx--overflow-menu-options__option')
+            .attr('class', 'bx--overflow-menu-options__option cds--overflow-menu-options__option')
             .attr('role', 'menuitem');
         enteringOverflowMenuControls
             .append('button')
-            .attr('class', 'bx--overflow-menu-options__btn');
+            .attr('class', 'bx--overflow-menu-options__btn cds--overflow-menu-options__btn');
         enteringOverflowMenuControls
             .merge(overflowMenuControls)
             .classed('bx--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')
@@ -39684,7 +39698,8 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
         // update overflow button background
         if (this.overflowButton) {
             this.overflowButton.attr('aria-expanded', show);
-            src_select(this.overflowButton.node().parentNode).classed('bx--overflow-menu--open', show);
+            src_select(this.overflowButton.node().parentNode)
+                .classed('bx--overflow-menu--open', show).classed('cds--overflow-menu--open', show);
         }
         if (show) {
             this.services.events.dispatchEvent(Events.Toolbar.SHOW_OVERFLOW_MENU);