Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-19 22:56:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Properly use the ticks.padding option. To correctly fix the issue, the default padding was changed from 0 to 10. This change caused all of the test changes since the width of a vertical scale was lowered by 10px

Browse Source
This commit is contained in:
etimberg
2016-11-04 20:41:54 -04:00
committed by Evert Timberg
parent 4fbb1bdbbc
commit 58afbe428c
11 changed files with 107 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/core/core.scale.js
View File

@@ -39,7 +39,7 @@ module.exports = function(Chart) {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
autoSkip: true,
@@ -609,23 +609,20 @@ module.exports = function(Chart) {
y1 = chartArea.top;
y2 = chartArea.bottom;
} else {
if (options.position === 'left') {
if (optionTicks.mirror) {
labelX = me.right + optionTicks.padding;
textAlign = 'left';
} else {
labelX = me.right - optionTicks.padding;
textAlign = 'right';
}
// right side
} else if (optionTicks.mirror) {
labelX = me.left - optionTicks.padding;
textAlign = 'right';
var isLeft = options.position === 'left';
var tickPadding = optionTicks.padding;
var labelXOffset;
if (optionTicks.mirror) {
textAlign = isLeft ? 'left' : 'right';
labelXOffset = tickPadding;
} else {
labelX = me.left + optionTicks.padding;
textAlign = 'left';
textAlign = isLeft ? 'right' : 'left';
labelXOffset = tl + tickPadding;
}
labelX = isLeft ? me.right - labelXOffset : me.left + labelXOffset;
var yLineValue = me.getPixelForTick(index); // xvalues for grid lines
yLineValue += helpers.aliasPixel(lineWidth);
labelY = me.getPixelForTick(index, gridLines.offsetGridLines);

40
test/controller.bar.tests.js
View File

@@ -155,8 +155,8 @@ describe('Bar controller tests', function() {
expect(meta.data.length).toBe(2);
[
{x: 122, y: 484},
{x: 234, y: 32}
{x: 113, y: 484},
{x: 229, y: 32}
].forEach(function(expected, i) {
expect(meta.data[i]._datasetIndex).toBe(1);
expect(meta.data[i]._index).toBe(i);
@@ -217,9 +217,9 @@ describe('Bar controller tests', function() {
var bar1 = meta.data[0];
var bar2 = meta.data[1];
expect(bar1._model.x).toBeCloseToPixel(194);
expect(bar1._model.x).toBeCloseToPixel(187);
expect(bar1._model.y).toBeCloseToPixel(132);
expect(bar2._model.x).toBeCloseToPixel(424);
expect(bar2._model.x).toBeCloseToPixel(422);
expect(bar2._model.y).toBeCloseToPixel(32);
});
@@ -253,10 +253,10 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);
[
{b: 290, w: 91, x: 95, y: 161},
{b: 290, w: 91, x: 209, y: 419},
{b: 290, w: 91, x: 322, y: 161},
{b: 290, w: 91, x: 436, y: 419}
{b: 290, w: 93, x: 86, y: 161},
{b: 290, w: 93, x: 202, y: 419},
{b: 290, w: 93, x: 318, y: 161},
{b: 290, w: 93, x: 436, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
@@ -267,10 +267,10 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);
[
{b: 161, w: 91, x: 95, y: 32},
{b: 290, w: 91, x: 209, y: 97},
{b: 161, w: 91, x: 322, y: 161},
{b: 419, w: 91, x: 436, y: 471}
{b: 161, w: 93, x: 86, y: 32},
{b: 290, w: 93, x: 202, y: 97},
{b: 161, w: 93, x: 318, y: 161},
{b: 419, w: 93, x: 436, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
@@ -309,10 +309,10 @@ describe('Bar controller tests', function() {
var meta0 = chart.getDatasetMeta(0);
[
{b: 290, w: 91, x: 95, y: 161},
{b: 290, w: 91, x: 209, y: 419},
{b: 290, w: 91, x: 322, y: 161},
{b: 290, w: 91, x: 436, y: 419}
{b: 290, w: 93, x: 86, y: 161},
{b: 290, w: 93, x: 202, y: 419},
{b: 290, w: 93, x: 318, y: 161},
{b: 290, w: 93, x: 436, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
@@ -323,10 +323,10 @@ describe('Bar controller tests', function() {
var meta1 = chart.getDatasetMeta(1);
[
{b: 161, w: 91, x: 95, y: 32},
{b: 290, w: 91, x: 209, y: 97},
{b: 161, w: 91, x: 322, y: 161},
{b: 419, w: 91, x: 436, y: 471}
{b: 161, w: 93, x: 86, y: 32},
{b: 290, w: 93, x: 202, y: 97},
{b: 161, w: 93, x: 318, y: 161},
{b: 419, w: 93, x: 436, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);

6
test/controller.bubble.tests.js
View File

@@ -134,9 +134,9 @@ describe('Bubble controller tests', function() {
var meta = chart.getDatasetMeta(0);
[
{r: 5, x: 38, y: 32},
{r: 1, x: 189, y: 484},
{r: 2, x: 341, y: 461},
{r: 5, x: 28, y: 32},
{r: 1, x: 183, y: 484},
{r: 2, x: 338, y: 461},
{r: 1, x: 492, y: 32}
].forEach(function(expected, i) {
expect(meta.data[i]._model.radius).toBe(expected.r);

66
test/controller.line.tests.js
View File

@@ -203,8 +203,8 @@ describe('Line controller tests', function() {
[
{x: 44, y: 484},
{x: 193, y: 32}
{x: 33, y: 484},
{x: 186, y: 32}
].forEach(function(expected, i) {
expect(meta.data[i]._datasetIndex).toBe(0);
expect(meta.data[i]._index).toBe(i);
@@ -250,7 +250,7 @@ describe('Line controller tests', function() {
var meta = chart.getDatasetMeta(0);
// 1 point
var point = meta.data[0];
expect(point._model.x).toBeCloseToPixel(267);
expect(point._model.x).toBeCloseToPixel(262);
// 2 points
chart.data.labels = ['One', 'Two'];
@@ -259,7 +259,7 @@ describe('Line controller tests', function() {
var points = meta.data;
expect(points[0]._model.x).toBeCloseToPixel(37);
expect(points[0]._model.x).toBeCloseToPixel(27);
expect(points[1]._model.x).toBeCloseToPixel(498);
// 3 points
@@ -269,8 +269,8 @@ describe('Line controller tests', function() {
points = meta.data;
expect(points[0]._model.x).toBeCloseToPixel(37);
expect(points[1]._model.x).toBeCloseToPixel(265);
expect(points[0]._model.x).toBeCloseToPixel(27);
expect(points[1]._model.x).toBeCloseToPixel(260);
expect(points[2]._model.x).toBeCloseToPixel(493);
// 4 points
@@ -280,9 +280,9 @@ describe('Line controller tests', function() {
points = meta.data;
expect(points[0]._model.x).toBeCloseToPixel(37);
expect(points[1]._model.x).toBeCloseToPixel(190);
expect(points[2]._model.x).toBeCloseToPixel(343);
expect(points[0]._model.x).toBeCloseToPixel(27);
expect(points[1]._model.x).toBeCloseToPixel(184);
expect(points[2]._model.x).toBeCloseToPixel(340);
expect(points[3]._model.x).toBeCloseToPixel(497);
});
@@ -311,9 +311,9 @@ describe('Line controller tests', function() {
var meta0 = chart.getDatasetMeta(0);
[
{x: 38, y: 161},
{x: 189, y: 419},
{x: 341, y: 161},
{x: 28, y: 161},
{x: 183, y: 419},
{x: 338, y: 161},
{x: 492, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -323,9 +323,9 @@ describe('Line controller tests', function() {
var meta1 = chart.getDatasetMeta(1);
[
{x: 38, y: 32},
{x: 189, y: 97},
{x: 341, y: 161},
{x: 28, y: 32},
{x: 183, y: 97},
{x: 338, y: 161},
{x: 492, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -366,9 +366,9 @@ describe('Line controller tests', function() {
var meta0 = chart.getDatasetMeta(0);
[
{x: 76, y: 161},
{x: 215, y: 419},
{x: 353, y: 161},
{x: 56, y: 161},
{x: 202, y: 419},
{x: 347, y: 161},
{x: 492, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -378,9 +378,9 @@ describe('Line controller tests', function() {
var meta1 = chart.getDatasetMeta(1);
[
{x: 76, y: 32},
{x: 215, y: 97},
{x: 353, y: 161},
{x: 56, y: 32},
{x: 202, y: 97},
{x: 347, y: 161},
{x: 492, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -438,9 +438,9 @@ describe('Line controller tests', function() {
var meta0 = chart.getDatasetMeta(0);
[
{x: 38, y: 161},
{x: 189, y: 419},
{x: 341, y: 161},
{x: 28, y: 161},
{x: 183, y: 419},
{x: 338, y: 161},
{x: 492, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -450,9 +450,9 @@ describe('Line controller tests', function() {
var meta1 = chart.getDatasetMeta(1);
[
{x: 38, y: 32},
{x: 189, y: 97},
{x: 341, y: 161},
{x: 28, y: 32},
{x: 183, y: 97},
{x: 338, y: 161},
{x: 492, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -486,9 +486,9 @@ describe('Line controller tests', function() {
var meta0 = chart.getDatasetMeta(0);
[
{x: 38, y: 161},
{x: 189, y: 419},
{x: 341, y: 161},
{x: 28, y: 161},
{x: 183, y: 419},
{x: 338, y: 161},
{x: 492, y: 419}
].forEach(function(values, i) {
expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
@@ -498,9 +498,9 @@ describe('Line controller tests', function() {
var meta1 = chart.getDatasetMeta(1);
[
{x: 38, y: 32},
{x: 189, y: 97},
{x: 341, y: 161},
{x: 28, y: 32},
{x: 183, y: 97},
{x: 338, y: 161},
{x: 492, y: 471}
].forEach(function(values, i) {
expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);

4
test/core.helpers.tests.js
View File

@@ -206,7 +206,7 @@ describe('Core helper tests', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
callback: merged.scales.yAxes[1].ticks.callback, // make it nicer, then check explicitly below
@@ -242,7 +242,7 @@ describe('Core helper tests', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
callback: merged.scales.yAxes[2].ticks.callback, // make it nicer, then check explicitly below

8
test/core.tooltip.tests.js
View File

@@ -113,7 +113,7 @@ describe('Core.Tooltip', function() {
}]
}));
expect(tooltip._view.x).toBeCloseToPixel(269);
expect(tooltip._view.x).toBeCloseToPixel(263);
expect(tooltip._view.y).toBeCloseToPixel(155);
});
@@ -310,7 +310,7 @@ describe('Core.Tooltip', function() {
}]
}));
expect(tooltip._view.x).toBeCloseToPixel(269);
expect(tooltip._view.x).toBeCloseToPixel(263);
expect(tooltip._view.y).toBeCloseToPixel(312);
});
@@ -459,7 +459,7 @@ describe('Core.Tooltip', function() {
}]
}));
expect(tooltip._view.x).toBeCloseToPixel(216);
expect(tooltip._view.x).toBeCloseToPixel(211);
expect(tooltip._view.y).toBeCloseToPixel(190);
});
@@ -539,7 +539,7 @@ describe('Core.Tooltip', function() {
}]
}));
expect(tooltip._view.x).toBeCloseToPixel(269);
expect(tooltip._view.x).toBeCloseToPixel(263);
expect(tooltip._view.y).toBeCloseToPixel(155);
});

26
test/scale.category.tests.js
View File

@@ -36,7 +36,7 @@ describe('Category scale tests', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
@@ -187,8 +187,8 @@ describe('Category scale tests', function() {
});
var xScale = chart.scales.xScale0;
expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(23);
expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(23);
expect(xScale.getValueForPixel(33)).toBe(0);
expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(487);
@@ -197,12 +197,12 @@ describe('Category scale tests', function() {
xScale.options.gridLines.offsetGridLines = true;
expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(78);
expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(23);
expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(69);
expect(xScale.getValueForPixel(33)).toBe(0);
expect(xScale.getValueForPixel(78)).toBe(0);
expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(396);
expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(395);
expect(xScale.getPixelForValue(0, 4, 0, true)).toBeCloseToPixel(441);
expect(xScale.getValueForPixel(397)).toBe(4);
expect(xScale.getValueForPixel(441)).toBe(4);
@@ -235,8 +235,8 @@ describe('Category scale tests', function() {
});
var xScale = chart.scales.xScale0;
expect(xScale.getPixelForValue('tick_1', 0, 0, false)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue('tick_1', 1, 0, false)).toBeCloseToPixel(146);
expect(xScale.getPixelForValue('tick_1', 0, 0, false)).toBeCloseToPixel(23);
expect(xScale.getPixelForValue('tick_1', 1, 0, false)).toBeCloseToPixel(139);
});
it ('Should get the correct pixel for a value when horizontal and zoomed', function() {
@@ -270,18 +270,18 @@ describe('Category scale tests', function() {
});
var xScale = chart.scales.xScale0;
expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(23);
expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(23);
expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(496);
expect(xScale.getPixelForValue(0, 3, 0, true)).toBeCloseToPixel(496);
xScale.options.gridLines.offsetGridLines = true;
expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(33);
expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(110);
expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(23);
expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(102);
expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(342);
expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(338);
expect(xScale.getPixelForValue(0, 3, 0, true)).toBeCloseToPixel(419);
});

18
test/scale.linear.tests.js
View File

@@ -34,7 +34,7 @@ describe('Linear Scale', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this work nicer, then check below
@@ -660,12 +660,12 @@ describe('Linear Scale', function() {
var xScale = chart.scales.xScale0;
expect(xScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(501); // right - paddingRight
expect(xScale.getPixelForValue(-1, 0, 0)).toBeCloseToPixel(41); // left + paddingLeft
expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(271); // halfway*/
expect(xScale.getPixelForValue(-1, 0, 0)).toBeCloseToPixel(31); // left + paddingLeft
expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(266); // halfway*/
expect(xScale.getValueForPixel(501)).toBeCloseTo(1, 1e-2);
expect(xScale.getValueForPixel(41)).toBeCloseTo(-1, 1e-2);
expect(xScale.getValueForPixel(271)).toBeCloseTo(0, 1e-2);
expect(xScale.getValueForPixel(31)).toBeCloseTo(-1, 1e-2);
expect(xScale.getValueForPixel(266)).toBeCloseTo(0, 1e-2);
var yScale = chart.scales.yScale0;
expect(yScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(32); // right - paddingRight
@@ -719,7 +719,7 @@ describe('Linear Scale', function() {
expect(xScale.paddingBottom).toBeCloseToPixel(0);
expect(xScale.paddingLeft).toBeCloseToPixel(0);
expect(xScale.paddingRight).toBeCloseToPixel(0);
expect(xScale.width).toBeCloseToPixel(457.5);
expect(xScale.width).toBeCloseToPixel(468);
expect(xScale.height).toBeCloseToPixel(28);
var yScale = chart.scales.yScale0;
@@ -727,7 +727,7 @@ describe('Linear Scale', function() {
expect(yScale.paddingBottom).toBeCloseToPixel(0);
expect(yScale.paddingLeft).toBeCloseToPixel(0);
expect(yScale.paddingRight).toBeCloseToPixel(0);
expect(yScale.width).toBeCloseToPixel(41);
expect(yScale.width).toBeCloseToPixel(30);
expect(yScale.height).toBeCloseToPixel(452);
// Extra size when scale label showing
@@ -739,14 +739,14 @@ describe('Linear Scale', function() {
expect(xScale.paddingBottom).toBeCloseToPixel(0);
expect(xScale.paddingLeft).toBeCloseToPixel(0);
expect(xScale.paddingRight).toBeCloseToPixel(0);
expect(xScale.width).toBeCloseToPixel(439.5);
expect(xScale.width).toBeCloseToPixel(450);
expect(xScale.height).toBeCloseToPixel(46);
expect(yScale.paddingTop).toBeCloseToPixel(0);
expect(yScale.paddingBottom).toBeCloseToPixel(0);
expect(yScale.paddingLeft).toBeCloseToPixel(0);
expect(yScale.paddingRight).toBeCloseToPixel(0);
expect(yScale.width).toBeCloseToPixel(59);
expect(yScale.width).toBeCloseToPixel(48);
expect(yScale.height).toBeCloseToPixel(434);
});

12
test/scale.logarithmic.tests.js
View File

@@ -33,7 +33,7 @@ describe('Logarithmic Scale tests', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
@@ -717,14 +717,14 @@ describe('Logarithmic Scale tests', function() {
});
var xScale = chart.scales.xScale;
expect(xScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(481.5); // right - paddingRight
expect(xScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(48); // left + paddingLeft
expect(xScale.getPixelForValue(10, 0, 0)).toBeCloseToPixel(276); // halfway
expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(48); // 0 is invalid, put it on the left.
expect(xScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(482); // right - paddingRight
expect(xScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(37); // left + paddingLeft
expect(xScale.getPixelForValue(10, 0, 0)).toBeCloseToPixel(270); // halfway
expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(37); // 0 is invalid, put it on the left.
expect(xScale.getValueForPixel(481.5)).toBeCloseToPixel(80);
expect(xScale.getValueForPixel(48)).toBeCloseTo(1, 1e-4);
expect(xScale.getValueForPixel(276)).toBeCloseTo(10, 1e-4);
expect(xScale.getValueForPixel(270)).toBeCloseTo(10, 1e-4);
var yScale = chart.scales.yScale;
expect(yScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(32); // top + paddingTop

2
test/scale.radialLinear.tests.js
View File

@@ -48,7 +48,7 @@ describe('Test the radial linear scale', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
showLabelBackdrop: true,
display: true,

8
test/scale.time.tests.js
View File

@@ -58,7 +58,7 @@ describe('Time scale tests', function() {
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 10,
padding: 0,
reverse: false,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below,
@@ -406,11 +406,11 @@ describe('Time scale tests', function() {
var xScale = chart.scales.xScale0;
expect(xScale.getPixelForValue('', 0, 0)).toBeCloseToPixel(78);
expect(xScale.getPixelForValue('', 0, 0)).toBeCloseToPixel(71);
expect(xScale.getPixelForValue('', 6, 0)).toBeCloseToPixel(452);
expect(xScale.getPixelForValue('2015-01-01T20:00:00')).toBeCloseToPixel(78);
expect(xScale.getPixelForValue('2015-01-01T20:00:00')).toBeCloseToPixel(71);
expect(xScale.getValueForPixel(78)).toBeCloseToTime({
expect(xScale.getValueForPixel(71)).toBeCloseToTime({
value: moment(chart.data.labels[0]),
unit: 'hour',
threshold: 0.75