mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
38f85c98b5
Add "onHover" to the legend options that will hold a user defined function (default is null) and called when a "mousemove" event is registered on top of a label item, with same parameters as the "onClick" option. Also introduced logic that determines if the type of event passed to the legend "handleEvent" function is one we can handle. Currently allowing "click" and "mousemove" events. If the event is not one of those we stop the function execution (this is for the sake of reusing the legend hitbox calculations).
314 lines
6.3 KiB
JavaScript
314 lines
6.3 KiB
JavaScript
// Test the rectangle element
|
|
describe('Legend block tests', function() {
|
|
|
|
beforeEach(function() {
|
|
window.addDefaultMatchers(jasmine);
|
|
});
|
|
|
|
afterEach(function() {
|
|
window.releaseAllCharts();
|
|
});
|
|
|
|
it('Should be constructed', function() {
|
|
var legend = new Chart.Legend({});
|
|
expect(legend).not.toBe(undefined);
|
|
});
|
|
|
|
it('should have the correct default config', function() {
|
|
expect(Chart.defaults.global.legend).toEqual({
|
|
display: true,
|
|
position: 'top',
|
|
fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
|
|
reverse: false,
|
|
|
|
// a callback that will handle
|
|
onClick: jasmine.any(Function),
|
|
onHover: null,
|
|
|
|
labels: {
|
|
boxWidth: 40,
|
|
padding: 10,
|
|
generateLabels: jasmine.any(Function)
|
|
}
|
|
});
|
|
});
|
|
|
|
it('should update correctly', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'bar',
|
|
data: {
|
|
datasets: [{
|
|
label: 'dataset1',
|
|
backgroundColor: '#f31',
|
|
borderCapStyle: 'butt',
|
|
borderDash: [2, 2],
|
|
borderDashOffset: 5.5,
|
|
data: []
|
|
}, {
|
|
label: 'dataset2',
|
|
hidden: true,
|
|
borderJoinStyle: 'miter',
|
|
data: []
|
|
}, {
|
|
label: 'dataset3',
|
|
borderWidth: 10,
|
|
borderColor: 'green',
|
|
pointStyle: 'crossRot',
|
|
data: []
|
|
}],
|
|
labels: []
|
|
}
|
|
});
|
|
|
|
expect(chart.legend.legendItems).toEqual([{
|
|
text: 'dataset1',
|
|
fillStyle: '#f31',
|
|
hidden: false,
|
|
lineCap: 'butt',
|
|
lineDash: [2, 2],
|
|
lineDashOffset: 5.5,
|
|
lineJoin: undefined,
|
|
lineWidth: undefined,
|
|
strokeStyle: undefined,
|
|
pointStyle: undefined,
|
|
datasetIndex: 0
|
|
}, {
|
|
text: 'dataset2',
|
|
fillStyle: undefined,
|
|
hidden: true,
|
|
lineCap: undefined,
|
|
lineDash: undefined,
|
|
lineDashOffset: undefined,
|
|
lineJoin: 'miter',
|
|
lineWidth: undefined,
|
|
strokeStyle: undefined,
|
|
pointStyle: undefined,
|
|
datasetIndex: 1
|
|
}, {
|
|
text: 'dataset3',
|
|
fillStyle: undefined,
|
|
hidden: false,
|
|
lineCap: undefined,
|
|
lineDash: undefined,
|
|
lineDashOffset: undefined,
|
|
lineJoin: undefined,
|
|
lineWidth: 10,
|
|
strokeStyle: 'green',
|
|
pointStyle: 'crossRot',
|
|
datasetIndex: 2
|
|
}]);
|
|
});
|
|
|
|
it('should draw correctly', function() {
|
|
var chart = window.acquireChart({
|
|
type: 'bar',
|
|
data: {
|
|
datasets: [{
|
|
label: 'dataset1',
|
|
backgroundColor: '#f31',
|
|
borderCapStyle: 'butt',
|
|
borderDash: [2, 2],
|
|
borderDashOffset: 5.5,
|
|
data: []
|
|
}, {
|
|
label: 'dataset2',
|
|
hidden: true,
|
|
borderJoinStyle: 'miter',
|
|
data: []
|
|
}, {
|
|
label: 'dataset3',
|
|
borderWidth: 10,
|
|
borderColor: 'green',
|
|
data: []
|
|
}],
|
|
labels: []
|
|
}
|
|
});
|
|
|
|
expect(chart.legend.legendHitBoxes.length).toBe(3);
|
|
|
|
[ { h: 12, l: 101, t: 10, w: 93 },
|
|
{ h: 12, l: 205, t: 10, w: 93 },
|
|
{ h: 12, l: 308, t: 10, w: 93 }
|
|
].forEach(function(expected, i) {
|
|
expect(chart.legend.legendHitBoxes[i].height).toBeCloseToPixel(expected.h);
|
|
expect(chart.legend.legendHitBoxes[i].left).toBeCloseToPixel(expected.l);
|
|
expect(chart.legend.legendHitBoxes[i].top).toBeCloseToPixel(expected.t);
|
|
expect(chart.legend.legendHitBoxes[i].width).toBeCloseToPixel(expected.w);
|
|
})
|
|
|
|
// NOTE(SB) We should get ride of the following tests and use image diff instead.
|
|
// For now, as discussed with Evert Timberg, simply comment out.
|
|
// See http://humblesoftware.github.io/js-imagediff/test.html
|
|
/*chart.legend.ctx = window.createMockContext();
|
|
chart.update();
|
|
|
|
expect(chart.legend.ctx .getCalls()).toEqual([{
|
|
"name": "measureText",
|
|
"args": ["dataset1"]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset2"]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset3"]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset1"]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset2"]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset3"]
|
|
}, {
|
|
"name": "setLineWidth",
|
|
"args": [0.5]
|
|
}, {
|
|
"name": "setStrokeStyle",
|
|
"args": ["#666"]
|
|
}, {
|
|
"name": "setFillStyle",
|
|
"args": ["#666"]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset1"]
|
|
}, {
|
|
"name": "save",
|
|
"args": []
|
|
}, {
|
|
"name": "setFillStyle",
|
|
"args": ["#f31"]
|
|
}, {
|
|
"name": "setLineCap",
|
|
"args": ["butt"]
|
|
}, {
|
|
"name": "setLineDashOffset",
|
|
"args": [5.5]
|
|
}, {
|
|
"name": "setLineJoin",
|
|
"args": ["miter"]
|
|
}, {
|
|
"name": "setLineWidth",
|
|
"args": [3]
|
|
}, {
|
|
"name": "setStrokeStyle",
|
|
"args": ["rgba(0,0,0,0.1)"]
|
|
}, {
|
|
"name": "setLineDash",
|
|
"args": [
|
|
[2, 2]
|
|
]
|
|
}, {
|
|
"name": "strokeRect",
|
|
"args": [114, 110, 40, 12]
|
|
}, {
|
|
"name": "fillRect",
|
|
"args": [114, 110, 40, 12]
|
|
}, {
|
|
"name": "restore",
|
|
"args": []
|
|
}, {
|
|
"name": "fillText",
|
|
"args": ["dataset1", 160, 110]
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset2"]
|
|
}, {
|
|
"name": "save",
|
|
"args": []
|
|
}, {
|
|
"name": "setFillStyle",
|
|
"args": ["rgba(0,0,0,0.1)"]
|
|
}, {
|
|
"name": "setLineCap",
|
|
"args": ["butt"]
|
|
}, {
|
|
"name": "setLineDashOffset",
|
|
"args": [0]
|
|
}, {
|
|
"name": "setLineJoin",
|
|
"args": ["miter"]
|
|
}, {
|
|
"name": "setLineWidth",
|
|
"args": [3]
|
|
}, {
|
|
"name": "setStrokeStyle",
|
|
"args": ["rgba(0,0,0,0.1)"]
|
|
}, {
|
|
"name": "setLineDash",
|
|
"args": [
|
|
[]
|
|
]
|
|
}, {
|
|
"name": "strokeRect",
|
|
"args": [250, 110, 40, 12]
|
|
}, {
|
|
"name": "fillRect",
|
|
"args": [250, 110, 40, 12]
|
|
}, {
|
|
"name": "restore",
|
|
"args": []
|
|
}, {
|
|
"name": "fillText",
|
|
"args": ["dataset2", 296, 110]
|
|
}, {
|
|
"name": "beginPath",
|
|
"args": []
|
|
}, {
|
|
"name": "setLineWidth",
|
|
"args": [2]
|
|
}, {
|
|
"name": "moveTo",
|
|
"args": [296, 116]
|
|
}, {
|
|
"name": "lineTo",
|
|
"args": [376, 116]
|
|
}, {
|
|
"name": "stroke",
|
|
"args": []
|
|
}, {
|
|
"name": "measureText",
|
|
"args": ["dataset3"]
|
|
}, {
|
|
"name": "save",
|
|
"args": []
|
|
}, {
|
|
"name": "setFillStyle",
|
|
"args": ["rgba(0,0,0,0.1)"]
|
|
}, {
|
|
"name": "setLineCap",
|
|
"args": ["butt"]
|
|
}, {
|
|
"name": "setLineDashOffset",
|
|
"args": [0]
|
|
}, {
|
|
"name": "setLineJoin",
|
|
"args": ["miter"]
|
|
}, {
|
|
"name": "setLineWidth",
|
|
"args": [10]
|
|
}, {
|
|
"name": "setStrokeStyle",
|
|
"args": ["green"]
|
|
}, {
|
|
"name": "setLineDash",
|
|
"args": [
|
|
[]
|
|
]
|
|
}, {
|
|
"name": "strokeRect",
|
|
"args": [182, 132, 40, 12]
|
|
}, {
|
|
"name": "fillRect",
|
|
"args": [182, 132, 40, 12]
|
|
}, {
|
|
"name": "restore",
|
|
"args": []
|
|
}, {
|
|
"name": "fillText",
|
|
"args": ["dataset3", 228, 132]
|
|
}]);*/
|
|
});
|
|
});
|