archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2273 from mdehoog/doughnut-rotation

Browse Source 
Added unit test for doughnut rotation/circumference, fix for rotation = 0
This commit is contained in:
Evert Timberg 2016-04-16 19:21:58 -04:00
commit b50c281684
2 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/controllers/controller.doughnut.js
View File

@ -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;
}

90
test/controller.doughnut.tests.js
View File

@ -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: {