From: Shayne Linhart <8146903+slinhart@users.noreply.github.com> Date: Sun, 17 Jun 2018 15:56:57 +0000 (-0600) Subject: Added 'angle' option to Polar Charts (#5279) X-Git-Tag: v2.7.3~1^2~28 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a0a195f353467a71cbf73aef086249902c53c5a4;p=thirdparty%2FChart.js.git Added 'angle' option to Polar Charts (#5279) * added 'angle' option to polar charts. image comparison test is work in progress; not currently passing * removed unnecessary variable assignment * code cleanup based on PR; for 'angle' option on polarCharts * Made polar chart image comparison test pass by removing debug flag. Also explicitly marked _computeAngle as private. * Removed visibleCount computation in polar chart * split out code related to updating the radius in polar chart's update function, into it's own 'updateRadius' function * made updateRadius method private * fix linting error * updated polar charts to read custom angles from "chart.options.elements.arc.angle" instead of "chart.options.angle" --- diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index e59aedfb9..9ac7af0c3 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -117,25 +117,47 @@ module.exports = function(Chart) { linkScales: helpers.noop, update: function(reset) { + var me = this; + var dataset = me.getDataset(); + var meta = me.getMeta(); + var start = me.chart.options.startAngle || 0; + var starts = me._starts = []; + var angles = me._angles = []; + var i, ilen, angle; + + me._updateRadius(); + + meta.count = me.countVisibleElements(); + + for (i = 0, ilen = dataset.data.length; i < ilen; i++) { + starts[i] = start; + angle = me._computeAngle(i); + angles[i] = angle; + start += angle; + } + + helpers.each(meta.data, function(arc, index) { + me.updateElement(arc, index, reset); + }); + }, + + /** + * @private + */ + _updateRadius: function() { var me = this; var chart = me.chart; var chartArea = chart.chartArea; - var meta = me.getMeta(); var opts = chart.options; var arcOpts = opts.elements.arc; var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); + chart.outerRadius = Math.max((minSize - arcOpts.borderWidth / 2) / 2, 0); chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0); chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount(); me.outerRadius = chart.outerRadius - (chart.radiusLength * me.index); me.innerRadius = me.outerRadius - chart.radiusLength; - - meta.count = me.countVisibleElements(); - - helpers.each(meta.data, function(arc, index) { - me.updateElement(arc, index, reset); - }); }, updateElement: function(arc, index, reset) { @@ -147,25 +169,14 @@ module.exports = function(Chart) { var scale = chart.scale; var labels = chart.data.labels; - var circumference = me.calculateCircumference(dataset.data[index]); var centerX = scale.xCenter; var centerY = scale.yCenter; - // If there is NaN data before us, we need to calculate the starting angle correctly. - // We could be way more efficient here, but its unlikely that the polar area chart will have a lot of data - var visibleCount = 0; - var meta = me.getMeta(); - for (var i = 0; i < index; ++i) { - if (!isNaN(dataset.data[i]) && !meta.data[i].hidden) { - ++visibleCount; - } - } - // var negHalfPI = -0.5 * Math.PI; var datasetStartAngle = opts.startAngle; var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); - var startAngle = datasetStartAngle + (circumference * visibleCount); - var endAngle = startAngle + (arc.hidden ? 0 : circumference); + var startAngle = me._starts[index]; + var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]); var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); @@ -211,12 +222,31 @@ module.exports = function(Chart) { return count; }, - calculateCircumference: function(value) { + /** + * @private + */ + _computeAngle: function(index) { + var me = this; var count = this.getMeta().count; - if (count > 0 && !isNaN(value)) { - return (2 * Math.PI) / count; + var dataset = me.getDataset(); + var meta = me.getMeta(); + + if (isNaN(dataset.data[index]) || meta.data[index].hidden) { + return 0; } - return 0; + + // Scriptable options + var context = { + chart: me.chart, + dataIndex: index, + dataset: dataset, + datasetIndex: me.index + }; + + return helpers.options.resolve([ + me.chart.options.elements.arc.angle, + (2 * Math.PI) / count + ], context, index); } }); }; diff --git a/test/fixtures/controller.polarArea/angle-array.json b/test/fixtures/controller.polarArea/angle-array.json new file mode 100644 index 000000000..f8fce27b5 --- /dev/null +++ b/test/fixtures/controller.polarArea/angle-array.json @@ -0,0 +1,34 @@ +{ + "config": { + "type": "polarArea", + "data": { + "labels": ["A", "B", "C", "D", "E"], + "datasets": [{ + "data": [11, 16, 21, 7, 10], + "backgroundColor": [ + "rgba(255, 99, 132, 0.8)", + "rgba(54, 162, 235, 0.8)", + "rgba(255, 206, 86, 0.8)", + "rgba(75, 192, 192, 0.8)", + "rgba(153, 102, 255, 0.8)", + "rgba(255, 159, 64, 0.8)" + ] + }] + }, + "options": { + "elements": { + "arc": { + "angle": [ + 1.0566, 1.7566, 1.0566, 2.1566, 0.2566 + ] + } + }, + "responsive": false, + "legend": false, + "title": false, + "scale": { + "display": false + } + } + } +} diff --git a/test/fixtures/controller.polarArea/angle-array.png b/test/fixtures/controller.polarArea/angle-array.png new file mode 100644 index 000000000..9594be93a Binary files /dev/null and b/test/fixtures/controller.polarArea/angle-array.png differ diff --git a/test/fixtures/controller.polarArea/angle-undefined.json b/test/fixtures/controller.polarArea/angle-undefined.json new file mode 100644 index 000000000..ef83f1b87 --- /dev/null +++ b/test/fixtures/controller.polarArea/angle-undefined.json @@ -0,0 +1,27 @@ +{ + "config": { + "type": "polarArea", + "data": { + "labels": ["A", "B", "C", "D", "E"], + "datasets": [{ + "data": [11, 16, 21, 7, 10], + "backgroundColor": [ + "rgba(255, 99, 132, 0.8)", + "rgba(54, 162, 235, 0.8)", + "rgba(255, 206, 86, 0.8)", + "rgba(75, 192, 192, 0.8)", + "rgba(153, 102, 255, 0.8)", + "rgba(255, 159, 64, 0.8)" + ] + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scale": { + "display": false + } + } + } +} diff --git a/test/fixtures/controller.polarArea/angle-undefined.png b/test/fixtures/controller.polarArea/angle-undefined.png new file mode 100644 index 000000000..df9b4bf79 Binary files /dev/null and b/test/fixtures/controller.polarArea/angle-undefined.png differ diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js index 050bd68b8..380c1b46e 100644 --- a/test/specs/controller.polarArea.tests.js +++ b/test/specs/controller.polarArea.tests.js @@ -1,3 +1,5 @@ +describe('auto', jasmine.specsFromFixtures('controller.polarArea')); + describe('Chart.controllers.polarArea', function() { it('should be constructed', function() { var chart = window.acquireChart({