@carbon/charts-vue 0.41.27 → 0.41.32

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.41.27](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.26...v0.41.27) (2021-01-20)
+## [0.41.32](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.31...v0.41.32) (2021-02-12)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
@@ -11,46 +11,46 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.41.26](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.25...v0.41.26) (2021-01-19)
+## [0.41.31](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.30...v0.41.31) (2021-02-05)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
+## [0.41.30](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.29...v0.41.30) (2021-02-01)
 
+**Note:** Version bump only for package @carbon/charts-vue
 
-
-
-## [0.41.25](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.24...v0.41.25) (2021-01-18)
+## [0.41.29](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.28...v0.41.29) (2021-01-29)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
+## [0.41.28](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.27...v0.41.28) (2021-01-26)
 
+**Note:** Version bump only for package @carbon/charts-vue
 
+## [0.41.27](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.26...v0.41.27) (2021-01-20)
 
+**Note:** Version bump only for package @carbon/charts-vue
 
-## [0.41.24](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.23...v0.41.24) (2021-01-15)
+## [0.41.26](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.25...v0.41.26) (2021-01-19)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
+## [0.41.25](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.24...v0.41.25) (2021-01-18)
 
+**Note:** Version bump only for package @carbon/charts-vue
 
+## [0.41.24](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.23...v0.41.24) (2021-01-15)
 
+**Note:** Version bump only for package @carbon/charts-vue
 
 ## [0.41.23](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.22...v0.41.23) (2021-01-15)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.41.22](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.21...v0.41.22) (2021-01-15)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.41.21](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.20...v0.41.21) (2021-01-13)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -7751,6 +7751,10 @@ var configuration_non_customizable_lines = {
         unselected: 0.3,
         selected: 1,
     },
