@carbon/charts-vue 0.41.27 → 0.41.32

package/charts-vue.umd.js

@@ -7760,6 +7760,10 @@ var configuration_non_customizable_lines = {
         unselected: 0.3,
         selected: 1,
     },
+    weight: {
+        selected: 2,
+        unselected: 1,
+    },
 };
 var meter = {
     statusBar: {
@@ -8076,11 +8080,11 @@ var bubbleChart = tools_Tools.merge({}, axisChart, {
             ];
         },
         fillOpacity: 0.2,
-        enabled: true
+        enabled: true,
     },
     points: {
-        filled: true
-    }
+        filled: true,
+    },
 });
 /**
  * options specific to pie charts
@@ -23138,7 +23142,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')
@@ -23256,7 +23260,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))
@@ -24267,9 +24271,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, {
@@ -24579,6 +24585,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();
@@ -24641,7 +24666,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);
@@ -24659,6 +24684,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
@@ -24670,6 +24703,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));
@@ -25243,7 +25279,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;
@@ -25737,8 +25774,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')
@@ -25748,15 +25786,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
@@ -31144,7 +31189,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);