mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-06 00:14:03 +01:00
Refactoring to put browser specific code in a new class (#3718)
Refactoring to put browser specific code in a new class, BrowserPlatform. BrowserPlatform implements IPlatform. Chart.Platform is the constructor for the platform object that is attached to the chart instance. Plugins are notified about the event using the `onEvent` call. The legend plugin was converted to use onEvent instead of the older private `handleEvent` method. Wrote test to check that plugins are notified about events
This commit is contained in:
Evert Timberg
@@ -13,74 +13,6 @@ describe('Chart.Controller', function() {
|
||||
Chart.helpers.addEvent(content, state !== 'complete'? 'load' : 'resize', handler);
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
// 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();
|
||||
expect(chart.chart.canvas).toBe(canvas);
|
||||
expect(chart.chart.ctx).toBe(canvas.getContext('2d'));
|
||||
|
||||
chart.destroy();
|
||||
});
|
||||
|
||||
it('should accept a canvas element', function() {
|
||||
var canvas = document.getElementById(canvasId);
|
||||
var chart = new Chart(canvas);
|
||||
|
||||
expect(chart).toBeValidChart();
|
||||
expect(chart.chart.canvas).toBe(canvas);
|
||||
expect(chart.chart.ctx).toBe(canvas.getContext('2d'));
|
||||
|
||||
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();
|
||||
expect(chart.chart.canvas).toBe(canvas);
|
||||
expect(chart.chart.ctx).toBe(context);
|
||||
|
||||
chart.destroy();
|
||||
});
|
||||
|
||||
it('should accept an array containing canvas', function() {
|
||||
var canvas = document.getElementById(canvasId);
|
||||
var chart = new Chart([canvas]);
|
||||
|
||||
expect(chart).toBeValidChart();
|
||||
expect(chart.chart.canvas).toBe(canvas);
|
||||
expect(chart.chart.ctx).toBe(canvas.getContext('2d'));
|
||||
|
||||
chart.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('config initialization', function() {
|
||||
it('should create missing config.data properties', function() {
|
||||
var chart = acquireChart({});
|
||||
@@ -164,152 +96,7 @@ describe('Chart.Controller', function() {
|
||||
});
|
||||
});
|
||||
|
||||
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() {
|
||||
var chart = acquireChart({
|
||||
type: 'doughnut',
|
||||
options: {
|
||||
responsive: false
|
||||
}
|
||||
}, {
|
||||
canvas: {
|
||||
style: 'width: 425px'
|
||||
}
|
||||
});
|
||||
|
||||
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,
|
||||
});
|
||||
});
|
||||
|
||||
it('should not inject the resizer element', function() {
|
||||
var chart = acquireChart({
|
||||
options: {
|
||||
@@ -563,27 +350,6 @@ describe('Chart.Controller', function() {
|
||||
});
|
||||
|
||||
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,
|
||||
});
|
||||
});
|
||||
|
||||
it('should resize the canvas with correct aspect ratio when parent width changes', function(done) {
|
||||
var chart = acquireChart({
|
||||
type: 'line', // AR == 2
|
||||
@@ -714,69 +480,6 @@ describe('Chart.Controller', function() {
|
||||
});
|
||||
|
||||
describe('controller.destroy', function() {
|
||||
it('should reset context to default values', function() {
|
||||
var chart = acquireChart({});
|
||||
var context = chart.chart.ctx;
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
it('should restore canvas initial values', function(done) {
|
||||
var chart = acquireChart({
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
}, {
|
||||
canvas: {
|
||||
width: 180,
|
||||
style: 'width: 512px; height: 480px'
|
||||
},
|
||||
wrapper: {
|
||||
style: 'width: 450px; height: 450px; position: relative'
|
||||
}
|
||||
});
|
||||
|
||||
var canvas = chart.chart.canvas;
|
||||
var wrapper = canvas.parentNode;
|
||||
wrapper.style.width = '475px';
|
||||
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('');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should remove the resizer element when responsive: true', function() {
|
||||
var chart = acquireChart({
|
||||
options: {
|
||||
|
||||
Reference in New Issue
Block a user