improve scattergl hover and tests

Author: archmoj

src/traces/scattergl/calc.js

@@ -37,13 +37,16 @@ module.exports = function calc(gd, trace) {
     var stash = {};
     var i, xx, yy;
 
-    var x = xa.makeCalcdata(trace, 'x');
-    var y = ya.makeCalcdata(trace, 'y');
-    x = alignPeriod(trace, xa, 'x', x);
-    y = alignPeriod(trace, ya, 'y', y);
+    var origX = xa.makeCalcdata(trace, 'x');
+    var origY = ya.makeCalcdata(trace, 'y');
+    var x = alignPeriod(trace, xa, 'x', origX);
+    var y = alignPeriod(trace, ya, 'y', origY);
     trace._x = x;
     trace._y = y;
 
+    if(trace.xperiodalignment) trace._origX = origX;
+    if(trace.yperiodalignment) trace._origY = origY;
+
     // we need hi-precision for scatter2d,
     // regl-scatter2d uses NaNs for bad/missing values
     var positions = new Array(len2);

src/traces/scattergl/hover.js

@@ -161,16 +161,19 @@ function calcHover(pointData, x, y, trace) {
     var fakeCd = {};
     fakeCd[pointData.index] = di;
 
+    var origX = trace._origX;
+    var origY = trace._origY;
+
     var pointData2 = Lib.extendFlat({}, pointData, {
         color: getTraceColor(trace, di),
 
         x0: xp - rad,
         x1: xp + rad,
-        xLabelVal: di.x,
+        xLabelVal: origX ? origX[id] : di.x,
 
         y0: yp - rad,
         y1: yp + rad,
-        yLabelVal: di.y,
+        yLabelVal: origY ? origY[id] : di.y,
 
         cd: fakeCd,
         distance: minDist,

test/image/baselines/gl2d_period_positioning.png

@@ -3,17 +3,21 @@
         {
             "name": "scattergl",
             "type": "scattergl",
-            "y": ["2001-01-01", "2002-01-01", "2003-01-01", "2004-01-01"],
-            "x": ["2001-01-01", "2002-01-01", "2003-01-01", "2004-01-01"],
+            "x": ["2001-01-01", "2002-01-01", "2003-01-01", "2004-01-01", "2005-01-01", "2006-01-01"],
+            "y": ["1970-01-01", "1970-02-01", "1970-03-01", "1970-04-01", "1970-05-01", "1970-06-01"],
             "xperiod": "M12",
             "xperiodalignment": "middle",
-            "yperiod": "M12",
+            "yperiod": "M1",
             "yperiodalignment": "middle"
         }
     ],
     "layout": {
-        "width": 500,
-        "height": 250,
+        "width": 600,
+        "height": 300,
+        "margin": {
+            "t": 30,
+            "b": 30
+        },
         "showlegend": true,
         "hovermode": "closest",
 

test/image/mocks/gl2d_period_positioning.json

@@ -629,3 +629,41 @@ describe('Test hover and click interactions', function() {
         .then(done);
     });
 });
+
+describe('hover with (x|y)period positioning', function() {
+    'use strict';
+
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    function _hover(x, y) {
+        delete gd._hoverdata;
+        Lib.clearThrottle();
+        mouseEvent('mousemove', x, y);
+    }
+
+    it('@gl shows hover info for scattergl', function(done) {
+        Plotly.newPlot(gd, require('@mocks/gl2d_period_positioning.json'))
+        .then(function() { _hover(100, 255); })
+        .then(function() {
+            assertHoverLabelContent({
+                name: '',
+                nums: '(Jan 2001, Jan 1, 1970)'
+            });
+        })
+        .then(function() { _hover(470, 45); })
+        .then(function() {
+            assertHoverLabelContent({
+                name: '',
+                nums: '(Jan 2006, Jun 1, 1970)'
+            });
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});