Skip to content

Commit

Permalink
Layout service now supports configurable padding on left, top, right …
Browse files Browse the repository at this point in the history 
…and bottom. Re-enabled the layout service tests
  • Loading branch information
@etimberg
etimberg committed Oct 16, 2016
1 parent a86c47c commit 8bca33e
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 23 deletions.
6 changes: 1 addition & 5 deletions gulpfile.js
View file
Expand Up @@ -38,11 +38,7 @@ var preTestFiles = [
];

var testFiles = [
'./test/*.js',

// Disable tests which need to be rewritten based on changes introduced by
// the following changes: https://github.com/chartjs/Chart.js/pull/2346
'!./test/core.layoutService.tests.js',
'./test/*.js'
];

gulp.task('bower', bowerTask);
Expand Down
50 changes: 34 additions & 16 deletions src/core/core.layoutService.js
View file
Expand Up @@ -32,8 +32,26 @@ module.exports = function(Chart) {
return;
}

var xPadding = 0;
var yPadding = 0;
var layoutOptions = chartInstance.options.layout;
var padding = layoutOptions ? layoutOptions.padding : null;

var leftPadding = 0;
var rightPadding = 0;
var topPadding = 0;
var bottomPadding = 0;

if (!isNaN(padding)) {
// options.layout.padding is a number. assign to all
leftPadding = padding;
rightPadding = padding;
topPadding = padding;
bottomPadding = padding;
} else {
leftPadding = padding.left || 0;
rightPadding = padding.right || 0;
topPadding = padding.top || 0;
bottomPadding = padding.bottom || 0;
}

