Skip to content

Commit

Permalink
Fix the issue that the topmost tick label and the bottom of the chart…
Browse files Browse the repository at this point in the history
… area are cut off with a radial scale
  • Loading branch information
nagix committed Nov 26, 2018
1 parent b68341d commit d6fa340
Show file tree
Hide file tree
Showing 8 changed files with 51 additions and 34 deletions.
35 changes: 26 additions & 9 deletions src/scales/scale.radialLinear.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -192,16 +203,22 @@ module.exports = function(Chart) {
}
}

if (paddingTop && -paddingTop < furthestLimits.t) {
furthestLimits.t = -paddingTop;
furthestAngles.t = 0;
}

scale.setReductions(largestPossibleRadius, furthestLimits, furthestAngles);
}

/**
* 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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down
Binary file modified test/fixtures/controller.radar/point-style.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/fixtures/plugin.filler/fill-radar-boundary-origin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions test/specs/controller.doughnut.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
16 changes: 8 additions & 8 deletions test/specs/controller.polarArea.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
18 changes: 9 additions & 9 deletions test/specs/controller.radar.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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)',
Expand Down
8 changes: 4 additions & 4 deletions test/specs/scale.radialLinear.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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,
Expand All @@ -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);
});

Expand Down

0 comments on commit d6fa340

Please sign in to comment.