Fix cut off tick labels in radial scale (#5848)

Fix the issue that the topmost tick label and the bottom of the chart area are cut off with a radial scale.

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index ffd76dd43f477ace2a636c7404ce0f440a41c68e..71e156e0f091cb4cc05a853c85c465922c9dfb00 100644 (file)
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -79,6 +79,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 {
@@ -145,6 +155,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
@@ -194,6 +205,11 @@ module.exports = function(Chart) {
                        }
                }
 
+               if (paddingTop && -paddingTop < furthestLimits.t) {
+                       furthestLimits.t = -paddingTop;
+                       furthestAngles.t = 0;
+               }
+
                scale.setReductions(largestPossibleRadius, furthestLimits, furthestAngles);
        }
 
@@ -201,9 +217,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) {
@@ -341,8 +358,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);
@@ -416,8 +433,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) {
@@ -427,8 +444,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 3f73ff96f91a02142de3504a59531b8f954d59d2..c5437ed24affbc9078ab004a6d0db2c5f7fdf5a0 100644 (file)
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 74124a3e7f26734e987839c3c202748eb137620d..5896239e98686b193446f4c036873ce533d95e44 100644 (file)
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 2c07f7f0b2c2bd996ed549ee512779905de26883..66c6e563a796d1c50039329dafff1e339a841f53 100644 (file)
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 b1969e2817aabed5510d5665cc4a06bc6bb4247a..2f9602bda736968367c1499ba3ae99fd5842fd49 100644 (file)
--- 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 b706f8376a64cb9244a06aba44e57e81bcc4985b..1023bf0789bc48ffec0940ff336492aaec692652 100644 (file)
--- 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 7e85e9e7eacec3a1038f7b8026373ea64e9b5c51..b71a2e47398706be9d1d122929258acd17b47930 100644 (file)
--- 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 5390ef77d5fbb2b8b64ef96b275f243ea7fba848..da19f9e000d25dfa803c4835f56036dfb58a3d4a 100644 (file)
--- a/test/specs/scale.radialLinear.tests.js
+++ b/test/specs/scale.radialLinear.tests.js
@@ -349,9 +349,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() {
@@ -397,7 +397,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,
@@ -406,7 +406,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);
        });