@internetstiftelsen/charts 0.15.0 → 0.17.0

package/dist/tooltip/xy-interaction.js

@@ -0,0 +1,791 @@
+import { pointer, select } from 'd3';
+import { getSeriesColor } from '../types.js';
+import { getContrastTextColor, sanitizeForCSS } from '../utils.js';
+import { clipTooltipAnchorToBounds, getAnchoredTooltipPosition, getSplitTooltipViewportBounds, resolveSharedTooltipTarget, resolveSplitTooltipPositions, resolveSplitTooltipTarget, resolveTooltipArrowEdge, } from './geometry.js';
+export function attachXYTooltipArea(config) {
+    const { svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal, categoryScaleType, mode, position, barAnchorPosition, colorMode, formatter, labelFormatter, customFormatter, dom, } = config;
+    const tooltip = dom.getRootTooltip();
+    if (!tooltip || data.length === 0) {
+        return null;
+    }
+    const resolvedPosition = position === 'auto' ? (isHorizontal ? 'vertical' : 'side') : position;
+    const resolvedBarAnchorPosition = isHorizontal ? 'auto' : barAnchorPosition;
+    const resolveSeriesValue = config.resolveSeriesValue ??
+        ((targetSeries, dataPoint) => {
+            const rawValue = dataPoint[targetSeries.dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return NaN;
+            }
+            return parseValue(rawValue);
+        });
+    const getXPosition = (dataPoint) => {
+        const scaled = x(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
+        return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
+    };
+    const getYPosition = (dataPoint) => {
+        const scaled = y(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
+        return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
+    };
+    const getTooltipValueSign = (value) => {
+        if (value < 0) {
+            return -1;
+        }
+        if (value > 0) {
+            return 1;
+        }
+        return 0;
+    };
+    const buildTooltipLabel = (dataPoint) => {
+        const labelValue = dataPoint[xKey];
+        return labelFormatter
+            ? labelFormatter(String(labelValue), dataPoint)
+            : String(labelValue);
+    };
+    const buildTooltipRow = (dataPoint, currentSeries) => {
+        const value = dataPoint[currentSeries.dataKey];
+        if (formatter) {
+            return formatter(currentSeries.dataKey, normalizeFormatterValue(value), dataPoint);
+        }
+        return `${currentSeries.dataKey}: ${value}`;
+    };
+    const getVisibleTooltipSeries = (dataPoint) => {
+        return series.filter((currentSeries) => {
+            const value = dataPoint[currentSeries.dataKey];
+            return value !== null && value !== undefined;
+        });
+    };
+    const getSeriesTooltipStyle = (currentSeries, dataPoint, index) => {
+        if (colorMode !== 'series') {
+            return undefined;
+        }
+        const seriesColor = currentSeries.type === 'bar' && currentSeries.colorAdapter
+            ? currentSeries.colorAdapter(dataPoint, index)
+            : getSeriesColor(currentSeries);
+        return {
+            background: seriesColor,
+            border: seriesColor,
+            color: getContrastTextColor(seriesColor),
+        };
+    };
+    const getSharedTooltipStyle = (visibleSeries, dataPoint, index) => {
+        if (visibleSeries.length !== 1) {
+            return undefined;
+        }
+        return getSeriesTooltipStyle(visibleSeries[0], dataPoint, index);
+    };
+    const buildSharedTooltipContent = (dataPoint, visibleSeries) => {
+        if (visibleSeries.length === 0) {
+            return null;
+        }
+        if (customFormatter) {
+            return customFormatter(dataPoint, visibleSeries);
+        }
+        const label = buildTooltipLabel(dataPoint);
+        const rows = visibleSeries.map((currentSeries) => buildTooltipRow(dataPoint, currentSeries));
+        return `<strong>${label}</strong><br/>${rows.join('<br/>')}`;
+    };
+    const buildSplitTooltipContent = (dataPoint, currentSeries) => {
+        if (customFormatter) {
+            return customFormatter(dataPoint, [currentSeries]);
+        }
+        const label = buildTooltipLabel(dataPoint);
+        return `<strong>${label}</strong><br/>${buildTooltipRow(dataPoint, currentSeries)}`;
+    };
+    const buildAccessibleLabel = (dataPoint) => {
+        const content = buildSharedTooltipContent(dataPoint, getVisibleTooltipSeries(dataPoint));
+        return content ? stripHtml(content) : buildTooltipLabel(dataPoint);
+    };
+    const dataPointPositions = data.map((dataPoint) => isHorizontal ? getYPosition(dataPoint) : getXPosition(dataPoint));
+    const focusCircleSeries = series.filter((currentSeries) => {
+        if (currentSeries.type === 'line' &&
+            currentSeries.points.show === 'never') {
+            return false;
+        }
+        return (currentSeries.type === 'line' ||
+            currentSeries.type === 'area' ||
+            currentSeries.type === 'scatter');
+    });
+    const barSeries = series.filter((currentSeries) => {
+        return currentSeries.type === 'bar';
+    });
+    const hasBarSeries = barSeries.length > 0;
+    const overlay = svg
+        .append('rect')
+        .attr('class', 'tooltip-overlay')
+        .attr('x', plotArea.left)
+        .attr('y', plotArea.top)
+        .attr('width', plotArea.width)
+        .attr('height', plotArea.height)
+        .attr('aria-hidden', 'true')
+        .style('fill', 'none')
+        .style('pointer-events', 'all');
+    const focusCircles = focusCircleSeries.map((currentSeries) => {
+        const seriesColor = getSeriesColor(currentSeries);
+        return svg
+            .append('circle')
+            .attr('class', `focus-circle-${sanitizeForCSS(currentSeries.dataKey)}`)
+            .attr('r', theme.line.point.size + 1)
+            .attr('fill', theme.line.point.color || seriesColor)
+            .attr('stroke', theme.line.point.strokeColor || seriesColor)
+            .attr('stroke-width', theme.line.point.strokeWidth)
+            .attr('aria-hidden', 'true')
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+    });
+    const clearVisualState = () => {
+        focusCircles.forEach((circle) => circle.style('opacity', 0));
+        if (!hasBarSeries) {
+            return;
+        }
+        barSeries.forEach((currentSeries) => {
+            svg.selectAll(`.bar-${sanitizeForCSS(currentSeries.dataKey)}`).style('opacity', 1);
+        });
+    };
+    const updateVisualStateAtIndex = (closestIndex) => {
+        const dataPoint = data[closestIndex];
+        const dataPointPosition = dataPointPositions[closestIndex];
+        focusCircleSeries.forEach((currentSeries, seriesIndex) => {
+            const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
+            if (!Number.isFinite(value)) {
+                focusCircles[seriesIndex].style('opacity', 0);
+                return;
+            }
+            if (isHorizontal) {
+                focusCircles[seriesIndex]
+                    .attr('cx', x(value) ?? 0)
+                    .attr('cy', dataPointPosition)
+                    .style('opacity', 1);
+                return;
+            }
+            focusCircles[seriesIndex]
+                .attr('cx', dataPointPosition)
+                .attr('cy', y(value) ?? 0)
+                .style('opacity', 1);
+        });
+        if (!hasBarSeries) {
+            return;
+        }
+        barSeries.forEach((currentSeries) => {
+            svg.selectAll(`.bar-${sanitizeForCSS(currentSeries.dataKey)}`).style('opacity', (_, index) => index === closestIndex ? 1 : 0.5);
+        });
+    };
+    const showSharedTooltipAtIndex = (closestIndex) => {
+        const dataPoint = data[closestIndex];
+        const dataPointPosition = dataPointPositions[closestIndex];
+        const visibleSeries = getVisibleTooltipSeries(dataPoint);
+        updateVisualStateAtIndex(closestIndex);
+        dom.hideSplitTooltips();
+        dom.applyRootTooltipStyles(theme, getSharedTooltipStyle(visibleSeries, dataPoint, closestIndex));
+        const content = buildSharedTooltipContent(dataPoint, visibleSeries);
+        if (!content) {
+            dom.hideTooltipSelection(tooltip);
+            return;
+        }
+        const measuredTooltip = dom.measureTooltip(tooltip, content);
+        if (!measuredTooltip) {
+            dom.hideTooltipSelection(tooltip);
+            return;
+        }
+        const svgNode = svg.node();
+        if (!svgNode) {
+            dom.hideTooltipSelection(tooltip);
+            return;
+        }
+        const sharedAnchor = resolveSharedTooltipAnchor({
+            svgNode,
+            dataPoint,
+            dataPointPosition,
+            series,
+            x,
+            y,
+            isHorizontal,
+            resolveSeriesValue,
+            closestIndex,
+        });
+        const placementBounds = getTooltipPlacementBounds(svgNode);
+        const visibleAnchor = clipTooltipAnchorToBounds(sharedAnchor, placementBounds);
+        const target = resolveSharedTooltipTarget(visibleAnchor);
+        const arrowEdge = resolveTooltipArrowEdge(resolvedPosition, visibleAnchor, target, measuredTooltip.width, measuredTooltip.height, placementBounds);
+        const tooltipPosition = getAnchoredTooltipPosition(visibleAnchor, target, measuredTooltip.width, measuredTooltip.height, arrowEdge, placementBounds);
+        if (!tooltipPosition) {
+            dom.hideTooltipSelection(tooltip);
+            return;
+        }
+        dom.renderTooltipWithoutConnector(tooltip, tooltipPosition.left, tooltipPosition.top);
+    };
+    const getSeriesTooltipAnchor = (currentSeries, index, value) => {
+        if (!Number.isFinite(value)) {
+            return null;
+        }
+        const svgNode = svg.node();
+        if (!svgNode) {
+            return null;
+        }
+        if (currentSeries.type === 'bar') {
+            return resolveBarTooltipAnchor(svgNode, currentSeries.dataKey, index);
+        }
+        const categoryPosition = dataPointPositions[index];
+        const valuePosition = isHorizontal ? (x(value) ?? 0) : (y(value) ?? 0);
+        return resolvePointTooltipAnchor(svgNode, isHorizontal, categoryPosition, valuePosition);
+    };
+    const showSplitTooltipAtIndex = (closestIndex) => {
+        const dataPoint = data[closestIndex];
+        const svgNode = svg.node();
+        if (!svgNode) {
+            dom.hideSplitTooltips();
+            return;
+        }
+        const placementBounds = getTooltipPlacementBounds(svgNode);
+        updateVisualStateAtIndex(closestIndex);
+        dom.hideTooltipSelection(tooltip);
+        const layouts = [];
+        series.forEach((currentSeries, seriesIndex) => {
+            const rawValue = dataPoint[currentSeries.dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return;
+            }
+            const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
+            const anchor = getSeriesTooltipAnchor(currentSeries, closestIndex, value);
+            if (!anchor) {
+                return;
+            }
+            const visibleAnchor = clipTooltipAnchorToBounds(anchor, placementBounds);
+            const splitTooltip = dom.getSplitTooltip(seriesIndex, theme, getSeriesTooltipStyle(currentSeries, dataPoint, closestIndex));
+            const content = buildSplitTooltipContent(dataPoint, currentSeries);
+            const measuredTooltip = dom.measureTooltip(splitTooltip, content);
+            if (!measuredTooltip) {
+                return;
+            }
+            const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
+            const targetMode = currentSeries.type === 'bar' &&
+                resolvedBarAnchorPosition === 'auto'
+                ? 'auto'
+                : 'fixed';
+            layouts.push({
+                div: splitTooltip,
+                anchor: visibleAnchor,
+                width: measuredTooltip.width,
+                height: measuredTooltip.height,
+                left: 0,
+                top: 0,
+                arrowEdge: 'left',
+                targetX: target.x,
+                targetY: target.y,
+                order: seriesIndex,
+                targetMode,
+                valueSign: getTooltipValueSign(value),
+            });
+        });
+        if (layouts.length === 0) {
+            dom.hideSplitTooltips();
+            return;
+        }
+        resolveSplitTooltipPositions(layouts, resolvedPosition, placementBounds, isHorizontal);
+        dom.hideUnusedSplitTooltips(layouts.map((layout) => layout.div));
+        layouts.forEach((layout) => {
+            dom.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY, layout.anchor);
+        });
+    };
+    const showSingleTooltip = (request) => {
+        const dataPoint = data[request.index];
+        const svgNode = svg.node();
+        if (!svgNode) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        const placementBounds = getTooltipPlacementBounds(svgNode);
+        const candidates = [];
+        series.forEach((currentSeries, seriesIndex) => {
+            const rawValue = dataPoint[currentSeries.dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return;
+            }
+            const value = resolveSeriesValue(currentSeries, dataPoint, request.index);
+            const anchor = getSeriesTooltipAnchor(currentSeries, request.index, value);
+            if (!anchor) {
+                return;
+            }
+            const visibleAnchor = clipTooltipAnchorToBounds(anchor, placementBounds);
+            const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
+            candidates.push({
+                series: currentSeries,
+                seriesIndex,
+                anchor: visibleAnchor,
+                target,
+            });
+        });
+        const selectedCandidate = candidates.find((candidate) => candidate.seriesIndex === request.seriesIndex) ?? getClosestSingleTooltipCandidate(candidates, request);
+        updateVisualStateAtIndex(request.index);
+        dom.hideSplitTooltips();
+        if (!selectedCandidate) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        dom.applyRootTooltipStyles(theme, getSeriesTooltipStyle(selectedCandidate.series, dataPoint, request.index));
+        const content = buildSplitTooltipContent(dataPoint, selectedCandidate.series);
+        const measuredTooltip = dom.measureTooltip(tooltip, content);
+        if (!measuredTooltip) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        const arrowEdge = resolveTooltipArrowEdge(resolvedPosition, selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, placementBounds);
+        const tooltipPosition = getAnchoredTooltipPosition(selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, arrowEdge, placementBounds);
+        if (!tooltipPosition) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        dom.renderTooltipWithConnector(tooltip, arrowEdge, tooltipPosition.left, tooltipPosition.top, measuredTooltip.width, measuredTooltip.height, selectedCandidate.target.x, selectedCandidate.target.y, selectedCandidate.anchor);
+        return {
+            index: request.index,
+            seriesIndex: selectedCandidate.seriesIndex,
+        };
+    };
+    let activeTooltipRequest = null;
+    const hideTooltip = () => {
+        activeTooltipRequest = null;
+        dom.hideTooltipSelection(tooltip);
+        dom.hideSplitTooltips();
+        clearVisualState();
+    };
+    const tooltipSvgNode = svg.node();
+    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (request) => {
+        if (mode === 'single') {
+            activeTooltipRequest = showSingleTooltip(request);
+            return;
+        }
+        activeTooltipRequest = { index: request.index };
+        if (mode === 'split') {
+            showSplitTooltipAtIndex(request.index);
+            return;
+        }
+        showSharedTooltipAtIndex(request.index);
+    });
+    overlay
+        .on('mousemove', (event) => {
+        const [mouseX, mouseY] = pointer(event, svg.node());
+        const closestIndex = getClosestIndexFromPointer(mouseX, mouseY, dataPointPositions, isHorizontal);
+        const pointerPosition = getDocumentPointerPosition(event);
+        queuedRender.request({
+            index: closestIndex,
+            pointerX: pointerPosition.x,
+            pointerY: pointerPosition.y,
+        });
+    })
+        .on('mouseout', () => {
+        if (isTooltipFocusTarget(document.activeElement)) {
+            return;
+        }
+        queuedRender.cancel();
+        hideTooltip();
+    });
+    const focusTargets = svg
+        .append('g')
+        .attr('class', 'tooltip-focus-targets')
+        .selectAll('rect')
+        .data(data)
+        .join('rect')
+        .attr('class', 'tooltip-focus-target')
+        .attr('data-index', (_, i) => i)
+        .attr('x', (_, i) => getFocusTargetBounds(i, dataPointPositions, plotArea, x, y, isHorizontal).x)
+        .attr('y', (_, i) => getFocusTargetBounds(i, dataPointPositions, plotArea, x, y, isHorizontal).y)
+        .attr('width', (_, i) => getFocusTargetBounds(i, dataPointPositions, plotArea, x, y, isHorizontal).width)
+        .attr('height', (_, i) => getFocusTargetBounds(i, dataPointPositions, plotArea, x, y, isHorizontal).height)
+        .attr('tabindex', 0)
+        .attr('fill', 'transparent')
+        .attr('stroke', 'none')
+        .attr('stroke-width', 0)
+        .attr('aria-label', (dataPoint) => buildAccessibleLabel(dataPoint))
+        .style('pointer-events', 'none');
+    const focusTargetNodes = focusTargets.nodes();
+    focusTargets
+        .on('focus', function () {
+        const currentIndex = focusTargetNodes.indexOf(this);
+        if (currentIndex === -1) {
+            return;
+        }
+        queuedRender.cancel();
+        select(this).attr('stroke', '#111827').attr('stroke-width', 2);
+        if (mode === 'single') {
+            activeTooltipRequest = showSingleTooltip({
+                index: currentIndex,
+            });
+            return;
+        }
+        activeTooltipRequest = { index: currentIndex };
+        if (mode === 'split') {
+            showSplitTooltipAtIndex(currentIndex);
+            return;
+        }
+        showSharedTooltipAtIndex(currentIndex);
+    })
+        .on('blur', function (event) {
+        select(this).attr('stroke', 'none').attr('stroke-width', 0);
+        if (isTooltipFocusTarget(event.relatedTarget)) {
+            return;
+        }
+        queuedRender.cancel();
+        hideTooltip();
+    })
+        .on('keydown', function (event) {
+        const currentIndex = focusTargetNodes.indexOf(this);
+        if (currentIndex === -1) {
+            return;
+        }
+        const nextIndex = getNextFocusTargetIndex(currentIndex, event.key, focusTargetNodes.length);
+        if (nextIndex < 0 || nextIndex >= focusTargetNodes.length) {
+            return;
+        }
+        event.preventDefault();
+        focusTargetNodes[nextIndex].focus();
+    });
+    return attachTooltipScrollListeners(tooltipSvgNode, () => {
+        if (activeTooltipRequest === null) {
+            return;
+        }
+        queuedRender.request(activeTooltipRequest);
+    });
+}
+function normalizeFormatterValue(value) {
+    if (value === null ||
+        value === undefined ||
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        value instanceof Date) {
+        return value;
+    }
+    return String(value);
+}
+function getCategoryScaleValue(value, scaleType) {
+    switch (scaleType) {
+        case 'band':
+            return String(value);
+        case 'time':
+            return value instanceof Date ? value : new Date(String(value));
+        case 'linear':
+        case 'log':
+            return typeof value === 'number' ? value : Number(value);
+    }
+}
+function stripHtml(content) {
+    return content
+        .replace(/<br\s*\/?>/gi, '. ')
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+function isTooltipFocusTarget(element) {
+    return (element instanceof SVGElement &&
+        element.classList.contains('tooltip-focus-target'));
+}
+function getClosestIndexFromPointer(mouseX, mouseY, dataPointPositions, isHorizontal) {
+    const pointerPosition = isHorizontal ? mouseY : mouseX;
+    let closestIndex = 0;
+    let minDistance = Math.abs(pointerPosition - dataPointPositions[0]);
+    for (let i = 1; i < dataPointPositions.length; i++) {
+        const distance = Math.abs(pointerPosition - dataPointPositions[i]);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = i;
+        }
+    }
+    return closestIndex;
+}
+function getDocumentPointerPosition(event) {
+    return {
+        x: event.clientX + window.scrollX,
+        y: event.clientY + window.scrollY,
+    };
+}
+function getClosestSingleTooltipCandidate(candidates, request) {
+    if (candidates.length === 0) {
+        return null;
+    }
+    if (request.pointerX === undefined ||
+        request.pointerY === undefined ||
+        !Number.isFinite(request.pointerX) ||
+        !Number.isFinite(request.pointerY)) {
+        return candidates[0];
+    }
+    return candidates.reduce((closest, candidate) => {
+        const closestDistance = getSingleTooltipDistance(closest, request);
+        const candidateDistance = getSingleTooltipDistance(candidate, request);
+        return candidateDistance < closestDistance ? candidate : closest;
+    });
+}
+function getSingleTooltipDistance(candidate, request) {
+    const deltaX = (request.pointerX ?? 0) - candidate.target.x;
+    const deltaY = (request.pointerY ?? 0) - candidate.target.y;
+    return Math.hypot(deltaX, deltaY);
+}
+function resolveSharedTooltipAnchor({ svgNode, dataPoint, dataPointPosition, series, x, y, isHorizontal, resolveSeriesValue, closestIndex, }) {
+    const svgRect = svgNode.getBoundingClientRect();
+    const values = series.map((currentSeries) => resolveSeriesValue(currentSeries, dataPoint, closestIndex));
+    const finiteValues = values.filter((value) => Number.isFinite(value));
+    const minValue = finiteValues.length ? Math.min(...finiteValues) : 0;
+    const maxValue = finiteValues.length ? Math.max(...finiteValues) : 0;
+    if (isHorizontal) {
+        const minX = x(minValue);
+        const maxX = x(maxValue);
+        const centerX = svgRect.left + window.scrollX + (minX + maxX) / 2;
+        const centerY = svgRect.top + window.scrollY + dataPointPosition;
+        return {
+            left: centerX,
+            right: centerX,
+            top: centerY,
+            bottom: centerY,
+            centerX,
+            centerY,
+        };
+    }
+    const minY = y(maxValue);
+    const maxY = y(minValue);
+    const centerX = svgRect.left + window.scrollX + dataPointPosition;
+    const topY = svgRect.top + window.scrollY + minY;
+    const bottomY = svgRect.top + window.scrollY + maxY;
+    return {
+        left: centerX,
+        right: centerX,
+        top: topY,
+        bottom: bottomY,
+        centerX,
+        centerY: (topY + bottomY) / 2,
+    };
+}
+function resolveBarTooltipAnchor(svgNode, dataKey, index) {
+    const barNode = svgNode.querySelector(`.bar-${sanitizeForCSS(dataKey)}[data-index="${index}"]`);
+    if (!barNode) {
+        return null;
+    }
+    const rect = barNode.getBoundingClientRect();
+    if (rect.width > 0 || rect.height > 0) {
+        return {
+            left: rect.left + window.scrollX,
+            right: rect.right + window.scrollX,
+            top: rect.top + window.scrollY,
+            bottom: rect.bottom + window.scrollY,
+            centerX: rect.left + window.scrollX + rect.width / 2,
+            centerY: rect.top + window.scrollY + rect.height / 2,
+        };
+    }
+    const svgRect = svgNode.getBoundingClientRect();
+    const xValue = Number(barNode.getAttribute('x') ?? '0');
+    const yValue = Number(barNode.getAttribute('y') ?? '0');
+    const widthValue = Number(barNode.getAttribute('width') ?? '0');
+    const heightValue = Number(barNode.getAttribute('height') ?? '0');
+    const left = svgRect.left + window.scrollX + xValue;
+    const top = svgRect.top + window.scrollY + yValue;
+    const right = left + widthValue;
+    const bottom = top + heightValue;
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        centerX: left + widthValue / 2,
+        centerY: top + heightValue / 2,
+    };
+}
+function resolvePointTooltipAnchor(svgNode, isHorizontal, categoryPosition, valuePosition) {
+    if (!Number.isFinite(categoryPosition) || !Number.isFinite(valuePosition)) {
+        return null;
+    }
+    const svgRect = svgNode.getBoundingClientRect();
+    const anchorX = svgRect.left +
+        window.scrollX +
+        (isHorizontal ? valuePosition : categoryPosition);
+    const anchorY = svgRect.top +
+        window.scrollY +
+        (isHorizontal ? categoryPosition : valuePosition);
+    if (!Number.isFinite(anchorX) || !Number.isFinite(anchorY)) {
+        return null;
+    }
+    return {
+        left: anchorX,
+        right: anchorX,
+        top: anchorY,
+        bottom: anchorY,
+        centerX: anchorX,
+        centerY: anchorY,
+    };
+}
+function createQueuedTooltipRender(tooltipSvgNode, renderTooltip) {
+    let pendingTooltipFrame = null;
+    let pendingTooltipRequest = null;
+    const request = (nextRequest) => {
+        pendingTooltipRequest = nextRequest;
+        if (pendingTooltipFrame !== null) {
+            return;
+        }
+        pendingTooltipFrame = requestFrame(() => {
+            const currentRequest = pendingTooltipRequest;
+            pendingTooltipFrame = null;
+            pendingTooltipRequest = null;
+            if (currentRequest === null) {
+                return;
+            }
+            if (!tooltipSvgNode?.isConnected) {
+                return;
+            }
+            renderTooltip(currentRequest);
+        });
+    };
+    const cancel = () => {
+        if (pendingTooltipFrame === null) {
+            return;
+        }
+        cancelFrame(pendingTooltipFrame);
+        pendingTooltipFrame = null;
+        pendingTooltipRequest = null;
+    };
+    return { request, cancel };
+}
+function requestFrame(callback) {
+    if (typeof window.requestAnimationFrame === 'function') {
+        return window.requestAnimationFrame(callback);
+    }
+    return window.setTimeout(() => {
+        callback(window.performance.now());
+    }, 16);
+}
+function cancelFrame(frameId) {
+    if (typeof window.cancelAnimationFrame === 'function') {
+        window.cancelAnimationFrame(frameId);
+        return;
+    }
+    window.clearTimeout(frameId);
+}
+function getFocusTargetBounds(index, dataPointPositions, plotArea, x, y, isHorizontal) {
+    if (isHorizontal) {
+        if (y.bandwidth) {
+            const targetHeight = y.bandwidth();
+            return {
+                x: plotArea.left,
+                y: dataPointPositions[index] - targetHeight / 2,
+                width: plotArea.width,
+                height: targetHeight,
+            };
+        }
+        const top = index === 0
+            ? plotArea.top
+            : (dataPointPositions[index - 1] + dataPointPositions[index]) /
+                2;
+        const bottom = index === dataPointPositions.length - 1
+            ? plotArea.bottom
+            : (dataPointPositions[index] + dataPointPositions[index + 1]) /
+                2;
+        return {
+            x: plotArea.left,
+            y: top,
+            width: plotArea.width,
+            height: bottom - top,
+        };
+    }
+    if (x.bandwidth) {
+        const targetWidth = x.bandwidth();
+        return {
+            x: dataPointPositions[index] - targetWidth / 2,
+            y: plotArea.top,
+            width: targetWidth,
+            height: plotArea.height,
+        };
+    }
+    const left = index === 0
+        ? plotArea.left
+        : (dataPointPositions[index - 1] + dataPointPositions[index]) / 2;
+    const right = index === dataPointPositions.length - 1
+        ? plotArea.right
+        : (dataPointPositions[index] + dataPointPositions[index + 1]) / 2;
+    return {
+        x: left,
+        y: plotArea.top,
+        width: right - left,
+        height: plotArea.height,
+    };
+}
+function getNextFocusTargetIndex(currentIndex, key, focusTargetCount) {
+    switch (key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+            return currentIndex + 1;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            return currentIndex - 1;
+        case 'Home':
+            return 0;
+        case 'End':
+            return focusTargetCount - 1;
+        default:
+            return -1;
+    }
+}
+function getTooltipPlacementBounds(svgNode) {
+    let bounds = getSplitTooltipViewportBounds();
+    let currentElement = svgNode.parentElement;
+    while (currentElement) {
+        if (isScrollableElement(currentElement)) {
+            bounds = intersectTooltipBounds(bounds, getElementTooltipBounds(currentElement));
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return bounds;
+}
+function getElementTooltipBounds(element) {
+    const rect = element.getBoundingClientRect();
+    const left = rect.left + window.scrollX;
+    const top = rect.top + window.scrollY;
+    return {
+        minLeft: left,
+        maxRight: left + rect.width,
+        minTop: top,
+        maxBottom: top + rect.height,
+    };
+}
+function intersectTooltipBounds(bounds, nextBounds) {
+    if (nextBounds.maxRight <= nextBounds.minLeft ||
+        nextBounds.maxBottom <= nextBounds.minTop) {
+        return bounds;
+    }
+    const minLeft = Math.max(bounds.minLeft, nextBounds.minLeft);
+    const maxRight = Math.min(bounds.maxRight, nextBounds.maxRight);
+    const minTop = Math.max(bounds.minTop, nextBounds.minTop);
+    const maxBottom = Math.min(bounds.maxBottom, nextBounds.maxBottom);
+    if (maxRight <= minLeft || maxBottom <= minTop) {
+        return bounds;
+    }
+    return {
+        minLeft,
+        maxRight,
+        minTop,
+        maxBottom,
+    };
+}
+function attachTooltipScrollListeners(svgNode, onScroll) {
+    if (!svgNode) {
+        return null;
+    }
+    const scrollTargets = getTooltipScrollTargets(svgNode);
+    scrollTargets.forEach((target) => {
+        target.addEventListener('scroll', onScroll, { passive: true });
+    });
+    return () => {
+        scrollTargets.forEach((target) => {
+            target.removeEventListener('scroll', onScroll);
+        });
+    };
+}
+function getTooltipScrollTargets(svgNode) {
+    const scrollTargets = new Set([window]);
+    let currentElement = svgNode.parentElement;
+    while (currentElement) {
+        if (isScrollableElement(currentElement)) {
+            scrollTargets.add(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return [...scrollTargets];
+}
+function isScrollableElement(element) {
+    const style = window.getComputedStyle(element);
+    return [style.overflow, style.overflowX, style.overflowY].some((value) => value === 'auto' || value === 'scroll' || value === 'overlay');
+}