diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 380c8bddb51..d55dcf47ddc 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -156,7 +156,7 @@ module.exports = function(Chart) { var offset = {x: 0, y: 0}; // If the chart's circumference isn't a full circle, calculate minSize as a ratio of the width/height of the arc - if (this.chart.options.circumference && this.chart.options.circumference < Math.PI * 2.0) { + if (this.chart.options.circumference < Math.PI * 2.0) { var startAngle = this.chart.options.rotation % (Math.PI * 2.0); startAngle += Math.PI * 2.0 * (startAngle >= Math.PI ? -1 : startAngle < -Math.PI ? 1 : 0); var endAngle = startAngle + this.chart.options.circumference; @@ -197,9 +197,9 @@ module.exports = function(Chart) { updateElement: function(arc, index, reset) { var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2; var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2; - var startAngle = this.chart.options.rotation || (Math.PI * -0.5); // non reset case handled later - var endAngle = this.chart.options.rotation || (Math.PI * -0.5); // non reset case handled later - var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]) * ((this.chart.options.circumference || (2.0 * Math.PI)) / (2.0 * Math.PI)); + var startAngle = this.chart.options.rotation; // non reset case handled later + var endAngle = this.chart.options.rotation; // non reset case handled later + var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]) * (this.chart.options.circumference / (2.0 * Math.PI)); var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius; var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius; @@ -232,7 +232,7 @@ module.exports = function(Chart) { if (!reset) { if (index === 0) { - arc._model.startAngle = this.chart.options.rotation || (Math.PI * -0.5); + arc._model.startAngle = this.chart.options.rotation; } else { arc._model.startAngle = this.getDataset().metaData[index - 1]._model.endAngle; } @@ -270,7 +270,7 @@ module.exports = function(Chart) { calculateCircumference: function(value) { if (this.getDataset().total > 0 && !isNaN(value)) { - return (Math.PI * 1.999999) * (value / this.getDataset().total); + return (Math.PI * 2.0) * (value / this.getDataset().total); } else { return 0; } diff --git a/test/controller.doughnut.tests.js b/test/controller.doughnut.tests.js index bed2da5aa79..e22620f82f1 100644 --- a/test/controller.doughnut.tests.js +++ b/test/controller.doughnut.tests.js @@ -68,6 +68,8 @@ describe('Doughnut controller tests', function() { animateScale: false }, cutoutPercentage: 50, + rotation: Math.PI * -0.5, + circumference: Math.PI * 2.0, elements: { arc: { backgroundColor: 'rgb(255, 0, 0)', @@ -87,7 +89,7 @@ describe('Doughnut controller tests', function() { y: 100, startAngle: Math.PI * -0.5, endAngle: Math.PI * -0.5, - circumference: 2.166614539857563, + circumference: 2.1666156231653746, outerRadius: 49, innerRadius: 36.75 })); @@ -97,7 +99,7 @@ describe('Doughnut controller tests', function() { y: 100, startAngle: Math.PI * -0.5, endAngle: Math.PI * -0.5, - circumference: 3.2499218097863447, + circumference: 3.249923434748062, outerRadius: 49, innerRadius: 36.75 })); @@ -117,7 +119,7 @@ describe('Doughnut controller tests', function() { y: 100, startAngle: Math.PI * -0.5, endAngle: Math.PI * -0.5, - circumference: 0.8666458159430251, + circumference: 0.8666462492661499, outerRadius: 49, innerRadius: 36.75 })); @@ -128,8 +130,8 @@ describe('Doughnut controller tests', function() { x: 50, y: 100, startAngle: Math.PI * -0.5, - endAngle: 0.5958182130626666, - circumference: 2.166614539857563, + endAngle: 0.595819296370478, + circumference: 2.1666156231653746, outerRadius: 49, innerRadius: 36.75, @@ -144,9 +146,9 @@ describe('Doughnut controller tests', function() { expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({ x: 50, y: 100, - startAngle: 0.5958182130626666, - endAngle: 3.8457400228490113, - circumference: 3.2499218097863447, + startAngle: 0.595819296370478, + endAngle: 3.84574273111854, + circumference: 3.249923434748062, outerRadius: 49, innerRadius: 36.75, @@ -161,8 +163,8 @@ describe('Doughnut controller tests', function() { expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({ x: 50, y: 100, - startAngle: 3.8457400228490113, - endAngle: 3.8457400228490113, + startAngle: 3.84574273111854, + endAngle: 3.84574273111854, circumference: 0, outerRadius: 49, innerRadius: 36.75, @@ -178,9 +180,9 @@ describe('Doughnut controller tests', function() { expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({ x: 50, y: 100, - startAngle: 3.8457400228490113, - endAngle: 4.712385838792036, - circumference: 0.8666458159430251, + startAngle: 3.84574273111854, + endAngle: 4.71238898038469, + circumference: 0.8666462492661499, outerRadius: 49, innerRadius: 36.75, @@ -188,7 +190,7 @@ describe('Doughnut controller tests', function() { borderColor: 'rgb(0, 0, 255)', borderWidth: 2, hoverBackgroundColor: 'rgb(255, 255, 255)', - + label: 'label3' })); @@ -213,6 +215,66 @@ describe('Doughnut controller tests', function() { expect(chart.data.datasets[1].metaData[3] instanceof Chart.elements.Arc).toBe(true); }); + it ('Should rotate and limit circumference', function() { + var chart = { + chartArea: { + left: 0, + top: 0, + right: 200, + bottom: 100, + }, + data: { + datasets: [{ + hidden: true + }, { + data: [1, 3] + }, { + data: [1] + }], + labels: ['label0', 'label1'] + }, + config: { + type: 'doughnut' + }, + options: { + animation: { + animateRotate: false, + animateScale: false + }, + cutoutPercentage: 50, + rotation: Math.PI, + circumference: Math.PI * 0.5, + elements: { + arc: { + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 0, 255)', + borderWidth: 2, + hoverBackgroundColor: 'rgb(255, 255, 255)' + } + } + } + }; + + var controller = new Chart.controllers.doughnut(chart, 1); + controller.update(); + + expect(chart.data.datasets[1].metaData[0]._model.x).toEqual(149); + expect(chart.data.datasets[1].metaData[0]._model.y).toEqual(99); + expect(chart.data.datasets[1].metaData[0]._model.startAngle).toBeCloseTo(Math.PI, 10); + expect(chart.data.datasets[1].metaData[0]._model.endAngle).toBeCloseTo(Math.PI + Math.PI / 8, 10); + expect(chart.data.datasets[1].metaData[0]._model.circumference).toBeCloseTo(Math.PI / 8, 10); + expect(chart.data.datasets[1].metaData[0]._model.outerRadius).toBeCloseTo(98, 10); + expect(chart.data.datasets[1].metaData[0]._model.innerRadius).toBeCloseTo(73.5, 10); + + expect(chart.data.datasets[1].metaData[1]._model.x).toEqual(149); + expect(chart.data.datasets[1].metaData[1]._model.y).toEqual(99); + expect(chart.data.datasets[1].metaData[1]._model.startAngle).toBeCloseTo(Math.PI + Math.PI / 8, 10); + expect(chart.data.datasets[1].metaData[1]._model.endAngle).toBeCloseTo(Math.PI + Math.PI / 2, 10); + expect(chart.data.datasets[1].metaData[1]._model.circumference).toBeCloseTo(3 * Math.PI / 8, 10); + expect(chart.data.datasets[1].metaData[1]._model.outerRadius).toBeCloseTo(98, 10); + expect(chart.data.datasets[1].metaData[1]._model.innerRadius).toBeCloseTo(73.5, 10); + }); + it ('should draw all arcs', function() { var chart = { chartArea: {