Merge pull request #1414 from plotly/gl3d-hover-text-fixes

3D hover text fixes for date axes

Author: etpinard

src/plots/gl3d/scene.js

@@ -58,10 +58,9 @@ function render(scene) {
     }
 
     function formatter(axisName, val) {
-        if(typeof val === 'string') return val;
-
         var axis = scene.fullSceneLayout[axisName];
-        return Axes.tickText(axis, axis.c2l(val), 'hover').text;
+
+        return Axes.tickText(axis, axis.d2l(val), 'hover').text;
     }
 
     var oldEventData;

test/jasmine/tests/gl_plot_interact_test.js

@@ -88,7 +88,7 @@ describe('Test gl plot interactions', function() {
 
         describe('scatter3d hover', function() {
 
-            var node, ptData;
+            var ptData;
 
             beforeEach(function(done) {
                 gd.on('plotly_hover', function(eventData) {
@@ -100,27 +100,70 @@ describe('Test gl plot interactions', function() {
                 delay(done);
             });
 
-            it('should have', function() {
-                node = d3.selectAll('g.hovertext');
-                expect(node.size()).toEqual(1, 'one hover text group');
+            function assertHoverText(xLabel, yLabel, zLabel) {
+                var node = d3.selectAll('g.hovertext');
+                expect(node.size()).toEqual(1, 'hover text group');
+
+                var tspan = d3.selectAll('g.hovertext').selectAll('tspan')[0];
+                expect(tspan[0].innerHTML).toEqual(xLabel, 'x val');
+                expect(tspan[1].innerHTML).toEqual(yLabel, 'y val');
+                expect(tspan[2].innerHTML).toEqual(zLabel, 'z val');
+            }
+
+            it('makes the right hover text and point data', function(done) {
+
+                function hover() {
+                    mouseEventScatter3d('mouseover');
+                    return delay;
+                }
 
-                node = d3.selectAll('g.hovertext').selectAll('tspan')[0];
-                expect(node[0].innerHTML).toEqual('x: 140.72', 'x val on hover');
-                expect(node[1].innerHTML).toEqual('y: −96.97', 'y val on hover');
-                expect(node[2].innerHTML).toEqual('z: −96.97', 'z val on hover');
+                assertHoverText('x: 140.72', 'y: −96.97', 'z: −96.97');
 
                 expect(Object.keys(ptData)).toEqual([
                     'x', 'y', 'z',
                     'data', 'fullData', 'curveNumber', 'pointNumber'
                 ], 'correct hover data fields');
 
-                expect(ptData.x).toBe('140.72', 'x val hover data');
-                expect(ptData.y).toBe('−96.97', 'y val hover data');
-                expect(ptData.z).toEqual('−96.97', 'z val hover data');
-                expect(ptData.curveNumber).toEqual(0, 'curveNumber hover data');
-                expect(ptData.pointNumber).toEqual(2, 'pointNumber hover data');
-            });
+                expect(ptData.x).toBe('140.72', 'x val');
+                expect(ptData.y).toBe('−96.97', 'y val');
+                expect(ptData.z).toEqual('−96.97', 'z val');
+                expect(ptData.curveNumber).toEqual(0, 'curveNumber');
+                expect(ptData.pointNumber).toEqual(2, 'pointNumber');
+
+                Plotly.restyle(gd, {
+                    x: [['2016-01-11', '2016-01-12', '2017-01-01', '2017-02']]
+                })
+                .then(hover)
+                .then(function() {
+                    assertHoverText('x: Jan 1, 2017', 'y: −96.97', 'z: −96.97');
+
+                    return Plotly.restyle(gd, {
+                        x: [[new Date(2017, 2, 1), new Date(2017, 2, 2), new Date(2017, 2, 3), new Date(2017, 2, 4)]]
+                    });
+                })
+                .then(hover)
+                .then(function() {
+                    assertHoverText('x: Mar 3, 2017', 'y: −96.97', 'z: −96.97');
+
+                    return Plotly.update(gd, {
+                        y: [['a', 'b', 'c', 'd']],
+                        z: [[10, 1e3, 1e5, 1e10]]
+                    }, {
+                        'scene.zaxis.type': 'log'
+                    });
+                })
+                .then(hover)
+                .then(function() {
+                    assertHoverText('x: Mar 3, 2017', 'y: c', 'z: 100k');
 
+                    return Plotly.relayout(gd, 'scene.xaxis.calendar', 'chinese');
+                })
+                .then(hover)
+                .then(function() {
+                    assertHoverText('x: 二 6, 2017', 'y: c', 'z: 100k');
+                })
+                .then(done);
+            });
         });
 
         describe('scatter3d click events', function() {