From 77faacb46765ca5cd9a89f0476c98e18d6b2f91f Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sun, 27 Sep 2015 21:34:16 -0400 Subject: [PATCH] Removed the line scale override file since functionality no longer directly exists. Updated the core scale drawing with tighter padding & better drawing when on top. Updated tests --- samples/line-scale-override.html | 137 ------------------------------- src/core/core.scale.js | 12 +-- test/scale.linear.tests.js | 6 +- 3 files changed, 10 insertions(+), 145 deletions(-) delete mode 100644 samples/line-scale-override.html diff --git a/samples/line-scale-override.html b/samples/line-scale-override.html deleted file mode 100644 index a92b14a1b..000000000 --- a/samples/line-scale-override.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - Line Chart with Scale Override - - - - - -
- -
-
-
- - - - - - - - - diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 6835effac..40c73b4f5 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -262,10 +262,12 @@ var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width; var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; - // Ensure that our ticks are always inside the canvas + // Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned which means that the right padding is dominated + // by the font height var cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); - this.paddingLeft = (cosRotation * firstLabelWidth) / 2 + 3; // add 3 px to move away from canvas edges - this.paddingRight = (cosRotation * lastLabelWidth) / 2 + 3; + var sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); + this.paddingLeft = this.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges + this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (this.options.ticks.fontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated } else { // A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first var maxLabelWidth = this.maxWidth - this.minSize.width; @@ -405,11 +407,11 @@ if (this.options.ticks.show) { this.ctx.save(); - this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.top + 8); + this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = this.font; this.ctx.textAlign = (isRotated) ? "right" : "center"; - this.ctx.textBaseline = (isRotated) ? "middle" : "top"; + this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top"; this.ctx.fillText(label, 0, 0); this.ctx.restore(); } diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 52a49ef4e..c927c97c3 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -620,7 +620,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [8, 8] + "args": [8, 10] }, { "name": "rotate", "args": [-0] @@ -659,7 +659,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [51, 8] + "args": [51, 10] }, { "name": "rotate", "args": [-0] @@ -698,7 +698,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [93, 8] + "args": [93, 10] }, { "name": "rotate", "args": [-0] -- 2.47.2