From 689adfaad22d482ca5ff702c59625e17c4b708b9 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 28 Apr 2021 11:47:08 -0400 Subject: [PATCH 01/14] place period positioned points at the end to avoid winning hover --- src/components/fx/hover.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index fcc88da4149..a629fd7a26c 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -680,6 +680,9 @@ function _hover(gd, evt, subplot, noHoverEvent) { }); } + // move period positioned points to the end of list + orderPeriod(hoverData, hovermode); + // lastly, emit custom hover/unhover events var oldhoverdata = gd._hoverdata; var newhoverdata = []; @@ -1889,3 +1892,22 @@ function plainText(s, len) { allowedTags: ['br', 'sub', 'sup', 'b', 'i', 'em'] }); } + +function orderPeriod(hoverData, hovermode) { + var axLetter = hovermode.charAt(0); + + var first = []; + var last = []; + + for(var i = 0; i < hoverData.length; i++) { + var d = hoverData[i]; + + if(d.trace[axLetter + 'period']) { + last.push(d); + } else { + first.push(d); + } + } + + hoverData = first.concat(last); +} From c96bf994eb39eacebf42477222c5b3e09cb1a24f Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 28 Apr 2021 16:07:30 -0400 Subject: [PATCH 02/14] adjust min and max positions of bars in respect to period alignment --- src/traces/bar/hover.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/traces/bar/hover.js b/src/traces/bar/hover.js index e6023543686..3a0f30d252c 100644 --- a/src/traces/bar/hover.js +++ b/src/traces/bar/hover.js @@ -35,8 +35,22 @@ function hoverOnBars(pointData, xval, yval, hovermode) { var posVal, sizeVal, posLetter, sizeLetter, dx, dy, pRangeCalc; - function thisBarMinPos(di) { return di[posLetter] - di.w / 2; } - function thisBarMaxPos(di) { return di[posLetter] + di.w / 2; } + function thisBarMinPos(di) { return thisBarExtPos(di, -1); } + function thisBarMaxPos(di) { return thisBarExtPos(di, 1); } + + function thisBarExtPos(di, sgn) { + var w = di.w; + var delta = sgn * w; + if(trace[posLetter + 'period']) { + var alignment = trace[posLetter + 'periodalignment']; + if(alignment === 'start') { + delta = (sgn === -1) ? 0 : w; + } else if(alignment === 'end') { + delta = (sgn === -1) ? -w : 0; + } + } + return di[posLetter] + delta / 2; + } var minPos = isClosest ? thisBarMinPos : From c6260e3fc0c00899351c394c25591d90176fba90 Mon Sep 17 00:00:00 2001 From: archmoj Date: Sat, 1 May 2021 11:41:56 -0400 Subject: [PATCH 03/14] order hover data to possibly get a non-period point as the winning point --- src/components/fx/hover.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index a629fd7a26c..6f66d539403 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -640,6 +640,9 @@ function _hover(gd, evt, subplot, noHoverEvent) { hoverData.sort(function(d1, d2) { return d1.distance - d2.distance; }); + // move period positioned points to the end of list + orderPeriod(hoverData, hovermode); + // If in compare mode, select every point at position if( helpers.isXYhover(mode) && @@ -680,9 +683,6 @@ function _hover(gd, evt, subplot, noHoverEvent) { }); } - // move period positioned points to the end of list - orderPeriod(hoverData, hovermode); - // lastly, emit custom hover/unhover events var oldhoverdata = gd._hoverdata; var newhoverdata = []; From f4a465e8127d34a729ff2a4ff0809f9513bad45e Mon Sep 17 00:00:00 2001 From: archmoj Date: Sat, 1 May 2021 11:50:00 -0400 Subject: [PATCH 04/14] clarify winning point - avoid extra hd variable --- src/components/fx/hover.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 6f66d539403..51a94963ceb 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -649,20 +649,20 @@ function _hover(gd, evt, subplot, noHoverEvent) { hoverData[0].length !== 0 && hoverData[0].trace.type !== 'splom' // TODO: add support for splom ) { - var hd = hoverData[0]; - var cd0 = hd.cd[hd.index]; + var winningPoint = hoverData[0]; + var cd0 = winningPoint.cd[winningPoint.index]; var isGrouped = (fullLayout.boxmode === 'group' || fullLayout.violinmode === 'group'); - var xVal = hd.xVal; - var ax = hd.xa; + var xVal = winningPoint.xVal; + var ax = winningPoint.xa; if(ax.type === 'category') xVal = ax._categoriesMap[xVal]; if(ax.type === 'date') xVal = ax.d2c(xVal); if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) { xVal += cd0.t.dPos; } - var yVal = hd.yVal; - ax = hd.ya; + var yVal = winningPoint.yVal; + ax = winningPoint.ya; if(ax.type === 'category') yVal = ax._categoriesMap[yVal]; if(ax.type === 'date') yVal = ax.d2c(yVal); if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) { From c89784d5178f1c4f3c6f03d06023b1a61f14b0e8 Mon Sep 17 00:00:00 2001 From: archmoj Date: Sat, 1 May 2021 11:57:54 -0400 Subject: [PATCH 05/14] refactor - make getVal function --- src/components/fx/hover.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 51a94963ceb..d0e718a3abe 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -650,26 +650,12 @@ function _hover(gd, evt, subplot, noHoverEvent) { hoverData[0].trace.type !== 'splom' // TODO: add support for splom ) { var winningPoint = hoverData[0]; - var cd0 = winningPoint.cd[winningPoint.index]; var isGrouped = (fullLayout.boxmode === 'group' || fullLayout.violinmode === 'group'); - var xVal = winningPoint.xVal; - var ax = winningPoint.xa; - if(ax.type === 'category') xVal = ax._categoriesMap[xVal]; - if(ax.type === 'date') xVal = ax.d2c(xVal); - if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) { - xVal += cd0.t.dPos; - } - - var yVal = winningPoint.yVal; - ax = winningPoint.ya; - if(ax.type === 'category') yVal = ax._categoriesMap[yVal]; - if(ax.type === 'date') yVal = ax.d2c(yVal); - if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) { - yVal += cd0.t.dPos; - } - - findHoverPoints(xVal, yVal); + findHoverPoints( + getVal('x', winningPoint, isGrouped), + getVal('y', winningPoint, isGrouped) + ); // Remove duplicated hoverData points // note that d3 also filters identical points in the rendering steps @@ -1911,3 +1897,17 @@ function orderPeriod(hoverData, hovermode) { hoverData = first.concat(last); } + +function getVal(axLetter, winningPoint, isGrouped) { + var cd0 = winningPoint.cd[winningPoint.index]; + var ax = winningPoint[axLetter + 'a']; + var val = winningPoint[axLetter + 'Val']; + + if(ax.type === 'category') val = ax._categoriesMap[val]; + if(ax.type === 'date') val = ax.d2c(val); + if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) { + val += cd0.t.dPos; + } + + return val; +} From d584520602063529c124bdcf1258306ee13850c9 Mon Sep 17 00:00:00 2001 From: archmoj Date: Sat, 1 May 2021 12:05:04 -0400 Subject: [PATCH 06/14] rename function to customVal --- src/components/fx/hover.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index d0e718a3abe..30d13bde037 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -653,8 +653,8 @@ function _hover(gd, evt, subplot, noHoverEvent) { var isGrouped = (fullLayout.boxmode === 'group' || fullLayout.violinmode === 'group'); findHoverPoints( - getVal('x', winningPoint, isGrouped), - getVal('y', winningPoint, isGrouped) + customVal('x', winningPoint, isGrouped), + customVal('y', winningPoint, isGrouped) ); // Remove duplicated hoverData points @@ -1898,7 +1898,7 @@ function orderPeriod(hoverData, hovermode) { hoverData = first.concat(last); } -function getVal(axLetter, winningPoint, isGrouped) { +function customVal(axLetter, winningPoint, isGrouped) { var cd0 = winningPoint.cd[winningPoint.index]; var ax = winningPoint[axLetter + 'a']; var val = winningPoint[axLetter + 'Val']; From e15da902d043400c476f0f3fd22aafa876728eb3 Mon Sep 17 00:00:00 2001 From: archmoj Date: Sat, 1 May 2021 12:17:42 -0400 Subject: [PATCH 07/14] optimize customVal function --- src/components/fx/hover.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 30d13bde037..24737194de7 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -650,11 +650,10 @@ function _hover(gd, evt, subplot, noHoverEvent) { hoverData[0].trace.type !== 'splom' // TODO: add support for splom ) { var winningPoint = hoverData[0]; - var isGrouped = (fullLayout.boxmode === 'group' || fullLayout.violinmode === 'group'); findHoverPoints( - customVal('x', winningPoint, isGrouped), - customVal('y', winningPoint, isGrouped) + customVal('x', winningPoint, fullLayout), + customVal('y', winningPoint, fullLayout) ); // Remove duplicated hoverData points @@ -1898,15 +1897,21 @@ function orderPeriod(hoverData, hovermode) { hoverData = first.concat(last); } -function customVal(axLetter, winningPoint, isGrouped) { - var cd0 = winningPoint.cd[winningPoint.index]; +function customVal(axLetter, winningPoint, fullLayout) { var ax = winningPoint[axLetter + 'a']; var val = winningPoint[axLetter + 'Val']; - if(ax.type === 'category') val = ax._categoriesMap[val]; - if(ax.type === 'date') val = ax.d2c(val); - if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) { - val += cd0.t.dPos; + if(ax.type === 'category') return ax._categoriesMap[val]; + if(ax.type === 'date') return ax.d2c(val); + + var cd0 = winningPoint.cd[winningPoint.index]; + if(cd0 && cd0.t && cd0.t.posLetter === ax._id) { + if( + fullLayout.boxmode === 'group' || + fullLayout.violinmode === 'group' + ) { + val += cd0.t.dPos; + } } return val; From b4bda4e78b208ae85d5fe024e0ce745fac92df9e Mon Sep 17 00:00:00 2001 From: archmoj Date: Sat, 1 May 2021 14:26:00 -0400 Subject: [PATCH 08/14] also look for other alignment periods when a period point wins --- src/components/fx/hover.js | 46 ++++++++++++++++++++++++++++++++++---- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 24737194de7..4facd22586f 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -651,10 +651,48 @@ function _hover(gd, evt, subplot, noHoverEvent) { ) { var winningPoint = hoverData[0]; - findHoverPoints( - customVal('x', winningPoint, fullLayout), - customVal('y', winningPoint, fullLayout) - ); + var customXVal = customVal('x', winningPoint, fullLayout); + var customYVal = customVal('y', winningPoint, fullLayout); + + findHoverPoints(customXVal, customYVal); + + // also find start, middle and end point for period + var axLetter = hovermode.charAt(0); + if(winningPoint.trace[axLetter + 'period']) { + var initLen = hoverData.length; + + var v = winningPoint[axLetter + 'LabelVal']; + var ax = winningPoint[axLetter + 'a']; + var T = {}; + T[axLetter + 'period'] = winningPoint.trace[axLetter + 'period']; + T[axLetter + 'period0'] = winningPoint.trace[axLetter + 'period0']; + + T[axLetter + 'periodalignment'] = 'start'; + var start = alignPeriod(T, ax, axLetter, [v])[0]; + + T[axLetter + 'periodalignment'] = 'middle'; + var middle = alignPeriod(T, ax, axLetter, [v])[0]; + + T[axLetter + 'periodalignment'] = 'end'; + var end = alignPeriod(T, ax, axLetter, [v])[0]; + + if(axLetter === 'x') { + findHoverPoints(start, customYVal); + findHoverPoints(middle, customYVal); + findHoverPoints(end, customYVal); + } else { + findHoverPoints(customXVal, start); + findHoverPoints(customXVal, middle); + findHoverPoints(customXVal, end); + } + + // remove non-period aditions + for(var k = hoverData.length - 1; k >= initLen; k--) { + if(!hoverData[k].trace[axLetter + 'period']) { + hoverData.splice(k, 1); + } + } + } // Remove duplicated hoverData points // note that d3 also filters identical points in the rendering steps From e96ad53cc029f393ac7259661cd39834e9da1468 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 3 May 2021 10:06:41 -0400 Subject: [PATCH 09/14] fixup violin bug introduced in e15da902d043400c476f0f3fd22aafa876728eb3 --- src/components/fx/hover.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 4facd22586f..d67466f2a20 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1939,8 +1939,8 @@ function customVal(axLetter, winningPoint, fullLayout) { var ax = winningPoint[axLetter + 'a']; var val = winningPoint[axLetter + 'Val']; - if(ax.type === 'category') return ax._categoriesMap[val]; - if(ax.type === 'date') return ax.d2c(val); + if(ax.type === 'category') val = ax._categoriesMap[val]; + else if(ax.type === 'date') val = ax.d2c(val); var cd0 = winningPoint.cd[winningPoint.index]; if(cd0 && cd0.t && cd0.t.posLetter === ax._id) { From 428e2485bd1b71734ca35c213451ea25aab04c61 Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 3 May 2021 11:12:20 -0400 Subject: [PATCH 10/14] fixup ordering period points --- src/components/fx/hover.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index d67466f2a20..8979663b86b 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -641,7 +641,7 @@ function _hover(gd, evt, subplot, noHoverEvent) { hoverData.sort(function(d1, d2) { return d1.distance - d2.distance; }); // move period positioned points to the end of list - orderPeriod(hoverData, hovermode); + hoverData = orderPeriod(hoverData, hovermode); // If in compare mode, select every point at position if( @@ -649,6 +649,7 @@ function _hover(gd, evt, subplot, noHoverEvent) { hoverData[0].length !== 0 && hoverData[0].trace.type !== 'splom' // TODO: add support for splom ) { + var initLen = hoverData.length; var winningPoint = hoverData[0]; var customXVal = customVal('x', winningPoint, fullLayout); @@ -659,8 +660,6 @@ function _hover(gd, evt, subplot, noHoverEvent) { // also find start, middle and end point for period var axLetter = hovermode.charAt(0); if(winningPoint.trace[axLetter + 'period']) { - var initLen = hoverData.length; - var v = winningPoint[axLetter + 'LabelVal']; var ax = winningPoint[axLetter + 'a']; var T = {}; @@ -1932,7 +1931,7 @@ function orderPeriod(hoverData, hovermode) { } } - hoverData = first.concat(last); + return first.concat(last); } function customVal(axLetter, winningPoint, fullLayout) { From ef65b9f46c471b8ca348bcef9f20dcb64be3516a Mon Sep 17 00:00:00 2001 From: archmoj Date: Mon, 3 May 2021 12:51:05 -0400 Subject: [PATCH 11/14] add jasmine tests --- test/jasmine/tests/hover_label_test.js | 145 +++++++++++++++++++++++++ 1 file changed, 145 insertions(+) diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index b875369975d..33949c7f657 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -4998,6 +4998,151 @@ describe('hovermode: (x|y)unified', function() { .then(done, done.fail); }); + it('non-period points winning hover', function(done) { + Plotly.newPlot(gd, { + data: [ + { + name: 'bar', + type: 'bar', + x: ['1999-12', '2000-01', '2000-02'], + y: [2, 1, 3], + xhoverformat: '%b', + xperiod: 'M1' + }, + { + name: 'scatter', + type: 'scatter', + x: [ + '2000-01-01', '2000-01-06', '2000-01-11', '2000-01-16', '2000-01-21', '2000-01-26', + '2000-02-01', '2000-02-06', '2000-02-11', '2000-02-16', '2000-02-21', '2000-02-26', + '2000-03-01', '2000-03-06', '2000-03-11', '2000-03-16', '2000-03-21', '2000-03-26' + ], + y: [ + 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, + 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, + 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, + ] + } + ], + layout: { + showlegend: false, + width: 600, + height: 400, + hovermode: 'x unified' + } + }) + .then(function(gd) { + _hover(gd, { xpx: 50, ypx: 200 }); + assertLabel({title: 'Dec', items: [ + 'bar : 2' + ]}); + + _hover(gd, { xpx: 100, ypx: 200 }); + assertLabel({title: 'Jan 1, 2000', items: [ + 'scatter : 1.1' + ]}); + + _hover(gd, { xpx: 150, ypx: 200 }); + assertLabel({title: 'Jan 11, 2000', items: [ + 'bar : (Jan, 1)', + 'scatter : 1.3' + ]}); + + _hover(gd, { xpx: 200, ypx: 200 }); + assertLabel({title: 'Jan 26, 2000', items: [ + 'bar : (Jan, 1)', + 'scatter : 1.6' + ]}); + + _hover(gd, { xpx: 250, ypx: 200 }); + assertLabel({title: 'Feb 11, 2000', items: [ + 'bar : (Feb, 3)', + 'scatter : 2.3' + ]}); + + _hover(gd, { xpx: 300, ypx: 200 }); + assertLabel({title: 'Feb 21, 2000', items: [ + 'bar : (Feb, 3)', + 'scatter : 2.5' + ]}); + + _hover(gd, { xpx: 350, ypx: 200 }); + assertLabel({title: 'Mar 6, 2000', items: [ + 'scatter : 3.2' + ]}); + }) + .then(done, done.fail); + }); + + it('period points alignments', function(done) { + Plotly.newPlot(gd, { + data: [ + { + name: 'bar', + type: 'bar', + x: ['2000-01', '2000-02'], + y: [1, 2], + xhoverfrmat: '%b', + xperiod: 'M1' + }, + { + name: 'start', + type: 'scatter', + x: ['2000-01', '2000-02'], + y: [1, 2], + xhoverformat: '%b', + xperiod: 'M1', + xperiodalignment: 'start' + }, + { + name: 'end', + type: 'scatter', + x: ['2000-01', '2000-02'], + y: [1, 2], + xhoverformat: '%b', + xperiod: 'M1', + xperiodalignment: 'end' + }, + ], + layout: { + showlegend: false, + width: 600, + height: 400, + hovermode: 'x unified' + } + }) + .then(function(gd) { + _hover(gd, { xpx: 40, ypx: 200 }); + assertLabel({title: 'Jan', items: [ + 'bar : (Jan 1, 2000, 1)', + 'start : 1', + 'end : 1' + ]}); + + _hover(gd, { xpx: 100, ypx: 200 }); + assertLabel({title: 'Jan 1, 2000', items: [ + 'bar : 1', + 'start : (Jan, 1)', + 'end : (Jan, 1)' + ]}); + + _hover(gd, { xpx: 360, ypx: 200 }); + assertLabel({title: 'Feb 1, 2000', items: [ + 'bar : 2', + 'start : (Feb, 2)', + 'end : (Feb, 2)' + ]}); + + _hover(gd, { xpx: 400, ypx: 200 }); + assertLabel({title: 'Feb', items: [ + 'bar : (Feb 1, 2000, 2)', + 'start : 2', + 'end : 2' + ]}); + }) + .then(done, done.fail); + }); + it('should have the same traceorder as the legend', function(done) { var mock = require('@mocks/stacked_area.json'); var mockCopy = Lib.extendDeep({}, mock); From 543698a8b097f576f326f8964227e2c620bcac6c Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 6 May 2021 11:00:04 -0400 Subject: [PATCH 12/14] filter seen traces in period hovers --- src/components/fx/hover.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 8979663b86b..e67a48c220a 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -685,9 +685,18 @@ function _hover(gd, evt, subplot, noHoverEvent) { findHoverPoints(customXVal, end); } - // remove non-period aditions - for(var k = hoverData.length - 1; k >= initLen; k--) { - if(!hoverData[k].trace[axLetter + 'period']) { + var k; + var seen = {}; + for(k = 0; k < initLen; k++) { + seen[hoverData[k].trace.index] = true; + } + + // remove non-period aditions and traces that seen before + for(k = hoverData.length - 1; k >= initLen; k--) { + if( + seen[hoverData[k].trace.index] || + !hoverData[k].trace[axLetter + 'period'] + ) { hoverData.splice(k, 1); } } From 170dd5d06dc722ed2a405a00e5e57da3561bf178 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 6 May 2021 11:13:28 -0400 Subject: [PATCH 13/14] add jasmine test --- test/jasmine/tests/hover_label_test.js | 77 ++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 33949c7f657..50c93abd336 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -5074,6 +5074,83 @@ describe('hovermode: (x|y)unified', function() { .then(done, done.fail); }); + it('period scatter points and period bars', function(done) { + Plotly.newPlot(gd, { + data: [ + { + name: 'bar', + type: 'bar', + x: ['1999-12', '2000-01', '2000-02'], + y: [2, 1, 3], + xhoverformat: '%b', + xperiod: 'M1' + }, + { + name: 'scatter', + type: 'scatter', + x: [ + '2000-01-01', '2000-01-06', '2000-01-11', '2000-01-16', '2000-01-21', '2000-01-26', + '2000-02-01', '2000-02-06', '2000-02-11', '2000-02-16', '2000-02-21', '2000-02-26', + '2000-03-01', '2000-03-06', '2000-03-11', '2000-03-16', '2000-03-21', '2000-03-26' + ], + y: [ + 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, + 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, + 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, + ], + xperiod: 24 * 3600 * 1000, + } + ], + layout: { + showlegend: false, + width: 600, + height: 400, + hovermode: 'x unified' + } + }) + .then(function(gd) { + _hover(gd, { xpx: 50, ypx: 200 }); + assertLabel({title: 'Dec', items: [ + 'bar : 2' + ]}); + + _hover(gd, { xpx: 100, ypx: 200 }); + assertLabel({title: 'Jan 1, 2000', items: [ + 'scatter : 1.1' + ]}); + + _hover(gd, { xpx: 150, ypx: 200 }); + assertLabel({title: 'Jan 11, 2000', items: [ + 'bar : (Jan, 1)', + 'scatter : 1.3' + ]}); + + _hover(gd, { xpx: 200, ypx: 200 }); + assertLabel({title: 'Jan 26, 2000', items: [ + 'bar : (Jan, 1)', + 'scatter : 1.6' + ]}); + + _hover(gd, { xpx: 250, ypx: 200 }); + assertLabel({title: 'Feb 11, 2000', items: [ + 'bar : (Feb, 3)', + 'scatter : 2.3' + ]}); + + _hover(gd, { xpx: 300, ypx: 200 }); + assertLabel({title: 'Feb 21, 2000', items: [ + 'bar : (Feb, 3)', + 'scatter : 2.5' + ]}); + + _hover(gd, { xpx: 350, ypx: 200 }); + assertLabel({title: 'Mar 6, 2000', items: [ + 'scatter : 3.2' + ]}); + }) + .then(done, done.fail); + }); + it('period points alignments', function(done) { Plotly.newPlot(gd, { data: [ From 4f80d95e759e36dd67d7d0e1aac7e8397089972a Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 6 May 2021 11:20:22 -0400 Subject: [PATCH 14/14] merge two tests --- test/jasmine/tests/hover_label_test.js | 220 +++++++++---------------- 1 file changed, 77 insertions(+), 143 deletions(-) diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 50c93abd336..33740525519 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -4998,157 +4998,91 @@ describe('hovermode: (x|y)unified', function() { .then(done, done.fail); }); - it('non-period points winning hover', function(done) { - Plotly.newPlot(gd, { - data: [ - { - name: 'bar', - type: 'bar', - x: ['1999-12', '2000-01', '2000-02'], - y: [2, 1, 3], - xhoverformat: '%b', - xperiod: 'M1' - }, - { - name: 'scatter', - type: 'scatter', - x: [ - '2000-01-01', '2000-01-06', '2000-01-11', '2000-01-16', '2000-01-21', '2000-01-26', - '2000-02-01', '2000-02-06', '2000-02-11', '2000-02-16', '2000-02-21', '2000-02-26', - '2000-03-01', '2000-03-06', '2000-03-11', '2000-03-16', '2000-03-21', '2000-03-26' - ], - y: [ - 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, - 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, - 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, - ] + [{ + xperiod: 0, + desc: 'non-period scatter points and period bars' + }, { + xperiod: 24 * 3600 * 1000, + desc: 'period scatter points and period bars' + }].forEach(function(t) { + it(t.desc, function(done) { + var fig = { + data: [ + { + name: 'bar', + type: 'bar', + x: ['1999-12', '2000-01', '2000-02'], + y: [2, 1, 3], + xhoverformat: '%b', + xperiod: 'M1' + }, + { + xperiod: t.xperiod, + name: 'scatter', + type: 'scatter', + x: [ + '2000-01-01', '2000-01-06', '2000-01-11', '2000-01-16', '2000-01-21', '2000-01-26', + '2000-02-01', '2000-02-06', '2000-02-11', '2000-02-16', '2000-02-21', '2000-02-26', + '2000-03-01', '2000-03-06', '2000-03-11', '2000-03-16', '2000-03-21', '2000-03-26' + ], + y: [ + 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, + 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, + 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, + ] + } + ], + layout: { + showlegend: false, + width: 600, + height: 400, + hovermode: 'x unified' } - ], - layout: { - showlegend: false, - width: 600, - height: 400, - hovermode: 'x unified' - } - }) - .then(function(gd) { - _hover(gd, { xpx: 50, ypx: 200 }); - assertLabel({title: 'Dec', items: [ - 'bar : 2' - ]}); - - _hover(gd, { xpx: 100, ypx: 200 }); - assertLabel({title: 'Jan 1, 2000', items: [ - 'scatter : 1.1' - ]}); - - _hover(gd, { xpx: 150, ypx: 200 }); - assertLabel({title: 'Jan 11, 2000', items: [ - 'bar : (Jan, 1)', - 'scatter : 1.3' - ]}); - - _hover(gd, { xpx: 200, ypx: 200 }); - assertLabel({title: 'Jan 26, 2000', items: [ - 'bar : (Jan, 1)', - 'scatter : 1.6' - ]}); - - _hover(gd, { xpx: 250, ypx: 200 }); - assertLabel({title: 'Feb 11, 2000', items: [ - 'bar : (Feb, 3)', - 'scatter : 2.3' - ]}); - - _hover(gd, { xpx: 300, ypx: 200 }); - assertLabel({title: 'Feb 21, 2000', items: [ - 'bar : (Feb, 3)', - 'scatter : 2.5' - ]}); - - _hover(gd, { xpx: 350, ypx: 200 }); - assertLabel({title: 'Mar 6, 2000', items: [ - 'scatter : 3.2' - ]}); - }) - .then(done, done.fail); - }); + }; - it('period scatter points and period bars', function(done) { - Plotly.newPlot(gd, { - data: [ - { - name: 'bar', - type: 'bar', - x: ['1999-12', '2000-01', '2000-02'], - y: [2, 1, 3], - xhoverformat: '%b', - xperiod: 'M1' - }, - { - name: 'scatter', - type: 'scatter', - x: [ - '2000-01-01', '2000-01-06', '2000-01-11', '2000-01-16', '2000-01-21', '2000-01-26', - '2000-02-01', '2000-02-06', '2000-02-11', '2000-02-16', '2000-02-21', '2000-02-26', - '2000-03-01', '2000-03-06', '2000-03-11', '2000-03-16', '2000-03-21', '2000-03-26' - ], - y: [ - 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, - 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, - 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, - ], - xperiod: 24 * 3600 * 1000, - } - ], - layout: { - showlegend: false, - width: 600, - height: 400, - hovermode: 'x unified' - } - }) - .then(function(gd) { - _hover(gd, { xpx: 50, ypx: 200 }); - assertLabel({title: 'Dec', items: [ - 'bar : 2' - ]}); + Plotly.newPlot(gd, fig) + .then(function(gd) { + _hover(gd, { xpx: 50, ypx: 200 }); + assertLabel({title: 'Dec', items: [ + 'bar : 2' + ]}); - _hover(gd, { xpx: 100, ypx: 200 }); - assertLabel({title: 'Jan 1, 2000', items: [ - 'scatter : 1.1' - ]}); + _hover(gd, { xpx: 100, ypx: 200 }); + assertLabel({title: 'Jan 1, 2000', items: [ + 'scatter : 1.1' + ]}); - _hover(gd, { xpx: 150, ypx: 200 }); - assertLabel({title: 'Jan 11, 2000', items: [ - 'bar : (Jan, 1)', - 'scatter : 1.3' - ]}); + _hover(gd, { xpx: 150, ypx: 200 }); + assertLabel({title: 'Jan 11, 2000', items: [ + 'bar : (Jan, 1)', + 'scatter : 1.3' + ]}); - _hover(gd, { xpx: 200, ypx: 200 }); - assertLabel({title: 'Jan 26, 2000', items: [ - 'bar : (Jan, 1)', - 'scatter : 1.6' - ]}); + _hover(gd, { xpx: 200, ypx: 200 }); + assertLabel({title: 'Jan 26, 2000', items: [ + 'bar : (Jan, 1)', + 'scatter : 1.6' + ]}); - _hover(gd, { xpx: 250, ypx: 200 }); - assertLabel({title: 'Feb 11, 2000', items: [ - 'bar : (Feb, 3)', - 'scatter : 2.3' - ]}); + _hover(gd, { xpx: 250, ypx: 200 }); + assertLabel({title: 'Feb 11, 2000', items: [ + 'bar : (Feb, 3)', + 'scatter : 2.3' + ]}); - _hover(gd, { xpx: 300, ypx: 200 }); - assertLabel({title: 'Feb 21, 2000', items: [ - 'bar : (Feb, 3)', - 'scatter : 2.5' - ]}); + _hover(gd, { xpx: 300, ypx: 200 }); + assertLabel({title: 'Feb 21, 2000', items: [ + 'bar : (Feb, 3)', + 'scatter : 2.5' + ]}); - _hover(gd, { xpx: 350, ypx: 200 }); - assertLabel({title: 'Mar 6, 2000', items: [ - 'scatter : 3.2' - ]}); - }) - .then(done, done.fail); + _hover(gd, { xpx: 350, ypx: 200 }); + assertLabel({title: 'Mar 6, 2000', items: [ + 'scatter : 3.2' + ]}); + }) + .then(done, done.fail); + }); }); it('period points alignments', function(done) {