hover.js

'use strict';

var d3 = require('@plotly/d3');
var isNumeric = require('fast-isnumeric');

var Lib = require('../../lib');
var pushUnique = Lib.pushUnique;
var strTranslate = Lib.strTranslate;
var strRotate = Lib.strRotate;
var Events = require('../../lib/events');
var svgTextUtils = require('../../lib/svg_text_utils');
var overrideCursor = require('../../lib/override_cursor');
var Drawing = require('../drawing');
var Color = require('../color');
var dragElement = require('../dragelement');
var Axes = require('../../plots/cartesian/axes');
var zindexSeparator = require('../../plots/cartesian/constants').zindexSeparator;
var Registry = require('../../registry');

var helpers = require('./helpers');
var constants = require('./constants');

var legendSupplyDefaults = require('../legend/defaults');
var legendDraw = require('../legend/draw');

// hover labels for multiple horizontal bars get tilted by some angle,
// then need to be offset differently if they overlap
var YANGLE = constants.YANGLE;
var YA_RADIANS = (Math.PI * YANGLE) / 180;

// expansion of projected height
var YFACTOR = 1 / Math.sin(YA_RADIANS);

// to make the appropriate post-rotation x offset,
// you need both x and y offsets
var YSHIFTX = Math.cos(YA_RADIANS);
var YSHIFTY = Math.sin(YA_RADIANS);

// size and display constants for hover text
var HOVERARROWSIZE = constants.HOVERARROWSIZE;
var HOVERTEXTPAD = constants.HOVERTEXTPAD;

var multipleHoverPoints = {
 box: true,
 ohlc: true,
 violin: true,
 candlestick: true
};

var cartesianScatterPoints = {
 scatter: true,
 scattergl: true,
 splom: true
};

function distanceSort(a, b) {
 return a.distance - b.distance;
}

// fx.hover: highlight data on hover
// evt can be a mousemove event, or an object with data about what points
// to hover on
// {xpx,ypx[,hovermode]} - pixel locations from top left
// (with optional overriding hovermode)
// {xval,yval[,hovermode]} - data values
// [{curveNumber,(pointNumber|xval and/or yval)}] -
// array of specific points to highlight
// pointNumber is a single integer if gd.data[curveNumber] is 1D,
// or a two-element array if it's 2D
// xval and yval are data values,
// 1D data may specify either or both,
// 2D data must specify both
// subplot is an id string (default "xy")
// makes use of gl.hovermode, which can be:
// x (find the points with the closest x values, ie a column),
// closest (find the single closest point)
// internally there are two more that occasionally get used:
// y (pick out a row - only used for multiple horizontal bar charts)
// array (used when the user specifies an explicit
// array of points to hover on)
//
// We wrap the hovers in a timer, to limit their frequency.
// The actual rendering is done by private function _hover.
exports.hover = function hover(gd, evt, subplot, noHoverEvent) {
 gd = Lib.getGraphDiv(gd);
 // The 'target' property changes when bubbling out of Shadow DOM.
 // Throttling can delay reading the target, so we save the current value.
 var eventTarget = evt.target;
 Lib.throttle(gd._fullLayout._uid + constants.HOVERID, constants.HOVERMINTIME, function () {
 _hover(gd, evt, subplot, noHoverEvent, eventTarget);
 });
};

/*
 * Draw a single hover item or an array of hover item in a pre-existing svg container somewhere
 * hoverItem should have keys:
 * - x and y (or x0, x1, y0, and y1):
 * the pixel position to mark, relative to opts.container
 * - xLabel, yLabel, zLabel, text, and name:
 * info to go in the label
 * - color:
 * the background color for the label.
 * - idealAlign (optional):
 * 'left' or 'right' for which side of the x/y box to try to put this on first
 * - borderColor (optional):
 * color for the border, defaults to strongest contrast with color
 * - fontFamily (optional):
 * string, the font for this label, defaults to constants.HOVERFONT
 * - fontSize (optional):
 * the label font size, defaults to constants.HOVERFONTSIZE
 * - fontColor (optional):
 * defaults to borderColor
 * opts should have keys:
 * - bgColor:
 * the background color this is against, used if the trace is
 * non-opaque, and for the name, which goes outside the box
 * - container:
 * a <svg> or <g> element to add the hover label to
 * - outerContainer:
 * normally a parent of `container`, sets the bounding box to use to
 * constrain the hover label and determine whether to show it on the left or right
 * opts can have optional keys:
 * - anchorIndex:
 the index of the hover item used as an anchor for positioning.
 The other hover items will be pushed up or down to prevent overlap.
 */
exports.loneHover = function loneHover(hoverItems, opts) {
 var multiHover = true;
 if (!Array.isArray(hoverItems)) {
 multiHover = false;
 hoverItems = [hoverItems];
 }

 var gd = opts.gd;
 var gTop = getTopOffset(gd);
 var gLeft = getLeftOffset(gd);

 var pointsData = hoverItems.map(function (hoverItem) {
 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) {
 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;
 }

 eventData.bbox = {
 x0: x0 + gLeft,
 x1: x1 + gLeft,
 y0: y0 + gTop,
 y1: y1 + gTop
 };

 // xPixel/yPixel are pixel coordinates of the hover point's center,
 // relative to the top-left corner of the graph div
 eventData.xPixel = (_x0 + _x1) / 2;
 eventData.yPixel = (_y0 + _y1) / 2;

 if (opts.inOut_bbox) {
 opts.inOut_bbox.push(eventData.bbox);
 }
 } 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,
 xLabel: hoverItem.xLabel,
 yLabel: hoverItem.yLabel,
 zLabel: hoverItem.zLabel,
 text: hoverItem.text,
 name: hoverItem.name,
 idealAlign: hoverItem.idealAlign,

 // optional extra bits of styling
 borderColor: hoverItem.borderColor,
 fontFamily: hoverItem.fontFamily,
 fontSize: hoverItem.fontSize,
 fontColor: hoverItem.fontColor,
 fontWeight: hoverItem.fontWeight,
 fontStyle: hoverItem.fontStyle,
 fontVariant: hoverItem.fontVariant,
 nameLength: hoverItem.nameLength,
 textAlign: hoverItem.textAlign,

 // filler to make createHoverText happy
 trace: hoverItem.trace || {
 index: 0,
 hoverinfo: ''
 },
 xa: { _offset: 0 },
 ya: { _offset: 0 },
 index: 0,

 hovertemplate: hoverItem.hovertemplate || false,
 hovertemplateLabels: hoverItem.hovertemplateLabels || false,

 eventData: eventData
 };
 });

 var rotateLabels = false;

 var hoverText = createHoverText(pointsData, {
 gd: gd,
 hovermode: 'closest',
 rotateLabels: rotateLabels,
 bgColor: opts.bgColor || Color.background,
 container: d3.select(opts.container),
 outerContainer: opts.outerContainer || opts.container
 });
 var hoverLabel = hoverText.hoverLabels;

 // Fix vertical overlap
 var tooltipSpacing = 5;
 var lastBottomY = 0;
 var anchor = 0;
 hoverLabel
 .sort(function (a, b) {
 return a.y0 - b.y0;
 })
 .each(function (d, i) {
 var topY = d.y0 - d.by / 2;

 if (topY - tooltipSpacing < lastBottomY) {
 d.offset = lastBottomY - topY + tooltipSpacing;
 } else {
 d.offset = 0;
 }

 lastBottomY = topY + d.by + d.offset;

 if (i === opts.anchorIndex || 0) anchor = d.offset;
 })
 .each(function (d) {
 d.offset -= anchor;
 });

 var scaleX = gd._fullLayout._invScaleX;
 var scaleY = gd._fullLayout._invScaleY;
 alignHoverText(hoverLabel, rotateLabels, scaleX, scaleY);

 return multiHover ? hoverLabel : hoverLabel.node();
};

