dxChart - fix labels overlapping for small bars (T869506) (#12686)

DevExpress · Apr 15, 2020 · 9c0637b · 9c0637b
1 parent 70274a6
commit 9c0637b
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 9 deletions.
diff --git a/js/viz/series/points/range_symbol_point.js b/js/viz/series/points/range_symbol_point.js
@@ -166,11 +166,11 @@ module.exports = _extend({}, symbolPoint, {
         let coord2 = bottomCoords[coordSelector] + delta;
 
         if(coord1 < minBound) {
-            delta = minBound - topCoords[coordSelector];
+            delta = minBound - coord1;
             coord1 += delta;
             coord2 += delta;
         } else if(coord2 + bottomCoords[valueSelector] > maxBound) {
-            delta = -(bottomCoords[coordSelector] + bottomCoords[valueSelector] - maxBound);
+            delta = maxBound - coord2 - bottomCoords[valueSelector];
             coord1 += delta;
             coord2 += delta;
         }

diff --git a/js/viz/series/points/symbol_point.js b/js/viz/series/points/symbol_point.js
@@ -330,6 +330,7 @@ module.exports = {
         const labelBBox = label.getBoundingRect();
         const graphicBBox = that._getGraphicBBox(label.pointPosition);
         const fullGraphicBBox = that._getGraphicBBox();
+        const isInside = label.getLayoutOptions().position === 'inside';
         const offset = LABEL_OFFSET;
 
         if(that._isPointInVisibleArea(visibleArea, fullGraphicBBox)) {
@@ -341,17 +342,25 @@ module.exports = {
                     coord.x = visibleArea.maxX - labelBBox.width;
                 }
                 if(visibleArea.minY > coord.y) {
-                    coord.y = graphicBBox.y + graphicBBox.height + offset;
+                    coord.y = isInside ?
+                        visibleArea.minY :
+                        graphicBBox.y + graphicBBox.height + offset;
                 }
                 if(visibleArea.maxY < (coord.y + labelBBox.height)) {
-                    coord.y = graphicBBox.y - labelBBox.height - offset;
+                    coord.y = isInside ?
+                        visibleArea.maxY - labelBBox.height :
+                        graphicBBox.y - labelBBox.height - offset;
                 }
             } else {
                 if(visibleArea.minX > coord.x) {
-                    coord.x = graphicBBox.x + graphicBBox.width + offset;
+                    coord.x = isInside ?
+                        visibleArea.minX :
+                        graphicBBox.x + graphicBBox.width + offset;
                 }
                 if(visibleArea.maxX < (coord.x + labelBBox.width)) {
-                    coord.x = graphicBBox.x - offset - labelBBox.width;
+                    coord.x = isInside ?
+                        visibleArea.maxX - labelBBox.width :
+                        graphicBBox.x - offset - labelBBox.width;
                 }
                 if(visibleArea.minY > coord.y) {
                     coord.y = visibleArea.minY;

diff --git a/testing/tests/DevExpress.viz.core.series/barPoint.tests.js b/testing/tests/DevExpress.viz.core.series/barPoint.tests.js
@@ -2326,6 +2326,42 @@ QUnit.test('Draw label, rotated (area of label > maxY area of series)', function
     assert.equal(label.shift.firstCall.args[1], 200);
 });
 
+QUnit.test('Draw inside label, not rotated (area of label < minY)', function(assert) {
+    this.options.label.position = 'inside';
+    const label = createLabel.call(this, { x: 60, y: 22, width: 20, height: 1 });
+
+    assert.equal(label.shift.firstCall.args[0], 60);
+    assert.equal(label.shift.firstCall.args[1], 20);
+});
+
+QUnit.test('Draw inside label, not rotated (area of label > maxY)', function(assert) {
+    this.options.label.position = 'inside';
+    this.data.value = -10;
+    const label = createLabel.call(this, { x: 50, y: 209, width: 20, height: 1 });
+
+    assert.equal(label.shift.firstCall.args[0], 50);
+    assert.equal(label.shift.firstCall.args[1], 200);
+});
+
+QUnit.test('Draw inside label, rotated (area of label < minX)', function(assert) {
+    this.data.value = -10;
+    this.options.rotated = true;
+    this.options.label.position = 'inside';
+    const label = createLabel.call(this, { x: 32, y: 40, width: 1, height: 10 });
+
+    assert.equal(label.shift.firstCall.args[0], 30);
+    assert.equal(label.shift.firstCall.args[1], 40);
+});
+
+QUnit.test('Draw inside label, rotated (area of label > maxX)', function(assert) {
+    this.options.rotated = true;
+    this.options.label.position = 'inside';
+    const label = createLabel.call(this, { x: 90, y: 40, width: 1, height: 10 });
+
+    assert.equal(label.shift.firstCall.args[0], 80);
+    assert.equal(label.shift.firstCall.args[1], 40);
+});
+
 QUnit.test('Draw label, point is abroad on the left', function(assert) {
     const label = createLabel.call(this, { x: 35, y: 32, width: -10, height: 46 });
 

diff --git a/testing/tests/DevExpress.viz.core.series/rangePoint.tests.js b/testing/tests/DevExpress.viz.core.series/rangePoint.tests.js
@@ -2831,15 +2831,20 @@ QUnit.test('Negative. value', function(assert) {
 QUnit.module('Draw label', environment);
 
 // helper
-function createLabels(x, y, minY) {
+function createLabels(x, y, minY, topLabelBBox, bottomLabelBBox) {
     const point = createPoint(this.series, this.data, this.options);
+    const topLabel = point._topLabel;
+    const bottomLabel = point._bottomLabel;
 
     point.x = x;
     point.y = y;
     point.minY = minY;
 
+    topLabelBBox && topLabel.getBoundingRect.returns(topLabelBBox);
+    bottomLabelBBox && bottomLabel.getBoundingRect.returns(bottomLabelBBox);
+
     point._drawLabel(this.renderer, this.group);
-    return { tl: point._topLabel, bl: point._bottomLabel };
+    return { tl: topLabel, bl: bottomLabel };
 }
 
 QUnit.test('Create label', function(assert) {
@@ -3377,7 +3382,7 @@ QUnit.test('Value < minValue, inside, rotated', function(assert) {
 
     assert.equal(l.topLabel.shift.firstCall.args[0], 53 + 10);
     assert.equal(l.topLabel.shift.firstCall.args[1], 12 - 5);
-    assert.equal(l.bottomLabel.shift.firstCall.args[0], 130 - 10 - 20);
+    assert.equal(l.bottomLabel.shift.firstCall.args[0], 130 - 50);
     assert.equal(l.bottomLabel.shift.firstCall.args[1], 12 - 5);
 });
 
@@ -3484,6 +3489,27 @@ QUnit.test('Value < minValue, inside, rotated. Overlay corrections', function(as
     assert.equal(bottomLabel.shift.firstCall.args[1], 12 - 5);
 });
 
+QUnit.test('Draw labels, labels are crossed and crossing visible area - minY', function(assert) {
+    this.series.getValueAxis = getMockAxisFunction(this.renderer, () => this.translators.val, [10, 100]);
+    const { tl, bl } = createLabels.call(this, 53, 12, 55, { width: 20, height: 10, x: 63, y: 10 }, { width: 20, height: 10, x: 25, y: 17 });
+
+    assert.equal(tl.shift.firstCall.args[0], 63);
+    assert.equal(tl.shift.firstCall.args[1], 10);
+    assert.equal(bl.shift.firstCall.args[0], 25);
+    assert.equal(bl.shift.firstCall.args[1], 21);
+});
+
+QUnit.test('Draw labels, labels are crossed and crossing visible area - maxY', function(assert) {
+    this.series.getValueAxis = getMockAxisFunction(this.renderer, () => this.translators.val, [10, 100]);
+
+    const { tl, bl } = createLabels.call(this, 53, 12, 55, { width: 20, height: 10, x: 63, y: 89 }, { width: 20, height: 10, x: 25, y: 90 });
+
+    assert.equal(tl.shift.firstCall.args[0], 63);
+    assert.equal(tl.shift.firstCall.args[1], 79);
+    assert.equal(bl.shift.firstCall.args[0], 25);
+    assert.equal(bl.shift.firstCall.args[1], 90);
+});
+
 QUnit.test('Default, not rotated. Left alignment', function(assert) {
     this.options.label.alignment = 'left';
     const l = createCorrectionLabels.call(this, 'top', 'bottom', 33, 54, 100);