8000 Add `layout.subplots` to enable (x|y) hover effects across multiple cartesian and splom suplots sharing one axis by archmoj · Pull Request #6947 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Add layout.subplots to enable (x|y) hover effects across multiple cartesian and splom suplots sharing one axis #6947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Apr 9, 2024
Merged

Add layout.subplots to enable (x|y) hover effects across multiple cartesian and splom suplots sharing one axis #6947

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e2976c8
hover on subplots when they anchored to same x or y
archmoj Apr 3, 2024
4f13620
add jasmine tests
archmoj Apr 3, 2024
39c9013
test unified hover including points in other plots
archmoj Apr 4, 2024
f29c7fc
draft log
archmoj Apr 4, 2024
935b8f1
refactor
archmoj Apr 4, 2024
6497363
refactor
archmoj Apr 4, 2024
680d8bd
handle splom
archmoj Apr 4, 2024
08917b5
splom test
archmoj Apr 5, 2024
808079e
do not loop in newly added items
archmoj Apr 5, 2024
ed06517
rename attribute
archmoj Apr 5, 2024
fd867c3
revise attribute def
archmoj Apr 5, 2024
8dff1a3
do not sort items when hovering over multiple subplots
archmoj Apr 5, 2024
b33e4dd
rename to hoversubplots
archmoj Apr 8, 2024
b6b5ccb
revise attributes
archmoj Apr 8, 2024
1f5c427
add single option
archmoj Apr 8, 2024
45f7feb
add test
archmoj Apr 8, 2024
d9aea4b
fix case of splom with multiple points at same (x|y) position
archmoj Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
handle splom
  • Loading branch information
@archmoj
archmoj committed Apr 5, 2024
commit 680d8bdc6729fe8f0b2aa36a70165a079caa63e8
6 changes: 5 additions & 1 deletion src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,11 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
if(trace._module && trace._module.hoverPoints) {
var newPoints = trace._module.hoverPoints(pointData, xval, yval, _mode, {
finiteRange: true,
hoverLayer: fullLayout._hoverlayer
hoverLayer: fullLayout._hoverlayer,

// options for splom when hovering on same axis
hoversameaxis: hoversameaxis,
gd: gd
});

if(newPoints) {
Expand Down
84 changes: 75 additions & 9 deletions src/traces/splom/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,64 @@

var helpers = require('./helpers');
var calcHover = require('../scattergl/hover').calcHover;
var getFromId = require('../../plots/cartesian/axes').getFromId;
var extendFlat = require('../../lib/extend').extendFlat;

function hoverPoints(pointData, xval, yval) {
function hoverPoints(pointData, xval, yval, hovermode, opts) {
if(!opts) opts = {};

var hovermodeHasX = (hovermode || '').charAt(0) === 'x';
var hovermodeHasY = (hovermode || '').charAt(0) === 'y';

var xpx = pointData.xa.c2p(xval);
var ypx = pointData.ya.c2p(yval);

var points = _hoverPoints(pointData, xpx, ypx);

if(opts.hoversameaxis && (hovermodeHasX || hovermodeHasY)) {
var _xpx = points[0]._xpx;
var _ypx = points[0]._ypx;

if(
(hovermodeHasX && _xpx !== undefined) ||
(hovermodeHasY && _ypx !== undefined)
) {
var subplotsWith = (
hovermodeHasX ?
pointData.xa :
pointData.ya
)._subplotsWith;

var gd = opts.gd;

var _pointData = extendFlat({}, pointData);

for(var i = 0; i < subplotsWith.length; i++) {
var spId = subplotsWith[i];

if(hovermodeHasY) {
_pointData.xa = getFromId(gd, spId, 'x');
} else { // hovermodeHasX
_pointData.ya = getFromId(gd, spId, 'y');
}

var newPoints = _hoverPoints(_pointData, _xpx, _ypx, hovermodeHasX, hovermodeHasY);

points = points.concat(newPoints);
}
}
}

return points;
}

function _hoverPoints(pointData, xpx, ypx, hoversameaxisX, hoversameaxisY) {
var cd = pointData.cd;
var trace = cd[0].trace;
var scene = pointData.scene;
var cdata = scene.matrixOptions.cdata;
var xa = pointData.xa;
var ya = pointData.ya;
var xpx = xa.c2p(xval);
var ypx = ya.c2p(yval);
var maxDistance = pointData.distance;

var xi = helpers.getDimIndex(trace, xa);
Expand All @@ -21,19 +69,34 @@ function hoverPoints(pointData, xval, yval) {
var x = cdata[xi];
var y = cdata[yi];

var id, dxy;
var id, dxy, _xpx, _ypx;
var minDist = maxDistance;

for(var i = 0; i < x.length; i++) {
var ptx = x[i];
var pty = y[i];
var dx = xa.c2p(ptx) - xpx;
var dy = ya.c2p(pty) - ypx;
var dist = Math.sqrt(dx * dx + dy * dy);
var thisXpx = xa.c2p(ptx);
var thisYpx = ya.c2p(pty);

var dx = thisXpx - xpx;
var dy = thisYpx - ypx;
var dist = 0;

var pick = false;
if(hoversameaxisX) {
if(dx === 0) pick = true;
} else if(hoversameaxisY) {
if(dy === 0) pick = true;
} else {
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < minDist) pick = true;
}

if(dist < minDist) {
if(pick) {
minDist = dxy = dist;
id = i;
_xpx = thisXpx;
_ypx = thisYpx;
}
}

Expand All @@ -43,7 +106,10 @@ function hoverPoints(pointData, xval, yval) {

if(id === undefined) return [pointData];

return [calcHover(pointData, x, y, trace)];
var out = calcHover(pointData, x, y, trace);
out._xpx = _xpx;
out._ypx = _ypx;
return [out];
}

module.exports = {
Expand Down
0