archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Use borderRadius for legend and remove fallbacks (#10551)

Browse Source 
* Use borderRadius for legend

* re enable test

* fix lint

* add note in migration guide

* Update types/index.d.ts

Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
This commit is contained in:
Jacco van den Berg 2022-08-18 13:34:18 +02:00 committed by GitHub
parent dad1e98c5a
commit d09e424a0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 89 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/configuration/legend.md
View File

@ -67,6 +67,8 @@ Namespace: `options.plugins.legend.labels`
| `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`.
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size).
| `pointStyleWidth` | `number` | `null` | If `usePointStyle` is true, the width of the point style used for the legend (only for `circle`, `rect` and `line` point stlye).
| `useBorderRadius` | `boolean` | `false` | Label borderRadius will match coresponding borderRadius.
| `borderRadius` | `number` | `undefined` | Override the borderRadius to use.
## Legend Title Configuration

5
docs/migration/v4-migration.md
View File

@ -17,4 +17,7 @@ A number of changes were made to the configuration options passed to the `Chart`
* If the tooltip callback returns `undefined`, then the default callback will be used.
#### Type changes
* The order of the `ChartMeta` parameters have been changed from `<Element, DatasetElement, Type>` to `<Type, Element, DatasetElement>`
* The order of the `ChartMeta` parameters have been changed from `<Element, DatasetElement, Type>` to `<Type, Element, DatasetElement>`.
### General
* Removed fallback to `fontColor` for the legend text and strikethrough color.

11
src/plugins/plugin.legend.js
View File

@ -278,7 +278,7 @@ export class Legend extends Element {
const defaultColor = defaults.color;
const rtlHelper = getRtlAdapter(opts.rtl, this.left, this.width);
const labelFont = toFont(labelOpts.font);
const {color: fontColor, padding} = labelOpts;
const {padding} = labelOpts;
const fontSize = labelFont.size;
const halfFontSize = fontSize / 2;
let cursor;
@ -384,9 +384,8 @@ export class Legend extends Element {
const lineHeight = itemHeight + padding;
this.legendItems.forEach((legendItem, i) => {
// TODO: Remove fallbacks at v4
ctx.strokeStyle = legendItem.fontColor || fontColor; // for strikethrough effect
ctx.fillStyle = legendItem.fontColor || fontColor; // render in correct colour
ctx.strokeStyle = legendItem.fontColor; // for strikethrough effect
ctx.fillStyle = legendItem.fontColor; // render in correct colour
const textWidth = ctx.measureText(legendItem.text).width;
const textAlign = rtlHelper.textAlign(legendItem.textAlign || (legendItem.textAlign = labelOpts.textAlign));
@ -637,7 +636,7 @@ export default {
// lineWidth :
generateLabels(chart) {
const datasets = chart.data.datasets;
const {labels: {usePointStyle, pointStyle, textAlign, color}} = chart.legend.options;
const {labels: {usePointStyle, pointStyle, textAlign, color, useBorderRadius, borderRadius}} = chart.legend.options;
return chart._getSortedDatasetMetas().map((meta) => {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
@ -657,7 +656,7 @@ export default {
pointStyle: pointStyle || style.pointStyle,
rotation: style.rotation,
textAlign: textAlign || style.textAlign,
borderRadius: 0, // TODO: v4, default to style.borderRadius
borderRadius: useBorderRadius && (borderRadius || style.borderRadius),
// Below is extra data used for toggling the datasets
datasetIndex: meta.index

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

@ -61,7 +61,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -77,7 +77,7 @@ describe('Legend block tests', function() {
datasetIndex: 0
}, {
text: 'dataset2',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: true,
@ -93,7 +93,7 @@ describe('Legend block tests', function() {
datasetIndex: 1
}, {
text: 'dataset3',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -140,7 +140,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -156,7 +156,7 @@ describe('Legend block tests', function() {
datasetIndex: 0
}, {
text: 'dataset2',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: true,
@ -172,7 +172,7 @@ describe('Legend block tests', function() {
datasetIndex: 1
}, {
text: 'dataset3',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -226,7 +226,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset3',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -242,7 +242,7 @@ describe('Legend block tests', function() {
datasetIndex: 2
}, {
text: 'dataset2',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: true,
@ -258,7 +258,7 @@ describe('Legend block tests', function() {
datasetIndex: 1
}, {
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -291,10 +291,11 @@ describe('Legend block tests', function() {
hidden: true,
borderJoinStyle: 'miter',
data: [],
legendHidden: true
legendHidden: true,
}, {
label: 'dataset3',
borderWidth: 10,
borderRadius: 10,
borderColor: 'green',
pointStyle: 'crossRot',
data: []
@ -317,7 +318,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -333,7 +334,7 @@ describe('Legend block tests', function() {
datasetIndex: 0
}, {
text: 'dataset3',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -391,7 +392,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset3',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -407,7 +408,7 @@ describe('Legend block tests', function() {
datasetIndex: 2
}, {
text: 'dataset2',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: true,
@ -423,7 +424,7 @@ describe('Legend block tests', function() {
datasetIndex: 1
}, {
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -556,7 +557,51 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 5,
strokeStyle: 'red',
pointStyle: undefined,
rotation: undefined,
textAlign: undefined,
datasetIndex: 0
}]);
});
it('should use the borderRadius in the legend', function() {
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [{
label: 'dataset1',
backgroundColor: ['#f31', '#666', '#14e'],
borderWidth: [5, 10, 15],
borderColor: ['red', 'green', 'blue'],
borderRadius: 10,
data: []
}],
labels: []
},
options: {
plugins: {
legend: {
labels: {
useBorderRadius: true,
}
}
}
}
});
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 10,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -600,7 +645,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgb(50, 0, 0)',
fontColor: '#666',
hidden: false,
@ -659,7 +704,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -675,7 +720,7 @@ describe('Legend block tests', function() {
datasetIndex: 0
}, {
text: 'dataset2',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,
@ -735,7 +780,7 @@ describe('Legend block tests', function() {
expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
borderRadius: 0,
borderRadius: undefined,
fillStyle: 'rgba(0,0,0,0.1)',
fontColor: '#666',
hidden: false,
@ -751,7 +796,7 @@ describe('Legend block tests', function() {
datasetIndex: 0
}, {
text: 'dataset2',
borderRadius: 0,
borderRadius: undefined,
fillStyle: '#f31',
fontColor: '#666',
hidden: false,

12
types/index.d.ts vendored
View File

@ -2340,6 +2340,18 @@ export interface LegendOptions<TType extends ChartType> {
* @default false
*/
usePointStyle: boolean;
/**
* Label borderRadius will match corresponding borderRadius.
* @default false
*/
useBorderRadius: boolean;
/**
* Override the borderRadius to use.
* @default undefined
*/
borderRadius: number;
};
/**
* true for rendering the legends from right to left.