diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index b580e1da75b..34066f002bb 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -77,6 +77,16 @@ module.exports = function(Chart) { }; } + function getTickFontSize(scale) { + var opts = scale.options; + var tickOpts = opts.ticks; + + if (tickOpts.display && opts.display) { + return helpers.valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize); + } + return 0; + } + function measureLabelSize(ctx, fontSize, label) { if (helpers.isArray(label)) { return { @@ -143,6 +153,7 @@ module.exports = function(Chart) { */ var plFont = getPointLabelFontOptions(scale); + var paddingTop = getTickFontSize(scale) / 2; // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width. // Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points @@ -192,6 +203,11 @@ module.exports = function(Chart) { } } + if (paddingTop && -paddingTop < furthestLimits.t) { + furthestLimits.t = -paddingTop; + furthestAngles.t = 0; + } + scale.setReductions(largestPossibleRadius, furthestLimits, furthestAngles); } @@ -199,9 +215,10 @@ module.exports = function(Chart) { * Helper function to fit a radial linear scale with no point labels */ function fit(scale) { - var largestPossibleRadius = Math.min(scale.height / 2, scale.width / 2); - scale.drawingArea = Math.round(largestPossibleRadius); - scale.setCenterPoint(0, 0, 0, 0); + var paddingTop = getTickFontSize(scale) / 2; + var largestPossibleRadius = Math.min((scale.height - paddingTop) / 2, scale.width / 2); + scale.drawingArea = Math.floor(largestPossibleRadius); + scale.setCenterPoint(0, 0, paddingTop, 0); } function getTextAlignForAngle(angle) { @@ -325,8 +342,8 @@ module.exports = function(Chart) { // Set the unconstrained dimension before label rotation me.width = me.maxWidth; me.height = me.maxHeight; - me.xCenter = Math.round(me.width / 2); - me.yCenter = Math.round(me.height / 2); + me.xCenter = Math.floor(me.width / 2); + me.yCenter = Math.floor(me.height / 2); var minSize = helpers.min([me.height, me.width]); var tickFontSize = helpers.valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize); @@ -400,8 +417,8 @@ module.exports = function(Chart) { radiusReductionBottom = numberOrZero(radiusReductionBottom); me.drawingArea = Math.min( - Math.round(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2), - Math.round(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2)); + Math.floor(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2), + Math.floor(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2)); me.setCenterPoint(radiusReductionLeft, radiusReductionRight, radiusReductionTop, radiusReductionBottom); }, setCenterPoint: function(leftMovement, rightMovement, topMovement, bottomMovement) { @@ -411,8 +428,8 @@ module.exports = function(Chart) { var maxTop = topMovement + me.drawingArea; var maxBottom = me.height - bottomMovement - me.drawingArea; - me.xCenter = Math.round(((maxLeft + maxRight) / 2) + me.left); - me.yCenter = Math.round(((maxTop + maxBottom) / 2) + me.top); + me.xCenter = Math.floor(((maxLeft + maxRight) / 2) + me.left); + me.yCenter = Math.floor(((maxTop + maxBottom) / 2) + me.top); }, getIndexAngle: function(index) { diff --git a/test/fixtures/controller.radar/point-style.png b/test/fixtures/controller.radar/point-style.png index 562cb620b05..8b6c5d47525 100644 Binary files a/test/fixtures/controller.radar/point-style.png and b/test/fixtures/controller.radar/point-style.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png b/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png index 74124a3e7f2..5896239e986 100644 Binary files a/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png and b/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin.png b/test/fixtures/plugin.filler/fill-radar-boundary-origin.png index 2c07f7f0b2c..66c6e563a79 100644 Binary files a/test/fixtures/plugin.filler/fill-radar-boundary-origin.png and b/test/fixtures/plugin.filler/fill-radar-boundary-origin.png differ diff --git a/test/specs/controller.doughnut.tests.js b/test/specs/controller.doughnut.tests.js index b1969e2817a..2f9602bda73 100644 --- a/test/specs/controller.doughnut.tests.js +++ b/test/specs/controller.doughnut.tests.js @@ -195,10 +195,10 @@ describe('Chart.controllers.doughnut', function() { {c: Math.PI / 8, s: Math.PI, e: Math.PI + Math.PI / 8}, {c: 3 * Math.PI / 8, s: Math.PI + Math.PI / 8, e: Math.PI + Math.PI / 2} ].forEach(function(expected, i) { - expect(meta.data[i]._model.x).toBeCloseToPixel(510); - expect(meta.data[i]._model.y).toBeCloseToPixel(510); - expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(509); - expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(381); + expect(meta.data[i]._model.x).toBeCloseToPixel(511); + expect(meta.data[i]._model.y).toBeCloseToPixel(511); + expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(510); + expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(382); expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8); expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8); expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8); diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js index b706f8376a6..1023bf0789b 100644 --- a/test/specs/controller.polarArea.tests.js +++ b/test/specs/controller.polarArea.tests.js @@ -99,13 +99,13 @@ describe('Chart.controllers.polarArea', function() { expect(meta.data.length).toBe(4); [ - {o: 179, s: -0.5 * Math.PI, e: 0}, - {o: 243, s: 0, e: 0.5 * Math.PI}, + {o: 177, s: -0.5 * Math.PI, e: 0}, + {o: 240, s: 0, e: 0.5 * Math.PI}, {o: 51, s: 0.5 * Math.PI, e: Math.PI}, {o: 0, s: Math.PI, e: 1.5 * Math.PI} ].forEach(function(expected, i) { expect(meta.data[i]._model.x).toBeCloseToPixel(256); - expect(meta.data[i]._model.y).toBeCloseToPixel(256); + expect(meta.data[i]._model.y).toBeCloseToPixel(259); expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0); expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o); expect(meta.data[i]._model.startAngle).toBe(expected.s); @@ -141,9 +141,9 @@ describe('Chart.controllers.polarArea', function() { chart.update(); expect(meta.data[0]._model.x).toBeCloseToPixel(256); - expect(meta.data[0]._model.y).toBeCloseToPixel(256); + expect(meta.data[0]._model.y).toBeCloseToPixel(259); expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0); - expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(179); + expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(177); expect(meta.data[0]._model).toEqual(jasmine.objectContaining({ startAngle: -0.5 * Math.PI, endAngle: 0, @@ -183,13 +183,13 @@ describe('Chart.controllers.polarArea', function() { expect(meta.data.length).toBe(4); [ - {o: 179, s: 0, e: 0.5 * Math.PI}, - {o: 243, s: 0.5 * Math.PI, e: Math.PI}, + {o: 177, s: 0, e: 0.5 * Math.PI}, + {o: 240, s: 0.5 * Math.PI, e: Math.PI}, {o: 51, s: Math.PI, e: 1.5 * Math.PI}, {o: 0, s: 1.5 * Math.PI, e: 2.0 * Math.PI} ].forEach(function(expected, i) { expect(meta.data[i]._model.x).toBeCloseToPixel(256); - expect(meta.data[i]._model.y).toBeCloseToPixel(256); + expect(meta.data[i]._model.y).toBeCloseToPixel(259); expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0); expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o); expect(meta.data[i]._model.startAngle).toBe(expected.s); diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index 7e85e9e7eac..b71a2e47398 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -154,10 +154,10 @@ describe('Chart.controllers.radar', function() { meta.controller.update(); [ - {x: 256, y: 117, cppx: 246, cppy: 117, cpnx: 272, cpny: 117}, - {x: 464, y: 256, cppx: 464, cppy: 248, cpnx: 464, cpny: 262}, - {x: 256, y: 256, cppx: 276.9, cppy: 256, cpnx: 250.4, cpny: 256}, - {x: 200, y: 256, cppx: 200, cppy: 259, cpnx: 200, cpny: 245}, + {x: 256, y: 116, cppx: 246, cppy: 116, cpnx: 273, cpny: 116}, + {x: 466, y: 256, cppx: 466, cppy: 248, cpnx: 466, cpny: 262}, + {x: 256, y: 256, cppx: 277, cppy: 256, cpnx: 250.4, cpny: 256}, + {x: 200, y: 256, cppx: 200, cppy: 260, cpnx: 200, cpny: 246}, ].forEach(function(expected, i) { expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x); expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y); @@ -211,8 +211,8 @@ describe('Chart.controllers.radar', function() { // Since tension is now 0, we don't care about the control points [ - {x: 256, y: 117}, - {x: 464, y: 256}, + {x: 256, y: 116}, + {x: 466, y: 256}, {x: 256, y: 256}, {x: 200, y: 256}, ].forEach(function(expected, i) { @@ -270,11 +270,11 @@ describe('Chart.controllers.radar', function() { })); expect(meta.data[0]._model.x).toBeCloseToPixel(256); - expect(meta.data[0]._model.y).toBeCloseToPixel(117); + expect(meta.data[0]._model.y).toBeCloseToPixel(116); expect(meta.data[0]._model.controlPointPreviousX).toBeCloseToPixel(241); - expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(117); + expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(116); expect(meta.data[0]._model.controlPointNextX).toBeCloseToPixel(281); - expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(117); + expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(116); expect(meta.data[0]._model).toEqual(jasmine.objectContaining({ radius: 2.2, backgroundColor: 'rgb(0, 1, 3)', diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index 707ce0b7c52..f215b287206 100644 --- a/test/specs/scale.radialLinear.tests.js +++ b/test/specs/scale.radialLinear.tests.js @@ -345,9 +345,9 @@ describe('Test the radial linear scale', function() { } }); - expect(chart.scale.drawingArea).toBe(233); + expect(chart.scale.drawingArea).toBe(232); expect(chart.scale.xCenter).toBe(256); - expect(chart.scale.yCenter).toBe(280); + expect(chart.scale.yCenter).toBe(279); }); it('should correctly get the label for a given data index', function() { @@ -393,7 +393,7 @@ describe('Test the radial linear scale', function() { }); expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(0); - expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(233); + expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(232); expect(chart.scale.getPointPositionForValue(1, 5)).toEqual({ x: 270, y: 275, @@ -402,7 +402,7 @@ describe('Test the radial linear scale', function() { chart.scale.options.ticks.reverse = true; chart.update(); - expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(233); + expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(232); expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(0); });