@carbon/charts-vue 1.6.0 → 1.6.2

package/charts-vue.umd.js

@@ -20765,7 +20765,6 @@ var legend_Legend = /** @class */ (function (_super) {
         var truncationThreshold = tools_Tools.getProperty(truncationOptions, 'threshold');
         var truncationNumCharacter = tools_Tools.getProperty(truncationOptions, 'numCharacter');
         var addedLegendItemsText = svg.selectAll('div.legend-item p');
-        var self = this;
         // Add an ID for the checkbox to use through `aria-labelledby`
         addedLegendItemsText.attr('id', function (d, i) {
             var elementToReference = this.parentNode.querySelector('div.checkbox') ||
@@ -20792,7 +20791,7 @@ var legend_Legend = /** @class */ (function (_super) {
         var svg = this.getComponentContainer();
         var options = this.getOptions();
         var legendOptions = tools_Tools.getProperty(options, 'legend');
-        var truncationThreshold = tools_Tools.getProperty(legendOptions, 'truncation', 'threshold');
+        var truncation = tools_Tools.getProperty(legendOptions, 'truncation');
         svg.selectAll('div.legend-item')
             .on('mouseover', function (event) {
             self.services.events.dispatchEvent(Events.Legend.ITEM_HOVER, {
@@ -20800,8 +20799,10 @@ var legend_Legend = /** @class */ (function (_super) {
             });
             var hoveredItem = src_select(this);
             hoveredItem.select('div.checkbox').classed('hovered', true);
+            // Show tooltip if character length is greater than threshold & there is no truncation
             var hoveredItemData = hoveredItem.datum();
-            if (hoveredItemData.name.length > truncationThreshold) {
+            if (hoveredItemData.name.length > truncation.threshold &&
+                truncation.type !== TruncationTypes.NONE) {
                 self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     event: event,
                     hoveredElement: hoveredItem,
@@ -20810,9 +20811,14 @@ var legend_Legend = /** @class */ (function (_super) {
             }
         })
             .on('mousemove', function (event) {
-            self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-                event: event,
-            });
+            // Emit tooltip move event only if tooltip is shown
+            var hoveredItemData = src_select(this).datum();
+            if (hoveredItemData.name.length > truncation.threshold &&
+                truncation.type !== TruncationTypes.NONE) {
+                self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
+                    event: event,
+                });
+            }
         })
             .on('click', function () {
             self.services.events.dispatchEvent(Events.Legend.ITEM_CLICK, {
@@ -20825,7 +20831,12 @@ var legend_Legend = /** @class */ (function (_super) {
             .on('mouseout', function () {
             var hoveredItem = src_select(this);
             hoveredItem.select('div.checkbox').classed('hovered', false);
-            self.services.events.dispatchEvent(Events.Tooltip.HIDE);
+            // Emit tooltip hide event only if tooltip is shown
+            var hoveredItemData = hoveredItem.datum();
+            if (hoveredItemData.name.length > truncation.threshold &&
+                truncation.type !== TruncationTypes.NONE) {
+                self.services.events.dispatchEvent(Events.Tooltip.HIDE);
+            }
             self.services.events.dispatchEvent(Events.Legend.ITEM_MOUSEOUT, {
                 hoveredElement: hoveredItem,
             });
@@ -20853,7 +20864,7 @@ var legend_Legend = /** @class */ (function (_super) {
         svg.selectAll('g.additional-item').on('mouseover', function (event) {
             var hoveredItem = src_select(this);
             var hoveredItemData = hoveredItem.datum();
-            if (hoveredItemData.name.length > truncationThreshold) {
+            if (hoveredItemData.name.length > truncation.threshold) {
                 self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     event: event,
                     hoveredElement: hoveredItem,
@@ -36598,27 +36609,6 @@ var hover_axis_HoverAxis = /** @class */ (function (_super) {
                 .attr('width', width + configuration_non_customizable_axis.hover.rectanglePadding * 2)
                 .attr('height', height)
                 .lower();
-            // Add keyboard event listeners to each group element
-            g.on('keydown', function (event) {
-                // Choose specific arrow key depending on the axis
-                if (axisPosition === AxisPositions.LEFT ||
-                    axisPosition === AxisPositions.RIGHT) {
-                    if (event.key && event.key === 'ArrowUp') {
-                        self.goNext(this, event);
-                    }
-                    else if (event.key && event.key === 'ArrowDown') {
-                        self.goPrevious(this, event);
-                    }
-                }
-                else {
-                    if (event.key && event.key === 'ArrowLeft') {
-                        self.goPrevious(this, event);
-                    }
-                    else if (event.key && event.key === 'ArrowRight') {
-                        self.goNext(this, event);
-                    }
-                }
-            });
         });
         // Add event listeners to element group
         this.addEventListeners();
@@ -36707,6 +36697,35 @@ var hover_axis_HoverAxis = /** @class */ (function (_super) {
                 element: src_select(this),
                 datum: src_select(this).select('text').datum(),
             });
+        })
+            .on('keydown', function (event) {
+            // Hide the tooltip when `Escape` is pressed, but keep focus
+            if (event.key && event.key === 'Escape') {
+                self.services.events.dispatchEvent(Events.Tooltip.HIDE);
+                self.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {
+                    event: event,
+                    element: src_select(this),
+                    datum: src_select(this).select('text').datum(),
+                });
+            }
+            // Choose specific arrow key depending on the axis
+            if (axisPosition === AxisPositions.LEFT ||
+                axisPosition === AxisPositions.RIGHT) {
+                if (event.key && event.key === 'ArrowUp') {
+                    self.goNext(this, event);
+                }
+                else if (event.key && event.key === 'ArrowDown') {
+                    self.goPrevious(this, event);
+                }
+            }
+            else {
+                if (event.key && event.key === 'ArrowLeft') {
+                    self.goPrevious(this, event);
+                }
+                else if (event.key && event.key === 'ArrowRight') {
+                    self.goNext(this, event);
+                }
+            }
         });
     };
     // Focus on the next HTML element sibling