Skip to content

Commit 75d007e

Browse files
etpinardetpinard
authored
Merge pull request #4249 from plotly/fix-transition-axes-nonlinear
Correctly handle non-linear axis types during transitions
2 parents 4967987 + cb3fd91 commit 75d007e

File tree

4 files changed

+120
-20
lines changed

4 files changed

+120
-20
lines changed

‎src/plots/cartesian/transition_axes.js‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
var d3 = require('d3');
1212

1313
var Registry = require('../../registry');
14+
var Lib = require('../../lib');
1415
var Drawing = require('../../components/drawing');
1516
var Axes = require('./axes');
1617

@@ -69,37 +70,35 @@ module.exports = function transitionAxes(gd, edits, transitionOpts, makeOnComple
6970
var plotinfo = edit.plotinfo;
7071
var xa = plotinfo.xaxis;
7172
var ya = plotinfo.yaxis;
72-
73-
var xr0 = edit.xr0;
74-
var xr1 = edit.xr1;
7573
var xlen = xa._length;
76-
var yr0 = edit.yr0;
77-
var yr1 = edit.yr1;
7874
var ylen = ya._length;
79-
80-
var editX = !!xr1;
81-
var editY = !!yr1;
75+
var editX = !!edit.xr1;
76+
var editY = !!edit.yr1;
8277
var viewBox = [];
8378

8479
if(editX) {
80+
var xr0 = Lib.simpleMap(edit.xr0, xa.r2l);
81+
var xr1 = Lib.simpleMap(edit.xr1, xa.r2l);
8582
var dx0 = xr0[1] - xr0[0];
8683
var dx1 = xr1[1] - xr1[0];
8784
viewBox[0] = (xr0[0] * (1 - progress) + progress * xr1[0] - xr0[0]) / (xr0[1] - xr0[0]) * xlen;
8885
viewBox[2] = xlen * ((1 - progress) + progress * dx1 / dx0);
89-
xa.range[0] = xr0[0] * (1 - progress) + progress * xr1[0];
90-
xa.range[1] = xr0[1] * (1 - progress) + progress * xr1[1];
86+
xa.range[0] = xa.l2r(xr0[0] * (1 - progress) + progress * xr1[0]);
87+
xa.range[1] = xa.l2r(xr0[1] * (1 - progress) + progress * xr1[1]);
9188
} else {
9289
viewBox[0] = 0;
9390
viewBox[2] = xlen;
9491
}
9592

9693
if(editY) {
94+
var yr0 = Lib.simpleMap(edit.yr0, ya.r2l);
95+
var yr1 = Lib.simpleMap(edit.yr1, ya.r2l);
9796
var dy0 = yr0[1] - yr0[0];
9897
var dy1 = yr1[1] - yr1[0];
9998
viewBox[1] = (yr0[1] * (1 - progress) + progress * yr1[1] - yr0[1]) / (yr0[0] - yr0[1]) * ylen;
10099
viewBox[3] = ylen * ((1 - progress) + progress * dy1 / dy0);
101-
ya.range[0] = yr0[0] * (1 - progress) + progress * yr1[0];
102-
ya.range[1] = yr0[1] * (1 - progress) + progress * yr1[1];
100+
ya.range[0] = xa.l2r(yr0[0] * (1 - progress) + progress * yr1[0]);
101+
ya.range[1] = ya.l2r(yr0[1] * (1 - progress) + progress * yr1[1]);
103102
} else {
104103
viewBox[1] = 0;
105104
viewBox[3] = ylen;
@@ -144,8 +143,10 @@ module.exports = function transitionAxes(gd, edits, transitionOpts, makeOnComple
144143

145144
for(var i = 0; i < edits.length; i++) {
146145
var edit = edits[i];
147-
if(edit.xr1) aobj[edit.plotinfo.xaxis._name + '.range'] = edit.xr1.slice();
148-
if(edit.yr1) aobj[edit.plotinfo.yaxis._name + '.range'] = edit.yr1.slice();
146+
var xa = edit.plotinfo.xaxis;
147+
var ya = edit.plotinfo.yaxis;
148+
if(edit.xr1) aobj[xa._name + '.range'] = edit.xr1.slice();
149+
if(edit.yr1) aobj[ya._name + '.range'] = edit.yr1.slice();
149150
}
150151

151152
// Signal that this transition has completed:
@@ -163,8 +164,10 @@ module.exports = function transitionAxes(gd, edits, transitionOpts, makeOnComple
163164

164165
for(var i = 0; i < edits.length; i++) {
165166
var edit = edits[i];
166-
if(edit.xr0) aobj[edit.plotinfo.xaxis._name + '.range'] = edit.xr0.slice();
167-
if(edit.yr0) aobj[edit.plotinfo.yaxis._name + '.range'] = edit.yr0.slice();
167+
var xa = edit.plotinfo.xaxis;
168+
var ya = edit.plotinfo.yaxis;
169+
if(edit.xr0) aobj[xa._name + '.range'] = edit.xr0.slice();
170+
if(edit.yr0) aobj[ya._name + '.range'] = edit.yr0.slice();
168171
}
169172

170173
return Registry.call('relayout', gd, aobj).then(function() {

‎src/plots/plots.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2462,10 +2462,14 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
24622462
yr1 = newLayout[ya._name].range.slice();
24632463
}
24642464

2465-
if(xr0 && xr1 && (xr0[0] !== xr1[0] || xr0[1] !== xr1[1])) {
2465+
if(xr0 && xr1 &&
2466+
(xa.r2l(xr0[0]) !== xa.r2l(xr1[0]) || xa.r2l(xr0[1]) !== xa.r2l(xr1[1]))
2467+
) {
24662468
editX = {xr0: xr0, xr1: xr1};
24672469
}
2468-
if(yr0 && yr1 && (yr0[0] !== yr1[0] || yr0[1] !== yr1[1])) {
2470+
if(yr0 && yr1 &&
2471+
(ya.r2l(yr0[0]) !== ya.r2l(yr1[0]) || ya.r2l(yr0[1]) !== ya.r2l(yr1[1]))
2472+
) {
24692473
editY = {yr0: yr0, yr1: yr1};
24702474
}
24712475

@@ -2559,10 +2563,10 @@ plots.transitionFromReact = function(gd, restyleFlags, relayoutFlags, oldFullLay
25592563
var editX = null;
25602564
var editY = null;
25612565

2562-
if(xr0[0] !== xr1[0] || xr0[1] !== xr1[1]) {
2566+
if(xa.r2l(xr0[0]) !== xa.r2l(xr1[0]) || xa.r2l(xr0[1]) !== xa.r2l(xr1[1])) {
25632567
editX = {xr0: xr0, xr1: xr1};
25642568
}
2565-
if(yr0[0] !== yr1[0] || yr0[1] !== yr1[1]) {
2569+
if(ya.r2l(yr0[0]) !== ya.r2l(yr1[0]) || ya.r2l(yr0[1]) !== ya.r2l(yr1[1])) {
25662570
editY = {yr0: yr0, yr1: yr1};
25672571
}
25682572

‎test/jasmine/tests/animate_test.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -750,6 +750,55 @@ describe('Animating multiple axes', function() {
750750
.then(done);
751751
});
752752

753+
it('@flaky updates ranges of secondary axes (date + category case)', function(done) {
754+
Plotly.plot(gd, [
755+
{x: ['2018-01-01', '2019-01-01', '2020-01-01'], y: [1, 2, 3]},
756+
{x: ['a', 'b', 'c'], y: [1, 2, 3], xaxis: 'x2', yaxis: 'y2'}
757+
], {
758+
grid: {rows: 1, columns: 2, pattern: 'independent'},
759+
xaxis: {range: ['2018-01-01', '2020-01-01']},
760+
yaxis: {range: [0, 4]},
761+
xaxis2: {range: [0, 2]},
762+
yaxis2: {range: [0, 4]}
763+
})
764+
.then(function() {
765+
expect(gd._fullLayout.xaxis.range).toEqual(['2018-01-01', '2020-01-01']);
766+
expect(gd._fullLayout.xaxis2.range).toEqual([0, 2]);
767+
768+
var promise = Plotly.animate(gd, [{
769+
layout: {
770+
'xaxis.range': ['2018-06-01', '2019-06-01'],
771+
'xaxis2.range': [0.5, 1.5]
772+
}
773+
}], {
774+
frame: {redraw: false, duration: 60},
775+
transition: {duration: 30}
776+
});
777+
778+
setTimeout(function() {
779+
var fullLayout = gd._fullLayout;
780+
781+
var xa = fullLayout.xaxis;
782+
var xr = xa.range.slice();
783+
expect(xa.r2l(xr[0])).toBeGreaterThan(xa.r2l('2018-01-01'));
784+
expect(xa.r2l(xr[1])).toBeLessThan(xa.r2l('2020-01-01'));
785+
786+
var xa2 = fullLayout.xaxis2;
787+
var xr2 = xa2.range.slice();
788+
expect(xr2[0]).toBeGreaterThan(0);
789+
expect(xr2[1]).toBeLessThan(2);
790+
}, 15);
791+
792+
return promise;
793+
})
794+
.then(function() {
795+
expect(gd._fullLayout.xaxis.range).toEqual(['2018-06-01', '2019-06-01']);
796+
expect(gd._fullLayout.xaxis2.range).toEqual([0.5, 1.5]);
797+
})
798+
.catch(failTest)
799+
.then(done);
800+
});
801+
753802
it('should not leak axis update from subplot to subplot', function(done) {
754803
function _animate(frameLayout) {
755804
return function() {

‎test/jasmine/tests/transition_test.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1097,4 +1097,48 @@ describe('Plotly.react transitions:', function() {
10971097
.catch(failTest)
10981098
.then(done);
10991099
});
1100+
1101+
it('should update ranges of date and category axes', function(done) {
1102+
Plotly.plot(gd, [
1103+
{x: ['2018-01-01', '2019-01-01', '2020-01-01'], y: [1, 2, 3]},
1104+
{x: ['a', 'b', 'c'], y: [1, 2, 3], xaxis: 'x2', yaxis: 'y2'}
1105+
], {
1106+
grid: {rows: 1, columns: 2, pattern: 'independent'},
1107+
xaxis: {range: ['2018-01-01', '2020-01-01']},
1108+
yaxis: {range: [0, 4]},
1109+
xaxis2: {range: [0, 2]},
1110+
yaxis2: {range: [0, 4]},
1111+
transition: {duration: 30}
1112+
})
1113+
.then(function() {
1114+
expect(gd._fullLayout.xaxis.range).toEqual(['2018-01-01', '2020-01-01']);
1115+
expect(gd._fullLayout.xaxis2.range).toEqual([0, 2]);
1116+
1117+
gd.layout.xaxis.range = ['2018-06-01', '2019-06-01'];
1118+
gd.layout.xaxis2.range = [0.5, 1.5];
1119+
var promise = Plotly.react(gd, gd.data, gd.layout);
1120+
1121+
setTimeout(function() {
1122+
var fullLayout = gd._fullLayout;
1123+
1124+
var xa = fullLayout.xaxis;
1125+
var xr = xa.range.slice();
1126+
expect(xa.r2l(xr[0])).toBeGreaterThan(xa.r2l('2018-01-01'));
1127+
expect(xa.r2l(xr[1])).toBeLessThan(xa.r2l('2020-01-01'));
1128+
1129+
var xa2 = fullLayout.xaxis2;
1130+
var xr2 = xa2.range.slice();
1131+
expect(xr2[0]).toBeGreaterThan(0);
1132+
expect(xr2[1]).toBeLessThan(2);
1133+
}, 15);
1134+
1135+
return promise;
1136+
})
1137+
.then(function() {
1138+
expect(gd._fullLayout.xaxis.range).toEqual(['2018-06-01', '2019-06-01']);
1139+
expect(gd._fullLayout.xaxis2.range).toEqual([0.5, 1.5]);
1140+
})
1141+
.catch(failTest)
1142+
.then(done);
1143+
});
11001144
});

0 commit comments

Comments
 (0)