@carbon/charts-vue 0.43.0 → 0.45.1

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.45.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.45.0...v0.45.1) (2021-08-23)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+# [0.45.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.44.1...v0.45.0) (2021-08-19)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.44.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.44.0...v0.44.1) (2021-08-19)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+# [0.44.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.43.0...v0.44.0) (2021-08-18)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 # [0.43.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.42.1...v0.43.0) (2021-08-17)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/README.md

@@ -11,21 +11,21 @@
 Run the following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @carbon/charts @carbon/charts-vue d3@5.x
+npm install -S @carbon/charts @carbon/charts-vue d3
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
 instead:
 
 ```bash
-yarn add @carbon/charts @carbon/charts-vue d3@5.x
+yarn add @carbon/charts @carbon/charts-vue d3
 ```
 
 **Note:** you'd also need to install `carbon-components` if you're not using a bundled version of the library.
 
 ## Step-by-step instructions
 
-Read [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--vue)
+Read [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vue)
 
 ## Codesandbox examples
 
@@ -39,7 +39,7 @@ Although we will definitely introduce new models in the future as we start shipp
 
 For instance in the case of a donut chart you're able to pass in an additional field called `center` in your options configuring the donut center.
 
-For instructions on using the **tabular data format**, see [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
+For instructions on using the **tabular data format**, see [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
 
 There are also additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
 

package/charts-vue.common.js

@@ -8033,11 +8033,12 @@ var tools_Tools;
      * @export
      * @param {any} item
      * @param {any} fullData
+     * @param {string} key
      * @returns The percentage in the form of a number (1 significant digit if necessary)
      */
-    function convertValueToPercentage(item, fullData) {
-        var percentage = (item / fullData.reduce(function (accum, val) { return accum + val.value; }, 0)) *
-            100;
+    function convertValueToPercentage(item, fullData, key) {
+        if (key === void 0) { key = 'value'; }
+        var percentage = (item / fullData.reduce(function (accum, val) { return accum + val[key]; }, 0)) * 100;
         // if the value has any significant figures, keep 1
         return percentage % 1 !== 0
             ? parseFloat(percentage.toFixed(1))
@@ -8580,6 +8581,7 @@ var pieChart = tools_Tools.merge({}, chart, {
         },
         alignment: Alignments.LEFT,
         sortFunction: null,
+        valueMapsTo: 'value',
     },
 });
 /**
@@ -8940,6 +8942,22 @@ function stackSeries(key) {
   return stack;
 });
 
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-shape/src/offset/diverging.js
+/* harmony default export */ var diverging = (function(series, order) {
+  if (!((n = series.length) > 0)) return;
+  for (var i, j = 0, d, dy, yp, yn, n, m = series[order[0]].length; j < m; ++j) {
+    for (yp = yn = 0, i = 0; i < n; ++i) {
+      if ((dy = (d = series[order[i]][j])[1] - d[0]) > 0) {
+        d[0] = yp, d[1] = yp += dy;
+      } else if (dy < 0) {
+        d[1] = yn, d[0] = yn += dy;
+      } else {
+        d[0] = 0, d[1] = dy;
+      }
+    }
+  }
+});
+
 // CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-array/src/array.js
 var array_array = Array.prototype;
 
@@ -9598,7 +9616,7 @@ var model_ChartModel = /** @class */ (function () {
         });
     };
     ChartModel.prototype.getStackedData = function (_a) {
-        var _b = _a.percentage, percentage = _b === void 0 ? false : _b, _c = _a.groups, groups = _c === void 0 ? null : _c;
+        var _b = _a.percentage, percentage = _b === void 0 ? false : _b, _c = _a.groups, groups = _c === void 0 ? null : _c, _d = _a.divergent, divergent = _d === void 0 ? false : _d;
         var options = this.getOptions();
         var groupMapsTo = options.data.groupMapsTo;
         var dataGroupNames = this.getDataGroupNames(groups);
@@ -9624,7 +9642,10 @@ var model_ChartModel = /** @class */ (function () {
                 });
             });
         }
