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 <jukka.kurkela@gmail.com>

diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md
index 3144a79495a9e1463d51feacef5772f8dbeb9645..04045b3fdf2554b59f3382081fd75ea05e5d9787 100644 (file)
--- 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 a7ec15b8394337ba2a78d90627d82f4b40509ac6..255fa9cec1c0b38bddc3754a6c3804e31c51b289 100644 (file)
--- 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 `<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.

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index c4d7564a55b726a3218f7c32a26593cd130e4da7..a1045efde5fc57214a1326691c1dff934faf8be7 100644 (file)
--- 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 9c7f340f13e5968af4db3589d93d002f676fb551..aa1b65ec82ec98ed54d24dbeeb19e6ed02183b2c 100644 (file)
--- 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 566b12790dbd4d8d42a33e082f3ae03e33a3dfd7..e40319e12d42a3fd86a28748c4880460a1024a91 100644 (file)
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -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.