Make object notation usable for polarArea and radar (#10088)

* start to make object notation usable for polarArea
* enable object notation also for radar chart, test default key

docs/general/data-structures.md

@@ -69,7 +69,7 @@ options: {
 }
 ```
 
-When using the pie/doughnut chart type, the `parsing` object should have a `key` item that points to the value to look at. In this example, the doughnut chart will show two items with values 1500 and 500.
+When using the pie/doughnut, radar or polarArea chart type, the `parsing` object should have a `key` item that points to the value to look at. In this example, the doughnut chart will show two items with values 1500 and 500.
 
 ```javascript
 type: 'doughnut',
@@ -85,6 +85,11 @@ options: {
 }
 ```
 
+:::warning
+When using object notation in a radar chart you still need a labels array with labels for the chart to show correctly.
+:::
+
+
 ## Object
 
 ```javascript

src/controllers/controller.polarArea.js

@@ -1,6 +1,5 @@
 import DatasetController from '../core/core.datasetController';
-import {toRadians, PI} from '../helpers/index';
-import {formatNumber} from '../helpers/helpers.intl';
+import {toRadians, PI, formatNumber, _parseObjectDataRadialScale} from '../helpers/index';
 
 export default class PolarAreaController extends DatasetController {
 
@@ -23,6 +22,10 @@ export default class PolarAreaController extends DatasetController {
     };
   }
 
+  parseObjectData(meta, data, start, count) {
+    return _parseObjectDataRadialScale.bind(this)(meta, data, start, count);
+  }
+
   update(mode) {
     const arcs = this._cachedMeta.data;
 
@@ -50,7 +53,6 @@ export default class PolarAreaController extends DatasetController {
   updateElements(arcs, start, count, mode) {
     const reset = mode === 'reset';
     const chart = this.chart;
-    const dataset = this.getDataset();
     const opts = chart.options;
     const animationOpts = opts.animation;
     const scale = this._cachedMeta.rScale;
@@ -69,7 +71,7 @@ export default class PolarAreaController extends DatasetController {
       const arc = arcs[i];
       let startAngle = angle;
       let endAngle = angle + this._computeAngle(i, mode, defaultAngle);
-      let outerRadius = chart.getDataVisibility(i) ? scale.getDistanceFromCenterForValue(dataset.data[i]) : 0;
+      let outerRadius = chart.getDataVisibility(i) ? scale.getDistanceFromCenterForValue(this.getParsed(i).r) : 0;
       angle = endAngle;
 
       if (reset) {
@@ -96,12 +98,11 @@ export default class PolarAreaController extends DatasetController {
   }
 
   countVisibleElements() {
-    const dataset = this.getDataset();
     const meta = this._cachedMeta;
     let count = 0;
 
     meta.data.forEach((element, index) => {
-      if (!isNaN(dataset.data[index]) && this.chart.getDataVisibility(index)) {
+      if (!isNaN(this.getParsed(index).r) && this.chart.getDataVisibility(index)) {
         count++;
       }
     });

src/controllers/controller.radar.js

@@ -1,4 +1,5 @@
 import DatasetController from '../core/core.datasetController';
+import {_parseObjectDataRadialScale} from '../helpers/index';
 
 export default class RadarController extends DatasetController {
 
@@ -15,6 +16,10 @@ export default class RadarController extends DatasetController {
     };
   }
 
+  parseObjectData(meta, data, start, count) {
+    return _parseObjectDataRadialScale.bind(this)(meta, data, start, count);
+  }
+
   update(mode) {
     const meta = this._cachedMeta;
     const line = meta.dataset;
@@ -44,14 +49,13 @@ export default class RadarController extends DatasetController {
   }
 
   updateElements(points, start, count, mode) {
-    const dataset = this.getDataset();
     const scale = this._cachedMeta.rScale;
     const reset = mode === 'reset';
 
     for (let i = start; i < start + count; i++) {
       const point = points[i];
       const options = this.resolveDataElementOptions(i, point.active ? 'active' : mode);
-      const pointPosition = scale.getPointPositionForValue(i, dataset.data[i]);
+      const pointPosition = scale.getPointPositionForValue(i, this.getParsed(i).r);
 
       const x = reset ? scale.xCenter : pointPosition.x;
       const y = reset ? scale.yCenter : pointPosition.y;

src/helpers/helpers.config.js

@@ -351,3 +351,19 @@ function resolveKeysFromAllScopes(scopes) {
   }
   return Array.from(set);
 }
+
+export function _parseObjectDataRadialScale(meta, data, start, count) {
+  const {iScale} = meta;
+  const {key = 'r'} = this._parsing;
+  const parsed = new Array(count);
+  let i, ilen, index, item;
+
+  for (i = 0, ilen = count; i < ilen; ++i) {
+    index = i + start;
+    item = data[index];
+    parsed[i] = {
+      r: iScale.parse(resolveObjectKey(item, key), index)
+    };
+  }
+  return parsed;
+}

test/fixtures/controller.polarArea/parse-object-data.json

@@ -0,0 +1,27 @@
+{
+  "config": {
+    "type": "polarArea",
+    "data": {
+      "datasets": [
+        {
+          "data": [{"id": "Sales", "nested": {"value": 10}}, {"id": "Purchases", "nested": {"value": 20}}],
+          "backgroundColor": ["red", "blue"]
+        }
+      ]
+    },
+    "options": {
+      "responsive": false,
+      "plugins": {
+        "legend": false
+      },
+      "parsing": {
+        "key": "nested.value"
+      },
+      "scales": {
+        "r": {
+          "display": false
+        }
+      }
+    }
+  }
+}

test/specs/controller.radar.tests.js

@@ -74,6 +74,32 @@ describe('Chart.controllers.radar', function() {
     expect(meta.data[3].draw.calls.count()).toBe(1);
   });
 
+  it('should draw all elements with object notation and default key', function() {
+    var chart = window.acquireChart({
+      type: 'radar',
+      data: {
+        datasets: [{
+          data: [{r: 10}, {r: 20}, {r: 15}]
+        }],
+        labels: ['label1', 'label2', 'label3']
+      }
+    });
+
+    var meta = chart.getDatasetMeta(0);
+
+    spyOn(meta.dataset, 'draw');
+    spyOn(meta.data[0], 'draw');
+    spyOn(meta.data[1], 'draw');
+    spyOn(meta.data[2], 'draw');
+
+    chart.update();
+
+    expect(meta.dataset.draw.calls.count()).toBe(1);
+    expect(meta.data[0].draw.calls.count()).toBe(1);
+    expect(meta.data[1].draw.calls.count()).toBe(1);
+    expect(meta.data[2].draw.calls.count()).toBe(1);
+  });
+
   it('should update elements', function() {
     var chart = window.acquireChart({
       type: 'radar',