-        return src_stack()
+        var stackToUse = divergent
+            ? src_stack().offset(diverging)
+            : src_stack();
+        return stackToUse
             .keys(dataGroupNames)(dataValuesGroupedByKeys)
             .map(function (series, i) {
             // Add data group names to each series
@@ -15907,26 +15928,6 @@ function max_max(values, valueof) {
   return max;
 }
 
-// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-array/src/sum.js
-function sum_sum(values, valueof) {
-  let sum = 0;
-  if (valueof === undefined) {
-    for (let value of values) {
-      if (value = +value) {
-        sum += value;
-      }
-    }
-  } else {
-    let index = -1;
-    for (let value of values) {
-      if (value = +valueof(value, ++index, values)) {
-        sum += value;
-      }
-    }
-  }
-  return sum;
-}
-
 // CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/date-fns/esm/toDate/index.js
 /**
  * @name toDate
@@ -17478,11 +17479,21 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
                 groups: dataGroupNames,
             });
             var nonStackedGroupsData = displayData.filter(function (datum) { return !dataGroupNames.includes(datum[groupMapsTo_1]); });
-            var stackedValues = dataValuesGroupedByKeys.map(function (dataValues) {
+            var stackedValues_1 = [];
+            dataValuesGroupedByKeys.forEach(function (dataValues) {
                 var sharedStackKey = dataValues.sharedStackKey, numericalValues = __rest(dataValues, ["sharedStackKey"]);
-                return sum_sum(Object.values(numericalValues));
+                var positiveSum = 0, negativeSum = 0;
+                Object.values(numericalValues).forEach(function (value) {
+                    if (value < 0) {
+                        negativeSum += value;
+                    }
+                    else {
+                        positiveSum += value;
+                    }
+                });
+                stackedValues_1.push([negativeSum, positiveSum]);
             });
-            allDataValues = scales_cartesian_spreadArrays(stackedValues, nonStackedGroupsData.map(function (datum) { return datum[mapsTo]; }));
+            allDataValues = scales_cartesian_spreadArrays(tools_Tools.flatten(stackedValues_1), nonStackedGroupsData.map(function (datum) { return datum[mapsTo]; }));
         }
         else {
             allDataValues = [];
@@ -26460,7 +26471,9 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
         // Create the data and keys that'll be used by the stack layout
         var stackData = this.model.getStackedData({
             groups: this.configs.groups,
+            divergent: true
         });
+        var activeDataGroupNames = this.model.getActiveDataGroupNames();
         // Update data on all bar groups
         var barGroups = svg
             .selectAll('g.bars')
@@ -26525,12 +26538,24 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             // Add the divider gap
             if (Math.abs(y1 - y0) > 0 &&
                 Math.abs(y1 - y0) > options.bars.dividerSize) {
-                if (_this.services.cartesianScales.getOrientation() ===
-                    CartesianOrientations.VERTICAL) {
-                    y1 += 1;
+                var barIsNegative = d[0] < 0 && d[1] <= 0;
+                if (barIsNegative && activeDataGroupNames.length > 1) {
+                    if (_this.services.cartesianScales.getOrientation() ===
+                        CartesianOrientations.VERTICAL) {
+                        y1 += d[1] === 0 ? 2 : 1;
+                    }
+                    else {
+                        y1 -= d[1] === 0 ? 1 : 1;
+                    }
                 }
-                else {
-                    y1 -= 1;
+                else if (!barIsNegative) {
+                    if (_this.services.cartesianScales.getOrientation() ===
+                        CartesianOrientations.VERTICAL) {
+                        y1 += 1;
+                    }
+                    else {
+                        y1 -= 1;
+                    }
                 }
             }
             return tools_Tools.generateSVGPathString({ x0: x0, x1: x1, y0: y0, y1: y1 }, _this.services.cartesianScales.getOrientation());
@@ -29064,12 +29089,13 @@ var pie_Pie = /** @class */ (function (_super) {
         if (animate === void 0) { animate = true; }
         var self = this;
         var svg = this.getComponentContainer();
+        var options = this.getOptions();
+        var groupMapsTo = options.data.groupMapsTo;
+        var valueMapsTo = options.pie.valueMapsTo;
         // remove any slices that are valued at 0 because they dont need to be rendered and will create extra padding
         var displayData = this.model
             .getDisplayData()
-            .filter(function (data) { return data.value > 0; });
-        var options = this.getOptions();
-        var groupMapsTo = options.data.groupMapsTo;
+            .filter(function (data) { return data[valueMapsTo] > 0; });
         // Compute the outer radius needed
         var radius = this.computeRadius();
         this.arc = src_arc().innerRadius(this.getInnerRadius()).outerRadius(radius);
@@ -29079,7 +29105,7 @@ var pie_Pie = /** @class */ (function (_super) {
             .outerRadius(radius + configuration_non_customizable_pie.hoverArc.outerRadiusOffset);
         // Setup the pie layout
         var pieLayout = src_pie()
-            .value(function (d) { return d.value; })
+            .value(function (d) { return d[valueMapsTo]; })
             .sort(tools_Tools.getProperty(options, 'pie', 'sortFunction'))
             .padAngle(configuration_non_customizable_pie.padAngle);
         // Add data to pie layout
@@ -29125,7 +29151,7 @@ var pie_Pie = /** @class */ (function (_super) {
             .attr('role', Roles.GRAPHICS_SYMBOL)
             .attr('aria-roledescription', 'slice')
             .attr('aria-label', function (d) {
-            return d.value + ", " + (tools_Tools.convertValueToPercentage(d.data.value, displayData) + '%');
+            return d[valueMapsTo] + ", " + (tools_Tools.convertValueToPercentage(d.data[valueMapsTo], displayData, valueMapsTo) + '%');
         })
             // Tween
             .attrTween('d', function (a) {
@@ -29134,7 +29160,7 @@ var pie_Pie = /** @class */ (function (_super) {
         // Draw the slice labels
         var renderLabels = options.pie.labels.enabled;
         var labelData = renderLabels
-            ? pieLayoutData.filter(function (x) { return x.value > 0; })
+            ? pieLayoutData.filter(function (x) { return x.data[valueMapsTo] > 0; })
             : [];
         var labelsGroup = dom_utils_DOMUtils.appendOrSelect(svg, 'g.labels')
             .attr('role', Roles.GROUP)
@@ -29158,8 +29184,7 @@ var pie_Pie = /** @class */ (function (_super) {
             if (options.pie.labels.formatter) {
                 return options.pie.labels.formatter(d);
             }
-            return (tools_Tools.convertValueToPercentage(d.data.value, displayData) +
-                '%');
+            return (tools_Tools.convertValueToPercentage(d.data[valueMapsTo], displayData, valueMapsTo) + '%');
         })
             // Calculate dimensions in order to transform
             .datum(function (d) {
@@ -29339,6 +29364,7 @@ var pie_Pie = /** @class */ (function (_super) {
                 datum: datum,
             });
             var groupMapsTo = self.getOptions().data.groupMapsTo;
+            var valueMapsTo = self.getOptions().pie.valueMapsTo;
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 event: event,
@@ -29346,7 +29372,7 @@ var pie_Pie = /** @class */ (function (_super) {
                 items: [
                     {
                         label: datum.data[groupMapsTo],
-                        value: datum.data.value,
+                        value: datum.data[valueMapsTo],
                     },
                 ],
             });
@@ -29830,7 +29856,7 @@ var donut_Donut = /** @class */ (function (_super) {
             donutCenterFigure = this.model
                 .getDisplayData()
                 .reduce(function (accumulator, d) {
-                return accumulator + d.value;
+                return accumulator + d[options.pie.valueMapsTo];
             }, 0);
         }
         // Remove commas from the current value string, and convert to an int
@@ -30677,6 +30703,26 @@ function constantZero() {
   return treemap;
 });
 
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-array/src/sum.js
+function sum_sum(values, valueof) {
+  let sum = 0;
+  if (valueof === undefined) {
+    for (let value of values) {
+      if (value = +value) {
+        sum += value;
+      }
+    }
+  } else {
+    let index = -1;
+    for (let value of values) {
+      if (value = +valueof(value, ++index, values)) {
+        sum += value;
+      }
+    }
+  }
+  return sum;
+}
+
 // CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/@carbon/colors/es/index.js
 /**
  * Copyright IBM Corp. 2018, 2018
@@ -37790,6 +37836,7 @@ var bar_stacked_StackedBarChart = /** @class */ (function (_super) {
             new skeleton_Skeleton(this.model, this.services, {
                 skeleton: Skeletons.VERT_OR_HORIZ,
             }),
+            new zero_line_ZeroLine(this.model, this.services),
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         return components;
@@ -38293,6 +38340,7 @@ var line_LineChart = /** @class */ (function (_super) {
             new line_Line(this.model, this.services),
             new scatter_Scatter(this.model, this.services, { handleThresholds: true }),
             new skeleton_lines_SkeletonLines(this.model, this.services),
+            new zero_line_ZeroLine(this.model, this.services),
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         return components;