From 0c534e1eb8140e09f8d55bba7431fd4116dc9dd6 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 28 Dec 2015 17:20:08 -0500 Subject: [PATCH 1/3] Fix layout service --- src/core/core.layoutService.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/core.layoutService.js b/src/core/core.layoutService.js index def2b55aee5..a7f2bcfa84c 100644 --- a/src/core/core.layoutService.js +++ b/src/core/core.layoutService.js @@ -179,7 +179,9 @@ bottom: 0, }; - box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, minBoxSize.minSize.height, scaleMargin); + // Don't use min size here because of label rotation. When the labels are rotated, their rotation highly depends + // on the margin. Sometimes they need to increase in size slightly + box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2, scaleMargin); } else { box.update(minBoxSize.minSize.width, maxChartAreaHeight); } From 081cf7ba074de477ef97a210373df0f15ead9b50 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 29 Dec 2015 09:24:09 -0500 Subject: [PATCH 2/3] Fix tests --- test/core.layoutService.tests.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/test/core.layoutService.tests.js b/test/core.layoutService.tests.js index 355986282ed..0c26dc6ebb7 100644 --- a/test/core.layoutService.tests.js +++ b/test/core.layoutService.tests.js @@ -196,25 +196,25 @@ describe('Test the layout service', function() { left: 115, right: 245, top: 5, - bottom: 68.48521368620018, + bottom: 75, }); // Is xScale at the right spot expect(xScale.left).toBe(115); expect(xScale.right).toBe(245); - expect(xScale.top).toBe(68.48521368620018); + expect(xScale.top).toBe(75); expect(xScale.bottom).toBe(145); // Are yScales at the right spot expect(yScale1.left).toBe(5); expect(yScale1.right).toBe(55); expect(yScale1.top).toBe(5); - expect(yScale1.bottom).toBe(68.48521368620018); + expect(yScale1.bottom).toBe(75); expect(yScale2.left).toBe(55); expect(yScale2.right).toBe(115); expect(yScale2.top).toBe(5); - expect(yScale2.bottom).toBe(68.48521368620018); + expect(yScale2.bottom).toBe(75); }); // This is an oddball case. What happens is, when the scales are fit the first time they must fit within the assigned size. In this case, @@ -336,25 +336,25 @@ describe('Test the layout service', function() { expect(chartInstance.chartArea).toEqual({ left: 45, right: 245, - top: 45, - bottom: 105, + top: 63.78307376628291, + bottom: 76.0423977855504, }); // Are xScales at the right spot expect(xScale1.left).toBe(45); expect(xScale1.right).toBe(245); - expect(xScale1.top).toBe(105); + expect(xScale1.top).toBeCloseTo(76.04, 1e-3); expect(xScale1.bottom).toBe(145); expect(xScale2.left).toBe(5); expect(xScale2.right).toBe(245); expect(xScale2.top).toBe(5); - expect(xScale2.bottom).toBe(45); + expect(xScale2.bottom).toBeCloseTo(63.78, 1e-3); // Is yScale at the right spot expect(yScale.left).toBe(5); expect(yScale.right).toBe(45); - expect(yScale.top).toBe(45); - expect(yScale.bottom).toBe(105); + expect(yScale.top).toBeCloseTo(63.78, 1e-3); + expect(yScale.bottom).toBeCloseTo(76.04, 1e-3); }); }); \ No newline at end of file From d6a27d8eb3ceef11d07350c2bcac055a6c30342e Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 29 Dec 2015 09:32:40 -0500 Subject: [PATCH 3/3] Clean up code --- src/core/core.scale.js | 85 ++++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 49 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index d28fc56b70f..932649c68af 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -194,62 +194,54 @@ var firstWidth = this.ctx.measureText(this.ticks[0]).width; var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; var firstRotated; - var lastRotated; - - this.paddingRight = lastWidth / 2 + 3; - this.paddingLeft = firstWidth / 2 + 3; this.labelRotation = 0; + this.paddingRight = 0; + this.paddingLeft = 0; - if (this.options.display && this.isHorizontal()) { - var originalLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks); - var cosRotation; - var sinRotation; + if (this.options.display) { + if (this.isHorizontal()) { + this.paddingRight = lastWidth / 2 + 3; + this.paddingLeft = firstWidth / 2 + 3; - this.labelWidth = originalLabelWidth; + var originalLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks); + var labelWidth = originalLabelWidth; + var cosRotation; + var sinRotation; - // Allow 3 pixels x2 padding either side for label readability - // only the index matters for a dataset scale, but we want a consistent interface between scales + // Allow 3 pixels x2 padding either side for label readability + // only the index matters for a dataset scale, but we want a consistent interface between scales + var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6; - var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6; + //Max label rotation can be set or default to 90 - also act as a loop counter + while (labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) { + cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); + sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); - //Max label rotation can be set or default to 90 - also act as a loop counter - while (this.labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) { - cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); - sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); + firstRotated = cosRotation * firstWidth; - firstRotated = cosRotation * firstWidth; - lastRotated = cosRotation * lastWidth; + // We're right aligning the text now. + if (firstRotated + this.options.ticks.fontSize / 2 > this.yLabelWidth) { + this.paddingLeft = firstRotated + this.options.ticks.fontSize / 2; + } - // We're right aligning the text now. - if (firstRotated + this.options.ticks.fontSize / 2 > this.yLabelWidth) { - this.paddingLeft = firstRotated + this.options.ticks.fontSize / 2; - } + this.paddingRight = this.options.ticks.fontSize / 2; - this.paddingRight = this.options.ticks.fontSize / 2; + if (sinRotation * originalLabelWidth > this.maxHeight) { + // go back one step + this.labelRotation--; + break; + } - if (sinRotation * originalLabelWidth > this.maxHeight) { - // go back one step - this.labelRotation--; - break; + this.labelRotation++; + labelWidth = cosRotation * originalLabelWidth; } - - this.labelRotation++; - this.labelWidth = cosRotation * originalLabelWidth; - } - } else { - this.labelWidth = 0; - this.paddingRight = 0; - this.paddingLeft = 0; } if (this.margins) { - this.paddingLeft -= this.margins.left; - this.paddingRight -= this.margins.right; - - this.paddingLeft = Math.max(this.paddingLeft, 0); - this.paddingRight = Math.max(this.paddingRight, 0); + this.paddingLeft = Math.max(this.paddingLeft - this.margins.left, 0); + this.paddingRight = Math.max(this.paddingRight - this.margins.right, 0); } }, afterCalculateTickRotation: function() { @@ -342,15 +334,10 @@ } if (this.margins) { - this.paddingLeft -= this.margins.left; - this.paddingTop -= this.margins.top; - this.paddingRight -= this.margins.right; - this.paddingBottom -= this.margins.bottom; - - this.paddingLeft = Math.max(this.paddingLeft, 0); - this.paddingTop = Math.max(this.paddingTop, 0); - this.paddingRight = Math.max(this.paddingRight, 0); - this.paddingBottom = Math.max(this.paddingBottom, 0); + this.paddingLeft = Math.max(this.paddingLeft - this.margins.left, 0); + this.paddingTop = Math.max(this.paddingTop - this.margins.top, 0); + this.paddingRight = Math.max(this.paddingRight - this.margins.right, 0); + this.paddingBottom = Math.max(this.paddingBottom - this.margins.bottom, 0); } this.width = this.minSize.width;