@carbon/charts-vue 0.54.3 → 0.54.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/charts-vue.umd.js CHANGED
@@ -16449,7 +16449,9 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
16449
16449
  var axesOptions = tools_Tools.getProperty(this.model.getOptions(), 'axes');
16450
16450
  var domainAxisPosition = this.getDomainAxisPosition();
16451
16451
  var thresholds = axesOptions[domainAxisPosition].thresholds;
16452
- if (!thresholds) {
16452
+ // Check if thresholds exist & is not empty
16453
+ if (!Array.isArray(thresholds) ||
16454
+ (Array.isArray(thresholds) && !thresholds.length)) {
16453
16455
  return null;
16454
16456
  }
16455
16457
  var domainScale = this.getDomainScale();
@@ -16470,7 +16472,9 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
16470
16472
  var axesOptions = tools_Tools.getProperty(this.model.getOptions(), 'axes');
16471
16473
  var rangeAxisPosition = this.getRangeAxisPosition();
16472
16474
  var thresholds = axesOptions[rangeAxisPosition].thresholds;
16473
- if (!thresholds) {
16475
+ // Check if thresholds exist & is not empty
16476
+ if (!Array.isArray(thresholds) ||
16477
+ (Array.isArray(thresholds) && !thresholds.length)) {
16474
16478
  return null;
16475
16479
  }
16476
16480
  var rangeScale = this.getRangeScale();
@@ -24377,15 +24381,21 @@ var tooltip_axis_AxisChartsTooltip = /** @class */ (function (_super) {
24377
24381
  },
24378
24382
  ];
24379
24383
  items = items.concat(data
24380
- .map(function (datum) { return ({
24381
- label: datum[groupMapsTo],
24382
- value: datum[cartesianScales.getRangeIdentifier(datum)],
24383
- color: _this.model.getFillColor(datum[groupMapsTo]),
24384
- class: _this.model.getColorClassName({
24385
- classNameTypes: [ColorClassNameTypes.TOOLTIP],
24386
- dataGroupName: datum[groupMapsTo],
24387
- }),
24388
- }); })
24384
+ .map(function (datum) {
24385
+ // Format value if is array
24386
+ var value = datum[cartesianScales.getRangeIdentifier(datum)];
24387
+ return {
24388
+ label: datum[groupMapsTo],
24389
+ value: Array.isArray(value) && value.length === 2
24390
+ ? value[0] + " - " + value[1]
24391
+ : value,
24392
+ color: _this.model.getFillColor(datum[groupMapsTo]),
24393
+ class: _this.model.getColorClassName({
24394
+ classNameTypes: [ColorClassNameTypes.TOOLTIP],
24395
+ dataGroupName: datum[groupMapsTo],
24396
+ }),
24397
+ };
24398
+ })
24389
24399
  .sort(function (a, b) { return b.value - a.value; }));
24390
24400
  if (!dualAxes &&
24391
24401
  tools_Tools.getProperty(options, 'tooltip', 'showTotal') === true) {
@@ -25098,6 +25108,7 @@ var area_Area = /** @class */ (function (_super) {
25098
25108
  var _this = this;
25099
25109
  if (animate === void 0) { animate = true; }
25100
25110
  var svg = this.getComponentContainer({ withinChartClip: true });
25111
+ var options = this.getOptions();
25101
25112
  var domain = [0, 0];
25102
25113
  var cartesianScales = this.services.cartesianScales;
25103
25114
  var orientation = cartesianScales.getOrientation();
@@ -25113,15 +25124,26 @@ var area_Area = /** @class */ (function (_super) {
25113
25124
  });
25114
25125
  // Update the bound data on area groups
25115
25126
  var groupedData = this.model.getGroupedData(this.configs.groups);
25116
- var bounds = tools_Tools.getProperty(this.getOptions(), 'bounds');
25127
+ var bounds = tools_Tools.getProperty(options, 'bounds');
25117
25128
  var boundsEnabled = bounds && groupedData && groupedData.length === 1;
25118
25129
  if (!boundsEnabled && bounds) {
25119
25130
  console.warn("Bounds can only be shown when having 1 single datagroup, you've supplied " + groupedData.length); // eslint-disable-line no-console
25120
25131
  }
25132
+ var upperBoundRangeValue = 0;
25133
+ // If includeZero is enabled, we want to replace upperBoundRange from 0 to domain value
25134
+ var includeZeroInRangeValue = function (position, domain) {
25135
+ if (tools_Tools.getProperty(options, 'axes', position, 'includeZero') ===
25136
+ false) {
25137
+ // Replace upperBoundRangeValue if domain is positive
25138
+ if (domain[0] > 0 && domain[1] > 0) {
25139
+ upperBoundRangeValue = domain[0];
25140
+ }
25141
+ }
25142
+ };
25121
25143
  var upperBound = function (d, i) {
25122
25144
  return boundsEnabled
25123
25145
  ? cartesianScales.getBoundedScaledValues(d, i)[0]
25124
- : cartesianScales.getRangeValue(0);
25146
+ : cartesianScales.getRangeValue(upperBoundRangeValue);
25125
25147
  };
25126
25148
  var lowerBound = function (d, i) {
25127
25149
  return boundsEnabled
@@ -25129,21 +25151,23 @@ var area_Area = /** @class */ (function (_super) {
25129
25151
  : cartesianScales.getRangeValue(d, i);
25130
25152
  };
25131
25153
  if (orientation === CartesianOrientations.VERTICAL) {
25132
- domain = this.services.cartesianScales.getMainYScale().domain();
25154
+ domain = cartesianScales.getMainYScale().domain();
25155
+ includeZeroInRangeValue(cartesianScales.getMainYAxisPosition(), domain);
25133
25156
  areaGenerator
25134
25157
  .x(function (d, i) { return cartesianScales.getDomainValue(d, i); })
25135
25158
  .y0(function (d, i) { return upperBound(d, i); })
25136
25159
  .y1(function (d, i) { return lowerBound(d, i); });
25137
25160
  }
25138
25161
  else {
25139
- domain = this.services.cartesianScales.getMainXScale().domain();
25162
+ domain = cartesianScales.getMainXScale().domain();
25163
+ includeZeroInRangeValue(cartesianScales.getMainXAxisPosition(), domain);
25140
25164
  areaGenerator
25141
25165
  .x0(function (d, i) { return upperBound(d, i); })
25142
25166
  .x1(function (d, i) { return lowerBound(d, i); })
25143
25167
  .y(function (d, i) { return cartesianScales.getDomainValue(d, i); });
25144
25168
  }
25145
25169
  // Is gradient enabled or not
25146
- var isGradientEnabled = tools_Tools.getProperty(this.getOptions(), 'color', 'gradient', 'enabled');
25170
+ var isGradientEnabled = tools_Tools.getProperty(options, 'color', 'gradient', 'enabled');
25147
25171
  // Should gradient style be applicable
25148
25172
  var isGradientAllowed = groupedData && groupedData.length === 1 && isGradientEnabled;
25149
25173
  if (groupedData.length > 1 && isGradientEnabled) {
@@ -26225,7 +26249,7 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
26225
26249
  };
26226
26250
  StackedBar.prototype.getBarWidth = function () {
26227
26251
  var options = this.getOptions();
26228
- if (tools_Tools.getProperty(options, "bars", "width")) {
26252
+ if (tools_Tools.getProperty(options, 'bars', 'width')) {
26229
26253
  return options.bars.width;
26230
26254
  }
26231
26255
  var mainXScale = this.services.cartesianScales.getMainXScale();
@@ -32587,6 +32611,13 @@ var radar_Radar = /** @class */ (function (_super) {
32587
32611
  })
32588
32612
  .attr('y', function (key) {
32589
32613
  return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y;
32614
+ })
32615
+ .end()
32616
+ .finally(function () {
32617
+ // Align chart horizontally after x-axies has finished rendering
32618
+ var alignment = tools_Tools.getProperty(options, 'radar', 'alignment');
32619
+ var alignmentXOffset = _this.getAlignmentXOffset(alignment, svg, _this.getParent());
32620
+ svg.attr('x', alignmentXOffset);
32590
32621
  });
32591
32622
  });
32592
32623
  }, function (exit) {
@@ -32807,9 +32838,6 @@ var radar_Radar = /** @class */ (function (_super) {
32807
32838
  .remove();
32808
32839
  });
32809
32840
  });
32810
- var alignment = tools_Tools.getProperty(options, 'radar', 'alignment');
32811
- var alignmentXOffset = this.getAlignmentXOffset(alignment, svg, this.getParent());
32812
- svg.attr('x', alignmentXOffset);
32813
32841
  // Add event listeners
32814
32842
  this.addEventListeners();
32815
32843
  };
@@ -33611,8 +33639,8 @@ var circle_pack_CirclePack = /** @class */ (function (_super) {
33611
33639
  .on('click', function (event, datum) {
33612
33640
  var hoveredElement = src_select(this);
33613
33641
  var disabled = hoveredElement.classed('non-focal');
33614
- var zoomedIn = tools_Tools.getProperty(self.getOptions(), 'canvasZoom', 'enabled') && self.model.getHierarchyLevel() > 2;
33615
- if (zoomedIn) {
33642
+ var canvasZoomEnabled = tools_Tools.getProperty(self.model.getOptions(), 'canvasZoom', 'enabled');
33643
+ if (canvasZoomEnabled && self.model.getHierarchyLevel() > 2) {
33616
33644
  var canvasSelection = self.parent.selectAll('circle.node');
33617
33645
  var chartSvg = src_select(self.services.domUtils.getMainContainer());
33618
33646
  chartSvg.classed('zoomed-in', false);
@@ -33621,7 +33649,10 @@ var circle_pack_CirclePack = /** @class */ (function (_super) {
33621
33649
  self.services.canvasZoom.zoomOut(canvasSelection, canvasZoomSettings);
33622
33650
  }
33623
33651
  // zoom if chart has zoom enabled and if its a depth 2 circle that has children
33624
- else if (datum.depth === 2 && datum.children && !disabled) {
33652
+ else if (datum.depth === 2 &&
33653
+ datum.children &&
33654
+ !disabled &&
33655
+ canvasZoomEnabled) {
33625
33656
  var canvasSelection = self.parent.selectAll('circle.node');
33626
33657
  var chartSvg = src_select(self.services.domUtils.getMainContainer());
33627
33658
  chartSvg.classed('zoomed-in', true);