make finance trace coord to gd.caldata[i] match 1-to-1

.. so that pointing to a particular item using Fx.hover
   can be done using eventData 'pointNumber'.

   Tag the empty (or null) items using `calcdata[i][j].empty`

Author: etpinard

src/traces/box/plot.js

@@ -100,6 +100,8 @@ function plotBoxAndWhiskers(sel, axes, trace, t) {
     paths.exit().remove();
 
     paths.each(function(d) {
+        if(d.empty) return 'M0,0Z';
+
         var pos = d.pos;
         var posc = posAxis.c2p(pos + bPos, true) + bPosPxOffset;
         var pos0 = posAxis.c2p(pos + bPos - bdPos0, true) + bPosPxOffset;

src/traces/box/style.js

@@ -32,14 +32,15 @@ function style(gd, cd) {
 
         if(trace.type === 'candlestick') {
             allBoxes.each(function(boxData) {
+                if(boxData.empty) return;
+
                 var thisBox = d3.select(this);
                 var container = trace[boxData.dir]; // dir = 'increasing' or 'decreasing'
                 styleBox(thisBox, container.line.width, container.line.color, container.fillcolor);
                 // TODO: custom selection style for candlesticks
                 thisBox.style('opacity', trace.selectedpoints && !boxData.selected ? 0.3 : 1);
             });
-        }
-        else {
+        } else {
             styleBox(allBoxes, lineWidth, trace.line.color, trace.fillcolor);
             el.selectAll('path.mean')
                 .style({

src/traces/ohlc/calc.js

@@ -89,6 +89,8 @@ function calcCommon(gd, trace, x, ya, ptFunc) {
             if(hasTextArray) pt.tx = trace.text[i];
 
             cd.push(pt);
+        } else {
+            cd.push({empty: true});
         }
     }
 

src/traces/ohlc/plot.js

@@ -37,6 +37,8 @@ module.exports = function plot(gd, plotinfo, cdOHLC, ohlcLayer) {
         paths.exit().remove();
 
         paths.attr('d', function(d) {
+            if(d.empty) return 'M0,0Z';
+
             var x = xa.c2p(d.pos, true);
             var xo = xa.c2p(d.pos - tickLen, true);
             var xc = xa.c2p(d.pos + tickLen, true);

src/traces/ohlc/style.js

@@ -23,6 +23,8 @@ module.exports = function style(gd, cd) {
         var trace = d[0].trace;
 
         d3.select(this).selectAll('path').each(function(di) {
+            if(di.empty) return;
+
             var dirLine = trace[di.dir].line;
             d3.select(this)
                 .style('fill', 'none')

test/jasmine/tests/finance_test.js

@@ -6,6 +6,8 @@ var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var supplyAllDefaults = require('../assets/supply_defaults');
+var hover = require('../assets/hover');
+var assertHoverLabelContent = require('../assets/custom_assertions').assertHoverLabelContent;
 var failTest = require('../assets/fail_test');
 
 var mock0 = {
@@ -426,15 +428,22 @@ describe('finance charts calc', function() {
         addJunk(trace1);
 
         var out = _calcRaw([trace0, trace1]);
-        var indices = [0, 1, 2, 3, 4, 5, 6, 7];
+        var indices = [0, 1, 2, 3, 4, 5, 6, 7, undefined, undefined, undefined, undefined];
         var i = 'increasing';
         var d = 'decreasing';
-        var directions = [i, d, d, i, d, i, d, i];
+        var directions = [i, d, d, i, d, i, d, i, undefined, undefined, undefined, undefined];
+        var empties = [
+            undefined, undefined, undefined, undefined,
+            undefined, undefined, undefined, undefined,
+            true, true, true, true
+        ];
 
         expect(mapGet(out[0], 'pos')).toEqual(indices);
         expect(mapGet(out[0], 'dir')).toEqual(directions);
         expect(mapGet(out[1], 'pos')).toEqual(indices);
         expect(mapGet(out[1], 'dir')).toEqual(directions);
+        expect(mapGet(out[0], 'empty')).toEqual(empties);
+        expect(mapGet(out[1], 'empty')).toEqual(empties);
     });
 
     it('should work with *filter* transforms', function() {
@@ -1186,3 +1195,54 @@ describe('finance trace hover:', function() {
         });
     });
 });
+
+describe('finance trace hover via Fx.hover():', function() {
+    var gd;
+
+    beforeEach(function() { gd = createGraphDiv(); });
+
+    afterEach(destroyGraphDiv);
+
+    ['candlestick', 'ohlc'].forEach(function(type) {
+        it('should pick correct ' + type + ' item', function(done) {
+            var x = ['hover ok!', 'time2', 'hover off by 1', 'time4'];
+
+            Plotly.newPlot(gd, [{
+                x: x,
+                high: [6, null, 7, 8],
+                close: [4, null, 7, 8],
+                low: [5, null, 7, 8],
+                open: [3, null, 7, 8],
+                type: type
+            }, {
+                x: x,
+                y: [1, null, 2, 3],
+                type: 'bar'
+            }], {
+                xaxis: { rangeslider: {visible: false} },
+                width: 500,
+                height: 500
+            })
+            .then(function() {
+                gd.on('plotly_hover', function(d) {
+                    Plotly.Fx.hover(gd, [
+                        {curveNumber: 0, pointNumber: d.points[0].pointNumber},
+                        {curveNumber: 1, pointNumber: d.points[0].pointNumber}
+                    ]);
+                });
+            })
+            .then(function() { hover(281, 252); })
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: [
+                        'hover off by 1\nopen: 7\nhigh: 7\nlow: 7\nclose: 7  ▲',
+                        '(hover off by 1, 2)'
+                    ],
+                    name: ['trace 0', 'trace 1']
+                }, 'hover over 3rd items (aka 2nd visible items)');
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
+});