@internetstiftelsen/charts 0.16.0 → 0.17.0

package/dist/tooltip/geometry.js

@@ -1,4 +1,6 @@
 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);
@@ -12,11 +14,29 @@ export function getSplitTooltipViewportBounds() {
         maxBottom: viewportTop + viewportHeight - TOOLTIP_VIEWPORT_PADDING_PX,
     };
 }
-export function resolveTooltipArrowEdge(position, anchor, target, tooltipWidth, tooltipHeight) {
+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);
+        return resolveVerticalPlacementArrowEdge(target, tooltipHeight, bounds);
     }
-    return resolveSidePlacementArrowEdge(anchor, tooltipWidth);
+    return resolveSidePlacementArrowEdge(anchor, tooltipWidth, bounds);
 }
 export function resolveSidePlacementArrowEdge(anchor, tooltipWidth, bounds = getSplitTooltipViewportBounds()) {
     const availableRightSpace = bounds.maxRight - anchor.right - TOOLTIP_OFFSET_PX;
@@ -54,8 +74,7 @@ export function resolveSplitTooltipTarget(currentSeries, anchor, barAnchorPositi
         y: anchor.centerY,
     };
 }
-export function getAnchoredTooltipPosition(anchor, target, tooltipWidth, tooltipHeight, arrowEdge) {
-    const bounds = getSplitTooltipViewportBounds();
+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') {
@@ -139,11 +158,18 @@ export function resolveTooltipArrowPosition(arrowEdge, boxX, boxY, length, halfH
             };
     }
 }
-export function resolveSplitTooltipPositions(layouts, position) {
+export function resolveSplitTooltipPositions(layouts, position, bounds = getSplitTooltipViewportBounds(), isHorizontal = false) {
     if (layouts.length === 0) {
         return;
     }
-    const bounds = getSplitTooltipViewportBounds();
+    if (isHorizontal) {
+        if (position === 'vertical') {
+            resolveHorizontalAboveBelowSplitTooltipPositions(layouts, bounds);
+            return;
+        }
+        resolveHorizontalSideSplitTooltipPositions(layouts, bounds);
+        return;
+    }
     if (position === 'vertical') {
         resolveAboveBelowSplitTooltipPositions(layouts, bounds);
         return;
@@ -223,6 +249,11 @@ function getVerticallyOrderedSplitTooltipLayouts(layouts) {
         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));
@@ -247,37 +278,339 @@ function getCombinedSplitTooltipTarget(layouts) {
         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 anchor = getCombinedSplitTooltipAnchor(layouts);
-    const maxWidth = Math.max(...layouts.map((layout) => layout.width));
-    const preferredLeft = arrowEdge === 'left'
-        ? anchor.right + TOOLTIP_OFFSET_PX
-        : anchor.left - maxWidth - TOOLTIP_OFFSET_PX;
-    const stackLeft = clampTooltipCoordinate(preferredLeft, bounds.minLeft, bounds.maxRight - maxWidth);
+    const placementOrder = getSidePlacementOrder(layouts);
     const placedLayouts = [];
-    layouts.forEach((layout) => {
+    placementOrder.forEach((layout) => {
         layout.arrowEdge = arrowEdge;
-        layout.left =
-            arrowEdge === 'left'
-                ? stackLeft
-                : stackLeft + maxWidth - layout.width;
-        positionSideSplitTooltip(layout, placedLayouts, bounds);
+        layout.left = getSideTooltipLeft(layout, arrowEdge, bounds);
+        positionSideSplitTooltip(layout, placedLayouts, layouts, bounds);
         placedLayouts.push(layout);
     });
 }
-function positionSideSplitTooltip(layout, placedLayouts, bounds) {
-    const candidates = getSidePlacementCandidates(layout, placedLayouts, bounds);
+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) &&
-        !doesSplitTooltipVerticalCandidateOverlap(candidate, layout.height, placedLayouts)) ?? candidates[0];
+        !doesSplitTooltipCandidateOverlap(candidate, layout, placedLayouts)) ?? candidates[0];
     layout.top = clampTooltipCoordinate(placement.top, bounds.minTop, bounds.maxBottom - layout.height);
+    alignAutoSplitTooltipTarget(layout);
 }
-function getSidePlacementCandidates(layout, placedLayouts, bounds) {
+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,
@@ -293,11 +626,76 @@ function getSidePlacementCandidates(layout, placedLayouts, bounds) {
         ...candidate,
         top: clampTooltipCoordinate(candidate.top, bounds.minTop, bounds.maxBottom - layout.height),
     }))