// The actual implementation is here:
function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
 if (!subplot) subplot = 'xy';

 if (typeof subplot === 'string') {
 // drop zindex from subplot id
 subplot = subplot.split(zindexSeparator)[0];
 }

 // if the user passed in an array of subplots,
 // use those instead of finding overlayed plots
 var subplots = Array.isArray(subplot) ? subplot : [subplot];

 var spId;

 var fullLayout = gd._fullLayout;
 var hoversubplots = fullLayout.hoversubplots;
 var plots = fullLayout._plots || [];
 var plotinfo = plots[subplot];
 var hasCartesian = fullLayout._has('cartesian');

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

 var firstXaxis;
 var firstYaxis;

 if (hasCartesian && (hovermodeHasX || hovermodeHasY) && hoversubplots === 'axis') {
 var subplotsLength = subplots.length;
 for (var p = 0; p < subplotsLength; p++) {
 spId = subplots[p];
 if (plots[spId]) {
 // 'cartesian' case

 firstXaxis = Axes.getFromId(gd, spId, 'x');
 firstYaxis = Axes.getFromId(gd, spId, 'y');

 var subplotsWith = (hovermodeHasX ? firstXaxis : firstYaxis)._subplotsWith;

 if (subplotsWith && subplotsWith.length) {
 for (var q = 0; q < subplotsWith.length; q++) {
 pushUnique(subplots, subplotsWith[q]);
 }
 }
 }
 }
 }

 // list of all overlaid subplots to look at
 if (plotinfo && hoversubplots !== 'single') {
 var overlayedSubplots = plotinfo.overlays.map(function (pi) {
 return pi.id;
 });

 subplots = subplots.concat(overlayedSubplots);
 }

 var len = subplots.length;
 var xaArray = new Array(len);
 var yaArray = new Array(len);
 var supportsCompare = false;

 for (var i = 0; i < len; i++) {
 spId = subplots[i];

 if (plots[spId]) {
 // 'cartesian' case
 supportsCompare = true;
 xaArray[i] = plots[spId].xaxis;
 yaArray[i] = plots[spId].yaxis;
 } else if (fullLayout[spId] && fullLayout[spId]._subplot) {
 // other subplot types
 var _subplot = fullLayout[spId]._subplot;
 xaArray[i] = _subplot.xaxis;
 yaArray[i] = _subplot.yaxis;
 } else {
 Lib.warn('Unrecognized subplot: ' + spId);
 return;
 }
 }

 if (hovermode && !supportsCompare) hovermode = 'closest';

 if (
 ['x', 'y', 'closest', 'x unified', 'y unified'].indexOf(hovermode) === -1 ||
 !gd.calcdata ||
 gd.querySelector('.zoombox') ||
 gd._dragging
 ) {
 return dragElement.unhoverRaw(gd, evt);
 }

 var hoverdistance = fullLayout.hoverdistance;
 if (hoverdistance === -1) hoverdistance = Infinity;

 var spikedistance = fullLayout.spikedistance;
 if (spikedistance === -1) spikedistance = Infinity;

 // hoverData: the set of candidate points we've found to highlight
 var hoverData = [];

 // searchData: the data to search in. Mostly this is just a copy of
 // gd.calcdata, filtered to the subplot and overlays we're on
 // but if a point array is supplied it will be a mapping
 // of indicated curves
 var searchData = [];

 // [x|y]valArray: the axis values of the hover event
 // mapped onto each of the currently selected overlaid subplots
 var xvalArray, yvalArray;

 var itemnum, curvenum, cd, trace, subplotId, subploti, _mode, xval, yval, pointData, closedataPreviousLength;

 // spikePoints: the set of candidate points we've found to draw spikes to
 var spikePoints = {
 hLinePoint: null,
 vLinePoint: null
 };

 // does subplot have one (or more) horizontal traces?
 // This is used to determine whether we rotate the labels or not
 var hasOneHorizontalTrace = false;

 // Figure out what we're hovering on:
 // mouse location or user-supplied data

 if (Array.isArray(evt)) {
 // user specified an array of points to highlight
 hovermode = 'array';
 for (itemnum = 0; itemnum < evt.length; itemnum++) {
 cd = gd.calcdata[evt[itemnum].curveNumber || 0];
 if (cd) {
 trace = cd[0].trace;
 if (cd[0].trace.hoverinfo !== 'skip') {
 searchData.push(cd);
 if (trace.orientation === 'h') {
 hasOneHorizontalTrace = true;
 }
 }
 }
 }
 } else {
 // take into account zorder
 var zorderedCalcdata = gd.calcdata.slice();
 zorderedCalcdata.sort(function (a, b) {
 var aZorder = a[0].trace.zorder || 0;
 var bZorder = b[0].trace.zorder || 0;
 return aZorder - bZorder;
 });

 for (curvenum = 0; curvenum < zorderedCalcdata.length; curvenum++) {
 cd = zorderedCalcdata[curvenum];
 trace = cd[0].trace;
 if (trace.hoverinfo !== 'skip' && helpers.isTraceInSubplots(trace, subplots)) {
 searchData.push(cd);
 if (trace.orientation === 'h') {
 hasOneHorizontalTrace = true;
 }
 }
 }

 // [x|y]px: the pixels (from top left) of the mouse location
 // on the currently selected plot area
 // add pointerX|Y property for drawing the spikes in spikesnap 'cursor' situation
 var hasUserCalledHover = !eventTarget;
 var xpx, ypx;

 if (hasUserCalledHover) {
 if ('xpx' in evt) xpx = evt.xpx;
 else xpx = xaArray[0]._length / 2;

 if ('ypx' in evt) ypx = evt.ypx;
 else ypx = yaArray[0]._length / 2;
 } else {
 // fire the beforehover event and quit if it returns false
 // note that we're only calling this on real mouse events, so
 // manual calls to fx.hover will always run.
 if (Events.triggerHandler(gd, 'plotly_beforehover', evt) === false) {
 return;
 }

 var dbb = eventTarget.getBoundingClientRect();

 xpx = evt.clientX - dbb.left;
 ypx = evt.clientY - dbb.top;

 fullLayout._calcInverseTransform(gd);
 var transformedCoords = Lib.apply3DTransform(fullLayout._invTransform)(xpx, ypx);

 xpx = transformedCoords[0];
 ypx = transformedCoords[1];

 // in case hover was called from mouseout into hovertext,
 // it's possible you're not actually over the plot anymore
 if (xpx < 0 || xpx > xaArray[0]._length || ypx < 0 || ypx > yaArray[0]._length) {
 return dragElement.unhoverRaw(gd, evt);
 }
 }

 evt.pointerX = xpx + xaArray[0]._offset;
 evt.pointerY = ypx + yaArray[0]._offset;

 if ('xval' in evt) xvalArray = helpers.flat(subplots, evt.xval);
 else xvalArray = helpers.p2c(xaArray, xpx);

 if ('yval' in evt) yvalArray = helpers.flat(subplots, evt.yval);
 else yvalArray = helpers.p2c(yaArray, ypx);

 // Save pointer position to gd so that it can be included in all hover/click event data,
 // even when hoveranywhere and clickanywhere are not enabled
 gd._hoverPointerX = evt.pointerX;
 gd._hoverPointerY = evt.pointerY;

 if (!isNumeric(xvalArray[0]) || !isNumeric(yvalArray[0])) {
 Lib.warn('Fx.hover failed', evt, gd);
 return dragElement.unhoverRaw(gd, evt);
 }
 }

 // Save coordinate values so clickanywhere can be used without hoveranywhere
 if (fullLayout.clickanywhere) {
 gd._hoverXVals = xvalArray;
 gd._hoverYVals = yvalArray;
 gd._hoverXAxes = xaArray;
 gd._hoverYAxes = yaArray;
 }

 // the pixel distance to beat as a matching point
 // in 'x' or 'y' mode this resets for each trace
 var distance = Infinity;

 // find the closest point in each trace
 // this is minimum dx and/or dy, depending on mode
 // and the pixel position for the label (labelXpx, labelYpx)
 function findHoverPoints(customXVal, customYVal) {
 for (curvenum = 0; curvenum < searchData.length; curvenum++) {
 cd = searchData[curvenum];

 // filter out invisible or broken data
 if (!cd || !cd[0] || !cd[0].trace) continue;

 trace = cd[0].trace;

 if (trace.visible !== true || trace._length === 0) continue;

 // Explicitly bail out for these two. I don't know how to otherwise prevent
 // the rest of this function from running and failing
 if (['carpet', 'contourcarpet'].indexOf(trace._module.name) !== -1) continue;

 // within one trace mode can sometimes be overridden
 _mode = hovermode;
 if (helpers.isUnifiedHover(_mode)) {
 _mode = _mode.charAt(0);
 }

 if (trace.type === 'splom') {
 // splom traces do not generate overlay subplots,
 // it is safe to assume here splom traces correspond to the 0th subplot
 subploti = 0;
 subplotId = subplots[subploti];
 } else {
 subplotId = helpers.getSubplot(trace);
 subploti = subplots.indexOf(subplotId);
 }

 // container for new point, also used to pass info into module.hoverPoints
 pointData = {
 // trace properties
 cd: cd,
 trace: trace,
 xa: xaArray[subploti],
 ya: yaArray[subploti],

 // max distances for hover and spikes - for points that want to show but do not
 // want to override other points, set distance/spikeDistance equal to max*Distance
 // and it will not get filtered out but it will be guaranteed to have a greater
 // distance than any point that calculated a real distance.
 maxHoverDistance: hoverdistance,
 maxSpikeDistance: spikedistance,

 // point properties - override all of these
 index: false, // point index in trace - only used by plotly.js hoverdata consumers
 distance: Math.min(distance, hoverdistance), // pixel distance or pseudo-distance

 // distance/pseudo-distance for spikes. This distance should always be calculated
 // as if in "closest" mode, and should only be set if this point should
 // generate a spike.
 spikeDistance: Infinity,

 // in some cases the spikes have different positioning from the hover label
 // they don't need x0/x1, just one position
 xSpike: undefined,
 ySpike: undefined,

 // where and how to display the hover label
 color: Color.defaultLine, // trace color
 name: trace.name,
 x0: undefined,
 x1: undefined,
 y0: undefined,
 y1: undefined,
 xLabelVal: undefined,
 yLabelVal: undefined,
 zLabelVal: undefined,
 text: undefined
 };

 // add ref to subplot object (non-cartesian case)
 if (fullLayout[subplotId]) {
 pointData.subplot = fullLayout[subplotId]._subplot;
 }
 // add ref to splom scene
 if (fullLayout._splomScenes && fullLayout._splomScenes[trace.uid]) {
 pointData.scene = fullLayout._splomScenes[trace.uid];
 }

 // for a highlighting array, figure out what
 // we're searching for with this element
 if (_mode === 'array') {
 var selection = evt[curvenum];
 if ('pointNumber' in selection) {
 // populate xval/yval from the targeted calcdata point so trace
 // hoverPoints implementations that read them outside getClosest
 // (e.g. scattermap's longitude winding) get valid coordinates
 const cdi = cd[selection.pointNumber];
 if (cdi) {
 pointData.index = selection.pointNumber;
 // map and geo traces store coords as lonlat: [lon, lat];
 // everything else uses Cartesian .x/.y. This is good enough
 // for now, but may need to be updated to a per trace accessor
 // in the future.
 if (cdi.lonlat) {
 xval = cdi.lonlat[0];
 yval = cdi.lonlat[1];
 } else {
 xval = cdi.x;
 yval = cdi.y;
 }
 }
 _mode = 'closest';
 } else {
 _mode = '';
 if ('xval' in selection) {
 xval = selection.xval;
 _mode = 'x';
 }
 if ('yval' in selection) {
 yval = selection.yval;
 _mode = _mode ? 'closest' : 'y';
 }
 }
 } else if (customXVal !== undefined && customYVal !== undefined) {
 xval = customXVal;
 yval = customYVal;
 } else {
 xval = xvalArray[subploti];
 yval = yvalArray[subploti];
 }

 closedataPreviousLength = hoverData.length;

 // Now if there is range to look in, find the points to hover.
 if (hoverdistance !== 0) {
 if (trace._module && trace._module.hoverPoints) {
 var newPoints = trace._module.hoverPoints(pointData, xval, yval, _mode, {
 finiteRange: true,
 hoverLayer: fullLayout._hoverlayer,

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

 if (newPoints) {
 var newPoint;
 for (var newPointNum = 0; newPointNum < newPoints.length; newPointNum++) {
 newPoint = newPoints[newPointNum];
 if (isNumeric(newPoint.x0) && isNumeric(newPoint.y0)) {
 hoverData.push(cleanPoint(newPoint, hovermode));
 }
 }
 }
 } else {
 Lib.log('Unrecognized trace type in hover:', trace);
 }
 }

 // in closest mode, remove any existing (farther) points
 // and don't look any farther than this latest point (or points, some
 // traces like box & violin make multiple hover labels at once)
 if (hovermode === 'closest' && hoverData.length > closedataPreviousLength) {
 hoverData.splice(0, closedataPreviousLength);
 distance = hoverData[0].distance;
 }

 // Now if there is range to look in, find the points to draw the spikelines
 // Do it only if there is no hoverData
 if (hasCartesian && spikedistance !== 0) {
 if (hoverData.length === 0) {
 pointData.distance = spikedistance;
 pointData.index = false;
 var closestPoints = trace._module.hoverPoints(pointData, xval, yval, 'closest', {
 hoverLayer: fullLayout._hoverlayer
 });
 if (closestPoints) {
 closestPoints = closestPoints.filter(function (point) {
 // some hover points, like scatter fills, do not allow spikes,
 // so will generate a hover point but without a valid spikeDistance
 return point.spikeDistance <= spikedistance;
 });
 }
 if (closestPoints && closestPoints.length) {
 var tmpPoint;
 var closestVPoints = closestPoints.filter(function (point) {
 return point.xa.showspikes && point.xa.spikesnap !== 'hovered data';
 });
 if (closestVPoints.length) {
 var closestVPt = closestVPoints[0];
 if (isNumeric(closestVPt.x0) && isNumeric(closestVPt.y0)) {
 tmpPoint = fillSpikePoint(closestVPt);
 if (
 !spikePoints.vLinePoint ||
 spikePoints.vLinePoint.spikeDistance > tmpPoint.spikeDistance
 ) {
 spikePoints.vLinePoint = tmpPoint;
 }
 }
 }

 var closestHPoints = closestPoints.filter(function (point) {
 return point.ya.showspikes && point.ya.spikesnap !== 'hovered data';
 });
 if (closestHPoints.length) {
 var closestHPt = closestHPoints[0];
 if (isNumeric(closestHPt.x0) && isNumeric(closestHPt.y0)) {
 tmpPoint = fillSpikePoint(closestHPt);
 if (
 !spikePoints.hLinePoint ||
 spikePoints.hLinePoint.spikeDistance > tmpPoint.spikeDistance
 ) {
 spikePoints.hLinePoint = tmpPoint;
 }
 }
 }
 }
 }
 }
 }
 }

 findHoverPoints();

 function selectClosestPoint(pointsData, spikedistance, spikeOnWinning) {
 var resultPoint = null;
 var minDistance = Infinity;
 var thisSpikeDistance;

 for (var i = 0; i < pointsData.length; i++) {
 if (firstXaxis && firstXaxis._id !== pointsData[i].xa._id) continue;
 if (firstYaxis && firstYaxis._id !== pointsData[i].ya._id) continue;

 thisSpikeDistance = pointsData[i].spikeDistance;
 if (spikeOnWinning && i === 0) thisSpikeDistance = -Infinity;

 if (thisSpikeDistance <= minDistance && thisSpikeDistance <= spikedistance) {
 resultPoint = pointsData[i];
 minDistance = thisSpikeDistance;
 }
 }
 return resultPoint;
 }

 function fillSpikePoint(point) {
 if (!point) return null;
 return {
 xa: point.xa,
 ya: point.ya,
 x: point.xSpike !== undefined ? point.xSpike : (point.x0 + point.x1) / 2,
 y: point.ySpike !== undefined ? point.ySpike : (point.y0 + point.y1) / 2,
 distance: point.distance,
 spikeDistance: point.spikeDistance,
 curveNumber: point.trace.index,
 color: point.color,
 pointNumber: point.index
 };
 }

 var spikelineOpts = {
 fullLayout: fullLayout,
 container: fullLayout._hoverlayer,
 event: evt
 };
 var oldspikepoints = gd._spikepoints;
 var newspikepoints = {
 vLinePoint: spikePoints.vLinePoint,
 hLinePoint: spikePoints.hLinePoint
 };
 gd._spikepoints = newspikepoints;

 var sortHoverData = function () {
 // When sorting keep the points in the main subplot at the top
 // then add points in other subplots

 var hoverDataInSubplot = hoverData.filter(function (a) {
 return firstXaxis && firstXaxis._id === a.xa._id && firstYaxis && firstYaxis._id === a.ya._id;
 });

 var hoverDataOutSubplot = hoverData.filter(function (a) {
 return !(firstXaxis && firstXaxis._id === a.xa._id && firstYaxis && firstYaxis._id === a.ya._id);
 });

 hoverDataInSubplot.sort(distanceSort);
 hoverDataOutSubplot.sort(distanceSort);
 hoverData = hoverDataInSubplot.concat(hoverDataOutSubplot);

 // move period positioned points and box/bar-like traces to the end of the list
 hoverData = orderRangePoints(hoverData, hovermode);
 };
 sortHoverData();

 var axLetter = hovermode.charAt(0);
 var spikeOnWinning =
 (axLetter === 'x' || axLetter === 'y') && hoverData[0] && cartesianScatterPoints[hoverData[0].trace.type];

 // Now if it is not restricted by spikedistance option, set the points to draw the spikelines
 if (hasCartesian && spikedistance !== 0) {
 if (hoverData.length !== 0) {
 var tmpHPointData = hoverData.filter(function (point) {
 return point.ya.showspikes;
 });
 var tmpHPoint = selectClosestPoint(tmpHPointData, spikedistance, spikeOnWinning);
 spikePoints.hLinePoint = fillSpikePoint(tmpHPoint);

 var tmpVPointData = hoverData.filter(function (point) {
 return point.xa.showspikes;
 });
 var tmpVPoint = selectClosestPoint(tmpVPointData, spikedistance, spikeOnWinning);
 spikePoints.vLinePoint = fillSpikePoint(tmpVPoint);
 }
 }

 // if hoverData is empty check for the spikes to draw and quit if there are none
 if (hoverData.length === 0) {
 var result = dragElement.unhoverRaw(gd, evt);
 if (hasCartesian && (spikePoints.hLinePoint !== null || spikePoints.vLinePoint !== null)) {
 if (spikesChanged(oldspikepoints)) {
 createSpikelines(gd, spikePoints, spikelineOpts);
 }
 }

 if (fullLayout.hoveranywhere && !noHoverEvent && eventTarget) {
 var oldHoverData = gd._hoverdata;
 if (oldHoverData && oldHoverData.length) {
 gd.emit('plotly_unhover', {
 event: evt,
 points: oldHoverData
 });
 gd._hoverdata = [];
 }
 emitHover([]);

 // Set a flag to note that an empty-space hover event is being emitted,
 // so that we know to emit an unhover event when the mouse leaves the plot area.
 // See dragelement/unhover.js.
 gd._hoverAnywhereActive = true;
 }
 return result;
 }

 if (hasCartesian) {
 if (spikesChanged(oldspikepoints)) {
 createSpikelines(gd, spikePoints, spikelineOpts);
 }
 }

 if (
 helpers.isXYhover(_mode) &&
 hoverData[0].length !== 0 &&
 hoverData[0].trace.type !== 'splom' // TODO: add support for splom
 ) {
 // pick winning point
 var winningPoint = hoverData[0];
 // discard other points
 if (multipleHoverPoints[winningPoint.trace.type]) {
 hoverData = hoverData.filter((d) => d.trace.index === winningPoint.trace.index);
 } else {
 hoverData = [winningPoint];
 }
 var initLen = hoverData.length;

 var winX = getCoord('x', winningPoint, fullLayout);
 var winY = getCoord('y', winningPoint, fullLayout);

 // in compare mode, select every point at position
 findHoverPoints(winX, winY);

 var finalPoints = [];
 var seen = {};
 var id = 0;
 var insert = function (newHd) {
 var key = multipleHoverPoints[newHd.trace.type] ? hoverDataKey(newHd) : newHd.trace.index;
 if (!seen[key]) {
 id++;
 seen[key] = id;
 finalPoints.push(newHd);
 } else {
 var oldId = seen[key] - 1;
 var oldHd = finalPoints[oldId];
 if (oldId > 0 && Math.abs(newHd.distance) < Math.abs(oldHd.distance)) {
 // replace with closest
 finalPoints[oldId] = newHd;
 }
 }
 };

 var k;
 // insert the winnig point(s) first
 for (k = 0; k < initLen; k++) {
 insert(hoverData[k]);
 }
 // override from the end
 for (k = hoverData.length - 1; k > initLen - 1; k--) {
 insert(hoverData[k]);
 }
 hoverData = finalPoints;
 sortHoverData();
 }

 // lastly, emit custom hover/unhover events
 var oldhoverdata = gd._hoverdata;
 var newhoverdata = [];

 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
 for (const pt of hoverData) {
 var eventData = helpers.makeEventData(pt, pt.trace, pt.cd);

 if (pt.hovertemplate !== false) {
 var ht = false;
 if (pt.cd[pt.index] && pt.cd[pt.index].ht) {
 ht = pt.cd[pt.index].ht;
 }
 pt.hovertemplate = ht || pt.trace.hovertemplate || false;
 }

 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: x0 + gLeft,
 x1: x1 + gLeft,
 y0: y0 + gTop,
 y1: y1 + gTop
 };

 eventData.xPixel = (_x0 + _x1) / 2;
 eventData.yPixel = (_y0 + _y1) / 2;
 }

 pt.eventData = [eventData];
 newhoverdata.push(eventData);
 }

 gd._hoverdata = newhoverdata;

 var rotateLabels =
 (hovermode === 'y' && (searchData.length > 1 || hoverData.length > 1)) ||
 (hovermode === 'closest' && hasOneHorizontalTrace && hoverData.length > 1);

 var bgColor = Color.combine(fullLayout.plot_bgcolor || Color.background, fullLayout.paper_bgcolor);

 var hoverText = createHoverText(hoverData, {
 gd: gd,
 hovermode: hovermode,
 rotateLabels: rotateLabels,
 bgColor: bgColor,
 container: fullLayout._hoverlayer,
 outerContainer: fullLayout._paper.node(),
 commonLabelOpts: fullLayout.hoverlabel,
 hoverdistance: fullLayout.hoverdistance
 });
 var hoverLabels = hoverText.hoverLabels;

 if (!helpers.isUnifiedHover(hovermode)) {
 hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, hoverText.commonLabelBoundingBox);
 alignHoverText(hoverLabels, rotateLabels, fullLayout._invScaleX, fullLayout._invScaleY);
 } // TODO: tagName hack is needed to appease geo.js's hack of using eventTarget=true
 // we should improve the "fx" API so other plots can use it without these hack.
 if (eventTarget && eventTarget.tagName) {
 var hasClickToShow = Registry.getComponentMethod('annotations', 'hasClickToShow')(gd, newhoverdata);
 overrideCursor(d3.select(eventTarget), hasClickToShow ? 'pointer' : '');
 }

 // don't emit events if called manually
 var _hoverChanged = hoverChanged(gd, evt, oldhoverdata);
 if (!eventTarget || noHoverEvent || (!_hoverChanged && !fullLayout.hoveranywhere)) return;

 if (oldhoverdata && _hoverChanged) {
 gd.emit('plotly_unhover', {
 event: evt,
 points: oldhoverdata
 });
 }

 emitHover(gd._hoverdata);

 function emitHover(points) {
 gd.emit('plotly_hover', {
 event: evt,
 points: points,
 xaxes: xaArray,
 yaxes: yaArray,
 xvals: helpers.c2dApply(xaArray, xvalArray),
 yvals: helpers.c2dApply(yaArray, yvalArray),
 // Note: top-level xPixel/yPixel correspond to the pixel position of the cursor.
 // Inside `points` array, points[i].xPixel/yPixel correspond to the pixel position of the point itself.
 xPixel: evt.pointerX,
 yPixel: evt.pointerY
 });
 }
}

