@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/xy-chart.js

@@ -1,11 +1,13 @@
 import { max, min, scaleBand, scaleLinear, scaleLog, scaleTime, } from 'd3';
 import { BaseChart, } from './base-chart.js';
-import { ChartValidator } from './validation.js';
+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';
 const DEFAULT_SERIES_COLOR = '#8884d8';
 function isXYSeries(component) {
     return (component.type === 'line' ||
+        component.type === 'scatter' ||
         component.type === 'bar' ||
         component.type === 'area');
 }
@@ -48,6 +50,12 @@ export class XYChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "scaleConfigOverride", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         this.orientation = config.orientation ?? 'vertical';
         this.barStackMode = config.barStack?.mode ?? 'normal';
         this.barStackGap = config.barStack?.gap ?? 0.1;
@@ -82,7 +90,7 @@ export class XYChart extends BaseChart {
             width: this.configuredWidth,
             height: this.configuredHeight,
             theme: this.theme,
-            scales: this.scaleConfig,
+            scales: this.resolvedScaleConfig,
             responsive: this.responsiveConfig,
             orientation: this.orientation,
             barStack: {
@@ -106,6 +114,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;
@@ -117,32 +126,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 = series.type === 'line'
-                ? 'Line'
-                : series.type === 'bar'
-                    ? 'Bar'
-                    : 'Area';
-            ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
-            ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
-        });
-        const valueScaleType = this.scaleConfig.y?.type ?? 'linear';
-        if (valueScaleType === 'log') {
-            this.series.forEach((series) => {
-                const typeName = series.type === 'line'
-                    ? 'Line'
-                    : series.type === 'bar'
-                        ? 'Bar'
-                        : 'Area';
-                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();
@@ -152,20 +188,8 @@ export class XYChart extends BaseChart {
             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));
-        }
+        this.renderAxes(svg, plotArea);
+        this.attachTooltip(svg, plotArea, visibleSeries, xKey, categoryScaleType);
         this.renderInlineLegend(svg);
     }
     getXKey() {
@@ -177,7 +201,7 @@ export class XYChart extends BaseChart {
     getLegendSeries() {
         const displaySeries = this.getDisplaySeries();
         return displaySeries.map((series) => {
-            if (series.type === 'line') {
+            if (series.type === 'line' || series.type === 'scatter') {
                 return {
                     dataKey: series.dataKey,
                     stroke: series.stroke,
@@ -190,7 +214,45 @@ export class XYChart extends BaseChart {
         });
     }
     getCategoryScaleType() {
-        return this.scaleConfig.x?.type || 'band';
+        return this.resolvedScaleConfig.x?.type || 'band';
+    }
+    getOrientation() {
+        return this.orientation;
+    }
+    getValueAxisScaleType() {
+        if (this.orientation !== 'vertical') {
+            return null;
+        }
+        return this.resolvedScaleConfig.y?.type ?? 'linear';
+    }
+    getValueAxisDomain() {
+        return this.resolveValueAxisDomain(this.resolvedScaleConfig);
+    }
+    getBaseValueAxisDomain() {
+        return this.resolveValueAxisDomain(this.scaleConfig);
+    }
+    setScaleConfigOverride(override, rerender = true) {
+        this.scaleConfigOverride = override;
+        if (rerender) {
+            this.rerender();
+        }
+        return this;
+    }
+    resolveValueAxisDomain(scaleConfig) {
+        if (this.orientation !== 'vertical') {
+            return null;
+        }
+        const yConfig = this.getAxisConfigsForScaleConfig(scaleConfig).y;
+        if (yConfig.type !== 'linear' && yConfig.type !== 'log') {
+            return null;
+        }
+        const domain = this.resolveScaleDomain(yConfig, null);
+        if (domain.length < 2 ||
+            typeof domain[0] !== 'number' ||
+            typeof domain[1] !== 'number') {
+            return null;
+        }
+        return [domain[0], domain[1]];
     }
     getVisibleSeries() {
         return this.filterVisibleItems(this.getDisplaySeries(), (series) => {
@@ -228,6 +290,13 @@ export class XYChart extends BaseChart {
                     : series.stroke,
             });
         }
+        if (series.type === 'scatter') {
+            return this.cloneSeriesWithOverride(series, {
+                stroke: this.shouldReplaceSeriesColor(series.stroke)
+                    ? paletteColor
+                    : series.stroke,
+            });
+        }
         if (series.type === 'bar') {
             return this.cloneSeriesWithOverride(series, {
                 fill: this.shouldReplaceSeriesColor(series.fill)
@@ -253,23 +322,59 @@ export class XYChart extends BaseChart {
     }
     setupScales() {
         const xKey = this.getXKey();
-        const isHorizontal = this.orientation === 'horizontal';
-        let xConfig;
-        let yConfig;
-        if (isHorizontal) {
-            xConfig = this.scaleConfig.y || { type: 'linear' };
-            yConfig = this.scaleConfig.x || { type: 'band' };
-        }
-        else {
-            xConfig = this.scaleConfig.x || { type: 'band' };
-            yConfig = this.scaleConfig.y || { type: 'linear' };
-        }
+        const isHorizontal = this.isHorizontalOrientation();
+        const { x: xConfig, y: yConfig } = this.getResolvedAxisConfigs();
         this.x = this.createScale(xConfig, isHorizontal ? null : xKey, 'x');
         this.y = this.createScale(yConfig, isHorizontal ? xKey : null, 'y');
     }
+    get resolvedScaleConfig() {
+        if (!this.scaleConfigOverride) {
+            return this.scaleConfig;
+        }
+        return mergeDeep(this.scaleConfig, this.scaleConfigOverride);
+    }
+    getResolvedAxisConfigs() {
+        return this.getAxisConfigsForScaleConfig(this.resolvedScaleConfig);
+    }
+    getAxisConfigsForScaleConfig(scaleConfig) {
+        if (this.isHorizontalOrientation()) {
+            return {
+                x: {
+                    type: 'linear',
+                    ...(scaleConfig.y ?? {}),
+                },
+                y: {
+                    type: 'band',
+                    ...(scaleConfig.x ?? {}),
+                },
+            };
+        }
+        return {
+            x: {
+                type: 'band',
+                ...(scaleConfig.x ?? {}),
+            },
+            y: {
+                type: 'linear',
+                ...(scaleConfig.y ?? {}),
+            },
+        };
+    }
     isHorizontalOrientation() {
         return this.orientation === 'horizontal';
     }
+    getSeriesTypeName(series) {
+        switch (series.type) {
+            case 'line':
+                return 'Line';
+            case 'scatter':
+                return 'Scatter';
+            case 'bar':
+                return 'Bar';
+            case 'area':
+                return 'Area';
+        }
+    }
     validateSeriesOrientation() {
         if (this.orientation !== 'horizontal') {
             return;
@@ -277,10 +382,13 @@ export class XYChart extends BaseChart {
         const hasLineSeries = this.series.some((series) => {
             return series.type === 'line';
         });
+        const hasScatterSeries = this.series.some((series) => {
+            return series.type === 'scatter';
+        });
         const hasAreaSeries = this.series.some((series) => {
             return series.type === 'area';
         });
-        if (hasLineSeries || hasAreaSeries) {
+        if (hasLineSeries || hasScatterSeries || hasAreaSeries) {
             throw new Error('XYChart: horizontal orientation currently supports Bar series only');
         }
     }
@@ -296,6 +404,35 @@ export class XYChart extends BaseChart {
         });
         return values;
     }
+    getBarPercentDomain(positiveTotalData, negativeTotalData) {
+        const hasPositive = Array.from(positiveTotalData.values()).some((value) => value > 0);
+        const hasNegative = Array.from(negativeTotalData.values()).some((value) => value > 0);
+        if (hasPositive && hasNegative) {
+            return [-100, 100];
+        }
+        if (hasNegative) {
+            return [-100, 0];
+        }
+        return [0, 100];
+    }
+    getBarValueDomain(xKey, barSeries) {
+        if (barSeries.length === 0) {
+            return [0, 0];
+        }
+        const { positiveTotalData, negativeTotalData, rawValuesBySeriesIndex } = this.computeStackingData(this.data, xKey, barSeries);
+        if (this.barStackMode === 'percent') {
+            return this.getBarPercentDomain(positiveTotalData, negativeTotalData);
+        }
+        if (this.barStackMode === 'normal') {
+            const maxPositiveTotal = max(Array.from(positiveTotalData.values())) ?? 0;
+            const maxNegativeTotal = max(Array.from(negativeTotalData.values())) ?? 0;
+            return [-maxNegativeTotal, maxPositiveTotal];
+        }
+        const rawValues = Array.from(rawValuesBySeriesIndex.values()).flatMap((seriesValues) => Array.from(seriesValues.values()));
+        const minValue = min(rawValues) ?? 0;
+        const maxValue = max(rawValues) ?? 0;
+        return [Math.min(minValue, 0), Math.max(maxValue, 0)];
+    }
     getStackedAreaGroups(areaSeries) {
         const groups = new Map();
         if (this.areaStackMode === 'none') {
@@ -346,149 +483,292 @@ export class XYChart extends BaseChart {
         });
         return domain;
     }
-    createScale(config, dataKey, axis) {
+    getScaleRange(axis, scaleType, reverse) {
         if (!this.plotArea) {
             throw new Error('Plot area not calculated');
         }
-        const scaleType = config.type || (axis === 'x' ? 'band' : 'linear');
-        const isXAxis = axis === 'x';
         const plotPadding = 10;
-        const rangeStart = isXAxis
-            ? this.plotArea.left + plotPadding
-            : this.plotArea.bottom - plotPadding;
-        const rangeEnd = isXAxis ? this.plotArea.right : this.plotArea.top;
-        let domain;
-        if (config.domain) {
-            domain = config.domain;
+        let rangeStart;
+        let rangeEnd;
+        if (axis === 'x') {
+            rangeStart = this.plotArea.left + plotPadding;
+            rangeEnd = this.plotArea.right;
         }
-        else if (scaleType === 'band' && dataKey) {
-            domain = this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
+        else if (scaleType === 'band') {
+            rangeStart = this.plotArea.top;
+            rangeEnd = this.plotArea.bottom - plotPadding;
         }
-        else if (scaleType === 'time' && dataKey) {
-            domain = [
-                min(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
-                max(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
-            ];
+        else {
+            rangeStart = this.plotArea.bottom - plotPadding;
+            rangeEnd = this.plotArea.top;
         }
-        else if ((scaleType === 'linear' || scaleType === '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 reverse ? [rangeEnd, rangeStart] : [rangeStart, rangeEnd];
+    }
+    createScale(config, dataKey, axis) {
+        if (!this.plotArea) {
+            throw new Error('Plot area not calculated');
         }
-        else {
-            const barSeries = this.series.filter((s) => s.type === 'bar');
-            const lineSeries = this.series.filter((s) => s.type === 'line');
-            const areaSeries = this.series.filter((s) => s.type === 'area');
-            const stackedAreaGroups = this.getStackedAreaGroups(areaSeries);
-            if ((this.barStackMode === 'percent' && barSeries.length > 0) ||
-                (this.areaStackMode === 'percent' && stackedAreaGroups.size > 0)) {
-                domain = [0, 100];
-            }
-            else {
-                const values = this.collectSeriesValues([
-                    ...lineSeries,
-                    ...barSeries,
-                    ...areaSeries,
-                ]);
-                const stackedValues = [];
-                const minCandidates = [...values];
-                if (this.barStackMode === 'normal' && barSeries.length > 1) {
-                    this.data.forEach((dataPoint) => {
-                        const total = barSeries.reduce((sum, series) => {
-                            const value = this.parseValue(dataPoint[series.dataKey]);
-                            return Number.isFinite(value) ? sum + value : sum;
-                        }, 0);
-                        stackedValues.push(total);
-                    });
-                    minCandidates.push(0);
-                }
-                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([...values, ...stackedValues]) ?? 100;
-                domain = [minVal, maxVal];
-            }
+        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') &&
+            (config.domain !== undefined ||
+                config.min !== undefined ||
+                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]);
-                if (config.nice !== false) {
-                    scale.nice();
-                }
-                return scale;
+                    .rangeRound(range);
+                return config.nice === false ? scale : scale.nice();
             }
             case 'time': {
                 const scale = scaleTime()
                     .domain(domain)
-                    .range([rangeStart, rangeEnd]);
-                if (config.nice !== false) {
-                    scale.nice();
-                }
-                return scale;
+                    .range(range);
+                return config.nice === false ? scale : scale.nice();
             }
             case 'log': {
                 const scale = scaleLog()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
-                if (config.nice !== false) {
-                    scale.nice();
-                }
-                return scale;
+                    .rangeRound(range);
+                return config.nice === false ? scale : scale.nice();
             }
             default:
                 throw new Error(`Unsupported scale type: ${scaleType}`);
         }
     }
-    getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries) {
-        const rawValue = dataPoint[series.dataKey];
-        if (rawValue === null || rawValue === undefined) {
-            return NaN;
+    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 &&
+            (scaleType === 'linear' || scaleType === 'log'));
+    }
+    resolveRawScaleDomain(config, dataKey, buckets, stackedAreaGroups) {
+        if (config.domain) {
+            return config.domain;
         }
-        const parsedValue = this.parseValue(rawValue);
-        if (!Number.isFinite(parsedValue)) {
-            return NaN;
+        if (config.type === 'band' && dataKey) {
+            return this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
         }
-        if (series.type !== 'area') {
-            return parsedValue;
+        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;
+        }
+        if (config.type === 'linear') {
+            return scaleLinear()
+                .domain(domain)
+                .nice()
+                .domain();
+        }
+        if (config.type === 'time') {
+            return scaleTime()
+                .domain(domain)
+                .nice()
+                .domain();
+        }
+        if (config.type === 'log') {
+            return scaleLog()
+                .domain(domain)
+                .nice()
+                .domain();
         }
-        const stackingContext = areaStackingContextBySeries.get(series);
+        return domain;
+    }
+    getAreaTooltipValue(dataPoint, xKey, parsedValue, stackingContext) {
         if (!stackingContext || stackingContext.mode === 'none') {
             return parsedValue;
         }
@@ -512,12 +792,13 @@ export class XYChart extends BaseChart {
         const barSeries = visibleSeries.filter((s) => s.type === 'bar');
         const areaSeries = visibleSeries.filter((s) => s.type === 'area');
         const lineSeries = visibleSeries.filter((s) => s.type === 'line');
+        const scatterSeries = visibleSeries.filter((s) => s.type === 'scatter');
         const areaValueLabelLayer = areaSeries.length > 0
             ? this.plotGroup
                 .append('g')
                 .attr('class', 'area-value-label-layer')
             : null;
-        const { cumulativeDataBySeriesIndex, totalData, rawValuesBySeriesIndex, } = this.computeStackingData(this.data, xKey, barSeries);
+        const { cumulativeDataBySeriesIndex, positiveCumulativeDataBySeriesIndex, negativeCumulativeDataBySeriesIndex, totalData, positiveTotalData, negativeTotalData, rawValuesBySeriesIndex, } = this.computeStackingData(this.data, xKey, barSeries);
         const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, areaSeries);
         barSeries.forEach((series, barIndex) => {
             const nextLayerData = this.barStackMode === 'layer'
@@ -529,6 +810,12 @@ export class XYChart extends BaseChart {
                 totalSeries: barSeries.length,
                 cumulativeData: cumulativeDataBySeriesIndex.get(barIndex) ?? new Map(),
                 totalData,
+                positiveCumulativeData: positiveCumulativeDataBySeriesIndex.get(barIndex) ??
+                    new Map(),
+                negativeCumulativeData: negativeCumulativeDataBySeriesIndex.get(barIndex) ??
+                    new Map(),
+                positiveTotalData,
+                negativeTotalData,
                 gap: this.barStackGap,
                 nextLayerData,
             };
@@ -540,21 +827,37 @@ export class XYChart extends BaseChart {
         lineSeries.forEach((series) => {
             series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme);
         });
+        scatterSeries.forEach((series) => {
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme);
+        });
         if (areaValueLabelLayer) {
             areaValueLabelLayer.raise();
         }
     }
     computeStackingData(data, xKey, barSeries) {
         const cumulativeDataBySeriesIndex = new Map();
+        const positiveCumulativeDataBySeriesIndex = new Map();
+        const negativeCumulativeDataBySeriesIndex = new Map();
         const rawValuesBySeriesIndex = new Map();
         const totalData = new Map();
+        const positiveTotalData = new Map();
+        const negativeTotalData = new Map();
         data.forEach((dataPoint) => {
             const categoryKey = String(dataPoint[xKey]);
             let total = 0;
+            let positiveTotal = 0;
+            let negativeTotal = 0;
             barSeries.forEach((series, seriesIndex) => {
-                const value = this.parseValue(dataPoint[series.dataKey]);
+                const rawValue = this.parseValue(dataPoint[series.dataKey]);
+                const value = series.getRenderedValue(rawValue, this.orientation);
                 if (Number.isFinite(value)) {
                     total += value;
+                    if (value > 0) {
+                        positiveTotal += value;
+                    }
+                    else if (value < 0) {
+                        negativeTotal += Math.abs(value);
+                    }
                 }
                 // Build per-series raw value maps (used for layer next-layer data)
                 let rawMap = rawValuesBySeriesIndex.get(seriesIndex);
@@ -567,25 +870,45 @@ export class XYChart extends BaseChart {
                 }
             });
             totalData.set(categoryKey, total);
+            positiveTotalData.set(categoryKey, positiveTotal);
+            negativeTotalData.set(categoryKey, negativeTotal);
         });
         barSeries.forEach((_, seriesIndex) => {
             const cumulativeForSeries = new Map();
+            const positiveCumulativeForSeries = new Map();
+            const negativeCumulativeForSeries = new Map();
             data.forEach((dataPoint) => {
                 const categoryKey = String(dataPoint[xKey]);
                 let cumulative = 0;
+                let positiveCumulative = 0;
+                let negativeCumulative = 0;
                 for (let i = 0; i < seriesIndex; i++) {
-                    const value = this.parseValue(dataPoint[barSeries[i].dataKey]);
+                    const value = barSeries[i].getRenderedValue(this.parseValue(dataPoint[barSeries[i].dataKey]), this.orientation);
                     if (Number.isFinite(value)) {
                         cumulative += value;
+                        if (value > 0) {
+                            positiveCumulative += value;
+                        }
+                        else if (value < 0) {
+                            negativeCumulative += Math.abs(value);
+                        }
                     }
                 }
                 cumulativeForSeries.set(categoryKey, cumulative);
+                positiveCumulativeForSeries.set(categoryKey, positiveCumulative);
+                negativeCumulativeForSeries.set(categoryKey, negativeCumulative);
             });
             cumulativeDataBySeriesIndex.set(seriesIndex, cumulativeForSeries);
+            positiveCumulativeDataBySeriesIndex.set(seriesIndex, positiveCumulativeForSeries);
+            negativeCumulativeDataBySeriesIndex.set(seriesIndex, negativeCumulativeForSeries);
         });
         return {
             cumulativeDataBySeriesIndex,
+            positiveCumulativeDataBySeriesIndex,
+            negativeCumulativeDataBySeriesIndex,
             totalData,
+            positiveTotalData,
+            negativeTotalData,
             rawValuesBySeriesIndex,
         };
     }