From bed43d1cca9d6dffd708e4edb7a7650e679c3713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Fri, 24 Feb 2017 11:10:53 -0500 Subject: [PATCH 1/4] use d2l to generate 3D hover label text --- src/plots/gl3d/scene.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js index fd921f99d6f..48e2e4112ed 100644 --- a/src/plots/gl3d/scene.js +++ b/src/plots/gl3d/scene.js @@ -58,10 +58,10 @@ 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; + var calendar = trace[axis._id.charAt(0) + 'calendar']; + + return Axes.tickText(axis, axis.d2l(val, 0, calendar), 'hover').text; } var oldEventData; From 62ffd06a65c56bdf7177f700ef7ba7a999450530 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Fri, 24 Feb 2017 11:11:06 -0500 Subject: [PATCH 2/4] add test for 3D hover labels on non-linear axes --- test/jasmine/tests/gl_plot_interact_test.js | 56 ++++++++++++++++++--- 1 file changed, 48 insertions(+), 8 deletions(-) diff --git a/test/jasmine/tests/gl_plot_interact_test.js b/test/jasmine/tests/gl_plot_interact_test.js index 38b3a821a9f..f82d03883e0 100644 --- a/test/jasmine/tests/gl_plot_interact_test.js +++ b/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,14 +100,18 @@ describe('Test gl plot interactions', function() { delay(done); }); - it('should have', function() { - node = d3.selectAll('g.hovertext'); + function assertHoverText(xLabel, yLabel, zLabel) { + var node = d3.selectAll('g.hovertext'); expect(node.size()).toEqual(1, 'one hover text group'); - 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'); + var tspan = d3.selectAll('g.hovertext').selectAll('tspan')[0]; + expect(tspan[0].innerHTML).toEqual(xLabel, 'x val on hover'); + expect(tspan[1].innerHTML).toEqual(yLabel, 'y val on hover'); + expect(tspan[2].innerHTML).toEqual(zLabel, 'z val on hover'); + } + + it('should have', function(done) { + assertHoverText('x: 140.72', 'y: −96.97', 'z: −96.97'); expect(Object.keys(ptData)).toEqual([ 'x', 'y', 'z', @@ -119,8 +123,44 @@ describe('Test gl plot interactions', function() { 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'); - }); + Plotly.restyle(gd, { + x: [['2016-01-11', '2016-01-12', '2017-01-01', '2017-02']] + }) + .then(function() { + mouseEventScatter3d('mouseover'); + return delay; + }) + .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(function() { + mouseEventScatter3d('mouseover'); + return delay; + }) + .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(function() { + mouseEventScatter3d('mouseover'); + return delay; + }) + .then(function() { + assertHoverText('x: Mar 3, 2017', 'y: c', 'z: 100k'); + }) + .then(done); + }); }); describe('scatter3d click events', function() { From e9e0c833818d43299a761472ed80ebbc0ebe55c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Mon, 27 Feb 2017 12:04:48 -0500 Subject: [PATCH 3/4] improve scatter3d hover test - AJ-proof description strings - add hover wrapper --- test/jasmine/tests/gl_plot_interact_test.js | 41 ++++++++++----------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/test/jasmine/tests/gl_plot_interact_test.js b/test/jasmine/tests/gl_plot_interact_test.js index f82d03883e0..256efadba4b 100644 --- a/test/jasmine/tests/gl_plot_interact_test.js +++ b/test/jasmine/tests/gl_plot_interact_test.js @@ -102,15 +102,21 @@ describe('Test gl plot interactions', function() { function assertHoverText(xLabel, yLabel, zLabel) { var node = d3.selectAll('g.hovertext'); - expect(node.size()).toEqual(1, 'one hover text group'); + 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 on hover'); - expect(tspan[1].innerHTML).toEqual(yLabel, 'y val on hover'); - expect(tspan[2].innerHTML).toEqual(zLabel, 'z val on hover'); + 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('should have', function(done) { + it('makes the right hover text and point data', function(done) { + + function hover() { + mouseEventScatter3d('mouseover'); + return delay; + } + assertHoverText('x: 140.72', 'y: −96.97', 'z: −96.97'); expect(Object.keys(ptData)).toEqual([ @@ -118,19 +124,16 @@ describe('Test gl plot interactions', function() { '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(function() { - mouseEventScatter3d('mouseover'); - return delay; - }) + .then(hover) .then(function() { assertHoverText('x: Jan 1, 2017', 'y: −96.97', 'z: −96.97'); @@ -138,10 +141,7 @@ describe('Test gl plot interactions', function() { x: [[new Date(2017, 2, 1), new Date(2017, 2, 2), new Date(2017, 2, 3), new Date(2017, 2, 4)]] }); }) - .then(function() { - mouseEventScatter3d('mouseover'); - return delay; - }) + .then(hover) .then(function() { assertHoverText('x: Mar 3, 2017', 'y: −96.97', 'z: −96.97'); @@ -152,10 +152,7 @@ describe('Test gl plot interactions', function() { 'scene.zaxis.type': 'log' }); }) - .then(function() { - mouseEventScatter3d('mouseover'); - return delay; - }) + .then(hover) .then(function() { assertHoverText('x: Mar 3, 2017', 'y: c', 'z: 100k'); }) From cbf1f8627451308042b1ac845c2a1b2a004f023a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Mon, 27 Feb 2017 12:20:16 -0500 Subject: [PATCH 4/4] fixup calendar on hover handling & add test --- src/plots/gl3d/scene.js | 3 +-- test/jasmine/tests/gl_plot_interact_test.js | 6 ++++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js index 48e2e4112ed..013075e5e64 100644 --- a/src/plots/gl3d/scene.js +++ b/src/plots/gl3d/scene.js @@ -59,9 +59,8 @@ function render(scene) { function formatter(axisName, val) { var axis = scene.fullSceneLayout[axisName]; - var calendar = trace[axis._id.charAt(0) + 'calendar']; - return Axes.tickText(axis, axis.d2l(val, 0, calendar), 'hover').text; + return Axes.tickText(axis, axis.d2l(val), 'hover').text; } var oldEventData; diff --git a/test/jasmine/tests/gl_plot_interact_test.js b/test/jasmine/tests/gl_plot_interact_test.js index 256efadba4b..b802b4dd17e 100644 --- a/test/jasmine/tests/gl_plot_interact_test.js +++ b/test/jasmine/tests/gl_plot_interact_test.js @@ -155,6 +155,12 @@ describe('Test gl plot interactions', function() { .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); });