var leftBoxes = helpers.where(chartInstance.boxes, function(box) {
return box.options.position === 'left';
Expand Down Expand Up @@ -99,8 +117,8 @@ module.exports = function(Chart) {
// 9. Tell any axes that overlay the chart area the positions of the chart area

// Step 1
var chartWidth = width - (2 * xPadding);
var chartHeight = height - (2 * yPadding);
var chartWidth = width - leftPadding - rightPadding;
var chartHeight = height - topPadding - bottomPadding;
var chartAreaWidth = chartWidth / 2; // min 50%
var chartAreaHeight = chartHeight / 2; // min 50%

Expand Down Expand Up @@ -140,10 +158,10 @@ module.exports = function(Chart) {
// be if the axes are drawn at their minimum sizes.

// Steps 5 & 6
var totalLeftBoxesWidth = xPadding;
var totalRightBoxesWidth = xPadding;
var totalTopBoxesHeight = yPadding;
var totalBottomBoxesHeight = yPadding;
var totalLeftBoxesWidth = leftPadding;
var totalRightBoxesWidth = rightPadding;
var totalTopBoxesHeight = topPadding;
var totalBottomBoxesHeight = bottomPadding;

// Function to fit a box
function fitBox(box) {
Expand Down Expand Up @@ -213,10 +231,10 @@ module.exports = function(Chart) {
helpers.each(leftBoxes.concat(rightBoxes), finalFitVerticalBox);

// Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
totalLeftBoxesWidth = xPadding;
totalRightBoxesWidth = xPadding;
totalTopBoxesHeight = yPadding;
totalBottomBoxesHeight = yPadding;
totalLeftBoxesWidth = leftPadding;
totalRightBoxesWidth = rightPadding;
totalTopBoxesHeight = topPadding;
totalBottomBoxesHeight = bottomPadding;

helpers.each(leftBoxes, function(box) {
totalLeftBoxesWidth += box.width;
Expand Down Expand Up @@ -265,13 +283,13 @@ module.exports = function(Chart) {
}

// Step 7 - Position the boxes
var left = xPadding;
var top = yPadding;
var left = leftPadding;
var top = topPadding;

function placeBox(box) {
if (box.isHorizontal()) {
box.left = box.options.fullWidth ? xPadding : totalLeftBoxesWidth;
box.right = box.options.fullWidth ? width - xPadding : totalLeftBoxesWidth + maxChartAreaWidth;
box.left = box.options.fullWidth ? leftPadding : totalLeftBoxesWidth;
box.right = box.options.fullWidth ? width - rightPadding : totalLeftBoxesWidth + maxChartAreaWidth;
box.top = top;
box.bottom = top + box.height;

Expand Down
161 changes: 159 additions & 2 deletions test/core.layoutService.tests.js
View file
@@ -1,6 +1,9 @@
// Tests of the scale service
describe('Test the layout service', function() {
it('should fit a simple chart with 2 scales', function() {
// Disable tests which need to be rewritten based on changes introduced by
// the following changes: https://github.com/chartjs/Chart.js/pull/2346
// using xit marks the test as pending: http://jasmine.github.io/2.0/introduction.html#section-Pending_Specs
xit('should fit a simple chart with 2 scales', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
Expand Down Expand Up @@ -48,7 +51,7 @@ describe('Test the layout service', function() {
expect(chart.scales.yScale.labelRotation).toBeCloseTo(0);
});

it('should fit scales that are in the top and right positions', function() {
xit('should fit scales that are in the top and right positions', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
Expand Down Expand Up @@ -239,4 +242,158 @@ describe('Test the layout service', function() {
expect(chart.scales.yScale.right).toBeCloseToPixel(45);
expect(chart.scales.yScale.top).toBeCloseToPixel(60);
});

describe('padding', function() {
it('should apply a single padding to all dimensions', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [
{ data: [10, 5, 0, 25, 78, -10] }
],
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
},
options: {
scales: {
xAxes: [{
id: 'xScale',
type: 'category'
}],
yAxes: [{
id: 'yScale',
type: 'linear'
}]
},
layout: {
padding: 10
}
}
}, {
canvas: {
height: 150,
width: 250
}
});

expect(chart.chartArea.bottom).toBeCloseToPixel(95);
expect(chart.chartArea.left).toBeCloseToPixel(51);
expect(chart.chartArea.right).toBeCloseToPixel(240);
expect(chart.chartArea.top).toBeCloseToPixel(42);

// Is xScale at the right spot
expect(chart.scales.xScale.bottom).toBeCloseToPixel(140);
expect(chart.scales.xScale.left).toBeCloseToPixel(51);
expect(chart.scales.xScale.right).toBeCloseToPixel(240);
expect(chart.scales.xScale.top).toBeCloseToPixel(95);

// Is yScale at the right spot
expect(chart.scales.yScale.bottom).toBeCloseToPixel(95);
expect(chart.scales.yScale.left).toBeCloseToPixel(10);
expect(chart.scales.yScale.right).toBeCloseToPixel(51);
expect(chart.scales.yScale.top).toBeCloseToPixel(42);
});

it('should apply padding in all positions', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [
{ data: [10, 5, 0, 25, 78, -10] }
],
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
},
options: {
scales: {
xAxes: [{
id: 'xScale',
type: 'category'
}],
yAxes: [{
id: 'yScale',
type: 'linear'
}]
},
layout: {
padding: {
left: 5,
right: 15,
top: 8,
bottom: 12
}
}
}
}, {
canvas: {
height: 150,
width: 250
}
});

expect(chart.chartArea.bottom).toBeCloseToPixel(95);
expect(chart.chartArea.left).toBeCloseToPixel(45);
expect(chart.chartArea.right).toBeCloseToPixel(235);
expect(chart.chartArea.top).toBeCloseToPixel(40);

// Is xScale at the right spot
expect(chart.scales.xScale.bottom).toBeCloseToPixel(138);
expect(chart.scales.xScale.left).toBeCloseToPixel(45);
expect(chart.scales.xScale.right).toBeCloseToPixel(235);
expect(chart.scales.xScale.top).toBeCloseToPixel(95);

// Is yScale at the right spot
expect(chart.scales.yScale.bottom).toBeCloseToPixel(95);
expect(chart.scales.yScale.left).toBeCloseToPixel(5);
expect(chart.scales.yScale.right).toBeCloseToPixel(45);
expect(chart.scales.yScale.top).toBeCloseToPixel(40);
});

it('should default to 0 padding if no dimensions specified', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [
{ data: [10, 5, 0, 25, 78, -10] }
],
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
},
options: {
scales: {
xAxes: [{
id: 'xScale',
type: 'category'
}],
yAxes: [{
id: 'yScale',
type: 'linear'
}]
},
layout: {
padding: {}
}
}
}, {
canvas: {
height: 150,
width: 250
}
});

expect(chart.chartArea.bottom).toBeCloseToPixel(111);
expect(chart.chartArea.left).toBeCloseToPixel(40);
expect(chart.chartArea.right).toBeCloseToPixel(250);
expect(chart.chartArea.top).toBeCloseToPixel(32);

// Is xScale at the right spot
expect(chart.scales.xScale.bottom).toBeCloseToPixel(150);
expect(chart.scales.xScale.left).toBeCloseToPixel(40);
expect(chart.scales.xScale.right).toBeCloseToPixel(250);
expect(chart.scales.xScale.top).toBeCloseToPixel(111);

// Is yScale at the right spot
expect(chart.scales.yScale.bottom).toBeCloseToPixel(111);
expect(chart.scales.yScale.left).toBeCloseToPixel(0);
expect(chart.scales.yScale.right).toBeCloseToPixel(40);
expect(chart.scales.yScale.top).toBeCloseToPixel(32);
});
});
});

0 comments on commit 8bca33e

Please sign in to comment.