2020-08-14 15:15:18 +02:00
|
|
|
const DomPlatform = Chart.platforms.DomPlatform;
|
2020-05-20 23:45:44 +02:00
|
|
|
|
2016-12-21 16:22:05 +01:00
|
|
|
describe('Platform.dom', function() {
|
|
|
|
|
|
|
|
describe('context acquisition', function() {
|
|
|
|
var canvasId = 'chartjs-canvas';
|
|
|
|
|
|
|
|
beforeEach(function() {
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
canvas.setAttribute('id', canvasId);
|
|
|
|
window.document.body.appendChild(canvas);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(function() {
|
|
|
|
document.getElementById(canvasId).remove();
|
|
|
|
});
|
|
|
|
|
2020-03-06 18:17:12 +01:00
|
|
|
it('should use the DomPlatform by default', function() {
|
|
|
|
var chart = acquireChart({type: 'line'});
|
|
|
|
|
|
|
|
expect(chart.platform).toBeInstanceOf(Chart.platforms.DomPlatform);
|
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
});
|
|
|
|
|
2016-12-21 16:22:05 +01:00
|
|
|
// see https://github.com/chartjs/Chart.js/issues/2807
|
|
|
|
it('should gracefully handle invalid item', function() {
|
|
|
|
var chart = new Chart('foobar');
|
|
|
|
|
|
|
|
expect(chart).not.toBeValidChart();
|
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should accept a DOM element id', function() {
|
|
|
|
var canvas = document.getElementById(canvasId);
|
|
|
|
var chart = new Chart(canvasId);
|
|
|
|
|
|
|
|
expect(chart).toBeValidChart();
|
2017-01-28 12:50:29 +01:00
|
|
|
expect(chart.canvas).toBe(canvas);
|
|
|
|
expect(chart.ctx).toBe(canvas.getContext('2d'));
|
2016-12-21 16:22:05 +01:00
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should accept a canvas element', function() {
|
|
|
|
var canvas = document.getElementById(canvasId);
|
|
|
|
var chart = new Chart(canvas);
|
|
|
|
|
|
|
|
expect(chart).toBeValidChart();
|
2017-01-28 12:50:29 +01:00
|
|
|
expect(chart.canvas).toBe(canvas);
|
|
|
|
expect(chart.ctx).toBe(canvas.getContext('2d'));
|
2016-12-21 16:22:05 +01:00
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should accept a canvas context2D', function() {
|
|
|
|
var canvas = document.getElementById(canvasId);
|
|
|
|
var context = canvas.getContext('2d');
|
|
|
|
var chart = new Chart(context);
|
|
|
|
|
|
|
|
expect(chart).toBeValidChart();
|
2017-01-28 12:50:29 +01:00
|
|
|
expect(chart.canvas).toBe(canvas);
|
|
|
|
expect(chart.ctx).toBe(context);
|
2016-12-21 16:22:05 +01:00
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should accept an array containing canvas', function() {
|
|
|
|
var canvas = document.getElementById(canvasId);
|
|
|
|
var chart = new Chart([canvas]);
|
|
|
|
|
|
|
|
expect(chart).toBeValidChart();
|
2017-01-28 12:50:29 +01:00
|
|
|
expect(chart.canvas).toBe(canvas);
|
|
|
|
expect(chart.ctx).toBe(canvas.getContext('2d'));
|
2016-12-21 16:22:05 +01:00
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
});
|
2017-04-22 09:49:10 +02:00
|
|
|
|
|
|
|
it('should accept a canvas from an iframe', function(done) {
|
|
|
|
var iframe = document.createElement('iframe');
|
|
|
|
iframe.onload = function() {
|
|
|
|
var doc = iframe.contentDocument;
|
|
|
|
doc.body.innerHTML += '<canvas id="chart"></canvas>';
|
|
|
|
var canvas = doc.getElementById('chart');
|
|
|
|
var chart = new Chart(canvas);
|
|
|
|
|
|
|
|
expect(chart).toBeValidChart();
|
|
|
|
expect(chart.canvas).toBe(canvas);
|
|
|
|
expect(chart.ctx).toBe(canvas.getContext('2d'));
|
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
canvas.remove();
|
|
|
|
iframe.remove();
|
|
|
|
|
|
|
|
done();
|
|
|
|
};
|
|
|
|
|
|
|
|
document.body.appendChild(iframe);
|
|
|
|
});
|
2016-12-21 16:22:05 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('config.options.aspectRatio', function() {
|
|
|
|
it('should use default "global" aspect ratio for render and display sizes', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 620px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 620, dh: 310,
|
|
|
|
rw: 620, rh: 310,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should use default "chart" aspect ratio for render and display sizes', function() {
|
2020-10-30 23:34:32 +01:00
|
|
|
var ratio = Chart.defaults.controllers.doughnut.aspectRatio;
|
|
|
|
Chart.defaults.controllers.doughnut.aspectRatio = 1;
|
2017-03-26 04:44:26 +02:00
|
|
|
|
2016-12-21 16:22:05 +01:00
|
|
|
var chart = acquireChart({
|
|
|
|
type: 'doughnut',
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 425px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2020-10-30 23:34:32 +01:00
|
|
|
Chart.defaults.controllers.doughnut.aspectRatio = ratio;
|
2017-03-26 04:44:26 +02:00
|
|
|
|
2016-12-21 16:22:05 +01:00
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 425, dh: 425,
|
|
|
|
rw: 425, rh: 425,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should use "user" aspect ratio for render and display sizes', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false,
|
|
|
|
aspectRatio: 3
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 405px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 405, dh: 135,
|
|
|
|
rw: 405, rh: 135,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not apply aspect ratio when height specified', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false,
|
|
|
|
aspectRatio: 3
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 400px; height: 410px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 400, dh: 410,
|
|
|
|
rw: 400, rh: 410,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('config.options.responsive: false', function() {
|
|
|
|
it('should use default canvas size for render and display sizes', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: ''
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 300, dh: 150,
|
|
|
|
rw: 300, rh: 150,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should use canvas attributes for render and display sizes', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: '',
|
|
|
|
width: 305,
|
|
|
|
height: 245,
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 305, dh: 245,
|
|
|
|
rw: 305, rh: 245,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should use canvas style for render and display sizes (if no attributes)', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 345px; height: 125px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 345, dh: 125,
|
|
|
|
rw: 345, rh: 125,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should use attributes for the render size and style for the display size', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 345px; height: 125px;',
|
|
|
|
width: 165,
|
|
|
|
height: 85,
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 345, dh: 125,
|
|
|
|
rw: 165, rh: 85,
|
|
|
|
});
|
|
|
|
});
|
2017-03-18 11:54:56 +01:00
|
|
|
|
|
|
|
// https://github.com/chartjs/Chart.js/issues/3860
|
|
|
|
it('should support decimal display width and/or height', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: false
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 345.42px; height: 125.42px;'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 345, dh: 125,
|
|
|
|
rw: 345, rh: 125,
|
|
|
|
});
|
|
|
|
});
|
2016-12-21 16:22:05 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('config.options.responsive: true (maintainAspectRatio: true)', function() {
|
|
|
|
it('should fill parent width and use aspect ratio to calculate height', function() {
|
|
|
|
var chart = acquireChart({
|
|
|
|
options: {
|
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: true
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
canvas: {
|
|
|
|
style: 'width: 150px; height: 245px'
|
|
|
|
},
|
|
|
|
wrapper: {
|
|
|
|
style: 'width: 300px; height: 350px'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 300, dh: 490,
|
|
|
|
rw: 300, rh: 490,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('controller.destroy', function() {
|
|
|
|
it('should reset context to default values', function() {
|
2020-01-14 01:35:44 +01:00
|
|
|
var wrapper = document.createElement('div');
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
wrapper.appendChild(canvas);
|
|
|
|
window.document.body.appendChild(wrapper);
|
|
|
|
var chart = new Chart(canvas, {});
|
2017-01-28 12:50:29 +01:00
|
|
|
var context = chart.ctx;
|
2016-12-21 16:22:05 +01:00
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
|
|
|
|
// https://www.w3.org/TR/2dcontext/#conformance-requirements
|
|
|
|
Chart.helpers.each({
|
|
|
|
fillStyle: '#000000',
|
|
|
|
font: '10px sans-serif',
|
|
|
|
lineJoin: 'miter',
|
|
|
|
lineCap: 'butt',
|
|
|
|
lineWidth: 1,
|
|
|
|
miterLimit: 10,
|
|
|
|
shadowBlur: 0,
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
shadowOffsetY: 0,
|
|
|
|
strokeStyle: '#000000',
|
|
|
|
textAlign: 'start',
|
|
|
|
textBaseline: 'alphabetic'
|
|
|
|
}, function(value, key) {
|
|
|
|
expect(context[key]).toBe(value);
|
|
|
|
});
|
2020-01-14 01:35:44 +01:00
|
|
|
|
|
|
|
wrapper.parentNode.removeChild(wrapper);
|
2016-12-21 16:22:05 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should restore canvas initial values', function(done) {
|
2020-01-14 01:35:44 +01:00
|
|
|
var wrapper = document.createElement('div');
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
|
|
|
|
canvas.setAttribute('width', 180);
|
|
|
|
canvas.setAttribute('style', 'width: 512px; height: 480px');
|
|
|
|
wrapper.setAttribute('style', 'width: 450px; height: 450px; position: relative');
|
|
|
|
|
|
|
|
wrapper.appendChild(canvas);
|
|
|
|
window.document.body.appendChild(wrapper);
|
|
|
|
|
|
|
|
var chart = new Chart(canvas.getContext('2d'), {
|
2016-12-21 16:22:05 +01:00
|
|
|
options: {
|
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: false
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
waitForResize(chart, function() {
|
|
|
|
expect(chart).toBeChartOfSize({
|
|
|
|
dw: 475, dh: 450,
|
|
|
|
rw: 475, rh: 450,
|
|
|
|
});
|
|
|
|
|
|
|
|
chart.destroy();
|
|
|
|
|
|
|
|
expect(canvas.getAttribute('width')).toBe('180');
|
|
|
|
expect(canvas.getAttribute('height')).toBe(null);
|
|
|
|
expect(canvas.style.width).toBe('512px');
|
|
|
|
expect(canvas.style.height).toBe('480px');
|
|
|
|
expect(canvas.style.display).toBe('');
|
|
|
|
|
2020-01-14 01:35:44 +01:00
|
|
|
wrapper.parentNode.removeChild(wrapper);
|
2016-12-21 16:22:05 +01:00
|
|
|
done();
|
|
|
|
});
|
2020-01-14 01:35:44 +01:00
|
|
|
wrapper.style.width = '475px';
|
2016-12-21 16:22:05 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('event handling', function() {
|
2020-01-14 13:34:08 +01:00
|
|
|
it('should notify plugins about events', function(done) {
|
2016-12-21 16:22:05 +01:00
|
|
|
var notifiedEvent;
|
|
|
|
var plugin = {
|
2020-11-28 08:45:43 +01:00
|
|
|
afterEvent: function(chart, args) {
|
|
|
|
notifiedEvent = args.event;
|
2016-12-21 16:22:05 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
var chart = acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
labels: ['A', 'B', 'C', 'D'],
|
|
|
|
datasets: [{
|
|
|
|
data: [10, 20, 30, 100]
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
options: {
|
|
|
|
responsive: true
|
|
|
|
},
|
|
|
|
plugins: [plugin]
|
|
|
|
});
|
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
afterEvent(chart, 'click', function() {
|
|
|
|
// Check that notifiedEvent is correct
|
|
|
|
expect(notifiedEvent).not.toBe(undefined);
|
2016-12-21 16:22:05 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
// Is type correctly translated
|
|
|
|
expect(notifiedEvent.type).toBe('click');
|
2016-12-21 16:22:05 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
// Relative Position
|
|
|
|
expect(notifiedEvent.x).toBeCloseToPixel(chart.width / 2);
|
|
|
|
expect(notifiedEvent.y).toBeCloseToPixel(chart.height / 2);
|
2016-12-21 16:22:05 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
done();
|
|
|
|
});
|
2016-12-21 16:22:05 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
jasmine.triggerMouseEvent(chart, 'click', {
|
|
|
|
x: chart.width / 2,
|
|
|
|
y: chart.height / 2
|
|
|
|
});
|
2016-12-21 16:22:05 +01:00
|
|
|
});
|
|
|
|
});
|
2020-05-20 23:45:44 +02:00
|
|
|
|
|
|
|
describe('isAttached', function() {
|
|
|
|
it('should detect detached when canvas is attached to DOM', function() {
|
|
|
|
var platform = new DomPlatform();
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
var div = document.createElement('div');
|
|
|
|
|
|
|
|
expect(platform.isAttached(canvas)).toEqual(false);
|
|
|
|
div.appendChild(canvas);
|
|
|
|
expect(platform.isAttached(canvas)).toEqual(false);
|
|
|
|
document.body.appendChild(div);
|
|
|
|
|
|
|
|
expect(platform.isAttached(canvas)).toEqual(true);
|
|
|
|
|
|
|
|
div.removeChild(canvas);
|
|
|
|
expect(platform.isAttached(canvas)).toEqual(false);
|
|
|
|
document.body.removeChild(div);
|
|
|
|
expect(platform.isAttached(canvas)).toEqual(false);
|
|
|
|
});
|
|
|
|
});
|
2016-12-21 16:22:05 +01:00
|
|
|
});
|