@internetstiftelsen/charts 0.10.0 → 0.11.0

package/dist/xy-chart.js

@@ -4,7 +4,19 @@ import { ChartValidationError, ChartValidator } from './validation.js';
 import { GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 import { resolveScaleValue } from './scale-utils.js';
 import { mergeDeep } from './utils.js';
+import { createXYMotionDriver, } from './xy-motion/driver.js';
+import { createXYSeriesSnapshotId } from './xy-motion/helpers.js';
 const DEFAULT_SERIES_COLOR = '#8884d8';
+function resolveBarStackSettings(config) {
+    return {
+        mode: config.barStack?.mode ?? 'normal',
+        gap: config.barStack?.gap ?? 0.1,
+        reverseSeries: config.barStack?.reverseSeries ?? false,
+    };
+}
+function resolveAreaStackMode(config) {
+    return config.areaStack?.mode ?? 'none';
+}
 function isXYSeries(component) {
     return (component.type === 'line' ||
         component.type === 'scatter' ||
@@ -50,17 +62,25 @@ export class XYChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "motionDriver", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "scaleConfigOverride", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        const barStack = resolveBarStackSettings(config);
         this.orientation = config.orientation ?? 'vertical';
-        this.barStackMode = config.barStack?.mode ?? 'normal';
-        this.barStackGap = config.barStack?.gap ?? 0.1;
-        this.barStackReverseSeries = config.barStack?.reverseSeries ?? false;
-        this.areaStackMode = config.areaStack?.mode ?? 'none';
+        this.barStackMode = barStack.mode;
+        this.barStackGap = barStack.gap;
+        this.barStackReverseSeries = barStack.reverseSeries;
+        this.areaStackMode = resolveAreaStackMode(config);
+        this.motionDriver = createXYMotionDriver(config.animate);
     }
     addChild(component) {
         if (isXYSeries(component)) {
@@ -101,7 +121,15 @@ export class XYChart extends BaseChart {
             areaStack: {
                 mode: this.areaStackMode,
             },
+            animate: false,
+        });
+    }
+    update(data) {
+        this.motionDriver.prepareForUpdate({
+            plotGroup: this.plotGroup,
+            visibleSeries: this.getVisibleSeries(),
         });
+        super.update(data);
     }
     applyComponentOverrides(overrides) {
         const restoreBase = super.applyComponentOverrides(overrides);
@@ -114,6 +142,7 @@ export class XYChart extends BaseChart {
     prepareLayout(context) {
         super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace?.();
+        this.yAxis?.clearEstimatedSpace?.();
         if (this.xAxis) {
             const xKey = this.getXKey();
             const labelKey = this.xAxis.labelKey;
@@ -125,24 +154,59 @@ export class XYChart extends BaseChart {
             });
             this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode);
         }
+        if (this.yAxis) {
+            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+        }
     }
-    renderChart({ svg, plotGroup, plotArea, }) {
-        this.validateSeriesOrientation();
-        this.series.forEach((series) => {
-            const typeName = this.getSeriesTypeName(series);
-            ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
-            ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
-        });
-        const valueScaleType = this.resolvedScaleConfig.y?.type ?? 'linear';
-        if (valueScaleType === 'log') {
-            this.series.forEach((series) => {
-                const typeName = this.getSeriesTypeName(series);
-                ChartValidator.validatePositiveData(this.data, series.dataKey, typeName);
+    getYAxisEstimateLabels() {
+        if (!this.yAxis) {
+            return [];
+        }
+        const yAxisConfig = this.yAxis.getExportConfig();
+        const { y: yConfig } = this.getResolvedAxisConfigs();
+        const tickFormat = yAxisConfig.tickFormat;
+        if (yConfig.type === 'band') {
+            const tickValues = this.resolveScaleDomain(yConfig, this.isHorizontalOrientation() ? this.getXKey() : null);
+            return tickValues.map((value) => {
+                if (typeof tickFormat === 'function') {
+                    return tickFormat(value);
+                }
+                return String(value);
             });
         }
-        if (this.xAxis?.dataKey) {
-            ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
+        const scale = this.createContinuousScaleForLayoutEstimate(yConfig);
+        const tickValues = scale.ticks(5);
+        if (typeof tickFormat === 'function') {
+            return tickValues.map((value) => tickFormat(value));
+        }
+        const tickFormatter = scale.tickFormat(5, typeof tickFormat === 'string' ? tickFormat : undefined);
+        return tickValues.map((value) => tickFormatter(value));
+    }
+    createContinuousScaleForLayoutEstimate(config) {
+        const domain = this.resolveScaleDomain(config, null);
+        switch (config.type) {
+            case 'linear': {
+                const scale = scaleLinear()
+                    .domain(domain)
+                    .rangeRound([100, 0]);
+                return config.nice === false ? scale : scale.nice();
+            }
+            case 'time': {
+                const scale = scaleTime()
+                    .domain(domain)
+                    .range([100, 0]);
+                return config.nice === false ? scale : scale.nice();
+            }
+            case 'log': {
+                const scale = scaleLog()
+                    .domain(domain)
+                    .rangeRound([100, 0]);
+                return config.nice === false ? scale : scale.nice();
+            }
         }
+    }
+    renderChart({ svg, plotGroup, plotArea, }) {
+        this.validateRenderState();
         const xKey = this.getXKey();
         const categoryScaleType = this.getCategoryScaleType();
         const visibleSeries = this.getVisibleSeries();
@@ -151,21 +215,10 @@ export class XYChart extends BaseChart {
         if (this.grid && this.x && this.y) {
             this.grid.render(plotGroup, this.x, this.y, this.renderTheme, this.isHorizontalOrientation());
         }
-        this.renderSeries(visibleSeries);
-        if (this.x && this.y) {
-            if (this.xAxis) {
-                this.xAxis.render(svg, this.x, this.renderTheme, plotArea.bottom, this.data);
-            }
-            if (this.yAxis) {
-                this.yAxis.render(svg, this.y, this.renderTheme, plotArea.left);
-            }
-        }
-        if (this.tooltip && this.x && this.y) {
-            const visibleAreaSeries = visibleSeries.filter((series) => series.type === 'area');
-            const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, visibleAreaSeries);
-            this.tooltip.initialize(this.renderTheme);
-            this.tooltip.attachToArea(svg, this.data, visibleSeries, xKey, this.x, this.y, this.renderTheme, plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
-        }
+        const motionResult = this.renderSeries(visibleSeries);
+        this.setReadyPromise(this.motionDriver.completeRender(motionResult));
+        this.renderAxes(svg, plotArea);
+        this.attachTooltip(svg, plotArea, visibleSeries, xKey, categoryScaleType);
         this.renderInlineLegend(svg);
     }
     getXKey() {
@@ -487,6 +540,84 @@ export class XYChart extends BaseChart {
         const scaleType = config.type;
         const [rangeStart, rangeEnd] = this.getScaleRange(axis, scaleType, config.reverse ?? false);
         const domain = this.resolveScaleDomain(config, dataKey);
+        this.validateExplicitBarValueDomain(config, dataKey, scaleType, domain);
+        this.validateScaleDomain(scaleType, domain);
+        return this.buildScale(scaleType, domain, [rangeStart, rangeEnd], config);
+    }
+    resolveScaleDomain(config, dataKey) {
+        const buckets = this.getSeriesBuckets();
+        const stackedAreaGroups = this.getStackedAreaGroups(buckets.areaSeries);
+        if (this.isBarValueScale(config.type, dataKey, buckets.barSeries) &&
+            config.type === 'log') {
+            throw new ChartValidationError('XYChart: bar series require a linear value axis because bars need a zero baseline');
+        }
+        const domain = this.resolveRawScaleDomain(config, dataKey, buckets, stackedAreaGroups);
+        return this.applyNiceDomain(config, domain);
+    }
+    getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries) {
+        const rawValue = dataPoint[series.dataKey];
+        if (rawValue === null || rawValue === undefined) {
+            return NaN;
+        }
+        const parsedValue = this.parseValue(rawValue);
+        if (!Number.isFinite(parsedValue)) {
+            return NaN;
+        }
+        if (series.type === 'bar') {
+            return series.getRenderedValue(parsedValue, this.orientation);
+        }
+        if (series.type !== 'area') {
+            return parsedValue;
+        }
+        return this.getAreaTooltipValue(dataPoint, xKey, parsedValue, areaStackingContextBySeries.get(series));
+    }
+    validateRenderState() {
+        this.validateSeriesOrientation();
+        this.validateSeriesData();
+        this.validateValueScaleRequirements();
+        this.validateXAxisDataKey();
+    }
+    validateSeriesData() {
+        this.series.forEach((series) => {
+            const typeName = this.getSeriesTypeName(series);
+            ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
+            ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
+        });
+    }
+    validateValueScaleRequirements() {
+        if ((this.resolvedScaleConfig.y?.type ?? 'linear') !== 'log') {
+            return;
+        }
+        this.series.forEach((series) => {
+            ChartValidator.validatePositiveData(this.data, series.dataKey, this.getSeriesTypeName(series));
+        });
+    }
+    validateXAxisDataKey() {
+        if (this.xAxis?.dataKey) {
+            ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
+        }
+    }
+    renderAxes(svg, plotArea) {
+        if (!this.x || !this.y) {
+            return;
+        }
+        if (this.xAxis) {
+            this.xAxis.render(svg, this.x, this.renderTheme, plotArea.bottom, this.data);
+        }
+        if (this.yAxis) {
+            this.yAxis.render(svg, this.y, this.renderTheme, plotArea.left);
+        }
+    }
+    attachTooltip(svg, plotArea, visibleSeries, xKey, categoryScaleType) {
+        if (!this.tooltip || !this.x || !this.y) {
+            return;
+        }
+        const visibleAreaSeries = visibleSeries.filter((series) => series.type === 'area');
+        const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, visibleAreaSeries);
+        this.tooltip.initialize(this.renderTheme);
+        this.tooltip.attachToArea(svg, this.data, visibleSeries, xKey, this.x, this.y, this.renderTheme, plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
+    }
+    validateExplicitBarValueDomain(config, dataKey, scaleType, domain) {
         if (dataKey === null &&
             this.series.some((series) => series.type === 'bar') &&
             (scaleType === 'linear' || scaleType === 'log') &&
@@ -495,133 +626,154 @@ export class XYChart extends BaseChart {
                 config.max !== undefined)) {
             ChartValidator.validateBarDomainIncludesZero(domain);
         }
+    }
+    validateScaleDomain(scaleType, domain) {
         if (scaleType === 'log') {
             ChartValidator.validateScaleConfig(scaleType, domain);
         }
+    }
+    buildScale(scaleType, domain, range, config) {
         switch (scaleType) {
-            case 'band': {
-                const scale = scaleBand()
+            case 'band':
+                return scaleBand()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
-                if (config.padding !== undefined) {
-                    scale.paddingInner(config.padding);
-                }
-                else {
-                    scale.paddingInner(0.1);
-                }
-                return scale;
-            }
+                    .rangeRound(range)
+                    .paddingInner(config.padding ?? 0.1);
             case 'linear': {
                 const scale = scaleLinear()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
+                    .rangeRound(range);
                 return config.nice === false ? scale : scale.nice();
             }
             case 'time': {
                 const scale = scaleTime()
                     .domain(domain)
-                    .range([rangeStart, rangeEnd]);
+                    .range(range);
                 return config.nice === false ? scale : scale.nice();
             }
             case 'log': {
                 const scale = scaleLog()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
+                    .rangeRound(range);
                 return config.nice === false ? scale : scale.nice();
             }
             default:
                 throw new Error(`Unsupported scale type: ${scaleType}`);
         }
     }
-    resolveScaleDomain(config, dataKey) {
-        const barSeries = this.series.filter((s) => s.type === 'bar');
-        const lineSeries = this.series.filter((s) => s.type === 'line');
-        const scatterSeries = this.series.filter((s) => s.type === 'scatter');
-        const areaSeries = this.series.filter((s) => s.type === 'area');
-        const stackedAreaGroups = this.getStackedAreaGroups(areaSeries);
-        const isBarValueScale = dataKey === null &&
+    getSeriesBuckets() {
+        return {
+            barSeries: this.series.filter((s) => s.type === 'bar'),
+            lineSeries: this.series.filter((s) => s.type === 'line'),
+            scatterSeries: this.series.filter((s) => s.type === 'scatter'),
+            areaSeries: this.series.filter((s) => s.type === 'area'),
+        };
+    }
+    isBarValueScale(scaleType, dataKey, barSeries) {
+        return (dataKey === null &&
             barSeries.length > 0 &&
-            (config.type === 'linear' || config.type === 'log');
-        let domain;
-        if (isBarValueScale && config.type === 'log') {
-            throw new ChartValidationError('XYChart: bar series require a linear value axis because bars need a zero baseline');
-        }
+            (scaleType === 'linear' || scaleType === 'log'));
+    }
+    resolveRawScaleDomain(config, dataKey, buckets, stackedAreaGroups) {
         if (config.domain) {
-            domain = config.domain;
-        }
-        else if (config.type === 'band' && dataKey) {
-            domain = this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
-        }
-        else if (config.type === 'time' && dataKey) {
-            domain = [
-                min(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
-                max(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
-            ];
-        }
-        else if ((config.type === 'linear' || config.type === 'log') &&
-            dataKey) {
-            const values = this.data
-                .map((d) => this.parseValue(d[dataKey]))
-                .filter((value) => Number.isFinite(value));
-            const minVal = config.min ?? min(values) ?? 0;
-            const maxVal = config.max ?? max(values) ?? 100;
-            domain = [minVal, maxVal];
+            return config.domain;
         }
-        else {
-            const hasPercentBars = this.barStackMode === 'percent' && barSeries.length > 0;
-            const hasPercentAreas = this.areaStackMode === 'percent' && stackedAreaGroups.size > 0;
-            if (hasPercentBars || hasPercentAreas) {
-                let minDomain = 0;
-                let maxDomain = 100;
-                if (hasPercentBars) {
-                    [minDomain, maxDomain] = this.getBarValueDomain(this.getXKey(), barSeries);
-                }
-                if (hasPercentAreas) {
-                    minDomain = Math.min(minDomain, 0);
-                    maxDomain = Math.max(maxDomain, 100);
-                }
-                domain = [minDomain, maxDomain];
-            }
-            else {
-                const values = this.collectSeriesValues([
-                    ...lineSeries,
-                    ...scatterSeries,
-                    ...areaSeries,
-                ]);
-                const stackedValues = [];
-                const minCandidates = [...values];
-                const maxCandidates = [...values];
-                if (barSeries.length > 0) {
-                    const [barMin, barMax] = this.getBarValueDomain(this.getXKey(), barSeries);
-                    minCandidates.push(barMin);
-                    maxCandidates.push(barMax);
-                }
-                const stackedAreaKeys = new Set();
-                stackedAreaGroups.forEach((stackSeries) => {
-                    stackSeries.forEach((series) => {
-                        stackedAreaKeys.add(series.dataKey);
-                    });
-                    this.data.forEach((dataPoint) => {
-                        const total = stackSeries.reduce((sum, series) => {
-                            const value = this.parseValue(dataPoint[series.dataKey]);
-                            return Number.isFinite(value) ? sum + value : sum;
-                        }, 0);
-                        stackedValues.push(total);
-                    });
-                    minCandidates.push(0);
-                });
-                areaSeries
-                    .filter((series) => !stackedAreaKeys.has(series.dataKey))
-                    .forEach((series) => {
-                    minCandidates.push(series.baseline);
-                });
-                const minVal = config.min ?? min(minCandidates) ?? 0;
-                const maxVal = config.max ??
-                    max([...maxCandidates, ...stackedValues]) ??
-                    100;
-                domain = [minVal, maxVal];
-            }
+        if (config.type === 'band' && dataKey) {
+            return this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
         }
+        if (config.type === 'time' && dataKey) {
+            return this.resolveTimeDomain(dataKey);
+        }
+        if ((config.type === 'linear' || config.type === 'log') && dataKey) {
+            return this.resolveNumericDataKeyDomain(config, dataKey);
+        }
+        return this.resolveSeriesValueDomain(config, buckets, stackedAreaGroups);
+    }
+    resolveTimeDomain(dataKey) {
+        return [
+            min(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
+            max(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
+        ];
+    }
+    resolveNumericDataKeyDomain(config, dataKey) {
+        const values = this.data
+            .map((d) => this.parseValue(d[dataKey]))
+            .filter((value) => Number.isFinite(value));
+        return [
+            config.min ?? min(values) ?? 0,
+            config.max ?? max(values) ?? 100,
+        ];
+    }
+    resolveSeriesValueDomain(config, buckets, stackedAreaGroups) {
+        if (this.hasPercentValueDomain(buckets.barSeries, stackedAreaGroups)) {
+            return this.resolvePercentValueDomain(buckets.barSeries, stackedAreaGroups);
+        }
+        return this.resolveStandardValueDomain(config, buckets, stackedAreaGroups);
+    }
+    hasPercentValueDomain(barSeries, stackedAreaGroups) {
+        return ((this.barStackMode === 'percent' && barSeries.length > 0) ||
+            (this.areaStackMode === 'percent' && stackedAreaGroups.size > 0));
+    }
+    resolvePercentValueDomain(barSeries, stackedAreaGroups) {
+        let minDomain = 0;
+        let maxDomain = 100;
+        if (this.barStackMode === 'percent' && barSeries.length > 0) {
+            [minDomain, maxDomain] = this.getBarValueDomain(this.getXKey(), barSeries);
+        }
+        if (this.areaStackMode === 'percent' && stackedAreaGroups.size > 0) {
+            minDomain = Math.min(minDomain, 0);
+            maxDomain = Math.max(maxDomain, 100);
+        }
+        return [minDomain, maxDomain];
+    }
+    resolveStandardValueDomain(config, buckets, stackedAreaGroups) {
+        const values = this.collectSeriesValues([
+            ...buckets.lineSeries,
+            ...buckets.scatterSeries,
+            ...buckets.areaSeries,
+        ]);
+        const minCandidates = [...values];
+        const maxCandidates = [...values];
+        const stackedValues = this.collectStackedAreaTotals(stackedAreaGroups);
+        if (buckets.barSeries.length > 0) {
+            const [barMin, barMax] = this.getBarValueDomain(this.getXKey(), buckets.barSeries);
+            minCandidates.push(barMin);
+            maxCandidates.push(barMax);
+        }
+        this.addAreaBaselines(minCandidates, buckets.areaSeries, stackedAreaGroups);
+        return [
+            config.min ?? min(minCandidates) ?? 0,
+            config.max ?? max([...maxCandidates, ...stackedValues]) ?? 100,
+        ];
+    }
+    collectStackedAreaTotals(stackedAreaGroups) {
+        const stackedValues = [];
+        stackedAreaGroups.forEach((stackSeries) => {
+            this.data.forEach((dataPoint) => {
+                const total = stackSeries.reduce((sum, series) => {
+                    const value = this.parseValue(dataPoint[series.dataKey]);
+                    return Number.isFinite(value) ? sum + value : sum;
+                }, 0);
+                stackedValues.push(total);
+            });
+        });
+        return stackedValues;
+    }
+    addAreaBaselines(minCandidates, areaSeries, stackedAreaGroups) {
+        const stackedAreaKeys = new Set();
+        stackedAreaGroups.forEach((stackSeries) => {
+            stackSeries.forEach((series) => {
+                stackedAreaKeys.add(series.dataKey);
+            });
+            minCandidates.push(0);
+        });
+        areaSeries
+            .filter((series) => !stackedAreaKeys.has(series.dataKey))
+            .forEach((series) => {
+            minCandidates.push(series.baseline);
+        });
+    }
+    applyNiceDomain(config, domain) {
         if (config.nice === false) {
             return domain;
         }
@@ -645,22 +797,7 @@ export class XYChart extends BaseChart {
         }
         return domain;
     }
-    getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries) {
-        const rawValue = dataPoint[series.dataKey];
-        if (rawValue === null || rawValue === undefined) {
-            return NaN;
-        }
-        const parsedValue = this.parseValue(rawValue);
-        if (!Number.isFinite(parsedValue)) {
-            return NaN;
-        }
-        if (series.type !== 'area') {
-            if (series.type === 'bar') {
-                return series.getRenderedValue(parsedValue, this.orientation);
-            }
-            return parsedValue;
-        }
-        const stackingContext = areaStackingContextBySeries.get(series);
+    getAreaTooltipValue(dataPoint, xKey, parsedValue, stackingContext) {
         if (!stackingContext || stackingContext.mode === 'none') {
             return parsedValue;
         }
@@ -677,7 +814,10 @@ export class XYChart extends BaseChart {
     }
     renderSeries(visibleSeries) {
         if (!this.plotGroup || !this.x || !this.y) {
-            return;
+            return {
+                snapshotCollection: new Map(),
+                transitions: [],
+            };
         }
         const xKey = this.getXKey();
         const categoryScaleType = this.getCategoryScaleType();
@@ -692,6 +832,8 @@ export class XYChart extends BaseChart {
             : null;
         const { cumulativeDataBySeriesIndex, positiveCumulativeDataBySeriesIndex, negativeCumulativeDataBySeriesIndex, totalData, positiveTotalData, negativeTotalData, rawValuesBySeriesIndex, } = this.computeStackingData(this.data, xKey, barSeries);
         const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, areaSeries);
+        const snapshotCollection = new Map();
+        const transitions = [];
         barSeries.forEach((series, barIndex) => {
             const nextLayerData = this.barStackMode === 'layer'
                 ? rawValuesBySeriesIndex.get(barIndex + 1)
@@ -711,20 +853,83 @@ export class XYChart extends BaseChart {
                 gap: this.barStackGap,
                 nextLayerData,
             };
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, stackingContext, this.orientation);
+            const result = series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, stackingContext, this.orientation, this.motionDriver.getBarAnimationContext(series, this.getBarBaselinePosition()));
+            snapshotCollection.set(createXYSeriesSnapshotId(series.type, series.dataKey), result.snapshot);
+            transitions.push(...result.transitions);
         });
         areaSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined);
+            const result = series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined, this.motionDriver.getAreaAnimationContext(series));
+            snapshotCollection.set(createXYSeriesSnapshotId(series.type, series.dataKey), result.snapshot);
+            transitions.push(...result.transitions);
         });
         lineSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme);
+            const result = series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, this.motionDriver.getPointAnimationContext(series, this.getPointBaselineY()));
+            snapshotCollection.set(createXYSeriesSnapshotId(series.type, series.dataKey), result.snapshot);
+            transitions.push(...result.transitions);
         });
         scatterSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme);
+            const result = series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, this.motionDriver.getPointAnimationContext(series, this.getPointBaselineY()));
+            snapshotCollection.set(createXYSeriesSnapshotId(series.type, series.dataKey), result.snapshot);
+            transitions.push(...result.transitions);
         });
         if (areaValueLabelLayer) {
             areaValueLabelLayer.raise();
         }
+        return {
+            snapshotCollection,
+            transitions,
+        };
+    }
+    getBarBaselinePosition() {
+        const valueScale = this.isHorizontalOrientation() ? this.x : this.y;
+        if (!valueScale) {
+            return 0;
+        }
+        return valueScale(0) ?? 0;
+    }
+    getPointBaselineY() {
+        if (!this.y) {
+            return 0;
+        }
+        const numericDomain = this.getNumericPointBaselineDomain();
+        if (!numericDomain) {
+            return this.getPointBaselineFallback();
+        }
+        const baselineValue = this.getPointBaselineValue(numericDomain);
+        return (this.y(baselineValue) ?? this.getPointBaselineFallback());
+    }
+    getNumericPointBaselineDomain() {
+        if (!this.y) {
+            return null;
+        }
+        const domain = this.y.domain?.();
+        if (!Array.isArray(domain) ||
+            domain.length < 2 ||
+            typeof domain[0] !== 'number' ||
+            typeof domain[1] !== 'number') {
+            return null;
+        }
+        return [domain[0], domain[1]];
+    }
+    getPointBaselineValue(domain) {
+        const minValue = Math.min(...domain);
+        const maxValue = Math.max(...domain);
+        if (minValue <= 0 && maxValue >= 0) {
+            return 0;
+        }
+        return Math.abs(domain[0]) <= Math.abs(domain[1])
+            ? domain[0]
+            : domain[1];
+    }
+    getPointBaselineFallback() {
+        if (!this.y) {
+            return 0;
+        }
+        const range = this.y.range?.();
+        if (!Array.isArray(range) || range.length === 0) {
+            return 0;
+        }
+        return Math.max(...range);
     }
     computeStackingData(data, xKey, barSeries) {
         const cumulativeDataBySeriesIndex = new Map();

package/dist/xy-motion/config.d.ts

@@ -0,0 +1,2 @@
+import type { NormalizedXYAnimation, XYAnimationConfig } from './types.js';
+export declare function normalizeXYAnimationConfig(config: boolean | XYAnimationConfig | undefined): NormalizedXYAnimation;