Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-21 15:46:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make legend appearance consistent with chart elements (#5621)

Browse Source
This commit is contained in:
Akihiko Kusanagi
2019-05-09 21:33:19 +08:00
committed by Simon Brunel
parent f093c36574
commit feeda5d034
15 changed files with 548 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
test/specs/plugin.legend.tests.js
View File

@@ -24,7 +24,7 @@ describe('Legend block tests', function() {
});
});
it('should update correctly', function() {
it('should update bar chart correctly', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
@@ -55,29 +55,31 @@ describe('Legend block tests', function() {
text: 'dataset1',
fillStyle: '#f31',
hidden: false,
lineCap: 'butt',
lineDash: [2, 2],
lineDashOffset: 5.5,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: undefined,
strokeStyle: undefined,
lineWidth: 0,
strokeStyle: 'rgba(0,0,0,0.1)',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 0
}, {
text: 'dataset2',
fillStyle: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
hidden: true,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: 'miter',
lineWidth: undefined,
strokeStyle: undefined,
lineJoin: undefined,
lineWidth: 0,
strokeStyle: 'rgba(0,0,0,0.1)',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 1
}, {
text: 'dataset3',
fillStyle: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
hidden: false,
lineCap: undefined,
lineDash: undefined,
@@ -85,7 +87,78 @@ describe('Legend block tests', function() {
lineJoin: undefined,
lineWidth: 10,
strokeStyle: 'green',
pointStyle: 'crossRot',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 2
}]);
});
it('should update line chart correctly', function() {
var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
label: 'dataset1',
backgroundColor: '#f31',
borderCapStyle: 'round',
borderDash: [2, 2],
borderDashOffset: 5.5,
data: []
}, {
label: 'dataset2',
hidden: true,
borderJoinStyle: 'round',
data: []
}, {
label: 'dataset3',
borderWidth: 10,
borderColor: 'green',
pointStyle: 'crossRot',
fill: false,
data: []
}],
labels: []
}
});
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
fillStyle: '#f31',
hidden: false,
lineCap: 'round',
lineDash: [2, 2],
lineDashOffset: 5.5,
lineJoin: 'miter',
lineWidth: 3,
strokeStyle: 'rgba(0,0,0,0.1)',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 0
}, {
text: 'dataset2',
fillStyle: 'rgba(0,0,0,0.1)',
hidden: true,
lineCap: 'butt',
lineDash: [],
lineDashOffset: 0,
lineJoin: 'round',
lineWidth: 3,
strokeStyle: 'rgba(0,0,0,0.1)',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 1
}, {
text: 'dataset3',
fillStyle: 'rgba(0,0,0,0)',
hidden: false,
lineCap: 'butt',
lineDash: [],
lineDashOffset: 0,
lineJoin: 'miter',
lineWidth: 10,
strokeStyle: 'green',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 2
}]);
});
@@ -132,17 +205,18 @@ describe('Legend block tests', function() {
text: 'dataset1',
fillStyle: '#f31',
hidden: false,
lineCap: 'butt',
lineDash: [2, 2],
lineDashOffset: 5.5,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: undefined,
strokeStyle: undefined,
lineWidth: 0,
strokeStyle: 'rgba(0,0,0,0.1)',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 0
}, {
text: 'dataset3',
fillStyle: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
hidden: false,
lineCap: undefined,
lineDash: undefined,
@@ -150,7 +224,8 @@ describe('Legend block tests', function() {
lineJoin: undefined,
lineWidth: 10,
strokeStyle: 'green',
pointStyle: 'crossRot',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 2
}]);
});
@@ -217,6 +292,145 @@ describe('Legend block tests', function() {
});
});
it('should pick up the first item when the property is an array', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [{
label: 'dataset1',
backgroundColor: ['#f31', '#666', '#14e'],
borderWidth: [5, 10, 15],
borderColor: ['red', 'green', 'blue'],
data: []
}],
labels: []
}
});
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
fillStyle: '#f31',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 5,
strokeStyle: 'red',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 0
}]);
});
it('should use the value for the first item when the property is a function', function() {
var helpers = window.Chart.helpers;
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [{
label: 'dataset1',
backgroundColor: function(ctx) {
var value = ctx.dataset.data[ctx.dataIndex] || 0;
return helpers.color({r: value * 10, g: 0, b: 0}).rgbString();
},
borderWidth: function(ctx) {
var value = ctx.dataset.data[ctx.dataIndex] || 0;
return value;
},
borderColor: function(ctx) {
var value = ctx.dataset.data[ctx.dataIndex] || 0;
return helpers.color({r: 255 - value * 10, g: 0, b: 0}).rgbString();
},
data: [5, 10, 15, 20]
}],
labels: ['A', 'B', 'C', 'D']
}
});
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
fillStyle: 'rgb(50, 0, 0)',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 5,
strokeStyle: 'rgb(205, 0, 0)',
pointStyle: undefined,
rotation: undefined,
datasetIndex: 0
}]);
});
it('should draw correctly when usePointStyle is true', function() {
var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
label: 'dataset1',
backgroundColor: '#f31',
borderCapStyle: 'butt',
borderDash: [2, 2],
borderDashOffset: 5.5,
borderWidth: 0,
borderColor: '#f31',
pointStyle: 'crossRot',
pointBackgroundColor: 'rgba(0,0,0,0.1)',
pointBorderWidth: 5,
pointBorderColor: 'green',
data: []
}, {
label: 'dataset2',
backgroundColor: '#f31',
borderJoinStyle: 'miter',
borderWidth: 2,
borderColor: '#f31',
pointStyle: 'crossRot',
pointRotation: 15,
data: []
}],
labels: []
},
options: {
legend: {
labels: {
usePointStyle: true
}
}
}
});
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
fillStyle: 'rgba(0,0,0,0.1)',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 5,
strokeStyle: 'green',
pointStyle: 'crossRot',
rotation: undefined,
datasetIndex: 0
}, {
text: 'dataset2',
fillStyle: '#f31',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 2,
strokeStyle: '#f31',
pointStyle: 'crossRot',
rotation: 15,
datasetIndex: 1
}]);
});
describe('config update', function() {
it ('should update the options', function() {
var chart = acquireChart({