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 e59aedfb98a8189ab28c9eef311b491692e563cd..9ac7af0c3ac512fcbd589061ca8c7f7d4585a016 100644 (file)
--- 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 (file)
index 0000000..f8fce27
--- /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 (file)
index 0000000..9594be9
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 (file)
index 0000000..ef83f1b
--- /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 (file)
index 0000000..df9b4bf
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 050bd68b80f1e487f7e1efbd3f5a34f2bf2aea2b..380c1b46e8ad23365a35feb9c1bcc2f7765c9c8d 100644 (file)
--- 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({