Skip to content

Commit

Permalink
Implement scaleLabel padding and make vertical axis tick padding cons…
Browse files Browse the repository at this point in the history 
…istent with horizontal axis
  • Loading branch information
@andig
andig committed Aug 22, 2017
1 parent 0e5ce3f commit 8a6d5b0
Show file tree
Hide file tree
Showing 12 changed files with 160 additions and 150 deletions.
47 changes: 33 additions & 14 deletions src/core/core.scale.js
View file
Expand Up @@ -36,7 +36,14 @@ defaults._set('scale', {
// actual label
labelString: '',

lineHeight: 1.2
// line height
lineHeight: 1.2,

// top/bottom padding
padding: {
top: 4,
bottom: 4
}
},

// label settings
Expand Down Expand Up @@ -391,7 +398,6 @@ module.exports = function(Chart) {

var tickFont = parseFontOptions(tickOpts);
var tickMarkLength = opts.gridLines.tickMarkLength;
var scaleLabelLineHeight = parseLineHeight(scaleLabelOpts);

// Width
if (isHorizontal) {
Expand All @@ -410,10 +416,14 @@ module.exports = function(Chart) {

// Are we showing a title for the scale?
if (scaleLabelOpts.display && display) {
var scaleLabelLineHeight = parseLineHeight(scaleLabelOpts);
var scaleLabelPadding = helpers.options.toPadding(scaleLabelOpts.padding);
var deltaHeight = scaleLabelLineHeight + scaleLabelPadding.height;

if (isHorizontal) {
minSize.height += scaleLabelLineHeight;
minSize.height += deltaHeight;
} else {
minSize.width += scaleLabelLineHeight;
minSize.width += deltaHeight;
}
}

Expand All @@ -435,16 +445,17 @@ module.exports = function(Chart) {
// TODO - improve this calculation
var labelHeight = (sinRotation * largestTextWidth)
+ (tickFont.size * tallestLabelHeightInLines)
+ (lineSpace * tallestLabelHeightInLines);
+ (lineSpace * (tallestLabelHeightInLines - 1))
+ lineSpace; // padding

minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding);
me.ctx.font = tickFont.font;

me.ctx.font = tickFont.font;
var firstLabelWidth = computeTextSize(me.ctx, labels[0], tickFont.font);
var lastLabelWidth = computeTextSize(me.ctx, labels[labels.length - 1], tickFont.font);

// 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
// 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
if (me.labelRotation !== 0) {
me.paddingLeft = opts.position === 'bottom' ? (cosRotation * firstLabelWidth) + 3 : (cosRotation * lineSpace) + 3; // add 3 px to move away from canvas edges
me.paddingRight = opts.position === 'bottom' ? (cosRotation * lineSpace) + 3 : (cosRotation * lastLabelWidth) + 3;
Expand All @@ -453,15 +464,18 @@ module.exports = function(Chart) {
me.paddingRight = lastLabelWidth / 2 + 3;
}
} else {
// A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
// Account for padding

// A vertical axis is more constrained by the width. Labels are the
// dominant factor here, so get that length first and account for padding
if (tickOpts.mirror) {
largestTextWidth = 0;
} else {
largestTextWidth += tickPadding;
// use lineSpace for consistency with horizontal axis
// tickPadding is not implemented for horizontal
largestTextWidth += tickPadding + lineSpace;
}

minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);

me.paddingTop = tickFont.size / 2;
me.paddingBottom = tickFont.size / 2;
}
Expand Down Expand Up @@ -663,6 +677,7 @@ module.exports = function(Chart) {

var scaleLabelFontColor = helpers.valueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
var scaleLabelFont = parseFontOptions(scaleLabel);
var scaleLabelPadding = helpers.options.toPadding(scaleLabel.padding);
var labelRotationRadians = helpers.toRadians(me.labelRotation);

var itemsToDraw = [];
Expand Down Expand Up @@ -840,10 +855,14 @@ module.exports = function(Chart) {

if (isHorizontal) {
scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
scaleLabelY = options.position === 'bottom' ? me.bottom - halfLineHeight : me.top + halfLineHeight;
scaleLabelY = options.position === 'bottom'
? me.bottom - halfLineHeight - scaleLabelPadding.bottom
: me.top + halfLineHeight + scaleLabelPadding.top;
} else {
var isLeft = options.position === 'left';
scaleLabelX = isLeft ? me.left + halfLineHeight : me.right - halfLineHeight;
scaleLabelX = isLeft
? me.left + halfLineHeight + scaleLabelPadding.top
: me.right - halfLineHeight - scaleLabelPadding.top;
scaleLabelY = me.top + ((me.bottom - me.top) / 2);
rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
}
Expand Down
90 changes: 45 additions & 45 deletions test/specs/controller.bar.tests.js
View file
Expand Up @@ -726,8 +726,8 @@ describe('Bar controller tests', function() {
expect(meta.data.length).toBe(2);

[
{x: 113, y: 484},
{x: 229, y: 32}
{x: 118, y: 484},
{x: 231, y: 32}
].forEach(function(expected, i) {
expect(meta.data[i]._datasetIndex).toBe(1);
expect(meta.data[i]._index).toBe(i);
Expand Down Expand Up @@ -788,7 +788,7 @@ describe('Bar controller tests', function() {
var bar1 = meta.data[0];
var bar2 = meta.data[1];

expect(bar1._model.x).toBeCloseToPixel(187);
expect(bar1._model.x).toBeCloseToPixel(191);
expect(bar1._model.y).toBeCloseToPixel(132);
expect(bar2._model.x).toBeCloseToPixel(422);
expect(bar2._model.y).toBeCloseToPixel(32);
Expand Down Expand Up @@ -823,9 +823,9 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);

[
{b: 290, w: 83 / 2, x: 63, y: 161},
{b: 290, w: 83 / 2, x: 179, y: 419},
{b: 290, w: 83 / 2, x: 295, y: 161},
{b: 290, w: 83 / 2, x: 68, y: 161},
{b: 290, w: 83 / 2, x: 182, y: 419},
{b: 290, w: 83 / 2, x: 298, y: 161},
{b: 290, w: 83 / 2, x: 411, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
Expand All @@ -837,9 +837,9 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);

[
{b: 161, w: 83 / 2, x: 109, y: 32},
{b: 290, w: 83 / 2, x: 225, y: 97},
{b: 161, w: 83 / 2, x: 341, y: 161},
{b: 161, w: 83 / 2, x: 114, y: 32},
{b: 290, w: 83 / 2, x: 229, y: 97},
{b: 161, w: 83 / 2, x: 344, y: 161},
{b: 419, w: 83 / 2, x: 457, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
Expand Down Expand Up @@ -882,10 +882,10 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);

[
{b: 936, w: 83 / 2, x: 65.5, y: 484},
{b: 936, w: 83 / 2, x: 180.5, y: 755},
{b: 936, w: 83 / 2, x: 296.5, y: 846},
{b: 936, w: 83 / 2, x: 411.5, y: 32}
{b: 936, w: 83 / 2, x: 70, y: 484},
{b: 936, w: 83 / 2, x: 184, y: 755},
{b: 936, w: 83 / 2, x: 298, y: 846},
{b: 936, w: 83 / 2, x: 413, y: 32}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
Expand All @@ -896,10 +896,10 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);

[
{b: 484, w: 83 / 2, x: 111.5, y: 32},
{b: 755, w: 83 / 2, x: 226.5, y: 32},
{b: 846, w: 83 / 2, x: 342.5, y: 32},
{b: 32, w: 83 / 2, x: 457.5, y: 32}
{b: 484, w: 83 / 2, x: 115, y: 32},
{b: 755, w: 83 / 2, x: 230, y: 32},
{b: 846, w: 83 / 2, x: 344, y: 32},
{b: 32, w: 83 / 2, x: 457, y: 32}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
Expand Down Expand Up @@ -937,9 +937,9 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);

[
{b: 290, w: 83, x: 86, y: 32},
{b: 290, w: 83, x: 202, y: 419},
{b: 290, w: 83, x: 318, y: 161},
{b: 290, w: 83, x: 91, y: 32},
{b: 290, w: 83, x: 206, y: 419},
{b: 290, w: 83, x: 321, y: 161},
{b: 290, w: 83, x: 434, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
Expand All @@ -951,9 +951,9 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);

[
{b: 290, w: 83, x: 86, y: 161},
{b: 290, w: 83, x: 202, y: 97},
{b: 290, w: 83, x: 318, y: 290},
{b: 290, w: 83, x: 91, y: 161},
{b: 290, w: 83, x: 206, y: 97},
{b: 290, w: 83, x: 321, y: 290},
{b: 290, w: 83, x: 434, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
Expand Down Expand Up @@ -992,9 +992,9 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);

[
{b: 290, w: 83 / 2, x: 63, y: 161},
{b: 290, w: 83 / 2, x: 179, y: 419},
{b: 290, w: 83 / 2, x: 295, y: 161},
{b: 290, w: 83 / 2, x: 68, y: 161},
{b: 290, w: 83 / 2, x: 182, y: 419},
{b: 290, w: 83 / 2, x: 298, y: 161},
{b: 290, w: 83 / 2, x: 411, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
Expand All @@ -1006,9 +1006,9 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);

[
{b: 161, w: 83 / 2, x: 109, y: 32},
{b: 290, w: 83 / 2, x: 225, y: 97},
{b: 161, w: 83 / 2, x: 341, y: 161},
{b: 161, w: 83 / 2, x: 114, y: 32},
{b: 290, w: 83 / 2, x: 229, y: 97},
{b: 161, w: 83 / 2, x: 344, y: 161},
{b: 419, w: 83 / 2, x: 457, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
Expand Down Expand Up @@ -1049,9 +1049,9 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);

[
{b: 290, w: 83, x: 86, y: 161},
{b: 290, w: 83, x: 202, y: 419},
{b: 290, w: 83, x: 318, y: 161},
{b: 290, w: 83, x: 91, y: 161},
{b: 290, w: 83, x: 206, y: 419},
{b: 290, w: 83, x: 321, y: 161},
{b: 290, w: 83, x: 434, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
Expand All @@ -1063,9 +1063,9 @@ describe('Bar controller tests', function() {
var meta = chart.getDatasetMeta(1);

[
{b: 161, w: 83, x: 86, y: 32},
{b: 290, w: 83, x: 202, y: 97},
{b: 161, w: 83, x: 318, y: 161},
{b: 161, w: 83, x: 91, y: 32},
{b: 290, w: 83, x: 206, y: 97},
{b: 161, w: 83, x: 321, y: 161},
{b: 419, w: 83, x: 434, y: 471}
].forEach(function(values, i) {
expect(meta.data[i]._model.base).toBeCloseToPixel(values.b);
Expand Down Expand Up @@ -1104,8 +1104,8 @@ describe('Bar controller tests', function() {
var meta = chart.getDatasetMeta(1);

[
{x: 108, y: 258},
{x: 224, y: 32}
{x: 113, y: 258},
{x: 228, y: 32}
].forEach(function(values, i) {
expect(meta.data[i]._model.base).toBeCloseToPixel(484);
expect(meta.data[i]._model.width).toBeCloseToPixel(42);
Expand Down Expand Up @@ -1146,8 +1146,8 @@ describe('Bar controller tests', function() {
var meta = chart.getDatasetMeta(2);

[
{b: 371, x: 108, y: 258},
{b: 258, x: 224, y: 32}
{b: 371, x: 113, y: 258},
{b: 258, x: 228, y: 32}
].forEach(function(values, i) {
expect(meta.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta.data[i]._model.width).toBeCloseToPixel(42);
Expand Down Expand Up @@ -1187,9 +1187,9 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);

[
{b: 484, w: 92, x: 94, y: 484},
{b: 484, w: 92, x: 208, y: 136},
{b: 484, w: 92, x: 322, y: 484},
{b: 484, w: 92, x: 98, y: 484},
{b: 484, w: 92, x: 211, y: 136},
{b: 484, w: 92, x: 324, y: 484},
{b: 484, w: 92, x: 436, y: 136}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
Expand All @@ -1201,9 +1201,9 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);

[
{b: 484, w: 92, x: 94, y: 122},
{b: 136, w: 92, x: 208, y: 122},
{b: 484, w: 92, x: 322, y: 484},
{b: 484, w: 92, x: 98, y: 122},
{b: 136, w: 92, x: 211, y: 122},
{b: 484, w: 92, x: 324, y: 484},
{b: 136, w: 92, x: 436, y: 32}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
Expand Down
6 changes: 3 additions & 3 deletions test/specs/controller.bubble.tests.js
View file
Expand Up @@ -134,9 +134,9 @@ describe('Bubble controller tests', function() {
var meta = chart.getDatasetMeta(0);

[
{r: 5, x: 28, y: 32},
{r: 1, x: 183, y: 484},
{r: 2, x: 338, y: 461},
{r: 5, x: 34, y: 32},
{r: 1, x: 187, y: 484},
{r: 2, x: 340, y: 461},
{r: 1, x: 492, y: 32}
].forEach(function(expected, i) {
expect(meta.data[i]._model.radius).toBe(expected.r);
Expand Down

0 comments on commit 8a6d5b0

Please sign in to comment.