mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
5f37ba6fc4
* add warning if filler plugin is used but not registered * fix lint * increase size limit * add test, only put warning in dataset controller * fix register in docs, remove commented code * remove other mr * add documentation * Apply suggestions from code review Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com> * Also return false if plugin is disabled by options * improve warning message * undo docs changes * update test Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
300 lines
7.5 KiB
JavaScript
300 lines
7.5 KiB
JavaScript
describe('Plugin.filler', function() {
|
|
const fillerPluginRegisterWarning = 'Tried to use the \'fill\' option without the \'Filler\' plugin enabled. Please import and register the \'Filler\' plugin and make sure it is not disabled in the options';
|
|
function decodedFillValues(chart) {
|
|
return chart.data.datasets.map(function(dataset, index) {
|
|
var meta = chart.getDatasetMeta(index) || {};
|
|
expect(meta.$filler).toBeDefined();
|
|
return meta.$filler.fill;
|
|
});
|
|
}
|
|
|
|
describe('auto', jasmine.fixture.specs('plugin.filler'));
|
|
|
|
describe('dataset.fill', function() {
|
|
it('Should show a warning when trying to use the filler plugin in the dataset when it\'s not registered', function() {
|
|
spyOn(console, 'warn');
|
|
Chart.unregister(Chart.Filler);
|
|
window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{
|
|
fill: true
|
|
}]
|
|
}
|
|
});
|
|
|
|
expect(console.warn).toHaveBeenCalledWith(fillerPluginRegisterWarning);
|
|
|
|
Chart.register(Chart.Filler);
|
|
});
|
|
|
|
it('Should show a warning when trying to use the filler plugin in the root options when it\'s not registered', function() {
|
|
// jasmine.createSpy('warn');
|
|
spyOn(console, 'warn');
|
|
Chart.unregister(Chart.Filler);
|
|
window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{
|
|
}]
|
|
},
|
|
options: {
|
|
fill: true
|
|
}
|
|
});
|
|
|
|
expect(console.warn).toHaveBeenCalledWith(fillerPluginRegisterWarning);
|
|
|
|
Chart.register(Chart.Filler);
|
|
});
|
|
|
|
it('should support boundaries', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: 'origin'},
|
|
{fill: 'start'},
|
|
{fill: 'end'},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual(['origin', 'start', 'end']);
|
|
});
|
|
|
|
it('should support absolute dataset index', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: 1},
|
|
{fill: 3},
|
|
{fill: 0},
|
|
{fill: 2},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([1, 3, 0, 2]);
|
|
});
|
|
|
|
it('should support relative dataset index', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: '+3'},
|
|
{fill: '-1'},
|
|
{fill: '+1'},
|
|
{fill: '-2'},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
3, // 0 + 3
|
|
0, // 1 - 1
|
|
3, // 2 + 1
|
|
1, // 3 - 2
|
|
]);
|
|
});
|
|
|
|
it('should handle default fill when true (origin)', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: true},
|
|
{fill: false},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual(['origin', false]);
|
|
});
|
|
|
|
it('should ignore self dataset index', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: 0},
|
|
{fill: '-0'},
|
|
{fill: '+0'},
|
|
{fill: 3},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
false, // 0 === 0
|
|
false, // 1 === 1 - 0
|
|
false, // 2 === 2 + 0
|
|
false, // 3 === 3
|
|
]);
|
|
});
|
|
|
|
it('should ignore out of bounds dataset index', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: -2},
|
|
{fill: 4},
|
|
{fill: '-3'},
|
|
{fill: '+1'},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
false, // 0 - 2 < 0
|
|
false, // 1 + 4 > 3
|
|
false, // 2 - 3 < 0
|
|
false, // 3 + 1 > 3
|
|
]);
|
|
});
|
|
|
|
it('should ignore invalid values', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: 'foo'},
|
|
{fill: '+foo'},
|
|
{fill: '-foo'},
|
|
{fill: '+1.1'},
|
|
{fill: '-2.2'},
|
|
{fill: 3.3},
|
|
{fill: -4.4},
|
|
{fill: NaN},
|
|
{fill: Infinity},
|
|
{fill: ''},
|
|
{fill: null},
|
|
{fill: []},
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
false, // NaN (string)
|
|
false, // NaN (string)
|
|
false, // NaN (string)
|
|
false, // float (string)
|
|
false, // float (string)
|
|
false, // float (number)
|
|
false, // float (number)
|
|
false, // NaN
|
|
false, // !isFinite
|
|
false, // empty string
|
|
false, // null
|
|
false, // array
|
|
]);
|
|
});
|
|
});
|
|
|
|
describe('options.plugins.filler.propagate', function() {
|
|
it('should compute propagated fill targets if true', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: 'start', hidden: true},
|
|
{fill: '-1', hidden: true},
|
|
{fill: 1, hidden: true},
|
|
{fill: '-2', hidden: true},
|
|
{fill: '+1'},
|
|
{fill: '+2'},
|
|
{fill: '-1'},
|
|
{fill: 'end', hidden: true},
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
filler: {
|
|
propagate: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
'start', // 'start'
|
|
'start', // 1 - 1 -> 0 (hidden) -> 'start'
|
|
'start', // 1 (hidden) -> 0 (hidden) -> 'start'
|
|
'start', // 3 - 2 -> 1 (hidden) -> 0 (hidden) -> 'start'
|
|
5, // 4 + 1
|
|
'end', // 5 + 2 -> 7 (hidden) -> 'end'
|
|
5, // 6 - 1 -> 5
|
|
'end', // 'end'
|
|
]);
|
|
});
|
|
|
|
it('should preserve initial fill targets if false', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: 'start', hidden: true},
|
|
{fill: '-1', hidden: true},
|
|
{fill: 1, hidden: true},
|
|
{fill: '-2', hidden: true},
|
|
{fill: '+1'},
|
|
{fill: '+2'},
|
|
{fill: '-1'},
|
|
{fill: 'end', hidden: true},
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
filler: {
|
|
propagate: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
'start', // 'origin'
|
|
0, // 1 - 1
|
|
1, // 1
|
|
1, // 3 - 2
|
|
5, // 4 + 1
|
|
7, // 5 + 2
|
|
5, // 6 - 1
|
|
'end', // 'end'
|
|
]);
|
|
});
|
|
|
|
it('should prevent recursive propagation', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{fill: '+2', hidden: true},
|
|
{fill: '-1', hidden: true},
|
|
{fill: '-1', hidden: true},
|
|
{fill: '-2'}
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
filler: {
|
|
propagate: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
expect(decodedFillValues(chart)).toEqual([
|
|
false, // 0 + 2 -> 2 (hidden) -> 1 (hidden) -> 0 (loop)
|
|
false, // 1 - 1 -> 0 (hidden) -> 2 (hidden) -> 1 (loop)
|
|
false, // 2 - 1 -> 1 (hidden) -> 0 (hidden) -> 2 (loop)
|
|
false, // 3 - 2 -> 1 (hidden) -> 0 (hidden) -> 2 (hidden) -> 1 (loop)
|
|
]);
|
|
});
|
|
});
|
|
});
|