@carbon/charts-vue 0.54.2 → 0.54.6

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.54.6](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.5...v0.54.6) (2022-01-13)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.54.5](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.4...v0.54.5) (2022-01-11)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.54.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.3...v0.54.4) (2022-01-10)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.54.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.2...v0.54.3) (2022-01-07)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 ## [0.54.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.1...v0.54.2) (2022-01-05)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -9713,7 +9713,7 @@ var model_ChartModel = /** @class */ (function () {
     };
     ChartModel.prototype.getStackKeys = function (_a) {
         var _this = this;
-        var _b = _a.bins, bins = _b === void 0 ? null : _b, _c = _a.groups, groups = _c === void 0 ? null : _c;
+        var _b = _a === void 0 ? { bins: null, groups: null } : _a, _c = _b.bins, bins = _c === void 0 ? null : _c, _d = _b.groups, groups = _d === void 0 ? null : _d;
         var options = this.getOptions();
         var displayData = this.getDisplayData(groups);
         var stackKeys;
@@ -24368,15 +24368,21 @@ var tooltip_axis_AxisChartsTooltip = /** @class */ (function (_super) {
                 },
             ];
             items = items.concat(data
-                .map(function (datum) { return ({
-                label: datum[groupMapsTo],
-                value: datum[cartesianScales.getRangeIdentifier(datum)],
-                color: _this.model.getFillColor(datum[groupMapsTo]),
-                class: _this.model.getColorClassName({
-                    classNameTypes: [ColorClassNameTypes.TOOLTIP],
-                    dataGroupName: datum[groupMapsTo],
-                }),
-            }); })
+                .map(function (datum) {
+                // Format value if is array
+                var value = datum[cartesianScales.getRangeIdentifier(datum)];
+                return {
+                    label: datum[groupMapsTo],
+                    value: Array.isArray(value) && value.length === 2
+                        ? value[0] + " - " + value[1]
+                        : value,
+                    color: _this.model.getFillColor(datum[groupMapsTo]),
+                    class: _this.model.getColorClassName({
+                        classNameTypes: [ColorClassNameTypes.TOOLTIP],
+                        dataGroupName: datum[groupMapsTo],
+                    }),
+                };
+            })
                 .sort(function (a, b) { return b.value - a.value; }));
             if (!dualAxes &&
                 tools_Tools.getProperty(options, 'tooltip', 'showTotal') === true) {
@@ -25089,6 +25095,7 @@ var area_Area = /** @class */ (function (_super) {
         var _this = this;
         if (animate === void 0) { animate = true; }
         var svg = this.getComponentContainer({ withinChartClip: true });
+        var options = this.getOptions();
         var domain = [0, 0];
         var cartesianScales = this.services.cartesianScales;
         var orientation = cartesianScales.getOrientation();
@@ -25104,15 +25111,26 @@ var area_Area = /** @class */ (function (_super) {
         });
         // Update the bound data on area groups
         var groupedData = this.model.getGroupedData(this.configs.groups);
-        var bounds = tools_Tools.getProperty(this.getOptions(), 'bounds');
+        var bounds = tools_Tools.getProperty(options, 'bounds');
         var boundsEnabled = bounds && groupedData && groupedData.length === 1;
         if (!boundsEnabled && bounds) {
             console.warn("Bounds can only be shown when having 1 single datagroup, you've supplied " + groupedData.length); // eslint-disable-line no-console
         }
+        var upperBoundRangeValue = 0;
+        // If includeZero is enabled, we want to replace upperBoundRange from 0 to domain value
+        var includeZeroInRangeValue = function (position, domain) {
+            if (tools_Tools.getProperty(options, 'axes', position, 'includeZero') ===
+                false) {
+                // Replace upperBoundRangeValue if domain is positive
+                if (domain[0] > 0 && domain[1] > 0) {
+                    upperBoundRangeValue = domain[0];
+                }
+            }
+        };
         var upperBound = function (d, i) {
             return boundsEnabled
                 ? cartesianScales.getBoundedScaledValues(d, i)[0]
-                : cartesianScales.getRangeValue(0);
+                : cartesianScales.getRangeValue(upperBoundRangeValue);
         };
         var lowerBound = function (d, i) {
             return boundsEnabled
@@ -25120,21 +25138,23 @@ var area_Area = /** @class */ (function (_super) {
                 : cartesianScales.getRangeValue(d, i);
         };
         if (orientation === CartesianOrientations.VERTICAL) {
-            domain = this.services.cartesianScales.getMainYScale().domain();
+            domain = cartesianScales.getMainYScale().domain();
+            includeZeroInRangeValue(cartesianScales.getMainYAxisPosition(), domain);
             areaGenerator
                 .x(function (d, i) { return cartesianScales.getDomainValue(d, i); })
                 .y0(function (d, i) { return upperBound(d, i); })
                 .y1(function (d, i) { return lowerBound(d, i); });
         }
         else {
-            domain = this.services.cartesianScales.getMainXScale().domain();
+            domain = cartesianScales.getMainXScale().domain();
+            includeZeroInRangeValue(cartesianScales.getMainXAxisPosition(), domain);
             areaGenerator
                 .x0(function (d, i) { return upperBound(d, i); })
                 .x1(function (d, i) { return lowerBound(d, i); })
                 .y(function (d, i) { return cartesianScales.getDomainValue(d, i); });
         }
         // Is gradient enabled or not
-        var isGradientEnabled = tools_Tools.getProperty(this.getOptions(), 'color', 'gradient', 'enabled');
+        var isGradientEnabled = tools_Tools.getProperty(options, 'color', 'gradient', 'enabled');
         // Should gradient style be applicable
         var isGradientAllowed = groupedData && groupedData.length === 1 && isGradientEnabled;
         if (groupedData.length > 1 && isGradientEnabled) {
@@ -25982,6 +26002,7 @@ var bar_stacked_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 // D3 Imports
 
 var bar_stacked_StackedBar = /** @class */ (function (_super) {
@@ -26213,6 +26234,21 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             });
         });
     };
+    StackedBar.prototype.getBarWidth = function () {
+        var options = this.getOptions();
+        if (tools_Tools.getProperty(options, "bars", "width")) {
+            return options.bars.width;
+        }
+        var mainXScale = this.services.cartesianScales.getMainXScale();
+        var chartWidth = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
+            useAttrs: true,
+        }).width;
+        var numberOfDomainValues = this.model.getStackKeys().length;
+        if (!mainXScale.step) {
+            return Math.min(options.bars.maxWidth, (chartWidth * 0.25) / numberOfDomainValues);
+        }
+        return Math.min(options.bars.maxWidth, mainXScale.step() / 2);
+    };
     StackedBar.prototype.destroy = function () {
         // Remove event listeners
         this.parent
@@ -32562,6 +32598,13 @@ var radar_Radar = /** @class */ (function (_super) {
                 })
                     .attr('y', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y;
+                })
+                    .end()
+                    .finally(function () {
+                    // Align chart horizontally after x-axies has finished rendering
+                    var alignment = tools_Tools.getProperty(options, 'radar', 'alignment');
+                    var alignmentXOffset = _this.getAlignmentXOffset(alignment, svg, _this.getParent());
+                    svg.attr('x', alignmentXOffset);
                 });
             });
         }, function (exit) {
@@ -32782,9 +32825,6 @@ var radar_Radar = /** @class */ (function (_super) {
                     .remove();
             });
         });
