RadialLinear: add padding option for point labels (#8604)

* RadialLinear: add padding option for point labels

* lint

* only resolve padding once

Author: kurkle

docs/docs/axes/radial/linear.mdx

@@ -130,6 +130,7 @@ Namespace: `options.scales[scaleId].pointLabels`
 | `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.
 | `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](./general/fonts.md)
+| `padding` | `number` | Yes | 5 | Padding between chart and point labels.
 
 The scriptable context is described in [Options](../../general/options.md#scale) section.
 

src/scales/scale.radialLinear.js

@@ -91,11 +91,13 @@ function fitWithPointLabels(scale) {
   let i, textSize, pointPosition;
 
   const labelSizes = [];
+  const padding = [];
 
   const valueCount = scale.chart.data.labels.length;
   for (i = 0; i < valueCount; i++) {
-    pointPosition = scale.getPointPosition(i, scale.drawingArea + 5);
     const opts = scale.options.pointLabels.setContext(scale.getContext(i));
+    padding[i] = opts.padding;
+    pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i]);
     const plFont = toFont(opts.font);
     scale.ctx.font = plFont.string;
     textSize = measureLabelSize(scale.ctx, plFont.lineHeight, scale._pointLabels[i]);
@@ -140,7 +142,7 @@ function fitWithPointLabels(scale) {
   for (i = 0; i < valueCount; i++) {
     // Extra pixels out for some label spacing
     const extra = (i === 0 ? tickBackdropHeight / 2 : 0);
-    const pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
+    const pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + padding[i]);
 
     const angle = toDegrees(scale.getIndexAngle(i));
     const size = labelSizes[i];
@@ -592,7 +594,10 @@ RadialLinearScale.defaults = {
     // Function - Used to convert point labels
     callback(label) {
       return label;
-    }
+    },
+
+    // Number - Additionl padding between scale and pointLabel
+    padding: 5
   }
 };
 

test/fixtures/scale.radialLinear/pointLabels/padding.js

@@ -0,0 +1,49 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      labels: [
+        ['VENTE ET', 'COMMERCIALISATION'],
+        ['GESTION', 'FINANCIÈRE'],
+        'NUMÉRIQUE',
+        ['ADMINISTRATION', 'ET OPÉRATION'],
+        ['RESSOURCES', 'HUMAINES'],
+        'INNOVATION'
+      ],
+      datasets: [
+        {
+          radius: 12,
+          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: {
+            padding: 30
+          },
+          ticks: {
+            display: false,
+            stepSize: 1,
+            maxTicksLimit: 1
+          }
+        }
+      },
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/scale.radialLinear/pointLabels/padding.png

@@ -48,7 +48,8 @@ describe('Test the radial linear scale', function() {
         font: {
           size: 10
         },
-        callback: defaultConfig.pointLabels.callback
+        callback: defaultConfig.pointLabels.callback,
+        padding: 5
       }
     });