Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 596ff37

Browse files
etimbergetimberg
committed
Layout service now supports configurable padding on left, top, right and bottom.
Re-enabled the layout service tests and then properly disabled the tests that fail on the CI.
1 parent 16f23b2 commit 596ff37

File tree

4 files changed

+193
-25
lines changed

4 files changed

+193
-25
lines changed

‎docs/01-Chart-Configuration.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,15 @@ onClick | Function | null | Called if the event is of type 'mouseup' or 'click'.
8585
legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
8686
onResize | Function | null | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
8787

88+
### Layout Configuration
89+
90+
The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.global.layout`.
91+
92+
Name | Type | Default | Description
93+
--- | --- | --- | ---
94+
padding | Number or Object | 0 | The padding to add inside the chart. If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top`, and `bottom` properties can also be specified.
95+
96+
8897
### Title Configuration
8998

9099
The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.global.title`.

‎gulpfile.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,7 @@ var preTestFiles = [
3939
];
4040

4141
var testFiles = [
42-
'./test/*.js',
43-
44-
// Disable tests which need to be rewritten based on changes introduced by
45-
// the following changes: https://github.com/chartjs/Chart.js/pull/2346
46-
'!./test/core.layoutService.tests.js',
42+
'./test/*.js'
4743
];
4844

4945
gulp.task('bower', bowerTask);

‎src/core/core.layoutService.js‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,26 @@ module.exports = function(Chart) {
3232
return;
3333
}
3434

35-
var xPadding = 0;
36-
var yPadding = 0;
35+
var layoutOptions = chartInstance.options.layout;
36+
var padding = layoutOptions ? layoutOptions.padding : null;
37+
38+
var leftPadding = 0;
39+
var rightPadding = 0;
40+
var topPadding = 0;
41+
var bottomPadding = 0;
42+
43+
if (!isNaN(padding)) {
44+
// options.layout.padding is a number. assign to all
45+
leftPadding = padding;
46+
rightPadding = padding;
47+
topPadding = padding;
48+
bottomPadding = padding;
49+
} else {
50+
leftPadding = padding.left || 0;
51+
rightPadding = padding.right || 0;
52+
topPadding = padding.top || 0;
53+
bottomPadding = padding.bottom || 0;
54+
}
3755

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

101119
// Step 1
102-
var chartWidth = width - (2 * xPadding);
103-
var chartHeight = height - (2 * yPadding);
120+
var chartWidth = width - leftPadding - rightPadding;
121+
var chartHeight = height - topPadding - bottomPadding;
104122
var chartAreaWidth = chartWidth / 2; // min 50%
105123
var chartAreaHeight = chartHeight / 2; // min 50%
106124

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

142160
// Steps 5 & 6
143-
var totalLeftBoxesWidth = xPadding;
144-
var totalRightBoxesWidth = xPadding;
145-
var totalTopBoxesHeight = yPadding;
146-
var totalBottomBoxesHeight = yPadding;
161+
var totalLeftBoxesWidth = leftPadding;
162+
var totalRightBoxesWidth = rightPadding;
163+
var totalTopBoxesHeight = topPadding;
164+
var totalBottomBoxesHeight = bottomPadding;
147165

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

215233
// Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
216-
totalLeftBoxesWidth = xPadding;
217-
totalRightBoxesWidth = xPadding;
218-
totalTopBoxesHeight = yPadding;
219-
totalBottomBoxesHeight = yPadding;
234+
totalLeftBoxesWidth = leftPadding;
235+
totalRightBoxesWidth = rightPadding;
236+
totalTopBoxesHeight = topPadding;
237+
totalBottomBoxesHeight = bottomPadding;
220238

221239
helpers.each(leftBoxes, function(box) {
222240
totalLeftBoxesWidth += box.width;
@@ -265,13 +283,13 @@ module.exports = function(Chart) {
265283
}
266284

267285
// Step 7 - Position the boxes
268-
var left = xPadding;
269-
var top = yPadding;
286+
var left = leftPadding;
287+
var top = topPadding;
270288

271289
function placeBox(box) {
272290
if (box.isHorizontal()) {
273-
box.left = box.options.fullWidth ? xPadding : totalLeftBoxesWidth;
274-
box.right = box.options.fullWidth ? width - xPadding : totalLeftBoxesWidth + maxChartAreaWidth;
291+
box.left = box.options.fullWidth ? leftPadding : totalLeftBoxesWidth;
292+
box.right = box.options.fullWidth ? width - rightPadding : totalLeftBoxesWidth + maxChartAreaWidth;
275293
box.top = top;
276294
box.bottom = top + box.height;
277295

‎test/core.layoutService.tests.js‎

Lines changed: 149 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
// Tests of the scale service
22
describe('Test the layout service', function() {
3-
it('should fit a simple chart with 2 scales', function() {
3+
// Disable tests which need to be rewritten based on changes introduced by
4+
// the following changes: https://github.com/chartjs/Chart.js/pull/2346
5+
// using xit marks the test as pending: http://jasmine.github.io/2.0/introduction.html#section-Pending_Specs
6+
xit('should fit a simple chart with 2 scales', function() {
47
var chart = window.acquireChart({
58
type: 'bar',
69
data: {
@@ -48,7 +51,7 @@ describe('Test the layout service', function() {
4851
expect(chart.scales.yScale.labelRotation).toBeCloseTo(0);
4952
});
5053

51-
it('should fit scales that are in the top and right positions', function() {
54+
xit('should fit scales that are in the top and right positions', function() {
5255
var chart = window.acquireChart({
5356
type: 'bar',
5457
data: {
@@ -124,7 +127,7 @@ describe('Test the layout service', function() {
124127
expect(chart.scale.height).toBeCloseToPixel(480);
125128
});
126129

127-
it('should fit multiple axes in the same position', function() {
130+
xit('should fit multiple axes in the same position', function() {
128131
var chart = window.acquireChart({
129132
type: 'bar',
130133
data: {
@@ -185,7 +188,7 @@ describe('Test the layout service', function() {
185188
expect(chart.scales.yScale2.labelRotation).toBeCloseTo(0);
186189
});
187190

188-
it ('should fix a full width box correctly', function() {
191+
xit ('should fix a full width box correctly', function() {
189192
var chart = window.acquireChart({
190193
type: 'bar',
191194
data: {
@@ -239,4 +242,146 @@ describe('Test the layout service', function() {
239242
expect(chart.scales.yScale.right).toBeCloseToPixel(45);
240243
expect(chart.scales.yScale.top).toBeCloseToPixel(60);
241244
});
245+
246+
describe('padding settings', function() {
247+
it('should apply a single padding to all dimensions', function() {
248+
var chart = window.acquireChart({
249+
type: 'bar',
250+
data: {
251+
datasets: [
252+
{ data: [10, 5, 0, 25, 78, -10] }
253+
],
254+
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
255+
},
256+
options: {
257+
scales: {
258+
xAxes: [{
259+
id: 'xScale',
260+
type: 'category',
261+
display: false
262+
}],
263+
yAxes: [{
264+
id: 'yScale',
265+
type: 'linear',
266+
display: false
267+
}]
268+
},
269+
legend: {
270+
display: false
271+
},
272+
title: {
273+
display: false
274+
},
275+
layout: {
276+
padding: 10
277+
}
278+
}
279+
}, {
280+
canvas: {
281+
height: 150,
282+
width: 250
283+
}
284+
});
285+
286+
expect(chart.chartArea.bottom).toBeCloseToPixel(140);
287+
expect(chart.chartArea.left).toBeCloseToPixel(10);
288+
expect(chart.chartArea.right).toBeCloseToPixel(240);
289+
expect(chart.chartArea.top).toBeCloseToPixel(10);
290+
});
291+
292+
it('should apply padding in all positions', function() {
293+
var chart = window.acquireChart({
294+
type: 'bar',
295+
data: {
296+
datasets: [
297+
{ data: [10, 5, 0, 25, 78, -10] }
298+
],
299+
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
300+
},
301+
options: {
302+
scales: {
303+
xAxes: [{
304+
id: 'xScale',
305+
type: 'category',
306+
display: false
307+
}],
308+
yAxes: [{
309+
id: 'yScale',
310+
type: 'linear',
311+
display: false
312+
}]
313+
},
314+
legend: {
315+
display: false
316+
},
317+
title: {
318+
display: false
319+
},
320+
layout: {
321+
padding: {
322+
left: 5,
323+
right: 15,
324+
top: 8,
325+
bottom: 12
326+
}
327+
}
328+
}
329+
}, {
330+
canvas: {
331+
height: 150,
332+
width: 250
333+
}
334+
});
335+
336+
expect(chart.chartArea.bottom).toBeCloseToPixel(138);
337+
expect(chart.chartArea.left).toBeCloseToPixel(5);
338+
expect(chart.chartArea.right).toBeCloseToPixel(235);
339+
expect(chart.chartArea.top).toBeCloseToPixel(8);
340+
});
341+
342+
it('should default to 0 padding if no dimensions specified', function() {
343+
var chart = window.acquireChart({
344+
type: 'bar',
345+
data: {
346+
datasets: [
347+
{ data: [10, 5, 0, 25, 78, -10] }
348+
],
349+
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
350+
},
351+
options: {
352+
scales: {
353+
xAxes: [{
354+
id: 'xScale',
355+
type: 'category',
356+
display: false
357+
}],
358+
yAxes: [{
359+
id: 'yScale',
360+
type: 'linear',
361+
display: false
362+
}]
363+
},
364+
legend: {
365+
display: false
366+
},
367+
title: {
368+
display: false
369+
},
370+
layout: {
371+
padding: {}
372+
}
373+
}
374+
}, {
375+
canvas: {
376+
height: 150,
377+
width: 250
378+
}
379+
});
380+
381+
expect(chart.chartArea.bottom).toBeCloseToPixel(150);
382+
expect(chart.chartArea.left).toBeCloseToPixel(0);
383+
expect(chart.chartArea.right).toBeCloseToPixel(250);
384+
expect(chart.chartArea.top).toBeCloseToPixel(0);
385+
});
386+
});
242387
});

0 commit comments

Comments
 (0)