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 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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
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 b6307d5

Please sign in to comment.