function hoverDataKey(d) {
 return [d.trace.index, d.index, d.x0, d.y0, d.name, d.attr, d.xa ? d.xa._id : '', d.ya ? d.ya._id : ''].join(',');
}

var EXTRA_STRING_REGEX = /<extra>([\s\S]*)<\/extra>/;

function createHoverText(hoverData, opts) {
 var gd = opts.gd;
 var fullLayout = gd._fullLayout;
 var hovermode = opts.hovermode;
 var rotateLabels = opts.rotateLabels;
 var bgColor = opts.bgColor;
 var container = opts.container;
 var outerContainer = opts.outerContainer;
 var commonLabelOpts = opts.commonLabelOpts || {};
 // Early exit if no labels are drawn
 if (hoverData.length === 0) return [[]];

 // opts.fontFamily/Size are used for the common label
 // and as defaults for each hover label, though the individual labels
 // can override this.
 var fontFamily = opts.fontFamily || constants.HOVERFONT;
 var fontSize = opts.fontSize || constants.HOVERFONTSIZE;
 var fontWeight = opts.fontWeight || fullLayout.font.weight;
 var fontStyle = opts.fontStyle || fullLayout.font.style;
 var fontVariant = opts.fontVariant || fullLayout.font.variant;
 var fontTextcase = opts.fontTextcase || fullLayout.font.textcase;
 var fontLineposition = opts.fontLineposition || fullLayout.font.lineposition;
 var fontShadow = opts.fontShadow || fullLayout.font.shadow;

 var c0 = hoverData[0];
 var xa = c0.xa;
 var ya = c0.ya;
 var axLetter = hovermode.charAt(0);
 var axLabel = axLetter + 'Label';
 var t0 = c0[axLabel];

 // search in array for the label
 if (t0 === undefined && xa.type === 'multicategory') {
 for (var q = 0; q < hoverData.length; q++) {
 t0 = hoverData[q][axLabel];
 if (t0 !== undefined) break;
 }
 }

 var outerContainerBB = getBoundingClientRect(gd, outerContainer);
 var outerTop = outerContainerBB.top;
 var outerWidth = outerContainerBB.width;
 var outerHeight = outerContainerBB.height;

 // show the common label, if any, on the axis
 // never show a common label in array mode,
 // even if sometimes there could be one
 var showCommonLabel =
 t0 !== undefined && c0.distance <= opts.hoverdistance && (hovermode === 'x' || hovermode === 'y');

 // all hover traces hoverinfo must contain the hovermode
 // to have common labels
 if (showCommonLabel) {
 var allHaveZ = true;
 var i, traceHoverinfo;
 for (i = 0; i < hoverData.length; i++) {
 if (allHaveZ && hoverData[i].zLabel === undefined) allHaveZ = false;

 traceHoverinfo = hoverData[i].hoverinfo || hoverData[i].trace.hoverinfo;
 if (traceHoverinfo) {
 var parts = Array.isArray(traceHoverinfo) ? traceHoverinfo : traceHoverinfo.split('+');
 if (parts.indexOf('all') === -1 && parts.indexOf(hovermode) === -1) {
 showCommonLabel = false;
 break;
 }
 }
 }

 // xyz labels put all info in their main label, so have no need of a common label
 if (allHaveZ) showCommonLabel = false;
 }

 var commonLabel = container.selectAll('g.axistext').data(showCommonLabel ? [0] : []);
 commonLabel.enter().append('g').classed('axistext', true);
 commonLabel.exit().remove();

 // set rect (without arrow) behind label below for later collision detection
 var commonLabelRect = {
 minX: 0,
 maxX: 0,
 minY: 0,
 maxY: 0
 };
 commonLabel.each(function () {
 var label = d3.select(this);
 var lpath = Lib.ensureSingle(label, 'path', '', function (s) {
 s.style({ 'stroke-width': '1px' });
 });
 var ltext = Lib.ensureSingle(label, 'text', '', function (s) {
 // prohibit tex interpretation until we can handle
 // tex and regular text together
 s.attr('data-notex', 1);
 });

 var commonBgColor = commonLabelOpts.bgcolor || Color.defaultLine;
 var commonStroke = commonLabelOpts.bordercolor || Color.contrast(commonBgColor);
 var contrastColor = Color.contrast(commonBgColor);
 var commonLabelOptsFont = commonLabelOpts.font;
 var commonLabelFont = {
 weight: commonLabelOptsFont.weight || fontWeight,
 style: commonLabelOptsFont.style || fontStyle,
 variant: commonLabelOptsFont.variant || fontVariant,
 textcase: commonLabelOptsFont.textcase || fontTextcase,
 lineposition: commonLabelOptsFont.lineposition || fontLineposition,
 shadow: commonLabelOptsFont.shadow || fontShadow,
 family: commonLabelOptsFont.family || fontFamily,
 size: commonLabelOptsFont.size || fontSize,
 color: commonLabelOptsFont.color || contrastColor
 };

 lpath.style({
 fill: commonBgColor,
 stroke: commonStroke
 });

 ltext
 .text(t0)
 .call(Drawing.font, commonLabelFont)
 .call(svgTextUtils.positionText, 0, 0)
 .call(svgTextUtils.convertToTspans, gd);

 label.attr('transform', '');

 var tbb = getBoundingClientRect(gd, ltext.node());
 var lx, ly;

 if (hovermode === 'x') {
 var topsign = xa.side === 'top' ? '-' : '';

 ltext
 .attr('text-anchor', 'middle')
 .call(
 svgTextUtils.positionText,
 0,
 xa.side === 'top'
 ? outerTop - tbb.bottom - HOVERARROWSIZE - HOVERTEXTPAD
 : outerTop - tbb.top + HOVERARROWSIZE + HOVERTEXTPAD
 );

 lx = xa._offset + (c0.x0 + c0.x1) / 2;
 ly = ya._offset + (xa.side === 'top' ? 0 : ya._length);

 var halfWidth = tbb.width / 2 + HOVERTEXTPAD;

 var tooltipMidX = lx;
 if (lx < halfWidth) {
 tooltipMidX = halfWidth;
 } else if (lx > fullLayout.width - halfWidth) {
 tooltipMidX = fullLayout.width - halfWidth;
 }

 lpath.attr(
 'd',
 'M' +
 (lx - tooltipMidX) +
 ',0' +
 'L' +
 (lx - tooltipMidX + HOVERARROWSIZE) +
 ',' +
 topsign +
 HOVERARROWSIZE +
 'H' +
 halfWidth +
 'v' +
 topsign +
 (HOVERTEXTPAD * 2 + tbb.height) +
 'H' +
 -halfWidth +
 'V' +
 topsign +
 HOVERARROWSIZE +
 'H' +
 (lx - tooltipMidX - HOVERARROWSIZE) +
 'Z'
 );

 lx = tooltipMidX;
 commonLabelRect.minX = lx - halfWidth;
 commonLabelRect.maxX = lx + halfWidth;
 if (xa.side === 'top') {
 // label on negative y side
 commonLabelRect.minY = ly - (HOVERTEXTPAD * 2 + tbb.height);
 commonLabelRect.maxY = ly - HOVERTEXTPAD;
 } else {
 commonLabelRect.minY = ly + HOVERTEXTPAD;
 commonLabelRect.maxY = ly + (HOVERTEXTPAD * 2 + tbb.height);
 }
 } else {
 var anchor;
 var sgn;
 var leftsign;
 if (ya.side === 'right') {
 anchor = 'start';
 sgn = 1;
 leftsign = '';
 lx = xa._offset + xa._length;
 } else {
 anchor = 'end';
 sgn = -1;
 leftsign = '-';
 lx = xa._offset;
 }

 ly = ya._offset + (c0.y0 + c0.y1) / 2;

 ltext.attr('text-anchor', anchor);

 lpath.attr(
 'd',
 'M0,0' +
 'L' +
 leftsign +
 HOVERARROWSIZE +
 ',' +
 HOVERARROWSIZE +
 'V' +
 (HOVERTEXTPAD + tbb.height / 2) +
 'h' +
 leftsign +
 (HOVERTEXTPAD * 2 + tbb.width) +
 'V-' +
 (HOVERTEXTPAD + tbb.height / 2) +
 'H' +
 leftsign +
 HOVERARROWSIZE +
 'V-' +
 HOVERARROWSIZE +
 'Z'
 );

 commonLabelRect.minY = ly - (HOVERTEXTPAD + tbb.height / 2);
 commonLabelRect.maxY = ly + (HOVERTEXTPAD + tbb.height / 2);
 if (ya.side === 'right') {
 commonLabelRect.minX = lx + HOVERARROWSIZE;
 commonLabelRect.maxX = lx + HOVERARROWSIZE + (HOVERTEXTPAD * 2 + tbb.width);
 } else {
 // label on negative x side
 commonLabelRect.minX = lx - HOVERARROWSIZE - (HOVERTEXTPAD * 2 + tbb.width);
 commonLabelRect.maxX = lx - HOVERARROWSIZE;
 }

 var halfHeight = tbb.height / 2;
 var lty = outerTop - tbb.top - halfHeight;
 var clipId = 'clip' + fullLayout._uid + 'commonlabel' + ya._id;
 var clipPath;

 if (lx < tbb.width + 2 * HOVERTEXTPAD + HOVERARROWSIZE) {
 clipPath =
 'M-' +
 (HOVERARROWSIZE + HOVERTEXTPAD) +
 '-' +
 halfHeight +
 'h-' +
 (tbb.width - HOVERTEXTPAD) +
 'V' +
 halfHeight +
 'h' +
 (tbb.width - HOVERTEXTPAD) +
 'Z';

 var ltx = tbb.width - lx + HOVERTEXTPAD;
 svgTextUtils.positionText(ltext, ltx, lty);

 // shift each line (except the longest) so that start-of-line
 // is always visible
 if (anchor === 'end') {
 ltext.selectAll('tspan').each(function () {
 var s = d3.select(this);
 var dummy = Drawing.tester.append('text').text(s.text()).call(Drawing.font, commonLabelFont);
 var dummyBB = getBoundingClientRect(gd, dummy.node());
 if (Math.round(dummyBB.width) < Math.round(tbb.width)) {
 s.attr('x', ltx - dummyBB.width);
 }
 dummy.remove();
 });
 }
 } else {
 svgTextUtils.positionText(ltext, sgn * (HOVERTEXTPAD + HOVERARROWSIZE), lty);
 clipPath = null;
 }

 var textClip = fullLayout._topclips.selectAll('#' + clipId).data(clipPath ? [0] : []);
 textClip.enter().append('clipPath').attr('id', clipId).append('path');
 textClip.exit().remove();
 textClip.select('path').attr('d', clipPath);
 Drawing.setClipUrl(ltext, clipPath ? clipId : null, gd);
 }

 label.attr('transform', strTranslate(lx, ly));
 });

 // Show a single hover label
 if (helpers.isUnifiedHover(hovermode)) {
 // Delete leftover hover labels from other hovermodes
 container.selectAll('g.hovertext').remove();
 const groupedHoverData = hoverData.filter((data) => data.hoverinfo !== 'none');
 // Return early if nothing is hovered on
 if (groupedHoverData.length === 0) return [];

 // mock legend
 var hoverlabel = fullLayout.hoverlabel;
 var font = hoverlabel.font;

 var item0 = groupedHoverData[0];

 var unifiedhovertitleText = ((hovermode === 'x unified' ? item0.xa : item0.ya).unifiedhovertitle || {}).text;

 var mainText = !unifiedhovertitleText
 ? t0
 : Lib.hovertemplateString({
 data:
 hovermode === 'x unified' ? [{ xa: item0.xa, x: item0.xVal }] : [{ ya: item0.ya, y: item0.yVal }],
 fallback: item0.trace.hovertemplatefallback,
 locale: fullLayout._d3locale,
 template: unifiedhovertitleText
 });

 var mockLayoutIn = {
 showlegend: true,
 legend: {
 title: { text: mainText, font: font },
 font: font,
 bgcolor: hoverlabel.bgcolor,
 bordercolor: hoverlabel.bordercolor,
 borderwidth: 1,
 tracegroupgap: 7,
 traceorder: fullLayout.legend ? fullLayout.legend.traceorder : undefined,
 orientation: 'v'
 }
 };
 var mockLayoutOut = {
 font: font
 };
 legendSupplyDefaults(mockLayoutIn, mockLayoutOut, gd._fullData);
 var mockLegend = mockLayoutOut.legend;

 // prepare items for the legend
 mockLegend.entries = [];
 for (var j = 0; j < groupedHoverData.length; j++) {
 var pt = groupedHoverData[j];
 if (pt.hoverinfo === 'none') continue;

 var texts = getHoverLabelText(pt, true, hovermode, fullLayout, t0);
 var text = texts[0];
 var name = texts[1];

 pt.name = name;
 if (name !== '') {
 pt.text = name + ' : ' + text;
 } else {
 pt.text = text;
 }

 // pass through marker's calcdata to style legend items
 var cd = pt.cd[pt.index];
 if (cd) {
 if (cd.mc) pt.mc = cd.mc;
 if (cd.mcc) pt.mc = cd.mcc;
 if (cd.mlc) pt.mlc = cd.mlc;
 if (cd.mlcc) pt.mlc = cd.mlcc;
 if (cd.mlw) pt.mlw = cd.mlw;
 if (cd.mrc) pt.mrc = cd.mrc;
 if (cd.dir) pt.dir = cd.dir;
 }
 pt._distinct = true;

 mockLegend.entries.push([pt]);
 }
 mockLegend.entries.sort(function (a, b) {
 var hoversort = fullLayout.hoversort;
 if (hoversort === 'value descending' || hoversort === 'value ascending') {
 var valueLetter = hovermode.charAt(0) === 'x' ? 'y' : 'x';
 var aVal = a[0][valueLetter + 'LabelVal'];
 var bVal = b[0][valueLetter + 'LabelVal'];
 if (aVal !== bVal) {
 return hoversort === 'value descending' ? bVal - aVal : aVal - bVal;
 }
 }
 return a[0].trace.index - b[0].trace.index;
 });
 mockLegend.layer = container;

 // Draw unified hover label
 mockLegend._inHover = true;
 mockLegend._groupTitleFont = hoverlabel.grouptitlefont;

 legendDraw(gd, mockLegend);

 // Position the hover
 var legendContainer = container.select('g.legend');
 var tbb = getBoundingClientRect(gd, legendContainer.node());
 var tWidth = tbb.width + 2 * HOVERTEXTPAD;
 var tHeight = tbb.height + 2 * HOVERTEXTPAD;
 var winningPoint = groupedHoverData[0];
 var avgX = (winningPoint.x0 + winningPoint.x1) / 2;
 var avgY = (winningPoint.y0 + winningPoint.y1) / 2;
 // When a scatter (or e.g. heatmap) point wins, it's OK for the hovelabel to occlude the bar and other points.
 var pointWon = !(
 Registry.traceIs(winningPoint.trace, 'bar-like') || Registry.traceIs(winningPoint.trace, 'box-violin')
 );

 var lyBottom, lyTop;
 if (axLetter === 'y') {
 if (pointWon) {
 lyTop = avgY - HOVERTEXTPAD;
 lyBottom = avgY + HOVERTEXTPAD;
 } else {
 lyTop = Math.min.apply(
 null,
 groupedHoverData.map(function (c) {
 return Math.min(c.y0, c.y1);
 })
 );
 lyBottom = Math.max.apply(
 null,
 groupedHoverData.map(function (c) {
 return Math.max(c.y0, c.y1);
 })
 );
 }
 } else {
 lyTop = lyBottom =
 Lib.mean(
 groupedHoverData.map(function (c) {
 return (c.y0 + c.y1) / 2;
 })
 ) -
 tHeight / 2;
 }

 var lxRight, lxLeft;
 if (axLetter === 'x') {
 if (pointWon) {
 lxRight = avgX + HOVERTEXTPAD;
 lxLeft = avgX - HOVERTEXTPAD;
 } else {
 lxRight = Math.max.apply(
 null,
 groupedHoverData.map(function (c) {
 return Math.max(c.x0, c.x1);
 })
 );
 lxLeft = Math.min.apply(
 null,
 groupedHoverData.map(function (c) {
 return Math.min(c.x0, c.x1);
 })
 );
 }
 } else {
 lxRight = lxLeft =
 Lib.mean(
 groupedHoverData.map(function (c) {
 return (c.x0 + c.x1) / 2;
 })
 ) -
 tWidth / 2;
 }

 var xOffset = xa._offset;
 var yOffset = ya._offset;
 lyBottom += yOffset;
 lxRight += xOffset;
 lxLeft += xOffset - tWidth;
 lyTop += yOffset - tHeight;

 var lx, ly; // top and left positions of the hover box

 // horizontal alignment to end up on screen
 if (lxRight + tWidth < outerWidth && lxRight >= 0) {
 lx = lxRight;
 } else if (lxLeft + tWidth < outerWidth && lxLeft >= 0) {
 lx = lxLeft;
 } else if (xOffset + tWidth < outerWidth) {
 lx = xOffset; // subplot left corner
 } else {
 // closest left or right side of the paper
 if (lxRight - avgX < avgX - lxLeft + tWidth) {
 lx = outerWidth - tWidth;
 } else {
 lx = 0;
 }
 }
 lx += HOVERTEXTPAD;

 // vertical alignement to end up on screen
 if (lyBottom + tHeight < outerHeight && lyBottom >= 0) {
 ly = lyBottom;
 } else if (lyTop + tHeight < outerHeight && lyTop >= 0) {
 ly = lyTop;
 } else if (yOffset + tHeight < outerHeight) {
 ly = yOffset; // subplot top corner
 } else {
 // closest top or bottom side of the paper
 if (lyBottom - avgY < avgY - lyTop + tHeight) {
 ly = outerHeight - tHeight;
 } else {
 ly = 0;
 }
 }
 ly += HOVERTEXTPAD;

 legendContainer.attr('transform', strTranslate(lx - 1, ly - 1));
 return legendContainer;
 }

 // show all the individual labels

 // first create the objects
 var hoverLabels = container.selectAll('g.hovertext').data(hoverData, function (d) {
 // N.B. when multiple items have the same result key-function value,
 // only the first of those items in hoverData gets rendered
 return hoverDataKey(d);
 });
 hoverLabels
 .enter()
 .append('g')
 .classed('hovertext', true)
 .each(function () {
 var g = d3.select(this);
 // trace name label (rect and text.name)
 g.append('rect').call(Color.fill, Color.addOpacity(bgColor, 0.8));
 g.append('text').classed('name', true);
 // trace data label (path and text.nums)
 g.append('path').style('stroke-width', '1px');
 g.append('text').classed('nums', true).call(Drawing.font, {
 weight: fontWeight,
 style: fontStyle,
 variant: fontVariant,
 textcase: fontTextcase,
 lineposition: fontLineposition,
 shadow: fontShadow,
 family: fontFamily,
 size: fontSize
 });
 });
 hoverLabels.exit().remove();

 // then put the text in, position the pointer to the data,
 // and figure out sizes
 hoverLabels.each(function (d) {
 var g = d3.select(this).attr('transform', '');

 var dColor = d.color;
 if (Array.isArray(dColor)) {
 dColor = dColor[d.eventData[0].pointNumber];
 }

 // combine possible non-opaque trace color with bgColor
 var color0 = d.bgcolor || dColor;
 // color for 'nums' part of the label
 var numsColor = Color.combine(Color.opacity(color0) ? color0 : Color.defaultLine, bgColor);
 // color for 'name' part of the label
 var nameColor = Color.combine(Color.opacity(dColor) ? dColor : Color.defaultLine, bgColor);
 // find a contrasting color for border and text
 var contrastColor = d.borderColor || Color.contrast(numsColor);

 var texts = getHoverLabelText(d, showCommonLabel, hovermode, fullLayout, t0, g);
 var text = texts[0];
 var name = texts[1];

 // main label
 var tx = g
 .select('text.nums')
 .call(Drawing.font, {
 family: d.fontFamily || fontFamily,
 size: d.fontSize || fontSize,
 color: d.fontColor || contrastColor,
 weight: d.fontWeight || fontWeight,
 style: d.fontStyle || fontStyle,
 variant: d.fontVariant || fontVariant,
 textcase: d.fontTextcase || fontTextcase,
 lineposition: d.fontLineposition || fontLineposition,
 shadow: d.fontShadow || fontShadow
 })
 .text(text)
 .attr('data-notex', 1)
 .call(svgTextUtils.positionText, 0, 0)
 .call(svgTextUtils.convertToTspans, gd);

 var tx2 = g.select('text.name');
 var tx2width = 0;
 var tx2height = 0;

 // secondary label for non-empty 'name'
 if (name && name !== text) {
 tx2.call(Drawing.font, {
 family: d.fontFamily || fontFamily,
 size: d.fontSize || fontSize,
 color: nameColor,
 weight: d.fontWeight || fontWeight,
 style: d.fontStyle || fontStyle,
 variant: d.fontVariant || fontVariant,
 textcase: d.fontTextcase || fontTextcase,
 lineposition: d.fontLineposition || fontLineposition,
 shadow: d.fontShadow || fontShadow
 })
 .text(name)
 .attr('data-notex', 1)
 .call(svgTextUtils.positionText, 0, 0)
 .call(svgTextUtils.convertToTspans, gd);

 var t2bb = getBoundingClientRect(gd, tx2.node());
 tx2width = t2bb.width + 2 * HOVERTEXTPAD;
 tx2height = t2bb.height + 2 * HOVERTEXTPAD;
 } else {
 tx2.remove();
 g.select('rect').remove();
 }

 g.select('path').style({
 fill: numsColor,
 stroke: contrastColor
 });

 var htx = d.xa._offset + (d.x0 + d.x1) / 2;
 var hty = d.ya._offset + (d.y0 + d.y1) / 2;
 var dx = Math.abs(d.x1 - d.x0);
 var dy = Math.abs(d.y1 - d.y0);

 var tbb = getBoundingClientRect(gd, tx.node());
 var tbbWidth = tbb.width / fullLayout._invScaleX;
 var tbbHeight = tbb.height / fullLayout._invScaleY;

 d.ty0 = (outerTop - tbb.top) / fullLayout._invScaleY;
 d.bx = tbbWidth + 2 * HOVERTEXTPAD;
 d.by = Math.max(tbbHeight + 2 * HOVERTEXTPAD, tx2height);
 d.anchor = 'start';
 d.txwidth = tbbWidth;
 d.tx2width = tx2width;
 d.offset = 0;

 var txTotalWidth = (tbbWidth + HOVERARROWSIZE + HOVERTEXTPAD + tx2width) * fullLayout._invScaleX;
 var anchorStartOK, anchorEndOK;

 if (rotateLabels) {
 d.pos = htx;
 anchorStartOK = hty + dy / 2 + txTotalWidth <= outerHeight;
 anchorEndOK = hty - dy / 2 - txTotalWidth >= 0;
 if ((d.idealAlign === 'top' || !anchorStartOK) && anchorEndOK) {
 hty -= dy / 2;
 d.anchor = 'end';
 } else if (anchorStartOK) {
 hty += dy / 2;
 d.anchor = 'start';
 } else {
 d.anchor = 'middle';
 }
 d.crossPos = hty;
 } else {
 d.pos = hty;
 anchorStartOK = htx + dx / 2 + txTotalWidth <= outerWidth;
 anchorEndOK = htx - dx / 2 - txTotalWidth >= 0;

 if ((d.idealAlign === 'left' || !anchorStartOK) && anchorEndOK) {
 htx -= dx / 2;
 d.anchor = 'end';
 } else if (anchorStartOK) {
 htx += dx / 2;
 d.anchor = 'start';
 } else {
 d.anchor = 'middle';

 var txHalfWidth = txTotalWidth / 2;
 var overflowR = htx + txHalfWidth - outerWidth;
 var overflowL = htx - txHalfWidth;
 if (overflowR > 0) htx -= overflowR;
 if (overflowL < 0) htx += -overflowL;
 }
 d.crossPos = htx;
 }

 tx.attr('text-anchor', d.anchor);
 if (tx2width) tx2.attr('text-anchor', d.anchor);
 g.attr('transform', strTranslate(htx, hty) + (rotateLabels ? strRotate(YANGLE) : ''));
 });

 return {
 hoverLabels: hoverLabels,
 commonLabelBoundingBox: commonLabelRect
 };
}

function getHoverLabelText(d, showCommonLabel, hovermode, fullLayout, t0, g) {
 var name = '';
 var text = '';
 // to get custom 'name' labels pass cleanPoint
 if (d.nameOverride !== undefined) d.name = d.nameOverride;

 if (d.name) {
 if (d.trace._meta) d.name = Lib.templateString(d.name, d.trace._meta);
 name = plainText(d.name, d.nameLength);
 }

 var h0 = hovermode.charAt(0);
 var h1 = h0 === 'x' ? 'y' : 'x';

 if (d.zLabel !== undefined) {
 if (d.xLabel !== undefined) text += 'x: ' + d.xLabel + '<br>';
 if (d.yLabel !== undefined) text += 'y: ' + d.yLabel + '<br>';
 if (d.trace.type !== 'choropleth' && d.trace.type !== 'choroplethmap') {
 text += (text ? 'z: ' : '') + d.zLabel;
 }
 } else if (showCommonLabel && d[h0 + 'Label'] === t0) {
 text = d[h1 + 'Label'] || '';
 } else if (d.xLabel === undefined) {
 if (d.yLabel !== undefined && d.trace.type !== 'scattercarpet') {
 text = d.yLabel;
 }
 } else if (d.yLabel === undefined) text = d.xLabel;
 else text = '(' + d.xLabel + ', ' + d.yLabel + ')';

 if ((d.text || d.text === 0) && !Array.isArray(d.text)) {
 text += (text ? '<br>' : '') + d.text;
 }

 // used by other modules (initially just ternary) that
 // manage their own hoverinfo independent of cleanPoint
 // the rest of this will still apply, so such modules
 // can still put things in (x|y|z)Label, text, and name
 // and hoverinfo will still determine their visibility
 if (d.extraText !== undefined) text += (text ? '<br>' : '') + d.extraText;

 // if 'text' is empty at this point,
 // and hovertemplate is not defined,
 // put 'name' in main label and don't show secondary label
 if (g && text === '' && !d.hovertemplate) {
 // if 'name' is also empty, remove entire label
 if (name === '') g.remove();
 text = name;
 }

 // Ignore hovertemplate if hoverlabel.split is set
 // This ensures correct behavior of hoverlabel.split for candlestick and OHLC traces
 // Not very elegant but it works
 if (d.trace?.hoverlabel?.split) d.hovertemplate = '';

 const { hovertemplate = false } = d;
 if (hovertemplate) {
 const labels = d.hovertemplateLabels || d;

 if (d[h0 + 'Label'] !== t0) {
 labels[h0 + 'other'] = labels[h0 + 'Val'];
 labels[h0 + 'otherLabel'] = labels[h0 + 'Label'];
 }

 text = Lib.hovertemplateString({
 data: [d.eventData[0] || {}, d.trace._meta],
 fallback: d.trace.hovertemplatefallback,
 labels,
 locale: fullLayout._d3locale,
 template: hovertemplate
 });

 text = text.replace(EXTRA_STRING_REGEX, (_, extra) => {
 // assign name for secondary text label
 name = plainText(extra, d.nameLength);
 // remove from main text label
 return '';
 });
 }
 return [text, name];
}

// Make groups of touching points, and within each group
// move each point so that no labels overlap, but the average
// label position is the same as it was before moving. Incidentally,
// this is equivalent to saying all the labels are on equal linear
// springs about their initial position. Initially, each point is
// its own group, but as we find overlaps we will clump the points.
//
// Also, there are hard constraints at the edges of the graphs,
// that push all groups to the middle so they are visible. I don't
// know what happens if the group spans all the way from one edge to
// the other, though it hardly matters - there's just too much
// information then.
function hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, commonLabelBoundingBox) {
 var axKey = rotateLabels ? 'xa' : 'ya';
 var crossAxKey = rotateLabels ? 'ya' : 'xa';
 var nummoves = 0;
 var axSign = 1;
 var nLabels = hoverLabels.size();

 // make groups of touching points
 var pointgroups = new Array(nLabels);
 var k = 0;

 // get extent of axis hover label
 var axisLabelMinX = commonLabelBoundingBox.minX;
 var axisLabelMaxX = commonLabelBoundingBox.maxX;
 var axisLabelMinY = commonLabelBoundingBox.minY;
 var axisLabelMaxY = commonLabelBoundingBox.maxY;

 var pX = function (x) {
 return x * fullLayout._invScaleX;
 };
 var pY = function (y) {
 return y * fullLayout._invScaleY;
 };

 hoverLabels.each(function (d) {
 var ax = d[axKey];
 var crossAx = d[crossAxKey];
 var axIsX = ax._id.charAt(0) === 'x';
 var rng = ax.range;

 if (k === 0 && rng && rng[0] > rng[1] !== axIsX) {
 axSign = -1;
 }
 var pmin = 0;
 var pmax = axIsX ? fullLayout.width : fullLayout.height;
 // in hovermode avoid overlap between hover labels and axis label
 if (fullLayout.hovermode === 'x' || fullLayout.hovermode === 'y') {
 // extent of rect behind hover label on cross axis:
 var offsets = getHoverLabelOffsets(d, rotateLabels);
 var anchor = d.anchor;
 var horzSign = anchor === 'end' ? -1 : 1;
 var labelMin;
 var labelMax;
 if (anchor === 'middle') {
 // use extent of centered rect either on x or y axis depending on current axis
 labelMin = d.crossPos + (axIsX ? pY(offsets.y - d.by / 2) : pX(d.bx / 2 + d.tx2width / 2));
 labelMax = labelMin + (axIsX ? pY(d.by) : pX(d.bx));
 } else {
 // use extend of path (see alignHoverText function) without arrow
 if (axIsX) {
 labelMin = d.crossPos + pY(HOVERARROWSIZE + offsets.y) - pY(d.by / 2 - HOVERARROWSIZE);
 labelMax = labelMin + pY(d.by);
 } else {
 var startX = pX(horzSign * HOVERARROWSIZE + offsets.x);
 var endX = startX + pX(horzSign * d.bx);
 labelMin = d.crossPos + Math.min(startX, endX);
 labelMax = d.crossPos + Math.max(startX, endX);
 }
 }

 if (axIsX) {
 if (
 axisLabelMinY !== undefined &&
 axisLabelMaxY !== undefined &&
 Math.min(labelMax, axisLabelMaxY) - Math.max(labelMin, axisLabelMinY) > 1
 ) {
 // has at least 1 pixel overlap with axis label
 if (crossAx.side === 'left') {
 pmin = crossAx._mainLinePosition;
 pmax = fullLayout.width;
 } else {
 pmax = crossAx._mainLinePosition;
 }
 }
 } else {
 if (
 axisLabelMinX !== undefined &&
 axisLabelMaxX !== undefined &&
 Math.min(labelMax, axisLabelMaxX) - Math.max(labelMin, axisLabelMinX) > 1
 ) {
 // has at least 1 pixel overlap with axis label
 if (crossAx.side === 'top') {
 pmin = crossAx._mainLinePosition;
 pmax = fullLayout.height;
 } else {
 pmax = crossAx._mainLinePosition;
 }
 }
 }
 }

 pointgroups[k++] = [
 {
 datum: d,
 traceIndex: d.trace.index,
 dp: 0,
 pos: d.pos,
 posref: d.posref,
 size: (d.by * (axIsX ? YFACTOR : 1)) / 2,
 pmin: pmin,
 pmax: pmax
 }
 ];
 });

 pointgroups.sort(function (a, b) {
 return (
 a[0].posref - b[0].posref ||
 // for equal positions, sort trace indices increasing or decreasing
 // depending on whether the axis is reversed or not... so stacked
 // traces will generally keep their order even if one trace adds
 // nothing to the stack.
 axSign * (b[0].traceIndex - a[0].traceIndex)
 );
 });

 var donepositioning, topOverlap, bottomOverlap, i, j, pti, sumdp;

 function constrainGroup(grp) {
 var minPt = grp[0];
 var maxPt = grp[grp.length - 1];

 // overlap with the top - positive vals are overlaps
 topOverlap = minPt.pmin - minPt.pos - minPt.dp + minPt.size;

 // overlap with the bottom - positive vals are overlaps
 bottomOverlap = maxPt.pos + maxPt.dp + maxPt.size - minPt.pmax;

 // check for min overlap first, so that we always
 // see the largest labels
 // allow for .01px overlap, so we don't get an
 // infinite loop from rounding errors
 if (topOverlap > 0.01) {
 for (j = grp.length - 1; j >= 0; j--) grp[j].dp += topOverlap;
 donepositioning = false;
 }
 if (bottomOverlap < 0.01) return;
 if (topOverlap < -0.01) {
 // make sure we're not pushing back and forth
 for (j = grp.length - 1; j >= 0; j--) grp[j].dp -= bottomOverlap;
 donepositioning = false;
 }
 if (!donepositioning) return;

 // no room to fix positioning, delete off-screen points

 // first see how many points we need to delete
 var deleteCount = 0;
 for (i = 0; i < grp.length; i++) {
 pti = grp[i];
 if (pti.pos + pti.dp + pti.size > minPt.pmax) deleteCount++;
 }

 // start by deleting points whose data is off screen
 for (i = grp.length - 1; i >= 0; i--) {
 if (deleteCount <= 0) break;
 pti = grp[i];

 // pos has already been constrained to [pmin,pmax]
 // so look for points close to that to delete
 if (pti.pos > minPt.pmax - 1) {
 pti.del = true;
 deleteCount--;
 }
 }
 for (i = 0; i < grp.length; i++) {
 if (deleteCount <= 0) break;
 pti = grp[i];

 // pos has already been constrained to [pmin,pmax]
 // so look for points close to that to delete
 if (pti.pos < minPt.pmin + 1) {
 pti.del = true;
 deleteCount--;

 // shift the whole group minus into this new space
 bottomOverlap = pti.size * 2;
 for (j = grp.length - 1; j >= 0; j--) grp[j].dp -= bottomOverlap;
 }
 }
 // then delete points that go off the bottom
 for (i = grp.length - 1; i >= 0; i--) {
 if (deleteCount <= 0) break;
 pti = grp[i];
 if (pti.pos + pti.dp + pti.size > minPt.pmax) {
 pti.del = true;
 deleteCount--;
 }
 }
 }

 // loop through groups, combining them if they overlap,
 // until nothing moves
 while (!donepositioning && nummoves <= nLabels) {
 // to avoid infinite loops, don't move more times
 // than there are traces
 nummoves++;

 // assume nothing will move in this iteration,
 // reverse this if it does
 donepositioning = true;
 i = 0;
 while (i < pointgroups.length - 1) {
 // the higher (g0) and lower (g1) point group
 var g0 = pointgroups[i];
 var g1 = pointgroups[i + 1];

 // the lowest point in the higher group (p0)
 // the highest point in the lower group (p1)
 var p0 = g0[g0.length - 1];
 var p1 = g1[0];
 topOverlap = p0.pos + p0.dp + p0.size - p1.pos - p1.dp + p1.size;

 if (topOverlap > 0.01) {
 // push the new point(s) added to this group out of the way
 for (j = g1.length - 1; j >= 0; j--) g1[j].dp += topOverlap;

 // add them to the group
 g0.push.apply(g0, g1);
 pointgroups.splice(i + 1, 1);

 // adjust for minimum average movement
 sumdp = 0;
 for (j = g0.length - 1; j >= 0; j--) sumdp += g0[j].dp;
 bottomOverlap = sumdp / g0.length;
 for (j = g0.length - 1; j >= 0; j--) g0[j].dp -= bottomOverlap;
 donepositioning = false;
 } else i++;
 }

 // check if we're going off the plot on either side and fix
 pointgroups.forEach(constrainGroup);
 }

 // now put these offsets into hoverData
 for (i = pointgroups.length - 1; i >= 0; i--) {
 var grp = pointgroups[i];
 for (j = grp.length - 1; j >= 0; j--) {
 var pt = grp[j];
 var hoverPt = pt.datum;
 hoverPt.offset = pt.dp;
 hoverPt.del = pt.del;
 }
 }
}

function getHoverLabelOffsets(hoverLabel, rotateLabels) {
 var offsetX = 0;
 var offsetY = hoverLabel.offset;

 if (rotateLabels) {
 offsetY *= -YSHIFTY;
 offsetX = hoverLabel.offset * YSHIFTX;
 }

 return {
 x: offsetX,
 y: offsetY
 };
}

/**
 * Calculate the shift in x for text and text2 elements
 */
function getTextShiftX(hoverLabel) {
 var alignShift = { start: 1, end: -1, middle: 0 }[hoverLabel.anchor];
 var textShiftX = alignShift * (HOVERARROWSIZE + HOVERTEXTPAD);
 var text2ShiftX = textShiftX + alignShift * (hoverLabel.txwidth + HOVERTEXTPAD);

 var isMiddle = hoverLabel.anchor === 'middle';
 if (isMiddle) {
 textShiftX -= hoverLabel.tx2width / 2;
 text2ShiftX += hoverLabel.txwidth / 2 + HOVERTEXTPAD;
 }

 return {
 alignShift: alignShift,
 textShiftX: textShiftX,
 text2ShiftX: text2ShiftX
 };
}

function alignHoverText(hoverLabels, rotateLabels, scaleX, scaleY) {
 var pX = function (x) {
 return x * scaleX;
 };
 var pY = function (y) {
 return y * scaleY;
 };

 // finally set the text positioning relative to the data and draw the
 // box around it
 hoverLabels.each(function (d) {
 var g = d3.select(this);
 if (d.del) return g.remove();

 var tx = g.select('text.nums');
 var anchor = d.anchor;
 var horzSign = anchor === 'end' ? -1 : 1;
 var shiftX = getTextShiftX(d);
 var offsets = getHoverLabelOffsets(d, rotateLabels);
 var offsetX = offsets.x;
 var offsetY = offsets.y;

 var isMiddle = anchor === 'middle';
 // Get 'showarrow' attribute value from trace hoverlabel settings;
 // if trace has no hoverlabel settings, we should show the arrow by default
 var showArrow = 'hoverlabel' in d.trace ? d.trace.hoverlabel.showarrow : true;

 var pathStr;
 if (isMiddle) {
 // middle aligned: rect centered on data
 pathStr =
 'M-' +
 pX(d.bx / 2 + d.tx2width / 2) +
 ',' +
 pY(offsetY - d.by / 2) +
 'h' +
 pX(d.bx) +
 'v' +
 pY(d.by) +
 'h-' +
 pX(d.bx) +
 'Z';
 } else if (showArrow) {
 // left or right aligned: side rect with arrow to data
 pathStr =
 'M0,0L' +
 pX(horzSign * HOVERARROWSIZE + offsetX) +
 ',' +
 pY(HOVERARROWSIZE + offsetY) +
 'v' +
 pY(d.by / 2 - HOVERARROWSIZE) +
 'h' +
 pX(horzSign * d.bx) +
 'v-' +
 pY(d.by) +
 'H' +
 pX(horzSign * HOVERARROWSIZE + offsetX) +
 'V' +
 pY(offsetY - HOVERARROWSIZE) +
 'Z';
 } else {
 // left or right aligned: side rect without arrow
 pathStr =
 'M' +
 pX(horzSign * HOVERARROWSIZE + offsetX) +
 ',' +
 pY(offsetY - d.by / 2) +
 'h' +
 pX(horzSign * d.bx) +
 'v' +
 pY(d.by) +
 'h' +
 pX(-horzSign * d.bx) +
 'Z';
 }
 g.select('path').attr('d', pathStr);

 var posX = offsetX + shiftX.textShiftX;
 var posY = offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD;
 var textAlign = d.textAlign || 'auto';

 if (textAlign !== 'auto') {
 if (textAlign === 'left' && anchor !== 'start') {
 tx.attr('text-anchor', 'start');
 posX = isMiddle ? -d.bx / 2 - d.tx2width / 2 + HOVERTEXTPAD : -d.bx - HOVERTEXTPAD;
 } else if (textAlign === 'right' && anchor !== 'end') {
 tx.attr('text-anchor', 'end');
 posX = isMiddle ? d.bx / 2 - d.tx2width / 2 - HOVERTEXTPAD : d.bx + HOVERTEXTPAD;
 }
 }

 tx.call(svgTextUtils.positionText, pX(posX), pY(posY));

 if (d.tx2width) {
 g.select('text.name').call(
 svgTextUtils.positionText,
 pX(shiftX.text2ShiftX + shiftX.alignShift * HOVERTEXTPAD + offsetX),
 pY(offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD)
 );
 g.select('rect').call(
 Drawing.setRect,
 pX(shiftX.text2ShiftX + ((shiftX.alignShift - 1) * d.tx2width) / 2 + offsetX),
 pY(offsetY - d.by / 2 - 1),
 pX(d.tx2width),
 pY(d.by + 2)
 );
 }
 });
}

function cleanPoint(d, hovermode) {
 var index = d.index;
 var trace = d.trace || {};
 var cd0 = d.cd[0];
 var cd = d.cd[index] || {};

 function pass(v) {
 return v || (isNumeric(v) && v === 0);
 }

 var getVal = Array.isArray(index)
 ? function (calcKey, traceKey) {
 var v = Lib.castOption(cd0, index, calcKey);
 return pass(v) ? v : Lib.extractOption({}, trace, '', traceKey);
 }
 : function (calcKey, traceKey) {
 return Lib.extractOption(cd, trace, calcKey, traceKey);
 };

 function fill(key, calcKey, traceKey) {
 var val = getVal(calcKey, traceKey);
 if (pass(val)) d[key] = val;
 }

 fill('hoverinfo', 'hi', 'hoverinfo');
 fill('bgcolor', 'hbg', 'hoverlabel.bgcolor');
 fill('borderColor', 'hbc', 'hoverlabel.bordercolor');
 fill('fontFamily', 'htf', 'hoverlabel.font.family');
 fill('fontSize', 'hts', 'hoverlabel.font.size');
 fill('fontColor', 'htc', 'hoverlabel.font.color');
 fill('fontWeight', 'htw', 'hoverlabel.font.weight');
 fill('fontStyle', 'hty', 'hoverlabel.font.style');
 fill('fontVariant', 'htv', 'hoverlabel.font.variant');
 fill('nameLength', 'hnl', 'hoverlabel.namelength');
 fill('textAlign', 'hta', 'hoverlabel.align');

 d.posref =
 hovermode === 'y' || (hovermode === 'closest' && trace.orientation === 'h')
 ? d.xa._offset + (d.x0 + d.x1) / 2
 : d.ya._offset + (d.y0 + d.y1) / 2;

 // then constrain all the positions to be on the plot
 d.x0 = Lib.constrain(d.x0, 0, d.xa._length);
 d.x1 = Lib.constrain(d.x1, 0, d.xa._length);
 d.y0 = Lib.constrain(d.y0, 0, d.ya._length);
 d.y1 = Lib.constrain(d.y1, 0, d.ya._length);

 // and convert the x and y label values into formatted text
 if (d.xLabelVal !== undefined) {
 d.xLabel = 'xLabel' in d ? d.xLabel : Axes.hoverLabelText(d.xa, d.xLabelVal, trace.xhoverformat);
 d.xVal = d.xa.c2d(d.xLabelVal);
 }
 if (d.yLabelVal !== undefined) {
 d.yLabel = 'yLabel' in d ? d.yLabel : Axes.hoverLabelText(d.ya, d.yLabelVal, trace.yhoverformat);
 d.yVal = d.ya.c2d(d.yLabelVal);
 }

 // Traces like heatmaps generate the zLabel in their hoverPoints function
 if (d.zLabelVal !== undefined && d.zLabel === undefined) {
 d.zLabel = String(d.zLabelVal);
 }

 // for box means and error bars, add the range to the label
 if (!isNaN(d.xerr) && !(d.xa.type === 'log' && d.xerr <= 0)) {
 var xeText = Axes.tickText(d.xa, d.xa.c2l(d.xerr), 'hover').text;
 if (d.xerrneg !== undefined) {
 d.xLabel += ' +' + xeText + ' / -' + Axes.tickText(d.xa, d.xa.c2l(d.xerrneg), 'hover').text;
 } else d.xLabel += ' ± ' + xeText;

 // small distance penalty for error bars, so that if there are
 // traces with errors and some without, the error bar label will
 // hoist up to the point
 if (hovermode === 'x') d.distance += 1;
 }
 if (!isNaN(d.yerr) && !(d.ya.type === 'log' && d.yerr <= 0)) {
 var yeText = Axes.tickText(d.ya, d.ya.c2l(d.yerr), 'hover').text;
 if (d.yerrneg !== undefined) {
 d.yLabel += ' +' + yeText + ' / -' + Axes.tickText(d.ya, d.ya.c2l(d.yerrneg), 'hover').text;
 } else d.yLabel += ' ± ' + yeText;

 if (hovermode === 'y') d.distance += 1;
 }

 var infomode = d.hoverinfo || d.trace.hoverinfo;

 if (infomode && infomode !== 'all') {
 infomode = Array.isArray(infomode) ? infomode : infomode.split('+');
 if (infomode.indexOf('x') === -1) d.xLabel = undefined;
 if (infomode.indexOf('y') === -1) d.yLabel = undefined;
 if (infomode.indexOf('z') === -1) d.zLabel = undefined;
 if (infomode.indexOf('text') === -1) d.text = undefined;
 if (infomode.indexOf('name') === -1) d.name = undefined;
 }

 return d;
}

function createSpikelines(gd, closestPoints, opts) {
 var container = opts.container;
 var fullLayout = opts.fullLayout;
 var gs = fullLayout._size;
 var evt = opts.event;
 var showY = !!closestPoints.hLinePoint;
 var showX = !!closestPoints.vLinePoint;

 var xa, ya;

 // Remove old spikeline items
 container.selectAll('.spikeline').remove();

 if (!(showX || showY)) return;

 var contrastColor = Color.combine(fullLayout.plot_bgcolor, fullLayout.paper_bgcolor);

 // Horizontal line (to y-axis)
 if (showY) {
 var hLinePoint = closestPoints.hLinePoint;
 var hLinePointX, hLinePointY;

 xa = hLinePoint && hLinePoint.xa;
 ya = hLinePoint && hLinePoint.ya;
 var ySnap = ya.spikesnap;

 if (ySnap === 'cursor') {
 hLinePointX = evt.pointerX;
 hLinePointY = evt.pointerY;
 } else {
 hLinePointX = xa._offset + hLinePoint.x;
 hLinePointY = ya._offset + hLinePoint.y;
 }
 var dfltHLineColor =
 Color.wcagContrast(hLinePoint.color, contrastColor) < 1.5
 ? Color.contrast(contrastColor)
 : hLinePoint.color;
 var yMode = ya.spikemode;
 var yThickness = ya.spikethickness;
 var yColor = ya.spikecolor || dfltHLineColor;
 var xEdge = Axes.getPxPosition(gd, ya);
 var xBase, xEndSpike;

 if (yMode.indexOf('toaxis') !== -1 || yMode.indexOf('across') !== -1) {
 if (yMode.indexOf('toaxis') !== -1) {
 xBase = xEdge;
 xEndSpike = hLinePointX;
 }
 if (yMode.indexOf('across') !== -1) {
 var xAcross0 = ya._counterDomainMin;
 var xAcross1 = ya._counterDomainMax;
 if (ya.anchor === 'free') {
 xAcross0 = Math.min(xAcross0, ya.position);
 xAcross1 = Math.max(xAcross1, ya.position);
 }
 xBase = gs.l + xAcross0 * gs.w;
 xEndSpike = gs.l + xAcross1 * gs.w;
 }

 // Foreground horizontal line (to y-axis)
 container
 .insert('line', ':first-child')
 .attr({
 x1: xBase,
 x2: xEndSpike,
 y1: hLinePointY,
 y2: hLinePointY,
 'stroke-width': yThickness,
 stroke: yColor,
 'stroke-dasharray': Drawing.dashStyle(ya.spikedash, yThickness)
 })
 .classed('spikeline', true)
 .classed('crisp', true);

 // Background horizontal Line (to y-axis)
 container
 .insert('line', ':first-child')
 .attr({
 x1: xBase,
 x2: xEndSpike,
 y1: hLinePointY,
 y2: hLinePointY,
 'stroke-width': yThickness + 2,
 stroke: contrastColor
 })
 .classed('spikeline', true)
 .classed('crisp', true);
 }
 // Y axis marker
 if (yMode.indexOf('marker') !== -1) {
 container
 .insert('circle', ':first-child')
 .attr({
 cx: xEdge + (ya.side !== 'right' ? yThickness : -yThickness),
 cy: hLinePointY,
 r: yThickness,
 fill: yColor
 })
 .classed('spikeline', true);
 }
 }

 if (showX) {
 var vLinePoint = closestPoints.vLinePoint;
 var vLinePointX, vLinePointY;

 xa = vLinePoint && vLinePoint.xa;
 ya = vLinePoint && vLinePoint.ya;
 var xSnap = xa.spikesnap;

 if (xSnap === 'cursor') {
 vLinePointX = evt.pointerX;
 vLinePointY = evt.pointerY;
 } else {
 vLinePointX = xa._offset + vLinePoint.x;
 vLinePointY = ya._offset + vLinePoint.y;
 }

 var dfltVLineColor =
 Color.wcagContrast(vLinePoint.color, contrastColor) < 1.5
 ? Color.contrast(contrastColor)
 : vLinePoint.color;
 var xMode = xa.spikemode;
 var xThickness = xa.spikethickness;
 var xColor = xa.spikecolor || dfltVLineColor;
 var yEdge = Axes.getPxPosition(gd, xa);
 var yBase, yEndSpike;

 if (xMode.indexOf('toaxis') !== -1 || xMode.indexOf('across') !== -1) {
 if (xMode.indexOf('toaxis') !== -1) {
 yBase = yEdge;
 yEndSpike = vLinePointY;
 }
 if (xMode.indexOf('across') !== -1) {
 var yAcross0 = xa._counterDomainMin;
 var yAcross1 = xa._counterDomainMax;
 if (xa.anchor === 'free') {
 yAcross0 = Math.min(yAcross0, xa.position);
 yAcross1 = Math.max(yAcross1, xa.position);
 }
 yBase = gs.t + (1 - yAcross1) * gs.h;
 yEndSpike = gs.t + (1 - yAcross0) * gs.h;
 }

 // Foreground vertical line (to x-axis)
 container
 .insert('line', ':first-child')
 .attr({
 x1: vLinePointX,
 x2: vLinePointX,
 y1: yBase,
 y2: yEndSpike,
 'stroke-width': xThickness,
 stroke: xColor,
 'stroke-dasharray': Drawing.dashStyle(xa.spikedash, xThickness)
 })
 .classed('spikeline', true)
 .classed('crisp', true);

 // Background vertical line (to x-axis)
 container
 .insert('line', ':first-child')
 .attr({
 x1: vLinePointX,
 x2: vLinePointX,
 y1: yBase,
 y2: yEndSpike,
 'stroke-width': xThickness + 2,
 stroke: contrastColor
 })
 .classed('spikeline', true)
 .classed('crisp', true);
 }

 // X axis marker
 if (xMode.indexOf('marker') !== -1) {
 container
 .insert('circle', ':first-child')
 .attr({
 cx: vLinePointX,
 cy: yEdge - (xa.side !== 'top' ? xThickness : -xThickness),
 r: xThickness,
 fill: xColor
 })
 .classed('spikeline', true);
 }
 }
}

function hoverChanged(gd, evt, oldhoverdata) {
 // don't emit any events if nothing changed
 if (!oldhoverdata || oldhoverdata.length !== gd._hoverdata.length) return true;

 for (var i = oldhoverdata.length - 1; i >= 0; i--) {
 var oldPt = oldhoverdata[i];
 var newPt = gd._hoverdata[i];

 if (
 oldPt.curveNumber !== newPt.curveNumber ||
 String(oldPt.pointNumber) !== String(newPt.pointNumber) ||
 String(oldPt.pointNumbers) !== String(newPt.pointNumbers) ||
 oldPt.binNumber !== newPt.binNumber
 ) {
 return true;
 }
 }
 return false;
}

function spikesChanged(gd, oldspikepoints) {
 // don't relayout the plot because of new spikelines if spikelines points didn't change
 if (!oldspikepoints) return true;
 if (
 oldspikepoints.vLinePoint !== gd._spikepoints.vLinePoint ||
 oldspikepoints.hLinePoint !== gd._spikepoints.hLinePoint
 )
 return true;
 return false;
}

function plainText(s, len) {
 return svgTextUtils.plainText(s || '', {
 len: len,
 allowedTags: ['br', 'sub', 'sup', 'b', 'i', 'em', 's', 'u']
 });
}

function orderRangePoints(hoverData, hovermode) {
 var axLetter = hovermode.charAt(0);

 var first = [];
 var second = [];
 var last = [];

 for (var i = 0; i < hoverData.length; i++) {
 var d = hoverData[i];

 if (Registry.traceIs(d.trace, 'bar-like') || Registry.traceIs(d.trace, 'box-violin')) {
 last.push(d);
 } else if (d.trace[axLetter + 'period']) {
 second.push(d);
 } else {
 first.push(d);
 }
 }

 return first.concat(second).concat(last);
}

function getCoord(axLetter, winningPoint, fullLayout) {
 var ax = winningPoint[axLetter + 'a'];
 var val = winningPoint[axLetter + 'Val'];

 var cd0 = winningPoint.cd[0];

 if (ax.type === 'category' || ax.type === 'multicategory') val = ax._categoriesMap[val];
 else if (ax.type === 'date') {
 var periodalignment = winningPoint.trace[axLetter + 'periodalignment'];
 if (periodalignment) {
 var d = winningPoint.cd[winningPoint.index];

 var start = d[axLetter + 'Start'];
 if (start === undefined) start = d[axLetter];

 var end = d[axLetter + 'End'];
 if (end === undefined) end = d[axLetter];

 var diff = end - start;

 if (periodalignment === 'end') {
 val += diff;
 } else if (periodalignment === 'middle') {
 val += diff / 2;
 }
 }

 val = ax.d2c(val);
 }

 if (cd0 && cd0.t && cd0.t.posLetter === ax._id) {
 if (fullLayout.boxmode === 'group' || fullLayout.violinmode === 'group') {
 val += cd0.t.dPos;
 }
 }

 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.
const getTopOffset = (gd) => gd.offsetTop + gd.clientTop;
const getLeftOffset = (gd) => gd.offsetLeft + gd.clientLeft;

function getBoundingClientRect(gd, node) {
 var fullLayout = gd._fullLayout;

 var rect = node.getBoundingClientRect();

 var x0 = rect.left;
 var y0 = rect.top;
 var x1 = x0 + rect.width;
 var y1 = y0 + rect.height;

 var A = Lib.apply3DTransform(fullLayout._invTransform)(x0, y0);
 var B = Lib.apply3DTransform(fullLayout._invTransform)(x1, y1);

 var Ax = A[0];
 var Ay = A[1];
 var Bx = B[0];
 var By = B[1];

 return {
 x: Ax,
 y: Ay,
 width: Bx - Ax,
 height: By - Ay,
 top: Math.min(Ay, By),
 left: Math.min(Ax, Bx),
 right: Math.max(Ax, Bx),
 bottom: Math.max(Ay, By)
 };
}