@internetstiftelsen/charts 0.9.2 → 0.10.0

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: {
@@ -121,22 +129,14 @@ export class XYChart extends BaseChart {
     renderChart({ svg, plotGroup, plotArea, }) {
         this.validateSeriesOrientation();
         this.series.forEach((series) => {
-            const typeName = series.type === 'line'
-                ? 'Line'
-                : series.type === 'bar'
-                    ? 'Bar'
-                    : 'Area';
+            const typeName = this.getSeriesTypeName(series);
             ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
             ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
         });
-        const valueScaleType = this.scaleConfig.y?.type ?? 'linear';
+        const valueScaleType = this.resolvedScaleConfig.y?.type ?? 'linear';
         if (valueScaleType === 'log') {
             this.series.forEach((series) => {
-                const typeName = series.type === 'line'
-                    ? 'Line'
-                    : series.type === 'bar'
-                        ? 'Bar'
-                        : 'Area';
+                const typeName = this.getSeriesTypeName(series);
                 ChartValidator.validatePositiveData(this.data, series.dataKey, typeName);
             });
         }
@@ -177,7 +177,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 +190,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 +266,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 +298,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 +358,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 +380,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,31 +459,107 @@ 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 rangeStart;
+        let rangeEnd;
+        if (axis === 'x') {
+            rangeStart = this.plotArea.left + plotPadding;
+            rangeEnd = this.plotArea.right;
+        }
+        else if (scaleType === 'band') {
+            rangeStart = this.plotArea.top;
+            rangeEnd = this.plotArea.bottom - plotPadding;
+        }
+        else {
+            rangeStart = this.plotArea.bottom - plotPadding;
+            rangeEnd = this.plotArea.top;
+        }
+        return reverse ? [rangeEnd, rangeStart] : [rangeStart, rangeEnd];
+    }
+    createScale(config, dataKey, axis) {
+        if (!this.plotArea) {
+            throw new Error('Plot area not calculated');
+        }
+        const scaleType = config.type;
+        const [rangeStart, rangeEnd] = this.getScaleRange(axis, scaleType, config.reverse ?? false);
+        const domain = this.resolveScaleDomain(config, dataKey);
+        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);
+        }
+        if (scaleType === 'log') {
+            ChartValidator.validateScaleConfig(scaleType, domain);
+        }
+        switch (scaleType) {
+            case 'band': {
+                const scale = scaleBand()
+                    .domain(domain)
+                    .rangeRound([rangeStart, rangeEnd]);
+                if (config.padding !== undefined) {
+                    scale.paddingInner(config.padding);
+                }
+                else {
+                    scale.paddingInner(0.1);
+                }
+                return scale;
+            }
+            case 'linear': {
+                const scale = scaleLinear()
+                    .domain(domain)
+                    .rangeRound([rangeStart, rangeEnd]);
+                return config.nice === false ? scale : scale.nice();
+            }
+            case 'time': {
+                const scale = scaleTime()
+                    .domain(domain)
+                    .range([rangeStart, rangeEnd]);
+                return config.nice === false ? scale : scale.nice();
+            }
+            case 'log': {
+                const scale = scaleLog()
+                    .domain(domain)
+                    .rangeRound([rangeStart, rangeEnd]);
+                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 &&
+            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');
+        }
         if (config.domain) {
             domain = config.domain;
         }
-        else if (scaleType === 'band' && dataKey) {
+        else if (config.type === 'band' && dataKey) {
             domain = this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
         }
-        else if (scaleType === 'time' && dataKey) {
+        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 ((scaleType === 'linear' || scaleType === 'log') && dataKey) {
+        else if ((config.type === 'linear' || config.type === 'log') &&
+            dataKey) {
             const values = this.data
                 .map((d) => this.parseValue(d[dataKey]))
                 .filter((value) => Number.isFinite(value));
@@ -379,31 +568,33 @@ export class XYChart extends BaseChart {
             domain = [minVal, maxVal];
         }
         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];
+            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,
-                    ...barSeries,
+                    ...scatterSeries,
                     ...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 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) => {
@@ -425,56 +616,34 @@ export class XYChart extends BaseChart {
                     minCandidates.push(series.baseline);
                 });
                 const minVal = config.min ?? min(minCandidates) ?? 0;
-                const maxVal = config.max ?? max([...values, ...stackedValues]) ?? 100;
+                const maxVal = config.max ??
+                    max([...maxCandidates, ...stackedValues]) ??
+                    100;
                 domain = [minVal, maxVal];
             }
         }
-        if (scaleType === 'log') {
-            ChartValidator.validateScaleConfig(scaleType, domain);
+        if (config.nice === false) {
+            return domain;
         }
-        switch (scaleType) {
-            case 'band': {
-                const scale = scaleBand()
-                    .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
-                if (config.padding !== undefined) {
-                    scale.paddingInner(config.padding);
-                }
-                else {
-                    scale.paddingInner(0.1);
-                }
-                return scale;
-            }
-            case 'linear': {
-                const scale = scaleLinear()
-                    .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
-                if (config.nice !== false) {
-                    scale.nice();
-                }
-                return scale;
-            }
-            case 'time': {
-                const scale = scaleTime()
-                    .domain(domain)
-                    .range([rangeStart, rangeEnd]);
-                if (config.nice !== false) {
-                    scale.nice();
-                }
-                return scale;
-            }
-            case 'log': {
-                const scale = scaleLog()
-                    .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
-                if (config.nice !== false) {
-                    scale.nice();
-                }
-                return scale;
-            }
-            default:
-                throw new Error(`Unsupported scale type: ${scaleType}`);
+        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();
+        }
+        return domain;
     }
     getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries) {
         const rawValue = dataPoint[series.dataKey];
@@ -486,6 +655,9 @@ export class XYChart extends BaseChart {
             return NaN;
         }
         if (series.type !== 'area') {
+            if (series.type === 'bar') {
+                return series.getRenderedValue(parsedValue, this.orientation);
+            }
             return parsedValue;
         }
         const stackingContext = areaStackingContextBySeries.get(series);
@@ -512,12 +684,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 +702,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 +719,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 +762,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,
         };
     }