-        var alignment = tools_Tools.getProperty(options, 'radar', 'alignment');
-        var alignmentXOffset = this.getAlignmentXOffset(alignment, svg, this.getParent());
-        svg.attr('x', alignmentXOffset);
         // Add event listeners
         this.addEventListeners();
     };
@@ -33586,8 +33626,8 @@ var circle_pack_CirclePack = /** @class */ (function (_super) {
             .on('click', function (event, datum) {
             var hoveredElement = src_select(this);
             var disabled = hoveredElement.classed('non-focal');
-            var zoomedIn = tools_Tools.getProperty(self.getOptions(), 'canvasZoom', 'enabled') && self.model.getHierarchyLevel() > 2;
-            if (zoomedIn) {
+            var canvasZoomEnabled = tools_Tools.getProperty(self.model.getOptions(), 'canvasZoom', 'enabled');
+            if (canvasZoomEnabled && self.model.getHierarchyLevel() > 2) {
                 var canvasSelection = self.parent.selectAll('circle.node');
                 var chartSvg = src_select(self.services.domUtils.getMainContainer());
                 chartSvg.classed('zoomed-in', false);
@@ -33596,7 +33636,10 @@ var circle_pack_CirclePack = /** @class */ (function (_super) {
                 self.services.canvasZoom.zoomOut(canvasSelection, canvasZoomSettings);
             }
             // zoom if chart has zoom enabled and if its a depth 2 circle that has children
-            else if (datum.depth === 2 && datum.children && !disabled) {
+            else if (datum.depth === 2 &&
+                datum.children &&
+                !disabled &&
+                canvasZoomEnabled) {
                 var canvasSelection = self.parent.selectAll('circle.node');
                 var chartSvg = src_select(self.services.domUtils.getMainContainer());
                 chartSvg.classed('zoomed-in', true);