mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Fix radar tests & reenable. support new lineTension attribute like line controller
This commit is contained in:
Evert Timberg
parent
40405ebc80
commit
405fda6655
@ -45,7 +45,6 @@ var testFiles = [
|
||||
// Disable tests which need to be rewritten based on changes introduced by
|
||||
// the following changes: https://github.com/chartjs/Chart.js/pull/2346
|
||||
'!./test/controller.line.tests.js',
|
||||
'!./test/controller.radar.tests.js',
|
||||
'!./test/core.layoutService.tests.js',
|
||||
'!./test/defaultConfig.tests.js',
|
||||
'!./test/scale.linear.tests.js',
|
||||
|
||||
@ -74,6 +74,12 @@ module.exports = function(Chart) {
|
||||
scaleBase = scale.getPointPositionForValue(0, 0);
|
||||
}
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
|
||||
{
|
||||
this.getDataset().lineTension = this.getDataset().tension;
|
||||
}
|
||||
|
||||
helpers.extend(meta.dataset, {
|
||||
// Utility
|
||||
_datasetIndex: this.index,
|
||||
@ -82,7 +88,7 @@ module.exports = function(Chart) {
|
||||
// Model
|
||||
_model: {
|
||||
// Appearance
|
||||
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
|
||||
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
|
||||
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
|
||||
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
|
||||
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
|
||||
|
||||
@ -1,119 +1,92 @@
|
||||
// Test the polar area controller
|
||||
describe('Radar controller tests', function() {
|
||||
beforeEach(function() {
|
||||
window.addDefaultMatchers(jasmine);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
window.releaseAllCharts();
|
||||
});
|
||||
|
||||
it('Should be constructed', function() {
|
||||
var chart = {
|
||||
var chart = window.acquireChart({
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: []
|
||||
}]
|
||||
}],
|
||||
labels: []
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
expect(controller).not.toBe(undefined);
|
||||
expect(controller.index).toBe(0);
|
||||
expect(chart.data.datasets[0].metaData).toEqual([]);
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
expect(meta.type).toBe('radar');
|
||||
expect(meta.controller).not.toBe(undefined);
|
||||
expect(meta.controller.index).toBe(0);
|
||||
expect(meta.data).toEqual([]);
|
||||
|
||||
controller.updateIndex(1);
|
||||
expect(controller.index).toBe(1);
|
||||
meta.controller.updateIndex(1);
|
||||
expect(meta.controller.index).toBe(1);
|
||||
});
|
||||
|
||||
it('Should create arc elements for each data item during initialization', function() {
|
||||
var chart = {
|
||||
var chart = window.acquireChart({
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, -4]
|
||||
data: [10, 15, 0, 4]
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
},
|
||||
config: {
|
||||
type: 'radar'
|
||||
},
|
||||
options: {
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
|
||||
// Line element
|
||||
expect(chart.data.datasets[0].metaDataset instanceof Chart.elements.Line).toBe(true);
|
||||
|
||||
expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 points created
|
||||
expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // line element
|
||||
expect(meta.data.length).toBe(4); // 4 points created
|
||||
expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
|
||||
});
|
||||
|
||||
it('should draw all elements', function() {
|
||||
var chart = {
|
||||
var chart = window.acquireChart({
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, -4]
|
||||
}]
|
||||
},
|
||||
config: {
|
||||
type: 'radar'
|
||||
},
|
||||
options: {
|
||||
data: [10, 15, 0, 4]
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
|
||||
spyOn(chart.data.datasets[0].metaDataset, 'draw');
|
||||
spyOn(chart.data.datasets[0].metaData[0], 'draw');
|
||||
spyOn(chart.data.datasets[0].metaData[1], 'draw');
|
||||
spyOn(chart.data.datasets[0].metaData[2], 'draw');
|
||||
spyOn(chart.data.datasets[0].metaData[3], 'draw');
|
||||
spyOn(meta.dataset, 'draw');
|
||||
spyOn(meta.data[0], 'draw');
|
||||
spyOn(meta.data[1], 'draw');
|
||||
spyOn(meta.data[2], 'draw');
|
||||
spyOn(meta.data[3], 'draw');
|
||||
|
||||
controller.draw();
|
||||
chart.update();
|
||||
|
||||
expect(chart.data.datasets[0].metaDataset.draw.calls.count()).toBe(1);
|
||||
expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
|
||||
expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1);
|
||||
expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
|
||||
expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
|
||||
expect(meta.dataset.draw.calls.count()).toBe(1);
|
||||
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);
|
||||
});
|
||||
|
||||
it('should update elements', function() {
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, -4],
|
||||
label: 'dataset2'
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
};
|
||||
var mockContext = window.createMockContext();
|
||||
|
||||
var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
|
||||
var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
|
||||
scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
|
||||
var scale = new ScaleConstructor({
|
||||
ctx: mockContext,
|
||||
options: scaleConfig,
|
||||
chart: {
|
||||
data: data
|
||||
},
|
||||
});
|
||||
|
||||
// Update ticks & set physical dimensions
|
||||
scale.top = 0;
|
||||
scale.left = 0;
|
||||
scale.right = 300;
|
||||
scale.bottom = 300;
|
||||
scale.update(300, 300);
|
||||
|
||||
var chart = {
|
||||
chartArea: {
|
||||
bottom: 300,
|
||||
left: 0,
|
||||
right: 300,
|
||||
top: 0
|
||||
},
|
||||
data: data,
|
||||
config: {
|
||||
type: 'radar'
|
||||
var chart = window.acquireChart({
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, 4]
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
},
|
||||
options: {
|
||||
showLines: true,
|
||||
@ -140,15 +113,19 @@ describe('Radar controller tests', function() {
|
||||
pointStyle: 'circle'
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: scale
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
controller.update();
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
|
||||
meta.controller.reset(); // reset first
|
||||
|
||||
// Line element
|
||||
expect(chart.data.datasets[0].metaDataset._model).toEqual({
|
||||
expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32);
|
||||
expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512);
|
||||
expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256);
|
||||
expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272);
|
||||
expect(meta.dataset._model).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: 'rgb(255, 0, 0)',
|
||||
borderCapStyle: 'round',
|
||||
borderColor: 'rgb(0, 255, 0)',
|
||||
@ -158,97 +135,57 @@ describe('Radar controller tests', function() {
|
||||
borderWidth: 1.2,
|
||||
fill: true,
|
||||
tension: 0.1,
|
||||
}));
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 300,
|
||||
scaleZero: {
|
||||
x: 150,
|
||||
y: 133
|
||||
},
|
||||
[
|
||||
{ x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
|
||||
{ x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
|
||||
{ x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
|
||||
{ x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
|
||||
].forEach(function(expected, i) {
|
||||
expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
|
||||
expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
|
||||
expect(meta.data[i]._model.controlPointPreviousX).toBeCloseToPixel(expected.cppx);
|
||||
expect(meta.data[i]._model.controlPointPreviousY).toBeCloseToPixel(expected.cppy);
|
||||
expect(meta.data[i]._model.controlPointNextX).toBeCloseToPixel(expected.cpnx);
|
||||
expect(meta.data[i]._model.controlPointNextY).toBeCloseToPixel(expected.cpny);
|
||||
expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
}));
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 91,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 146.99829997808834,
|
||||
controlPointPreviousY: 91,
|
||||
controlPointNextX: 155.09829997808833,
|
||||
controlPointNextY: 91,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
|
||||
// Point
|
||||
x: 231,
|
||||
y: 150,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 231,
|
||||
controlPointPreviousY: 145.8377025234528,
|
||||
controlPointNextX: 231,
|
||||
controlPointNextY: 153.4377025234528,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[2]._model).toEqual({
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 167,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 156.7197526476963,
|
||||
controlPointPreviousY: 167,
|
||||
controlPointNextX: 148.61975264769632,
|
||||
controlPointNextY: 167,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[3]._model).toEqual({
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 150,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 150,
|
||||
controlPointPreviousY: 151.7,
|
||||
controlPointNextX: 150,
|
||||
controlPointNextY: 144.1,
|
||||
// Now update controller and ensure proper updates
|
||||
meta.controller.update();
|
||||
|
||||
[
|
||||
{ x: 256, y: 133, cppx: 246, cppy: 133, cpnx: 272, cpny: 133 },
|
||||
{ x: 464, y: 272, cppx: 464, cppy: 264, cpnx: 464, cpny: 278 },
|
||||
{ x: 256, y: 272, cppx: 276.9, cppy: 272, cpnx: 250.4, cpny: 272 },
|
||||
{ x: 200, y: 272, cppx: 200, cppy: 275, cpnx: 200, cpny: 261 },
|
||||
].forEach(function(expected, i) {
|
||||
expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
|
||||
expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
|
||||
expect(meta.data[i]._model.controlPointPreviousX).toBeCloseToPixel(expected.cppx);
|
||||
expect(meta.data[i]._model.controlPointPreviousY).toBeCloseToPixel(expected.cppy);
|
||||
expect(meta.data[i]._model.controlPointNextX).toBeCloseToPixel(expected.cpnx);
|
||||
expect(meta.data[i]._model.controlPointNextY).toBeCloseToPixel(expected.cpny);
|
||||
expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
}));
|
||||
});
|
||||
|
||||
// Use dataset level styles for lines & points
|
||||
@ -269,9 +206,13 @@ describe('Radar controller tests', function() {
|
||||
chart.data.datasets[0].pointBorderColor = 'rgb(56, 57, 58)';
|
||||
chart.data.datasets[0].pointBorderWidth = 1.123;
|
||||
|
||||
controller.update();
|
||||
meta.controller.update();
|
||||
|
||||
expect(chart.data.datasets[0].metaDataset._model).toEqual({
|
||||
expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32);
|
||||
expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512);
|
||||
expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256);
|
||||
expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272);
|
||||
expect(meta.dataset._model).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: 'rgb(98, 98, 98)',
|
||||
borderCapStyle: 'butt',
|
||||
borderColor: 'rgb(8, 8, 8)',
|
||||
@ -281,101 +222,32 @@ describe('Radar controller tests', function() {
|
||||
borderWidth: 0.55,
|
||||
fill: false,
|
||||
tension: 0,
|
||||
}));
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 300,
|
||||
scaleZero: {
|
||||
x: 150,
|
||||
y: 133
|
||||
}
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderWidth: 1.123,
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
hitRadius: 3.3,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 91,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 150,
|
||||
controlPointPreviousY: 91,
|
||||
controlPointNextX: 150,
|
||||
controlPointNextY: 91,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderWidth: 1.123,
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
hitRadius: 3.3,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
|
||||
// Point
|
||||
x: 231,
|
||||
y: 150,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 231,
|
||||
controlPointPreviousY: 150,
|
||||
controlPointNextX: 231,
|
||||
controlPointNextY: 150,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[2]._model).toEqual({
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderWidth: 1.123,
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
hitRadius: 3.3,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 167,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 150,
|
||||
controlPointPreviousY: 167,
|
||||
controlPointNextX: 150,
|
||||
controlPointNextY: 167,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[3]._model).toEqual({
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderWidth: 1.123,
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
hitRadius: 3.3,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 150,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 150,
|
||||
controlPointPreviousY: 150,
|
||||
controlPointNextX: 150,
|
||||
controlPointNextY: 150,
|
||||
// Since tension is now 0, we don't care about the control points
|
||||
[
|
||||
{ x: 256, y: 133 },
|
||||
{ x: 464, y: 272 },
|
||||
{ x: 256, y: 272 },
|
||||
{ x: 200, y: 272 },
|
||||
].forEach(function(expected, i) {
|
||||
expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
|
||||
expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
|
||||
expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderWidth: 1.123,
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
hitRadius: 3.3,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
}));
|
||||
});
|
||||
|
||||
|
||||
// Use custom styles for lines & first point
|
||||
chart.data.datasets[0].metaDataset.custom = {
|
||||
meta.dataset.custom = {
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgb(55, 55, 54)',
|
||||
borderColor: 'rgb(8, 7, 6)',
|
||||
@ -388,7 +260,7 @@ describe('Radar controller tests', function() {
|
||||
};
|
||||
|
||||
// point styles
|
||||
chart.data.datasets[0].metaData[0].custom = {
|
||||
meta.data[0].custom = {
|
||||
radius: 2.2,
|
||||
backgroundColor: 'rgb(0, 1, 3)',
|
||||
borderColor: 'rgb(4, 6, 8)',
|
||||
@ -398,9 +270,13 @@ describe('Radar controller tests', function() {
|
||||
hitRadius: 5,
|
||||
};
|
||||
|
||||
controller.update();
|
||||
meta.controller.update();
|
||||
|
||||
expect(chart.data.datasets[0].metaDataset._model).toEqual({
|
||||
expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32);
|
||||
expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512);
|
||||
expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256);
|
||||
expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272);
|
||||
expect(meta.dataset._model).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: 'rgb(55, 55, 54)',
|
||||
borderCapStyle: 'square',
|
||||
borderColor: 'rgb(8, 7, 6)',
|
||||
@ -410,166 +286,36 @@ describe('Radar controller tests', function() {
|
||||
borderWidth: 0.3,
|
||||
fill: true,
|
||||
tension: 0.25,
|
||||
}));
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 300,
|
||||
scaleZero: {
|
||||
x: 150,
|
||||
y: 133
|
||||
},
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
backgroundColor: 'rgb(0, 1, 3)',
|
||||
borderWidth: 0.787,
|
||||
borderColor: 'rgb(4, 6, 8)',
|
||||
hitRadius: 5,
|
||||
expect(meta.data[0]._model.x).toBeCloseToPixel(256);
|
||||
expect(meta.data[0]._model.y).toBeCloseToPixel(133);
|
||||
expect(meta.data[0]._model.controlPointPreviousX).toBeCloseToPixel(241);
|
||||
expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(133);
|
||||
expect(meta.data[0]._model.controlPointNextX).toBeCloseToPixel(281);
|
||||
expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(133);
|
||||
expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
|
||||
radius: 2.2,
|
||||
pointStyle: 'circle',
|
||||
skip: true,
|
||||
backgroundColor: 'rgb(0, 1, 3)',
|
||||
borderColor: 'rgb(4, 6, 8)',
|
||||
borderWidth: 0.787,
|
||||
tension: 0.15,
|
||||
|
||||
// Point
|
||||
x: 150,
|
||||
y: 91,
|
||||
|
||||
// Control points
|
||||
controlPointPreviousX: 145.4974499671325,
|
||||
controlPointPreviousY: 91,
|
||||
controlPointNextX: 157.6474499671325,
|
||||
controlPointNextY: 91,
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle number of data point changes in update', function() {
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, -4],
|
||||
label: 'dataset2',
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
};
|
||||
var mockContext = window.createMockContext();
|
||||
|
||||
var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
|
||||
var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
|
||||
scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
|
||||
var scale = new ScaleConstructor({
|
||||
ctx: mockContext,
|
||||
options: scaleConfig,
|
||||
chart: {
|
||||
data: data
|
||||
},
|
||||
});
|
||||
|
||||
// Update ticks & set physical dimensions
|
||||
scale.top = 0;
|
||||
scale.left = 0;
|
||||
scale.right = 300;
|
||||
scale.bottom = 300;
|
||||
scale.update(300, 300);
|
||||
|
||||
var chart = {
|
||||
chartArea: {
|
||||
bottom: 300,
|
||||
left: 0,
|
||||
right: 300,
|
||||
top: 0
|
||||
},
|
||||
data: data,
|
||||
config: {
|
||||
type: 'radar'
|
||||
},
|
||||
options: {
|
||||
elements: {
|
||||
line: {
|
||||
backgroundColor: 'rgb(255, 0, 0)',
|
||||
borderCapStyle: 'round',
|
||||
borderColor: 'rgb(0, 255, 0)',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.1,
|
||||
borderJoinStyle: 'bevel',
|
||||
borderWidth: 1.2,
|
||||
fill: true,
|
||||
tension: 0.1,
|
||||
},
|
||||
point: {
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
hitRadius: 1,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 1,
|
||||
radius: 3,
|
||||
}
|
||||
},
|
||||
},
|
||||
scale: scale
|
||||
};
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
controller.update();
|
||||
expect(chart.data.datasets[0].metaData.length).toBe(4);
|
||||
|
||||
chart.data.datasets[0].data = [1, 2]; // remove 2 items
|
||||
controller.buildOrUpdateElements();
|
||||
controller.update();
|
||||
expect(chart.data.datasets[0].metaData.length).toBe(2);
|
||||
expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
|
||||
|
||||
chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
|
||||
controller.buildOrUpdateElements();
|
||||
controller.update();
|
||||
expect(chart.data.datasets[0].metaData.length).toBe(5);
|
||||
expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
|
||||
expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Point).toBe(true);
|
||||
skip: true,
|
||||
hitRadius: 5,
|
||||
}));
|
||||
});
|
||||
|
||||
it('should set point hover styles', function() {
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, -4],
|
||||
label: 'dataset2',
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
};
|
||||
var mockContext = window.createMockContext();
|
||||
|
||||
var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
|
||||
var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
|
||||
scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
|
||||
var scale = new ScaleConstructor({
|
||||
ctx: mockContext,
|
||||
options: scaleConfig,
|
||||
chart: {
|
||||
data: data
|
||||
},
|
||||
});
|
||||
|
||||
// Update ticks & set physical dimensions
|
||||
scale.top = 0;
|
||||
scale.left = 0;
|
||||
scale.right = 300;
|
||||
scale.bottom = 300;
|
||||
scale.update(300, 300);
|
||||
|
||||
|
||||
var chart = {
|
||||
chartArea: {
|
||||
bottom: 300,
|
||||
left: 0,
|
||||
right: 300,
|
||||
top: 0
|
||||
},
|
||||
data: data,
|
||||
config: {
|
||||
type: 'radar'
|
||||
var chart = window.acquireChart({
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, 4]
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
},
|
||||
options: {
|
||||
showLines: true,
|
||||
elements: {
|
||||
line: {
|
||||
backgroundColor: 'rgb(255, 0, 0)',
|
||||
@ -593,15 +339,16 @@ describe('Radar controller tests', function() {
|
||||
radius: 3,
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: scale
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
controller.update();
|
||||
var point = chart.data.datasets[0].metaData[0];
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
|
||||
controller.setHoverStyle(point);
|
||||
meta.controller.update(); // reset first
|
||||
|
||||
var point = meta.data[0];
|
||||
|
||||
meta.controller.setHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)');
|
||||
expect(point._model.borderColor).toBe('rgb(230, 230, 230)');
|
||||
expect(point._model.borderWidth).toBe(1);
|
||||
@ -613,7 +360,7 @@ describe('Radar controller tests', function() {
|
||||
chart.data.datasets[0].pointHoverBorderColor = 'rgb(123, 125, 127)';
|
||||
chart.data.datasets[0].pointHoverBorderWidth = 2.1;
|
||||
|
||||
controller.setHoverStyle(point);
|
||||
meta.controller.setHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
|
||||
expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
|
||||
expect(point._model.borderWidth).toBe(2.1);
|
||||
@ -627,7 +374,7 @@ describe('Radar controller tests', function() {
|
||||
hoverBorderColor: 'rgb(10, 10, 10)'
|
||||
};
|
||||
|
||||
controller.setHoverStyle(point);
|
||||
meta.controller.setHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
|
||||
expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
|
||||
expect(point._model.borderWidth).toBe(5.5);
|
||||
@ -636,46 +383,16 @@ describe('Radar controller tests', function() {
|
||||
|
||||
|
||||
it('should remove hover styles', function() {
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, -4],
|
||||
label: 'dataset2',
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
};
|
||||
var mockContext = window.createMockContext();
|
||||
|
||||
var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
|
||||
var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
|
||||
scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
|
||||
var scale = new ScaleConstructor({
|
||||
ctx: mockContext,
|
||||
options: scaleConfig,
|
||||
chart: {
|
||||
data: data
|
||||
},
|
||||
});
|
||||
|
||||
// Update ticks & set physical dimensions
|
||||
scale.top = 0;
|
||||
scale.left = 0;
|
||||
scale.right = 300;
|
||||
scale.bottom = 300;
|
||||
scale.update(300, 300);
|
||||
|
||||
|
||||
var chart = {
|
||||
chartArea: {
|
||||
bottom: 300,
|
||||
left: 0,
|
||||
right: 300,
|
||||
top: 0
|
||||
},
|
||||
data: data,
|
||||
config: {
|
||||
type: 'radar'
|
||||
var chart = window.acquireChart({
|
||||
type: 'radar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [10, 15, 0, 4]
|
||||
}],
|
||||
labels: ['label1', 'label2', 'label3', 'label4']
|
||||
},
|
||||
options: {
|
||||
showLines: true,
|
||||
elements: {
|
||||
line: {
|
||||
backgroundColor: 'rgb(255, 0, 0)',
|
||||
@ -699,20 +416,21 @@ describe('Radar controller tests', function() {
|
||||
radius: 3,
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: scale
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var controller = new Chart.controllers.radar(chart, 0);
|
||||
controller.update();
|
||||
var point = chart.data.datasets[0].metaData[0];
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
|
||||
meta.controller.update(); // reset first
|
||||
|
||||
var point = meta.data[0];
|
||||
|
||||
chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)';
|
||||
chart.options.elements.point.borderColor = 'rgb(50, 51, 52)';
|
||||
chart.options.elements.point.borderWidth = 10.1;
|
||||
chart.options.elements.point.radius = 1.01;
|
||||
|
||||
controller.removeHoverStyle(point);
|
||||
meta.controller.removeHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)');
|
||||
expect(point._model.borderColor).toBe('rgb(50, 51, 52)');
|
||||
expect(point._model.borderWidth).toBe(10.1);
|
||||
@ -724,7 +442,7 @@ describe('Radar controller tests', function() {
|
||||
chart.data.datasets[0].pointBorderColor = 'rgb(123, 125, 127)';
|
||||
chart.data.datasets[0].pointBorderWidth = 2.1;
|
||||
|
||||
controller.removeHoverStyle(point);
|
||||
meta.controller.removeHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
|
||||
expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
|
||||
expect(point._model.borderWidth).toBe(2.1);
|
||||
@ -738,7 +456,7 @@ describe('Radar controller tests', function() {
|
||||
borderColor: 'rgb(10, 10, 10)'
|
||||
};
|
||||
|
||||
controller.removeHoverStyle(point);
|
||||
meta.controller.removeHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
|
||||
expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
|
||||
expect(point._model.borderWidth).toBe(5.5);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user