Chart: fix visibility algorithm for candlestick points (T1304112) (DevExpress#30821)

Author: anna-shakhova

packages/devextreme/js/viz/series/points/candlestick_point.js

@@ -11,8 +11,6 @@ const _round = _math.round;
 const DEFAULT_FINANCIAL_TRACKER_MARGIN = 2;
 
 export default _extend({}, barPoint, {
-    _calculateVisibility: symbolPoint._calculateVisibility,
-
     _getContinuousPoints: function(openCoord, closeCoord) {
         const that = this;
         const x = that.x;
@@ -265,19 +263,23 @@ export default _extend({}, barPoint, {
     },
 
     _translate: function() {
-        const that = this;
-        const rotated = that._options.rotated;
-        const valTranslator = that._getValTranslator();
-        const x = that._getArgTranslator().translate(that.argument);
+        const valTranslator = this._getValTranslator();
+        const x = this._getArgTranslator().translate(this.argument);
 
-        that.vx = that.vy = that.x = x === null ? x : x + (that.xCorrection || 0);
-        that.openY = that.openValue !== null ? valTranslator.translate(that.openValue) : null;
-        that.highY = valTranslator.translate(that.highValue);
-        that.lowY = valTranslator.translate(that.lowValue);
-        that.closeY = that.closeValue !== null ? valTranslator.translate(that.closeValue) : null;
+        this.vx = this.vy = this.x = x === null ? x : x + (this.xCorrection || 0);
+        this.openY = this.openValue !== null ? valTranslator.translate(this.openValue) : null;
+        this.highY = valTranslator.translate(this.highValue);
+        this.lowY = valTranslator.translate(this.lowValue);
+        this.closeY = this.closeValue !== null ? valTranslator.translate(this.closeValue) : null;
 
-        const centerValue = _min(that.lowY, that.highY) + _abs(that.lowY - that.highY) / 2;
-        that._calculateVisibility(!rotated ? that.x : centerValue, !rotated ? centerValue : that.x);
+        const minValue = Math.min(this.lowY, this.highY);
+        const height = Math.abs(this.lowY - this.highY);
+
+        if(this._options.rotated) {
+            this._calculateVisibility(minValue, this.x, height, 0);
+        } else {
+            this._calculateVisibility(this.x, minValue, 0, height);
+        }
     },
 
     getCrosshairData: function(x, y) {

packages/devextreme/testing/tests/DevExpress.viz.core.series/financialPoint.tests.js

@@ -462,13 +462,13 @@ QUnit.test('Negative. LowValue', function(assert) {
     assert.strictEqual(result, false);
 });
 
-QUnit.module('Check point in visible area', {
+QUnit.module('Check point in visible area (T1304112)', {
     beforeEach: function() {
         const that = this;
 
         const visibleArea = [0, 100, 1000, 1100];
         const translateXData = { 1: -10, 2: visibleArea[0], 3: 50, 4: visibleArea[1], 5: 110 };
-        const translateYData = { 1: 990, 2: visibleArea[2], 3: 1010, 4: 1040, 5: 1050, 6: 1090, 7: visibleArea[3], 8: 1110 };
+        const translateYData = { 0: 980, 1: 990, 2: visibleArea[2], 3: 1010, 4: 1040, 5: 1050, 6: 1090, 7: visibleArea[3], 8: 1110, 9: 1120 };
 
         this.options = {
             widgetType: 'chart',
@@ -535,38 +535,46 @@ QUnit.test('Point is visible on the right border', function(assert) {
 });
 
 QUnit.test('Point is invisible on the top', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 7, closeValue: 8, highValue: 8, lowValue: 7 }, this.options);
+    this.point = createPoint(this.series, { argument: 3, openValue: 8, closeValue: 9, highValue: 9, lowValue: 8 }, this.options);
     this.point.translate();
 
-    assert.ok(!this.point.isInVisibleArea());
+    assert.strictEqual(this.point.isInVisibleArea(), false);
 });
 
 QUnit.test('Point is visible on the top border', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 6, closeValue: 8, highValue: 8, lowValue: 6 }, this.options);
-    this.point.translate();
+    const point = createPoint(this.series, { argument: 3, openValue: 6, closeValue: 8, highValue: 8, lowValue: 6 }, this.options);
+    const point2 = createPoint(this.series, { argument: 3, openValue: 7, closeValue: 8, highValue: 8, lowValue: 7 }, this.options);
 
-    assert.ok(this.point.isInVisibleArea());
+    point.translate();
+    point2.translate();
+
+    assert.strictEqual(point.isInVisibleArea(), true, 'Point is visible if center of point is inside visible area');
+    assert.strictEqual(point2.isInVisibleArea(), true, 'Point is visible if lowValue is inside visible area');
 });
 
 QUnit.test('Point is invisible on the bottom', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 2, highValue: 2, lowValue: 1 }, this.options);
+    this.point = createPoint(this.series, { argument: 3, openValue: 0, closeValue: 1, highValue: 1, lowValue: 0 }, this.options);
     this.point.translate();
 
     assert.ok(!this.point.isInVisibleArea());
 });
 
 QUnit.test('Point is visible on the bottom border', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 3, highValue: 3, lowValue: 1 }, this.options);
-    this.point.translate();
+    const point = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 3, highValue: 3, lowValue: 1 }, this.options);
+    const point2 = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 2, highValue: 2, lowValue: 1 }, this.options);
 
