@internetstiftelsen/charts 0.10.0 → 0.11.0

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/legend.js

@@ -106,15 +106,16 @@ export class Legend {
             writable: true,
             value: null
         });
-        this.mode = config?.mode ?? 'inline';
-        this.position = config?.position || 'bottom';
-        this.disconnectedTarget = config?.disconnectedTarget;
-        this.marginTop = config?.marginTop ?? 20;
-        this.marginBottom = config?.marginBottom ?? 10;
-        this.paddingX = config?.paddingX;
-        this.itemSpacingX = config?.itemSpacingX;
-        this.itemSpacingY = config?.itemSpacingY;
-        this.exportHooks = config?.exportHooks;
+        const { mode = 'inline', position = 'bottom', disconnectedTarget, marginTop = 20, marginBottom = 10, paddingX, itemSpacingX, itemSpacingY, exportHooks, } = config ?? {};
+        this.mode = mode;
+        this.position = position;
+        this.disconnectedTarget = disconnectedTarget;
+        this.marginTop = marginTop;
+        this.marginBottom = marginBottom;
+        this.paddingX = paddingX;
+        this.itemSpacingX = itemSpacingX;
+        this.itemSpacingY = itemSpacingY;
+        this.exportHooks = exportHooks;
         this.stateController = new LegendStateController();
         this.bindStateController(this.stateController);
     }

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;
@@ -123,7 +241,9 @@ export class Line {
         const plotBottom = y.range()[0];
         data.forEach((d) => {
             const value = parseValue(d[this.dataKey]);
-            const valueText = String(value);
+            const valueText = config.formatter
+                ? config.formatter(this.dataKey, value, d)
+                : String(value);
             const xPos = getXPosition(d);
             const yPos = y(value) || 0;
             // Create temporary text to measure dimensions

package/dist/pie-chart.d.ts

@@ -46,6 +46,9 @@ export declare class PieChart extends RadialChartBase {
     private segments;
     constructor(config: PieChartConfig);
     private validatePieData;
+    private validatePieConfig;
+    private validateValueLabelConfig;
+    private validateDataItems;
     private prepareSegments;
     private warnOnTinySlices;
     protected getExportComponents(): ChartComponentBase[];

package/dist/pie-chart.js

@@ -8,6 +8,17 @@ const FULL_CIRCLE_RADIANS = Math.PI * 2;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
 const TINY_SLICE_THRESHOLD_RATIO = 0.03;
+const DEFAULT_PIE_VALUE_LABEL = {
+    show: false,
+    position: 'auto',
+    minInsidePercentage: 8,
+    outsideOffset: 16,
+    insideMargin: 8,
+    minVerticalSpacing: 14,
+    formatter: (label, value, _data, _percentage) => {
+        return `${label}: ${value}`;
+    },
+};
 export class PieChart extends RadialChartBase {
     constructor(config) {
         super(config);
@@ -71,25 +82,31 @@ export class PieChart extends RadialChartBase {
             writable: true,
             value: []
         });
-        const pieConfig = config.pie ?? {};
-        this.innerRadiusRatio = pieConfig.innerRadius ?? 0;
-        this.startAngle = pieConfig.startAngle ?? 0;
-        this.endAngle = pieConfig.endAngle ?? FULL_CIRCLE_RADIANS;
-        this.padAngle = pieConfig.padAngle ?? this.theme.donut.padAngle;
-        this.cornerRadius =
-            pieConfig.cornerRadius ?? this.theme.donut.cornerRadius;
-        this.sort = pieConfig.sort ?? 'none';
-        this.valueKey = config.valueKey ?? 'value';
-        this.labelKey = config.labelKey ?? 'name';
+        const pieConfig = {
+            innerRadius: 0,
+            startAngle: 0,
+            endAngle: FULL_CIRCLE_RADIANS,
+            padAngle: this.theme.donut.padAngle,
+            cornerRadius: this.theme.donut.cornerRadius,
+            sort: 'none',
+            ...config.pie,
+        };
+        const resolvedConfig = {
+            valueKey: 'value',
+            labelKey: 'name',
+            ...config,
+        };
+        this.innerRadiusRatio = pieConfig.innerRadius;
+        this.startAngle = pieConfig.startAngle;
+        this.endAngle = pieConfig.endAngle;
+        this.padAngle = pieConfig.padAngle;
+        this.cornerRadius = pieConfig.cornerRadius;
+        this.sort = pieConfig.sort;
+        this.valueKey = resolvedConfig.valueKey;
+        this.labelKey = resolvedConfig.labelKey;
         this.valueLabel = {
-            show: config.valueLabel?.show ?? false,
-            position: config.valueLabel?.position ?? 'auto',
-            minInsidePercentage: config.valueLabel?.minInsidePercentage ?? 8,
-            outsideOffset: config.valueLabel?.outsideOffset ?? 16,
-            insideMargin: config.valueLabel?.insideMargin ?? 8,
-            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ?? 14,
-            formatter: config.valueLabel?.formatter ??
-                ((label, value, _data, _percentage) => `${label}: ${value}`),
+            ...DEFAULT_PIE_VALUE_LABEL,
+            ...config.valueLabel,
         };
         this.initializeDataState();
     }
@@ -97,6 +114,11 @@ export class PieChart extends RadialChartBase {
         ChartValidator.validateDataKey(this.data, this.labelKey, 'PieChart');
         ChartValidator.validateDataKey(this.data, this.valueKey, 'PieChart');
         ChartValidator.validateNumericData(this.data, this.valueKey, 'PieChart');
+        this.validatePieConfig();
+        this.validateValueLabelConfig();
+        this.validateDataItems();
+    }
+    validatePieConfig() {
         if (this.innerRadiusRatio < 0 || this.innerRadiusRatio > 1) {
             throw new Error(`PieChart: pie.innerRadius must be between 0 and 1, received '${this.innerRadiusRatio}'`);
         }
@@ -106,6 +128,8 @@ export class PieChart extends RadialChartBase {
         if (this.padAngle < 0) {
             throw new Error(`PieChart: pie.padAngle must be >= 0, received '${this.padAngle}'`);
         }
+    }
+    validateValueLabelConfig() {
         if (this.valueLabel.minInsidePercentage < 0 ||
             this.valueLabel.minInsidePercentage > 100) {
             throw new Error(`PieChart: valueLabel.minInsidePercentage must be between 0 and 100, received '${this.valueLabel.minInsidePercentage}'`);
@@ -119,6 +143,8 @@ export class PieChart extends RadialChartBase {
         if (this.valueLabel.minVerticalSpacing < 0) {
             throw new Error(`PieChart: valueLabel.minVerticalSpacing must be >= 0, received '${this.valueLabel.minVerticalSpacing}'`);
         }
+    }
+    validateDataItems() {
         for (const [index, item] of this.data.entries()) {
             const label = String(item[this.labelKey] ?? '').trim();
             if (!label) {
@@ -263,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)
@@ -287,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;
@@ -308,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;
@@ -322,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;
@@ -337,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;

package/dist/scatter.d.ts

@@ -1,6 +1,7 @@
 import type { ChartTheme, D3Scale, DataItem, ExportHooks, LineValueLabelConfig, ScaleType, ScatterConfig, ScatterConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { Selection } from 'd3';
+import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Scatter implements ChartComponent<ScatterConfigBase> {
     readonly type: "scatter";
     readonly dataKey: string;
@@ -11,6 +12,9 @@ export declare class Scatter implements ChartComponent<ScatterConfigBase> {
     constructor(config: ScatterConfig);
     getExportConfig(): ScatterConfigBase;
     createExportComponent(override?: Partial<ScatterConfigBase>): ChartComponent<ScatterConfigBase>;
-    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 buildAnimatedData;
+    private createSnapshot;
+    private renderPoints;
     private renderValueLabels;
 }