Skip to content

Commit b6307d5

Browse files
nagixnagix
committed
Fix the issue that the topmost tick label and the bottom of the chart area are cut off with a radial scale
1 parent ecf64d3 commit b6307d5

9 files changed

+49
-36
lines changed

‎src/core/core.layouts.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,10 @@ module.exports = {
205205

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

208+
helpers.each(chartAreaBoxes, function(box) {
209+
box.update(maxChartAreaWidth, maxChartAreaHeight);
210+
});
211+
208212
// If a horizontal box has padding, we move the left boxes over to avoid ugly charts (see issue #2478)
209213
var maxHorizontalLeftPadding = 0;
210214
var maxHorizontalRightPadding = 0;
@@ -219,7 +223,7 @@ module.exports = {
219223
}
220224
});
221225

222-
helpers.each(leftBoxes.concat(rightBoxes), function(verticalBox) {
226+
helpers.each(leftBoxes.concat(rightBoxes, chartAreaBoxes), function(verticalBox) {
223227
if (verticalBox.getPadding) {
224228
var boxPadding = verticalBox.getPadding();
225229
maxVerticalTopPadding = Math.max(maxVerticalTopPadding, boxPadding.top);

‎src/scales/scale.radialLinear.js

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ module.exports = function(Chart) {
200200
*/
201201
function fit(scale) {
202202
var largestPossibleRadius = Math.min(scale.height / 2, scale.width / 2);
203-
scale.drawingArea = Math.round(largestPossibleRadius);
203+
scale.drawingArea = Math.floor(largestPossibleRadius);
204204
scale.setCenterPoint(0, 0, 0, 0);
205205
}
206206

@@ -325,8 +325,8 @@ module.exports = function(Chart) {
325325
// Set the unconstrained dimension before label rotation
326326
me.width = me.maxWidth;
327327
me.height = me.maxHeight;
328-
me.xCenter = Math.round(me.width / 2);
329-
me.yCenter = Math.round(me.height / 2);
328+
me.xCenter = Math.floor(me.width / 2);
329+
me.yCenter = Math.floor(me.height / 2);
330330

331331
var minSize = helpers.min([me.height, me.width]);
332332
var tickFontSize = helpers.valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize);
@@ -377,10 +377,19 @@ module.exports = function(Chart) {
377377
return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
378378
},
379379
fit: function() {
380-
if (this.options.pointLabels.display) {
381-
fitWithPointLabels(this);
380+
var me = this;
381+
var opts = me.options;
382+
var tickOpts = opts.ticks;
383+
var tickFontSize;
384+
385+
if (opts.pointLabels.display) {
386+
fitWithPointLabels(me);
382387
} else {
383-
fit(this);
388+
fit(me);
389+
}
390+
if (tickOpts.display && opts.display) {
391+
tickFontSize = helpers.valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize);
392+
me.paddingTop = Math.max(me.drawingArea + tickFontSize / 2 - Math.floor(me.height / 2), 0);
384393
}
385394
},
386395
/**
@@ -400,8 +409,8 @@ module.exports = function(Chart) {
400409
radiusReductionBottom = numberOrZero(radiusReductionBottom);
401410

402411
me.drawingArea = Math.min(
403-
Math.round(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2),
404-
Math.round(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2));
412+
Math.floor(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2),
413+
Math.floor(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2));
405414
me.setCenterPoint(radiusReductionLeft, radiusReductionRight, radiusReductionTop, radiusReductionBottom);
406415
},
407416
setCenterPoint: function(leftMovement, rightMovement, topMovement, bottomMovement) {
@@ -411,8 +420,8 @@ module.exports = function(Chart) {
411420
var maxTop = topMovement + me.drawingArea;
412421
var maxBottom = me.height - bottomMovement - me.drawingArea;
413422

414-
me.xCenter = Math.round(((maxLeft + maxRight) / 2) + me.left);
415-
me.yCenter = Math.round(((maxTop + maxBottom) / 2) + me.top);
423+
me.xCenter = Math.floor(((maxLeft + maxRight) / 2) + me.left);
424+
me.yCenter = Math.floor(((maxTop + maxBottom) / 2) + me.top);
416425
},
417426

418427
getIndexAngle: function(index) {

‎test/fixtures/controller.radar/point-style.png

0 Bytes
Loading

‎test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png

-5.04 KB
Loading

‎test/fixtures/plugin.filler/fill-radar-boundary-origin.png

-3.49 KB
Loading

‎test/specs/controller.doughnut.tests.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,10 +195,10 @@ describe('Chart.controllers.doughnut', function() {
195195
{c: Math.PI / 8, s: Math.PI, e: Math.PI + Math.PI / 8},
196196
{c: 3 * Math.PI / 8, s: Math.PI + Math.PI / 8, e: Math.PI + Math.PI / 2}
197197
].forEach(function(expected, i) {
198-
expect(meta.data[i]._model.x).toBeCloseToPixel(510);
199-
expect(meta.data[i]._model.y).toBeCloseToPixel(510);
200-
expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(509);
201-
expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(381);
198+
expect(meta.data[i]._model.x).toBeCloseToPixel(511);
199+
expect(meta.data[i]._model.y).toBeCloseToPixel(511);
200+
expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(510);
201+
expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(382);
202202
expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8);
203203
expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8);
204204
expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8);

‎test/specs/controller.polarArea.tests.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,13 @@ describe('Chart.controllers.polarArea', function() {
9999
expect(meta.data.length).toBe(4);
100100

101101
[
102-
{o: 179, s: -0.5 * Math.PI, e: 0},
103-
{o: 243, s: 0, e: 0.5 * Math.PI},
102+
{o: 177, s: -0.5 * Math.PI, e: 0},
103+
{o: 240, s: 0, e: 0.5 * Math.PI},
104104
{o: 51, s: 0.5 * Math.PI, e: Math.PI},
105105
{o: 0, s: Math.PI, e: 1.5 * Math.PI}
106106
].forEach(function(expected, i) {
107107
expect(meta.data[i]._model.x).toBeCloseToPixel(256);
108-
expect(meta.data[i]._model.y).toBeCloseToPixel(256);
108+
expect(meta.data[i]._model.y).toBeCloseToPixel(259);
109109
expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0);
110110
expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o);
111111
expect(meta.data[i]._model.startAngle).toBe(expected.s);
@@ -141,9 +141,9 @@ describe('Chart.controllers.polarArea', function() {
141141
chart.update();
142142

143143
expect(meta.data[0]._model.x).toBeCloseToPixel(256);
144-
expect(meta.data[0]._model.y).toBeCloseToPixel(256);
144+
expect(meta.data[0]._model.y).toBeCloseToPixel(259);
145145
expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0);
146-
expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(179);
146+
expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(177);
147147
expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
148148
startAngle: -0.5 * Math.PI,
149149
endAngle: 0,
@@ -183,13 +183,13 @@ describe('Chart.controllers.polarArea', function() {
183183
expect(meta.data.length).toBe(4);
184184

185185
[
186-
{o: 179, s: 0, e: 0.5 * Math.PI},
187-
{o: 243, s: 0.5 * Math.PI, e: Math.PI},
186+
{o: 177, s: 0, e: 0.5 * Math.PI},
187+
{o: 240, s: 0.5 * Math.PI, e: Math.PI},
188188
{o: 51, s: Math.PI, e: 1.5 * Math.PI},
189189
{o: 0, s: 1.5 * Math.PI, e: 2.0 * Math.PI}
190190
].forEach(function(expected, i) {
191191
expect(meta.data[i]._model.x).toBeCloseToPixel(256);
192-
expect(meta.data[i]._model.y).toBeCloseToPixel(256);
192+
expect(meta.data[i]._model.y).toBeCloseToPixel(259);
193193
expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0);
194194
expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o);
195195
expect(meta.data[i]._model.startAngle).toBe(expected.s);

‎test/specs/controller.radar.tests.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@ describe('Chart.controllers.radar', function() {
154154
meta.controller.update();
155155

156156
[
157-
{x: 256, y: 117, cppx: 246, cppy: 117, cpnx: 272, cpny: 117},
158-
{x: 464, y: 256, cppx: 464, cppy: 248, cpnx: 464, cpny: 262},
159-
{x: 256, y: 256, cppx: 276.9, cppy: 256, cpnx: 250.4, cpny: 256},
160-
{x: 200, y: 256, cppx: 200, cppy: 259, cpnx: 200, cpny: 245},
157+
{x: 256, y: 116, cppx: 246, cppy: 116, cpnx: 273, cpny: 116},
158+
{x: 466, y: 256, cppx: 466, cppy: 248, cpnx: 466, cpny: 262},
159+
{x: 256, y: 256, cppx: 277, cppy: 256, cpnx: 250.4, cpny: 256},
160+
{x: 200, y: 256, cppx: 200, cppy: 260, cpnx: 200, cpny: 246},
161161
].forEach(function(expected, i) {
162162
expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
163163
expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
@@ -211,8 +211,8 @@ describe('Chart.controllers.radar', function() {
211211

212212
// Since tension is now 0, we don't care about the control points
213213
[
214-
{x: 256, y: 117},
215-
{x: 464, y: 256},
214+
{x: 256, y: 116},
215+
{x: 466, y: 256},
216216
{x: 256, y: 256},
217217
{x: 200, y: 256},
218218
].forEach(function(expected, i) {
@@ -270,11 +270,11 @@ describe('Chart.controllers.radar', function() {
270270
}));
271271

272272
expect(meta.data[0]._model.x).toBeCloseToPixel(256);
273-
expect(meta.data[0]._model.y).toBeCloseToPixel(117);
273+
expect(meta.data[0]._model.y).toBeCloseToPixel(116);
274274
expect(meta.data[0]._model.controlPointPreviousX).toBeCloseToPixel(241);
275-
expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(117);
275+
expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(116);
276276
expect(meta.data[0]._model.controlPointNextX).toBeCloseToPixel(281);
277-
expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(117);
277+
expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(116);
278278
expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
279279
radius: 2.2,
280280
backgroundColor: 'rgb(0, 1, 3)',

‎test/specs/scale.radialLinear.tests.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -345,9 +345,9 @@ describe('Test the radial linear scale', function() {
345345
}
346346
});
347347

348-
expect(chart.scale.drawingArea).toBe(233);
348+
expect(chart.scale.drawingArea).toBe(232);
349349
expect(chart.scale.xCenter).toBe(256);
350-
expect(chart.scale.yCenter).toBe(280);
350+
expect(chart.scale.yCenter).toBe(279);
351351
});
352352

353353
it('should correctly get the label for a given data index', function() {
@@ -393,7 +393,7 @@ describe('Test the radial linear scale', function() {
393393
});
394394

395395
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(0);
396-
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(233);
396+
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(232);
397397
expect(chart.scale.getPointPositionForValue(1, 5)).toEqual({
398398
x: 270,
399399
y: 275,
@@ -402,7 +402,7 @@ describe('Test the radial linear scale', function() {
402402
chart.scale.options.ticks.reverse = true;
403403
chart.update();
404404

405-
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(233);
405+
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(232);
406406
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(0);
407407
});
408408

0 commit comments

Comments
 (0)