Skip to content

Commit

Permalink
Fix for doughnut rotation = 0, added unit test for doughnut rotation/…
Browse files Browse the repository at this point in the history 
…circumference properties
  • Loading branch information
@mdehoog
mdehoog committed Apr 16, 2016
1 parent d3a2996 commit 241f085
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 20 deletions.
12 changes: 6 additions & 6 deletions src/controllers/controller.doughnut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
90 changes: 76 additions & 14 deletions test/controller.doughnut.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand All @@ -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
}));
Expand All @@ -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
}));
Expand All @@ -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
}));
Expand All @@ -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,

Expand All @@ -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,

Expand All @@ -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,
Expand All @@ -178,17 +180,17 @@ 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,

backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 0, 255)',
borderWidth: 2,
hoverBackgroundColor: 'rgb(255, 255, 255)',

label: 'label3'
}));

Expand All @@ -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: {
Expand Down

0 comments on commit 241f085

Please sign in to comment.