@carbon/charts-vue 1.1.0 → 1.3.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.
 
+# [1.3.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.2.1...v1.3.0) (2022-06-28)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [1.2.1](https://github.com/carbon-design-system/carbon-charts/compare/v1.2.0...v1.2.1) (2022-06-14)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+# [1.2.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.1.0...v1.2.0) (2022-06-13)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 # [1.1.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.0.4...v1.1.0) (2022-06-08)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -11287,9 +11287,7 @@ var CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';
 var dom_utils_DOMUtils = /** @class */ (function (_super) {
     __extends(DOMUtils, _super);
     function DOMUtils(model, services) {
-        var _this = _super.call(this, model, services) || this;
-        _this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16);
-        return _this;
+        return _super.call(this, model, services) || this;
     }
     DOMUtils.getHTMLElementSize = function (element) {
         return {
@@ -11425,6 +11423,8 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
     DOMUtils.prototype.init = function () {
         // Add width & height to the chart holder if necessary, and add a classname
         this.styleHolderElement();
+        // Initialize chart ID
+        this.initializeID();
         this.addMainContainer();
         this.verifyCSSStylesBeingApplied();
         if (this.model.getOptions().resizable) {
@@ -11439,12 +11439,16 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
     DOMUtils.prototype.generateElementIDString = function (originalID) {
         return "chart-" + this.chartID + "-" + originalID;
     };
+    DOMUtils.prototype.initializeID = function () {
+        this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16);
+    };
     DOMUtils.prototype.addMainContainer = function () {
         var options = this.model.getOptions();
         var chartsprefix = tools_Tools.getProperty(options, 'style', 'prefix');
         var mainContainer = src_select(this.getHolder())
             .append('div')
             .classed(carbonPrefix + "--" + chartsprefix + "--chart-wrapper", true)
+            .attr('id', "chart-" + this.getChartID())
             .style('height', '100%')
             .style('width', '100%');
         mainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);
@@ -25756,6 +25760,8 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
         _this.type = 'grouped-bar';
         _this.renderType = RenderTypes.SVG;
         _this.padding = 5;
+        // A factor to normalize padding between bars regardless of bar group density.
+        _this.defaultStepFactor = 70;
         // Highlight elements that match the hovered legend item
         _this.handleLegendOnHover = function (event) {
             var hoveredElement = event.detail.hoveredElement;
@@ -25875,7 +25881,7 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
             });
         })
             .style('fill', function (d) { return _this.model.getFillColor(d[groupMapsTo]); })
-            .attr('d', function (d) {
+            .attr('d', function (d, i) {
             /*
              * Orientation support for horizontal/vertical bar charts
              * Determine coordinates needed for a vertical set of paths
@@ -25889,8 +25895,11 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
             var rangeAxis = _this.services.cartesianScales.getRangeAxisPosition({ datum: d });
             var y0 = _this.services.cartesianScales.getValueThroughAxisPosition(rangeAxis, 0);
             var y1 = _this.services.cartesianScales.getRangeValue(d);
-            // don't show if part of bar is out of zoom domain
-            if (_this.isOutsideZoomedDomain(x0, x1)) {
+            // don't show if part of bar is out of zoom domain - test zoom on bar pos, not group
+            var zoomx0 = _this.services.cartesianScales.getDomainValue(d, i) -
+                barWidth / 2;
+            var zoomx1 = zoomx0 + barWidth;
+            if (_this.isOutsideZoomedDomain(zoomx0, zoomx1)) {
                 return;
             }
             return tools_Tools.generateSVGPathString({ x0: x0, x1: x1, y0: y0, y1: y1 }, _this.services.cartesianScales.getOrientation());
@@ -25975,7 +25984,7 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
         var displayData = this.model.getDisplayData(this.configs.groups);
         return displayData.filter(function (datum) {
             var domainIdentifier = _this.services.cartesianScales.getDomainIdentifier(datum);
-            return datum[domainIdentifier] === label;
+            return datum[domainIdentifier].toString() === label;
         });
     };
     GroupedBar.prototype.getGroupWidth = function () {
@@ -25983,13 +25992,29 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
         var totalGroupPadding = this.getTotalGroupPadding();
         return this.getBarWidth() * activeData.length + totalGroupPadding;
     };
+    GroupedBar.prototype.getDomainScaleStep = function () {
+        var domainScale = this.services.cartesianScales.getDomainScale();
+        var activeData = this.model.getGroupedData(this.configs.groups);
+        var step = this.defaultStepFactor;
+        if (typeof domainScale.step === 'function') {
+            step = domainScale.step();
+        }
+        else if (activeData.length > 0) {
+            // as a fallback use distance between first bars of adjacent bar groups
+            var ref = activeData.find(function (d) { var _a; return ((_a = d.data) === null || _a === void 0 ? void 0 : _a.length) > 1; });
+            if (ref) {
+                var domainIdentifier = this.services.cartesianScales.getDomainIdentifier(ref.data[0]);
+                step = Math.abs(domainScale(ref.data[1][domainIdentifier]) - domainScale(ref.data[0][domainIdentifier]));
+            }
+        }
+        return step;
+    };
     GroupedBar.prototype.getTotalGroupPadding = function () {
         var activeData = this.model.getGroupedData(this.configs.groups);
         if (activeData.length === 1) {
             return 0;
         }
-        var domainScale = this.services.cartesianScales.getDomainScale();
-        var padding = Math.min(5, 5 * (domainScale.step() / 70));
+        var padding = Math.min(5, 5 * (this.getDomainScaleStep() / this.defaultStepFactor));
         return padding * (activeData.length - 1);
     };
     // Gets the correct width for bars based on options & configurations
@@ -26008,8 +26033,7 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
         var activeData = this.model.getGroupedData(this.configs.groups);
         var numOfActiveDataGroups = activeData.length;
         var totalGroupPadding = this.getTotalGroupPadding();
-        var domainScale = this.services.cartesianScales.getDomainScale();
-        return Math.min(providedMaxWidth, (domainScale.step() - totalGroupPadding) / numOfActiveDataGroups);
+        return Math.min(providedMaxWidth, (this.getDomainScaleStep() - totalGroupPadding) / numOfActiveDataGroups);
     };
     GroupedBar.prototype.setGroupScale = function () {
         var activeData = this.model.getActiveDataGroupNames(this.configs.groups);
@@ -39625,7 +39649,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.render = function (animate) {
         var _this = this;
         if (animate === void 0) { animate = true; }
-        var container = this.getComponentContainer().attr('role', 'toolbar');
+        var container = this.getComponentContainer()
+            .attr('role', 'toolbar')
+            .attr('aria-label', "chart-" + this.services.domUtils.getChartID() + " toolbar");
         var isDataLoading = tools_Tools.getProperty(this.getOptions(), 'data', 'loading');
         if (isDataLoading) {
             container.html('');