radialLinear: Hide pointLabels of hidden data (#10018)

* radialLinear: Hide pointLabels of hidden data * filter after map
chartjs · Dec 22, 2021 · f1c9931 · f1c9931
1 parent 2970e70
commit f1c9931
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -86,7 +86,7 @@ function fitWithPointLabels(scale) {
   const labelSizes = [];
   const padding = [];
 
-  const valueCount = scale.getLabels().length;
+  const valueCount = scale._pointLabels.length;
   for (let i = 0; i < valueCount; i++) {
     const opts = scale.options.pointLabels.setContext(scale.getPointLabelContext(i));
     padding[i] = opts.padding;
@@ -129,7 +129,7 @@ function fitWithPointLabels(scale) {
 
 function buildPointLabelItems(scale, labelSizes, padding) {
   const items = [];
-  const valueCount = scale.getLabels().length;
+  const valueCount = scale._pointLabels.length;
   const opts = scale.options;
   const tickBackdropHeight = getTickBackdropHeight(opts);
   const outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
@@ -321,10 +321,12 @@ export default class RadialLinearScale extends LinearScaleBase {
     LinearScaleBase.prototype.generateTickLabels.call(this, ticks);
 
     // Point labels
-    this._pointLabels = this.getLabels().map((value, index) => {
-      const label = callCallback(this.options.pointLabels.callback, [value, index], this);
-      return label || label === 0 ? label : '';
-    });
+    this._pointLabels = this.getLabels()
+      .map((value, index) => {
+        const label = callCallback(this.options.pointLabels.callback, [value, index], this);
+        return label || label === 0 ? label : '';
+      })
+      .filter((v, i) => this.chart.getDataVisibility(i));
   }
 
   fit() {
@@ -369,7 +371,7 @@ export default class RadialLinearScale extends LinearScaleBase {
   }
 
   getIndexAngle(index) {
-    const angleMultiplier = TAU / this.getLabels().length;
+    const angleMultiplier = TAU / this._pointLabels.length;
     const startAngle = this.options.startAngle || 0;
     return _normalizeAngle(index * angleMultiplier + toRadians(startAngle));
   }
@@ -441,7 +443,7 @@ export default class RadialLinearScale extends LinearScaleBase {
       const ctx = this.ctx;
       ctx.save();
       ctx.beginPath();
-      pathRadiusLine(this, this.getDistanceFromCenterForValue(this._endValue), circular, this.getLabels().length);
+      pathRadiusLine(this, this.getDistanceFromCenterForValue(this._endValue), circular, this._pointLabels.length);
       ctx.closePath();
       ctx.fillStyle = backgroundColor;
       ctx.fill();
@@ -456,7 +458,7 @@ export default class RadialLinearScale extends LinearScaleBase {
     const ctx = this.ctx;
     const opts = this.options;
     const {angleLines, grid} = opts;
-    const labelCount = this.getLabels().length;
+    const labelCount = this._pointLabels.length;
 
     let i, offset, position;
 
@@ -477,7 +479,7 @@ export default class RadialLinearScale extends LinearScaleBase {
     if (angleLines.display) {
       ctx.save();
 
-      for (i = this.getLabels().length - 1; i >= 0; i--) {
+      for (i = labelCount - 1; i >= 0; i--) {
         const optsAtIndex = angleLines.setContext(this.getPointLabelContext(i));
         const {color, lineWidth} = optsAtIndex;
 

diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
@@ -369,6 +369,22 @@ describe('Test the radial linear scale', function() {
     expect(chart.scales.r._pointLabels).toEqual([0, '', '', '', '', '']);
   });
 
+  it('Should build point labels considering hidden data', function() {
+    const chart = window.acquireChart({
+      type: 'polarArea',
+      data: {
+        datasets: [{
+          data: [10, 5, 0, 25, 78, 20]
+        }],
+        labels: ['a', 'b', 'c', 'd', 'e', 'f']
+      }
+    });
+    chart.toggleDataVisibility(3);
+    chart.update();
+
+    expect(chart.scales.r._pointLabels).toEqual(['a', 'b', 'c', 'e', 'f']);
+  });
+
   it('should correctly set the center point', function() {
     var chart = window.acquireChart({
       type: 'radar',