@internetstiftelsen/charts 0.14.3 → 0.16.0

package/README.md

@@ -11,6 +11,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Divergent Bar Support** - Bar charts automatically render from zero and diverge around `0` for mixed positive/negative values
 - **Mirrored Bar Sides** - Horizontal bars can mirror a series to the left for population-pyramid style charts without changing source data
 - **Custom Value Labels** - XY, pie, donut, and gauge charts support configurable labels with formatters, max-width overflow behavior, and forced rendering when labels would otherwise be hidden
+- **Axis Label Overflow** - X/Y tick labels and grouped X-axis labels support max-width overflow behavior
 - **Optional XY Animation** - Animate XY series on first render and `chart.update(...)` with `animate`
 - **Optional Radial Animation** - Animate pie and donut segments on first render and `chart.update(...)` with `animate`
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
@@ -349,6 +350,9 @@ const chart = new XYChart({
 });
 ```
 
+The exported `defaultResponsiveConfig` also switches tooltip components to
+`mode: 'shared'` at its `sm` breakpoint for compact XY charts.
+
 ## Word Cloud
 
 ```javascript
@@ -385,17 +389,16 @@ their own centers on initial render and `chart.update(...)`.
 
 ## Export
 
-`chart.export()` supports `svg`, `json`, `csv`, `xlsx`, `png`, `jpg`, and `pdf`.
+`chart.export()` supports `svg`, `json`, `csv`, `xlsx`, `png`, and `jpg`.
 
 ```javascript
 await chart.export('png', { download: true });
 await chart.export('csv', { download: true, delimiter: ';' });
 await chart.export('xlsx', { download: true, sheetName: 'Data' });
-await chart.export('pdf', { download: true, pdfMargin: 16 });
 ```
 
-`xlsx` and `pdf` are lazy-loaded and require optional dependencies
-(`write-excel-file` and `jspdf`) only when those formats are used.
+`xlsx` is lazy-loaded and requires the optional `write-excel-file` dependency
+only when that format is used.
 
 ## Import
 

package/dist/base-chart.d.ts

@@ -9,7 +9,7 @@ import type { Legend } from './legend.js';
 import type { Title } from './title.js';
 import { LayoutManager, type PlotAreaBounds } from './layout-manager.js';
 import { LegendStateController } from './legend-state.js';
