@internetstiftelsen/charts 0.15.0 → 0.16.0

package/dist/tooltip/xy-interaction.js

@@ -0,0 +1,608 @@
+import { pointer, select } from 'd3';
+import { getSeriesColor } from '../types.js';
+import { sanitizeForCSS } from '../utils.js';
+import { getAnchoredTooltipPosition, 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, formatter, labelFormatter, customFormatter, dom, } = config;
+    const tooltip = dom.getRootTooltip();
+    if (!tooltip || data.length === 0) {
+        return null;
+    }
+    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 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 buildSharedTooltipContent = (dataPoint) => {
+        const visibleSeries = getVisibleTooltipSeries(dataPoint);
+        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);
+        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];
+        updateVisualStateAtIndex(closestIndex);
+        dom.hideSplitTooltips();
+        const content = buildSharedTooltipContent(dataPoint);
+        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 target = resolveSharedTooltipTarget(sharedAnchor);
+        const arrowEdge = resolveTooltipArrowEdge(position, sharedAnchor, target, measuredTooltip.width, measuredTooltip.height);
+        const tooltipPosition = getAnchoredTooltipPosition(sharedAnchor, target, measuredTooltip.width, measuredTooltip.height, arrowEdge);
+        if (!tooltipPosition) {
+            dom.hideTooltipSelection(tooltip);
+            return;
+        }
+        dom.renderTooltipWithoutConnector(tooltip, tooltipPosition.left, tooltipPosition.top);
+    };
+    const getSeriesTooltipAnchor = (currentSeries, dataPoint, index) => {
+        const value = resolveSeriesValue(currentSeries, dataPoint, index);
+        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];
+        updateVisualStateAtIndex(closestIndex);
+        dom.hideTooltipSelection(tooltip);
+        const layouts = [];
+        series.forEach((currentSeries, seriesIndex) => {
+            const rawValue = dataPoint[currentSeries.dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return;
+            }
+            const anchor = getSeriesTooltipAnchor(currentSeries, dataPoint, closestIndex);
+            if (!anchor) {
+                return;
+            }
+            const splitTooltip = dom.getSplitTooltip(seriesIndex, theme);
+            const content = buildSplitTooltipContent(dataPoint, currentSeries);
+            const measuredTooltip = dom.measureTooltip(splitTooltip, content);
+            if (!measuredTooltip) {
+                return;
+            }
+            const target = resolveSplitTooltipTarget(currentSeries, anchor, barAnchorPosition);
+            layouts.push({
+                div: splitTooltip,
+                anchor,
+                width: measuredTooltip.width,
+                height: measuredTooltip.height,
+                left: 0,
+                top: 0,
+                arrowEdge: 'left',
+                targetX: target.x,
+                targetY: target.y,
+                order: seriesIndex,
+            });
+        });
+        if (layouts.length === 0) {
+            dom.hideSplitTooltips();
+            return;
+        }
+        resolveSplitTooltipPositions(layouts, position);
+        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);
+        });
+    };
+    let activeTooltipIndex = null;
+    const hideTooltip = () => {
+        activeTooltipIndex = null;
+        dom.hideTooltipSelection(tooltip);
+        dom.hideSplitTooltips();
+        clearVisualState();
+    };
+    const tooltipSvgNode = svg.node();
+    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (index) => {
+        activeTooltipIndex = index;
+        if (mode === 'split') {
+            showSplitTooltipAtIndex(index);
+            return;
+        }
+        showSharedTooltipAtIndex(index);
+    });
+    overlay
+        .on('mousemove', (event) => {
+        const [mouseX, mouseY] = pointer(event, svg.node());
+        const closestIndex = getClosestIndexFromPointer(mouseX, mouseY, dataPointPositions, isHorizontal);
+        queuedRender.request(closestIndex);
+    })
+        .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);
+        activeTooltipIndex = 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 (activeTooltipIndex === null) {
+            return;
+        }
+        queuedRender.request(activeTooltipIndex);
+    });
+}
+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 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, renderTooltipAtIndex) {
+    let pendingTooltipFrame = null;
+    let pendingTooltipIndex = null;
+    const request = (index) => {
+        pendingTooltipIndex = index;
+        if (pendingTooltipFrame !== null) {
+            return;
+        }
+        pendingTooltipFrame = requestFrame(() => {
+            const nextIndex = pendingTooltipIndex;
+            pendingTooltipFrame = null;
+            pendingTooltipIndex = null;
+            if (nextIndex === null) {
+                return;
+            }
+            if (!tooltipSvgNode?.isConnected) {
+                return;
+            }
+            renderTooltipAtIndex(nextIndex);
+        });
+    };
+    const cancel = () => {
+        if (pendingTooltipFrame === null) {
+            return;
+        }
+        cancelFrame(pendingTooltipFrame);
+        pendingTooltipFrame = null;
+        pendingTooltipIndex = 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 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');
+}

package/dist/tooltip.d.ts

@@ -1,12 +1,8 @@
-import { type Selection } from 'd3';
+import type { Selection } from 'd3';
 import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase, ScaleType, TooltipMode, TooltipPosition, TooltipBarAnchorPosition, TooltipTransitionConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
-import type { Line } from './line.js';
-import type { Bar } from './bar.js';
-import type { Area } from './area.js';
-import type { Scatter } from './scatter.js';
 import type { PlotAreaBounds } from './layout-manager.js';
-type XYTooltipSeries = Line | Bar | Area | Scatter;
+import { type XYTooltipSeries } from './tooltip/types.js';
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private static nextTooltipId;
     readonly id: string;
@@ -24,10 +20,8 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
         fill?: string;
     }[]) => string;
     readonly exportHooks?: ExportHooks<TooltipConfigBase>;
