2017-08-27 22:43:16 +02:00
|
|
|
describe('Chart.controllers.bubble', function() {
|
2018-10-20 11:38:48 +02:00
|
|
|
describe('auto', jasmine.fixture.specs('controller.bubble'));
|
2018-07-09 21:14:25 +02:00
|
|
|
|
2018-11-29 21:06:34 +01:00
|
|
|
it('should be registered as dataset controller', function() {
|
|
|
|
expect(typeof Chart.controllers.bubble).toBe('function');
|
|
|
|
});
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
it('should be constructed', function() {
|
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
2016-01-24 16:59:19 +01:00
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
data: []
|
|
|
|
}]
|
|
|
|
}
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
var meta = chart.getDatasetMeta(0);
|
|
|
|
expect(meta.type).toBe('bubble');
|
|
|
|
expect(meta.controller).not.toBe(undefined);
|
|
|
|
expect(meta.controller.index).toBe(0);
|
|
|
|
expect(meta.data).toEqual([]);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
meta.controller.updateIndex(1);
|
|
|
|
expect(meta.controller.index).toBe(1);
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
it('should use the first scale IDs if the dataset does not specify them', function() {
|
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
2016-01-24 16:59:19 +01:00
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
data: []
|
|
|
|
}]
|
|
|
|
},
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
var meta = chart.getDatasetMeta(0);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2019-11-22 00:46:49 +01:00
|
|
|
expect(meta.xAxisID).toBe('x');
|
|
|
|
expect(meta.yAxisID).toBe('y');
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
it('should create point elements for each data item during initialization', function() {
|
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
2016-01-24 16:59:19 +01:00
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
data: [10, 15, 0, -4]
|
|
|
|
}]
|
|
|
|
}
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
var meta = chart.getDatasetMeta(0);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
expect(meta.data.length).toBe(4); // 4 points created
|
2020-10-20 14:18:56 +02:00
|
|
|
expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should draw all elements', function() {
|
2016-04-25 19:59:32 +02:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
2016-01-24 16:59:19 +01:00
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
data: [10, 15, 0, -4]
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
options: {
|
2016-04-25 19:59:32 +02:00
|
|
|
animation: false,
|
2020-10-21 14:13:27 +02:00
|
|
|
showLine: true
|
2016-01-24 16:59:19 +01:00
|
|
|
}
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
var meta = chart.getDatasetMeta(0);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
spyOn(meta.data[0], 'draw');
|
|
|
|
spyOn(meta.data[1], 'draw');
|
|
|
|
spyOn(meta.data[2], 'draw');
|
|
|
|
spyOn(meta.data[3], 'draw');
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
chart.update();
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
expect(meta.data[0].draw.calls.count()).toBe(1);
|
|
|
|
expect(meta.data[1].draw.calls.count()).toBe(1);
|
|
|
|
expect(meta.data[2].draw.calls.count()).toBe(1);
|
|
|
|
expect(meta.data[3].draw.calls.count()).toBe(1);
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
it('should update elements when modifying style', function() {
|
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
data: [{
|
|
|
|
x: 10,
|
|
|
|
y: 10,
|
|
|
|
r: 5
|
|
|
|
}, {
|
|
|
|
x: -15,
|
|
|
|
y: -10,
|
|
|
|
r: 1
|
|
|
|
}, {
|
|
|
|
x: 0,
|
|
|
|
y: -9,
|
|
|
|
r: 2
|
|
|
|
}, {
|
|
|
|
x: -4,
|
|
|
|
y: 10,
|
|
|
|
r: 1
|
|
|
|
}]
|
2016-01-24 16:59:19 +01:00
|
|
|
}],
|
2016-04-25 19:59:32 +02:00
|
|
|
labels: ['label1', 'label2', 'label3', 'label4']
|
2016-01-24 16:59:19 +01:00
|
|
|
},
|
|
|
|
options: {
|
2017-08-27 22:43:16 +02:00
|
|
|
legend: false,
|
|
|
|
title: false,
|
2016-01-24 16:59:19 +01:00
|
|
|
scales: {
|
2019-11-22 00:46:49 +01:00
|
|
|
x: {
|
2017-08-27 22:43:16 +02:00
|
|
|
type: 'category',
|
|
|
|
display: false
|
2019-11-22 00:46:49 +01:00
|
|
|
},
|
|
|
|
y: {
|
2017-08-27 22:43:16 +02:00
|
|
|
type: 'linear',
|
|
|
|
display: false
|
2019-11-22 00:46:49 +01:00
|
|
|
}
|
2016-01-24 16:59:19 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
var meta = chart.getDatasetMeta(0);
|
|
|
|
|
2016-10-16 23:34:59 +02:00
|
|
|
[
|
2017-08-27 22:43:16 +02:00
|
|
|
{r: 5, x: 0, y: 0},
|
|
|
|
{r: 1, x: 171, y: 512},
|
|
|
|
{r: 2, x: 341, y: 486},
|
|
|
|
{r: 1, x: 512, y: 0}
|
2016-04-25 19:59:32 +02:00
|
|
|
].forEach(function(expected, i) {
|
2019-12-27 23:13:24 +01:00
|
|
|
expect(meta.data[i].x).toBeCloseToPixel(expected.x);
|
|
|
|
expect(meta.data[i].y).toBeCloseToPixel(expected.y);
|
|
|
|
expect(meta.data[i].options).toEqual(jasmine.objectContaining({
|
2020-01-03 20:07:38 +01:00
|
|
|
backgroundColor: Chart.defaults.color,
|
|
|
|
borderColor: Chart.defaults.color,
|
2016-04-25 19:59:32 +02:00
|
|
|
borderWidth: 1,
|
|
|
|
hitRadius: 1,
|
2019-12-27 23:13:24 +01:00
|
|
|
radius: expected.r
|
2016-04-25 19:59:32 +02:00
|
|
|
}));
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
// Use dataset level styles for lines & points
|
|
|
|
chart.data.datasets[0].backgroundColor = 'rgb(98, 98, 98)';
|
|
|
|
chart.data.datasets[0].borderColor = 'rgb(8, 8, 8)';
|
|
|
|
chart.data.datasets[0].borderWidth = 0.55;
|
|
|
|
|
|
|
|
// point styles
|
|
|
|
chart.data.datasets[0].radius = 22;
|
|
|
|
chart.data.datasets[0].hitRadius = 3.3;
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
chart.update();
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2017-07-22 14:13:09 +02:00
|
|
|
for (var i = 0; i < 4; ++i) {
|
2019-12-27 23:13:24 +01:00
|
|
|
expect(meta.data[i].options).toEqual(jasmine.objectContaining({
|
2016-04-25 19:59:32 +02:00
|
|
|
backgroundColor: 'rgb(98, 98, 98)',
|
|
|
|
borderColor: 'rgb(8, 8, 8)',
|
|
|
|
borderWidth: 0.55,
|
2019-12-27 23:13:24 +01:00
|
|
|
hitRadius: 3.3
|
2016-04-25 19:59:32 +02:00
|
|
|
}));
|
|
|
|
}
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should handle number of data point changes in update', function() {
|
2016-04-25 19:59:32 +02:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
data: [{
|
|
|
|
x: 10,
|
|
|
|
y: 10,
|
|
|
|
r: 5
|
|
|
|
}, {
|
|
|
|
x: -15,
|
|
|
|
y: -10,
|
|
|
|
r: 1
|
|
|
|
}, {
|
|
|
|
x: 0,
|
|
|
|
y: -9,
|
|
|
|
r: 2
|
|
|
|
}, {
|
|
|
|
x: -4,
|
|
|
|
y: 10,
|
|
|
|
r: 1
|
|
|
|
}]
|
2016-01-24 16:59:19 +01:00
|
|
|
}],
|
2016-04-25 19:59:32 +02:00
|
|
|
labels: ['label1', 'label2', 'label3', 'label4']
|
|
|
|
}
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
var meta = chart.getDatasetMeta(0);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2016-04-25 19:59:32 +02:00
|
|
|
expect(meta.data.length).toBe(4);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
|
|
|
chart.data.datasets[0].data = [{
|
|
|
|
x: 1,
|
|
|
|
y: 1,
|
|
|
|
r: 10
|
|
|
|
}, {
|
|
|
|
x: 10,
|
|
|
|
y: 5,
|
|
|
|
r: 2
|
|
|
|
}]; // remove 2 items
|
2016-04-25 19:59:32 +02:00
|
|
|
|
|
|
|
chart.update();
|
|
|
|
|
|
|
|
expect(meta.data.length).toBe(2);
|
2020-10-20 14:18:56 +02:00
|
|
|
expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
|
2016-01-24 16:59:19 +01:00
|
|
|
|
|
|
|
chart.data.datasets[0].data = [{
|
|
|
|
x: 10,
|
|
|
|
y: 10,
|
|
|
|
r: 5
|
|
|
|
}, {
|
|
|
|
x: -15,
|
|
|
|
y: -10,
|
|
|
|
r: 1
|
|
|
|
}, {
|
|
|
|
x: 0,
|
|
|
|
y: -9,
|
|
|
|
r: 2
|
|
|
|
}, {
|
|
|
|
x: -4,
|
|
|
|
y: 10,
|
|
|
|
r: 1
|
|
|
|
}, {
|
|
|
|
x: -5,
|
|
|
|
y: 0,
|
|
|
|
r: 3
|
|
|
|
}]; // add 3 items
|
2016-04-25 19:59:32 +02:00
|
|
|
|
|
|
|
chart.update();
|
|
|
|
|
|
|
|
expect(meta.data.length).toBe(5);
|
2020-10-20 14:18:56 +02:00
|
|
|
expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true);
|
|
|
|
expect(meta.data[4] instanceof Chart.elements.PointElement).toBe(true);
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
|
|
|
|
2017-08-24 09:34:38 +02:00
|
|
|
describe('Interactions', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.chart = window.acquireChart({
|
|
|
|
type: 'bubble',
|
|
|
|
data: {
|
|
|
|
labels: ['label1', 'label2', 'label3', 'label4'],
|
|
|
|
datasets: [{
|
|
|
|
data: [{
|
|
|
|
x: 5,
|
|
|
|
y: 5,
|
|
|
|
r: 20
|
|
|
|
}, {
|
|
|
|
x: -15,
|
|
|
|
y: -10,
|
|
|
|
r: 15
|
|
|
|
}, {
|
|
|
|
x: 15,
|
|
|
|
y: 10,
|
|
|
|
r: 10
|
|
|
|
}, {
|
|
|
|
x: -15,
|
|
|
|
y: 10,
|
|
|
|
r: 5
|
|
|
|
}]
|
2016-04-25 19:59:32 +02:00
|
|
|
}]
|
2017-08-24 09:34:38 +02:00
|
|
|
},
|
|
|
|
options: {
|
|
|
|
elements: {
|
|
|
|
point: {
|
|
|
|
backgroundColor: 'rgb(100, 150, 200)',
|
|
|
|
borderColor: 'rgb(50, 100, 150)',
|
|
|
|
borderWidth: 2,
|
|
|
|
radius: 3
|
|
|
|
}
|
2016-01-24 16:59:19 +01:00
|
|
|
}
|
|
|
|
}
|
2017-08-24 09:34:38 +02:00
|
|
|
});
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
it ('should handle default hover styles', function(done) {
|
2017-08-24 09:34:38 +02:00
|
|
|
var chart = this.chart;
|
|
|
|
var point = chart.getDatasetMeta(0).data[0];
|
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
afterEvent(chart, 'mousemove', function() {
|
2020-02-08 01:24:29 +01:00
|
|
|
expect(point.options.backgroundColor).toBe('#3187DD');
|
|
|
|
expect(point.options.borderColor).toBe('#175A9D');
|
2020-01-14 13:34:08 +01:00
|
|
|
expect(point.options.borderWidth).toBe(1);
|
|
|
|
expect(point.options.radius).toBe(20 + 4);
|
|
|
|
|
|
|
|
afterEvent(chart, 'mouseout', function() {
|
|
|
|
expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
|
|
|
|
expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
|
|
|
|
expect(point.options.borderWidth).toBe(2);
|
|
|
|
expect(point.options.radius).toBe(20);
|
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
jasmine.triggerMouseEvent(chart, 'mouseout', point);
|
|
|
|
});
|
2017-08-24 09:34:38 +02:00
|
|
|
jasmine.triggerMouseEvent(chart, 'mousemove', point);
|
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
it ('should handle hover styles defined via dataset properties', function(done) {
|
2017-08-24 09:34:38 +02:00
|
|
|
var chart = this.chart;
|
|
|
|
var point = chart.getDatasetMeta(0).data[0];
|
|
|
|
|
|
|
|
Chart.helpers.merge(chart.data.datasets[0], {
|
|
|
|
hoverBackgroundColor: 'rgb(200, 100, 150)',
|
|
|
|
hoverBorderColor: 'rgb(150, 50, 100)',
|
|
|
|
hoverBorderWidth: 8.4,
|
|
|
|
hoverRadius: 4.2
|
|
|
|
});
|
|
|
|
|
|
|
|
chart.update();
|
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
afterEvent(chart, 'mousemove', function() {
|
|
|
|
expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
|
|
|
|
expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
|
|
|
|
expect(point.options.borderWidth).toBe(8.4);
|
|
|
|
expect(point.options.radius).toBe(20 + 4.2);
|
|
|
|
|
|
|
|
afterEvent(chart, 'mouseout', function() {
|
|
|
|
expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
|
|
|
|
expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
|
|
|
|
expect(point.options.borderWidth).toBe(2);
|
|
|
|
expect(point.options.radius).toBe(20);
|
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
jasmine.triggerMouseEvent(chart, 'mouseout', point);
|
|
|
|
|
|
|
|
});
|
2017-08-24 09:34:38 +02:00
|
|
|
jasmine.triggerMouseEvent(chart, 'mousemove', point);
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
it ('should handle hover styles defined via element options', function(done) {
|
2017-08-24 09:34:38 +02:00
|
|
|
var chart = this.chart;
|
|
|
|
var point = chart.getDatasetMeta(0).data[0];
|
|
|
|
|
|
|
|
Chart.helpers.merge(chart.options.elements.point, {
|
|
|
|
hoverBackgroundColor: 'rgb(200, 100, 150)',
|
|
|
|
hoverBorderColor: 'rgb(150, 50, 100)',
|
|
|
|
hoverBorderWidth: 8.4,
|
|
|
|
hoverRadius: 4.2
|
|
|
|
});
|
|
|
|
|
|
|
|
chart.update();
|
|
|
|
|
2020-01-14 13:34:08 +01:00
|
|
|
afterEvent(chart, 'mousemove', function() {
|
|
|
|
expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
|
|
|
|
expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
|
|
|
|
expect(point.options.borderWidth).toBe(8.4);
|
|
|
|
expect(point.options.radius).toBe(20 + 4.2);
|
|
|
|
|
|
|
|
afterEvent(chart, 'mouseout', function() {
|
|
|
|
expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
|
|
|
|
expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
|
|
|
|
expect(point.options.borderWidth).toBe(2);
|
|
|
|
expect(point.options.radius).toBe(20);
|
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
jasmine.triggerMouseEvent(chart, 'mouseout', point);
|
|
|
|
});
|
2017-08-24 09:34:38 +02:00
|
|
|
jasmine.triggerMouseEvent(chart, 'mousemove', point);
|
|
|
|
});
|
2016-01-24 16:59:19 +01:00
|
|
|
});
|
2016-04-25 19:59:32 +02:00
|
|
|
});
|