From: Evert Timberg <evert.timberg@gmail.com>
Date: Fri, 15 Apr 2022 22:31:09 +0000 (-0400)
Subject: Enable configuration of radial scale point label border radius (#10293)
X-Git-Tag: v3.8.0~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5c3dc932b615afa61580d06950712f79cfc7c4ef;p=thirdparty%2FChart.js.git

Enable configuration of radial scale point label border radius (#10293)
---

diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md
index 18a6f7b63..6e0c681bf 100644
--- a/docs/axes/radial/linear.md
+++ b/docs/axes/radial/linear.md
@@ -120,6 +120,7 @@ Namespace: `options.scales[scaleId].pointLabels`
 | ---- | ---- | ------- | ------- | -----------
 | `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label.
 | `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
+| `borderRadius` | `number`\|`object` | `true` | `0` | Border radius of the point label
 | `display` | `boolean` | | `true` | If true, point labels are shown.
 | `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
 | `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label.
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index 199ba7186..724a4be4e 100644
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -1,10 +1,10 @@
 import defaults from '../core/core.defaults';
-import {_longestText, renderText} from '../helpers/helpers.canvas';
+import {_longestText, addRoundedRectPath, renderText} from '../helpers/helpers.canvas';
 import {HALF_PI, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
 import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
-import {createContext, toFont, toPadding} from '../helpers/helpers.options';
+import {createContext, toFont, toPadding, toTRBLCorners} from '../helpers/helpers.options';
 
 function getTickBackdropHeight(opts) {
   const tickOpts = opts.ticks;
@@ -208,9 +208,28 @@ function drawPointLabels(scale, labelCount) {
     const {backdropColor} = optsAtIndex;
 
     if (!isNullOrUndef(backdropColor)) {
+      const borderRadius = toTRBLCorners(optsAtIndex.borderRadius);
       const padding = toPadding(optsAtIndex.backdropPadding);
       ctx.fillStyle = backdropColor;
-      ctx.fillRect(left - padding.left, top - padding.top, right - left + padding.width, bottom - top + padding.height);
+
+      const backdropLeft = left - padding.left;
+      const backdropTop = top - padding.top;
+      const backdropWidth = right - left + padding.width;
+      const backdropHeight = bottom - top + padding.height;
+
+      if (Object.values(borderRadius).some(v => v !== 0)) {
+        ctx.beginPath();
+        addRoundedRectPath(ctx, {
+          x: backdropLeft,
+          y: backdropTop,
+          w: backdropWidth,
+          h: backdropHeight,
+          radius: borderRadius,
+        });
+        ctx.fill();
+      } else {
+        ctx.fillRect(backdropLeft, backdropTop, backdropWidth, backdropHeight);
+      }
     }
 
     renderText(
diff --git a/test/fixtures/scale.radialLinear/pointLabels/border-radius.js b/test/fixtures/scale.radialLinear/pointLabels/border-radius.js
new file mode 100644
index 000000000..f3d334726
--- /dev/null
+++ b/test/fixtures/scale.radialLinear/pointLabels/border-radius.js
@@ -0,0 +1,51 @@
+module.exports = {
+  tolerance: 0.01,
+  config: {
+    type: 'radar',
+    data: {
+      labels: [
+        ['VENTE ET', 'COMMERCIALISATION'],
+        ['GESTION', 'FINANCIÈRE'],
+        'NUMÉRIQUE',
+        ['ADMINISTRATION', 'ET OPÉRATION'],
+        ['RESSOURCES', 'HUMAINES'],
+        'INNOVATION'
+      ],
+      datasets: [
+        {
+          backgroundColor: '#E43E51',
+          label: 'Compétences entrepreunariales',
+          data: [3, 2, 2, 1, 3, 1]
+        }
+      ]
+    },
+    options: {
+      plugins: {
+        legend: false,
+        tooltip: false,
+        filler: false
+      },
+      scales: {
+        r: {
+          min: 0,
+          max: 3,
+          pointLabels: {
+            backdropColor: 'blue',
+            backdropPadding: {left: 5, right: 5, top: 2, bottom: 2},
+            borderRadius: 10,
+          },
+          ticks: {
+            display: false,
+            stepSize: 1,
+            maxTicksLimit: 1
+          }
+        }
+      },
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};
diff --git a/test/fixtures/scale.radialLinear/pointLabels/border-radius.png b/test/fixtures/scale.radialLinear/pointLabels/border-radius.png
new file mode 100644
index 000000000..30aba3ec0
Binary files /dev/null and b/test/fixtures/scale.radialLinear/pointLabels/border-radius.png differ
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 5f8155cb5..e19439e68 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -3380,6 +3380,13 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
      */
     backdropPadding: Scriptable<number | ChartArea, ScriptableScalePointLabelContext>;
 
+    /**
+     * Border radius
+     * @default 0
+     * @since 3.8.0
+     */
+    borderRadius: Scriptable<number | BorderRadius, ScriptableScalePointLabelContext>;
+
     /**
      * if true, point labels are shown.
      * @default true