Implement hoveron: 'fills' for scattergl and scatterpolargl

[jonmmease]

During a discussion in the plotly.py forums in came up that the hoverlabel for the scatterpolar trace has a different behavior when the fill state is set to toself than when it's set to none.

CodePen: https://codepen.io/anon/pen/EpOGdX

fill: 'none' for scatterpolar

fill: 'toself' for scatterpolar

It also seems that the hoverinfo propery has no effect when fill is toself.

I did the same comparison with the scatterpolargl trace and it has the behavior that I expected:

fill: 'toself; for scatterpolargl

I don't know if this is a bug in scatterpolar or scatterpolargl, but I find the current scatterpolargl behavior (The behavior consistent with fill of none) to be more helpful.

[alexcjohnson]

This is the hoveron attribute, which defaults to fills in this case. This is consistent with scatter behavior, scatterpolargl seems to be the odd one out.

[etpinard]

@alexcjohnson is right scatterpolargl is the odd one out. I didn't know fills in scatterpolargl were a thing. That's what you get from reusing polar + scattergl logic I guess. But I doubt they function properly yet along have the correct hoverinfo.

[etpinard]

Looking at this more closely, the real problem is with scattergl.

As listed in the old gl2d limitations ticket, hoveron: 'fills' never got implemented for scattergl. As scatterpolargl reuses most of the scattergl hover logic, once we implement hoveron: 'fills' for scattergl, it should just work^TM for scatterpolargl.

So I guess this is another case of erroneously listed attributes. I'll make a PR 🔪 hoveron for scattergl and scatterpolargl.

@jonmmease Ok if I change the issue title to Implement hoveron: 'fills' for scattergl and scatterpolargl?

[jonmmease]

Sure!

[mgsnuno]

Hi. Will hoveron be implemented in scattergl?

[erezinman]

@etpinard

Hi, was this issue neglected/forgotten about?
Thanks!

[nicolaskruchten]

This item isn't on anyone's roadmap that I know of at the moment, but we'd welcome a pull request to address it!

[erezinman]

If you could point me towards where to look, I might do it.

[alexcjohnson]

Here's hoveron: fills for scatter:

plotly.js/src/traces/scatter/hover.js

Lines 107 to 192 in 373d4ff

	if(hoveron.indexOf('fills') !== -1 && trace._polygons) {
	var polygons = trace._polygons;
	var polygonsIn = [];
	var inside = false;
	var xmin = Infinity;
	var xmax = -Infinity;
	var ymin = Infinity;
	var ymax = -Infinity;
	var i, j, polygon, pts, xCross, x0, x1, y0, y1;
	for(i = 0; i < polygons.length; i++) {
	polygon = polygons[i];
	// TODO: this is not going to work right for curved edges, it will
	// act as though they're straight. That's probably going to need
	// the elements themselves to capture the events. Worth it?
	if(polygon.contains(pt)) {
	inside = !inside;
	// TODO: need better than just the overall bounding box
	polygonsIn.push(polygon);
	ymin = Math.min(ymin, polygon.ymin);
	ymax = Math.max(ymax, polygon.ymax);
	}
	}
	if(inside) {
	// constrain ymin/max to the visible plot, so the label goes
	// at the middle of the piece you can see
	ymin = Math.max(ymin, 0);
	ymax = Math.min(ymax, ya._length);
	// find the overall left-most and right-most points of the
	// polygon(s) we're inside at their combined vertical midpoint.
	// This is where we will draw the hover label.
	// Note that this might not be the vertical midpoint of the
	// whole trace, if it's disjoint.
	var yAvg = (ymin + ymax) / 2;
	for(i = 0; i < polygonsIn.length; i++) {
	pts = polygonsIn[i].pts;
	for(j = 1; j < pts.length; j++) {
	y0 = pts[j - 1][1];
	y1 = pts[j][1];
	if((y0 > yAvg) !== (y1 >= yAvg)) {
	x0 = pts[j - 1][0];
	x1 = pts[j][0];
	if(y1 - y0) {
	xCross = x0 + (x1 - x0) * (yAvg - y0) / (y1 - y0);
	xmin = Math.min(xmin, xCross);
	xmax = Math.max(xmax, xCross);
	}
	}
	}
	}
	// constrain xmin/max to the visible plot now too
	xmin = Math.max(xmin, 0);
	xmax = Math.min(xmax, xa._length);
	// get only fill or line color for the hover color
	var color = Color.defaultLine;
	if(Color.opacity(trace.fillcolor)) color = trace.fillcolor;
	else if(Color.opacity((trace.line || {}).color)) {
	color = trace.line.color;
	}
	Lib.extendFlat(pointData, {
	// never let a 2D override 1D type as closest point
	// also: no spikeDistance, it's not allowed for fills
	distance: pointData.maxHoverDistance,
	x0: xmin,
	x1: xmax,
	y0: yAvg,
	y1: yAvg,
	color: color,
	hovertemplate: false
	});
	delete pointData.index;
	if(trace.text && !Array.isArray(trace.text)) {
	pointData.text = String(trace.text);
	} else pointData.text = trace.name;
	return [pointData];
	}
	}

We'd need to implement similar logic in scattergl/hover - then since scatterpolargl/hover reuses scattergl/hover it might just work in scatterpolargl, or we might need a little more there.

[danielsnider-aws]

+1 for implementing hoveron: 'fills' for scattergl!