From: Jacco van den Berg Date: Thu, 18 Aug 2022 11:34:18 +0000 (+0200) Subject: Use borderRadius for legend and remove fallbacks (#10551) X-Git-Tag: v4.0.0~54 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d09e424a0a8f17dd290ef898e5709293fb950977;p=thirdparty%2FChart.js.git Use borderRadius for legend and remove fallbacks (#10551) * Use borderRadius for legend * re enable test * fix lint * add note in migration guide * Update types/index.d.ts Co-authored-by: Jukka Kurkela --- diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index 3144a7949..04045b3fd 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -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 diff --git a/docs/migration/v4-migration.md b/docs/migration/v4-migration.md index a7ec15b83..255fa9cec 100644 --- a/docs/migration/v4-migration.md +++ b/docs/migration/v4-migration.md @@ -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 `` to `` +* The order of the `ChartMeta` parameters have been changed from `` to ``. + +### General +* Removed fallback to `fontColor` for the legend text and strikethrough color. diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index c4d7564a5..a1045efde 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -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 diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index 9c7f340f1..aa1b65ec8 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -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, diff --git a/types/index.d.ts b/types/index.d.ts index 566b12790..e40319e12 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -2340,6 +2340,18 @@ export interface LegendOptions { * @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.