-        .sort((a, b) => getSidePlacementCost(a, layout) -
-        getSidePlacementCost(b, layout));
+        .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 getSidePlacementCost(candidate, layout) {
-    return Math.abs(layout.targetY - (candidate.top + layout.height / 2));
+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);
@@ -316,9 +714,10 @@ function positionAboveBelowSplitTooltip(layout, placedLayouts, bounds) {
     const candidates = getAboveBelowPlacementCandidates(layout, placedLayouts, bounds, preferredEdge);
     const placement = candidates.find((candidate) => isAboveBelowCandidateOnArrowSide(candidate, layout) &&
         isSplitTooltipCandidateWithinBounds(candidate, layout.height, bounds) &&
-        !doesSplitTooltipVerticalCandidateOverlap(candidate, layout.height, placedLayouts)) ?? candidates[0];
+        !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';
@@ -357,10 +756,69 @@ function getIdealAboveBelowPlacement(layout, arrowEdge) {
     };
 }
 function getAboveBelowPlacementCost(candidate, layout) {
+    const connectorPenalty = isAboveBelowPlacementConnectorless(layout)
+        ? 0
+        : layout.height * 4;
     if (candidate.arrowEdge === 'bottom') {
-        return Math.abs(layout.targetY - (candidate.top + layout.height));
+        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));
     }
-    return Math.abs(candidate.top - layout.targetY);
+    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;
@@ -376,11 +834,15 @@ function isAboveBelowCandidateOnArrowSide(candidate, layout) {
     }
     return candidate.top >= layout.targetY + TOOLTIP_OFFSET_PX;
 }
-function doesSplitTooltipVerticalCandidateOverlap(candidate, tooltipHeight, placedLayouts) {
+function doesSplitTooltipCandidateOverlap(candidate, layout, placedLayouts) {
     return placedLayouts.some((placedLayout) => {
-        return (candidate.top <
-            placedLayout.top + placedLayout.height + SPLIT_TOOLTIP_GAP_PX &&
-            candidate.top + tooltipHeight + SPLIT_TOOLTIP_GAP_PX >
+        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);
     });
 }

package/dist/tooltip/types.d.ts

@@ -64,6 +64,8 @@ export type SplitTooltipLayout = {
     targetX: number;
     targetY: number;
     order: number;
+    targetMode: 'fixed' | 'auto';
+    valueSign: -1 | 0 | 1;
 };
 export type SplitTooltipPlacementCandidate = {
     top: number;

package/dist/tooltip/xy-interaction.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { ChartTheme, DataItem, DataValue, D3Scale, ScaleType, TooltipBarAnchorPosition, TooltipMode, TooltipPosition } from '../types.js';
+import type { ChartTheme, DataItem, DataValue, D3Scale, ScaleType, TooltipBarAnchorPosition, TooltipColorMode, TooltipMode, TooltipPosition } from '../types.js';
 import type { PlotAreaBounds } from '../layout-manager.js';
 import type { TooltipDom } from './dom.js';
 import type { XYTooltipSeries } from './types.js';
@@ -20,6 +20,7 @@ export type XYTooltipAreaConfig = {
     mode: TooltipMode;
     position: TooltipPosition;
     barAnchorPosition: TooltipBarAnchorPosition;
+    colorMode: TooltipColorMode;
     formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     labelFormatter?: (label: string, data: DataItem) => string;
     customFormatter?: (data: DataItem, series: {