bar transitions

[antoinerg]

Introduces transitions for bar and closes #3896 . The following can now be tweened:

• length
• width
• text translates, rotates and scales properly
• fill color
• error bars
• border width and color

Codepen showcasing different mocks
Codepen showcasing that all barmode work properly
Codepen showing transition to/from 0 (ie. isBlank)

checkTransition

Another notable addition in this PR is checkTransition which facilitate the testing of transitions. By hijacking Date.now(), it is possible to change and freeze time in order to inspect the resulting SVG at any moment during a transition. This way, we can guarantee that tweening works on the intended elements. See 8166eb7 for details.

[etpinard]

Clean wrapper!

It's a little different than what scatter/plot.js does, in particular this piece:

plotly.js/src/traces/scatter/plot.js

Lines 67 to 73 in 46866fd

	transition.each(function() {
	// Must run the selection again since otherwise enters/updates get grouped together
	// and these get executed out of order. Except we need them in order!
	scatterLayer.selectAll('g.trace').each(function(d, i) {
	plotOne(gd, i, plotinfo, d, cdscatterSorted, this, transitionOpts);
	});
	});

@antoinerg have you noticed "out of order" transitions?

Your wrapper plays better with Lib.makeTraceGroups, so if there are no side-effects, maybe we could try this pattern in scatter/plot.js and maybe fix #3931 while at it.

[etpinard]

One drawback from your pattern:

• we have to pass opts and makeOnCompleteCallback around in all the transition calls

[etpinard]

scatter/plot.js uses this trick:

plotly.js/src/traces/scatter/plot.js

Lines 126 to 128 in 46866fd

	function transition(selection) {
	return hasTransition ? selection.transition() : selection;
	}

[etpinard]

This comment is non-blocking

[etpinard]

So here, you trying to get the "untransformed" bounding box, correct? Nice catch!

I guess that's what we have to do in the current bar text svg structure:

where the transform is attached to the <text> element.

Compare this to scatter text:

which then can benefit from this piece of logic in Drawing.bBox:

plotly.js/src/components/drawing/index.js

Lines 921 to 934 in 46866fd

	if(!transform) {
	// in this case, just varying x and y, don't bother caching
	// the final bBox because the alteration is quick.
	var innerBB = drawing.bBox(innerNode, false, hash);
	if(x) {
	innerBB.left += x;
	innerBB.right += x;
	}
	if(y) {
	innerBB.top += y;
	innerBB.bottom += y;
	}
	return innerBB;
	}

and not have to worry about removing and adding back the transform.

---

Oh well, @antoinerg nothing to do here for now, I just wanted to write this down for future reference.

[etpinard]

This comment is non-blocking

[etpinard]

For reference, calling Plotly.animate(gd) off this mock is very fun:

[etpinard]

Awesome PR @antoinerg !!

[etpinard]

Great - tests are passing. Looks like this didn't break @archmoj's isBlank work from #4056 🎉

[etpinard]

@antoinerg please don't do that again on branches associated with open PRs. This makes the git pull process a little more annoying than it needs to be. Thanks

---

[etpinard]

Awesome work @antoinerg - this PR is a huge step forward in transitions land.

As we add more animatable: true traces, it will be interesting to see if your transition wrapper will work in other scenarios - see #4180 (review) for more info.

💃 💃 💃