Point label specific scriptable context (#9373)

chartjs · Jul 9, 2021 · 774c444 · 774c444
1 parent ab613a3
commit 774c444
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 7 deletions.
diff --git a/docs/general/options.md b/docs/general/options.md
@@ -118,6 +118,7 @@ There are multiple levels of context objects:
     * `data`
   * `scale`
     * `tick`
+    * `pointLabel` (only used in the radial linear scale)
   * `tooltip`
 
 Each level inherits its parent(s) and any contextual information stored in the parent is available through the child.

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -88,7 +88,7 @@ function fitWithPointLabels(scale) {
 
   const valueCount = scale.getLabels().length;
   for (let i = 0; i < valueCount; i++) {
-    const opts = scale.options.pointLabels.setContext(scale.getContext(i));
+    const opts = scale.options.pointLabels.setContext(scale.getPointLabelContext(i));
     padding[i] = opts.padding;
     const pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i]);
     const plFont = toFont(opts.font);
@@ -194,7 +194,7 @@ function drawPointLabels(scale, labelCount) {
   const {ctx, options: {pointLabels}} = scale;
 
   for (let i = labelCount - 1; i >= 0; i--) {
-    const optsAtIndex = pointLabels.setContext(scale.getContext(i));
+    const optsAtIndex = pointLabels.setContext(scale.getPointLabelContext(i));
     const plFont = toFont(optsAtIndex.font);
     const {x, y, textAlign, left, top, right, bottom} = scale._pointLabelItems[i];
     const {backdropColor} = optsAtIndex;
@@ -264,6 +264,14 @@ function numberOrZero(param) {
   return isNumber(param) ? param : 0;
 }
 
+function createPointLabelContext(parent, index, label) {
+  return Object.assign(Object.create(parent), {
+    label,
+    index,
+    type: 'pointLabel'
+  });
+}
+
 export default class RadialLinearScale extends LinearScaleBase {
 
   constructor(cfg) {
@@ -398,6 +406,16 @@ export default class RadialLinearScale extends LinearScaleBase {
     return me.options.reverse ? me.max - scaledDistance : me.min + scaledDistance;
   }
 
+  getPointLabelContext(index) {
+    const me = this;
+    const pointLabels = me._pointLabels || [];
+
+    if (index >= 0 && index < pointLabels.length) {
+      const pointLabel = pointLabels[index];
+      return createPointLabelContext(me.getContext(), index, pointLabel);
+    }
+  }
+
   getPointPosition(index, distanceFromCenter) {
     const me = this;
     const angle = me.getIndexAngle(index) - HALF_PI;
@@ -474,7 +492,7 @@ export default class RadialLinearScale extends LinearScaleBase {
       ctx.save();
 
       for (i = me.getLabels().length - 1; i >= 0; i--) {
-        const optsAtIndex = angleLines.setContext(me.getContext(i));
+        const optsAtIndex = angleLines.setContext(me.getPointLabelContext(i));
         const {color, lineWidth} = optsAtIndex;
 
         if (!lineWidth || !color) {

diff --git a/test/fixtures/scale.radialLinear/pointLabels/scriptable-color-small.js b/test/fixtures/scale.radialLinear/pointLabels/scriptable-color-small.js
@@ -0,0 +1,33 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 1, 3, 12, 19, 3, 5, 1, 3, 12, 19, 3, 5, 1, 3, 12, 19, 3, 5, 1, 3]
+      }]
+    },
+    options: {
+      scales: {
+        r: {
+          ticks: {
+            display: false,
+          },
+          angleLines: {
+            color: (ctx) => {
+              return ctx.index % 2 === 0 ? 'green' : 'red';
+            }
+          },
+          pointLabels: {
+            display: false,
+          }
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+    width: 300,
+  }
+};
diff --git a/test/fixtures/scale.radialLinear/pointLabels/scriptable-color-small.png b/test/fixtures/scale.radialLinear/pointLabels/scriptable-color-small.png
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -1278,6 +1278,14 @@ export interface ScriptableScaleContext {
   tick: Tick;
 }
 
+export interface ScriptableScalePointLabelContext {
+  chart: Chart;
+  scale: Scale;
+  index: number;
+  label: string;
+}
+
+
 export const Ticks: {
   formatters: {
     /**
@@ -3157,12 +3165,12 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
      * Background color of the point label.
      * @default undefined
      */
-    backdropColor: Scriptable<Color, ScriptableScaleContext>;
+    backdropColor: Scriptable<Color, ScriptableScalePointLabelContext>;
     /**
      * Padding of label backdrop.
      * @default 2
      */
-    backdropPadding: Scriptable<number | ChartArea, ScriptableScaleContext>;
+    backdropPadding: Scriptable<number | ChartArea, ScriptableScalePointLabelContext>;
 
     /**
      * if true, point labels are shown.
@@ -3173,10 +3181,10 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
      * Color of label
      * @see Defaults.color
      */
-    color: Scriptable<Color, ScriptableScaleContext>;
+    color: Scriptable<Color, ScriptableScalePointLabelContext>;
     /**
      */
-    font: Scriptable<FontSpec, ScriptableScaleContext>;
+    font: Scriptable<FontSpec, ScriptableScalePointLabelContext>;
 
     /**
      * Callback function to transform data labels to point labels. The default implementation simply returns the current string.