From: Evert Timberg Date: Tue, 25 Oct 2016 01:43:52 +0000 (-0400) Subject: When an axis needs padding due to a long, rotated, label it should be added inside... X-Git-Tag: v2.5.0~1^2~51 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=eaf109c2b1d0ceb8499bc22659197555b88b6df3;p=thirdparty%2FChart.js.git When an axis needs padding due to a long, rotated, label it should be added inside the layout system rather than in each axis. --- diff --git a/src/core/core.layoutService.js b/src/core/core.layoutService.js index 220a25344..2afdedfa3 100644 --- a/src/core/core.layoutService.js +++ b/src/core/core.layoutService.js @@ -148,15 +148,26 @@ module.exports = function(Chart) { minBoxSizes.push({ horizontal: isHorizontal, minSize: minSize, - box: box + box: box, }); } helpers.each(leftBoxes.concat(rightBoxes, topBoxes, bottomBoxes), getMinimumBoxSize); + // If a box has padding, we move the left scale over to avoid ugly charts (see issue #2478) + var maxHorizontalLeftPadding = 0; + var maxHorizontalRightPadding = 0; + + helpers.each(topBoxes.concat(bottomBoxes), function(horizontalBox) { + if (horizontalBox.getPadding) { + var boxPadding = horizontalBox.getPadding(); + maxHorizontalLeftPadding = Math.max(maxHorizontalLeftPadding, boxPadding.left); + maxHorizontalRightPadding = Math.max(maxHorizontalRightPadding, boxPadding.right); + } + }); + // At this point, maxChartAreaHeight and maxChartAreaWidth are the size the chart area could // be if the axes are drawn at their minimum sizes. - // Steps 5 & 6 var totalLeftBoxesWidth = leftPadding; var totalRightBoxesWidth = rightPadding; @@ -172,8 +183,8 @@ module.exports = function(Chart) { if (minBoxSize) { if (box.isHorizontal()) { var scaleMargin = { - left: totalLeftBoxesWidth, - right: totalRightBoxesWidth, + left: Math.max(totalLeftBoxesWidth, maxHorizontalLeftPadding), + right: Math.max(totalRightBoxesWidth, maxHorizontalRightPadding), top: 0, bottom: 0 }; @@ -251,6 +262,13 @@ module.exports = function(Chart) { totalBottomBoxesHeight += box.height; }); + // We may be adding some padding to account for rotated x axis labels + var leftPaddingAddition = Math.max(maxHorizontalLeftPadding - totalLeftBoxesWidth, 0); + var rightPaddingAddition = Math.max(maxHorizontalRightPadding - totalRightBoxesWidth, 0); + + totalLeftBoxesWidth += leftPaddingAddition; + totalRightBoxesWidth += rightPaddingAddition; + // Figure out if our chart area changed. This would occur if the dataset layout label rotation // changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do // without calling `fit` again @@ -283,7 +301,7 @@ module.exports = function(Chart) { } // Step 7 - Position the boxes - var left = leftPadding; + var left = leftPadding + leftPaddingAddition; var top = topPadding; function placeBox(box) { diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 5f35b999f..1f6363c07 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -51,8 +51,17 @@ module.exports = function(Chart) { }; Chart.Scale = Chart.Element.extend({ + getPadding: function() { + var me = this; + return { + left: me.paddingLeft || 0, + top: me.paddingTop || 0, + right: me.paddingRight || 0, + bottom: me.paddingBottom || 0 + }; + }, - // These methods are ordered by lifecycle. Utilities then follow. + // These methods are ordered by lifecyle. Utilities then follow. // Any function defined here is inherited by all scale types. // Any function can be extended by the scale type diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 7102a6f4a..1e18fb529 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -718,8 +718,8 @@ describe('Linear Scale', function() { expect(xScale.paddingTop).toBeCloseToPixel(0); expect(xScale.paddingBottom).toBeCloseToPixel(0); expect(xScale.paddingLeft).toBeCloseToPixel(0); - expect(xScale.paddingRight).toBeCloseToPixel(13.5); - expect(xScale.width).toBeCloseToPixel(471); + expect(xScale.paddingRight).toBeCloseToPixel(0); + expect(xScale.width).toBeCloseToPixel(457.5); expect(xScale.height).toBeCloseToPixel(28); var yScale = chart.scales.yScale0; @@ -738,8 +738,8 @@ describe('Linear Scale', function() { expect(xScale.paddingTop).toBeCloseToPixel(0); expect(xScale.paddingBottom).toBeCloseToPixel(0); expect(xScale.paddingLeft).toBeCloseToPixel(0); - expect(xScale.paddingRight).toBeCloseToPixel(13.5); - expect(xScale.width).toBeCloseToPixel(453); + expect(xScale.paddingRight).toBeCloseToPixel(0); + expect(xScale.width).toBeCloseToPixel(439.5); expect(xScale.height).toBeCloseToPixel(46); expect(yScale.paddingTop).toBeCloseToPixel(0); diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index 9636a0b37..4ca9ab62e 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -717,14 +717,14 @@ describe('Logarithmic Scale tests', function() { }); var xScale = chart.scales.xScale; - expect(xScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(495); // right - paddingRight + expect(xScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(481.5); // right - paddingRight expect(xScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(48); // left + paddingLeft - expect(xScale.getPixelForValue(10, 0, 0)).toBeCloseToPixel(283); // halfway + expect(xScale.getPixelForValue(10, 0, 0)).toBeCloseToPixel(276); // halfway expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(48); // 0 is invalid, put it on the left. - expect(xScale.getValueForPixel(495)).toBeCloseTo(80, 1e-4); + expect(xScale.getValueForPixel(481.5)).toBeCloseTo(80, 1e-4); expect(xScale.getValueForPixel(48)).toBeCloseTo(1, 1e-4); - expect(xScale.getValueForPixel(283)).toBeCloseTo(10, 1e-4); + expect(xScale.getValueForPixel(276)).toBeCloseTo(10, 1e-4); var yScale = chart.scales.yScale; expect(yScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(32); // top + paddingTop