From 4573f349c4299dfddc6ed4029ecf6a25df626b21 Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Thu, 18 Feb 2021 07:45:04 -0800 Subject: [PATCH 01/18] Output bounding box to hover event data --- src/components/fx/helpers.js | 5 +++++ src/components/fx/hover.js | 14 ++++++++++++++ src/traces/bar/event_data.js | 5 +++++ src/traces/box/event_data.js | 5 +++++ src/traces/funnel/event_data.js | 5 +++++ src/traces/histogram/event_data.js | 5 +++++ src/traces/image/event_data.js | 6 ++++++ src/traces/pie/event_data.js | 11 ++++++++++- src/traces/pie/plot.js | 20 ++++++++++++++------ src/traces/scattercarpet/event_data.js | 5 +++++ src/traces/scatterternary/event_data.js | 5 +++++ src/traces/waterfall/event_data.js | 5 +++++ 12 files changed, 84 insertions(+), 7 deletions(-) diff --git a/src/components/fx/helpers.js b/src/components/fx/helpers.js index f11e5266ef7..d0d76712634 100644 --- a/src/components/fx/helpers.js +++ b/src/components/fx/helpers.js @@ -138,6 +138,11 @@ exports.makeEventData = function(pt, trace, cd) { if('yVal' in pt) out.y = pt.yVal; else if('y' in pt) out.y = pt.y; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; if(pt.zLabelVal !== undefined) out.z = pt.zLabelVal; diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index bf0723787c5..0557e0b7e4a 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -680,6 +680,12 @@ function _hover(gd, evt, subplot, noHoverEvent) { var oldhoverdata = gd._hoverdata; var newhoverdata = []; + // Top/left hover offsets relative to graph div. As long as hover content is + // a sibling of the graph div, it will be positioned correctly relative to + // the offset parent, whatever that may be. + var hot = gd.offsetTop + gd.clientTop; + var hol = gd.offsetLeft + gd.clientLeft; + // pull out just the data that's useful to // other people and send it to the event for(itemnum = 0; itemnum < hoverData.length; itemnum++) { @@ -694,6 +700,14 @@ function _hover(gd, evt, subplot, noHoverEvent) { pt.hovertemplate = ht || pt.trace.hovertemplate || false; } + var bbox = {}; + eventData.bbox = bbox; + + if ('x0' in pt) bbox.x0 = hol + pt.x0 + pt.xa._offset; + if ('x1' in pt) bbox.x1 = hol + pt.x1 + pt.xa._offset; + if ('y0' in pt) bbox.y0 = hot + pt.y0 + pt.ya._offset; + if ('y1' in pt) bbox.y1 = hot + pt.y1 + pt.ya._offset; + pt.eventData = [eventData]; newhoverdata.push(eventData); } diff --git a/src/traces/bar/event_data.js b/src/traces/bar/event_data.js index fb20f16b065..27320aa0997 100644 --- a/src/traces/bar/event_data.js +++ b/src/traces/bar/event_data.js @@ -7,6 +7,11 @@ module.exports = function eventData(out, pt, trace) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + if(trace.orientation === 'h') { out.label = out.y; out.value = out.x; diff --git a/src/traces/box/event_data.js b/src/traces/box/event_data.js index 4ee9bd70d9f..16a8a51e011 100644 --- a/src/traces/box/event_data.js +++ b/src/traces/box/event_data.js @@ -11,5 +11,10 @@ module.exports = function eventData(out, pt) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + return out; }; diff --git a/src/traces/funnel/event_data.js b/src/traces/funnel/event_data.js index 678219186e4..3603a29055a 100644 --- a/src/traces/funnel/event_data.js +++ b/src/traces/funnel/event_data.js @@ -13,5 +13,10 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + return out; }; diff --git a/src/traces/histogram/event_data.js b/src/traces/histogram/event_data.js index db61fccc7db..3830a8e53f4 100644 --- a/src/traces/histogram/event_data.js +++ b/src/traces/histogram/event_data.js @@ -11,6 +11,11 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + // specific to histogram - CDFs do not have pts (yet?) if(!(trace.cumulative || {}).enabled) { var pts = Array.isArray(pointNumber) ? diff --git a/src/traces/image/event_data.js b/src/traces/image/event_data.js index 0d8d1bc3ba0..4bcb2bab08e 100644 --- a/src/traces/image/event_data.js +++ b/src/traces/image/event_data.js @@ -3,6 +3,12 @@ module.exports = function eventData(out, pt) { if('xVal' in pt) out.x = pt.xVal; if('yVal' in pt) out.y = pt.yVal; + + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; out.color = pt.color; diff --git a/src/traces/pie/event_data.js b/src/traces/pie/event_data.js index 3393f0353dd..eb5cdcad87a 100644 --- a/src/traces/pie/event_data.js +++ b/src/traces/pie/event_data.js @@ -18,7 +18,16 @@ module.exports = function eventData(pt, trace) { text: pt.text, // pt.v (and pt.i below) for backward compatibility - v: pt.v + v: pt.v, + + // TODO: These coordinates aren't quite correct and don't take into account some offset + // I still haven't quite located (similar to xa._offset) + bbox: { + x0: pt.x0, + x1: pt.x1, + y0: pt.y0, + y1: pt.y1, + }, }; // Only include pointNumber if it's unambiguous diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index cca8694817d..38a6699f580 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -379,12 +379,20 @@ function attachFxHandlers(sliceTop, gd, cd) { if(hoverinfo === 'all') hoverinfo = 'label+text+value+percent+name'; + // If hoverinfo === 'none', we still want the *coordinates* of hover to be + // output, just not the hover to actually display + var rInscribed = pt.rInscribed || 0; + var hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed); + var hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed); + pt.x0 = hoverCenterX - rInscribed * cd0.r; + pt.x1 = hoverCenterX + rInscribed * cd0.r; + pt.y0 = hoverCenterY; + pt.y1 = hoverCenterY; + // in case we dragged over the pie from another subplot, // or if hover is turned off if(trace2.hovertemplate || (hoverinfo !== 'none' && hoverinfo !== 'skip' && hoverinfo)) { - var rInscribed = pt.rInscribed || 0; - var hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed); - var hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed); + var separators = fullLayout2.separators; var text = []; @@ -406,9 +414,9 @@ function attachFxHandlers(sliceTop, gd, cd) { Fx.loneHover({ trace: trace, - x0: hoverCenterX - rInscribed * cd0.r, - x1: hoverCenterX + rInscribed * cd0.r, - y: hoverCenterY, + x0: pt.x0, + x1: pt.x1, + y: pt.y0, text: text.join('
'), name: (trace2.hovertemplate || hoverinfo.indexOf('name') !== -1) ? trace2.name : undefined, idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right', diff --git a/src/traces/scattercarpet/event_data.js b/src/traces/scattercarpet/event_data.js index 41aa4b4a739..c4b1feca719 100644 --- a/src/traces/scattercarpet/event_data.js +++ b/src/traces/scattercarpet/event_data.js @@ -7,5 +7,10 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { out.b = cdi.b; out.y = cdi.y; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + return out; }; diff --git a/src/traces/scatterternary/event_data.js b/src/traces/scatterternary/event_data.js index ef7722d7419..4a72adc00b6 100644 --- a/src/traces/scatterternary/event_data.js +++ b/src/traces/scatterternary/event_data.js @@ -4,6 +4,11 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + if(cd[pointNumber]) { var cdi = cd[pointNumber]; diff --git a/src/traces/waterfall/event_data.js b/src/traces/waterfall/event_data.js index 24c05324795..5154517813a 100644 --- a/src/traces/waterfall/event_data.js +++ b/src/traces/waterfall/event_data.js @@ -13,5 +13,10 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; + if ('x0' in pt) out.x0 = pt.x0; + if ('x1' in pt) out.x1 = pt.x1; + if ('y0' in pt) out.y0 = pt.y0; + if ('y1' in pt) out.y1 = pt.y1; + return out; }; From 86a4fbeb90034f2b2015c0e8d82a8034f90b2583 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 10:53:58 -0400 Subject: [PATCH 02/18] draft log for PR 5512 --- draftlogs/5512_add.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/5512_add.md diff --git a/draftlogs/5512_add.md b/draftlogs/5512_add.md new file mode 100644 index 00000000000..880c848b135 --- /dev/null +++ b/draftlogs/5512_add.md @@ -0,0 +1 @@ + - Provide bounding box positions in hover event data [[#5512](https://github.com/plotly/plotly.js/pull/5512)] From 4b04337acb3f54d1083266194b06d609dcfe3a24 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 11:01:18 -0400 Subject: [PATCH 03/18] fix syntax --- src/components/fx/helpers.js | 8 ++++---- src/components/fx/hover.js | 8 ++++---- src/traces/bar/event_data.js | 8 ++++---- src/traces/box/event_data.js | 8 ++++---- src/traces/funnel/event_data.js | 8 ++++---- src/traces/histogram/event_data.js | 8 ++++---- src/traces/image/event_data.js | 8 ++++---- src/traces/pie/plot.js | 1 - src/traces/scattercarpet/event_data.js | 8 ++++---- src/traces/scatterternary/event_data.js | 8 ++++---- src/traces/waterfall/event_data.js | 8 ++++---- 11 files changed, 40 insertions(+), 41 deletions(-) diff --git a/src/components/fx/helpers.js b/src/components/fx/helpers.js index d0d76712634..a796aded8c8 100644 --- a/src/components/fx/helpers.js +++ b/src/components/fx/helpers.js @@ -138,10 +138,10 @@ exports.makeEventData = function(pt, trace, cd) { if('yVal' in pt) out.y = pt.yVal; else if('y' in pt) out.y = pt.y; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 4e6b40c4e76..b99003455eb 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -755,10 +755,10 @@ function _hover(gd, evt, subplot, noHoverEvent) { var bbox = {}; eventData.bbox = bbox; - if ('x0' in pt) bbox.x0 = hol + pt.x0 + pt.xa._offset; - if ('x1' in pt) bbox.x1 = hol + pt.x1 + pt.xa._offset; - if ('y0' in pt) bbox.y0 = hot + pt.y0 + pt.ya._offset; - if ('y1' in pt) bbox.y1 = hot + pt.y1 + pt.ya._offset; + if('x0' in pt) bbox.x0 = hol + pt.x0 + pt.xa._offset; + if('x1' in pt) bbox.x1 = hol + pt.x1 + pt.xa._offset; + if('y0' in pt) bbox.y0 = hot + pt.y0 + pt.ya._offset; + if('y1' in pt) bbox.y1 = hot + pt.y1 + pt.ya._offset; pt.eventData = [eventData]; newhoverdata.push(eventData); diff --git a/src/traces/bar/event_data.js b/src/traces/bar/event_data.js index 27320aa0997..0d3f6f4ff3f 100644 --- a/src/traces/bar/event_data.js +++ b/src/traces/bar/event_data.js @@ -7,10 +7,10 @@ module.exports = function eventData(out, pt, trace) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; if(trace.orientation === 'h') { out.label = out.y; diff --git a/src/traces/box/event_data.js b/src/traces/box/event_data.js index 16a8a51e011..21c0fc67abb 100644 --- a/src/traces/box/event_data.js +++ b/src/traces/box/event_data.js @@ -11,10 +11,10 @@ module.exports = function eventData(out, pt) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; return out; }; diff --git a/src/traces/funnel/event_data.js b/src/traces/funnel/event_data.js index 3603a29055a..b7a06d679ca 100644 --- a/src/traces/funnel/event_data.js +++ b/src/traces/funnel/event_data.js @@ -13,10 +13,10 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; return out; }; diff --git a/src/traces/histogram/event_data.js b/src/traces/histogram/event_data.js index 3830a8e53f4..181ce500d69 100644 --- a/src/traces/histogram/event_data.js +++ b/src/traces/histogram/event_data.js @@ -11,10 +11,10 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; // specific to histogram - CDFs do not have pts (yet?) if(!(trace.cumulative || {}).enabled) { diff --git a/src/traces/image/event_data.js b/src/traces/image/event_data.js index 4bcb2bab08e..8e07437aff3 100644 --- a/src/traces/image/event_data.js +++ b/src/traces/image/event_data.js @@ -4,10 +4,10 @@ module.exports = function eventData(out, pt) { if('xVal' in pt) out.x = pt.xVal; if('yVal' in pt) out.y = pt.yVal; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 38a6699f580..17810a3b712 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -392,7 +392,6 @@ function attachFxHandlers(sliceTop, gd, cd) { // in case we dragged over the pie from another subplot, // or if hover is turned off if(trace2.hovertemplate || (hoverinfo !== 'none' && hoverinfo !== 'skip' && hoverinfo)) { - var separators = fullLayout2.separators; var text = []; diff --git a/src/traces/scattercarpet/event_data.js b/src/traces/scattercarpet/event_data.js index c4b1feca719..a89a923f579 100644 --- a/src/traces/scattercarpet/event_data.js +++ b/src/traces/scattercarpet/event_data.js @@ -7,10 +7,10 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { out.b = cdi.b; out.y = cdi.y; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; return out; }; diff --git a/src/traces/scatterternary/event_data.js b/src/traces/scatterternary/event_data.js index 4a72adc00b6..733816565ed 100644 --- a/src/traces/scatterternary/event_data.js +++ b/src/traces/scatterternary/event_data.js @@ -4,10 +4,10 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; if(cd[pointNumber]) { var cdi = cd[pointNumber]; diff --git a/src/traces/waterfall/event_data.js b/src/traces/waterfall/event_data.js index 5154517813a..3a25b77fc28 100644 --- a/src/traces/waterfall/event_data.js +++ b/src/traces/waterfall/event_data.js @@ -13,10 +13,10 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if ('x0' in pt) out.x0 = pt.x0; - if ('x1' in pt) out.x1 = pt.x1; - if ('y0' in pt) out.y0 = pt.y0; - if ('y1' in pt) out.y1 = pt.y1; + if('x0' in pt) out.x0 = pt.x0; + if('x1' in pt) out.x1 = pt.x1; + if('y0' in pt) out.y0 = pt.y0; + if('y1' in pt) out.y1 = pt.y1; return out; }; From 034779da3346f041614b38040ce0eff64d404032 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 11:04:51 -0400 Subject: [PATCH 04/18] rename top and left variables --- src/components/fx/hover.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index b99003455eb..66ac9b91cb7 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -735,8 +735,8 @@ function _hover(gd, evt, subplot, noHoverEvent) { // Top/left hover offsets relative to graph div. As long as hover content is // a sibling of the graph div, it will be positioned correctly relative to // the offset parent, whatever that may be. - var hot = gd.offsetTop + gd.clientTop; - var hol = gd.offsetLeft + gd.clientLeft; + var gTop = gd.offsetTop + gd.clientTop; + var gLeft = gd.offsetLeft + gd.clientLeft; // pull out just the data that's useful to // other people and send it to the event @@ -753,13 +753,12 @@ function _hover(gd, evt, subplot, noHoverEvent) { } var bbox = {}; + if('x0' in pt) bbox.x0 = pt.x0 + pt.xa._offset + gLeft; + if('x1' in pt) bbox.x1 = pt.x1 + pt.xa._offset + gLeft; + if('y0' in pt) bbox.y0 = pt.y0 + pt.ya._offset + gTop; + if('y1' in pt) bbox.y1 = pt.y1 + pt.ya._offset + gTop; eventData.bbox = bbox; - if('x0' in pt) bbox.x0 = hol + pt.x0 + pt.xa._offset; - if('x1' in pt) bbox.x1 = hol + pt.x1 + pt.xa._offset; - if('y0' in pt) bbox.y0 = hot + pt.y0 + pt.ya._offset; - if('y1' in pt) bbox.y1 = hot + pt.y1 + pt.ya._offset; - pt.eventData = [eventData]; newhoverdata.push(eventData); } From 9a57ec393a6fbfccde0e867fa1833c6ce93c1e56 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 11:38:28 -0400 Subject: [PATCH 05/18] adjust jasmine tests --- test/jasmine/tests/click_test.js | 30 +++++++----- test/jasmine/tests/funnelarea_test.js | 2 +- test/jasmine/tests/geo_test.js | 60 ++++++++++++------------ test/jasmine/tests/mapbox_test.js | 18 +++---- test/jasmine/tests/pie_test.js | 4 +- test/jasmine/tests/scattermapbox_test.js | 42 ++++++++--------- test/jasmine/tests/ternary_test.js | 56 +++++++--------------- 7 files changed, 97 insertions(+), 115 deletions(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index e2b0ca81c6a..9c707e42b90 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -115,10 +115,11 @@ describe('Test click interactions:', function() { expect(contextPassthroughs).toBe(0); var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ + expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'bbox', 'x0', 'x1', 'y0', 'y1', 'x', 'y', 'xaxis', 'yaxis' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0); expect(pt.pointNumber).toEqual(11); expect(pt.x).toEqual(0.125); @@ -148,10 +149,11 @@ describe('Test click interactions:', function() { expect(contextPassthroughs).toBe(0); var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ + expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'bbox', 'x0', 'x1', 'y0', 'y1', 'x', 'y', 'xaxis', 'yaxis' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0); expect(pt.pointNumber).toEqual(11); expect(pt.x).toEqual(0.125); @@ -219,10 +221,11 @@ describe('Test click interactions:', function() { expect(contextPassthroughs).toBe(0, i); var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ + expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'bbox', 'x0', 'x1', 'y0', 'y1', 'x', 'y', 'xaxis', 'yaxis' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0); expect(pt.pointNumber).toEqual(11); expect(pt.x).toEqual(0.125); @@ -308,10 +311,11 @@ describe('Test click interactions:', function() { expect(futureData.points.length).toEqual(1); var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ + expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'bbox', 'x0', 'x1', 'y0', 'y1', 'x', 'y', 'xaxis', 'yaxis' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0); expect(pt.pointNumber).toEqual(11); expect(pt.x).toEqual(0.125); @@ -341,10 +345,11 @@ describe('Test click interactions:', function() { expect(futureData.points.length).toEqual(1); var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ + expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'bbox', 'x0', 'x1', 'y0', 'y1', 'x', 'y', 'xaxis', 'yaxis' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0); expect(pt.pointNumber).toEqual(11); expect(pt.x).toEqual(0.125); @@ -378,10 +383,11 @@ describe('Test click interactions:', function() { expect(futureData.points.length).toEqual(1); var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ + expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'bbox', 'x0', 'x1', 'y0', 'y1', 'x', 'y', 'xaxis', 'yaxis' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0); expect(pt.pointNumber).toEqual(11); expect(pt.x).toEqual(0.125); diff --git a/test/jasmine/tests/funnelarea_test.js b/test/jasmine/tests/funnelarea_test.js index 2afb934e434..faa00094d13 100644 --- a/test/jasmine/tests/funnelarea_test.js +++ b/test/jasmine/tests/funnelarea_test.js @@ -763,7 +763,7 @@ describe('funnelarea hovering', function() { var fields = [ 'curveNumber', 'pointNumber', 'pointNumbers', - 'data', 'fullData', + 'data', 'fullData', 'bbox', 'label', 'color', 'value', 'percent', 'text' ]; diff --git a/test/jasmine/tests/geo_test.js b/test/jasmine/tests/geo_test.js index 335bcf990e4..c6ec7a8c830 100644 --- a/test/jasmine/tests/geo_test.js +++ b/test/jasmine/tests/geo_test.js @@ -882,10 +882,10 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(ptData).sort().sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'marker.size' - ]); + ].sort()); expect(cnt).toEqual(1); }); @@ -947,10 +947,10 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(ptData).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'marker.size' - ]); + ].sort()); }); it('should show the correct point data', function() { @@ -979,10 +979,10 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(ptData).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'marker.size' - ]); + ].sort()); }); it('should show the correct point data', function() { @@ -1008,10 +1008,10 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(ptData).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'location', 'z', 'ct' - ]); + ].sort()); }); it('should show the correct point data', function() { @@ -1036,10 +1036,10 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(ptData).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'location', 'z', 'ct' - ]); + ].sort()); }); it('should show the correct point data', function() { @@ -1068,10 +1068,10 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(ptData).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'location', 'z', 'ct' - ]); + ].sort()); }); it('should show the correct point data', function() { @@ -1789,11 +1789,11 @@ describe('Test event property of interactions on a geo plot:', function() { var pt = futureData.points[0]; var evt = futureData.event; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'text', 'marker.size' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1847,11 +1847,11 @@ describe('Test event property of interactions on a geo plot:', function() { // var pt = futureData.points[0], // evt = futureData.event; - // expect(Object.keys(pt)).toEqual([ - // 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + // expect(Object.keys(pt).sort()).toEqual([ + // 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', // 'lon', 'lat', // 'location', 'text', 'marker.size' - // ]); + // ].sort()); // expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); // expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1893,11 +1893,11 @@ describe('Test event property of interactions on a geo plot:', function() { var pt = futureData.points[0]; var evt = futureData.event; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'text', 'marker.size' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1934,11 +1934,11 @@ describe('Test event property of interactions on a geo plot:', function() { var pt = futureData.points[0]; var evt = futureData.event; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'text', 'marker.size' - ]); + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); diff --git a/test/jasmine/tests/mapbox_test.js b/test/jasmine/tests/mapbox_test.js index d39400f70f3..ef4f4d1f53a 100644 --- a/test/jasmine/tests/mapbox_test.js +++ b/test/jasmine/tests/mapbox_test.js @@ -19,6 +19,12 @@ var customAssertions = require('../assets/custom_assertions'); var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle; var assertHoverLabelContent = customAssertions.assertHoverLabelContent; +var SORTED_EVENT_KEYS = [ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'lon', 'lat', + 'bbox' +].sort(); + var MAPBOX_ACCESS_TOKEN = require('@build/credentials.json').MAPBOX_ACCESS_TOKEN; var TRANSITION_DELAY = 500; var MOUSE_DELAY = 100; @@ -1243,9 +1249,7 @@ describe('mapbox plots', function() { .then(function() { return _mouseEvent('mousemove', pointPos, function() { expect(hoverData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(hoverData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ], 'returning the correct event data keys'); + expect(Object.keys(hoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(hoverData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(hoverData.pointNumber).toEqual(0, 'returning the correct point number'); }); @@ -1253,9 +1257,7 @@ describe('mapbox plots', function() { .then(function() { return _mouseEvent('mousemove', blankPos, function() { expect(unhoverData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(unhoverData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ], 'returning the correct event data keys'); + expect(Object.keys(unhoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(unhoverData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(unhoverData.pointNumber).toEqual(0, 'returning the correct point number'); }); @@ -1400,9 +1402,7 @@ describe('mapbox plots', function() { .then(function() { return click(pointPos[0], pointPos[1]); }) .then(function() { expect(ptData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ], 'returning the correct event data keys'); + expect(Object.keys(ptData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(ptData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(ptData.pointNumber).toEqual(0, 'returning the correct point number'); }) diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js index eedb6974d26..6ea3d528bc4 100644 --- a/test/jasmine/tests/pie_test.js +++ b/test/jasmine/tests/pie_test.js @@ -1101,9 +1101,9 @@ describe('pie hovering', function() { var fields = [ 'curveNumber', 'pointNumber', 'pointNumbers', - 'data', 'fullData', + 'data', 'fullData', 'bbox', 'label', 'color', 'value', - 'i', 'v', 'percent', 'text' + 'i', 'v', 'percent', 'text', ]; expect(Object.keys(hoverData.points[0]).sort()).toEqual(fields.sort()); diff --git a/test/jasmine/tests/scattermapbox_test.js b/test/jasmine/tests/scattermapbox_test.js index 89c7955851b..aaeb28d0a4e 100644 --- a/test/jasmine/tests/scattermapbox_test.js +++ b/test/jasmine/tests/scattermapbox_test.js @@ -952,9 +952,9 @@ describe('Test plotly events on a scattermapbox plot:', function() { var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ]); + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -999,9 +999,9 @@ describe('Test plotly events on a scattermapbox plot:', function() { // var pt = futureData.points[0], // evt = futureData.event; - // expect(Object.keys(pt)).toEqual([ - // 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - // ]); + // expect(Object.keys(pt).sort()).toEqual([ + // 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + // ].sort()); // expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); // expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1033,9 +1033,9 @@ describe('Test plotly events on a scattermapbox plot:', function() { var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ]); + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1061,9 +1061,9 @@ describe('Test plotly events on a scattermapbox plot:', function() { move(pointPos[0], pointPos[1], nearPos[0], nearPos[1], HOVERMINTIME + 10).then(function() { var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ]); + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1133,9 +1133,9 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ]); + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1163,9 +1163,9 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ]); + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1191,9 +1191,9 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese move(pointPos[0], pointPos[1], nearPos[0], nearPos[1], HOVERMINTIME + 10).then(function() { var pt = futureData.points[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat' - ]); + expect(Object.keys(pt).sort()).toEqual([ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox' + ].sort()); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); diff --git a/test/jasmine/tests/ternary_test.js b/test/jasmine/tests/ternary_test.js index 27f6136994d..4bf8fa52922 100644 --- a/test/jasmine/tests/ternary_test.js +++ b/test/jasmine/tests/ternary_test.js @@ -19,6 +19,12 @@ var customAssertions = require('../assets/custom_assertions'); var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle; var assertHoverLabelContent = customAssertions.assertHoverLabelContent; +var SORTED_EVENT_KEYS = [ + 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', + 'xaxis', 'yaxis', 'a', 'b', 'c', + 'bbox', 'x0', 'x1', 'y0', 'y1' +].sort(); + describe('ternary plots', function() { 'use strict'; @@ -195,19 +201,13 @@ describe('ternary plots', function() { mouseEvent('mousemove', pointPos[0], pointPos[1]); expect(hoverData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(hoverData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ], 'returning the correct event data keys'); + expect(Object.keys(hoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(hoverData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(hoverData.pointNumber).toEqual(0, 'returning the correct point number'); mouseEvent('mouseout', pointPos[0], pointPos[1]); expect(unhoverData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(unhoverData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ], 'returning the correct event data keys'); + expect(Object.keys(unhoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(unhoverData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(unhoverData.pointNumber).toEqual(0, 'returning the correct point number'); @@ -227,10 +227,7 @@ describe('ternary plots', function() { click(pointPos[0], pointPos[1]); expect(ptData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ], 'returning the correct event data keys'); + expect(Object.keys(ptData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(ptData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(ptData.pointNumber).toEqual(0, 'returning the correct point number'); }); @@ -678,19 +675,13 @@ describe('ternary plots when css transform is present', function() { mouseEvent('mousemove', pointPos[0], pointPos[1]); expect(hoverData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(hoverData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ], 'returning the correct event data keys'); + expect(Object.keys(hoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(hoverData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(hoverData.pointNumber).toEqual(0, 'returning the correct point number'); mouseEvent('mouseout', pointPos[0], pointPos[1]); expect(unhoverData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(unhoverData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ], 'returning the correct event data keys'); + expect(Object.keys(unhoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(unhoverData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(unhoverData.pointNumber).toEqual(0, 'returning the correct point number'); @@ -710,10 +701,7 @@ describe('ternary plots when css transform is present', function() { click(pointPos[0], pointPos[1]); expect(ptData).not.toBe(undefined, 'firing on data points'); - expect(Object.keys(ptData)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ], 'returning the correct event data keys'); + expect(Object.keys(ptData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys'); expect(ptData.curveNumber).toEqual(0, 'returning the correct curve number'); expect(ptData.pointNumber).toEqual(0, 'returning the correct point number'); }); @@ -843,10 +831,7 @@ describe('Test event property of interactions on a ternary plot:', function() { var pt = futureData.points[0]; var evt = futureData.event; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ]); + expect(Object.keys(pt).sort()).toEqual(SORTED_EVENT_KEYS); expect(pt.curveNumber).toBe(0, 'points[0].curveNumber'); expect(typeof pt.data).toBe(typeof {}, 'points[0].data'); @@ -912,10 +897,7 @@ describe('Test event property of interactions on a ternary plot:', function() { var pt = futureData.points[0]; var evt = futureData.event; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ]); + expect(Object.keys(pt).sort()).toEqual(SORTED_EVENT_KEYS); expect(pt.curveNumber).toBe(0, 'points[0].curveNumber: ' + i); expect(typeof pt.data).toBe(typeof {}, 'points[0].data: ' + i); @@ -964,10 +946,7 @@ describe('Test event property of interactions on a ternary plot:', function() { var yaxes0 = futureData.yaxes[0]; var yvals0 = futureData.yvals[0]; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ]); + expect(Object.keys(pt).sort()).toEqual(SORTED_EVENT_KEYS); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); @@ -1012,10 +991,7 @@ describe('Test event property of interactions on a ternary plot:', function() { var pt = futureData.points[0]; var evt = futureData.event; - expect(Object.keys(pt)).toEqual([ - 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'xaxis', 'yaxis', 'a', 'b', 'c' - ]); + expect(Object.keys(pt).sort()).toEqual(SORTED_EVENT_KEYS); expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber'); expect(typeof pt.data).toEqual(typeof {}, 'points[0].data'); From 60781188200cd6adbb69eaa3f78a44e9fb1341b0 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 13:12:44 -0400 Subject: [PATCH 06/18] drop extra sort --- test/jasmine/tests/geo_test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/jasmine/tests/geo_test.js b/test/jasmine/tests/geo_test.js index c6ec7a8c830..f28ff0e7d70 100644 --- a/test/jasmine/tests/geo_test.js +++ b/test/jasmine/tests/geo_test.js @@ -882,7 +882,7 @@ describe('Test geo interactions', function() { }); it('should contain the correct fields', function() { - expect(Object.keys(ptData).sort().sort()).toEqual([ + expect(Object.keys(ptData).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox', 'lon', 'lat', 'location', 'marker.size' ].sort()); From 03b22ec641c212b003547177acf38df1849a4dc3 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 16:04:58 -0400 Subject: [PATCH 07/18] revise bbox positions --- src/components/fx/helpers.js | 5 ----- src/components/fx/hover.js | 14 ++++++++------ src/traces/bar/event_data.js | 5 ----- src/traces/box/event_data.js | 5 ----- src/traces/funnel/event_data.js | 5 ----- src/traces/histogram/event_data.js | 5 ----- src/traces/image/event_data.js | 6 ------ src/traces/pie/event_data.js | 11 +---------- src/traces/pie/plot.js | 19 ++++++------------- src/traces/scattercarpet/event_data.js | 5 ----- src/traces/scatterternary/event_data.js | 5 ----- src/traces/waterfall/event_data.js | 5 ----- test/jasmine/tests/click_test.js | 12 ++++++------ test/jasmine/tests/funnelarea_test.js | 2 +- test/jasmine/tests/pie_test.js | 4 ++-- test/jasmine/tests/ternary_test.js | 2 +- 16 files changed, 25 insertions(+), 85 deletions(-) diff --git a/src/components/fx/helpers.js b/src/components/fx/helpers.js index a796aded8c8..f11e5266ef7 100644 --- a/src/components/fx/helpers.js +++ b/src/components/fx/helpers.js @@ -138,11 +138,6 @@ exports.makeEventData = function(pt, trace, cd) { if('yVal' in pt) out.y = pt.yVal; else if('y' in pt) out.y = pt.y; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; if(pt.zLabelVal !== undefined) out.z = pt.zLabelVal; diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 66ac9b91cb7..64c63e2de5b 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -752,12 +752,14 @@ function _hover(gd, evt, subplot, noHoverEvent) { pt.hovertemplate = ht || pt.trace.hovertemplate || false; } - var bbox = {}; - if('x0' in pt) bbox.x0 = pt.x0 + pt.xa._offset + gLeft; - if('x1' in pt) bbox.x1 = pt.x1 + pt.xa._offset + gLeft; - if('y0' in pt) bbox.y0 = pt.y0 + pt.ya._offset + gTop; - if('y1' in pt) bbox.y1 = pt.y1 + pt.ya._offset + gTop; - eventData.bbox = bbox; + if(pt.xa && pt.ya) { + eventData.bbox = { + x0: pt.x0 + pt.xa._offset + gLeft, + x1: pt.x1 + pt.xa._offset + gLeft, + y0: pt.y0 + pt.ya._offset + gTop, + y1: pt.y1 + pt.ya._offset + gTop + }; + } pt.eventData = [eventData]; newhoverdata.push(eventData); diff --git a/src/traces/bar/event_data.js b/src/traces/bar/event_data.js index 0d3f6f4ff3f..fb20f16b065 100644 --- a/src/traces/bar/event_data.js +++ b/src/traces/bar/event_data.js @@ -7,11 +7,6 @@ module.exports = function eventData(out, pt, trace) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - if(trace.orientation === 'h') { out.label = out.y; out.value = out.x; diff --git a/src/traces/box/event_data.js b/src/traces/box/event_data.js index 21c0fc67abb..4ee9bd70d9f 100644 --- a/src/traces/box/event_data.js +++ b/src/traces/box/event_data.js @@ -11,10 +11,5 @@ module.exports = function eventData(out, pt) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - return out; }; diff --git a/src/traces/funnel/event_data.js b/src/traces/funnel/event_data.js index b7a06d679ca..678219186e4 100644 --- a/src/traces/funnel/event_data.js +++ b/src/traces/funnel/event_data.js @@ -13,10 +13,5 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - return out; }; diff --git a/src/traces/histogram/event_data.js b/src/traces/histogram/event_data.js index 181ce500d69..db61fccc7db 100644 --- a/src/traces/histogram/event_data.js +++ b/src/traces/histogram/event_data.js @@ -11,11 +11,6 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - // specific to histogram - CDFs do not have pts (yet?) if(!(trace.cumulative || {}).enabled) { var pts = Array.isArray(pointNumber) ? diff --git a/src/traces/image/event_data.js b/src/traces/image/event_data.js index 8e07437aff3..0d8d1bc3ba0 100644 --- a/src/traces/image/event_data.js +++ b/src/traces/image/event_data.js @@ -3,12 +3,6 @@ module.exports = function eventData(out, pt) { if('xVal' in pt) out.x = pt.xVal; if('yVal' in pt) out.y = pt.yVal; - - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; out.color = pt.color; diff --git a/src/traces/pie/event_data.js b/src/traces/pie/event_data.js index eb5cdcad87a..3393f0353dd 100644 --- a/src/traces/pie/event_data.js +++ b/src/traces/pie/event_data.js @@ -18,16 +18,7 @@ module.exports = function eventData(pt, trace) { text: pt.text, // pt.v (and pt.i below) for backward compatibility - v: pt.v, - - // TODO: These coordinates aren't quite correct and don't take into account some offset - // I still haven't quite located (similar to xa._offset) - bbox: { - x0: pt.x0, - x1: pt.x1, - y0: pt.y0, - y1: pt.y1, - }, + v: pt.v }; // Only include pointNumber if it's unambiguous diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 17810a3b712..cca8694817d 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -379,19 +379,12 @@ function attachFxHandlers(sliceTop, gd, cd) { if(hoverinfo === 'all') hoverinfo = 'label+text+value+percent+name'; - // If hoverinfo === 'none', we still want the *coordinates* of hover to be - // output, just not the hover to actually display - var rInscribed = pt.rInscribed || 0; - var hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed); - var hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed); - pt.x0 = hoverCenterX - rInscribed * cd0.r; - pt.x1 = hoverCenterX + rInscribed * cd0.r; - pt.y0 = hoverCenterY; - pt.y1 = hoverCenterY; - // in case we dragged over the pie from another subplot, // or if hover is turned off if(trace2.hovertemplate || (hoverinfo !== 'none' && hoverinfo !== 'skip' && hoverinfo)) { + var rInscribed = pt.rInscribed || 0; + var hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed); + var hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed); var separators = fullLayout2.separators; var text = []; @@ -413,9 +406,9 @@ function attachFxHandlers(sliceTop, gd, cd) { Fx.loneHover({ trace: trace, - x0: pt.x0, - x1: pt.x1, - y: pt.y0, + x0: hoverCenterX - rInscribed * cd0.r, + x1: hoverCenterX + rInscribed * cd0.r, + y: hoverCenterY, text: text.join('
'), name: (trace2.hovertemplate || hoverinfo.indexOf('name') !== -1) ? trace2.name : undefined, idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right', diff --git a/src/traces/scattercarpet/event_data.js b/src/traces/scattercarpet/event_data.js index a89a923f579..41aa4b4a739 100644 --- a/src/traces/scattercarpet/event_data.js +++ b/src/traces/scattercarpet/event_data.js @@ -7,10 +7,5 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { out.b = cdi.b; out.y = cdi.y; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - return out; }; diff --git a/src/traces/scatterternary/event_data.js b/src/traces/scatterternary/event_data.js index 733816565ed..ef7722d7419 100644 --- a/src/traces/scatterternary/event_data.js +++ b/src/traces/scatterternary/event_data.js @@ -4,11 +4,6 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - if(cd[pointNumber]) { var cdi = cd[pointNumber]; diff --git a/src/traces/waterfall/event_data.js b/src/traces/waterfall/event_data.js index 3a25b77fc28..24c05324795 100644 --- a/src/traces/waterfall/event_data.js +++ b/src/traces/waterfall/event_data.js @@ -13,10 +13,5 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) { if(pt.xa) out.xaxis = pt.xa; if(pt.ya) out.yaxis = pt.ya; - if('x0' in pt) out.x0 = pt.x0; - if('x1' in pt) out.x1 = pt.x1; - if('y0' in pt) out.y0 = pt.y0; - if('y1' in pt) out.y1 = pt.y1; - return out; }; diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 9c707e42b90..10e1d03d515 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -117,7 +117,7 @@ describe('Test click interactions:', function() { var pt = futureData.points[0]; expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'bbox', 'x0', 'x1', 'y0', 'y1', + 'bbox', 'x', 'y', 'xaxis', 'yaxis' ].sort()); expect(pt.curveNumber).toEqual(0); @@ -151,7 +151,7 @@ describe('Test click interactions:', function() { var pt = futureData.points[0]; expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'bbox', 'x0', 'x1', 'y0', 'y1', + 'bbox', 'x', 'y', 'xaxis', 'yaxis' ].sort()); expect(pt.curveNumber).toEqual(0); @@ -223,7 +223,7 @@ describe('Test click interactions:', function() { var pt = futureData.points[0]; expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'bbox', 'x0', 'x1', 'y0', 'y1', + 'bbox', 'x', 'y', 'xaxis', 'yaxis' ].sort()); expect(pt.curveNumber).toEqual(0); @@ -313,7 +313,7 @@ describe('Test click interactions:', function() { var pt = futureData.points[0]; expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'bbox', 'x0', 'x1', 'y0', 'y1', + 'bbox', 'x', 'y', 'xaxis', 'yaxis' ].sort()); expect(pt.curveNumber).toEqual(0); @@ -347,7 +347,7 @@ describe('Test click interactions:', function() { var pt = futureData.points[0]; expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'bbox', 'x0', 'x1', 'y0', 'y1', + 'bbox', 'x', 'y', 'xaxis', 'yaxis' ].sort()); expect(pt.curveNumber).toEqual(0); @@ -385,7 +385,7 @@ describe('Test click interactions:', function() { var pt = futureData.points[0]; expect(Object.keys(pt).sort()).toEqual([ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', - 'bbox', 'x0', 'x1', 'y0', 'y1', + 'bbox', 'x', 'y', 'xaxis', 'yaxis' ].sort()); expect(pt.curveNumber).toEqual(0); diff --git a/test/jasmine/tests/funnelarea_test.js b/test/jasmine/tests/funnelarea_test.js index faa00094d13..2afb934e434 100644 --- a/test/jasmine/tests/funnelarea_test.js +++ b/test/jasmine/tests/funnelarea_test.js @@ -763,7 +763,7 @@ describe('funnelarea hovering', function() { var fields = [ 'curveNumber', 'pointNumber', 'pointNumbers', - 'data', 'fullData', 'bbox', + 'data', 'fullData', 'label', 'color', 'value', 'percent', 'text' ]; diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js index 6ea3d528bc4..eedb6974d26 100644 --- a/test/jasmine/tests/pie_test.js +++ b/test/jasmine/tests/pie_test.js @@ -1101,9 +1101,9 @@ describe('pie hovering', function() { var fields = [ 'curveNumber', 'pointNumber', 'pointNumbers', - 'data', 'fullData', 'bbox', + 'data', 'fullData', 'label', 'color', 'value', - 'i', 'v', 'percent', 'text', + 'i', 'v', 'percent', 'text' ]; expect(Object.keys(hoverData.points[0]).sort()).toEqual(fields.sort()); diff --git a/test/jasmine/tests/ternary_test.js b/test/jasmine/tests/ternary_test.js index 4bf8fa52922..151a818edab 100644 --- a/test/jasmine/tests/ternary_test.js +++ b/test/jasmine/tests/ternary_test.js @@ -22,7 +22,7 @@ var assertHoverLabelContent = customAssertions.assertHoverLabelContent; var SORTED_EVENT_KEYS = [ 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'xaxis', 'yaxis', 'a', 'b', 'c', - 'bbox', 'x0', 'x1', 'y0', 'y1' + 'bbox' ].sort(); describe('ternary plots', function() { From 17dbaddfe06620db1d0b7ea974a174ad1b4f5a32 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 11:29:27 -0400 Subject: [PATCH 08/18] ensure x0 <= x1 and y0 <= y1 --- src/components/fx/hover.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 64c63e2de5b..524b1380e66 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -753,11 +753,21 @@ function _hover(gd, evt, subplot, noHoverEvent) { } if(pt.xa && pt.ya) { + var _x0 = pt.x0 + pt.xa._offset; + var _x1 = pt.x1 + pt.xa._offset; + var _y0 = pt.y0 + pt.ya._offset; + var _y1 = pt.y1 + pt.ya._offset; + + var x0 = Math.min(_x0, _x1); + var x1 = Math.max(_x0, _x1); + var y0 = Math.min(_y0, _y1); + var y1 = Math.max(_y0, _y1); + eventData.bbox = { - x0: pt.x0 + pt.xa._offset + gLeft, - x1: pt.x1 + pt.xa._offset + gLeft, - y0: pt.y0 + pt.ya._offset + gTop, - y1: pt.y1 + pt.ya._offset + gTop + x0: x0 + gLeft, + x1: x1 + gLeft, + y0: y0 + gTop, + y1: y1 + gTop }; } From bd6688e1dd748e57d223cdcdac767c80cce01abf Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 11:30:19 -0400 Subject: [PATCH 09/18] interactive test --- src/components/fx/hover.js | 9 +++++++++ src/plot_api/plot_api.js | 2 ++ 2 files changed, 11 insertions(+) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 524b1380e66..3f97db47e1b 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -769,6 +769,15 @@ function _hover(gd, evt, subplot, noHoverEvent) { y0: y0 + gTop, y1: y1 + gTop }; + + d3.select('.hover-bbox') + .attr('x', x0) + .attr('y', y0) + .attr('width', Math.max(4, x1 - x0)) + .attr('height', Math.max(4, y1 - y0)) + .attr('stroke', 'black') + .attr('fill', 'lightgray') + .attr('opacity', '0.5'); } pt.eventData = [eventData]; diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index 2848063d2e4..7307d7e5e87 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3772,6 +3772,8 @@ function makePlotFramework(gd) { fullLayout._zoomlayer = fullLayout._toppaper.append('g').classed('zoomlayer', true); fullLayout._hoverlayer = fullLayout._hoverpaper.append('g').classed('hoverlayer', true); + fullLayout._hoverpaper.append('svg').append('rect').classed('hover-bbox', true); + // Make the modebar container fullLayout._modebardiv .classed('modebar-container', true) From ccd2c88ee7ad1061d3b1258bb1efac0798e40125 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 13:22:31 -0400 Subject: [PATCH 10/18] handle gl3d, pie, sunburst, treemap, etc. --- src/components/fx/hover.js | 87 ++++++++++++++++++++++++++++++++------ 1 file changed, 74 insertions(+), 13 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 3f97db47e1b..3eeb69c835b 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -126,13 +126,70 @@ exports.loneHover = function loneHover(hoverItems, opts) { hoverItems = [hoverItems]; } + var gd = opts.gd; + var gTop = getTopOffset(gd); + var gLeft = getLeftOffset(gd); + var pointsData = hoverItems.map(function(hoverItem) { + var _x0 = 0; + if(hoverItem.x0 !== undefined) _x0 = hoverItem.x0; + else if(hoverItem.x !== undefined) _x0 = hoverItem.x; + + var _x1 = 0; + if(hoverItem.x1 !== undefined) _x1 = hoverItem.x1; + else if(hoverItem.x !== undefined) _x1 = hoverItem.x; + + var _y0 = 0; + if(hoverItem.y0 !== undefined) _y0 = hoverItem.y0; + else if(hoverItem.y !== undefined) _y0 = hoverItem.y; + + var _y1 = 0; + if(hoverItem.y1 !== undefined) _y1 = hoverItem.y1; + else if(hoverItem.y !== undefined) _y1 = hoverItem.y; + + var eventData = hoverItem.eventData; + if(eventData) { + var x0 = Math.min(_x0, _x1); + var x1 = Math.max(_x0, _x1); + var y0 = Math.min(_y0, _y1); + var y1 = Math.max(_y0, _y1); + + var trace = hoverItem.trace; + if(Registry.traceIs(trace, 'gl3d')) { + var container = gd._fullLayout[trace.scene]._scene.container; + var dx = container.offsetLeft; + var dy = container.offsetTop; + x0 += dx; + x1 += dx; + y0 += dy; + y1 += dy; + } // TODO: handle heatmapgl + + eventData.bbox = { + x0: x0 + gLeft, + x1: x1 + gLeft, + y0: y0 + gTop, + y1: y1 + gTop + }; + + d3.select('.hover-bbox') + .attr('x', x0) + .attr('y', y0) + .attr('width', Math.max(4, x1 - x0)) + .attr('height', Math.max(4, y1 - y0)) + .attr('stroke', 'black') + .attr('fill', 'lightgray') + .attr('opacity', '0.5'); + } else { + eventData = false; + } + return { color: hoverItem.color || Color.defaultLine, - x0: hoverItem.x0 || hoverItem.x || 0, - x1: hoverItem.x1 || hoverItem.x || 0, - y0: hoverItem.y0 || hoverItem.y || 0, - y1: hoverItem.y1 || hoverItem.y || 0, + x0: _x0, + x1: _x1, + y0: _y0, + y1: _y1, xLabel: hoverItem.xLabel, yLabel: hoverItem.yLabel, zLabel: hoverItem.zLabel, @@ -158,8 +215,9 @@ exports.loneHover = function loneHover(hoverItems, opts) { index: 0, hovertemplate: hoverItem.hovertemplate || false, - eventData: hoverItem.eventData || false, hovertemplateLabels: hoverItem.hovertemplateLabels || false, + + eventData: eventData }; }); @@ -174,7 +232,7 @@ exports.loneHover = function loneHover(hoverItems, opts) { outerContainer: outerContainer3 }; - var hoverLabel = createHoverText(pointsData, fullOpts, opts.gd); + var hoverLabel = createHoverText(pointsData, fullOpts, gd); // Fix vertical overlap var tooltipSpacing = 5; @@ -199,8 +257,8 @@ exports.loneHover = function loneHover(hoverItems, opts) { d.offset -= anchor; }); - var scaleX = opts.gd._fullLayout._invScaleX; - var scaleY = opts.gd._fullLayout._invScaleY; + var scaleX = gd._fullLayout._invScaleX; + var scaleY = gd._fullLayout._invScaleY; alignHoverText(hoverLabel, fullOpts.rotateLabels, scaleX, scaleY); return multiHover ? hoverLabel : hoverLabel.node(); @@ -732,11 +790,8 @@ function _hover(gd, evt, subplot, noHoverEvent) { var oldhoverdata = gd._hoverdata; var newhoverdata = []; - // Top/left hover offsets relative to graph div. As long as hover content is - // a sibling of the graph div, it will be positioned correctly relative to - // the offset parent, whatever that may be. - var gTop = gd.offsetTop + gd.clientTop; - var gLeft = gd.offsetLeft + gd.clientLeft; + var gTop = getTopOffset(gd); + var gLeft = getLeftOffset(gd); // pull out just the data that's useful to // other people and send it to the event @@ -2067,3 +2122,9 @@ function getCoord(axLetter, winningPoint, fullLayout) { return val; } + +// Top/left hover offsets relative to graph div. As long as hover content is +// a sibling of the graph div, it will be positioned correctly relative to +// the offset parent, whatever that may be. +function getTopOffset(gd) { return gd.offsetTop + gd.clientTop; } +function getLeftOffset(gd) { return gd.offsetLeft + gd.clientLeft; } From c41b31d07d5bb8c75bda71d0d8ab2ec4104d35a8 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 13:58:48 -0400 Subject: [PATCH 11/18] drop hover bbox display --- src/components/fx/hover.js | 18 ------------------ src/plot_api/plot_api.js | 2 -- 2 files changed, 20 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 3eeb69c835b..92dd6e94d07 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -171,15 +171,6 @@ exports.loneHover = function loneHover(hoverItems, opts) { y0: y0 + gTop, y1: y1 + gTop }; - - d3.select('.hover-bbox') - .attr('x', x0) - .attr('y', y0) - .attr('width', Math.max(4, x1 - x0)) - .attr('height', Math.max(4, y1 - y0)) - .attr('stroke', 'black') - .attr('fill', 'lightgray') - .attr('opacity', '0.5'); } else { eventData = false; } @@ -824,15 +815,6 @@ function _hover(gd, evt, subplot, noHoverEvent) { y0: y0 + gTop, y1: y1 + gTop }; - - d3.select('.hover-bbox') - .attr('x', x0) - .attr('y', y0) - .attr('width', Math.max(4, x1 - x0)) - .attr('height', Math.max(4, y1 - y0)) - .attr('stroke', 'black') - .attr('fill', 'lightgray') - .attr('opacity', '0.5'); } pt.eventData = [eventData]; diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index 7307d7e5e87..2848063d2e4 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3772,8 +3772,6 @@ function makePlotFramework(gd) { fullLayout._zoomlayer = fullLayout._toppaper.append('g').classed('zoomlayer', true); fullLayout._hoverlayer = fullLayout._hoverpaper.append('g').classed('hoverlayer', true); - fullLayout._hoverpaper.append('svg').append('rect').classed('hover-bbox', true); - // Make the modebar container fullLayout._modebardiv .classed('modebar-container', true) From 888a6ba85f8a7a73ff19208e571602e53120627f Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 16:28:54 -0400 Subject: [PATCH 12/18] add jasmine tests for cartesian --- test/jasmine/tests/cartesian_interact_test.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/test/jasmine/tests/cartesian_interact_test.js b/test/jasmine/tests/cartesian_interact_test.js index 9c972bee260..12c6ebd3254 100644 --- a/test/jasmine/tests/cartesian_interact_test.js +++ b/test/jasmine/tests/cartesian_interact_test.js @@ -2422,6 +2422,12 @@ describe('Cartesian plots with css transforms', function() { } }; + var bbox = { + one: { x0: 20, x1: 180, y0: 273.33, y1: 273.33 }, + two: { x0: 220, x1: 380, y0: 146.67, y1: 146.67 }, + three: { x0: 420, x1: 580, y0: 20, y1: 20 } + }; + [{ transform: 'scaleX(0.5)', hovered: 1, @@ -2436,12 +2442,14 @@ describe('Cartesian plots with css transforms', function() { selected: {numPoints: 3, selectedLabels: ['one', 'two', 'three']} }].forEach(function(t) { var transform = t.transform; - it('hover behaves correctly after css transform: ' + transform, function(done) { + var _bboxRecordings = {}; + function _hoverAndAssertEventOccurred(point, label) { return _hover(point) .then(function() { expect(eventRecordings[label]).toBe(t.hovered); + expect(_bboxRecordings[label]).toEqual(bbox[label]); }) .then(function() { _unhover(point); @@ -2454,6 +2462,7 @@ describe('Cartesian plots with css transforms', function() { gd.on('plotly_hover', function(d) { eventRecordings[d.points[0].x] = 1; + _bboxRecordings[d.points[0].x] = d.points[0].bbox; }); }) .then(function() {_hoverAndAssertEventOccurred(points[0], xLabels[0]);}) From 8100f8ab1c8db7302bf6c09b8589322914964e07 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 16:40:44 -0400 Subject: [PATCH 13/18] provide bbox in gl3d event data --- src/components/fx/hover.js | 4 ++++ src/plots/gl3d/scene.js | 6 +++++- test/jasmine/tests/gl3d_hover_click_test.js | 9 ++++++++- test/jasmine/tests/streamtube_test.js | 2 +- 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 92dd6e94d07..d5b40e76123 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -171,6 +171,10 @@ exports.loneHover = function loneHover(hoverItems, opts) { y0: y0 + gTop, y1: y1 + gTop }; + + if(opts.inOut_bbox) { + opts.inOut_bbox.push(eventData.bbox); + } } else { eventData = false; } diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js index b7ee3871218..174d1b30d52 100644 --- a/src/plots/gl3d/scene.js +++ b/src/plots/gl3d/scene.js @@ -421,6 +421,7 @@ proto.render = function() { var eventData = {points: [pointData]}; if(scene.fullSceneLayout.hovermode) { + var bbox = []; Fx.loneHover({ trace: traceNow, x: (0.5 + 0.5 * pdata[0] / pdata[3]) * width, @@ -442,8 +443,11 @@ proto.render = function() { eventData: [pointData] }, { container: svgContainer, - gd: gd + gd: gd, + inOut_bbox: bbox }); + + pointData.bbox = bbox[0]; } if(selection.buttons && selection.distance < 5) { diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 3fbb56edeaa..9359edd2f28 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -58,7 +58,8 @@ describe('Test gl3d trace click/hover:', function() { function assertEventData(x, y, z, curveNumber, pointNumber, extra) { expect(Object.keys(ptData)).toEqual(jasmine.arrayContaining([ 'x', 'y', 'z', - 'data', 'fullData', 'curveNumber', 'pointNumber' + 'data', 'fullData', 'curveNumber', 'pointNumber', + 'bbox' ]), 'correct hover data fields'); expect(ptData.x).toEqual(x, 'x val'); @@ -67,6 +68,12 @@ describe('Test gl3d trace click/hover:', function() { expect(ptData.curveNumber).toEqual(curveNumber, 'curveNumber'); expect(ptData.pointNumber).toEqual(pointNumber, 'pointNumber'); + expect(typeof ptData.bbox).toEqual('object'); + expect(typeof ptData.bbox.x0).toEqual('number'); + expect(typeof ptData.bbox.x1).toEqual('number'); + expect(typeof ptData.bbox.y0).toEqual('number'); + expect(typeof ptData.bbox.y1).toEqual('number'); + Object.keys(extra || {}).forEach(function(k) { expect(ptData[k]).toEqual(extra[k], k + ' val'); }); diff --git a/test/jasmine/tests/streamtube_test.js b/test/jasmine/tests/streamtube_test.js index deb9322b428..2eb6088be01 100644 --- a/test/jasmine/tests/streamtube_test.js +++ b/test/jasmine/tests/streamtube_test.js @@ -593,7 +593,7 @@ describe('Test streamtube hover', function() { .then(delay(20)) .then(function() { if(ptData) { - expect(Object.keys(ptData).length).toBe(12, 'key cnt'); + expect(Object.keys(ptData).length).toBe(13, 'key cnt'); expect(ptData.tubex).toBeCloseTo(2.19, TOL, 'tubex'); expect(ptData.tubey).toBeCloseTo(0.55, TOL, 'tubey'); From 262505d91ae86089f0545049fb513c8b0be4f2e0 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 17:03:15 -0400 Subject: [PATCH 14/18] bbox for pie and funnelarea --- src/traces/pie/event_data.js | 1 + src/traces/pie/plot.js | 5 ++++- test/jasmine/tests/funnelarea_test.js | 9 ++++++++- test/jasmine/tests/pie_test.js | 9 ++++++++- 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/traces/pie/event_data.js b/src/traces/pie/event_data.js index 3393f0353dd..cb738f450a1 100644 --- a/src/traces/pie/event_data.js +++ b/src/traces/pie/event_data.js @@ -16,6 +16,7 @@ module.exports = function eventData(pt, trace) { value: pt.v, percent: pt.percent, text: pt.text, + bbox: pt.bbox, // pt.v (and pt.i below) for backward compatibility v: pt.v diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index cca8694817d..066b66f5db0 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -404,6 +404,7 @@ function attachFxHandlers(sliceTop, gd, cd) { var hoverLabel = trace2.hoverlabel; var hoverFont = hoverLabel.font; + var bbox = []; Fx.loneHover({ trace: trace, x0: hoverCenterX - rInscribed * cd0.r, @@ -425,8 +426,10 @@ function attachFxHandlers(sliceTop, gd, cd) { }, { container: fullLayout2._hoverlayer.node(), outerContainer: fullLayout2._paper.node(), - gd: gd + gd: gd, + inOut_bbox: bbox }); + pt.bbox = bbox[0]; trace._hasHoverLabel = true; } diff --git a/test/jasmine/tests/funnelarea_test.js b/test/jasmine/tests/funnelarea_test.js index 2afb934e434..d898be597f1 100644 --- a/test/jasmine/tests/funnelarea_test.js +++ b/test/jasmine/tests/funnelarea_test.js @@ -765,9 +765,16 @@ describe('funnelarea hovering', function() { 'curveNumber', 'pointNumber', 'pointNumbers', 'data', 'fullData', 'label', 'color', 'value', - 'percent', 'text' + 'percent', 'text', + 'bbox' ]; + expect(typeof hoverData.points[0].bbox).toEqual('object'); + expect(typeof hoverData.points[0].bbox.x0).toEqual('number'); + expect(typeof hoverData.points[0].bbox.x1).toEqual('number'); + expect(typeof hoverData.points[0].bbox.y0).toEqual('number'); + expect(typeof hoverData.points[0].bbox.y1).toEqual('number'); + expect(Object.keys(hoverData.points[0]).sort()).toEqual(fields.sort()); expect(hoverData.points[0].pointNumber).toEqual(3); diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js index eedb6974d26..f70d80e44bb 100644 --- a/test/jasmine/tests/pie_test.js +++ b/test/jasmine/tests/pie_test.js @@ -1103,9 +1103,16 @@ describe('pie hovering', function() { 'curveNumber', 'pointNumber', 'pointNumbers', 'data', 'fullData', 'label', 'color', 'value', - 'i', 'v', 'percent', 'text' + 'i', 'v', 'percent', 'text', + 'bbox' ]; + expect(typeof hoverData.points[0].bbox).toEqual('object'); + expect(typeof hoverData.points[0].bbox.x0).toEqual('number'); + expect(typeof hoverData.points[0].bbox.x1).toEqual('number'); + expect(typeof hoverData.points[0].bbox.y0).toEqual('number'); + expect(typeof hoverData.points[0].bbox.y1).toEqual('number'); + expect(Object.keys(hoverData.points[0]).sort()).toEqual(fields.sort()); expect(hoverData.points[0].pointNumber).toEqual(3); From 53e1b61c8a1242c2e9b470b572d655ea2f9f1ba7 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 17:57:23 -0400 Subject: [PATCH 15/18] provide bbox for sunburst treemap and icicle --- src/traces/sunburst/fx.js | 13 ++++++++++--- test/jasmine/tests/icicle_test.js | 6 ++++++ test/jasmine/tests/sunburst_test.js | 6 ++++++ test/jasmine/tests/treemap_test.js | 6 ++++++ 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/traces/sunburst/fx.js b/src/traces/sunburst/fx.js index 66f2cec6d27..eada70edf24 100644 --- a/src/traces/sunburst/fx.js +++ b/src/traces/sunburst/fx.js @@ -52,6 +52,8 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) { var hoverinfo = Fx.castHoverinfo(traceNow, fullLayoutNow, ptNumber); var separators = fullLayoutNow.separators; + var eventData; + if(hovertemplate || (hoverinfo && hoverinfo !== 'none' && hoverinfo !== 'skip')) { var hoverCenterX; var hoverCenterY; @@ -125,6 +127,8 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) { if(Lib.isValidTextValue(tx)) thisText.push(tx); } + eventData = [makeEventData(pt, traceNow, opts.eventDataKeys)]; + var hoverItems = { trace: traceNow, y: hoverCenterY, @@ -139,7 +143,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) { textAlign: _cast('hoverlabel.align'), hovertemplate: hovertemplate, hovertemplateLabels: hoverPt, - eventData: [makeEventData(pt, traceNow, opts.eventDataKeys)] + eventData: eventData }; if(isSunburst) { @@ -152,11 +156,14 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) { hoverItems.idealAlign = hoverCenterX < 0 ? 'left' : 'right'; } + var bbox = []; Fx.loneHover(hoverItems, { container: fullLayoutNow._hoverlayer.node(), outerContainer: fullLayoutNow._paper.node(), - gd: gd + gd: gd, + inOut_bbox: bbox }); + eventData[0].bbox = bbox[0]; trace._hasHoverLabel = true; } @@ -170,7 +177,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) { trace._hasHoverEvent = true; gd.emit('plotly_hover', { - points: [makeEventData(pt, traceNow, opts.eventDataKeys)], + points: eventData || [makeEventData(pt, traceNow, opts.eventDataKeys)], event: d3.event }); }; diff --git a/test/jasmine/tests/icicle_test.js b/test/jasmine/tests/icicle_test.js index 143165feb80..339e3ce4928 100644 --- a/test/jasmine/tests/icicle_test.js +++ b/test/jasmine/tests/icicle_test.js @@ -526,6 +526,12 @@ describe('Test icicle hover:', function() { expect(ptData[k]).toBe(exp.ptData[k], 'pt event data key ' + k); } + expect(typeof ptData.bbox).toEqual('object'); + expect(typeof ptData.bbox.x0).toEqual('number'); + expect(typeof ptData.bbox.x1).toEqual('number'); + expect(typeof ptData.bbox.y0).toEqual('number'); + expect(typeof ptData.bbox.y1).toEqual('number'); + if(exp.style) { var gd3 = d3Select(gd); assertHoverLabelStyle(gd3.select('.hovertext'), exp.style); diff --git a/test/jasmine/tests/sunburst_test.js b/test/jasmine/tests/sunburst_test.js index 28876802534..019eca82be6 100644 --- a/test/jasmine/tests/sunburst_test.js +++ b/test/jasmine/tests/sunburst_test.js @@ -539,6 +539,12 @@ describe('Test sunburst hover:', function() { expect(ptData[k]).toBe(exp.ptData[k], 'pt event data key ' + k); } + expect(typeof ptData.bbox).toEqual('object'); + expect(typeof ptData.bbox.x0).toEqual('number'); + expect(typeof ptData.bbox.x1).toEqual('number'); + expect(typeof ptData.bbox.y0).toEqual('number'); + expect(typeof ptData.bbox.y1).toEqual('number'); + if(exp.style) { var gd3 = d3Select(gd); assertHoverLabelStyle(gd3.select('.hovertext'), exp.style); diff --git a/test/jasmine/tests/treemap_test.js b/test/jasmine/tests/treemap_test.js index 425a9fd528e..af3f5f098d5 100644 --- a/test/jasmine/tests/treemap_test.js +++ b/test/jasmine/tests/treemap_test.js @@ -628,6 +628,12 @@ describe('Test treemap hover:', function() { expect(ptData[k]).toBe(exp.ptData[k], 'pt event data key ' + k); } + expect(typeof ptData.bbox).toEqual('object'); + expect(typeof ptData.bbox.x0).toEqual('number'); + expect(typeof ptData.bbox.x1).toEqual('number'); + expect(typeof ptData.bbox.y0).toEqual('number'); + expect(typeof ptData.bbox.y1).toEqual('number'); + if(exp.style) { var gd3 = d3Select(gd); assertHoverLabelStyle(gd3.select('.hovertext'), exp.style); From aa00c1865de5c76dc1bac7cad6f1e9f350117cec Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 18:26:26 -0400 Subject: [PATCH 16/18] improve bbox for sunburst, treemap and icicle slices --- src/components/fx/hover.js | 27 ++++++++------------------ src/traces/icicle/draw_descendants.js | 6 ++++++ src/traces/sunburst/fx.js | 4 ++++ src/traces/treemap/draw_ancestors.js | 6 ++++++ src/traces/treemap/draw_descendants.js | 6 ++++++ 5 files changed, 30 insertions(+), 19 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index d5b40e76123..eff1e1a2c4e 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -131,21 +131,10 @@ exports.loneHover = function loneHover(hoverItems, opts) { var gLeft = getLeftOffset(gd); var pointsData = hoverItems.map(function(hoverItem) { - var _x0 = 0; - if(hoverItem.x0 !== undefined) _x0 = hoverItem.x0; - else if(hoverItem.x !== undefined) _x0 = hoverItem.x; - - var _x1 = 0; - if(hoverItem.x1 !== undefined) _x1 = hoverItem.x1; - else if(hoverItem.x !== undefined) _x1 = hoverItem.x; - - var _y0 = 0; - if(hoverItem.y0 !== undefined) _y0 = hoverItem.y0; - else if(hoverItem.y !== undefined) _y0 = hoverItem.y; - - var _y1 = 0; - if(hoverItem.y1 !== undefined) _y1 = hoverItem.y1; - else if(hoverItem.y !== undefined) _y1 = hoverItem.y; + var _x0 = hoverItem._x0 || hoverItem.x0 || hoverItem.x || 0; + var _x1 = hoverItem._x1 || hoverItem.x1 || hoverItem.x || 0; + var _y0 = hoverItem._y0 || hoverItem.y0 || hoverItem.y || 0; + var _y1 = hoverItem._y1 || hoverItem.y1 || hoverItem.y || 0; var eventData = hoverItem.eventData; if(eventData) { @@ -181,10 +170,10 @@ exports.loneHover = function loneHover(hoverItems, opts) { return { color: hoverItem.color || Color.defaultLine, - x0: _x0, - x1: _x1, - y0: _y0, - y1: _y1, + x0: hoverItem.x0 || hoverItem.x || 0, + x1: hoverItem.x1 || hoverItem.x || 0, + y0: hoverItem.y0 || hoverItem.y || 0, + y1: hoverItem.y1 || hoverItem.y || 0, xLabel: hoverItem.xLabel, yLabel: hoverItem.yLabel, zLabel: hoverItem.zLabel, diff --git a/src/traces/icicle/draw_descendants.js b/src/traces/icicle/draw_descendants.js index b742438ea24..feec1ce4386 100644 --- a/src/traces/icicle/draw_descendants.js +++ b/src/traces/icicle/draw_descendants.js @@ -116,6 +116,12 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) { } updateSlices.each(function(pt) { + // for bbox + pt._x0 = viewX(pt.x0); + pt._x1 = viewX(pt.x1); + pt._y0 = viewY(pt.y0); + pt._y1 = viewY(pt.y1); + pt._hoverX = viewX(pt.x1 - trace.tiling.pad), pt._hoverY = hasBottom ? viewY(pt.y1 - trace.tiling.pad / 2) : diff --git a/src/traces/sunburst/fx.js b/src/traces/sunburst/fx.js index eada70edf24..931541b3929 100644 --- a/src/traces/sunburst/fx.js +++ b/src/traces/sunburst/fx.js @@ -132,6 +132,10 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) { var hoverItems = { trace: traceNow, y: hoverCenterY, + _x0: pt._x0, + _x1: pt._x1, + _y0: pt._y0, + _y1: pt._y1, text: thisText.join('
'), name: (hovertemplate || hasFlag('name')) ? traceNow.name : undefined, color: _cast('hoverlabel.bgcolor') || cdi.color, diff --git a/src/traces/treemap/draw_ancestors.js b/src/traces/treemap/draw_ancestors.js index 294af2fc624..a25bcfea236 100644 --- a/src/traces/treemap/draw_ancestors.js +++ b/src/traces/treemap/draw_ancestors.js @@ -89,6 +89,12 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) { } updateSlices.each(function(pt) { + // for bbox + pt._x0 = viewX(pt.x0); + pt._x1 = viewX(pt.x1); + pt._y0 = viewY(pt.y0); + pt._y1 = viewY(pt.y1); + pt._hoverX = viewX(pt.x1 - Math.min(width, height) / 2); pt._hoverY = viewY(pt.y1 - height / 2); diff --git a/src/traces/treemap/draw_descendants.js b/src/traces/treemap/draw_descendants.js index 4e1fe8062be..d34296e8d05 100644 --- a/src/traces/treemap/draw_descendants.js +++ b/src/traces/treemap/draw_descendants.js @@ -124,6 +124,12 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) { updateSlices.each(function(pt) { var isHeader = helpers.isHeader(pt, trace); + // for bbox + pt._x0 = viewX(pt.x0); + pt._x1 = viewX(pt.x1); + pt._y0 = viewY(pt.y0); + pt._y1 = viewY(pt.y1); + pt._hoverX = viewX(pt.x1 - trace.marker.pad.r), pt._hoverY = hasBottom ? viewY(pt.y1 - trace.marker.pad.b / 2) : From 9716d7edb50f45c6e973d3aadd626aea0adf3d4f Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 18:38:13 -0400 Subject: [PATCH 17/18] improve bbox for pie slices --- src/traces/pie/plot.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 066b66f5db0..0a9e17b0cef 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -410,6 +410,8 @@ function attachFxHandlers(sliceTop, gd, cd) { x0: hoverCenterX - rInscribed * cd0.r, x1: hoverCenterX + rInscribed * cd0.r, y: hoverCenterY, + _y0: hoverCenterY - rInscribed * cd0.r, + _y1: hoverCenterY + rInscribed * cd0.r, text: text.join('
'), name: (trace2.hovertemplate || hoverinfo.indexOf('name') !== -1) ? trace2.name : undefined, idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right', From 6ba88db23dae54dfa1defee0f744fd7be6e9e47f Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 26 Aug 2021 18:54:37 -0400 Subject: [PATCH 18/18] improve bbox for funnelarea slices --- src/traces/pie/plot.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 0a9e17b0cef..8d2cd2d39ee 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -344,9 +344,10 @@ function plotTextLines(slices, trace) { function attachFxHandlers(sliceTop, gd, cd) { var cd0 = cd[0]; - var trace = cd0.trace; var cx = cd0.cx; var cy = cd0.cy; + var trace = cd0.trace; + var isFunnelArea = trace.type === 'funnelarea'; // hover state vars // have we drawn a hover label, so it should be cleared later @@ -410,8 +411,10 @@ function attachFxHandlers(sliceTop, gd, cd) { x0: hoverCenterX - rInscribed * cd0.r, x1: hoverCenterX + rInscribed * cd0.r, y: hoverCenterY, - _y0: hoverCenterY - rInscribed * cd0.r, - _y1: hoverCenterY + rInscribed * cd0.r, + _x0: isFunnelArea ? cx + pt.TL[0] : hoverCenterX - rInscribed * cd0.r, + _x1: isFunnelArea ? cx + pt.TR[0] : hoverCenterX + rInscribed * cd0.r, + _y0: isFunnelArea ? cy + pt.TL[1] : hoverCenterY - rInscribed * cd0.r, + _y1: isFunnelArea ? cy + pt.BL[1] : hoverCenterY + rInscribed * cd0.r, text: text.join('
'), name: (trace2.hovertemplate || hoverinfo.indexOf('name') !== -1) ? trace2.name : undefined, idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right',