+    weight: {
+        selected: 2,
+        unselected: 1,
+    },
 };
 var meter = {
     statusBar: {
@@ -8067,11 +8071,11 @@ var bubbleChart = tools_Tools.merge({}, axisChart, {
             ];
         },
         fillOpacity: 0.2,
-        enabled: true
+        enabled: true,
     },
     points: {
-        filled: true
-    }
+        filled: true,
+    },
 });
 /**
  * options specific to pie charts
@@ -23129,7 +23133,7 @@ var area_Area = /** @class */ (function (_super) {
             if (boundsEnabled) {
                 enteringAreas
                     .attr('fill-opacity', configuration_non_customizable_area.opacity.selected)
-                    .attr('stroke', function (group) {
+                    .style('stroke', function (group) {
                     return self.model.getStrokeColor(group.name);
                 })
                     .style('stroke-dasharray', '2, 2')
@@ -23247,7 +23251,7 @@ var area_stacked_StackedArea = /** @class */ (function (_super) {
                 originalClassName: 'area',
             });
         })
-            .attr('fill', function (d) { return self.model.getFillColor(d[0][groupMapsTo]); })
+            .style('fill', function (d) { return self.model.getFillColor(d[0][groupMapsTo]); })
             .attr('role', Roles.GRAPHICS_SYMBOL)
             .attr('aria-roledescription', 'area')
             .transition(this.services.transitions.getTransition('area-update-enter', animate))
@@ -24258,9 +24262,11 @@ var scatter_Scatter = /** @class */ (function (_super) {
                 var domainIdentifier_1 = self.services.cartesianScales.getDomainIdentifier(datum);
                 hoveredElement
                     .classed('unfilled', !self.model.getIsFilled(datum[groupMapsTo], datum[domainIdentifier_1], datum, filled_1))
-                    .style("fill", function (d) { return filled_1
-                    ? self.model.getFillColor(d[groupMapsTo], d[domainIdentifier_1], d)
-                    : null; });
+                    .style('fill', function (d) {
+                    return filled_1
+                        ? self.model.getFillColor(d[groupMapsTo], d[domainIdentifier_1], d)
+                        : null;
+                });
             }
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Scatter.SCATTER_MOUSEOUT, {
@@ -24570,6 +24576,25 @@ var lollipop_Lollipop = /** @class */ (function (_super) {
     function Lollipop() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.type = 'lollipop';
+        // on hover, bolden the line associated with the scatter
+        _this.handleScatterOnHover = function (event) {
+            var hoveredElement = event.detail;
+            var options = _this.getOptions();
+            var groupMapsTo = options.data.groupMapsTo;
+            _this.parent.selectAll('line.line').attr('stroke-width', function (d) {
+                if (d[groupMapsTo] !== hoveredElement.datum[groupMapsTo]) {
+                    return configuration_non_customizable_lines.weight.unselected;
+                }
+                // apply selected weight
+                return configuration_non_customizable_lines.weight.selected;
+            });
+        };
+        // on mouse out remove the stroke width assertion
+        _this.handleScatterOnMouseOut = function (event) {
+            _this.parent
+                .selectAll('line.line')
+                .attr('stroke-width', configuration_non_customizable_lines.weight.unselected);
+        };
         _this.handleLegendOnHover = function (event) {
             var hoveredElement = event.detail.hoveredElement;
             var options = _this.getOptions();
@@ -24632,7 +24657,7 @@ var lollipop_Lollipop = /** @class */ (function (_super) {
             });
         })
             .transition(this.services.transitions.getTransition('lollipop-line-update-enter', animate))
-            .attr('stroke', function (d) {
+            .style('stroke', function (d) {
             return _this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d);
         })
             .attr('opacity', 1);
@@ -24650,6 +24675,14 @@ var lollipop_Lollipop = /** @class */ (function (_super) {
                 .attr('y1', mainYScale.range()[0])
                 .attr('y2', function (d, i) { return getYValue(d, i) + options.points.radius; });
         }
+        this.addScatterPointEventListeners();
+    };
+    // listen for when individual datapoints are hovered
+    Lollipop.prototype.addScatterPointEventListeners = function () {
+        // Highlight correct line associated when hovering on a scatter point
+        this.services.events.addEventListener(Events.Scatter.SCATTER_MOUSEOVER, this.handleScatterOnHover);
+        // unbolden the line when not hovered on the lollipop scatter point
+        this.services.events.addEventListener(Events.Scatter.SCATTER_MOUSEOUT, this.handleScatterOnMouseOut);
     };
     Lollipop.prototype.destroy = function () {
         // Remove event listeners
@@ -24661,6 +24694,9 @@ var lollipop_Lollipop = /** @class */ (function (_super) {
         var eventsFragment = this.services.events;
         eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
         eventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
+        // remove scatter listeners
+        eventsFragment.removeEventListener(Events.Scatter.SCATTER_MOUSEOVER, this.handleScatterOnHover);
+        eventsFragment.removeEventListener(Events.Scatter.SCATTER_MOUSEOUT, this.handleScatterOnMouseOut);
     };
     return Lollipop;
 }(scatter_Scatter));
@@ -25234,7 +25270,8 @@ var pie_Pie = /** @class */ (function (_super) {
         var self = this;
         var svg = this.getContainerSVG();
         // 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()
+        var displayData = this.model
+            .getDisplayData()
             .filter(function (data) { return data.value > 0; });
         var options = this.getOptions();
         var groupMapsTo = options.data.groupMapsTo;
@@ -25728,8 +25765,9 @@ var gauge_Gauge = /** @class */ (function (_super) {
         }
         // Add the numbers at the center
         var numbersGroup = dom_utils_DOMUtils.appendOrSelect(svg, 'g.gauge-numbers').attr('transform', "translate(0, " + numbersYPosition + ")");
+        var fontSize = valueFontSize(radius);
         // Add the big number
-        var valueNumberGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number').attr('transform', 'translate(-10, 0)'); // Optical centering for the presence of the smaller % symbol
+        var valueNumberGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number');
         var numberFormatter = tools_Tools.getProperty(options, 'gauge', 'numberFormatter');
         var valueNumber = valueNumberGroup
             .selectAll('text.gauge-value-number')
@@ -25739,15 +25777,22 @@ var gauge_Gauge = /** @class */ (function (_super) {
             .append('text')
             .attr('class', 'gauge-value-number')
             .merge(valueNumber)
-            .style('font-size', valueFontSize(radius) + "px")
+            .style('font-size', fontSize + "px")
             .attr('text-anchor', 'middle')
             .text(function (d) { return numberFormatter(d); });
         // add the percentage symbol beside the valueNumber
         var valueNumberWidth = dom_utils_DOMUtils.getSVGElementSize(dom_utils_DOMUtils.appendOrSelect(svg, 'text.gauge-value-number'), { useBBox: true }).width;
-        dom_utils_DOMUtils.appendOrSelect(valueNumberGroup, 'text.gauge-value-symbol')
-            .style('font-size', valueFontSize(radius) / 2 + "px")
+        var symbolFontSize = fontSize / 2;
+        var symbol = dom_utils_DOMUtils.appendOrSelect(valueNumberGroup, 'text.gauge-value-symbol')
+            .style('font-size', symbolFontSize + "px")
             .attr('x', valueNumberWidth / 2)
             .text('%');
+        var _a = dom_utils_DOMUtils.getSVGElementSize(symbol, { useBBox: true }), symbolWidth = _a.width, symbolHeight = _a.height;
+        // adjust the symbol to superscript using the bbox instead of the font-size cause
+        // we want to align the actual character to the value number
+        symbol.attr('y', "-" + symbolHeight / 2 + "px");
+        // move the value group depending on the symbol's drawn size
+        valueNumberGroup.attr('transform', "translate(-" + symbolWidth / 2 + ", 0)"); // Optical centering for the presence of the smaller % symbol
     };
     /**
      * adds the delta number for the gauge
@@ -31135,7 +31180,7 @@ var zoom_bar_ZoomBar = /** @class */ (function (_super) {
                     initialZoomDomain: tools_Tools.merge([], newInitialZoomDomain),
                     zoomDomain: newInitialZoomDomain
                         ? tools_Tools.merge([], newInitialZoomDomain)
-                        : defaultDomain
+                        : defaultDomain,
                 }, { skipUpdate: true });
             }
             this.xScale.range([axesLeftMargin, width]).domain(defaultDomain);