From 7ee5af81af59e66a2f6e11c04cdb054c8cef934e Mon Sep 17 00:00:00 2001 From: Tom Duncalf Date: Wed, 11 May 2016 10:43:22 +0100 Subject: [PATCH] Add labelOffset option to scales --- docs/01-Scales.md | 9 +++++---- src/core/core.scale.js | 5 +++-- test/core.helpers.tests.js | 6 ++++-- test/scale.category.tests.js | 3 ++- test/scale.linear.tests.js | 3 ++- test/scale.logarithmic.tests.js | 3 ++- test/scale.radialLinear.tests.js | 3 ++- test/scale.time.tests.js | 3 ++- 8 files changed, 22 insertions(+), 13 deletions(-) diff --git a/docs/01-Scales.md b/docs/01-Scales.md index fd6c27dda..efb3a893f 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -41,7 +41,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *gridLines*.zeroLineColor | Color | "rgba(0, 0, 0, 0.25)" | Stroke color of the grid line for the first index (index 0). *gridLines*.offsetGridLines | Boolean | false | If true, offset labels from grid lines. **scaleLabel** | Object | | Title for the entire axis. -*scaleLabel*.display | Boolean | false | +*scaleLabel*.display | Boolean | false | *scaleLabel*.labelString | String | "" | The text for the title. (i.e. "# of People", "Response Choices") *scaleLabel*.fontColor | Color | "#666" | Font color for the scale title. *scaleLabel*.fontFamily| String | "Helvetica Neue" | Font family for the scale title, follows CSS font-family options. @@ -57,12 +57,13 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *ticks*.minRotation | Number | 20 | *currently not-implemented* Minimum rotation for tick labels when condensing is necessary. *Note: Only applicable to horizontal scales.* *ticks*.maxTicksLimit | Number | 11 | Maximum number of ticks and gridlines to show. If not defined, it will limit to 11 ticks but will show all gridlines. *ticks*.padding | Number | 10 | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.* +*ticks*.labelOffset | Number | 0 | Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas* *ticks*.mirror | Boolean | false | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.* *ticks*.reverse | Boolean | false | Reverses order of tick labels. *ticks*.display | Boolean | true | If true, show the ticks. *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value. *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value. -*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. +*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. *ticks*.max | Number | - | User defined minimum number for the scale, overrides maximum value *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart. @@ -181,7 +182,7 @@ The time scale extends the core scale class with the following tick template: // string - By default, no rounding is applied. To round, set to a supported time unit eg. 'week', 'month', 'year', etc. round: false, - + // Moment js for each of the units. Replaces `displayFormat` // To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/ displayFormats: { @@ -310,4 +311,4 @@ Chart.scaleService.updateScaleDefaults('linear', { min: 0 } }) -``` \ No newline at end of file +``` diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 6993c9104..31a9b8a2a 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -41,6 +41,7 @@ module.exports = function(Chart) { display: true, autoSkip: true, autoSkipPadding: 0, + labelOffset: 0, callback: function(value) { return '' + value; } @@ -557,7 +558,7 @@ module.exports = function(Chart) { if (this.options.ticks.display) { this.ctx.save(); - this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl); + this.ctx.translate(xLabelValue + this.options.ticks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = tickLabelFont; this.ctx.textAlign = (isRotated) ? "right" : "center"; @@ -650,7 +651,7 @@ module.exports = function(Chart) { } } - this.ctx.translate(xLabelValue, yLabelValue); + this.ctx.translate(xLabelValue, yLabelValue + this.options.ticks.labelOffset); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = tickLabelFont; this.ctx.textBaseline = "middle"; diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index 9b452515e..e7b981062 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -239,7 +239,8 @@ describe('Core helper tests', function() { display: true, callback: merged.scales.yAxes[1].ticks.callback, // make it nicer, then check explicitly below autoSkip: true, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0, }, type: 'linear' }, { @@ -271,7 +272,8 @@ describe('Core helper tests', function() { display: true, callback: merged.scales.yAxes[2].ticks.callback, // make it nicer, then check explicitly below autoSkip: true, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0, }, type: 'linear' }] diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js index 4688f51d8..a58e89afd 100644 --- a/test/scale.category.tests.js +++ b/test/scale.category.tests.js @@ -38,7 +38,8 @@ describe('Category scale tests', function() { display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below autoSkip: true, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0 } }); diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index afcce0af2..7e572dcdc 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -49,7 +49,8 @@ describe('Linear Scale', function() { display: true, callback: defaultConfig.ticks.callback, // make this work nicer, then check below autoSkip: true, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0 } }); diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index 3b01fd240..6c3724c7d 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -44,7 +44,8 @@ describe('Logarithmic Scale tests', function() { display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below autoSkip: true, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0 }, }); diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index 2e0d7b672..b1848c77f 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -63,7 +63,8 @@ describe('Test the radial linear scale', function() { display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below autoSkip: true, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0 }, }); diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js index 207a11a69..a361c64c5 100644 --- a/test/scale.time.tests.js +++ b/test/scale.time.tests.js @@ -71,7 +71,8 @@ describe('Time scale tests', function() { display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below, autoSkip: false, - autoSkipPadding: 0 + autoSkipPadding: 0, + labelOffset: 0 }, time: { parser: false, -- 2.47.2