bar transitions

src/components/drawing/index.js

@@ -442,7 +442,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
  fill: 'none'
  });
  } else {
- sel.style('stroke-width', lineWidth + 'px');
+ sel.style('stroke-width', (d.isBlank ? 0 : lineWidth) + 'px');
 
  var markerGradient = marker.gradient;
 

src/traces/bar/index.js

@@ -28,6 +28,7 @@ module.exports = {
  name: 'bar',
  basePlotModule: require('../../plots/cartesian'),
  categories: ['bar-like', 'cartesian', 'svg', 'bar', 'oriented', 'errorBarsOK', 'showLegend', 'zoomScale'],
+ animatable: true,
  meta: {
  description: [
  'The data visualized by the span of the bars is set in `y`',

src/traces/bar/plot.js

@@ -51,7 +51,28 @@ function getXY(di, xa, ya, isHorizontal) {
  return isHorizontal ? [s, p] : [p, s];
 }
 
-function plot(gd, plotinfo, cdModule, traceLayer, opts) {
+function transition(selection, opts, makeOnCompleteCallback) {
+ if(hasTransition(opts)) {
+ var onComplete;
+ if(makeOnCompleteCallback) {
+ onComplete = makeOnCompleteCallback();
+ }
+ return selection
+ .transition()
+ .duration(opts.duration)
+ .ease(opts.easing)
+ .each('end', function() { onComplete && onComplete(); })
+ .each('interrupt', function() { onComplete && onComplete(); });
+ } else {
+ return selection;
+ }
+}
+
+function hasTransition(transitionOpts) {
+ return transitionOpts && transitionOpts.duration > 0;
+}
+
+function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback) {
  var xa = plotinfo.xaxis;
  var ya = plotinfo.yaxis;
  var fullLayout = gd._fullLayout;
@@ -96,7 +117,6 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
  // clipped xf/yf (2nd arg true): non-positive
  // log values go off-screen by plotwidth
  // so you see them continue if you drag the plot
-
  var xy = getXY(di, xa, ya, isHorizontal);
 
  var x0 = xy[0][0];
@@ -118,8 +138,11 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
  }
  di.isBlank = isBlank;
 
+ if(isBlank && isHorizontal) x1 = x0;
+ if(isBlank && !isHorizontal) y1 = y0;
+
  // in waterfall mode `between` we need to adjust bar end points to match the connector width
- if(adjustPixel) {
+ if(adjustPixel && !isBlank) {
  if(isHorizontal) {
  x0 -= dirSign(x0, x1) * adjustPixel;
  x1 += dirSign(x0, x1) * adjustPixel;
@@ -178,12 +201,18 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
  y1 = fixpx(y1, y0);
  }
 
- Lib.ensureSingle(bar, 'path')
+ var sel = transition(Lib.ensureSingle(bar, 'path'), opts, makeOnCompleteCallback);
+ sel
  .style('vector-effect', 'non-scaling-stroke')
- .attr('d', isBlank ? 'M0,0Z' : 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
+ .attr('d', 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
  .call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
 
- appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts);
+ if(hasTransition(opts)) {
+ var styleFns = Drawing.makePointStyleFns(trace);
+ Drawing.singlePointStyle(di, sel, trace, styleFns, gd);
+ }
+
+ appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCompleteCallback);
 
  if(plotinfo.layerClipId) {
  Drawing.hideOutsideRangePoint(di, bar.select('text'), xa, ya, trace.xcalendar, trace.ycalendar);
@@ -197,10 +226,10 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
  });
 
  // error bars are on the top
- Registry.getComponentMethod('errorbars', 'plot')(gd, bartraces, plotinfo);
+ Registry.getComponentMethod('errorbars', 'plot')(gd, bartraces, plotinfo, opts);
 }
 
-function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
+function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts, makeOnCompleteCallback) {
  var xa = plotinfo.xaxis;
  var ya = plotinfo.yaxis;
 
@@ -212,7 +241,6 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
  .text(text)
  .attr({
  'class': 'bartext bartext-' + textPosition,
- transform: '',
  'text-anchor': 'middle',
  // prohibit tex interpretation until we can handle
  // tex and regular text together
@@ -325,9 +353,12 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
  (textPosition === 'outside') ?
  outsideTextFont : insideTextFont);
 
+ var currentTransform = textSelection.attr('transform');
+ textSelection.attr('transform', '');
  textBB = Drawing.bBox(textSelection.node()),
  textWidth = textBB.width,
  textHeight = textBB.height;
+ textSelection.attr('transform', currentTransform);
 
  if(textWidth <= 0 || textHeight <= 0) {
  textSelection.remove();
@@ -360,7 +391,7 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
  }));
  }
 
- textSelection.attr('transform', transform);
+transition(textSelection, opts, makeOnCompleteCallback).attr('transform', transform);
 }
 
 function getRotateFromAngle(angle) {

test/image/mocks/animation_bar.json

@@ -0,0 +1,22 @@
+{
+ "data": [{
+ "type": "bar",
+ "x": ["A", "B", "C"],
+ "y": [24, 5, 8],
+ "error_y": {"array": [3, 2, 1]}
+ }],
+ "layout": {
+ "width": 400,
+ "height": 400,
+ "yaxis": {"range": [0, 30]}
+ },
+ "frames": [
+ {"data": [{"y": [12, 15, 10]}]},
+ {"data": [{"error_y": {"array": [5, 4, 1]}}]},
+ {"data": [{"marker": {"color": ["red", "blue", "green"]}}]},
+ {"data": [{"width": 0.25}]},
+ {"data": [{"marker": {"line": {"width": 10}}}]},
+ {"data": [{"marker": {"line": {"color": ["orange", "yellow", "blue"]}}}]},
+ {"layout": {"yaxis": {"range": [0, 20]}}}
+ ]
+}

test/jasmine/assets/check_transitions.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var Plotly = require('@lib/index');
+var Lib = require('@src/lib');
+var d3 = require('d3');
+var delay = require('./delay.js');
+
+var reNumbers = /([\d\.]+)/gm;
+
+function promiseSerial(funcs, wait) {
+ return funcs.reduce(function(promise, func) {
+ return promise.then(function(result) {
+ return func().then(Array.prototype.concat.bind(result)).then(delay(wait));
+ });
+ }, Promise.resolve([]));
+}
+
+function clockTick(currentNow, milliseconds) {
+ Date.now = function() {
+ return currentNow + milliseconds;
+ };
+ d3.timer.flush();
+}
+
+// Using the methodology from http://eng.wealthfront.com/2017/10/26/testing-d3-transitions/
+module.exports = function checkTransition(gd, mock, animateOpts, transitionOpts, tests) {
+ if(!transitionOpts) {
+ transitionOpts = {
+ transition: {
+ duration: 500,
+ easing: 'linear'
+ },
+ frame: {
+ duration: 500
+ }
+ };
+ }
+ // Prepare chain
+ var now = Date.now;
+ var startTime;
+ var currentTime;
+ var p = [
+ function() {
+ return Plotly.newPlot(gd, mock)
+ .then(function() {
+ // Check initial states if present
+ for(var i = 0; i < tests.length; i++) {
+ if(tests[i][0] === 0) assert(tests[i]);
+ }
+ });
+ },
+ function() {
+ // Hijack Date.now
+ startTime = Date.now();
+ currentTime = 0;
+ clockTick(startTime, 0);
+ Plotly.animate(gd, animateOpts, transitionOpts);
+ return Promise.resolve(true);
+ }
+ ];
+
+ var checkTests = tests.map(function(test) {
+ return function() {
+ if(test[0] === 0) return Promise.resolve(true);
+ if(test[0] !== currentTime) {
+ clockTick(startTime, test[0]);
+ currentTime = test[0];
+ }
+ return assert(test);
+ };
+ });
+
+ // Run all tasks
+ return promiseSerial(p.concat(checkTests))
+ .catch(function(err) {
+ Date.now = now;
+ return Promise.reject(err);
+ })
+ .then(function() {
+ Date.now = now;
+ });
+};
+
+// A test array is made of
+// [ms since start of transition, selector, (attr|style), name of attribute, array of values to be found]
+// Ex.: [0, '.point path', 'style', 'fill', ['rgb(31, 119, 180)', 'rgb(31, 119, 180)', 'rgb(31, 119, 180)']]
+function assert(test) {
+ var msg = 'at ' + test[0] + 'ms, selection ' + test[1] + ' has ' + test[3];
+ var cur = [];
+ d3.selectAll(test[1]).each(function(d, i) {
+ if(test[2] === 'style') cur[i] = this.style[test[3]];
+ if(test[2] === 'attr') cur[i] = d3.select(this).attr(test[3]);
+ });
+ switch(test[3]) {
+ case 'd':
+ assertEqual(cur, test[4], round, msg);
+ break;
+ case 'transform':
+ assertCloseTo(cur, test[4], 3, extractNumbers, msg);
+ break;
+ default:
+ assertEqual(cur, test[4], Lib.identity, msg);
+ }
+ return Promise.resolve(true);
+}
+
+function assertEqual(A, B, cb, msg) {
+ var a = cb(A);
+ var b = cb(B);
+ expect(a).withContext(msg + ' equal to ' + JSON.stringify(a)).toEqual(b);
+}
+
+function assertCloseTo(A, B, tolerance, cb, msg) {
+ var a = cb(A).flat();
+ var b = cb(B).flat();
+ expect(a).withContext(msg + ' equal to ' + JSON.stringify(A)).toBeWithinArray(b, tolerance);
+}
+
+function extractNumbers(array) {
+ return array.map(function(d) {
+ return d.match(reNumbers).map(function(n) {
+ return parseFloat(n);
+ });
+ });
+}
+
+function round(array) {
+ return array.map(function(cur) {
+ return cur.replace(reNumbers, function(match) {
+ return Math.round(match);
+ });
+ });
+}