Fix offsetGridLine behavior with a single data point (#5609)

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index c267cb4adbf1e6c0c84a7a9989a9e11741c97f3e..f08c68fe9182a6e1450e14dc513a56d934cb71de 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -76,11 +76,15 @@ function labelsFromTicks(ticks) {
        return labels;
 }
 
-function getLineValue(scale, index, offsetGridLines) {
+function getPixelForGridLine(scale, index, offsetGridLines) {
        var lineValue = scale.getPixelForTick(index);
 
        if (offsetGridLines) {
-               if (index === 0) {
+               if (scale.getTicks().length === 1) {
+                       lineValue -= scale.isHorizontal() ?
+                               Math.max(lineValue - scale.left, scale.right - lineValue) :
+                               Math.max(lineValue - scale.top, scale.bottom - lineValue);
+               } else if (index === 0) {
                        lineValue -= (scale.getPixelForTick(1) - lineValue) / 2;
                } else {
                        lineValue -= (lineValue - scale.getPixelForTick(index - 1)) / 2;
@@ -754,7 +758,7 @@ module.exports = Element.extend({
                                        labelY = me.bottom - labelYOffset;
                                }
 
-                               var xLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
+                               var xLineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);
                                if (xLineValue < me.left - epsilon) {
                                        lineColor = 'rgba(0,0,0,0)';
                                }
@@ -781,7 +785,7 @@ module.exports = Element.extend({
 
                                labelX = isLeft ? me.right - labelXOffset : me.left + labelXOffset;
 
-                               var yLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
+                               var yLineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);
                                if (yLineValue < me.top - epsilon) {
                                        lineColor = 'rgba(0,0,0,0)';
                                }

diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js
index 2981c35c9b42e9658b6eafb6f9f4af3601368a3a..573c132ae0793c55c50237749db5f416ccdbd10d 100644 (file)
--- a/test/specs/core.scale.tests.js
+++ b/test/specs/core.scale.tests.js
@@ -19,4 +19,137 @@ describe('Core.scale', function() {
                        }
                });
        });
+
+       var gridLineTests = [{
+               labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+               offsetGridLines: false,
+               offset: false,
+               expected: [0.5, 128.5, 256.5, 384.5, 512.5]
+       }, {
+               labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+               offsetGridLines: false,
+               offset: true,
+               expected: [51.5, 154.5, 256.5, 358.5, 461.5]
+       }, {
+               labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+               offsetGridLines: true,
+               offset: false,
+               expected: [-63.5, 64.5, 192.5, 320.5, 448.5]
+       }, {
+               labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+               offsetGridLines: true,
+               offset: true,
+               expected: [0, 103, 205.5, 307.5, 410]
+       }, {
+               labels: ['tick1'],
+               offsetGridLines: false,
+               offset: false,
+               expected: [0.5]
+       }, {
+               labels: ['tick1'],
+               offsetGridLines: false,
+               offset: true,
+               expected: [256.5]
+       }, {
+               labels: ['tick1'],
+               offsetGridLines: true,
+               offset: false,
+               expected: [-511.5]
+       }, {
+               labels: ['tick1'],
+               offsetGridLines: true,
+               offset: true,
+               expected: [0.5]
+       }];
+
+       gridLineTests.forEach(function(test) {
+               it('should get the correct pixels for ' + test.labels.length + ' gridLine(s) for the horizontal scale when offsetGridLines is ' + test.offsetGridLines + ' and offset is ' + test.offset, function() {
+                       var chart = window.acquireChart({
+                               type: 'line',
+                               data: {
+                                       datasets: [{
+                                               data: []
+                                       }],
+                                       labels: test.labels
+                               },
+                               options: {
+                                       scales: {
+                                               xAxes: [{
+                                                       id: 'xScale0',
+                                                       gridLines: {
+                                                               offsetGridLines: test.offsetGridLines,
+                                                               drawTicks: false
+                                                       },
+                                                       ticks: {
+                                                               display: false
+                                                       },
+                                                       offset: test.offset
+                                               }],
+                                               yAxes: [{
+                                                       display: false
+                                               }]
+                                       },
+                                       legend: {
+                                               display: false
+                                       }
+                               }
+                       });
+
+                       var xScale = chart.scales.xScale0;
+                       xScale.ctx = window.createMockContext();
+                       chart.draw();
+
+                       expect(xScale.ctx.getCalls().filter(function(x) {
+                               return x.name === 'moveTo' && x.args[1] === 0;
+                       }).map(function(x) {
+                               return x.args[0];
+                       })).toEqual(test.expected);
+               });
+       });
+
+       gridLineTests.forEach(function(test) {
+               it('should get the correct pixels for ' + test.labels.length + ' gridLine(s) for the vertical scale when offsetGridLines is ' + test.offsetGridLines + ' and offset is ' + test.offset, function() {
+                       var chart = window.acquireChart({
+                               type: 'line',
+                               data: {
+                                       datasets: [{
+                                               data: []
+                                       }],
+                                       labels: test.labels
+                               },
+                               options: {
+                                       scales: {
+                                               xAxes: [{
+                                                       display: false
+                                               }],
+                                               yAxes: [{
+                                                       type: 'category',
+                                                       id: 'yScale0',
+                                                       gridLines: {
+                                                               offsetGridLines: test.offsetGridLines,
+                                                               drawTicks: false
+                                                       },
+                                                       ticks: {
+                                                               display: false
+                                                       },
+                                                       offset: test.offset
+                                               }]
+                                       },
+                                       legend: {
+                                               display: false
+                                       }
+                               }
+                       });
+
+                       var yScale = chart.scales.yScale0;
+                       yScale.ctx = window.createMockContext();
+                       chart.draw();
+
+                       expect(yScale.ctx.getCalls().filter(function(x) {
+                               return x.name === 'moveTo' && x.args[0] === 0;
+                       }).map(function(x) {
+                               return x.args[1];
+                       })).toEqual(test.expected);
+               });
+       });
 });