Skip to content

Commit c727dd1

Browse files
antoinergantoinerg
authored
Merge pull request #4180 from plotly/pr-bar-anim
bar transitions
2 parents 7a4a837 + 709ee2f commit c727dd1

File tree

8 files changed

+337
-14
lines changed

8 files changed

+337
-14
lines changed

Diff for: ‎src/components/drawing/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
442442
fill: 'none'
443443
});
444444
} else {
445-
sel.style('stroke-width', lineWidth + 'px');
445+
sel.style('stroke-width', (d.isBlank ? 0 : lineWidth) + 'px');
446446

447447
var markerGradient = marker.gradient;
448448

Diff for: ‎src/traces/bar/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ module.exports = {
2828
name: 'bar',
2929
basePlotModule: require('../../plots/cartesian'),
3030
categories: ['bar-like', 'cartesian', 'svg', 'bar', 'oriented', 'errorBarsOK', 'showLegend', 'zoomScale'],
31+
animatable: true,
3132
meta: {
3233
description: [
3334
'The data visualized by the span of the bars is set in `y`',

Diff for: ‎src/traces/bar/plot.js

+41-10
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,28 @@ function getXY(di, xa, ya, isHorizontal) {
5151
return isHorizontal ? [s, p] : [p, s];
5252
}
5353

54-
function plot(gd, plotinfo, cdModule, traceLayer, opts) {
54+
function transition(selection, opts, makeOnCompleteCallback) {
55+
if(hasTransition(opts)) {
56+
var onComplete;
57+
if(makeOnCompleteCallback) {
58+
onComplete = makeOnCompleteCallback();
59+
}
60+
return selection
61+
.transition()
62+
.duration(opts.duration)
63+
.ease(opts.easing)
64+
.each('end', function() { onComplete && onComplete(); })
65+
.each('interrupt', function() { onComplete && onComplete(); });
66+
} else {
67+
return selection;
68+
}
69+
}
70+
71+
function hasTransition(transitionOpts) {
72+
return transitionOpts && transitionOpts.duration > 0;
73+
}
74+
75+
function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback) {
5576
var xa = plotinfo.xaxis;
5677
var ya = plotinfo.yaxis;
5778
var fullLayout = gd._fullLayout;
@@ -96,7 +117,6 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
96117
// clipped xf/yf (2nd arg true): non-positive
97118
// log values go off-screen by plotwidth
98119
// so you see them continue if you drag the plot
99-
100120
var xy = getXY(di, xa, ya, isHorizontal);
101121

102122
var x0 = xy[0][0];
@@ -118,8 +138,11 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
118138
}
119139
di.isBlank = isBlank;
120140

141+
if(isBlank && isHorizontal) x1 = x0;
142+
if(isBlank && !isHorizontal) y1 = y0;
143+
121144
// in waterfall mode `between` we need to adjust bar end points to match the connector width
122-
if(adjustPixel) {
145+
if(adjustPixel && !isBlank) {
123146
if(isHorizontal) {
124147
x0 -= dirSign(x0, x1) * adjustPixel;
125148
x1 += dirSign(x0, x1) * adjustPixel;
@@ -178,12 +201,18 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
178201
y1 = fixpx(y1, y0);
179202
}
180203

181-
Lib.ensureSingle(bar, 'path')
204+
var sel = transition(Lib.ensureSingle(bar, 'path'), opts, makeOnCompleteCallback);
205+
sel
182206
.style('vector-effect', 'non-scaling-stroke')
183-
.attr('d', isBlank ? 'M0,0Z' : 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
207+
.attr('d', 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
184208
.call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
185209

186-
appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts);
210+
if(hasTransition(opts)) {
211+
var styleFns = Drawing.makePointStyleFns(trace);
212+
Drawing.singlePointStyle(di, sel, trace, styleFns, gd);
213+
}
214+
215+
appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCompleteCallback);
187216

188217
if(plotinfo.layerClipId) {
189218
Drawing.hideOutsideRangePoint(di, bar.select('text'), xa, ya, trace.xcalendar, trace.ycalendar);
@@ -197,10 +226,10 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
197226
});
198227

199228
// error bars are on the top
200-
Registry.getComponentMethod('errorbars', 'plot')(gd, bartraces, plotinfo);
229+
Registry.getComponentMethod('errorbars', 'plot')(gd, bartraces, plotinfo, opts);
201230
}
202231

203-
function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
232+
function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts, makeOnCompleteCallback) {
204233
var xa = plotinfo.xaxis;
205234
var ya = plotinfo.yaxis;
206235

@@ -212,7 +241,6 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
212241
.text(text)
213242
.attr({
214243
'class': 'bartext bartext-' + textPosition,
215-
transform: '',
216244
'text-anchor': 'middle',
217245
// prohibit tex interpretation until we can handle
218246
// tex and regular text together
@@ -325,9 +353,12 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
325353
(textPosition === 'outside') ?
326354
outsideTextFont : insideTextFont);
327355

356+
var currentTransform = textSelection.attr('transform');
357+
textSelection.attr('transform', '');
328358
textBB = Drawing.bBox(textSelection.node()),
329359
textWidth = textBB.width,
330360
textHeight = textBB.height;
361+
textSelection.attr('transform', currentTransform);
331362

332363
if(textWidth <= 0 || textHeight <= 0) {
333364
textSelection.remove();
@@ -360,7 +391,7 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
360391
}));
361392
}
362393

363-
textSelection.attr('transform', transform);
394+
transition(textSelection, opts, makeOnCompleteCallback).attr('transform', transform);
364395
}
365396

366397
function getRotateFromAngle(angle) {

Diff for: ‎test/image/baselines/animation_bar.png

8.9 KB
Loading

Diff for: ‎test/image/mocks/animation_bar.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"data": [{
3+
"type": "bar",
4+
"x": ["A", "B", "C"],
5+
"y": [24, 5, 8],
6+
"error_y": {"array": [3, 2, 1]}
7+
}],
8+
"layout": {
9+
"width": 400,
10+
"height": 400,
11+
"yaxis": {"range": [0, 30]}
12+
},
13+
"frames": [
14+
{"data": [{"y": [12, 15, 10]}]},
15+
{"data": [{"error_y": {"array": [5, 4, 1]}}]},
16+
{"data": [{"marker": {"color": ["red", "blue", "green"]}}]},
17+
{"data": [{"width": 0.25}]},
18+
{"data": [{"marker": {"line": {"width": 10}}}]},
19+
{"data": [{"marker": {"line": {"color": ["orange", "yellow", "blue"]}}}]},
20+
{"layout": {"yaxis": {"range": [0, 20]}}}
21+
]
22+
}

Diff for: ‎test/jasmine/assets/check_transitions.js

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
'use strict';
2+
3+
var Plotly = require('@lib/index');
4+
var Lib = require('@src/lib');
5+
var d3 = require('d3');
6+
var delay = require('./delay.js');
7+
8+
var reNumbers = /([\d\.]+)/gm;
9+
10+
function promiseSerial(funcs, wait) {
11+
return funcs.reduce(function(promise, func) {
12+
return promise.then(function(result) {
13+
return func().then(Array.prototype.concat.bind(result)).then(delay(wait));
14+
});
15+
}, Promise.resolve([]));
16+
}
17+
18+
function clockTick(currentNow, milliseconds) {
19+
Date.now = function() {
20+
return currentNow + milliseconds;
21+
};
22+
d3.timer.flush();
23+
}
24+
25+
// Using the methodology from http://eng.wealthfront.com/2017/10/26/testing-d3-transitions/
26+
module.exports = function checkTransition(gd, mock, animateOpts, transitionOpts, tests) {
27+
if(!transitionOpts) {
28+
transitionOpts = {
29+
transition: {
30+
duration: 500,
31+
easing: 'linear'
32+
},
33+
frame: {
34+
duration: 500
35+
}
36+
};
37+
}
38+
// Prepare chain
39+
var now = Date.now;
40+
var startTime;
41+
var currentTime;
42+
var p = [
43+
function() {
44+
return Plotly.newPlot(gd, mock)
45+
.then(function() {
46+
// Check initial states if present
47+
for(var i = 0; i < tests.length; i++) {
48+
if(tests[i][0] === 0) assert(tests[i]);
49+
}
50+
});
51+
},
52+
function() {
53+
// Hijack Date.now
54+
startTime = Date.now();
55+
currentTime = 0;
56+
clockTick(startTime, 0);
57+
Plotly.animate(gd, animateOpts, transitionOpts);
58+
return Promise.resolve(true);
59+
}
60+
];
61+
62+
var checkTests = tests.map(function(test) {
63+
return function() {
64+
if(test[0] === 0) return Promise.resolve(true);
65+
if(test[0] !== currentTime) {
66+
clockTick(startTime, test[0]);
67+
currentTime = test[0];
68+
}
69+
return assert(test);
70+
};
71+
});
72+
73+
// Run all tasks
74+
return promiseSerial(p.concat(checkTests))
75+
.catch(function(err) {
76+
Date.now = now;
77+
return Promise.reject(err);
78+
})
79+
.then(function() {
80+
Date.now = now;
81+
});
82+
};
83+
84+
// A test array is made of
85+
// [ms since start of transition, selector, (attr|style), name of attribute, array of values to be found]
86+
// Ex.: [0, '.point path', 'style', 'fill', ['rgb(31, 119, 180)', 'rgb(31, 119, 180)', 'rgb(31, 119, 180)']]
87+
function assert(test) {
88+
var msg = 'at ' + test[0] + 'ms, selection ' + test[1] + ' has ' + test[3];
89+
var cur = [];
90+
d3.selectAll(test[1]).each(function(d, i) {
91+
if(test[2] === 'style') cur[i] = this.style[test[3]];
92+
if(test[2] === 'attr') cur[i] = d3.select(this).attr(test[3]);
93+
});
94+
switch(test[3]) {
95+
case 'd':
96+
assertEqual(cur, test[4], round, msg);
97+
break;
98+
case 'transform':
99+
assertCloseTo(cur, test[4], 3, extractNumbers, msg);
100+
break;
101+
default:
102+
assertEqual(cur, test[4], Lib.identity, msg);
103+
}
104+
return Promise.resolve(true);
105+
}
106+
107+
function assertEqual(A, B, cb, msg) {
108+
var a = cb(A);
109+
var b = cb(B);
110+
expect(a).withContext(msg + ' equal to ' + JSON.stringify(a)).toEqual(b);
111+
}
112+
113+
function assertCloseTo(A, B, tolerance, cb, msg) {
114+
var a = cb(A).flat();
115+
var b = cb(B).flat();
116+
expect(a).withContext(msg + ' equal to ' + JSON.stringify(A)).toBeWithinArray(b, tolerance);
117+
}
118+
119+
function extractNumbers(array) {
120+
return array.map(function(d) {
121+
return d.match(reNumbers).map(function(n) {
122+
return parseFloat(n);
123+
});
124+
});
125+
}
126+
127+
function round(array) {
128+
return array.map(function(cur) {
129+
return cur.replace(reNumbers, function(match) {
130+
return Math.round(match);
131+
});
132+
});
133+
}

0 commit comments

Comments
 (0)