Chart.js/test/specs/scale.radialLinear.tests.js
Akihiko Kusanagi 626d8cc714 Draw the rightmost grid line when offsetGridLines is true (#6326)
* Draw the rightmost grid line when offsetGridLines is true

* Refactor based on feedback

* Replace helpers.each with for loop

* Minor refactoring

* Refactor _computeItemsToDraw
2019-07-18 18:25:33 -04:00

561 lines
13 KiB
JavaScript

// Tests for the radial linear scale used by the polar area and radar charts
describe('Test the radial linear scale', function() {
describe('auto', jasmine.fixture.specs('scale.radialLinear'));
it('Should register the constructor with the scale service', function() {
var Constructor = Chart.scaleService.getScaleConstructor('radialLinear');
expect(Constructor).not.toBe(undefined);
expect(typeof Constructor).toBe('function');
});
it('Should have the correct default config', function() {
var defaultConfig = Chart.scaleService.getScaleDefaults('radialLinear');
expect(defaultConfig).toEqual({
angleLines: {
display: true,
color: 'rgba(0,0,0,0.1)',
lineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
animate: true,
display: true,
gridLines: {
circular: false,
color: 'rgba(0,0,0,0.1)',
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,
zeroLineColor: 'rgba(0,0,0,0.25)',
zeroLineWidth: 1,
zeroLineBorderDash: [],
zeroLineBorderDashOffset: 0.0,
borderDash: [],
borderDashOffset: 0.0
},
pointLabels: {
display: true,
fontSize: 10,
callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
},
position: 'chartArea',
offset: false,
scaleLabel: Chart.defaults.scale.scaleLabel,
ticks: {
backdropColor: 'rgba(255,255,255,0.75)',
backdropPaddingY: 2,
backdropPaddingX: 2,
beginAtZero: false,
minRotation: 0,
maxRotation: 50,
mirror: false,
padding: 0,
reverse: false,
showLabelBackdrop: true,
display: true,
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
autoSkip: true,
autoSkipPadding: 0,
labelOffset: 0,
minor: {},
major: {},
},
});
// Is this actually a function
expect(defaultConfig.ticks.callback).toEqual(jasmine.any(Function));
expect(defaultConfig.pointLabels.callback).toEqual(jasmine.any(Function));
});
it('Should correctly determine the max & min data values', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, -5, 78, -100]
}, {
data: [150]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scales: {}
}
});
expect(chart.scale.min).toBe(-100);
expect(chart.scale.max).toBe(150);
});
it('Should correctly determine the max & min of string data values', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: ['10', '5', '0', '-5', '78', '-100']
}, {
data: ['150']
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scales: {}
}
});
expect(chart.scale.min).toBe(-100);
expect(chart.scale.max).toBe(150);
});
it('Should correctly determine the max & min data values when there are hidden datasets', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: ['10', '5', '0', '-5', '78', '-100']
}, {
data: ['150']
}, {
data: [1000],
hidden: true
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scales: {}
}
});
expect(chart.scale.min).toBe(-100);
expect(chart.scale.max).toBe(150);
});
it('Should correctly determine the max & min data values when there is NaN data', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [50, 60, NaN, 70, null, undefined, Infinity, -Infinity]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7', 'label8']
},
options: {
scales: {}
}
});
expect(chart.scale.min).toBe(50);
expect(chart.scale.max).toBe(70);
});
it('Should ensure that the scale has a max and min that are not equal', function() {
var scaleID = 'myScale';
var mockData = {
datasets: [],
labels: []
};
var mockContext = window.createMockContext();
var Constructor = Chart.scaleService.getScaleConstructor('radialLinear');
var scale = new Constructor({
ctx: mockContext,
options: Chart.scaleService.getScaleDefaults('radialLinear'), // use default config for scale
chart: {
data: mockData
},
id: scaleID,
});
scale.update(200, 300);
expect(scale.min).toBe(-1);
expect(scale.max).toBe(1);
});
it('Should use the suggestedMin and suggestedMax options', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [1, 1, 1, 2, 1, 0]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scale: {
ticks: {
suggestedMin: -10,
suggestedMax: 10
}
}
}
});
expect(chart.scale.min).toBe(-10);
expect(chart.scale.max).toBe(10);
});
it('Should use the min and max options', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [1, 1, 1, 2, 1, 0]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6']
},
options: {
scale: {
ticks: {
min: -1010,
max: 1010
}
}
}
});
expect(chart.scale.min).toBe(-1010);
expect(chart.scale.max).toBe(1010);
expect(chart.scale.ticks).toEqual(['-1010', '-1000', '-500', '0', '500', '1000', '1010']);
});
it('should forcibly include 0 in the range if the beginAtZero option is used', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [20, 30, 40, 50]
}],
labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
scale: {
ticks: {
beginAtZero: false
}
}
}
});
expect(chart.scale.ticks).toEqual(['20', '25', '30', '35', '40', '45', '50']);
chart.scale.options.ticks.beginAtZero = true;
chart.update();
expect(chart.scale.ticks).toEqual(['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50']);
chart.data.datasets[0].data = [-20, -30, -40, -50];
chart.update();
expect(chart.scale.ticks).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20', '-15', '-10', '-5', '0']);
chart.scale.options.ticks.beginAtZero = false;
chart.update();
expect(chart.scale.ticks).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20']);
});
it('Should generate tick marks in the correct order in reversed mode', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
ticks: {
reverse: true
}
}
}
});
expect(chart.scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']);
expect(chart.scale.start).toBe(80);
expect(chart.scale.end).toBe(0);
});
it('Should correctly limit the maximum number of ticks', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
labels: ['label1', 'label2', 'label3'],
datasets: [{
data: [0.5, 1.5, 2.5]
}]
},
options: {
scale: {
pointLabels: {
display: false
}
}
}
});
expect(chart.scale.ticks).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
chart.options.scale.ticks.maxTicksLimit = 11;
chart.update();
expect(chart.scale.ticks).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
chart.options.scale.ticks.stepSize = 0.01;
chart.update();
expect(chart.scale.ticks).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
chart.options.scale.ticks.min = 0.3;
chart.options.scale.ticks.max = 2.8;
chart.update();
expect(chart.scale.ticks).toEqual(['0.3', '0.5', '1.0', '1.5', '2.0', '2.5', '2.8']);
});
it('Should build labels using the user supplied callback', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
ticks: {
callback: function(value, index) {
return index.toString();
}
}
}
}
});
expect(chart.scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']);
expect(chart.scale.pointLabels).toEqual(['label1', 'label2', 'label3', 'label4', 'label5']);
});
it('Should build point labels using the user supplied callback', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
pointLabels: {
callback: function(value, index) {
return index.toString();
}
}
}
}
});
expect(chart.scale.pointLabels).toEqual(['0', '1', '2', '3', '4']);
});
it('Should build point labels from falsy values', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78, 20]
}],
labels: [0, '', undefined, null, NaN, false]
}
});
expect(chart.scale.pointLabels).toEqual([0, '', '', '', '', '']);
});
it('should correctly set the center point', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
pointLabels: {
callback: function(value, index) {
return index.toString();
}
}
}
}
});
expect(chart.scale.drawingArea).toBe(227);
expect(chart.scale.xCenter).toBe(256);
expect(chart.scale.yCenter).toBe(284);
});
it('should correctly get the label for a given data index', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
pointLabels: {
callback: function(value, index) {
return index.toString();
}
}
}
}
});
expect(chart.scale.getLabelForIndex(1, 0)).toBe(5);
});
it('should get the correct distance from the center point', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
pointLabels: {
callback: function(value, index) {
return index.toString();
}
}
}
}
});
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(0);
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(227);
var position = chart.scale.getPointPositionForValue(1, 5);
expect(position.x).toBeCloseToPixel(270);
expect(position.y).toBeCloseToPixel(278);
chart.scale.options.ticks.reverse = true;
chart.update();
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.min)).toBe(227);
expect(chart.scale.getDistanceFromCenterForValue(chart.scale.max)).toBe(0);
});
it('should correctly get angles for all points', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
pointLabels: {
callback: function(value, index) {
return index.toString();
}
}
},
startAngle: 15
}
});
var radToNearestDegree = function(rad) {
return Math.round((360 * rad) / (2 * Math.PI));
};
var slice = 72; // (360 / 5)
for (var i = 0; i < 5; i++) {
expect(radToNearestDegree(chart.scale.getIndexAngle(i))).toBe(15 + (slice * i));
}
chart.options.startAngle = 0;
chart.update();
for (var x = 0; x < 5; x++) {
expect(radToNearestDegree(chart.scale.getIndexAngle(x))).toBe((slice * x));
}
});
it('should correctly get the correct label alignment for all points', function() {
var chart = window.acquireChart({
type: 'radar',
data: {
datasets: [{
data: [10, 5, 0, 25, 78]
}],
labels: ['label1', 'label2', 'label3', 'label4', 'label5']
},
options: {
scale: {
pointLabels: {
callback: function(value, index) {
return index.toString();
}
},
ticks: {
display: false
}
}
}
});
var scale = chart.scale;
[{
startAngle: 30,
textAlign: ['right', 'right', 'left', 'left', 'left'],
y: [82, 366, 506, 319, 53]
}, {
startAngle: -30,
textAlign: ['right', 'right', 'left', 'left', 'right'],
y: [319, 506, 366, 82, 53]
}, {
startAngle: 750,
textAlign: ['right', 'right', 'left', 'left', 'left'],
y: [82, 366, 506, 319, 53]
}].forEach(function(expected) {
chart.options.startAngle = expected.startAngle;
chart.update();
scale.ctx = window.createMockContext();
chart.draw();
scale.ctx.getCalls().filter(function(x) {
return x.name === 'setTextAlign';
}).forEach(function(x, i) {
expect(x.args[0]).toBe(expected.textAlign[i]);
});
scale.ctx.getCalls().filter(function(x) {
return x.name === 'fillText';
}).map(function(x, i) {
expect(x.args[2]).toBeCloseToPixel(expected.y[i]);
});
});
});
});