@internetstiftelsen/charts 0.15.0 → 0.16.0

package/dist/tooltip/geometry.js

@@ -0,0 +1,395 @@
+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';
+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 resolveTooltipArrowEdge(position, anchor, target, tooltipWidth, tooltipHeight) {
+    if (position === 'vertical') {
+        return resolveVerticalPlacementArrowEdge(target, tooltipHeight);
+    }
+    return resolveSidePlacementArrowEdge(anchor, tooltipWidth);
+}
+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) {
+    const 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) {
+    if (layouts.length === 0) {
+        return;
+    }
+    const bounds = getSplitTooltipViewportBounds();
+    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 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 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 placedLayouts = [];
+    layouts.forEach((layout) => {
+        layout.arrowEdge = arrowEdge;
+        layout.left =
+            arrowEdge === 'left'
+                ? stackLeft
+                : stackLeft + maxWidth - layout.width;
+        positionSideSplitTooltip(layout, placedLayouts, bounds);
+        placedLayouts.push(layout);
+    });
+}
+function positionSideSplitTooltip(layout, placedLayouts, bounds) {
+    const candidates = getSidePlacementCandidates(layout, placedLayouts, bounds);
+    const placement = candidates.find((candidate) => isSplitTooltipCandidateWithinBounds(candidate, layout.height, bounds) &&
+        !doesSplitTooltipVerticalCandidateOverlap(candidate, layout.height, placedLayouts)) ?? candidates[0];
+    layout.top = clampTooltipCoordinate(placement.top, bounds.minTop, bounds.maxBottom - layout.height);
+}
+function getSidePlacementCandidates(layout, placedLayouts, bounds) {
+    const candidates = [
+        {
+            top: layout.targetY - layout.height / 2,
+            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) -
+        getSidePlacementCost(b, layout));
+}
+function getSidePlacementCost(candidate, layout) {
+    return Math.abs(layout.targetY - (candidate.top + layout.height / 2));
+}
+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) &&
+        !doesSplitTooltipVerticalCandidateOverlap(candidate, layout.height, placedLayouts)) ?? candidates[0];
+    layout.arrowEdge = placement.arrowEdge;
+    layout.top = clampTooltipCoordinate(placement.top, bounds.minTop, bounds.maxBottom - layout.height);
+}
+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) {
+    if (candidate.arrowEdge === 'bottom') {
+        return Math.abs(layout.targetY - (candidate.top + layout.height));
+    }
+    return Math.abs(candidate.top - layout.targetY);
+}
+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 doesSplitTooltipVerticalCandidateOverlap(candidate, tooltipHeight, placedLayouts) {
+    return placedLayouts.some((placedLayout) => {
+        return (candidate.top <
+            placedLayout.top + placedLayout.height + SPLIT_TOOLTIP_GAP_PX &&
+            candidate.top + tooltipHeight + 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));
+}

package/dist/tooltip/types.d.ts

@@ -0,0 +1,77 @@
+import type { Selection } from 'd3';
+import type { Bar } from '../bar.js';
+import type { Area } from '../area.js';
+import type { Line } from '../line.js';
+import type { Scatter } from '../scatter.js';
+import type { TooltipTransitionConfig } from '../types.js';
+export declare const TOOLTIP_OFFSET_PX = 12;
+export declare const TOOLTIP_VIEWPORT_PADDING_PX = 10;
+export declare const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export declare const TOOLTIP_CONNECTOR_PADDING_PX = 4;
+export declare const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
+export declare const TOOLTIP_BORDER_WIDTH_PX = 1;
+export declare const TOOLTIP_BOX_ARROW_LENGTH_PX = 10;
+export declare const TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX = 6;
+export declare const TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX = 1;
+export declare const TOOLTIP_CONNECTOR_Z_INDEX = 3;
+export declare const TOOLTIP_ARROW_BORDER_Z_INDEX = 4;
+export declare const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
+export declare const TOOLTIP_BODY_Z_INDEX = 6;
+export declare const TOOLTIP_TOTAL_BORDER_WIDTH_PX: number;
+export declare const TOOLTIP_ROOT_Z_INDEX = 30;
+export declare const SPLIT_TOOLTIP_GAP_PX = 8;
+export declare const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
+export declare const DEFAULT_TOOLTIP_TRANSITION: Required<TooltipTransitionConfig>;
+export declare const TOOLTIP_HIDDEN_TRANSFORM = "translateY(2px)";
+export declare const TOOLTIP_VISIBLE_TRANSFORM = "translateY(0)";
+export type XYTooltipSeries = Line | Bar | Area | Scatter;
+export type TooltipArrowEdge = 'left' | 'right' | 'top' | 'bottom';
+export type TooltipDivSelection = Selection<HTMLDivElement, unknown, HTMLElement, undefined>;
+export type TooltipAnchor = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    centerX: number;
+    centerY: number;
+};
+export type TooltipTarget = {
+    x: number;
+    y: number;
+};
+export type TooltipBoxArrowPosition = {
+    x: number;
+    y: number;
+};
+export type TooltipConnectorLayout = {
+    arrowEdge: TooltipArrowEdge;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    path: string;
+    arrowX: number;
+    arrowY: number;
+};
+export type SplitTooltipLayout = {
+    div: TooltipDivSelection;
+    anchor: TooltipAnchor;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    arrowEdge: TooltipArrowEdge;
+    targetX: number;
+    targetY: number;
+    order: number;
+};
+export type SplitTooltipPlacementCandidate = {
+    top: number;
+    arrowEdge: TooltipArrowEdge;
+};
+export type SplitTooltipViewportBounds = {
+    minLeft: number;
+    maxRight: number;
+    minTop: number;
+    maxBottom: number;
+};

