From a452094f5d1637b99b01bacd06a78b5ab4666cfa Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 9 Jul 2016 09:05:02 -0400 Subject: [PATCH] Add polar area start angle setting --- docs/06-Polar-Area-Chart.md | 1 + src/controllers/controller.polarArea.js | 10 +++--- test/controller.polarArea.tests.js | 46 +++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 4 deletions(-) diff --git a/docs/06-Polar-Area-Chart.md b/docs/06-Polar-Area-Chart.md index 3b94b731837..df982dc66b6 100644 --- a/docs/06-Polar-Area-Chart.md +++ b/docs/06-Polar-Area-Chart.md @@ -76,6 +76,7 @@ These are the customisation options specific to Polar Area charts. These options Name | Type | Default | Description --- | --- | --- | --- +startAngle | Number | -0.5 * Math.PI | Sets the starting angle for the first item in a dataset scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid. *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale). *scale*.lineArc | Boolean | true | When true, lines are circular. diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 086ef5972de..9870546245b 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -20,6 +20,7 @@ module.exports = function(Chart) { animateScale: true }, + startAngle: -0.5 * Math.PI, aspectRatio: 1, legendCallback: function(chart) { var text = []; @@ -154,9 +155,10 @@ module.exports = function(Chart) { } } - var negHalfPI = -0.5 * Math.PI; + //var negHalfPI = -0.5 * Math.PI; + var datasetStartAngle = opts.startAngle; var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); - var startAngle = (negHalfPI) + (circumference * visibleCount); + var startAngle = datasetStartAngle + (circumference * visibleCount); var endAngle = startAngle + (arc.hidden ? 0 : circumference); var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); @@ -173,8 +175,8 @@ module.exports = function(Chart) { y: centerY, innerRadius: 0, outerRadius: reset ? resetRadius : distance, - startAngle: reset && animationOpts.animateRotate ? negHalfPI : startAngle, - endAngle: reset && animationOpts.animateRotate ? negHalfPI : endAngle, + startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle, + endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle, label: getValueAtIndexOrDefault(labels, index, labels[index]) } }); diff --git a/test/controller.polarArea.tests.js b/test/controller.polarArea.tests.js index 9d9b0881231..6ed0726e0fd 100644 --- a/test/controller.polarArea.tests.js +++ b/test/controller.polarArea.tests.js @@ -159,6 +159,52 @@ describe('Polar area controller tests', function() { })); }); + it('should update elements with start angle from options', function() { + var chart = window.acquireChart({ + type: 'polarArea', + data: { + datasets: [{ + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] + }, + options: { + showLines: true, + startAngle: 0, // default is -0.5 * Math.PI + elements: { + arc: { + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 255, 0)', + borderWidth: 1.2 + } + } + } + }); + + var meta = chart.getDatasetMeta(0); + expect(meta.data.length).toBe(4); + + [ { o: 156, s: 0, e: 0.5 * Math.PI }, + { o: 211, s: 0.5 * Math.PI, e: Math.PI }, + { o: 45, s: Math.PI, e: 1.5 * Math.PI }, + { o: 0, s: 1.5 * Math.PI, e: 2.0 * Math.PI } + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(256); + expect(meta.data[i]._model.y).toBeCloseToPixel(272); + expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0); + expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o); + expect(meta.data[i]._model.startAngle).toBe(expected.s); + expect(meta.data[i]._model.endAngle).toBe(expected.e); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 255, 0)', + borderWidth: 1.2, + label: chart.data.labels[i] + })); + }); + }); + it('should handle number of data point changes in update', function() { var chart = window.acquireChart({ type: 'polarArea',