From d6d189c804b7a1fda98466acf27e76983cc4074c Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 10 Apr 2021 15:05:34 -0400 Subject: [PATCH] Legend boxes support borderRadius (#8875) --- docs/configuration/legend.md | 4 ++ src/plugins/plugin.legend.js | 24 +++++++- .../borderRadius/legend-border-radius.js | 55 ++++++++++++++++++ .../borderRadius/legend-border-radius.png | Bin 0 -> 15307 bytes test/specs/plugin.legend.tests.js | 20 +++++++ types/index.esm.d.ts | 6 ++ 6 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 test/fixtures/plugin.legend/borderRadius/legend-border-radius.js create mode 100644 test/fixtures/plugin.legend/borderRadius/legend-border-radius.png diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index e1ff2cbf8..0be48c975 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -84,6 +84,10 @@ Items passed to the legend `onClick` function are the ones returned from `labels // Label that will be displayed text: string, + // Border radius of the legend item. + // Introduced in 3.1.0 + borderRadius?: number | BorderRadius, + // Index of the associated dataset datasetIndex: number, diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index e1d3c65c1..b30ba41d3 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -1,13 +1,14 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; import layouts from '../core/core.layouts'; -import {drawPoint, renderText} from '../helpers/helpers.canvas'; +import {addRoundedRectPath, drawPoint, renderText} from '../helpers/helpers.canvas'; import { callback as call, valueOrDefault, toFont, toPadding, getRtlAdapter, overrideTextDirection, restoreTextDirection, clipArea, unclipArea } from '../helpers/index'; import {_toLeftRightCenter, _alignStartEnd, _textX} from '../helpers/helpers.extras'; +import {toTRBLCorners} from '../helpers/helpers.options'; /** * @typedef { import("../platform/platform.base").ChartEvent } ChartEvent */ @@ -341,10 +342,26 @@ export class Legend extends Element { // Draw box as legend symbol // Adjust position when boxHeight < fontSize (want it centered) const yBoxTop = y + Math.max((fontSize - boxHeight) / 2, 0); + const xBoxLeft = rtlHelper.leftForLtr(x, boxWidth); + const borderRadius = toTRBLCorners(legendItem.borderRadius); + + ctx.beginPath(); + + if (Object.values(borderRadius).some(v => v !== 0)) { + addRoundedRectPath(ctx, { + x: xBoxLeft, + y: yBoxTop, + w: boxWidth, + h: boxHeight, + radius: borderRadius, + }); + } else { + ctx.rect(xBoxLeft, yBoxTop, boxWidth, boxHeight); + } - ctx.fillRect(rtlHelper.leftForLtr(x, boxWidth), yBoxTop, boxWidth, boxHeight); + ctx.fill(); if (lineWidth !== 0) { - ctx.strokeRect(rtlHelper.leftForLtr(x, boxWidth), yBoxTop, boxWidth, boxHeight); + ctx.stroke(); } } @@ -653,6 +670,7 @@ export default { pointStyle: pointStyle || style.pointStyle, rotation: style.rotation, textAlign: textAlign || style.textAlign, + borderRadius: 0, // TODO: v4, default to style.borderRadius // Below is extra data used for toggling the datasets datasetIndex: meta.index diff --git a/test/fixtures/plugin.legend/borderRadius/legend-border-radius.js b/test/fixtures/plugin.legend/borderRadius/legend-border-radius.js new file mode 100644 index 000000000..d765134ba --- /dev/null +++ b/test/fixtures/plugin.legend/borderRadius/legend-border-radius.js @@ -0,0 +1,55 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [ + { + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3], + borderWidth: 1, + borderColor: '#FF0000', + backgroundColor: '#00FF00', + }, + { + label: '# of Points', + data: [7, 11, 5, 8, 3, 7], + borderWidth: 2, + borderColor: '#FF00FF', + backgroundColor: '#0000FF', + } + ] + }, + options: { + scales: { + x: {display: false}, + y: {display: false} + }, + plugins: { + title: false, + tooltip: false, + filler: false, + legend: { + labels: { + generateLabels: (chart) => { + const items = Chart.defaults.plugins.legend.labels.generateLabels(chart); + + for (const item of items) { + item.borderRadius = 5; + } + + return items; + } + } + } + } + } + }, + options: { + spriteText: true, + canvas: { + width: 512, + height: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/borderRadius/legend-border-radius.png b/test/fixtures/plugin.legend/borderRadius/legend-border-radius.png new file mode 100644 index 0000000000000000000000000000000000000000..600c3db1f049d8d7c5f79b04115cc16b84da95aa GIT binary patch literal 15307 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 literal 0 Hc-jL100001 diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index 701b07a82..2006dabe0 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -61,6 +61,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -76,6 +77,7 @@ describe('Legend block tests', function() { datasetIndex: 0 }, { text: 'dataset2', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: true, @@ -91,6 +93,7 @@ describe('Legend block tests', function() { datasetIndex: 1 }, { text: 'dataset3', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -137,6 +140,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -152,6 +156,7 @@ describe('Legend block tests', function() { datasetIndex: 0 }, { text: 'dataset2', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: true, @@ -167,6 +172,7 @@ describe('Legend block tests', function() { datasetIndex: 1 }, { text: 'dataset3', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -220,6 +226,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset3', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -235,6 +242,7 @@ describe('Legend block tests', function() { datasetIndex: 2 }, { text: 'dataset2', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: true, @@ -250,6 +258,7 @@ describe('Legend block tests', function() { datasetIndex: 1 }, { text: 'dataset1', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -308,6 +317,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -323,6 +333,7 @@ describe('Legend block tests', function() { datasetIndex: 0 }, { text: 'dataset3', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -380,6 +391,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset3', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -395,6 +407,7 @@ describe('Legend block tests', function() { datasetIndex: 2 }, { text: 'dataset2', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: true, @@ -410,6 +423,7 @@ describe('Legend block tests', function() { datasetIndex: 1 }, { text: 'dataset1', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -542,6 +556,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -585,6 +600,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: 'rgb(50, 0, 0)', fontColor: '#666', hidden: false, @@ -643,6 +659,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -658,6 +675,7 @@ describe('Legend block tests', function() { datasetIndex: 0 }, { text: 'dataset2', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, @@ -717,6 +735,7 @@ describe('Legend block tests', function() { expect(chart.legend.legendItems).toEqual([{ text: 'dataset1', + borderRadius: 0, fillStyle: 'rgba(0,0,0,0.1)', fontColor: '#666', hidden: false, @@ -732,6 +751,7 @@ describe('Legend block tests', function() { datasetIndex: 0 }, { text: 'dataset2', + borderRadius: 0, fillStyle: '#f31', fontColor: '#666', hidden: false, diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 71f01be03..a0535beb3 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2009,6 +2009,12 @@ export interface LegendItem { */ text: string; + /** + * Border radius of the legend box + * @since 3.1.0 + */ + borderRadius?: number | BorderRadius; + /** * Index of the associated dataset */ -- 2.47.3