From: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com> Date: Sat, 12 Feb 2022 15:23:31 +0000 (+0100) Subject: Make object notation usable for polarArea and radar (#10088) X-Git-Tag: v3.8.0~41 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ed68557a99cb2e28b032f4a1c376dc24a9a0837c;p=thirdparty%2FChart.js.git 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 --- diff --git a/docs/general/data-structures.md b/docs/general/data-structures.md index 65b877551..6f3c808f2 100644 --- a/docs/general/data-structures.md +++ b/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 diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 84a9568a4..92642a32f 100644 --- a/src/controllers/controller.polarArea.js +++ b/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++; } }); diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 36d53b030..e1a525f31 100644 --- a/src/controllers/controller.radar.js +++ b/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; diff --git a/src/helpers/helpers.config.js b/src/helpers/helpers.config.js index e6b30b732..058739d94 100644 --- a/src/helpers/helpers.config.js +++ b/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; +} diff --git a/test/fixtures/controller.polarArea/parse-object-data.json b/test/fixtures/controller.polarArea/parse-object-data.json new file mode 100644 index 000000000..17b8ebe59 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/test/fixtures/controller.polarArea/parse-object-data.png b/test/fixtures/controller.polarArea/parse-object-data.png new file mode 100644 index 000000000..dc2481309 Binary files /dev/null and b/test/fixtures/controller.polarArea/parse-object-data.png differ diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index b25aa2b7d..7e691d01c 100644 --- a/test/specs/controller.radar.tests.js +++ b/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',