-    private readonly splitTooltipOwner;
-    private readonly tooltipStyleKeys;
-    private tooltipDiv;
-    private tooltipTheme;
+    private readonly dom;
+    private detachTooltipScrollListeners;
     constructor(config?: TooltipConfig);
     getExportConfig(): TooltipConfigBase;
     createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent<TooltipConfigBase>;
@@ -38,68 +32,4 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     showAt(left: number, top: number): void;
     hide(): void;
     cleanup(): void;
-    private applyTooltipStylesIfNeeded;
-    private getTooltipStyleKey;
-    private writeTooltipStyles;
-    private measureTooltip;
-    private renderTooltipWithConnector;
-    private renderTooltipWithoutConnector;
-    private showTooltipAt;
-    private showTooltipSelection;
-    private hideTooltipSelection;
-    private hideTooltipElement;
-    private setTooltipMarkup;
-    private appendTooltipConnector;
-    private appendTooltipArrow;
-    private appendTooltipArrowTriangle;
-    private resolveTooltipArrowPosition;
-    private resolveBarTooltipAnchor;
-    private resolvePointTooltipAnchor;
-    private getSplitTooltip;
-    private hideSplitTooltips;
-    private removeSplitTooltips;
-    private removeRootTooltip;
-    private resolveTooltipArrowEdge;
-    private resolveSidePlacementArrowEdge;
-    private resolveVerticalPlacementArrowEdge;
-    private resolveSharedTooltipTarget;
-    private resolveSplitTooltipTarget;
-    private getTooltipConnectorOffset;
-    private getAnchoredTooltipPosition;
-    private resolveTooltipConnectorLayout;
-    private resolveTooltipBoxArrowPosition;
-    private resolveTooltipConnectorPath;
-    private isTooltipArrowTipInsideHorizontalAnchorSpan;
-    private isTooltipArrowTipInsideVerticalAnchorSpan;
-    private resolveTooltipArrowTip;
-    private hasFiniteNumbers;
-    private resolveSplitTooltipCollisions;
-    private getOppositeSideArrowEdge;
-    private getOppositeVerticalArrowEdge;
-    private flipTooltipIfItReducesCollisions;
-    private countSplitTooltipCollisions;
-    private countPlacedLayoutsOnEdge;
-    private doSplitTooltipLayoutsOverlap;
-    private resolveSplitTooltipPositions;
-    private resolveHorizontalChartSplitTooltipPositions;
-    private resolveVerticalChartSplitTooltipPositions;
-    private getSplitTooltipViewportBounds;
-    private groupSplitTooltipLayoutsByEdge;
-    private resolveSideSplitTooltipPositions;
-    private resolveHorizontalSideSplitTooltipPositions;
-    private resolveHorizontalSideSplitTooltipCollisions;
-    private flipHorizontalSideTooltipIfItReducesCollisions;
-    private findReusableHorizontalTooltipLane;
-    private resolveNewHorizontalTooltipLaneTop;
-    private getHorizontalTooltipLaneTopCandidates;
-    private assignLayoutToHorizontalTooltipLane;
-    private doHorizontalTooltipLanesOverlap;
-    private doSplitTooltipLayoutsOverlapHorizontally;
-    private resolveHorizontalChartAboveBelowSplitTooltipPositions;
-    private resolvePackedAboveBelowTooltipRow;
-    private resolveVerticalChartAboveBelowSplitTooltipPositions;
-    private resolveCollisionAwareAboveBelowTooltipPositions;
-    private resolveNonOverlappingAboveBelowTooltipLeft;
-    private doesSplitTooltipOverlapPlacedLayouts;
 }
-export {};