Fix animation on chart settings change

Added transitionDuration property to chartData. Set it to 0 or null to get rid of transition. Number values mean transition length in ms.
parent 114613a6
...@@ -894,14 +894,16 @@ ...@@ -894,14 +894,16 @@
var $$ = this, config = $$.config, transitions; var $$ = this, config = $$.config, transitions;
options = options || {}; options = options || {};
// same with redraw // same with redraw
options.withTransition = getOption(options, "withTransition", true); options.withTransition = config.transition_duration ? getOption(options, "withTransition", true) : false;
options.withTransform = getOption(options, "withTransform", false); options.withTransform = getOption(options, "withTransform", false);
options.withLegend = getOption(options, "withLegend", false); options.withLegend = getOption(options, "withLegend", false);
// NOT same with redraw // NOT same with redraw
options.withUpdateXDomain = true; options.withUpdateXDomain = true;
options.withUpdateOrgXDomain = true; options.withUpdateOrgXDomain = true;
options.withTransitionForExit = false; options.withTransitionForExit = false;
options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition); options.withTransitionForTransform = config.transition_duration ?
getOption(options, "withTransitionForTransform", options.withTransition) :
false;
// MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called) // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called)
$$.updateSizes(); $$.updateSizes();
// MEMO: called in updateLegend in redraw if withLegend // MEMO: called in updateLegend in redraw if withLegend
...@@ -4071,8 +4073,15 @@ ...@@ -4071,8 +4073,15 @@
}; };
}; };
c3_chart_internal_fn.transformLegend = function (withTransition) { c3_chart_internal_fn.transformLegend = function (withTransition) {
var $$ = this; var $$ = this,
(withTransition ? $$.legend.transition() : $$.legend).attr("transform", $$.getTranslate('legend')); legend = $$.legend,
duration = $$.config.transition_duration;
// Turn off transitions if duration was not specified in config
if(withTransition && duration){
legend = legend.transition().duration(duration);
}
legend.attr("transform", $$.getTranslate('legend'));
}; };
c3_chart_internal_fn.updateLegendStep = function (step) { c3_chart_internal_fn.updateLegendStep = function (step) {
this.legendStep = step; this.legendStep = step;
...@@ -4684,17 +4693,18 @@ ...@@ -4684,17 +4693,18 @@
var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel), var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel), axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label); axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label);
(withTransition ? axisXLabel.transition() : axisXLabel) var duration = $$.config.transition_duration;
(withTransition ? axisXLabel.transition().duration(duration) : axisXLabel)
.attr("x", $$.xForXAxisLabel.bind($$)) .attr("x", $$.xForXAxisLabel.bind($$))
.attr("dx", $$.dxForXAxisLabel.bind($$)) .attr("dx", $$.dxForXAxisLabel.bind($$))
.attr("dy", $$.dyForXAxisLabel.bind($$)) .attr("dy", $$.dyForXAxisLabel.bind($$))
.text($$.textForXAxisLabel.bind($$)); .text($$.textForXAxisLabel.bind($$));
(withTransition ? axisYLabel.transition() : axisYLabel) (withTransition ? axisYLabel.transition().duration(duration) : axisYLabel)
.attr("x", $$.xForYAxisLabel.bind($$)) .attr("x", $$.xForYAxisLabel.bind($$))
.attr("dx", $$.dxForYAxisLabel.bind($$)) .attr("dx", $$.dxForYAxisLabel.bind($$))
.attr("dy", $$.dyForYAxisLabel.bind($$)) .attr("dy", $$.dyForYAxisLabel.bind($$))
.text($$.textForYAxisLabel.bind($$)); .text($$.textForYAxisLabel.bind($$));
(withTransition ? axisY2Label.transition() : axisY2Label) (withTransition ? axisY2Label.transition().duration(duration) : axisY2Label)
.attr("x", $$.xForY2AxisLabel.bind($$)) .attr("x", $$.xForY2AxisLabel.bind($$))
.attr("dx", $$.dxForY2AxisLabel.bind($$)) .attr("dx", $$.dxForY2AxisLabel.bind($$))
.attr("dy", $$.dyForY2AxisLabel.bind($$)) .attr("dy", $$.dyForY2AxisLabel.bind($$))
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment