Lazy Update and Render option

Usage: `.update(animationDuration, [bool])`
Tooltip animations are now "lazy” by default, meaning they can be
interrupted and pivoted by other animations. All others internal
updates are by nature non-interruptible, so hovering over a chart
during a regular `update()` cycle will pivot the tooltip correctly.
This commit is contained in:
Tanner Linsley 2015-06-19 13:29:36 -06:00
parent 5f6e2a0af3
commit 85e928b426
4 changed files with 21 additions and 21 deletions

18
Chart.js vendored
View File

@ -1092,9 +1092,9 @@
frameDuration: 17,
animations: [],
dropFrames: 0,
addAnimation: function(chartInstance, animationObject, duration) {
addAnimation: function(chartInstance, animationObject, duration, lazy) {
if (typeof duration !== 'number' || duration === 0) {
if (!lazy) {
chartInstance.animating = true;
}
@ -1263,7 +1263,7 @@
} else {
this.data.datasets.push(dataset);
}
this.buildOrUpdateControllers();
dataset.controller.reset(); // so that animation looks ok
this.update();
@ -1283,7 +1283,7 @@
if (index === undefined) {
index = this.data.datasets[datasetIndex].data.length;
}
this.data.datasets[datasetIndex].data.splice(index, 0, data);
this.data.datasets[datasetIndex].controller.addElementAndReset(index);
this.update();
@ -1403,16 +1403,16 @@
},
update: function update(animationDuration) {
update: function update(animationDuration, lazy) {
// This will loop through any data and do the appropriate element update for the type
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
dataset.controller.update();
}, this);
this.render(animationDuration);
this.render(animationDuration, lazy);
},
render: function render(duration) {
render: function render(duration, lazy) {
if (this.options.animation.duration !== 0 || duration) {
var animation = new Chart.Animation();
@ -1432,7 +1432,7 @@
animation.onAnimationProgress = this.options.onAnimationProgress;
animation.onAnimationComplete = this.options.onAnimationComplete;
Chart.animationService.addAnimation(this, animation, duration);
Chart.animationService.addAnimation(this, animation, duration, lazy);
} else {
this.draw();
this.options.onAnimationComplete.call(this);
@ -1666,7 +1666,7 @@
(this.lastActive.length && this.active.length && changed)) {
this.stop();
this.render(this.options.hover.animationDuration);
this.update(this.options.hover.animationDuration, true);
}
}

6
Chart.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -27,9 +27,9 @@
frameDuration: 17,
animations: [],
dropFrames: 0,
addAnimation: function(chartInstance, animationObject, duration) {
addAnimation: function(chartInstance, animationObject, duration, lazy) {
if (typeof duration !== 'number' || duration === 0) {
if (!lazy) {
chartInstance.animating = true;
}

View File

@ -81,7 +81,7 @@
} else {
this.data.datasets.push(dataset);
}
this.buildOrUpdateControllers();
dataset.controller.reset(); // so that animation looks ok
this.update();
@ -101,7 +101,7 @@
if (index === undefined) {
index = this.data.datasets[datasetIndex].data.length;
}
this.data.datasets[datasetIndex].data.splice(index, 0, data);
this.data.datasets[datasetIndex].controller.addElementAndReset(index);
this.update();
@ -221,16 +221,16 @@
},
update: function update(animationDuration) {
update: function update(animationDuration, lazy) {
// This will loop through any data and do the appropriate element update for the type
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
dataset.controller.update();
}, this);
this.render(animationDuration);
this.render(animationDuration, lazy);
},
render: function render(duration) {
render: function render(duration, lazy) {
if (this.options.animation.duration !== 0 || duration) {
var animation = new Chart.Animation();
@ -250,7 +250,7 @@
animation.onAnimationProgress = this.options.onAnimationProgress;
animation.onAnimationComplete = this.options.onAnimationComplete;
Chart.animationService.addAnimation(this, animation, duration);
Chart.animationService.addAnimation(this, animation, duration, lazy);
} else {
this.draw();
this.options.onAnimationComplete.call(this);
@ -484,7 +484,7 @@
(this.lastActive.length && this.active.length && changed)) {
this.stop();
this.render(this.options.hover.animationDuration);
this.update(this.options.hover.animationDuration, true);
}
}