-type VisualExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
+type VisualExportFormat = 'svg' | 'png' | 'jpg';
 type RenderDimensions = {
     width: number;
     height: number;
@@ -262,7 +262,6 @@ export declare abstract class BaseChart {
     private exportSize;
     private exportXLSX;
     private exportImage;
-    private exportPDF;
     protected exportSVG(options?: ExportOptions, formatForHooks?: VisualExportFormat): Promise<string>;
     private requireRenderedSvg;
     private resolveExportContext;

package/dist/base-chart.js

@@ -5,7 +5,6 @@ import { LayoutManager } from './layout-manager.js';
 import { serializeCSV } from './export-tabular.js';
 import { exportRasterBlob } from './export-image.js';
 import { exportXLSXBlob } from './export-xlsx.js';
-import { exportPDFBlob } from './export-pdf.js';
 import { normalizeChartData } from './grouped-data.js';
 import { LegendStateController } from './legend-state.js';
 import { mergeDeep } from './utils.js';
@@ -1251,7 +1250,7 @@ export class BaseChart {
             content = await this.exportImage(format, options);
         }
         else {
-            content = await this.exportPDF(options);
+            throw new Error(`Unsupported export format: ${format}`);
         }
         if (options?.download) {
             this.downloadContent(content, format, options);
@@ -1296,7 +1295,7 @@ export class BaseChart {
         if (format === 'jpg') {
             return 'image/jpeg';
         }
-        return 'application/pdf';
+        throw new Error(`Unsupported export format: ${format}`);
     }
     exportCSV(options) {
         return serializeCSV(this.sourceData, options);
@@ -1325,24 +1324,6 @@ export class BaseChart {
             jpegQuality: options?.jpegQuality ?? 0.92,
         });
     }
-    async exportPDF(options) {
-        const { width, height } = this.exportSize(options);
-        const svg = await this.exportSVG(options, 'pdf');
-        const pngBlob = await exportRasterBlob({
-            format: 'png',
-            svg,
-            width,
-            height,
-            pixelRatio: options?.pixelRatio ?? 1,
-            backgroundColor: options?.backgroundColor ?? '#ffffff',
-            jpegQuality: options?.jpegQuality ?? 0.92,
-        });
-        return exportPDFBlob(pngBlob, {
-            width,
-            height,
-            margin: options?.pdfMargin ?? 0,
-        });
-    }
     async exportSVG(options, formatForHooks = 'svg') {
         const liveSvg = this.requireRenderedSvg();
         await this.whenReady();

package/dist/chart-group.d.ts

@@ -40,7 +40,7 @@ export type ChartGroupChartOptions = {
     order?: number;
     responsive?: ChartGroupItemResponsiveConfig;
 };
-export type ChartGroupExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
+export type ChartGroupExportFormat = 'svg' | 'png' | 'jpg';
 export declare class ChartGroup {
     private readonly cols;
     private readonly gap;
@@ -127,7 +127,6 @@ export declare class ChartGroup {
     private requireRenderedContainer;
     private resolveExportContent;
     private createRasterExportOptions;
-    private exportPdfContent;
     private resolveExportLayoutState;
     private createExportLayoutState;
     private createExportRenderContext;

package/dist/chart-group.js

@@ -1,6 +1,5 @@
 import { create } from 'd3';
 import { exportRasterBlob } from './export-image.js';
-import { exportPDFBlob } from './export-pdf.js';
 import { LegendStateController } from './legend-state.js';
 import { DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, defaultTheme, } from './theme.js';
 import { ChartValidator } from './validation.js';
@@ -988,9 +987,6 @@ export class ChartGroup {
             return svg;
         }
         const rasterOptions = this.createRasterExportOptions(svg, width, height, options);
-        if (format === 'pdf') {
-            return this.exportPdfContent(rasterOptions, width, height, options);
-        }
         return exportRasterBlob({
             format,
             ...rasterOptions,
@@ -1006,17 +1002,6 @@ export class ChartGroup {
             jpegQuality: options?.jpegQuality ?? 0.92,
         };
     }
-    async exportPdfContent(rasterOptions, width, height, options) {
-        const pngBlob = await exportRasterBlob({
-            format: 'png',
-            ...rasterOptions,
-        });
-        return exportPDFBlob(pngBlob, {
-            width,
-            height,
-            margin: options?.pdfMargin ?? 0,
-        });
-    }
     resolveExportLayoutState(width, context) {
         const textComponents = this.textComponents
             .map((component) => {
@@ -1327,6 +1312,6 @@ export class ChartGroup {
         if (format === 'jpg') {
             return 'image/jpeg';
         }
-        return 'application/pdf';
+        throw new Error(`Unsupported export format: ${format}`);
     }
 }

package/dist/theme.js

@@ -325,6 +325,12 @@ export const defaultResponsiveConfig = {
                 tooltip: { fontSize: 11 },
                 valueLabel: { fontSize: 10 },
             },
+            components: [
+                {
+                    match: { type: 'tooltip' },
+                    override: { mode: 'shared' },
+                },
+            ],
         },
         md: {
             minWidth: 480,

package/dist/tooltip/dom.d.ts

@@ -0,0 +1,56 @@
+import type { ChartTheme, TooltipTransitionConfig } from '../types.js';
+import { type TooltipAnchor, type TooltipArrowEdge, type TooltipDivSelection } from './types.js';
+type TooltipDomConfig = {
+    id: string;
+    splitTooltipOwner: string;
+    maxWidth: number;
+    transition: Required<TooltipTransitionConfig>;
+};
+export declare class TooltipDom {
+    private readonly id;
+    private readonly splitTooltipOwner;
+    private readonly maxWidth;
+    private readonly transition;
+    private readonly tooltipStyleKeys;
+    private readonly tooltipTransitionFrameIds;
+    private tooltipDiv;
+    private tooltipTheme;
+    constructor(config: TooltipDomConfig);
+    initialize(theme: ChartTheme): void;
+    getRootTooltip(): TooltipDivSelection | null;
+    setContent(content: string): void;
+    getBounds(): DOMRect | null;
+    showAt(left: number, top: number): void;
+    hide(): void;
+    cleanup(): void;
+    measureTooltip(tooltip: TooltipDivSelection, content: string): {
+        width: number;
+        height: number;
+    } | null;
+    renderTooltipWithConnector(tooltip: TooltipDivSelection, arrowEdge: TooltipArrowEdge, left: number, top: number, tooltipWidth: number, tooltipHeight: number, targetX: number, targetY: number, anchor: TooltipAnchor): void;
+    renderTooltipWithoutConnector(tooltip: TooltipDivSelection, left: number, top: number): void;
+    hideTooltipSelection(tooltip: TooltipDivSelection): void;
+    getSplitTooltip(index: number, theme: ChartTheme): TooltipDivSelection;
+    hideSplitTooltips(): void;
+    hideUnusedSplitTooltips(visibleTooltips: TooltipDivSelection[]): void;
+    private applyTooltipStylesIfNeeded;
+    private getTooltipStyleKey;
+    private writeTooltipStyles;
+    private showTooltipAt;
+    private showTooltipSelection;
+    private hideTooltipElement;
+    private getTooltipTransitionStyle;
+    private isTooltipVisible;
+    private getTooltipPosition;
+    private hasVisibleSlideOffset;
+    private slideTooltipFromOffset;
+    private requestTooltipTransitionFrame;
+    private cancelTooltipTransitionFrame;
+    private setTooltipMarkup;
+    private appendTooltipConnector;
+    private appendTooltipArrow;
+    private appendTooltipArrowTriangle;
+    private removeSplitTooltips;
+    private removeRootTooltip;
+}
+export {};

package/dist/tooltip/dom.js

@@ -0,0 +1,438 @@
+import { select } from 'd3';
+import { resolveTooltipArrowPosition, resolveTooltipConnectorLayout, } from './geometry.js';
+import { TOOLTIP_ARROW_BORDER_Z_INDEX, TOOLTIP_ARROW_FILL_Z_INDEX, TOOLTIP_BODY_Z_INDEX, TOOLTIP_BORDER_WIDTH_PX, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_Z_INDEX, TOOLTIP_HIDDEN_TRANSFORM, TOOLTIP_ROOT_Z_INDEX, TOOLTIP_VISIBLE_TRANSFORM, } from './types.js';
+export class TooltipDom {
+    constructor(config) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "splitTooltipOwner", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "maxWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "transition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tooltipStyleKeys", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
+        Object.defineProperty(this, "tooltipTransitionFrameIds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
+        Object.defineProperty(this, "tooltipDiv", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "tooltipTheme", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.id = config.id;
+        this.splitTooltipOwner = config.splitTooltipOwner;
+        this.maxWidth = config.maxWidth;
+        this.transition = config.transition;
+    }
+    initialize(theme) {
+        const existingTooltip = select(`#${this.id}`);
+        const tooltip = existingTooltip.empty()
+            ? select('body')
+                .append('div')
+                .attr('class', 'chart-tooltip')
+                .attr('id', this.id)
+            : existingTooltip;
+        this.removeSplitTooltips();
+        this.applyTooltipStylesIfNeeded(tooltip, theme);
+        this.tooltipDiv = tooltip;
+        this.hideTooltipSelection(tooltip);
+    }
+    getRootTooltip() {
+        return this.tooltipDiv;
+    }
+    setContent(content) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        this.setTooltipMarkup(this.tooltipDiv, content);
+    }
+    getBounds() {
+        const node = this.tooltipDiv?.node();
+        if (!node) {
+            return null;
+        }
+        return node.getBoundingClientRect();
+    }
+    showAt(left, top) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            this.hide();
+            return;
+        }
+        this.showTooltipAt(this.tooltipDiv, left, top);
+    }
+    hide() {
+        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
+        if (!tooltip.empty()) {
+            this.hideTooltipSelection(tooltip);
+        }
+        this.hideSplitTooltips();
+    }
+    cleanup() {
+        this.removeRootTooltip();
+        this.removeSplitTooltips();
+        this.tooltipDiv = null;
+    }
+    measureTooltip(tooltip, content) {
+        this.setTooltipMarkup(tooltip, content);
+        const tooltipNode = tooltip.node();
+        if (!tooltipNode) {
+            return null;
+        }
+        if (!this.isTooltipVisible(tooltipNode)) {
+            tooltip.style('left', '-9999px').style('top', '-9999px');
+            this.hideTooltipSelection(tooltip);
+        }
+        const tooltipRect = tooltipNode.getBoundingClientRect();
+        if (!Number.isFinite(tooltipRect.width) ||
+            !Number.isFinite(tooltipRect.height)) {
+            return null;
+        }
+        return {
+            width: tooltipRect.width,
+            height: tooltipRect.height,
+        };
+    }
+    renderTooltipWithConnector(tooltip, arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
+        if (!Number.isFinite(left) ||
+            !Number.isFinite(top) ||
+            !Number.isFinite(targetX) ||
+            !Number.isFinite(targetY)) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        const connectorLayout = resolveTooltipConnectorLayout(arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY, anchor);
+        if (!connectorLayout) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        this.appendTooltipConnector(tooltip, connectorLayout);
+        this.appendTooltipArrow(tooltip, connectorLayout);
+        this.showTooltipAt(tooltip, left, top);
+    }
+    renderTooltipWithoutConnector(tooltip, left, top) {
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        this.showTooltipAt(tooltip, left, top);
+    }
+    hideTooltipSelection(tooltip) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        this.hideTooltipElement(node);
+    }
+    getSplitTooltip(index, theme) {
+        const tooltipId = `${this.splitTooltipOwner}-${index}`;
+        const existingTooltip = select(`#${tooltipId}`);
+        const tooltip = existingTooltip.empty()
+            ? select('body')
+                .append('div')
+                .attr('class', 'chart-tooltip chart-tooltip--split')
+                .attr('id', tooltipId)
+                .attr('data-chart-tooltip-owner', this.splitTooltipOwner)
+                .attr('data-chart-tooltip-index', String(index))
+            : existingTooltip;
+        this.applyTooltipStylesIfNeeded(tooltip, theme);
+        return tooltip;
+    }
+    hideSplitTooltips() {
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            this.hideTooltipElement(node);
+        });
+    }
+    hideUnusedSplitTooltips(visibleTooltips) {
+        const visibleNodes = new Set(visibleTooltips
+            .map((tooltip) => tooltip.node())
+            .filter((node) => Boolean(node)));
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            if (visibleNodes.has(node)) {
+                return;
+            }
+            this.hideTooltipElement(node);
+        });
+    }
+    applyTooltipStylesIfNeeded(tooltip, theme) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        const styleKey = this.getTooltipStyleKey(theme);
+        if (this.tooltipStyleKeys.get(node) === styleKey) {
+            this.tooltipTheme = theme.tooltip;
+            return;
+        }
+        this.tooltipStyleKeys.set(node, styleKey);
+        this.writeTooltipStyles(tooltip, theme);
+    }
+    getTooltipStyleKey(theme) {
+        return [
+            theme.tooltip.background,
+            theme.tooltip.border,
+            theme.tooltip.color,
+            theme.tooltip.fontFamily,
+            theme.tooltip.fontSize,
+            theme.tooltip.fontWeight,
+            this.maxWidth,
+            this.transition.show,
+            this.transition.duration,
+            this.transition.easing,
+        ].join('|');
+    }
+    writeTooltipStyles(tooltip, theme) {
+        this.tooltipTheme = theme.tooltip;
+        tooltip
+            .style('position', 'absolute')
+            .style('background-color', theme.tooltip.background)
+            .style('border', `${TOOLTIP_BORDER_WIDTH_PX}px solid ${theme.tooltip.border}`)
+            .style('border-radius', '4px')
+            .style('padding', '8px')
+            .style('box-shadow', '0 2px 4px rgba(0,0,0,0.1)')
+            .style('color', theme.tooltip.color)
+            .style('font-family', theme.tooltip.fontFamily)
+            .style('font-size', `${theme.tooltip.fontSize}px`)
+            .style('font-weight', theme.tooltip.fontWeight)
+            .style('box-sizing', 'border-box')
+            .style('overflow-wrap', 'break-word')
+            .style('overflow', 'visible')
+            .style('isolation', 'isolate')
+            .style('pointer-events', 'none')
+            .style('z-index', String(TOOLTIP_ROOT_Z_INDEX));
+        tooltip.style('max-width', `${this.maxWidth}px`);
+        if (this.transition.show) {
+            tooltip
+                .style('transition', this.getTooltipTransitionStyle())
+                .style('will-change', 'opacity, transform');
+            return;
+        }
+        tooltip
+            .style('opacity', null)
+            .style('transform', null)
+            .style('transition', null)
+            .style('will-change', null);
+    }
+    showTooltipAt(tooltip, left, top) {
+        const tooltipNode = tooltip.node();
+        const previousPosition = tooltipNode && this.isTooltipVisible(tooltipNode)
+            ? this.getTooltipPosition(tooltipNode)
+            : null;
+        tooltip.style('left', `${left}px`).style('top', `${top}px`);
+        this.showTooltipSelection(tooltip, previousPosition
+            ? {
+                x: previousPosition.left - left,
+                y: previousPosition.top - top,
+            }
+            : null);
+    }
+    showTooltipSelection(tooltip, slideOffset = null) {
+        tooltip.style('visibility', 'visible');
+        if (!this.transition.show) {
+            return;
+        }
+        tooltip.style('opacity', '1');
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        if (!slideOffset || !this.hasVisibleSlideOffset(slideOffset)) {
+            this.cancelTooltipTransitionFrame(node);
+            tooltip.style('transform', TOOLTIP_VISIBLE_TRANSFORM);
+            return;
+        }
+        this.slideTooltipFromOffset(node, slideOffset);
+    }
+    hideTooltipElement(node) {
+        this.cancelTooltipTransitionFrame(node);
+        if (!this.transition.show) {
+            node.style.visibility = 'hidden';
+            return;
+        }
+        node.style.visibility = 'visible';
+        node.style.opacity = '0';
+        node.style.transform = TOOLTIP_HIDDEN_TRANSFORM;
+    }
+    getTooltipTransitionStyle() {
+        return `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`;
+    }
+    isTooltipVisible(node) {
+        return (node.style.visibility === 'visible' && node.style.opacity !== '0');
+    }
+    getTooltipPosition(node) {
+        const left = Number.parseFloat(node.style.left || '0');
+        const top = Number.parseFloat(node.style.top || '0');
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            return null;
+        }
+        return { left, top };
+    }
+    hasVisibleSlideOffset(offset) {
+        return Math.abs(offset.x) > 0.5 || Math.abs(offset.y) > 0.5;
+    }
+    slideTooltipFromOffset(node, offset) {
+        const transition = node.style.transition || this.getTooltipTransitionStyle();
+        this.cancelTooltipTransitionFrame(node);
+        node.style.setProperty('transition', 'none');
+        node.style.setProperty('transform', `translate(${offset.x}px, ${offset.y}px)`);
+        node.getBoundingClientRect();
+        node.style.setProperty('transition', transition);
+        const frameId = this.requestTooltipTransitionFrame(() => {
+            this.tooltipTransitionFrameIds.delete(node);
+            node.style.setProperty('transform', TOOLTIP_VISIBLE_TRANSFORM);
+        });
+        this.tooltipTransitionFrameIds.set(node, frameId);
+    }
+    requestTooltipTransitionFrame(callback) {
+        if (typeof window.requestAnimationFrame === 'function') {
+            return window.requestAnimationFrame(callback);
+        }
+        return window.setTimeout(() => {
+            callback(window.performance.now());
+        }, 16);
+    }
+    cancelTooltipTransitionFrame(node) {
+        const frameId = this.tooltipTransitionFrameIds.get(node);
+        if (frameId === undefined) {
+            return;
+        }
+        if (typeof window.cancelAnimationFrame === 'function') {
+            window.cancelAnimationFrame(frameId);
+        }
+        else {
+            window.clearTimeout(frameId);
+        }
+        this.tooltipTransitionFrameIds.delete(node);
+    }
+    setTooltipMarkup(tooltip, content) {
+        tooltip.html(`<div data-chart-tooltip-body="true">${content}</div>`);
+        const body = tooltip.select('[data-chart-tooltip-body]');
+        if (body.empty()) {
+            return;
+        }
+        body.style('position', 'relative').style('z-index', String(TOOLTIP_BODY_Z_INDEX));
+    }
+    appendTooltipConnector(tooltip, connectorLayout) {
+        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        const connector = tooltip
+            .append('svg')
+            .attr('data-chart-tooltip-connector', 'true')
+            .attr('data-chart-tooltip-arrow-edge', connectorLayout.arrowEdge)
+            .attr('aria-hidden', 'true')
+            .attr('width', connectorLayout.width)
+            .attr('height', connectorLayout.height)
+            .attr('viewBox', `0 0 ${connectorLayout.width} ${connectorLayout.height}`)
+            .style('position', 'absolute')
+            .style('left', `${connectorLayout.left}px`)
+            .style('top', `${connectorLayout.top}px`)
+            .style('pointer-events', 'none')
+            .style('overflow', 'visible')
+            .style('z-index', String(TOOLTIP_CONNECTOR_Z_INDEX));
+        connector
+            .append('path')
+            .attr('data-chart-tooltip-connector-path', 'true')
+            .attr('d', connectorLayout.path)
+            .attr('fill', 'none')
+            .attr('stroke', tooltipBorder)
+            .attr('stroke-width', 1.25)
+            .attr('stroke-linecap', 'round')
+            .attr('stroke-linejoin', 'round');
+    }
+    appendTooltipArrow(tooltip, connectorLayout) {
+        const tooltipBackground = this.tooltipTheme?.background ?? '#ffffff';
+        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        this.appendTooltipArrowTriangle(tooltip, connectorLayout, 'data-chart-tooltip-arrow', tooltipBorder, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX, TOOLTIP_ARROW_BORDER_Z_INDEX);
+        this.appendTooltipArrowTriangle(tooltip, connectorLayout, 'data-chart-tooltip-arrow-fill', tooltipBackground, TOOLTIP_BOX_ARROW_LENGTH_PX - 1, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX - 1, TOOLTIP_ARROW_FILL_Z_INDEX);
+    }
+    appendTooltipArrowTriangle(tooltip, connectorLayout, dataAttribute, color, length, halfHeight, zIndex) {
+        const position = resolveTooltipArrowPosition(connectorLayout.arrowEdge, connectorLayout.arrowX, connectorLayout.arrowY, length, halfHeight);
+        const arrow = tooltip
+            .append('div')
+            .attr(dataAttribute, 'true')
+            .attr('data-chart-tooltip-arrow-edge', connectorLayout.arrowEdge)
+            .attr('aria-hidden', 'true')
+            .style('position', 'absolute')
+            .style('left', `${position.left}px`)
+            .style('top', `${position.top}px`)
+            .style('width', '0')
+            .style('height', '0')
+            .style('pointer-events', 'none')
+            .style('z-index', String(zIndex));
+        if (connectorLayout.arrowEdge === 'left') {
+            arrow
+                .style('border-top', `${halfHeight}px solid transparent`)
+                .style('border-bottom', `${halfHeight}px solid transparent`)
+                .style('border-right', `${length}px solid ${color}`);
+            return;
+        }
+        if (connectorLayout.arrowEdge === 'right') {
+            arrow
+                .style('border-top', `${halfHeight}px solid transparent`)
+                .style('border-bottom', `${halfHeight}px solid transparent`)
+                .style('border-left', `${length}px solid ${color}`);
+            return;
+        }
+        if (connectorLayout.arrowEdge === 'top') {
+            arrow
+                .style('border-left', `${halfHeight}px solid transparent`)
+                .style('border-right', `${halfHeight}px solid transparent`)
+                .style('border-bottom', `${length}px solid ${color}`);
+            return;
+        }
+        arrow
+            .style('border-left', `${halfHeight}px solid transparent`)
+            .style('border-right', `${halfHeight}px solid transparent`)
+            .style('border-top', `${length}px solid ${color}`);
+    }
+    removeSplitTooltips() {
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            node.remove();
+        });
+    }
+    removeRootTooltip() {
+        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
+        if (!tooltip.empty()) {
+            tooltip.remove();
+        }
+    }
+}