mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
376 lines
8.6 KiB
JavaScript
376 lines
8.6 KiB
JavaScript
|
// Test the rectangle element
|
||
|
describe('tooltip tests', function() {
|
||
|
|
||
|
beforeEach(function() {
|
||
|
window.addDefaultMatchers(jasmine);
|
||
|
});
|
||
|
|
||
|
afterEach(function() {
|
||
|
window.releaseAllCharts();
|
||
|
});
|
||
|
|
||
|
it('Should display in label mode', function() {
|
||
|
var chartInstance = window.acquireChart({
|
||
|
type: 'line',
|
||
|
data: {
|
||
|
datasets: [{
|
||
|
label: 'Dataset 1',
|
||
|
data: [10, 20, 30],
|
||
|
pointHoverBorderColor: 'rgb(255, 0, 0)',
|
||
|
pointHoverBackgroundColor: 'rgb(0, 255, 0)'
|
||
|
}, {
|
||
|
label: 'Dataset 2',
|
||
|
data: [40, 40, 40],
|
||
|
pointHoverBorderColor: 'rgb(0, 0, 255)',
|
||
|
pointHoverBackgroundColor: 'rgb(0, 255, 255)'
|
||
|
}],
|
||
|
labels: ['Point 1', 'Point 2', 'Point 3']
|
||
|
},
|
||
|
options: {
|
||
|
tooltips: {
|
||
|
mode: 'label'
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Trigger an event over top of the
|
||
|
var meta = chartInstance.getDatasetMeta(0);
|
||
|
var point = meta.data[1];
|
||
|
|
||
|
var node = chartInstance.chart.canvas;
|
||
|
var rect = node.getBoundingClientRect();
|
||
|
|
||
|
var evt = new MouseEvent('mousemove', {
|
||
|
view: window,
|
||
|
bubbles: true,
|
||
|
cancelable: true,
|
||
|
clientX: rect.left + point._model.x,
|
||
|
clientY: rect.top + point._model.y
|
||
|
});
|
||
|
|
||
|
// Manully trigger rather than having an async test
|
||
|
node.dispatchEvent(evt);
|
||
|
|
||
|
// Check and see if tooltip was displayed
|
||
|
var tooltip = chartInstance.tooltip;
|
||
|
var globalDefaults = Chart.defaults.global;
|
||
|
|
||
|
expect(tooltip._view).toEqual(jasmine.objectContaining({
|
||
|
// Positioning
|
||
|
xPadding: 6,
|
||
|
yPadding: 6,
|
||
|
xAlign: 'left',
|
||
|
yAlign: 'center',
|
||
|
|
||
|
// Body
|
||
|
bodyColor: '#fff',
|
||
|
_bodyFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_bodyFontStyle: globalDefaults.defaultFontStyle,
|
||
|
_bodyAlign: 'left',
|
||
|
bodyFontSize: globalDefaults.defaultFontSize,
|
||
|
bodySpacing: 2,
|
||
|
|
||
|
// Title
|
||
|
titleColor: '#fff',
|
||
|
_titleFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_titleFontStyle: 'bold',
|
||
|
titleFontSize: globalDefaults.defaultFontSize,
|
||
|
_titleAlign: 'left',
|
||
|
titleSpacing: 2,
|
||
|
titleMarginBottom: 6,
|
||
|
|
||
|
// Footer
|
||
|
footerColor: '#fff',
|
||
|
_footerFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_footerFontStyle: 'bold',
|
||
|
footerFontSize: globalDefaults.defaultFontSize,
|
||
|
_footerAlign: 'left',
|
||
|
footerSpacing: 2,
|
||
|
footerMarginTop: 6,
|
||
|
|
||
|
// Appearance
|
||
|
caretSize: 5,
|
||
|
cornerRadius: 6,
|
||
|
backgroundColor: 'rgba(0,0,0,0.8)',
|
||
|
opacity: 1,
|
||
|
legendColorBackground: '#fff',
|
||
|
|
||
|
// Text
|
||
|
title: ['Point 2'],
|
||
|
beforeBody: [],
|
||
|
body: [{
|
||
|
before: [],
|
||
|
lines: ['Dataset 1: 20'],
|
||
|
after: []
|
||
|
}, {
|
||
|
before: [],
|
||
|
lines: ['Dataset 2: 40'],
|
||
|
after: []
|
||
|
}],
|
||
|
afterBody: [],
|
||
|
footer: [],
|
||
|
x: 269,
|
||
|
y: 155,
|
||
|
caretPadding: 2,
|
||
|
labelColors: [{
|
||
|
borderColor: 'rgb(255, 0, 0)',
|
||
|
backgroundColor: 'rgb(0, 255, 0)'
|
||
|
}, {
|
||
|
borderColor: 'rgb(0, 0, 255)',
|
||
|
backgroundColor: 'rgb(0, 255, 255)'
|
||
|
}]
|
||
|
}));
|
||
|
});
|
||
|
|
||
|
it('Should display in single mode', function() {
|
||
|
var chartInstance = window.acquireChart({
|
||
|
type: 'line',
|
||
|
data: {
|
||
|
datasets: [{
|
||
|
label: 'Dataset 1',
|
||
|
data: [10, 20, 30],
|
||
|
pointHoverBorderColor: 'rgb(255, 0, 0)',
|
||
|
pointHoverBackgroundColor: 'rgb(0, 255, 0)'
|
||
|
}, {
|
||
|
label: 'Dataset 2',
|
||
|
data: [40, 40, 40],
|
||
|
pointHoverBorderColor: 'rgb(0, 0, 255)',
|
||
|
pointHoverBackgroundColor: 'rgb(0, 255, 255)'
|
||
|
}],
|
||
|
labels: ['Point 1', 'Point 2', 'Point 3']
|
||
|
},
|
||
|
options: {
|
||
|
tooltips: {
|
||
|
mode: 'single'
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Trigger an event over top of the
|
||
|
var meta = chartInstance.getDatasetMeta(0);
|
||
|
var point = meta.data[1];
|
||
|
|
||
|
var node = chartInstance.chart.canvas;
|
||
|
var rect = node.getBoundingClientRect();
|
||
|
|
||
|
var evt = new MouseEvent('mousemove', {
|
||
|
view: window,
|
||
|
bubbles: true,
|
||
|
cancelable: true,
|
||
|
clientX: rect.left + point._model.x,
|
||
|
clientY: rect.top + point._model.y
|
||
|
});
|
||
|
|
||
|
// Manully trigger rather than having an async test
|
||
|
node.dispatchEvent(evt);
|
||
|
|
||
|
// Check and see if tooltip was displayed
|
||
|
var tooltip = chartInstance.tooltip;
|
||
|
var globalDefaults = Chart.defaults.global;
|
||
|
|
||
|
expect(tooltip._view).toEqual(jasmine.objectContaining({
|
||
|
// Positioning
|
||
|
xPadding: 6,
|
||
|
yPadding: 6,
|
||
|
xAlign: 'left',
|
||
|
yAlign: 'center',
|
||
|
|
||
|
// Body
|
||
|
bodyColor: '#fff',
|
||
|
_bodyFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_bodyFontStyle: globalDefaults.defaultFontStyle,
|
||
|
_bodyAlign: 'left',
|
||
|
bodyFontSize: globalDefaults.defaultFontSize,
|
||
|
bodySpacing: 2,
|
||
|
|
||
|
// Title
|
||
|
titleColor: '#fff',
|
||
|
_titleFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_titleFontStyle: 'bold',
|
||
|
titleFontSize: globalDefaults.defaultFontSize,
|
||
|
_titleAlign: 'left',
|
||
|
titleSpacing: 2,
|
||
|
titleMarginBottom: 6,
|
||
|
|
||
|
// Footer
|
||
|
footerColor: '#fff',
|
||
|
_footerFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_footerFontStyle: 'bold',
|
||
|
footerFontSize: globalDefaults.defaultFontSize,
|
||
|
_footerAlign: 'left',
|
||
|
footerSpacing: 2,
|
||
|
footerMarginTop: 6,
|
||
|
|
||
|
// Appearance
|
||
|
caretSize: 5,
|
||
|
cornerRadius: 6,
|
||
|
backgroundColor: 'rgba(0,0,0,0.8)',
|
||
|
opacity: 1,
|
||
|
legendColorBackground: '#fff',
|
||
|
|
||
|
// Text
|
||
|
title: ['Point 2'],
|
||
|
beforeBody: [],
|
||
|
body: [{
|
||
|
before: [],
|
||
|
lines: ['Dataset 1: 20'],
|
||
|
after: []
|
||
|
}],
|
||
|
afterBody: [],
|
||
|
footer: [],
|
||
|
x: 269,
|
||
|
y: 312,
|
||
|
caretPadding: 2,
|
||
|
labelColors: []
|
||
|
}));
|
||
|
});
|
||
|
|
||
|
it('Should display information from user callbacks', function() {
|
||
|
var chartInstance = window.acquireChart({
|
||
|
type: 'line',
|
||
|
data: {
|
||
|
datasets: [{
|
||
|
label: 'Dataset 1',
|
||
|
data: [10, 20, 30],
|
||
|
pointHoverBorderColor: 'rgb(255, 0, 0)',
|
||
|
pointHoverBackgroundColor: 'rgb(0, 255, 0)'
|
||
|
}, {
|
||
|
label: 'Dataset 2',
|
||
|
data: [40, 40, 40],
|
||
|
pointHoverBorderColor: 'rgb(0, 0, 255)',
|
||
|
pointHoverBackgroundColor: 'rgb(0, 255, 255)'
|
||
|
}],
|
||
|
labels: ['Point 1', 'Point 2', 'Point 3']
|
||
|
},
|
||
|
options: {
|
||
|
tooltips: {
|
||
|
mode: 'label',
|
||
|
callbacks: {
|
||
|
beforeTitle: function() {
|
||
|
return 'beforeTitle';
|
||
|
},
|
||
|
title: function() {
|
||
|
return 'title';
|
||
|
},
|
||
|
afterTitle: function() {
|
||
|
return 'afterTitle'
|
||
|
},
|
||
|
beforeBody: function() {
|
||
|
return 'beforeBody';
|
||
|
},
|
||
|
beforeLabel: function() {
|
||
|
return 'beforeLabel';
|
||
|
},
|
||
|
label: function() {
|
||
|
return 'label';
|
||
|
},
|
||
|
afterLabel: function() {
|
||
|
return 'afterLabel';
|
||
|
},
|
||
|
afterBody: function() {
|
||
|
return 'afterBody';
|
||
|
},
|
||
|
beforeFooter: function() {
|
||
|
return 'beforeFooter';
|
||
|
},
|
||
|
footer: function() {
|
||
|
return 'footer';
|
||
|
},
|
||
|
afterFooter: function() {
|
||
|
return 'afterFooter'
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Trigger an event over top of the
|
||
|
var meta = chartInstance.getDatasetMeta(0);
|
||
|
var point = meta.data[1];
|
||
|
|
||
|
var node = chartInstance.chart.canvas;
|
||
|
var rect = node.getBoundingClientRect();
|
||
|
|
||
|
var evt = new MouseEvent('mousemove', {
|
||
|
view: window,
|
||
|
bubbles: true,
|
||
|
cancelable: true,
|
||
|
clientX: rect.left + point._model.x,
|
||
|
clientY: rect.top + point._model.y
|
||
|
});
|
||
|
|
||
|
// Manully trigger rather than having an async test
|
||
|
node.dispatchEvent(evt);
|
||
|
|
||
|
// Check and see if tooltip was displayed
|
||
|
var tooltip = chartInstance.tooltip;
|
||
|
var globalDefaults = Chart.defaults.global;
|
||
|
|
||
|
expect(tooltip._view).toEqual(jasmine.objectContaining({
|
||
|
// Positioning
|
||
|
xPadding: 6,
|
||
|
yPadding: 6,
|
||
|
xAlign: 'center',
|
||
|
yAlign: 'top',
|
||
|
|
||
|
// Body
|
||
|
bodyColor: '#fff',
|
||
|
_bodyFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_bodyFontStyle: globalDefaults.defaultFontStyle,
|
||
|
_bodyAlign: 'left',
|
||
|
bodyFontSize: globalDefaults.defaultFontSize,
|
||
|
bodySpacing: 2,
|
||
|
|
||
|
// Title
|
||
|
titleColor: '#fff',
|
||
|
_titleFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_titleFontStyle: 'bold',
|
||
|
titleFontSize: globalDefaults.defaultFontSize,
|
||
|
_titleAlign: 'left',
|
||
|
titleSpacing: 2,
|
||
|
titleMarginBottom: 6,
|
||
|
|
||
|
// Footer
|
||
|
footerColor: '#fff',
|
||
|
_footerFontFamily: globalDefaults.defaultFontFamily,
|
||
|
_footerFontStyle: 'bold',
|
||
|
footerFontSize: globalDefaults.defaultFontSize,
|
||
|
_footerAlign: 'left',
|
||
|
footerSpacing: 2,
|
||
|
footerMarginTop: 6,
|
||
|
|
||
|
// Appearance
|
||
|
caretSize: 5,
|
||
|
cornerRadius: 6,
|
||
|
backgroundColor: 'rgba(0,0,0,0.8)',
|
||
|
opacity: 1,
|
||
|
legendColorBackground: '#fff',
|
||
|
|
||
|
// Text
|
||
|
title: ['beforeTitle', 'title', 'afterTitle'],
|
||
|
beforeBody: ['beforeBody'],
|
||
|
body: [{
|
||
|
before: ['beforeLabel'],
|
||
|
lines: ['label'],
|
||
|
after: ['afterLabel']
|
||
|
}, {
|
||
|
before: ['beforeLabel'],
|
||
|
lines: ['label'],
|
||
|
after: ['afterLabel']
|
||
|
}],
|
||
|
afterBody: ['afterBody'],
|
||
|
footer: ['beforeFooter', 'footer', 'afterFooter'],
|
||
|
x: 216,
|
||
|
y: 190,
|
||
|
caretPadding: 2,
|
||
|
labelColors: [{
|
||
|
borderColor: 'rgb(255, 0, 0)',
|
||
|
backgroundColor: 'rgb(0, 255, 0)'
|
||
|
}, {
|
||
|
borderColor: 'rgb(0, 0, 255)',
|
||
|
backgroundColor: 'rgb(0, 255, 255)'
|
||
|
}]
|
||
|
}));
|
||
|
});
|
||
|
});
|