Merge pull request #4180 from plotly/pr-bar-anim

bar transitions

Author: antoinerg

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/baselines/animation_bar.png

@@ -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/image/mocks/animation_bar.json

@@ -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);
+        });
+    });
+}