-    assert.ok(this.point.isInVisibleArea());
+    point.translate();
+    point2.translate();
+
+    assert.strictEqual(point.isInVisibleArea(), true, 'Point is visible if center of point is inside visible area');
+    assert.strictEqual(point2.isInVisibleArea(), true, 'Point is visible if highValue is inside visible area');
 });
 
-QUnit.module('Check point in visible area. Rotated.', {
+QUnit.module('Check point in visible area (T1304112). Rotated.', {
     beforeEach: function() {
         const that = this;
         const visibleArea = [0, 100, 0, 100];
-        const translateXData = { 1: -10, 2: visibleArea[0], 3: 10, 4: 40, 5: 50, 6: 90, 7: visibleArea[1], 8: 110 };
+        const translateXData = { 0: -20, 1: -10, 2: visibleArea[0], 3: 10, 4: 40, 5: 50, 6: 90, 7: visibleArea[1], 8: 110, 9: 120 };
         const translateYData = { 1: -10, 2: visibleArea[2], 3: 50, 4: visibleArea[3], 5: 110 };
 
         this.options = {
@@ -635,31 +643,39 @@ QUnit.test('Point is visible on the right border', function(assert) {
 });
 
 QUnit.test('Point is invisible on the top', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 7, closeValue: 8, highValue: 8, lowValue: 7 }, this.options);
+    this.point = createPoint(this.series, { argument: 3, openValue: 8, closeValue: 9, highValue: 9, lowValue: 8 }, this.options);
     this.point.translate();
 
-    assert.ok(!this.point.isInVisibleArea());
+    assert.strictEqual(this.point.isInVisibleArea(), false);
 });
 
 QUnit.test('Point is visible on the top border', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 6, closeValue: 8, highValue: 8, lowValue: 6 }, this.options);
-    this.point.translate();
+    const point = createPoint(this.series, { argument: 3, openValue: 6, closeValue: 8, highValue: 8, lowValue: 6 }, this.options);
+    const point2 = createPoint(this.series, { argument: 3, openValue: 7, closeValue: 8, highValue: 8, lowValue: 7 }, this.options);
 
-    assert.ok(this.point.isInVisibleArea());
+    point.translate();
+    point2.translate();
+
+    assert.strictEqual(point.isInVisibleArea(), true, 'Point is visible if center of point is inside visible area');
+    assert.strictEqual(point2.isInVisibleArea(), true, 'Point is visible if lowValue is inside visible area');
 });
 
 QUnit.test('Point is invisible on the bottom', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 2, highValue: 2, lowValue: 1 }, this.options);
+    this.point = createPoint(this.series, { argument: 3, openValue: 0, closeValue: 1, highValue: 1, lowValue: 0 }, this.options);
     this.point.translate();
 
     assert.ok(!this.point.isInVisibleArea());
 });
 
 QUnit.test('Point is visible on the bottom border', function(assert) {
-    this.point = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 3, highValue: 3, lowValue: 1 }, this.options);
-    this.point.translate();
+    const point = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 3, highValue: 3, lowValue: 1 }, this.options);
+    const point2 = createPoint(this.series, { argument: 3, openValue: 1, closeValue: 2, highValue: 2, lowValue: 1 }, this.options);
 
-    assert.ok(this.point.isInVisibleArea());
+    point.translate();
+    point2.translate();
+
+    assert.strictEqual(point.isInVisibleArea(), true, 'Point is visible if center of point is inside visible area');
+    assert.strictEqual(point2.isInVisibleArea(), true, 'Point is visible if highValue is inside visible area');
 });
 
 QUnit.module('Draw point. Candlestick', {