2016-02-15 00:04:12 +01:00
|
|
|
// Test the rectangle element
|
|
|
|
|
2020-07-12 00:08:45 +02:00
|
|
|
var Title = Chart.registry.getPlugin('title')._element;
|
2019-10-28 12:03:39 +01:00
|
|
|
|
2016-02-15 00:04:12 +01:00
|
|
|
describe('Title block tests', function() {
|
|
|
|
it('Should have the correct default config', function() {
|
2020-07-12 00:08:45 +02:00
|
|
|
expect(Chart.defaults.plugins.title).toEqual({
|
2020-01-05 20:59:57 +01:00
|
|
|
align: 'center',
|
2020-11-19 19:59:24 +01:00
|
|
|
color: Chart.defaults.color,
|
2016-02-15 00:04:12 +01:00
|
|
|
display: false,
|
|
|
|
position: 'top',
|
|
|
|
fullWidth: true,
|
2017-04-23 19:58:11 +02:00
|
|
|
weight: 2000,
|
2020-05-21 23:07:06 +02:00
|
|
|
font: {
|
|
|
|
style: 'bold'
|
|
|
|
},
|
2016-02-15 00:04:12 +01:00
|
|
|
padding: 10,
|
|
|
|
text: ''
|
2016-10-16 23:34:59 +02:00
|
|
|
});
|
2016-02-15 00:04:12 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should update correctly', function() {
|
2020-08-03 18:32:58 +02:00
|
|
|
var chart = {
|
|
|
|
options: Chart.helpers.clone(Chart.defaults)
|
|
|
|
};
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2020-07-12 00:08:45 +02:00
|
|
|
var options = Chart.helpers.clone(Chart.defaults.plugins.title);
|
2016-10-16 23:34:59 +02:00
|
|
|
options.text = 'My title';
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2019-10-28 12:03:39 +01:00
|
|
|
var title = new Title({
|
2016-02-15 00:04:12 +01:00
|
|
|
chart: chart,
|
|
|
|
options: options
|
|
|
|
});
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(400, 200);
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
expect(title.width).toEqual(0);
|
|
|
|
expect(title.height).toEqual(0);
|
2016-02-15 00:04:12 +01:00
|
|
|
|
|
|
|
// Now we have a height since we display
|
|
|
|
title.options.display = true;
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(400, 200);
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
expect(title.width).toEqual(400);
|
|
|
|
expect(title.height).toEqual(34.4);
|
2016-02-15 00:04:12 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should update correctly when vertical', function() {
|
2020-08-03 18:32:58 +02:00
|
|
|
var chart = {
|
|
|
|
options: Chart.helpers.clone(Chart.defaults)
|
|
|
|
};
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2020-07-12 00:08:45 +02:00
|
|
|
var options = Chart.helpers.clone(Chart.defaults.plugins.title);
|
2016-10-16 23:34:59 +02:00
|
|
|
options.text = 'My title';
|
2016-02-15 00:04:12 +01:00
|
|
|
options.position = 'left';
|
|
|
|
|
2019-10-28 12:03:39 +01:00
|
|
|
var title = new Title({
|
2016-02-15 00:04:12 +01:00
|
|
|
chart: chart,
|
|
|
|
options: options
|
|
|
|
});
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(200, 400);
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
expect(title.width).toEqual(0);
|
|
|
|
expect(title.height).toEqual(0);
|
2016-02-15 00:04:12 +01:00
|
|
|
|
|
|
|
// Now we have a height since we display
|
|
|
|
title.options.display = true;
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(200, 400);
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
expect(title.width).toEqual(34.4);
|
|
|
|
expect(title.height).toEqual(400);
|
2016-02-15 00:04:12 +01:00
|
|
|
});
|
|
|
|
|
2017-06-16 00:55:01 +02:00
|
|
|
it('should have the correct size when there are multiple lines of text', function() {
|
2020-08-03 18:32:58 +02:00
|
|
|
var chart = {
|
|
|
|
options: Chart.helpers.clone(Chart.defaults)
|
|
|
|
};
|
2017-06-16 00:55:01 +02:00
|
|
|
|
2020-07-12 00:08:45 +02:00
|
|
|
var options = Chart.helpers.clone(Chart.defaults.plugins.title);
|
2017-06-16 00:55:01 +02:00
|
|
|
options.text = ['line1', 'line2'];
|
|
|
|
options.position = 'left';
|
|
|
|
options.display = true;
|
2020-05-21 23:07:06 +02:00
|
|
|
options.font.lineHeight = 1.5;
|
2017-06-16 00:55:01 +02:00
|
|
|
|
2019-10-28 12:03:39 +01:00
|
|
|
var title = new Title({
|
2017-06-16 00:55:01 +02:00
|
|
|
chart: chart,
|
|
|
|
options: options
|
|
|
|
});
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(200, 400);
|
2017-06-16 00:55:01 +02:00
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
expect(title.width).toEqual(56);
|
|
|
|
expect(title.height).toEqual(400);
|
2017-06-16 00:55:01 +02:00
|
|
|
});
|
|
|
|
|
2016-02-15 00:04:12 +01:00
|
|
|
it('should draw correctly horizontally', function() {
|
2020-08-03 18:32:58 +02:00
|
|
|
var chart = {
|
|
|
|
options: Chart.helpers.clone(Chart.defaults)
|
|
|
|
};
|
2016-02-15 00:04:12 +01:00
|
|
|
var context = window.createMockContext();
|
|
|
|
|
2020-07-12 00:08:45 +02:00
|
|
|
var options = Chart.helpers.clone(Chart.defaults.plugins.title);
|
2016-10-16 23:34:59 +02:00
|
|
|
options.text = 'My title';
|
2016-02-15 00:04:12 +01:00
|
|
|
|
2019-10-28 12:03:39 +01:00
|
|
|
var title = new Title({
|
2016-02-15 00:04:12 +01:00
|
|
|
chart: chart,
|
|
|
|
options: options,
|
|
|
|
ctx: context
|
|
|
|
});
|
|
|
|
|
|
|
|
title.update(400, 200);
|
|
|
|
title.draw();
|
|
|
|
|
|
|
|
expect(context.getCalls()).toEqual([]);
|
|
|
|
|
|
|
|
// Now we have a height since we display
|
|
|
|
title.options.display = true;
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(400, 200);
|
2016-02-15 00:04:12 +01:00
|
|
|
title.top = 50;
|
|
|
|
title.left = 100;
|
2020-01-05 16:42:42 +01:00
|
|
|
title.bottom = title.top + title.height;
|
|
|
|
title.right = title.left + title.width;
|
2016-02-15 00:04:12 +01:00
|
|
|
title.draw();
|
|
|
|
|
|
|
|
expect(context.getCalls()).toEqual([{
|
2016-05-05 03:08:59 +02:00
|
|
|
name: 'save',
|
|
|
|
args: []
|
2020-02-23 19:08:01 +01:00
|
|
|
}, {
|
|
|
|
name: 'setFillStyle',
|
|
|
|
args: ['#666']
|
2016-05-05 03:08:59 +02:00
|
|
|
}, {
|
|
|
|
name: 'translate',
|
2017-07-20 19:20:54 +02:00
|
|
|
args: [300, 67.2]
|
2016-05-05 03:08:59 +02:00
|
|
|
}, {
|
|
|
|
name: 'rotate',
|
|
|
|
args: [0]
|
2019-04-02 10:25:37 +02:00
|
|
|
}, {
|
|
|
|
name: 'setTextAlign',
|
|
|
|
args: ['center'],
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'fillText',
|
2016-09-23 23:36:58 +02:00
|
|
|
args: ['My title', 0, 0, 400]
|
2016-05-05 03:08:59 +02:00
|
|
|
}, {
|
|
|
|
name: 'restore',
|
|
|
|
args: []
|
2016-02-15 00:04:12 +01:00
|
|
|
}]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it ('should draw correctly vertically', function() {
|
2020-08-03 18:32:58 +02:00
|
|
|
var chart = {
|
|
|
|
options: Chart.helpers.clone(Chart.defaults)
|
|
|
|
};
|
2016-02-15 00:04:12 +01:00
|
|
|
var context = window.createMockContext();
|
|
|
|
|
2020-07-12 00:08:45 +02:00
|
|
|
var options = Chart.helpers.clone(Chart.defaults.plugins.title);
|
2016-10-16 23:34:59 +02:00
|
|
|
options.text = 'My title';
|
2016-02-15 00:04:12 +01:00
|
|
|
options.position = 'left';
|
|
|
|
|
2019-10-28 12:03:39 +01:00
|
|
|
var title = new Title({
|
2016-02-15 00:04:12 +01:00
|
|
|
chart: chart,
|
|
|
|
options: options,
|
|
|
|
ctx: context
|
|
|
|
});
|
|
|
|
|
|
|
|
title.update(200, 400);
|
|
|
|
title.draw();
|
|
|
|
|
|
|
|
expect(context.getCalls()).toEqual([]);
|
|
|
|
|
|
|
|
// Now we have a height since we display
|
|
|
|
title.options.display = true;
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(200, 400);
|
2016-02-15 00:04:12 +01:00
|
|
|
title.top = 50;
|
|
|
|
title.left = 100;
|
2020-01-05 16:42:42 +01:00
|
|
|
title.bottom = title.top + title.height;
|
|
|
|
title.right = title.left + title.width;
|
2016-02-15 00:04:12 +01:00
|
|
|
title.draw();
|
|
|
|
|
|
|
|
expect(context.getCalls()).toEqual([{
|
|
|
|
name: 'save',
|
|
|
|
args: []
|
2020-02-23 19:08:01 +01:00
|
|
|
}, {
|
|
|
|
name: 'setFillStyle',
|
|
|
|
args: ['#666']
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'translate',
|
2017-07-20 19:20:54 +02:00
|
|
|
args: [117.2, 250]
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'rotate',
|
|
|
|
args: [-0.5 * Math.PI]
|
2019-04-02 10:25:37 +02:00
|
|
|
}, {
|
|
|
|
name: 'setTextAlign',
|
|
|
|
args: ['center'],
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'fillText',
|
2016-09-23 23:36:58 +02:00
|
|
|
args: ['My title', 0, 0, 400]
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'restore',
|
|
|
|
args: []
|
|
|
|
}]);
|
|
|
|
|
|
|
|
// Rotation is other way on right side
|
|
|
|
title.options.position = 'right';
|
|
|
|
|
|
|
|
// Reset call tracker
|
|
|
|
context.resetCalls();
|
|
|
|
|
2020-01-05 16:42:42 +01:00
|
|
|
title.update(200, 400);
|
2016-02-15 00:04:12 +01:00
|
|
|
title.top = 50;
|
|
|
|
title.left = 100;
|
2020-01-05 16:42:42 +01:00
|
|
|
title.bottom = title.top + title.height;
|
|
|
|
title.right = title.left + title.width;
|
2016-02-15 00:04:12 +01:00
|
|
|
title.draw();
|
|
|
|
|
|
|
|
expect(context.getCalls()).toEqual([{
|
|
|
|
name: 'save',
|
|
|
|
args: []
|
2020-02-23 19:08:01 +01:00
|
|
|
}, {
|
|
|
|
name: 'setFillStyle',
|
|
|
|
args: ['#666']
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'translate',
|
2017-07-20 19:20:54 +02:00
|
|
|
args: [117.2, 250]
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'rotate',
|
|
|
|
args: [0.5 * Math.PI]
|
2019-04-02 10:25:37 +02:00
|
|
|
}, {
|
|
|
|
name: 'setTextAlign',
|
|
|
|
args: ['center'],
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'fillText',
|
2016-09-23 23:36:58 +02:00
|
|
|
args: ['My title', 0, 0, 400]
|
2016-02-15 00:04:12 +01:00
|
|
|
}, {
|
|
|
|
name: 'restore',
|
|
|
|
args: []
|
|
|
|
}]);
|
|
|
|
});
|
2016-11-13 04:38:25 +01:00
|
|
|
|
|
|
|
describe('config update', function() {
|
|
|
|
it ('should update the options', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
labels: ['A', 'B', 'C', 'D'],
|
|
|
|
datasets: [{
|
|
|
|
data: [10, 20, 30, 100]
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
options: {
|
|
|
|
title: {
|
|
|
|
display: true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
expect(chart.titleBlock.options.display).toBe(true);
|
|
|
|
|
|
|
|
chart.options.title.display = false;
|
|
|
|
chart.update();
|
|
|
|
expect(chart.titleBlock.options.display).toBe(false);
|
|
|
|
});
|
|
|
|
|
2017-04-23 19:58:11 +02:00
|
|
|
it ('should update the associated layout item', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {},
|
|
|
|
options: {
|
|
|
|
title: {
|
|
|
|
fullWidth: true,
|
|
|
|
position: 'top',
|
|
|
|
weight: 150
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart.titleBlock.fullWidth).toBe(true);
|
|
|
|
expect(chart.titleBlock.position).toBe('top');
|
|
|
|
expect(chart.titleBlock.weight).toBe(150);
|
|
|
|
|
|
|
|
chart.options.title.fullWidth = false;
|
|
|
|
chart.options.title.position = 'left';
|
|
|
|
chart.options.title.weight = 42;
|
|
|
|
chart.update();
|
|
|
|
|
|
|
|
expect(chart.titleBlock.fullWidth).toBe(false);
|
|
|
|
expect(chart.titleBlock.position).toBe('left');
|
|
|
|
expect(chart.titleBlock.weight).toBe(42);
|
|
|
|
});
|
|
|
|
|
2016-11-13 04:38:25 +01:00
|
|
|
it ('should remove the title if the new options are false', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
labels: ['A', 'B', 'C', 'D'],
|
|
|
|
datasets: [{
|
|
|
|
data: [10, 20, 30, 100]
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
});
|
|
|
|
expect(chart.titleBlock).not.toBe(undefined);
|
|
|
|
|
|
|
|
chart.options.title = false;
|
|
|
|
chart.update();
|
|
|
|
expect(chart.titleBlock).toBe(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
it ('should create the title if the title options are changed to exist', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
labels: ['A', 'B', 'C', 'D'],
|
|
|
|
datasets: [{
|
|
|
|
data: [10, 20, 30, 100]
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
options: {
|
|
|
|
title: false
|
|
|
|
}
|
|
|
|
});
|
|
|
|
expect(chart.titleBlock).toBe(undefined);
|
|
|
|
|
|
|
|
chart.options.title = {};
|
|
|
|
chart.update();
|
|
|
|
expect(chart.titleBlock).not.toBe(undefined);
|
2020-07-12 00:08:45 +02:00
|
|
|
expect(chart.titleBlock.options).toEqual(jasmine.objectContaining(Chart.defaults.plugins.title));
|
2016-11-13 04:38:25 +01:00
|
|
|
});
|
|
|
|
});
|
2016-09-23 23:36:58 +02:00
|
|
|
});
|