Fix animation on pie charts
Animation on pie charts in Project > Overview and Admin > Hypervisros does not start at 0 degree which, depending on the percentage used for a resource, could cause the pie chart animate counter-clockwise. This patch fixes the issue by setting the start angle to 0 degree. The patch also fixes the issue with the last pie chart where it does not animate. Closes-Bug: #1283306 Change-Id: Ibc7f676f522a7e3ea69f87f36898249ecd0fe326
This commit is contained in:
parent
1cad534cc2
commit
6a5d5d501b
|
@ -80,15 +80,7 @@ horizon.d3_pie_chart_usage = {
|
|||
.append("path")
|
||||
.attr("class","arc")
|
||||
.attr("d", arc)
|
||||
.style("fill", function(){
|
||||
if (self.data[0].percentage >= 100) {
|
||||
return FULL;
|
||||
} else if (self.data[0].percentage >= 80) {
|
||||
return NEARLY_FULL;
|
||||
} else {
|
||||
return FRGRND;
|
||||
}
|
||||
})
|
||||
.style("fill", BKGRND)
|
||||
.style("stroke", STROKE)
|
||||
.style("stroke-width", 1)
|
||||
.each(function(d) {
|
||||
|
@ -104,10 +96,18 @@ horizon.d3_pie_chart_usage = {
|
|||
.append("path")
|
||||
.attr("class","arc")
|
||||
.attr("d", arc)
|
||||
.style("fill", BKGRND)
|
||||
.style("fill", function(){
|
||||
if (self.data[0].percentage >= 100) {
|
||||
return FULL;
|
||||
} else if (self.data[0].percentage >= 80) {
|
||||
return NEARLY_FULL;
|
||||
} else {
|
||||
return FRGRND;
|
||||
}
|
||||
})
|
||||
.style("stroke", STROKE)
|
||||
.style("stroke-width", function() {
|
||||
if (self.data[0].percentage >= 100) {
|
||||
if (self.data[0].percentage <= 0 || self.data[0].percentage >= 100) {
|
||||
return 0;
|
||||
} else {
|
||||
return 1;
|
||||
|
@ -119,9 +119,13 @@ horizon.d3_pie_chart_usage = {
|
|||
})
|
||||
.transition()
|
||||
.duration(500)
|
||||
.attrTween("d", function(a) {
|
||||
var tween = d3.interpolate(self.current, a);
|
||||
self.current = tween(0);
|
||||
.attrTween("d", function(start) {
|
||||
start.endAngle = start.startAngle = 0;
|
||||
var end = {
|
||||
startAngle: 0,
|
||||
endAngle: 2 * Math.PI * (100 - start.value) / 100
|
||||
};
|
||||
var tween = d3.interpolate(start, end);
|
||||
return function(t) { return arc(tween(t)); };
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue