@internetstiftelsen/charts 0.15.0 → 0.17.0

package/dist/tooltip/geometry.js

@@ -0,0 +1,857 @@
+import { SPLIT_TOOLTIP_GAP_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX, TOOLTIP_CONNECTOR_ELBOW_RATIO, TOOLTIP_CONNECTOR_INSET_PX, TOOLTIP_CONNECTOR_PADDING_PX, TOOLTIP_OFFSET_PX, TOOLTIP_TOTAL_BORDER_WIDTH_PX, TOOLTIP_VIEWPORT_PADDING_PX, } from './types.js';
+const MAX_EXHAUSTIVE_HORIZONTAL_ROW_LAYOUTS = 10;
+const HORIZONTAL_ROW_ORDER_FLIP_PENALTY_PX = 128;
+export function getSplitTooltipViewportBounds() {
+    const visualViewport = window.visualViewport;
+    const viewportLeft = window.scrollX + (visualViewport?.offsetLeft ?? 0);
+    const viewportTop = window.scrollY + (visualViewport?.offsetTop ?? 0);
+    const viewportWidth = visualViewport?.width ?? window.innerWidth;
+    const viewportHeight = visualViewport?.height ?? window.innerHeight;
+    return {
+        minLeft: viewportLeft + TOOLTIP_VIEWPORT_PADDING_PX,
+        maxRight: viewportLeft + viewportWidth - TOOLTIP_VIEWPORT_PADDING_PX,
+        minTop: viewportTop + TOOLTIP_VIEWPORT_PADDING_PX,
+        maxBottom: viewportTop + viewportHeight - TOOLTIP_VIEWPORT_PADDING_PX,
+    };
+}
+export function clipTooltipAnchorToBounds(anchor, bounds) {
+    const left = clampTooltipCoordinate(anchor.left, bounds.minLeft, bounds.maxRight);
+    const right = clampTooltipCoordinate(anchor.right, bounds.minLeft, bounds.maxRight);
+    const top = clampTooltipCoordinate(anchor.top, bounds.minTop, bounds.maxBottom);
+    const bottom = clampTooltipCoordinate(anchor.bottom, bounds.minTop, bounds.maxBottom);
+    const clippedLeft = Math.min(left, right);
+    const clippedRight = Math.max(left, right);
+    const clippedTop = Math.min(top, bottom);
+    const clippedBottom = Math.max(top, bottom);
+    return {
+        left: clippedLeft,
+        right: clippedRight,
+        top: clippedTop,
+        bottom: clippedBottom,
+        centerX: (clippedLeft + clippedRight) / 2,
+        centerY: (clippedTop + clippedBottom) / 2,
+    };
+}
+export function resolveTooltipArrowEdge(position, anchor, target, tooltipWidth, tooltipHeight, bounds = getSplitTooltipViewportBounds()) {
+    if (position === 'vertical') {
+        return resolveVerticalPlacementArrowEdge(target, tooltipHeight, bounds);
+    }
+    return resolveSidePlacementArrowEdge(anchor, tooltipWidth, bounds);
+}
+export function resolveSidePlacementArrowEdge(anchor, tooltipWidth, bounds = getSplitTooltipViewportBounds()) {
+    const availableRightSpace = bounds.maxRight - anchor.right - TOOLTIP_OFFSET_PX;
+    const availableLeftSpace = anchor.left - bounds.minLeft - TOOLTIP_OFFSET_PX;
+    if (availableRightSpace >= tooltipWidth ||
+        availableRightSpace >= availableLeftSpace) {
+        return 'left';
+    }
+    return 'right';
+}
+export function resolveVerticalPlacementArrowEdge(target, tooltipHeight, bounds = getSplitTooltipViewportBounds()) {
+    const availableTopSpace = target.y - bounds.minTop - TOOLTIP_OFFSET_PX;
+    const availableBottomSpace = bounds.maxBottom - target.y - TOOLTIP_OFFSET_PX;
+    if (availableTopSpace >= tooltipHeight ||
+        availableTopSpace >= availableBottomSpace) {
+        return 'bottom';
+    }
+    return 'top';
+}
+export function resolveSharedTooltipTarget(anchor) {
+    return {
+        x: anchor.centerX,
+        y: anchor.centerY,
+    };
+}
+export function resolveSplitTooltipTarget(currentSeries, anchor, barAnchorPosition) {
+    if (currentSeries.type === 'bar') {
+        return {
+            x: anchor.centerX,
+            y: barAnchorPosition === 'top' ? anchor.top : anchor.centerY,
+        };
+    }
+    return {
+        x: anchor.centerX,
+        y: anchor.centerY,
+    };
+}
+export function getAnchoredTooltipPosition(anchor, target, tooltipWidth, tooltipHeight, arrowEdge, bounds = getSplitTooltipViewportBounds()) {
+    let left = target.x - tooltipWidth / 2;
+    let top = target.y - tooltipHeight / 2;
+    if (arrowEdge === 'left') {
+        left = anchor.right + TOOLTIP_OFFSET_PX;
+    }
+    else if (arrowEdge === 'right') {
+        left = anchor.left - tooltipWidth - TOOLTIP_OFFSET_PX;
+    }
+    else if (arrowEdge === 'bottom') {
+        top = target.y - tooltipHeight - TOOLTIP_OFFSET_PX;
+    }
+    else {
+        top = target.y + TOOLTIP_OFFSET_PX;
+    }
+    if (!Number.isFinite(left) || !Number.isFinite(top)) {
+        return null;
+    }
+    return {
+        left: clampTooltipCoordinate(left, bounds.minLeft, bounds.maxRight - tooltipWidth),
+        top: clampTooltipCoordinate(top, bounds.minTop, bounds.maxBottom - tooltipHeight),
+    };
+}
+export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
+    const localTargetX = targetX - tooltipLeft;
+    const localTargetY = targetY - tooltipTop;
+    if (!Number.isFinite(localTargetX) || !Number.isFinite(localTargetY)) {
+        return null;
+    }
+    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
+    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
+    const minX = Math.min(arrowTip.x, localTargetX) - TOOLTIP_CONNECTOR_PADDING_PX;
+    const maxX = Math.max(arrowTip.x, localTargetX) + TOOLTIP_CONNECTOR_PADDING_PX;
+    const minY = Math.min(arrowTip.y, localTargetY) - TOOLTIP_CONNECTOR_PADDING_PX;
+    const maxY = Math.max(arrowTip.y, localTargetY) + TOOLTIP_CONNECTOR_PADDING_PX;
+    const width = Math.max(1, maxX - minX);
+    const height = Math.max(1, maxY - minY);
+    const boxX = boxArrowPosition.x - minX;
+    const boxY = boxArrowPosition.y - minY;
+    const startX = arrowTip.x - minX;
+    const startY = arrowTip.y - minY;
+    const endX = localTargetX - minX;
+    const endY = localTargetY - minY;
+    const arrowTipX = tooltipLeft + arrowTip.x;
+    const arrowTipY = tooltipTop + arrowTip.y;
+    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor);
+    if (!hasFiniteNumbers(width, height, boxX, boxY, startX, startY, endX, endY)) {
+        return null;
+    }
+    return {
+        left: minX,
+        top: minY,
+        arrowEdge,
+        width,
+        height,
+        path: connectorPath,
+        arrowX: boxArrowPosition.x,
+        arrowY: boxArrowPosition.y,
+    };
+}
+export function resolveTooltipArrowPosition(arrowEdge, boxX, boxY, length, halfHeight) {
+    switch (arrowEdge) {
+        case 'left':
+            return {
+                left: boxX - length,
+                top: boxY - halfHeight,
+            };
+        case 'right':
+            return {
+                left: boxX,
+                top: boxY - halfHeight,
+            };
+        case 'top':
+            return {
+                left: boxX - halfHeight,
+                top: boxY - length,
+            };
+        case 'bottom':
+            return {
+                left: boxX - halfHeight,
+                top: boxY,
+            };
+    }
+}
+export function resolveSplitTooltipPositions(layouts, position, bounds = getSplitTooltipViewportBounds(), isHorizontal = false) {
+    if (layouts.length === 0) {
+        return;
+    }
+    if (isHorizontal) {
+        if (position === 'vertical') {
+            resolveHorizontalAboveBelowSplitTooltipPositions(layouts, bounds);
+            return;
+        }
+        resolveHorizontalSideSplitTooltipPositions(layouts, bounds);
+        return;
+    }
+    if (position === 'vertical') {
+        resolveAboveBelowSplitTooltipPositions(layouts, bounds);
+        return;
+    }
+    const arrowEdge = resolveSidePlacementArrowEdge(getCombinedSplitTooltipAnchor(layouts), Math.max(...layouts.map((layout) => layout.width)), bounds);
+    const orderedLayouts = getVerticallyOrderedSplitTooltipLayouts(layouts);
+    positionSideSplitTooltipStack(orderedLayouts, arrowEdge, bounds);
+}
+function resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY) {
+    const rightInnerBorderX = tooltipWidth - TOOLTIP_TOTAL_BORDER_WIDTH_PX;
+    const bottomInnerBorderY = tooltipHeight - TOOLTIP_TOTAL_BORDER_WIDTH_PX;
+    switch (arrowEdge) {
+        case 'left':
+            return {
+                x: 0,
+                y: getTooltipConnectorOffset(tooltipTop, tooltipHeight, targetY),
+            };
+        case 'right':
+            return {
+                x: rightInnerBorderX,
+                y: getTooltipConnectorOffset(tooltipTop, tooltipHeight, targetY),
+            };
+        case 'top':
+            return {
+                x: getTooltipConnectorOffset(tooltipLeft, tooltipWidth, targetX),
+                y: 0,
+            };
+        case 'bottom':
+            return {
+                x: getTooltipConnectorOffset(tooltipLeft, tooltipWidth, targetX),
+                y: bottomInnerBorderY,
+            };
+    }
+}
+function getTooltipConnectorOffset(start, size, target) {
+    const minOffset = TOOLTIP_CONNECTOR_INSET_PX;
+    const maxOffset = Math.max(minOffset, size - minOffset);
+    const preferredOffset = target - start;
+    return Math.max(minOffset, Math.min(preferredOffset, maxOffset));
+}
+function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor) {
+    if (arrowEdge === 'left' || arrowEdge === 'right') {
+        if (isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
+            return '';
+        }
+        const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
+        return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
+    }
+    if (isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor)) {
+        return '';
+    }
+    const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
+    return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
+}
+function isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor) {
+    return (arrowTipX >= anchor.left - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        arrowTipX <= anchor.right + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
+function isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor) {
+    return (arrowTipY >= anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        arrowTipY <= anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
+function resolveTooltipArrowTip(arrowEdge, boxX, boxY, length) {
+    if (arrowEdge === 'left' || arrowEdge === 'right') {
+        return {
+            x: arrowEdge === 'left' ? boxX - length : boxX + length,
+            y: boxY,
+        };
+    }
+    return {
+        x: boxX,
+        y: arrowEdge === 'top' ? boxY - length : boxY + length,
+    };
+}
+function getVerticallyOrderedSplitTooltipLayouts(layouts) {
+    return [...layouts].sort((a, b) => {
+        return (a.targetY - b.targetY || a.targetX - b.targetX || a.order - b.order);
+    });
+}
+function getHorizontallyOrderedSplitTooltipLayouts(layouts) {
+    return [...layouts].sort((a, b) => {
+        return (a.targetX - b.targetX || a.targetY - b.targetY || a.order - b.order);
+    });
+}
+function getCombinedSplitTooltipAnchor(layouts) {
+    const left = Math.min(...layouts.map((layout) => layout.anchor.left));
+    const right = Math.max(...layouts.map((layout) => layout.anchor.right));
+    const top = Math.min(...layouts.map((layout) => layout.anchor.top));
+    const bottom = Math.max(...layouts.map((layout) => layout.anchor.bottom));
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        centerX: (left + right) / 2,
+        centerY: (top + bottom) / 2,
+    };
+}
+function getCombinedSplitTooltipTarget(layouts) {
+    const minX = Math.min(...layouts.map((layout) => layout.targetX));
+    const maxX = Math.max(...layouts.map((layout) => layout.targetX));
+    const minY = Math.min(...layouts.map((layout) => layout.targetY));
+    const maxY = Math.max(...layouts.map((layout) => layout.targetY));
+    return {
+        x: (minX + maxX) / 2,
+        y: (minY + maxY) / 2,
+    };
+}
+function resolveHorizontalSideSplitTooltipPositions(layouts, bounds) {
+    const rowPlacement = getBestHorizontalSideRowPlacement(getHorizontallyOrderedSplitTooltipLayouts(layouts), bounds);
+    rowPlacement.placements.forEach(({ layout, left, top, arrowEdge }) => {
+        applySplitTooltipBoxPlacement(layout, { left, top, arrowEdge }, bounds);
+    });
+}
+function getBestHorizontalSideRowPlacement(layouts, bounds) {
+    const preferredEdges = layouts.map((layout) => resolveSidePlacementArrowEdge(layout.anchor, layout.width, bounds));
+    const assignments = getHorizontalEdgeAssignments(layouts, preferredEdges, 'left', 'right');
+    let bestPlacement = null;
+    assignments.forEach((assignment) => {
+        const rowPlacement = getHorizontalSideRowPlacement(layouts, assignment, preferredEdges, bounds);
+        if (!bestPlacement || rowPlacement.score < bestPlacement.score) {
+            bestPlacement = rowPlacement;
+        }
+    });
+    return bestPlacement ?? { placements: [], score: 0 };
+}
+function getHorizontalSideRowPlacement(layouts, assignment, preferredEdges, bounds) {
+    const placements = packHorizontalSideRow(layouts, assignment, bounds);
+    const preferredEdgeByLayout = new Map(layouts.map((layout, index) => [layout, preferredEdges[index]]));
+    const score = placements.reduce((sum, placement) => {
+        const preferredEdge = preferredEdgeByLayout.get(placement.layout) ?? placement.arrowEdge;
+        return (sum +
+            getHorizontalSidePlacementCost(placement, placement.layout, preferredEdge, bounds));
+    }, 0);
+    return { placements, score };
+}
+function packHorizontalSideRow(layouts, assignment, bounds) {
+    const edgeByLayout = new Map(layouts.map((layout, index) => [layout, assignment[index]]));
+    const placements = getHorizontallyOrderedSplitTooltipLayouts(layouts)
+        .map((layout) => {
+        const arrowEdge = edgeByLayout.get(layout) ?? 'left';
+        return {
+            layout,
+            left: getHorizontalSideIdealLeft(layout, arrowEdge),
+            top: getHorizontalSideIdealTop(layout),
+            arrowEdge,
+        };
+    })
+        .sort((a, b) => a.left - b.left ||
+        a.layout.targetX - b.layout.targetX ||
+        a.layout.order - b.layout.order);
+    if (placements.length === 0) {
+        return placements;
+    }
+    return packHorizontalTooltipRow(placements, bounds);
+}
+function getHorizontalSideIdealLeft(layout, arrowEdge) {
+    return arrowEdge === 'left'
+        ? layout.anchor.right + TOOLTIP_OFFSET_PX
+        : layout.anchor.left - layout.width - TOOLTIP_OFFSET_PX;
+}
+function getHorizontalSideIdealTop(layout) {
+    const centeredTop = layout.targetY - layout.height / 2;
+    if (layout.targetMode === 'auto') {
+        const connectorlessRange = getSideConnectorlessTopRange(layout);
+        return clampTooltipCoordinate(centeredTop, connectorlessRange.min, connectorlessRange.max);
+    }
+    return centeredTop;
+}
+function getHorizontalSidePlacementCost(candidate, layout, preferredEdge, bounds) {
+    const edgePenalty = candidate.arrowEdge === preferredEdge ? 0 : 8;
+    const connectorPenalty = isSidePlacementConnectorless(candidate, layout)
+        ? 0
+        : layout.width;
+    const xDistance = Math.abs(layout.targetX - (candidate.left + layout.width / 2));
+    const yDistance = Math.abs(layout.targetY - (candidate.top + layout.height / 2));
+    const idealLeftDistance = Math.abs(candidate.left -
+        getHorizontalSideIdealLeft(layout, candidate.arrowEdge));
+    const overflowPenalty = getSplitTooltipBoxPlacementOverflow(candidate, layout, bounds) * 20;
+    return (connectorPenalty +
+        edgePenalty +
+        xDistance +
+        yDistance * 0.2 +
+        idealLeftDistance * 2 +
+        overflowPenalty);
+}
+function resolveHorizontalAboveBelowSplitTooltipPositions(layouts, bounds) {
+    const rowPlacement = getBestHorizontalAboveBelowRowPlacement(getHorizontallyOrderedSplitTooltipLayouts(layouts), bounds);
+    rowPlacement.placements.forEach(({ layout, left, top, arrowEdge }) => {
+        applySplitTooltipBoxPlacement(layout, { left, top, arrowEdge }, bounds);
+    });
+}
+function getBestHorizontalAboveBelowRowPlacement(layouts, bounds) {
+    const preferredEdges = layouts.map((layout) => resolveVerticalPlacementArrowEdge({ x: layout.targetX, y: layout.targetY }, layout.height, bounds));
+    const assignments = getHorizontalEdgeAssignments(layouts, preferredEdges, 'bottom', 'top');
+    let bestPlacement = null;
+    assignments.forEach((assignment) => {
+        const rowPlacement = getHorizontalAboveBelowRowPlacement(layouts, assignment, preferredEdges, bounds);
+        if (!bestPlacement || rowPlacement.score < bestPlacement.score) {
+            bestPlacement = rowPlacement;
+        }
+    });
+    return bestPlacement ?? { placements: [], score: 0 };
+}
+function getHorizontalEdgeAssignments(layouts, preferredEdges, firstEdge, secondEdge) {
+    if (layouts.length <= MAX_EXHAUSTIVE_HORIZONTAL_ROW_LAYOUTS) {
+        return getExhaustiveHorizontalEdgeAssignments(preferredEdges);
+    }
+    return getFallbackHorizontalEdgeAssignments(layouts, preferredEdges, firstEdge, secondEdge);
+}
+function getExhaustiveHorizontalEdgeAssignments(preferredEdges) {
+    const assignmentCount = 2 ** preferredEdges.length;
+    return Array.from({ length: assignmentCount }, (_, mask) => preferredEdges.map((preferredEdge, index) => mask & (1 << index)
+        ? getOppositeTooltipEdge(preferredEdge)
+        : preferredEdge));
+}
+function getFallbackHorizontalEdgeAssignments(layouts, preferredEdges, firstEdge, secondEdge) {
+    const assignments = [];
+    const seenAssignments = new Set();
+    const addAssignment = (assignment) => {
+        const key = assignment.join('|');
+        if (seenAssignments.has(key)) {
+            return;
+        }
+        seenAssignments.add(key);
+        assignments.push(assignment);
+    };
+    addAssignment([...preferredEdges]);
+    addAssignment(preferredEdges.map((preferredEdge, index) => index % 2 === 0
+        ? preferredEdge
+        : getOppositeTooltipEdge(preferredEdge)));
+    addAssignment(preferredEdges.map((preferredEdge, index) => index % 2 === 0
+        ? getOppositeTooltipEdge(preferredEdge)
+        : preferredEdge));
+    addAssignment(getBalancedHorizontalEdgeAssignment(layouts, firstEdge, secondEdge));
+    return assignments;
+}
+function getBalancedHorizontalEdgeAssignment(layouts, firstEdge, secondEdge) {
+    let firstWidth = 0;
+    let secondWidth = 0;
+    return layouts.map((layout) => {
+        if (firstWidth < secondWidth) {
+            firstWidth += layout.width;
+            return firstEdge;
+        }
+        secondWidth += layout.width;
+        return secondEdge;
+    });
+}
+function getHorizontalAboveBelowRowPlacement(layouts, assignment, preferredEdges, bounds) {
+    const placements = ['bottom', 'top'].flatMap((arrowEdge) => {
+        const rowLayouts = layouts.filter((_, index) => assignment[index] === arrowEdge);
+        return packHorizontalAboveBelowRow(rowLayouts, arrowEdge, bounds);
+    });
+    const preferredEdgeByLayout = new Map(layouts.map((layout, index) => [layout, preferredEdges[index]]));
+    const score = placements.reduce((sum, placement) => {
+        const preferredEdge = preferredEdgeByLayout.get(placement.layout) ??
+            placement.arrowEdge;
+        return (sum +
+            getHorizontalAboveBelowPlacementCost(placement, placement.layout, preferredEdge, bounds));
+    }, getHorizontalEdgeAssignmentCost(layouts, assignment, preferredEdges));
+    return { placements, score };
+}
+function getHorizontalEdgeAssignmentCost(layouts, assignment, preferredEdges) {
+    let score = 0;
+    let runStart = 0;
+    while (runStart < layouts.length) {
+        const valueSign = layouts[runStart].valueSign;
+        let runEnd = runStart + 1;
+        while (runEnd < layouts.length &&
+            layouts[runEnd].valueSign === valueSign) {
+            runEnd++;
+        }
+        for (let index = runStart; index < runEnd; index++) {
+            if (assignment[index] === preferredEdges[index]) {
+                continue;
+            }
+            score += (runEnd - index) * HORIZONTAL_ROW_ORDER_FLIP_PENALTY_PX;
+        }
+        runStart = runEnd;
+    }
+    return score;
+}
+function packHorizontalAboveBelowRow(layouts, arrowEdge, bounds) {
+    const placements = getHorizontallyOrderedSplitTooltipLayouts(layouts).map((layout) => ({
+        layout,
+        left: getHorizontalAboveBelowIdealLeft(layout),
+        top: getHorizontalAboveBelowTop(layout, arrowEdge),
+        arrowEdge,
+    }));
+    return packHorizontalTooltipRow(placements, bounds);
+}
+function packHorizontalTooltipRow(placements, bounds) {
+    if (placements.length === 0) {
+        return placements;
+    }
+    for (let index = 0; index < placements.length; index++) {
+        const previous = placements[index - 1];
+        const minLeft = previous
+            ? previous.left + previous.layout.width + SPLIT_TOOLTIP_GAP_PX
+            : bounds.minLeft;
+        placements[index].left = Math.max(placements[index].left, minLeft);
+    }
+    const lastPlacement = placements[placements.length - 1];
+    const overflow = lastPlacement.left + lastPlacement.layout.width - bounds.maxRight;
+    if (overflow > 0) {
+        placements.forEach((placement) => {
+            placement.left -= overflow;
+        });
+    }
+    for (let index = placements.length - 2; index >= 0; index--) {
+        const next = placements[index + 1];
+        const maxLeft = next.left - placements[index].layout.width - SPLIT_TOOLTIP_GAP_PX;
+        placements[index].left = Math.min(placements[index].left, maxLeft);
+    }
+    const underflow = bounds.minLeft - placements[0].left;
+    if (underflow > 0) {
+        placements.forEach((placement) => {
+            placement.left += underflow;
+        });
+    }
+    return placements;
+}
+function getHorizontalAboveBelowIdealLeft(layout) {
+    const centeredLeft = layout.targetX - layout.width / 2;
+    if (layout.targetMode === 'auto') {
+        const connectorlessRange = getAboveBelowConnectorlessLeftRange(layout);
+        return clampTooltipCoordinate(centeredLeft, connectorlessRange.min, connectorlessRange.max);
+    }
+    return centeredLeft;
+}
+function getHorizontalAboveBelowTop(layout, arrowEdge) {
+    if (arrowEdge === 'bottom') {
+        return layout.anchor.top - TOOLTIP_OFFSET_PX - layout.height;
+    }
+    return layout.anchor.bottom + TOOLTIP_OFFSET_PX;
+}
+function getHorizontalAboveBelowPlacementCost(candidate, layout, preferredEdge, bounds) {
+    const edgePenalty = candidate.arrowEdge === preferredEdge ? 0 : 8;
+    const connectorPenalty = isAboveBelowBoxPlacementConnectorless(candidate, layout)
+        ? 0
+        : layout.height * 4;
+    const xDistance = Math.abs(layout.targetX - (candidate.left + layout.width / 2));
+    const overflowPenalty = getSplitTooltipBoxPlacementOverflow(candidate, layout, bounds) * 20;
+    return connectorPenalty + edgePenalty + xDistance + overflowPenalty;
+}
+function getPreferredAndOppositeEdges(preferredEdge) {
+    if (preferredEdge === 'bottom') {
+        return ['bottom', 'top'];
+    }
+    if (preferredEdge === 'top') {
+        return ['top', 'bottom'];
+    }
+    if (preferredEdge === 'left') {
+        return ['left', 'right'];
+    }
+    return ['right', 'left'];
+}
+function getOppositeTooltipEdge(edge) {
+    return getPreferredAndOppositeEdges(edge)[1];
+}
+function applySplitTooltipBoxPlacement(layout, placement, bounds) {
+    layout.arrowEdge = placement.arrowEdge;
+    layout.left = clampTooltipCoordinate(placement.left, bounds.minLeft, bounds.maxRight - layout.width);
+    layout.top = clampTooltipCoordinate(placement.top, bounds.minTop, bounds.maxBottom - layout.height);
+    alignAutoSplitTooltipTarget(layout);
+}
+function getSplitTooltipBoxPlacementOverflow(candidate, layout, bounds) {
+    return (Math.max(0, bounds.minLeft - candidate.left) +
+        Math.max(0, candidate.left + layout.width - bounds.maxRight) +
+        Math.max(0, bounds.minTop - candidate.top) +
+        Math.max(0, candidate.top + layout.height - bounds.maxBottom));
+}
+function positionSideSplitTooltipStack(layouts, arrowEdge, bounds) {
+    const placementOrder = getSidePlacementOrder(layouts);
+    const placedLayouts = [];
+    placementOrder.forEach((layout) => {
+        layout.arrowEdge = arrowEdge;
+        layout.left = getSideTooltipLeft(layout, arrowEdge, bounds);
+        positionSideSplitTooltip(layout, placedLayouts, layouts, bounds);
+        placedLayouts.push(layout);
+    });
+}
+function getSidePlacementOrder(layouts) {
+    if (!layouts.every((layout) => layout.targetMode === 'auto')) {
+        return layouts;
+    }
+    return [...layouts].sort((a, b) => {
+        return (getTooltipAnchorVerticalSpan(a) - getTooltipAnchorVerticalSpan(b) ||
+            a.targetY - b.targetY ||
+            a.order - b.order);
+    });
+}
+function getTooltipAnchorVerticalSpan(layout) {
+    return layout.anchor.bottom - layout.anchor.top;
+}
+function getSideTooltipLeft(layout, arrowEdge, bounds) {
+    const preferredLeft = arrowEdge === 'left'
+        ? layout.anchor.right + TOOLTIP_OFFSET_PX
+        : layout.anchor.left - layout.width - TOOLTIP_OFFSET_PX;
+    return clampTooltipCoordinate(preferredLeft, bounds.minLeft, bounds.maxRight - layout.width);
+}
+function positionSideSplitTooltip(layout, placedLayouts, allLayouts, bounds) {
+    const candidates = getSidePlacementCandidates(layout, placedLayouts, allLayouts, bounds);
+    const placement = candidates.find((candidate) => isSplitTooltipCandidateWithinBounds(candidate, layout.height, bounds) &&
+        !doesSplitTooltipCandidateOverlap(candidate, layout, placedLayouts)) ?? candidates[0];
+    layout.top = clampTooltipCoordinate(placement.top, bounds.minTop, bounds.maxBottom - layout.height);
+    alignAutoSplitTooltipTarget(layout);
+}
+function getSidePlacementCandidates(layout, placedLayouts, allLayouts, bounds) {
+    const candidates = [
+        {
+            top: layout.targetY - layout.height / 2,
+            arrowEdge: layout.arrowEdge,
+        },
+        {
+            top: layout.anchor.centerY - layout.height / 2,
+            arrowEdge: layout.arrowEdge,
+        },
+        {
+            top: layout.anchor.top - TOOLTIP_CONNECTOR_INSET_PX,
+            arrowEdge: layout.arrowEdge,
+        },
+        {
+            top: layout.anchor.bottom -
+                layout.height +
+                TOOLTIP_CONNECTOR_INSET_PX,
+            arrowEdge: layout.arrowEdge,
+        },
+    ];
+    if (layout.targetMode === 'auto') {
+        const connectorlessRange = getSideConnectorlessTopRange(layout);
+        candidates.push({
+            top: connectorlessRange.min,
+            arrowEdge: layout.arrowEdge,
+        });
+        candidates.push({
+            top: connectorlessRange.max,
+            arrowEdge: layout.arrowEdge,
+        });
+    }
+    placedLayouts.forEach((placedLayout) => {
+        candidates.push({
+            top: placedLayout.top - layout.height - SPLIT_TOOLTIP_GAP_PX,
+            arrowEdge: layout.arrowEdge,
+        });
+        candidates.push({
+            top: placedLayout.top + placedLayout.height + SPLIT_TOOLTIP_GAP_PX,
+            arrowEdge: layout.arrowEdge,
+        });
+    });
+    return candidates
+        .map((candidate) => ({
+        ...candidate,
+        top: clampTooltipCoordinate(candidate.top, bounds.minTop, bounds.maxBottom - layout.height),
+    }))
+        .sort((a, b) => getSidePlacementCost(a, layout, allLayouts) -
+        getSidePlacementCost(b, layout, allLayouts));
+}
+function getSidePlacementCost(candidate, layout, allLayouts) {
+    const connectorPenalty = isSidePlacementConnectorless(candidate, layout)
+        ? 0
+        : layout.height * 4;
+    const centerDistance = Math.abs(layout.targetY - (candidate.top + layout.height / 2));
+    if (layout.targetMode === 'auto' && connectorPenalty === 0) {
+        const spreadDirection = getAutoSideSpreadDirection(layout, allLayouts);
+        if (spreadDirection !== 0) {
+            const connectorlessRange = getSideConnectorlessTopRange(layout);
+            const preferredTop = spreadDirection > 0
+                ? connectorlessRange.max
+                : connectorlessRange.min;
+            return (Math.abs(candidate.top - preferredTop) + centerDistance * 0.05);
+        }
+    }
+    return connectorPenalty + centerDistance;
+}
+function getAutoSideSpreadDirection(layout, allLayouts) {
+    const closestAbove = getClosestAutoSideNeighbor(layout, allLayouts, 'above');
+    const closestBelow = getClosestAutoSideNeighbor(layout, allLayouts, 'below');
+    if (!closestAbove && closestBelow) {
+        return -1;
+    }
+    if (closestAbove && !closestBelow) {
+        return 1;
+    }
+    if (!closestAbove || !closestBelow) {
+        return 0;
+    }
+    const aboveDistance = layout.anchor.centerY - closestAbove.anchor.centerY;
+    const belowDistance = closestBelow.anchor.centerY - layout.anchor.centerY;
+    if (aboveDistance < belowDistance) {
+        return 1;
+    }
+    if (belowDistance < aboveDistance) {
+        return -1;
+    }
+    return 0;
+}
+function getClosestAutoSideNeighbor(layout, allLayouts, side) {
+    const centerY = layout.anchor.centerY;
+    return allLayouts
+        .filter((candidate) => candidate !== layout && candidate.targetMode === 'auto')
+        .filter((candidate) => side === 'above'
+        ? candidate.anchor.centerY < centerY
+        : candidate.anchor.centerY > centerY)
+        .sort((a, b) => Math.abs(a.anchor.centerY - centerY) -
+        Math.abs(b.anchor.centerY - centerY))[0];
+}
+function getSideConnectorlessTopRange(layout) {
+    return {
+        min: layout.anchor.top - getTooltipConnectorMaxOffset(layout.height),
+        max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX,
+    };
+}
+function isSidePlacementConnectorless(candidate, layout) {
+    if (layout.targetMode === 'auto') {
+        return doRangesOverlap(layout.anchor.top, layout.anchor.bottom, candidate.top + TOOLTIP_CONNECTOR_INSET_PX, candidate.top + getTooltipConnectorMaxOffset(layout.height));
+    }
+    const arrowTipY = getSidePlacementArrowTipY(candidate.top, layout);
+    return (arrowTipY >=
+        layout.anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        arrowTipY <=
+            layout.anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
+function getSidePlacementArrowTipY(top, layout) {
+    return top + getTooltipConnectorOffset(top, layout.height, layout.targetY);
+}
+function resolveAboveBelowSplitTooltipPositions(layouts, bounds) {
+    const orderedLayouts = getVerticallyOrderedSplitTooltipLayouts(layouts);
+    const target = getCombinedSplitTooltipTarget(layouts);
+    const maxWidth = Math.max(...layouts.map((layout) => layout.width));
+    const columnLeft = clampTooltipCoordinate(target.x - maxWidth / 2, bounds.minLeft, bounds.maxRight - maxWidth);
+    const placedLayouts = [];
+    orderedLayouts.forEach((layout) => {
+        layout.left = columnLeft + (maxWidth - layout.width) / 2;
+        positionAboveBelowSplitTooltip(layout, placedLayouts, bounds);
+        placedLayouts.push(layout);
+    });
+}
+function positionAboveBelowSplitTooltip(layout, placedLayouts, bounds) {
+    const preferredEdge = resolveVerticalPlacementArrowEdge({ x: layout.targetX, y: layout.targetY }, layout.height, bounds);
+    const candidates = getAboveBelowPlacementCandidates(layout, placedLayouts, bounds, preferredEdge);
+    const placement = candidates.find((candidate) => isAboveBelowCandidateOnArrowSide(candidate, layout) &&
+        isSplitTooltipCandidateWithinBounds(candidate, layout.height, bounds) &&
+        !doesSplitTooltipCandidateOverlap(candidate, layout, placedLayouts)) ?? candidates[0];
+    layout.arrowEdge = placement.arrowEdge;
+    layout.top = clampTooltipCoordinate(placement.top, bounds.minTop, bounds.maxBottom - layout.height);
+    alignAutoSplitTooltipTarget(layout);
+}
+function getAboveBelowPlacementCandidates(layout, placedLayouts, bounds, preferredEdge) {
+    const oppositeEdge = preferredEdge === 'bottom' ? 'top' : 'bottom';
+    const candidates = [
+        getIdealAboveBelowPlacement(layout, preferredEdge),
+        getIdealAboveBelowPlacement(layout, oppositeEdge),
+    ];
+    placedLayouts.forEach((placedLayout) => {
+        const maxAboveTargetTop = layout.targetY - TOOLTIP_OFFSET_PX - layout.height;
+        const minBelowTargetTop = layout.targetY + TOOLTIP_OFFSET_PX;
+        const abovePlacedTop = Math.min(placedLayout.top - layout.height - SPLIT_TOOLTIP_GAP_PX, maxAboveTargetTop);
+        const belowPlacedTop = Math.max(placedLayout.top + placedLayout.height + SPLIT_TOOLTIP_GAP_PX, minBelowTargetTop);
+        candidates.push({
+            top: abovePlacedTop,
+            arrowEdge: resolveAboveBelowArrowEdgeForTop(layout, abovePlacedTop),
+        });
+        candidates.push({
+            top: belowPlacedTop,
+            arrowEdge: resolveAboveBelowArrowEdgeForTop(layout, belowPlacedTop),
+        });
+    });
+    return candidates
+        .map((candidate) => ({
+        ...candidate,
+        top: clampTooltipCoordinate(candidate.top, bounds.minTop, bounds.maxBottom - layout.height),
+    }))
+        .sort((a, b) => getAboveBelowPlacementCost(a, layout) -
+        getAboveBelowPlacementCost(b, layout));
+}
+function getIdealAboveBelowPlacement(layout, arrowEdge) {
+    return {
+        arrowEdge,
+        top: arrowEdge === 'bottom'
+            ? layout.targetY - TOOLTIP_OFFSET_PX - layout.height
+            : layout.targetY + TOOLTIP_OFFSET_PX,
+    };
+}
+function getAboveBelowPlacementCost(candidate, layout) {
+    const connectorPenalty = isAboveBelowPlacementConnectorless(layout)
+        ? 0
+        : layout.height * 4;
+    if (candidate.arrowEdge === 'bottom') {
+        return (connectorPenalty +
+            Math.abs(layout.targetY - (candidate.top + layout.height)));
+    }
+    return connectorPenalty + Math.abs(candidate.top - layout.targetY);
+}
+function isAboveBelowPlacementConnectorless(layout) {
+    if (layout.targetMode === 'auto') {
+        return doRangesOverlap(layout.anchor.left, layout.anchor.right, layout.left + TOOLTIP_CONNECTOR_INSET_PX, layout.left + getTooltipConnectorMaxOffset(layout.width));
+    }
+    const arrowTipX = getAboveBelowPlacementArrowTipX(layout);
+    return (arrowTipX >=
+        layout.anchor.left - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        arrowTipX <=
+            layout.anchor.right + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
+function isAboveBelowBoxPlacementConnectorless(candidate, layout) {
+    if (layout.targetMode === 'auto') {
+        return doRangesOverlap(layout.anchor.left, layout.anchor.right, candidate.left + TOOLTIP_CONNECTOR_INSET_PX, candidate.left + getTooltipConnectorMaxOffset(layout.width));
+    }
+    const arrowTipX = candidate.left +
+        getTooltipConnectorOffset(candidate.left, layout.width, layout.targetX);
+    return (arrowTipX >=
+        layout.anchor.left - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        arrowTipX <=
+            layout.anchor.right + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
+function getAboveBelowPlacementArrowTipX(layout) {
+    return (layout.left +
+        getTooltipConnectorOffset(layout.left, layout.width, layout.targetX));
+}
+function getAboveBelowConnectorlessLeftRange(layout) {
+    return {
+        min: layout.anchor.left - getTooltipConnectorMaxOffset(layout.width),
+        max: layout.anchor.right - TOOLTIP_CONNECTOR_INSET_PX,
+    };
+}
+function alignAutoSplitTooltipTarget(layout) {
+    if (layout.targetMode !== 'auto') {
+        return;
+    }
+    if (layout.arrowEdge === 'left' || layout.arrowEdge === 'right') {
+        layout.targetY = getConnectorlessTargetCoordinate(layout.targetY, layout.anchor.top, layout.anchor.bottom, layout.top + TOOLTIP_CONNECTOR_INSET_PX, layout.top + getTooltipConnectorMaxOffset(layout.height));
+        return;
+    }
+    layout.targetX = getConnectorlessTargetCoordinate(layout.targetX, layout.anchor.left, layout.anchor.right, layout.left + TOOLTIP_CONNECTOR_INSET_PX, layout.left + getTooltipConnectorMaxOffset(layout.width));
+}
+function getConnectorlessTargetCoordinate(preferredValue, anchorStart, anchorEnd, tooltipStart, tooltipEnd) {
+    const minValue = Math.max(anchorStart, tooltipStart);
+    const maxValue = Math.min(anchorEnd, tooltipEnd);
+    if (maxValue < minValue) {
+        return preferredValue;
+    }
+    return clampTooltipCoordinate(preferredValue, minValue, maxValue);
+}
+function getTooltipConnectorMaxOffset(size) {
+    return Math.max(TOOLTIP_CONNECTOR_INSET_PX, size - TOOLTIP_CONNECTOR_INSET_PX);
+}
+function doRangesOverlap(firstStart, firstEnd, secondStart, secondEnd) {
+    return firstStart <= secondEnd && secondStart <= firstEnd;
+}
+function resolveAboveBelowArrowEdgeForTop(layout, top) {
+    const tooltipCenterY = top + layout.height / 2;
+    return tooltipCenterY <= layout.targetY ? 'bottom' : 'top';
+}
+function isSplitTooltipCandidateWithinBounds(candidate, tooltipHeight, bounds) {
+    return (candidate.top >= bounds.minTop &&
+        candidate.top + tooltipHeight <= bounds.maxBottom);
+}
+function isAboveBelowCandidateOnArrowSide(candidate, layout) {
+    if (candidate.arrowEdge === 'bottom') {
+        return (candidate.top + layout.height <= layout.targetY - TOOLTIP_OFFSET_PX);
+    }
+    return candidate.top >= layout.targetY + TOOLTIP_OFFSET_PX;
+}
+function doesSplitTooltipCandidateOverlap(candidate, layout, placedLayouts) {
+    return placedLayouts.some((placedLayout) => {
+        return (layout.left <
+            placedLayout.left + placedLayout.width + SPLIT_TOOLTIP_GAP_PX &&
+            layout.left + layout.width + SPLIT_TOOLTIP_GAP_PX >
+                placedLayout.left &&
+            candidate.top <
+                placedLayout.top + placedLayout.height + SPLIT_TOOLTIP_GAP_PX &&
+            candidate.top + layout.height + SPLIT_TOOLTIP_GAP_PX >
+                placedLayout.top);
+    });
+}
+function clampTooltipCoordinate(value, minValue, maxValue) {
+    if (maxValue < minValue) {
+        return minValue;
+    }
+    return Math.max(minValue, Math.min(value, maxValue));
+}
+function hasFiniteNumbers(...values) {
+    return values.every((value) => Number.isFinite(value));
+}