@carbon/charts-vue 0.51.4 → 0.52.3

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.52.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.52.2...v0.52.3) (2021-11-22)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.52.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.52.1...v0.52.2) (2021-11-19)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.52.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.52.0...v0.52.1) (2021-11-19)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+# [0.52.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.4...v0.52.0) (2021-11-18)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 ## [0.51.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.3...v0.51.4) (2021-11-16)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -1071,6 +1071,7 @@ var meter = {
     },
     total: {
         paddingLeft: 36,
+        paddingRight: 24,
     },
     height: {
         default: 8,
@@ -10104,8 +10105,12 @@ var Service = /** @class */ (function () {
         this.services = services;
         this.init();
     }
-    Service.prototype.init = function () { };
-    Service.prototype.update = function () { };
+    Service.prototype.init = function () {
+        // do nothing.
+    };
+    Service.prototype.update = function () {
+        // do nothing.
+    };
     // Used to pass down information to the components
     Service.prototype.setModel = function (newObj) {
         this.model = newObj;
@@ -11699,12 +11704,12 @@ var Files = /** @class */ (function (_super) {
     function Files(model, services) {
         return _super.call(this, model, services) || this;
     }
-    Files.prototype.downloadCSV = function (content, filename, mimeType) {
+    Files.prototype.downloadCSV = function (content, filename) {
         var anchor = document.createElement('a');
-        mimeType = 'text/csv;encoding:utf-8';
-        if (navigator.msSaveBlob) {
+        var mimeType = 'text/csv;encoding:utf-8';
+        if (navigator['msSaveBlob']) {
             // Internet Explorer 10
-            navigator.msSaveBlob(new Blob([content], {
+            navigator['msSaveBlob'](new Blob([content], {
                 type: mimeType,
             }), filename);
         }
@@ -17785,12 +17790,16 @@ var component_Component = /** @class */ (function () {
             this.setParent(src_select(this.services.domUtils.getMainContainer()));
         }
     }
-    Component.prototype.init = function () { };
+    Component.prototype.init = function () {
+        // do nothing.
+    };
     Component.prototype.render = function (animate) {
         if (animate === void 0) { animate = true; }
         console.error('render() method is not implemented');
     };
-    Component.prototype.destroy = function () { };
+    Component.prototype.destroy = function () {
+        // do nothing.
+    };
     // Used to pass down information to the components
     Component.prototype.setModel = function (newObj) {
         this.model = newObj;
@@ -20040,21 +20049,16 @@ var essentials_modal_Modal = /** @class */ (function (_super) {
             var modalInstance = modal.create(_this.modal.node());
             modalInstance.show();
         };
-        _this.handleHideModal = function () { };
         _this.init();
         return _this;
     }
     Modal.prototype.addEventListeners = function () {
         // listen to show-modal Custom Events to render the modal
         this.services.events.addEventListener(Events.Modal.SHOW, this.handleShowModal);
-        // listen to hide-modal Custom Events to hide the modal
-        this.services.events.addEventListener(Events.Modal.HIDE, this.handleHideModal);
     };
     Modal.prototype.removeEventListeners = function () {
         // remove show-modal Custom Events
         this.services.events.removeEventListener(Events.Modal.SHOW, this.handleShowModal);
-        // remove hide-modal Custom Events
-        this.services.events.removeEventListener(Events.Modal.HIDE, this.handleHideModal);
     };
     Modal.prototype.getModalHTML = function () {
         var options = this.model.getOptions();
@@ -23269,9 +23273,9 @@ var title_meter_MeterTitle = /** @class */ (function (_super) {
             title.exit().remove();
             // appends the associated percentage after title
             this.appendPercentage();
-            // if status ranges are provided (custom or default), display indicator
-            this.displayStatus();
         }
+        // if status ranges are provided (custom or default), display indicator
+        this.displayStatus();
         // get the max width of a title (with consideration for the status/percentage)
         var maxWidth = this.getMaxTitleWidth();
         var titleElement = dom_utils_DOMUtils.appendOrSelect(svg, 'text.meter-title');
@@ -23342,7 +23346,7 @@ var title_meter_MeterTitle = /** @class */ (function (_super) {
         var totalString = totalFormatter !== null
             ? totalFormatter(totalValue)
             : total + " " + unit + " total";
-        var containerBounds = dom_utils_DOMUtils.getSVGElementSize(this.services.domUtils.getMainContainer(), { useAttrs: true });
+        var containerBounds = dom_utils_DOMUtils.getHTMLElementSize(this.services.domUtils.getMainContainer());
         // need to check if the width is 0, and try to use the parent attribute
         // this can happen if the chart is toggled on/off and the height is 0 for the parent, it wont validateDimensions
         var containerWidth = containerBounds.width
@@ -23356,7 +23360,10 @@ var title_meter_MeterTitle = /** @class */ (function (_super) {
             .append('text')
             .classed('proportional-meter-total', true)
             .merge(title)
-            .attr('x', containerWidth)
+            // Position the total text -24 pixels to add spacing between text and status icon (if status exists)
+            .attr('x', this.model.getStatus()
+            ? containerWidth - meter.total.paddingRight
+            : containerWidth)
             .attr('y', '1em')
             .attr('text-anchor', 'end')
             .text(function (d) { return d; });
@@ -25584,7 +25591,7 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
                         y1 += d[1] === 0 ? 2 : 1;
                     }
                     else {
-                        y1 -= d[1] === 0 ? 1 : 1;
+                        y1 -= 1;
                     }
                 }
                 else if (!barIsNegative) {
@@ -34133,6 +34140,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) {
@@ -34152,6 +34160,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) {
@@ -34222,11 +34232,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) {
@@ -34247,7 +34291,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) {
@@ -39732,6 +39781,7 @@ var chart_Chart = /** @class */ (function () {
             canvasZoom: canvas_zoom_CanvasZoom,
         };
         this.model = new model_ChartModel(this.services);
+        // do nothing.
     }
     // Contains the code that uses properties that are overridable by the super-class
     Chart.prototype.init = function (holder, chartConfigs) {
@@ -41499,9 +41549,18 @@ var meter_MeterChartModel = /** @class */ (function (_super) {
      */
     MeterChartModel.prototype.getStatus = function () {
         var options = this.getOptions();
-        var dataValue = tools_Tools.getProperty(this.getDisplayData(), 0, 'value');
+        var dataValues = tools_Tools.getProperty(this.getDisplayData());
+        var totalValue = (dataValues
+            ? dataValues.reduce(function (previous, current) {
+                return { value: previous.value + current.value };
+            })
+            : 0).value;
         // use max value if the percentage is bigger than 100%
-        var boundedValue = dataValue > 100 ? 100 : dataValue;
+        var boundedValue = tools_Tools.getProperty(options, 'meter', 'proportional')
+            ? totalValue
+            : totalValue > 100
+                ? 100
+                : totalValue;
         // user needs to supply ranges
         var allRanges = tools_Tools.getProperty(options, 'meter', 'status', 'ranges');
         if (allRanges) {
@@ -41658,7 +41717,9 @@ var meter_Meter = /** @class */ (function (_super) {
         // rect with the value binded
         var valued = svg.selectAll('rect.value').data(stackedData);
         // if user provided a color for the bar, we dont want to attach a status class
-        var className = status != null && !self.model.isUserProvidedColorScaleValid()
+        var className = status != null &&
+            !self.model.isUserProvidedColorScaleValid() &&
+            !proportional
             ? "value status--" + status
             : 'value';
         // draw the value bar
@@ -41704,9 +41765,7 @@ var meter_Meter = /** @class */ (function (_super) {
             .attr('aria-label', function (d) { return d.value; });
         valued.exit().remove();
         // draw the peak
-        var peakValue = proportional
-            ? null
-            : tools_Tools.getProperty(options, 'meter', 'peak');
+        var peakValue = tools_Tools.getProperty(options, 'meter', 'peak');
         var peakData = peakValue;
         if (peakValue !== null) {
             if (peakValue > domainMax) {
@@ -41728,7 +41787,11 @@ var meter_Meter = /** @class */ (function (_super) {
             .attr('y1', 0)
             .attr('y2', function () {
             var userProvidedHeight = tools_Tools.getProperty(options, 'meter', 'height');
-            return userProvidedHeight ? userProvidedHeight : 8;
+            return userProvidedHeight
+                ? userProvidedHeight
+                : proportional
+                    ? meter.height.proportional
+                    : meter.height.default;
         })
             .transition()
             .call(function (t) {