@internetstiftelsen/charts 0.10.1 → 0.11.0

package/dist/donut-chart.js

@@ -235,9 +235,6 @@ export class DonutChart extends RadialChartBase {
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
-        const resolveTooltipDiv = () => this.tooltip
-            ? select(`#${this.tooltip.id}`)
-            : null;
         segmentGroup
             .selectAll('.donut-segment')
             .data(pieData)
@@ -256,19 +253,10 @@ export class DonutChart extends RadialChartBase {
                 .selectAll('.donut-segment')
                 .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
                 .style('opacity', 0.5);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv
-                    .style('visibility', 'visible')
-                    .html(this.buildTooltipContent(d, segments));
-                this.positionTooltipFromPointer(event, tooltipDiv);
-            }
+            this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
         })
             .on('mousemove', (event) => {
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                this.positionTooltipFromPointer(event, tooltipDiv);
-            }
+            this.positionTooltipFromPointer(event);
         })
             .on('mouseleave', (event, d) => {
             select(event.currentTarget)
@@ -276,10 +264,7 @@ export class DonutChart extends RadialChartBase {
                 .duration(ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
             segmentGroup.selectAll('.donut-segment').style('opacity', 1);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv.style('visibility', 'hidden');
-            }
+            this.hideTooltip();
         });
         return {
             segmentGroup,

package/dist/gauge-chart.d.ts

@@ -1,6 +1,7 @@
 import type { DataItem, LegendSeries } from './types.js';
-import { BaseChart, type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { BaseChart, BaseChartConfig, BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
+import { RadialChartBase } from './radial-chart-base.js';
 export type GaugeSegment = {
     from: number;
     to: number;
@@ -70,7 +71,7 @@ export type GaugeChartConfig = BaseChartConfig & {
     valueKey?: string;
     targetValueKey?: string;
 };
-export declare class GaugeChart extends BaseChart {
+export declare class GaugeChart extends RadialChartBase {
     private readonly configuredValue;
     private readonly configuredTargetValue;
     private readonly configuredSegments;
@@ -164,8 +165,6 @@ export declare class GaugeChart extends BaseChart {
     private renderCurrentValueMarker;
     private renderValueText;
     private attachTooltipLayer;
-    private resolveTooltipDiv;
     private buildTooltipContent;
-    private positionTooltip;
     protected getLegendSeries(): LegendSeries[];
 }

package/dist/gauge-chart.js

@@ -1,7 +1,7 @@
-import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, select, } from 'd3';
-import { BaseChart, } from './base-chart.js';
+import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, } from 'd3';
 import { DEFAULT_COLOR_PALETTE } from './theme.js';
 import { ChartValidator } from './validation.js';
+import { RadialChartBase } from './radial-chart-base.js';
 function resolveDefault(value, fallback) {
     return value === undefined ? fallback : value;
 }
@@ -49,8 +49,6 @@ const DEFAULT_PROGRESS_RADIUS_INSET = 2;
 const MIN_PROGRESS_BAND_THICKNESS = 1;
 const DEFAULT_HALF_CIRCLE_VALUE_TEXT_Y = 32;
 const DEFAULT_FULL_CIRCLE_VALUE_TEXT_MIN_Y = 22;
-const TOOLTIP_OFFSET_PX = 12;
-const EDGE_MARGIN_PX = 10;
 const GAUGE_ANIMATION_EASING_PRESETS = {
     linear: easeLinear,
     'ease-in': easeCubicIn,
@@ -65,7 +63,7 @@ const DUMMY_ARC_DATUM = {
     startAngle: 0,
     endAngle: 0,
 };
-export class GaugeChart extends BaseChart {
+export class GaugeChart extends RadialChartBase {
     constructor(config) {
         super(config);
         Object.defineProperty(this, "configuredValue", {
@@ -786,9 +784,7 @@ export class GaugeChart extends BaseChart {
     renderChart({ svg, plotGroup, plotArea, }) {
         svg.attr('role', 'img').attr('aria-label', this.buildAriaLabel());
         this.renderTitle(svg);
-        if (this.tooltip) {
-            this.tooltip.initialize(this.renderTheme);
-        }
+        this.initializeTooltip();
         const { centerX, centerY, innerRadius, outerRadius } = this.resolveGaugeGeometry(plotArea);
         const gaugeGroup = plotGroup
             .append('g')
@@ -1276,39 +1272,15 @@ export class GaugeChart extends BaseChart {
             .style('pointer-events', 'all')
             .style('cursor', 'pointer')
             .on('mouseenter', (event) => {
-            const tooltipDiv = this.resolveTooltipDiv();
-            if (!tooltipDiv) {
-                return;
-            }
-            tooltipDiv
-                .style('visibility', 'visible')
-                .html(this.buildTooltipContent(progressColor));
-            this.positionTooltip(event, tooltipDiv);
+            this.showTooltipFromPointer(event, this.buildTooltipContent(progressColor));
         })
             .on('mousemove', (event) => {
-            const tooltipDiv = this.resolveTooltipDiv();
-            if (!tooltipDiv) {
-                return;
-            }
-            tooltipDiv
-                .style('visibility', 'visible')
-                .html(this.buildTooltipContent(progressColor));
-            this.positionTooltip(event, tooltipDiv);
+            this.showTooltipFromPointer(event, this.buildTooltipContent(progressColor));
         })
             .on('mouseleave', () => {
-            const tooltipDiv = this.resolveTooltipDiv();
-            if (!tooltipDiv) {
-                return;
-            }
-            tooltipDiv.style('visibility', 'hidden');
+            this.hideTooltip();
         });
     }
-    resolveTooltipDiv() {
-        if (!this.tooltip) {
-            return null;
-        }
-        return select(`#${this.tooltip.id}`);
-    }
     buildTooltipContent(progressColor) {
         const payload = {
             value: this.value,
@@ -1338,24 +1310,6 @@ export class GaugeChart extends BaseChart {
         }
         return content;
     }
-    positionTooltip(event, tooltipDiv) {
-        const node = tooltipDiv.node();
-        if (!node) {
-            return;
-        }
-        const rect = node.getBoundingClientRect();
-        let x = event.pageX + TOOLTIP_OFFSET_PX;
-        let y = event.pageY - rect.height / 2;
-        if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
-            x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
-        }
-        x = Math.max(EDGE_MARGIN_PX, x);
-        y = Math.max(EDGE_MARGIN_PX, Math.min(y, window.innerHeight +
-            window.scrollY -
-            rect.height -
-            EDGE_MARGIN_PX));
-        tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
-    }
     getLegendSeries() {
         return this.segments.map((segment) => {
             return {

package/dist/lazy-mount.d.ts

@@ -0,0 +1,13 @@
+export type LazyMountableChart = {
+    destroy: () => void;
+};
+export type LazyChartFactory<TChart extends LazyMountableChart> = (container: HTMLElement) => TChart | Promise<TChart>;
+export type LazyChartMountOptions = Pick<IntersectionObserverInit, 'root' | 'rootMargin' | 'threshold'> & {
+    onError?: (error: unknown) => void;
+};
+export type LazyChartMountHandle<TChart extends LazyMountableChart> = {
+    load: () => Promise<TChart | null>;
+    destroy: () => void;
+    getChart: () => TChart | null;
+};
+export declare function mountChartWhenVisible<TChart extends LazyMountableChart>(target: string | HTMLElement, factory: LazyChartFactory<TChart>, options?: LazyChartMountOptions): LazyChartMountHandle<TChart>;

package/dist/lazy-mount.js

@@ -0,0 +1,90 @@
+const DEFAULT_ROOT_MARGIN = '200px 0px';
+const DEFAULT_THRESHOLD = 0.01;
+function resolveTarget(target) {
+    if (target instanceof HTMLElement) {
+        return target;
+    }
+    const container = document.querySelector(target);
+    if (!container) {
+        throw new Error(`Container "${target}" not found`);
+    }
+    if (!(container instanceof HTMLElement)) {
+        throw new Error(`Container "${target}" is not an HTMLElement`);
+    }
+    return container;
+}
+export function mountChartWhenVisible(target, factory, options = {}) {
+    const container = resolveTarget(target);
+    let mountedChart = null;
+    let pendingLoad = null;
+    let observer = null;
+    let destroyed = false;
+    const disconnectObserver = () => {
+        observer?.disconnect();
+        observer = null;
+    };
+    const handleError = (error) => {
+        if (options.onError) {
+            options.onError(error);
+            return;
+        }
+        console.error(error);
+    };
+    const load = async () => {
+        if (destroyed) {
+            return null;
+        }
+        if (mountedChart) {
+            return mountedChart;
+        }
+        if (pendingLoad) {
+            return pendingLoad;
+        }
+        disconnectObserver();
+        const currentLoad = Promise.resolve(factory(container))
+            .then((chart) => {
+            if (destroyed) {
+                chart.destroy();
+                return null;
+            }
+            mountedChart = chart;
+            return chart;
+        })
+            .catch((error) => {
+            handleError(error);
+            throw error;
+        })
+            .finally(() => {
+            if (pendingLoad === currentLoad && !mountedChart) {
+                pendingLoad = null;
+            }
+        });
+        pendingLoad = currentLoad;
+        return currentLoad;
+    };
+    const destroy = () => {
+        destroyed = true;
+        disconnectObserver();
+        mountedChart?.destroy();
+        mountedChart = null;
+    };
+    observer = new IntersectionObserver((entries) => {
+        const isVisible = entries.some((entry) => {
+            return entry.isIntersecting || entry.intersectionRatio > 0;
+        });
+        if (!isVisible) {
+            return;
+        }
+        void load().catch(() => { });
+    }, {
+        root: options.root ?? null,
+        rootMargin: options.rootMargin ?? DEFAULT_ROOT_MARGIN,
+        threshold: options.threshold ?? DEFAULT_THRESHOLD,
+    });
+    observer.observe(container);
+    return {
+        load,
+        destroy,
+        getChart: () => mountedChart,
+    };
+}

package/dist/line.d.ts

@@ -1,6 +1,7 @@
 import { type Selection } from 'd3';
 import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig, ExportHooks, LineConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
+import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Line implements ChartComponent<LineConfigBase> {
     readonly type: "line";
     readonly dataKey: string;
@@ -11,6 +12,13 @@ export declare class Line implements ChartComponent<LineConfigBase> {
     constructor(config: LineConfig);
     getExportConfig(): LineConfigBase;
     createExportComponent(override?: Partial<LineConfigBase>): ChartComponent<LineConfigBase>;
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme, animation?: XYPointAnimationContext): XYSeriesRenderResult<XYPointSnapshot>;
+    private buildLineData;
+    private buildAnimatedLineData;
+    private createSnapshot;
+    private renderLinePath;
+    private getInitialPathValue;
+    private createRevealTransitions;
+    private renderLinePoints;
     private renderValueLabels;
 }

package/dist/line.js

@@ -1,6 +1,7 @@
 import { line } from 'd3';
 import { sanitizeForCSS, mergeDeep } from './utils.js';
 import { getScalePosition } from './scale-utils.js';
+import { buildXYDatumSnapshotKeys, createTransitionCompletionPromise, createLeftToRightRevealTransition, getEnterStaggerTiming, } from './xy-motion/helpers.js';
 export class Line {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -60,7 +61,7 @@ export class Line {
             exportHooks: this.exportHooks,
         });
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, animation) {
         const getXPosition = (d) => {
             return (getScalePosition(x, d[xKey], xScaleType) +
                 (x.bandwidth ? x.bandwidth() / 2 : 0));
@@ -70,41 +71,158 @@ export class Line {
             const value = d[this.dataKey];
             return value !== null && value !== undefined;
         };
-        const lineGenerator = line()
-            .defined(hasValidValue)
-            .x(getXPosition)
-            .y((d) => y(parseValue(d[this.dataKey])) || 0);
+        const snapshotKeys = buildXYDatumSnapshotKeys(data, xKey);
+        const lineData = this.buildLineData(data, snapshotKeys, y, parseValue, getXPosition, hasValidValue);
+        const animatedLineData = this.buildAnimatedLineData(lineData, animation);
+        const validLineData = lineData.filter((entry) => entry.valid);
+        const validAnimatedLineData = animatedLineData.filter((entry) => {
+            return entry.valid;
+        });
+        const transitions = [
+            ...this.renderLinePath(plotGroup, lineData, animatedLineData, theme, sanitizeForCSS(this.dataKey), animation),
+            ...this.renderLinePoints(plotGroup, validLineData, validAnimatedLineData, theme, animation),
+        ];
+        const snapshot = this.createSnapshot(validLineData);
+        // Render value labels if enabled (only for valid values)
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(plotGroup, validLineData.map((entry) => entry.data), y, parseValue, theme, getXPosition);
+        }
+        return {
+            snapshot,
+            transitions,
+        };
+    }
+    buildLineData(data, snapshotKeys, y, parseValue, getXPosition, hasValidValue) {
+        return data.map((entry, index) => {
+            const valid = hasValidValue(entry);
+            return {
+                data: entry,
+                valid,
+                snapshotKey: snapshotKeys[index] ?? String(index),
+                x: getXPosition(entry),
+                y: valid ? (y(parseValue(entry[this.dataKey])) ?? 0) : 0,
+            };
+        });
+    }
+    buildAnimatedLineData(lineData, animation) {
+        return lineData.map((entry) => {
+            if (!animation || !entry.valid) {
+                return entry;
+            }
+            const previousSnapshot = animation.previousSnapshot?.get(entry.snapshotKey);
+            return {
+                ...entry,
+                x: previousSnapshot?.x ?? entry.x,
+                y: previousSnapshot?.y ?? animation.baselineY,
+            };
+        });
+    }
+    createSnapshot(lineData) {
+        const snapshot = new Map();
+        lineData.forEach((entry) => {
+            snapshot.set(entry.snapshotKey, {
+                x: entry.x,
+                y: entry.y,
+            });
+        });
+        return snapshot;
+    }
+    renderLinePath(plotGroup, lineData, animatedLineData, theme, sanitizedKey, animation) {
         const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
-        const pointSize = theme.line.point.size;
-        const pointStrokeWidth = theme.line.point.strokeWidth;
-        const pointStrokeColor = theme.line.point.strokeColor || this.stroke;
-        const pointColor = theme.line.point.color || this.stroke;
-        // Add line path
-        plotGroup
+        const lineGenerator = line()
+            .defined((entry) => entry.valid)
+            .x((entry) => entry.x)
+            .y((entry) => entry.y);
+        const finalPath = lineGenerator(lineData);
+        const linePath = plotGroup
             .append('path')
-            .datum(data)
+            .datum(lineData)
+            .attr('class', `line-${sanitizedKey}`)
             .attr('fill', 'none')
             .attr('stroke', this.stroke)
             .attr('stroke-width', lineStrokeWidth)
-            .attr('d', lineGenerator);
-        // Add data point circles (only for valid values)
-        const validData = data.filter(hasValidValue);
+            .attr('d', this.getInitialPathValue(finalPath, animatedLineData, lineGenerator, animation));
+        if (!animation || !finalPath) {
+            return [];
+        }
+        const revealTransitions = this.createRevealTransitions(linePath.node(), sanitizedKey, lineStrokeWidth, animation);
+        const transition = linePath
+            .transition()
+            .duration(animation.duration)
+            .ease(animation.easing)
+            .attr('d', finalPath);
+        return [
+            ...revealTransitions,
+            createTransitionCompletionPromise(transition),
+        ];
+    }
+    getInitialPathValue(finalPath, animatedLineData, lineGenerator, animation) {
+        if (animation?.mode === 'initial') {
+            return finalPath;
+        }
+        if (!animation) {
+            return finalPath;
+        }
+        return animation.previousPath ?? lineGenerator(animatedLineData);
+    }
+    createRevealTransitions(linePath, sanitizedKey, lineStrokeWidth, animation) {
+        if (animation.mode === 'initial') {
+            return createLeftToRightRevealTransition(linePath, animation.duration, animation.easing, `line-${sanitizedKey}-reveal`, lineStrokeWidth);
+        }
+        if (animation.previousRevealProgress == null) {
+            return [];
+        }
+        return createLeftToRightRevealTransition(linePath, animation.duration, animation.easing, `line-${sanitizedKey}-reveal`, lineStrokeWidth, animation.previousRevealProgress);
+    }
+    renderLinePoints(plotGroup, validLineData, validAnimatedLineData, theme, animation) {
+        const pointSize = theme.line.point.size;
+        const pointStrokeWidth = theme.line.point.strokeWidth;
+        const pointStrokeColor = theme.line.point.strokeColor || this.stroke;
+        const pointColor = theme.line.point.color || this.stroke;
         const sanitizedKey = sanitizeForCSS(this.dataKey);
-        plotGroup
+        const isInitialAnimation = animation?.mode === 'initial';
+        const circles = plotGroup
             .selectAll(`.circle-${sanitizedKey}`)
-            .data(validData)
+            .data(validLineData)
             .join('circle')
             .attr('class', `circle-${sanitizedKey}`)
-            .attr('cx', getXPosition)
-            .attr('cy', (d) => y(parseValue(d[this.dataKey])) || 0)
-            .attr('r', pointSize)
+            .attr('cx', (_, index) => (isInitialAnimation
+            ? validLineData[index]?.x
+            : animation
+                ? validAnimatedLineData[index]?.x
+                : validLineData[index]?.x) ?? 0)
+            .attr('cy', (_, index) => (isInitialAnimation
+            ? validLineData[index]?.y
+            : animation
+                ? validAnimatedLineData[index]?.y
+                : validLineData[index]?.y) ?? 0)
+            .attr('r', isInitialAnimation ? 0 : pointSize)
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
-        // Render value labels if enabled (only for valid values)
-        if (this.valueLabel?.show) {
-            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition);
+        if (!animation) {
+            return [];
+        }
+        if (isInitialAnimation) {
+            const transition = circles
+                .transition()
+                .delay((_, index) => {
+                return getEnterStaggerTiming(index, validLineData.length, animation.duration).delay;
+            })
+                .duration((_, index) => {
+                return getEnterStaggerTiming(index, validLineData.length, animation.duration).duration;
+            })
+                .ease(animation.easing)
+                .attr('r', pointSize);
+            return [createTransitionCompletionPromise(transition)];
         }
+        const transition = circles
+            .transition()
+            .duration(animation.duration)
+            .ease(animation.easing)
+            .attr('cx', (_, index) => validLineData[index]?.x ?? 0)
+            .attr('cy', (_, index) => validLineData[index]?.y ?? 0);
+        return [createTransitionCompletionPromise(transition)];
     }
     renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {
         const config = this.valueLabel;

package/dist/pie-chart.js

@@ -289,9 +289,6 @@ export class PieChart extends RadialChartBase {
             .attr('class', 'pie-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
         const total = segments.reduce((sum, segment) => sum + segment.value, 0);
-        const resolveTooltipDiv = () => this.tooltip
-            ? select(`#${this.tooltip.id}`)
-            : null;
         const segmentSelection = segmentGroup
             .selectAll('.pie-segment')
             .data(pieData)
@@ -313,19 +310,10 @@ export class PieChart extends RadialChartBase {
             segmentSelection
                 .filter((_, i, nodes) => nodes[i] !== target)
                 .style('opacity', 0.5);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv
-                    .style('visibility', 'visible')
-                    .html(this.buildTooltipContent(d, segments));
-                this.positionTooltipFromPointer(event, tooltipDiv);
-            }
+            this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
         })
             .on('mousemove', (event) => {
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                this.positionTooltipFromPointer(event, tooltipDiv);
-            }
+            this.positionTooltipFromPointer(event);
         })
             .on('mouseleave', (event, d) => {
             const target = event.currentTarget;
@@ -334,10 +322,7 @@ export class PieChart extends RadialChartBase {
                 .duration(ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
             segmentSelection.style('opacity', 1);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv.style('visibility', 'hidden');
-            }
+            this.hideTooltip();
         })
             .on('focus', (event, d) => {
             const target = event.currentTarget;
@@ -348,13 +333,7 @@ export class PieChart extends RadialChartBase {
             segmentSelection
                 .filter((_, i, nodes) => nodes[i] !== target)
                 .style('opacity', 0.5);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv
-                    .style('visibility', 'visible')
-                    .html(this.buildTooltipContent(d, segments));
-                this.positionTooltipAtElement(target, tooltipDiv);
-            }
+            this.showTooltipAtElement(target, this.buildTooltipContent(d, segments));
         })
             .on('blur', (event, d) => {
             const target = event.currentTarget;
@@ -363,10 +342,7 @@ export class PieChart extends RadialChartBase {
                 .duration(ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
             segmentSelection.style('opacity', 1);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv.style('visibility', 'hidden');
-            }
+            this.hideTooltip();
         })
             .on('keydown', (event) => {
             this.handleSegmentKeyNavigation(event);

package/dist/radial-chart-base.d.ts

@@ -1,4 +1,3 @@
-import type { Selection } from 'd3';
 import { BaseChart } from './base-chart.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 import type { LegendSeries } from './types.js';
@@ -17,8 +16,10 @@ export declare abstract class RadialChartBase extends BaseChart {
         fontScale: number;
     };
     protected getRadialLegendSeries<T extends RadialLegendItem>(items: T[]): LegendSeries[];
-    protected positionTooltipFromPointer(event: MouseEvent, tooltipDiv: Selection<HTMLDivElement, unknown, HTMLElement, undefined>): void;
-    protected positionTooltipAtElement(target: Element, tooltipDiv: Selection<HTMLDivElement, unknown, HTMLElement, undefined>): void;
+    protected showTooltipFromPointer(event: MouseEvent, content: string): void;
+    protected positionTooltipFromPointer(event: MouseEvent): void;
+    protected showTooltipAtElement(target: Element, content: string): void;
+    protected hideTooltip(): void;
     private applyTooltipPosition;
     private resolveRadialFontScale;
 }

package/dist/radial-chart-base.js

@@ -27,26 +27,38 @@ export class RadialChartBase extends BaseChart {
             fill: item.color,
         }));
     }
-    positionTooltipFromPointer(event, tooltipDiv) {
-        const node = tooltipDiv.node();
-        if (!node) {
+    showTooltipFromPointer(event, content) {
+        if (!this.tooltip) {
+            return;
+        }
+        this.tooltip.setContent(content);
+        this.positionTooltipFromPointer(event);
+    }
+    positionTooltipFromPointer(event) {
+        if (!this.tooltip) {
+            return;
+        }
+        const rect = this.tooltip.getBounds();
+        if (!rect) {
             return;
         }
-        const rect = node.getBoundingClientRect();
         let x = event.pageX + TOOLTIP_OFFSET_PX;
         const y = event.pageY - rect.height / 2;
         if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
             x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
         }
-        this.applyTooltipPosition(tooltipDiv, x, y, rect.height, rect.width);
+        this.applyTooltipPosition(x, y, rect.height, rect.width);
     }
-    positionTooltipAtElement(target, tooltipDiv) {
-        const node = tooltipDiv.node();
-        if (!node) {
+    showTooltipAtElement(target, content) {
+        if (!this.tooltip) {
             return;
         }
+        this.tooltip.setContent(content);
         const targetRect = target.getBoundingClientRect();
-        const tooltipRect = node.getBoundingClientRect();
+        const tooltipRect = this.tooltip.getBounds();
+        if (!tooltipRect) {
+            return;
+        }
         let x = targetRect.left +
             window.scrollX +
             targetRect.width / 2 +
@@ -62,12 +74,15 @@ export class RadialChartBase extends BaseChart {
                     tooltipRect.width -
                     TOOLTIP_OFFSET_PX;
         }
-        this.applyTooltipPosition(tooltipDiv, x, y, tooltipRect.height, tooltipRect.width);
+        this.applyTooltipPosition(x, y, tooltipRect.height, tooltipRect.width);
+    }
+    hideTooltip() {
+        this.tooltip?.hide();
     }
-    applyTooltipPosition(tooltipDiv, rawX, rawY, height, width) {
+    applyTooltipPosition(rawX, rawY, height, width) {
         const x = Math.max(EDGE_MARGIN_PX, Math.min(rawX, window.innerWidth + window.scrollX - width - EDGE_MARGIN_PX));
         const y = Math.max(EDGE_MARGIN_PX, Math.min(rawY, window.innerHeight + window.scrollY - height - EDGE_MARGIN_PX));
-        tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
+        this.tooltip?.showAt(x, y);
     }
     resolveRadialFontScale(outerRadius, theme) {
         const referenceHeight = this.configuredHeight ?? DEFAULT_CHART_HEIGHT;