@carbon/charts-vue 0.52.1 → 0.52.2

package/charts-vue.umd.js

@@ -34145,6 +34145,7 @@ var alluvial_Alluvial = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.type = 'alluvial';
         _this.renderType = RenderTypes.SVG;
+        _this.gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
         return _this;
     }
     Alluvial.prototype.render = function (animate) {
@@ -34164,6 +34165,8 @@ var alluvial_Alluvial = /** @class */ (function (_super) {
         }
         var options = this.model.getOptions();
         var data = this.model.getDisplayData();
+        // Is gradient enabled or not
+        var isGradientAllowed = tools_Tools.getProperty(this.getOptions(), 'color', 'gradient', 'enabled');
         // Set the custom node padding if provided
         var nodePadding = alluvial.minNodePadding;
         if (options.alluvial.nodePadding > alluvial.minNodePadding) {
@@ -34234,11 +34237,45 @@ var alluvial_Alluvial = /** @class */ (function (_super) {
             return x;
         });
         // Draws the links (Waves)
-        svg.append('g')
+        var links = svg
+            .append('g')
             .attr('fill', 'none')
             .selectAll('g')
-            .data(this.graph.links)
-            .join('path')
+            .data(this.graph.links);
+        // Exit so we can have multiple appends in group
+        links.exit().remove();
+        // Add gradient if requsted
+        if (isGradientAllowed) {
+            var scale_1 = tools_Tools.getProperty(this.getOptions(), 'color', 'scale');
+            if (scale_1) {
+                links
+                    .enter()
+                    .append('linearGradient')
+                    .attr('id', function (d) { return _this.gradient_id + "-link-" + d.index; })
+                    .attr('gradientUnits', 'userSpaceOnUse')
+                    .call(function (gradient) {
+                    return gradient
+                        .append('stop')
+                        .attr('offset', '0%')
+                        .attr('stop-color', function (d) {
+                        return scale_1[d.source.name];
+                    });
+                })
+                    .call(function (gradient) {
+                    return gradient
+                        .append('stop')
+                        .attr('offset', '100%')
+                        .attr('stop-color', function (d) {
+                        return scale_1[d.target.name];
+                    });
+                });
+            }
+            // Exit so path can be appended to the group
+            links.exit().remove();
+        }
+        links
+            .enter()
+            .append('path')
             .classed('link', true)
             .attr('d', sankeyLinkHorizontal())
             .attr('id', function (d) {
@@ -34259,7 +34296,12 @@ var alluvial_Alluvial = /** @class */ (function (_super) {
                 originalClassName: 'link',
             });
         })
-            .style('stroke', function (d) { return _this.model.getFillColor(d.source.name); })
+            .style('stroke', function (d) {
+            if (isGradientAllowed) {
+                return "url(#" + _this.gradient_id + "-link-" + d.index + ")";
+            }
+            return _this.model.getFillColor(d.source.name);
+        })
             .attr('stroke-width', function (d) { return Math.max(1, d.width); })
             .style('stroke-opacity', alluvial.opacity.default)
             .attr('aria-label', function (d) {