PieChart: trigger onPointHoverChanged event on legend hover (T1299624) (#30461)

Author: anna-shakhova

packages/devextreme/js/viz/chart_components/tracker.js

@@ -306,12 +306,17 @@ const baseTrackerPrototype = {
         }
     },
 
+    _processArgumentHoveredPoint: function(argument, argumentIndex) {
+        this._releaseHoveredPoint();
+    },
+
     _hoverArgument: function(argument, argumentIndex) {
         const that = this;
         const hoverMode = that._getArgumentHoverMode();
 
         if(isDefined(argument)) {
-            that._releaseHoveredPoint();
+            this._processArgumentHoveredPoint(argument, argumentIndex);
+
             that._hoveredArgument = argument;
             that._argumentIndex = argumentIndex;
             that._notifySeries({
@@ -693,6 +698,17 @@ extend(PieTracker.prototype, baseTrackerPrototype, {
     _getArgumentHoverMode: function() {
         return correctHoverMode(this._legend);
     },
+
+    _processArgumentHoveredPoint: function(argument, argumentIndex) {
+        const points = this._storedSeries.flatMap((series) => series.getPointsByKeys(argument, argumentIndex));
+
+        if(points.length === 1) {
+            this._setHoveredPoint(points[0]);
+        } else {
+            this._releaseHoveredPoint();
+        }
+    },
+
     _hoverArgumentAxis: _noop,
     _setStuckSeries: _noop,
     _getCanvas: _noop,

packages/devextreme/testing/tests/DevExpress.viz.charts/tracker.tests.js

@@ -1233,8 +1233,12 @@ QUnit.test('mouseover on legend item', function(assert) {
     $(this.renderer.root.element).trigger(getEvent('dxpointermove', { pageX: 100, pageY: 50 }));
 
     // assert
-    assert.ok(this.series.stub('hover').calledOnce);
-    assert.deepEqual(this.series.hover.lastCall.args, ['includepoints']);
+    assert.strictEqual(this.series.stub('hover').calledOnce, true, 'series hover called');
+    assert.deepEqual(this.series.hover.lastCall.args, ['includepoints'], 'hover mode is includepoints');
+
+    $(this.renderer.root.element).trigger(getEvent('dxpointermove', { pageX: 100, pageY: 50 }));
+
+    assert.strictEqual(this.series.stub('clearHover').calledOnce, true, 'series clear hover called');
 });
 
 QUnit.test('mouseover on legend item. ExcludePoints mode', function(assert) {
@@ -2218,6 +2222,11 @@ QUnit.module('Root events. Pie chart', {
             return createTracker('dxPieChart', options);
         };
 
+        that.updateTracker = function(series) {
+            that.tracker.updateSeries(series);
+            that.tracker.update(this.options);
+        };
+
         that.tracker = that.createTracker(that.options);
         that.options.tooltip.stub('hide').reset();
     },
@@ -2396,6 +2405,41 @@ QUnit.test('mouseover on legend item', function(assert) {
     assert.strictEqual(this.series.notify.lastCall.args[0].target.getOptions().hoverMode, 'allargumentpoints');
 });
 
+QUnit.test('hover on legend should trigger point hover if PieChart has single series (T1299624)', function(assert) {
+    this.legend.coordsIn.withArgs(97, 45).returns(true);
+    this.legend.getItemByCoord.withArgs(97, 45).returns({ id: 0, argument: 'argument1', argumentIndex: 11 });
+    this.series.stub('getPointsByKeys').withArgs('argument1', 11).returns([this.point]);
+
+    $(this.renderer.root.element).trigger(getEvent('dxpointermove', { pageX: 100, pageY: 50 }));
+
+    assert.strictEqual(this.point.stub('hover').callCount, 1, 'point hover called on legend mouseover');
+
+    $(this.renderer.root.element).trigger(getEvent('dxpointermove', { pageX: 80, pageY: 50 }));
+
+    assert.strictEqual(this.point.stub('clearHover').callCount, 1, 'point clear hover called on legend mouseout');
+});
+
+QUnit.test('hover on legend should not be triggered point hover if PieChart has multiple series (T1299624)', function(assert) {
+    const series2 = createSeries();
+    const point2 = createPoint(series2);
+    this.updateTracker([this.series, series2]);
+
+    this.legend.coordsIn.withArgs(97, 45).returns(true);
+    this.legend.getItemByCoord.withArgs(97, 45).returns({ id: 0, argument: 'argument1', argumentIndex: 11 });
+    this.series.stub('getPointsByKeys').withArgs('argument1', 11).returns([this.point]);
+    series2.stub('getPointsByKeys').withArgs('argument1', 11).returns([point2]);
+
+    $(this.renderer.root.element).trigger(getEvent('dxpointermove', { pageX: 100, pageY: 50 }));
+
+    assert.strictEqual(this.point.stub('hover').callCount, 0, 'first series point not hovered on legend mouseover');
+    assert.strictEqual(point2.stub('hover').callCount, 0, 'second series point not hovered on legend mouseover');
+
+    $(this.renderer.root.element).trigger(getEvent('dxpointermove', { pageX: 80, pageY: 50 }));
+
+    assert.strictEqual(this.point.stub('clearHover').callCount, 0, 'first series point hover not cleared on legend mouseout');
+    assert.strictEqual(point2.stub('clearHover').callCount, 0, 'second series point hover not cleared on legend mouseout');
+});
+
 QUnit.test('mouseout from legend item', function(assert) {
     this.legend.coordsIn.withArgs(97, 45).returns(true);
     this.legend.getItemByCoord.withArgs(97, 45).returns({ id: 0, argument: 'argument1', argumentIndex: 11 });