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
nagix committed Nov 19, 2018
1 parent ecf64d3 commit b6307d5
Show file tree
Hide file tree
Showing 9 changed files with 49 additions and 36 deletions.
6 changes: 5 additions & 1 deletion src/core/core.layouts.js
View file
Expand Up @@ -205,6 +205,10 @@ module.exports = {

helpers.each(leftBoxes.concat(rightBoxes, topBoxes, bottomBoxes), getMinimumBoxSize);

helpers.each(chartAreaBoxes, function(box) {
box.update(maxChartAreaWidth, maxChartAreaHeight);
});

// If a horizontal box has padding, we move the left boxes over to avoid ugly charts (see issue #2478)
var maxHorizontalLeftPadding = 0;
var maxHorizontalRightPadding = 0;
Expand All @@ -219,7 +223,7 @@ module.exports = {
}
});

helpers.each(leftBoxes.concat(rightBoxes), function(verticalBox) {
helpers.each(leftBoxes.concat(rightBoxes, chartAreaBoxes), function(verticalBox) {
if (verticalBox.getPadding) {
var boxPadding = verticalBox.getPadding();
maxVerticalTopPadding = Math.max(maxVerticalTopPadding, boxPadding.top);
Expand Down
29 changes: 19 additions & 10 deletions src/scales/scale.radialLinear.js
View file
Expand Up @@ -200,7 +200,7 @@ module.exports = function(Chart) {
*/
function fit(scale) {
var largestPossibleRadius = Math.min(scale.height / 2, scale.width / 2);
scale.drawingArea = Math.round(largestPossibleRadius);
scale.drawingArea = Math.floor(largestPossibleRadius);
scale.setCenterPoint(0, 0, 0, 0);
}

Expand Down Expand Up @@ -325,8 +325,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 @@ -377,10 +377,19 @@ module.exports = function(Chart) {
return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
},
fit: function() {
if (this.options.pointLabels.display) {
fitWithPointLabels(this);
var me = this;
var opts = me.options;
var tickOpts = opts.ticks;
var tickFontSize;

if (opts.pointLabels.display) {
fitWithPointLabels(me);
} else {
fit(this);
fit(me);
}
if (tickOpts.display && opts.display) {
tickFontSize = helpers.valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize);
me.paddingTop = Math.max(me.drawingArea + tickFontSize / 2 - Math.floor(me.height / 2), 0);
}
},
/**
Expand All @@ -400,8 +409,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 +420,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
View file
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-spline.png
View file
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
View file
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
View file
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
View file
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
View file
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
View file
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 b6307d5

Please sign in to comment.