package/dist/tooltip/types.js

@@ -0,0 +1,24 @@
+export const TOOLTIP_OFFSET_PX = 12;
+export const TOOLTIP_VIEWPORT_PADDING_PX = 10;
+export const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export const TOOLTIP_CONNECTOR_PADDING_PX = 4;
+export const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
+export const TOOLTIP_BORDER_WIDTH_PX = 1;
+export const TOOLTIP_BOX_ARROW_LENGTH_PX = 10;
+export const TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX = 6;
+export const TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX = 1;
+export const TOOLTIP_CONNECTOR_Z_INDEX = 3;
+export const TOOLTIP_ARROW_BORDER_Z_INDEX = 4;
+export const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
+export const TOOLTIP_BODY_Z_INDEX = 6;
+export const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
+export const TOOLTIP_ROOT_Z_INDEX = 30;
+export const SPLIT_TOOLTIP_GAP_PX = 8;
+export const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
+export const DEFAULT_TOOLTIP_TRANSITION = {
+    show: false,
+    duration: 120,
+    easing: 'ease-out',
+};
+export const TOOLTIP_HIDDEN_TRANSFORM = 'translateY(2px)';
+export const TOOLTIP_VISIBLE_TRANSFORM = 'translateY(0)';

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

@@ -0,0 +1,33 @@
+import { type Selection } from 'd3';
+import type { ChartTheme, DataItem, DataValue, D3Scale, ScaleType, TooltipBarAnchorPosition, TooltipMode, TooltipPosition } from '../types.js';
+import type { PlotAreaBounds } from '../layout-manager.js';
+import type { TooltipDom } from './dom.js';
+import type { XYTooltipSeries } from './types.js';
+type ResolveSeriesValue = (series: XYTooltipSeries, dataPoint: DataItem, index: number) => number;
+export type XYTooltipAreaConfig = {
+    svg: Selection<SVGSVGElement, undefined, null, undefined>;
+    data: DataItem[];
+    series: XYTooltipSeries[];
+    xKey: string;
+    x: D3Scale;
+    y: D3Scale;
+    theme: ChartTheme;
+    plotArea: PlotAreaBounds;
+    parseValue: (value: unknown) => number;
+    isHorizontal: boolean;
+    categoryScaleType: ScaleType;
+    resolveSeriesValue?: ResolveSeriesValue;
+    mode: TooltipMode;
+    position: TooltipPosition;
+    barAnchorPosition: TooltipBarAnchorPosition;
+    formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
+    labelFormatter?: (label: string, data: DataItem) => string;
+    customFormatter?: (data: DataItem, series: {
+        dataKey: string;
+        stroke?: string;
+        fill?: string;
+    }[]) => string;
+    dom: TooltipDom;
+};
+export declare function attachXYTooltipArea(config: XYTooltipAreaConfig): (() => void) | null;
+export {};