@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/utils.js

@@ -161,27 +161,19 @@ export function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, svg)
         const width = measureTextWidth(testLine, fontSize, fontFamily, fontWeight, svg);
         if (width <= maxWidth) {
             currentLine = testLine;
+            continue;
         }
-        else {
-            if (currentLine) {
-                lines.push(currentLine);
-            }
-            // Check if single word exceeds maxWidth
-            const wordWidth = measureTextWidth(word, fontSize, fontFamily, fontWeight, svg);
-            if (wordWidth > maxWidth) {
-                // Break the word into multiple lines by character
-                const wordSegments = breakWord(word, maxWidth, fontSize, fontFamily, fontWeight, svg);
-                // Add all segments except the last as complete lines
-                for (let i = 0; i < wordSegments.length - 1; i++) {
-                    lines.push(wordSegments[i]);
-                }
-                // The last segment becomes the current line (may be combined with next word)
-                currentLine = wordSegments[wordSegments.length - 1];
-            }
-            else {
-                currentLine = word;
-            }
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        const wordWidth = measureTextWidth(word, fontSize, fontFamily, fontWeight, svg);
+        if (wordWidth <= maxWidth) {
+            currentLine = word;
+            continue;
         }
+        const wordSegments = breakWord(word, maxWidth, fontSize, fontFamily, fontWeight, svg);
+        lines.push(...wordSegments.slice(0, -1));
+        currentLine = wordSegments[wordSegments.length - 1] ?? '';
     }
     if (currentLine) {
         lines.push(currentLine);

package/dist/validation.d.ts

@@ -26,6 +26,10 @@ export declare class ChartValidator {
      * Validates scale configuration
      */
     static validateScaleConfig(scaleType: string, domain: ScaleDomainValue[] | undefined): void;
+    /**
+     * Validates that explicit numeric bar domains include zero so bars retain a truthful baseline
+     */
+    static validateBarDomainIncludesZero(domain: ScaleDomainValue[] | undefined): void;
     /**
      * Warns about potential issues without throwing errors
      */

package/dist/validation.js

@@ -91,6 +91,25 @@ export class ChartValidator {
             }
         }
     }
+    /**
+     * Validates that explicit numeric bar domains include zero so bars retain a truthful baseline
+     */
+    static validateBarDomainIncludesZero(domain) {
+        if (!domain || domain.length < 2) {
+            return;
+        }
+        const numericDomain = domain.filter((value) => {
+            return typeof value === 'number' && Number.isFinite(value);
+        });
+        if (numericDomain.length < 2) {
+            return;
+        }
+        const minValue = Math.min(...numericDomain);
+        const maxValue = Math.max(...numericDomain);
+        if (minValue > 0 || maxValue < 0) {
+            throw new ChartValidationError('Bar charts require explicit numeric domains to include 0 so bars can render from a zero baseline');
+        }
+    }
     /**
      * Warns about potential issues without throwing errors
      */

package/dist/x-axis.d.ts

@@ -42,4 +42,14 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private wrapTextElement;
     private addTitleTooltip;
     private applyAutoHiding;
+    private measureLabel;
+    private setEstimatedDimensions;
+    private createAxisGenerator;
+    private applyAxisTextConstraints;
+    private applyLabelRotation;
+    private resolveGroupRangeInput;
+    private collectAutoHideLabels;
+    private measureMaxAutoHideLabelWidth;
+    private applyAutoHideVisibility;
+    private hideLastOverlappingIntervalLabel;
 }

package/dist/x-axis.js

@@ -1,6 +1,17 @@
 import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
+const DEFAULT_X_AXIS_CONFIG = {
+    display: true,
+    showGroupLabels: false,
+    groupLabelGap: 10,
+    rotatedLabels: false,
+    oversizedBehavior: 'truncate',
+    tickFormat: null,
+    autoHideOverlapping: false,
+    minLabelGap: 8,
+    preserveEndLabels: true,
+};
 export class XAxis {
     resolveFontSizeValue(fontSize, fallback) {
         if (typeof fontSize === 'number' && Number.isFinite(fontSize)) {
@@ -148,20 +159,24 @@ export class XAxis {
             writable: true,
             value: void 0
         });
-        this.display = config?.display ?? true;
-        this.dataKey = config?.dataKey;
-        this.labelKey = config?.labelKey;
-        this.groupLabelKey = config?.groupLabelKey;
-        this.showGroupLabels = config?.showGroupLabels ?? false;
-        this.groupLabelGap = config?.groupLabelGap ?? 10;
-        this.rotatedLabels = config?.rotatedLabels ?? false;
-        this.maxLabelWidth = config?.maxLabelWidth;
-        this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
-        this.tickFormat = config?.tickFormat ?? null;
-        this.autoHideOverlapping = config?.autoHideOverlapping ?? false;
-        this.minLabelGap = config?.minLabelGap ?? 8;
-        this.preserveEndLabels = config?.preserveEndLabels ?? true;
-        this.exportHooks = config?.exportHooks;
+        const resolvedConfig = {
+            ...DEFAULT_X_AXIS_CONFIG,
+            ...config,
+        };
+        this.display = resolvedConfig.display;
+        this.dataKey = resolvedConfig.dataKey;
+        this.labelKey = resolvedConfig.labelKey;
+        this.groupLabelKey = resolvedConfig.groupLabelKey;
+        this.showGroupLabels = resolvedConfig.showGroupLabels;
+        this.groupLabelGap = resolvedConfig.groupLabelGap;
+        this.rotatedLabels = resolvedConfig.rotatedLabels;
+        this.maxLabelWidth = resolvedConfig.maxLabelWidth;
+        this.oversizedBehavior = resolvedConfig.oversizedBehavior;
+        this.tickFormat = resolvedConfig.tickFormat;
+        this.autoHideOverlapping = resolvedConfig.autoHideOverlapping;
+        this.minLabelGap = resolvedConfig.minLabelGap;
+        this.preserveEndLabels = resolvedConfig.preserveEndLabels;
+        this.exportHooks = resolvedConfig.exportHooks;
     }
     getExportConfig() {
         return {
@@ -239,39 +254,14 @@ export class XAxis {
         let maxLines = 1;
         for (const label of labels) {
             const text = String(label ?? '');
-            if (!text)
-                continue;
-            const textWidth = measureTextWidth(text, fontSize, fontFamily, fontWeight, svg);
-            if (this.maxLabelWidth && this.oversizedBehavior === 'wrap') {
-                const lines = wrapText(text, this.maxLabelWidth, fontSize, fontFamily, fontWeight, svg);
-                maxLines = Math.max(maxLines, lines.length || 1);
-                maxWidth = Math.max(maxWidth, this.maxLabelWidth);
+            if (!text) {
                 continue;
             }
-            const effectiveWidth = this.maxLabelWidth
-                ? Math.min(textWidth, this.maxLabelWidth)
-                : textWidth;
-            maxWidth = Math.max(maxWidth, effectiveWidth);
-        }
-        const lineHeight = fontSize * 1.2;
-        const textHeight = lineHeight * maxLines;
-        if (this.rotatedLabels) {
-            const radians = Math.PI / 4;
-            const verticalFootprint = Math.sin(radians) * maxWidth + Math.cos(radians) * textHeight;
-            this.estimatedTickLabelVerticalFootprint = verticalFootprint;
-            this.estimatedHeight = this.tickPadding + verticalFootprint + 5;
-        }
-        else {
-            const wrappedExtraHeight = Math.max(0, maxLines - 1) * lineHeight;
-            this.estimatedTickLabelVerticalFootprint =
-                this.fontSize + wrappedExtraHeight;
-            this.estimatedHeight = this.tickPadding + textHeight + 5;
-        }
-        if (this.showGroupLabels) {
-            const groupLabelStyle = this.resolveGroupLabelStyle(theme);
-            this.estimatedHeight +=
-                this.groupLabelGap + groupLabelStyle.fontSize + 5;
+            const measurement = this.measureLabel(text, fontSize, fontFamily, fontWeight, svg);
+            maxLines = Math.max(maxLines, measurement.lines);
+            maxWidth = Math.max(maxWidth, measurement.width);
         }
+        this.setEstimatedDimensions(maxWidth, maxLines, theme);
         this.wrapLineCount = maxLines;
     }
     clearEstimatedSpace() {
@@ -295,50 +285,17 @@ export class XAxis {
         if (!this.display) {
             return;
         }
-        const labelLookup = this.buildLabelLookup(data);
-        const axisGenerator = axisBottom(x)
-            .tickSizeOuter(0)
-            .tickSize(0)
-            .tickPadding(this.tickPadding);
-        if (labelLookup) {
-            axisGenerator.tickFormat((value) => {
-                const key = String(value);
-                if (!labelLookup.has(key)) {
-                    return '';
-                }
-                return labelLookup.get(key) ?? '';
-            });
-        }
-        else if (this.tickFormat) {
-            // Apply tick formatting if specified
-            const tickFormat = this.tickFormat;
-            if (typeof tickFormat === 'function') {
-                axisGenerator.tickFormat((value) => tickFormat(value));
-            }
-            else {
-                axisGenerator.ticks(5, tickFormat);
-            }
-        }
         const axis = svg
             .append('g')
             .attr('class', 'x-axis')
             .attr('transform', `translate(0,${yPosition})`)
-            .call(axisGenerator)
+            .call(this.createAxisGenerator(x, this.buildLabelLookup(data)))
             .attr('font-size', theme.axis.fontSize)
             .attr('font-family', theme.axis.fontFamily)
             .attr('font-weight', theme.axis.fontWeight || 'normal')
             .attr('stroke', 'none');
-        // Apply label constraints before rotation
-        if (this.maxLabelWidth) {
-            this.applyLabelConstraints(axis, svg.node(), theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal');
-        }
-        // Apply rotation to labels if enabled
-        if (this.rotatedLabels) {
-            axis.selectAll('text')
-                .style('text-anchor', 'end')
-                .attr('transform', 'rotate(-45)');
-        }
-        // Apply auto-hiding for overlapping labels
+        this.applyAxisTextConstraints(axis, svg.node(), theme);
+        this.applyLabelRotation(axis);
         this.applyAutoHiding(axis, x);
         axis.selectAll('.domain').remove();
         if (this.showGroupLabels) {
@@ -390,28 +347,11 @@ export class XAxis {
             .text((range) => range.label);
     }
     buildGroupRanges(scale, data) {
-        if (!this.dataKey ||
-            data.length === 0 ||
-            typeof scale.domain !== 'function' ||
-            typeof scale.bandwidth !== 'function') {
-            return [];
-        }
-        const groupLabelKey = this.groupLabelKey ??
-            (this.dataKey === GROUPED_CATEGORY_ID_KEY
-                ? GROUPED_GROUP_LABEL_KEY
-                : undefined);
-        if (!groupLabelKey) {
-            return [];
-        }
-        const domain = scale.domain().map((value) => String(value));
-        const bandwidth = scale.bandwidth();
-        if (domain.length === 0 || bandwidth <= 0) {
+        const input = this.resolveGroupRangeInput(scale, data);
+        if (!input) {
             return [];
         }
-        const groupLookup = new Map();
-        data.forEach((row) => {
-            groupLookup.set(String(row[this.dataKey]), String(row[groupLabelKey] ?? ''));
-        });
+        const { domain, bandwidth, groupLookup } = input;
         const ranges = [];
         let currentLabel = null;
         let startIndex = 0;
@@ -506,80 +446,181 @@ export class XAxis {
         textEl.insertBefore(title, textEl.firstChild);
     }
     applyAutoHiding(axisGroup, scale) {
-        if (!this.autoHideOverlapping)
+        if (!this.autoHideOverlapping) {
+            return;
+        }
+        const labelEntries = this.collectAutoHideLabels(axisGroup);
+        const labelCount = labelEntries.length;
+        if (labelCount <= 1) {
+            return;
+        }
+        const maxLabelWidth = this.measureMaxAutoHideLabelWidth(labelEntries);
+        const availableSpace = (scale.range()[1] - scale.range()[0]) / labelCount;
+        const requiredSpace = maxLabelWidth + this.minLabelGap;
+        const skipInterval = Math.ceil(requiredSpace / availableSpace);
+        if (skipInterval <= 1) {
+            return;
+        }
+        this.applyAutoHideVisibility(labelEntries, skipInterval);
+        if (this.preserveEndLabels && labelCount > 1) {
+            this.hideLastOverlappingIntervalLabel(labelEntries, skipInterval);
+        }
+    }
+    measureLabel(text, fontSize, fontFamily, fontWeight, svg) {
+        if (this.maxLabelWidth && this.oversizedBehavior === 'wrap') {
+            const lines = wrapText(text, this.maxLabelWidth, fontSize, fontFamily, fontWeight, svg);
+            return {
+                width: this.maxLabelWidth,
+                lines: lines.length || 1,
+            };
+        }
+        const textWidth = measureTextWidth(text, fontSize, fontFamily, fontWeight, svg);
+        return {
+            width: this.maxLabelWidth
+                ? Math.min(textWidth, this.maxLabelWidth)
+                : textWidth,
+            lines: 1,
+        };
+    }
+    setEstimatedDimensions(maxWidth, maxLines, theme) {
+        const lineHeight = this.fontSize * 1.2;
+        const textHeight = lineHeight * maxLines;
+        if (this.rotatedLabels) {
+            const radians = Math.PI / 4;
+            const verticalFootprint = Math.sin(radians) * maxWidth + Math.cos(radians) * textHeight;
+            this.estimatedTickLabelVerticalFootprint = verticalFootprint;
+            this.estimatedHeight = this.tickPadding + verticalFootprint + 5;
+        }
+        else {
+            const wrappedExtraHeight = Math.max(0, maxLines - 1) * lineHeight;
+            this.estimatedTickLabelVerticalFootprint =
+                this.fontSize + wrappedExtraHeight;
+            this.estimatedHeight = this.tickPadding + textHeight + 5;
+        }
+        if (this.showGroupLabels) {
+            const groupLabelStyle = this.resolveGroupLabelStyle(theme);
+            this.estimatedHeight +=
+                this.groupLabelGap + groupLabelStyle.fontSize + 5;
+        }
+    }
+    createAxisGenerator(x, labelLookup) {
+        const axisGenerator = axisBottom(x)
+            .tickSizeOuter(0)
+            .tickSize(0)
+            .tickPadding(this.tickPadding);
+        if (labelLookup) {
+            axisGenerator.tickFormat((value) => {
+                return labelLookup.get(String(value)) ?? '';
+            });
+            return axisGenerator;
+        }
+        if (!this.tickFormat) {
+            return axisGenerator;
+        }
+        const tickFormat = this.tickFormat;
+        if (typeof tickFormat === 'function') {
+            axisGenerator.tickFormat((value) => {
+                return tickFormat(value);
+            });
+            return axisGenerator;
+        }
+        axisGenerator.ticks(5, tickFormat);
+        return axisGenerator;
+    }
+    applyAxisTextConstraints(axis, svg, theme) {
+        if (!this.maxLabelWidth) {
+            return;
+        }
+        this.applyLabelConstraints(axis, svg, theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal');
+    }
+    applyLabelRotation(axis) {
+        if (!this.rotatedLabels) {
             return;
-        const tickElements = axisGroup
+        }
+        axis.selectAll('text')
+            .style('text-anchor', 'end')
+            .attr('transform', 'rotate(-45)');
+    }
+    resolveGroupRangeInput(scale, data) {
+        if (!this.dataKey ||
+            data.length === 0 ||
+            typeof scale.domain !== 'function' ||
+            typeof scale.bandwidth !== 'function') {
+            return null;
+        }
+        const groupLabelKey = this.groupLabelKey ??
+            (this.dataKey === GROUPED_CATEGORY_ID_KEY
+                ? GROUPED_GROUP_LABEL_KEY
+                : undefined);
+        if (!groupLabelKey) {
+            return null;
+        }
+        const domain = scale.domain().map((value) => String(value));
+        const bandwidth = scale.bandwidth();
+        if (domain.length === 0 || bandwidth <= 0) {
+            return null;
+        }
+        const groupLookup = new Map();
+        data.forEach((row) => {
+            groupLookup.set(String(row[this.dataKey]), String(row[groupLabelKey] ?? ''));
+        });
+        return {
+            domain,
+            bandwidth,
+            groupLookup,
+        };
+    }
+    collectAutoHideLabels(axisGroup) {
+        return axisGroup
             .selectAll('.tick')
-            .nodes();
-        const labelEntries = tickElements
+            .nodes()
             .map((tickElement) => {
             const textElement = tickElement.querySelector('text');
             const tickValue = String(tickElement
                 .__data__ ?? '');
-            const isSyntheticGapTick = tickValue.startsWith(GROUPED_GAP_TICK_PREFIX);
-            if (isSyntheticGapTick && textElement) {
+            if (tickValue.startsWith(GROUPED_GAP_TICK_PREFIX) &&
+                textElement) {
                 textElement.style.visibility = 'hidden';
+                return null;
             }
-            return {
-                textElement,
-                isSyntheticGapTick,
-            };
+            return textElement;
         })
-            .filter((entry) => {
-            return !entry.isSyntheticGapTick && entry.textElement !== null;
-        })
-            .map((entry) => {
-            return entry.textElement;
+            .filter((textElement) => {
+            return textElement !== null;
         });
-        const labelCount = labelEntries.length;
-        if (labelCount <= 1) {
-            return;
-        }
-        // Measure all label widths
+    }
+    measureMaxAutoHideLabelWidth(labelEntries) {
         let maxLabelWidth = 0;
         for (const textEl of labelEntries) {
             const bbox = textEl.getBBox();
-            // For rotated labels, use the horizontal footprint
             const effectiveWidth = this.rotatedLabels
                 ? bbox.width * Math.cos(Math.PI / 4)
                 : bbox.width;
             maxLabelWidth = Math.max(maxLabelWidth, effectiveWidth);
         }
-        // Calculate available space per real label only.
-        // This deliberately ignores synthetic grouped-gap ticks.
-        const availableSpace = (scale.range()[1] - scale.range()[0]) / labelCount;
-        // Calculate skip interval
-        const requiredSpace = maxLabelWidth + this.minLabelGap;
-        const skipInterval = Math.ceil(requiredSpace / availableSpace);
-        // If no skipping needed, show all labels
-        if (skipInterval <= 1)
-            return;
-        // Apply visibility
+        return maxLabelWidth;
+    }
+    applyAutoHideVisibility(labelEntries, skipInterval) {
         labelEntries.forEach((textEl, index) => {
             const isFirst = index === 0;
-            const isLast = index === labelCount - 1;
+            const isLast = index === labelEntries.length - 1;
             const isAtInterval = index % skipInterval === 0;
             if (this.preserveEndLabels && (isFirst || isLast)) {
                 textEl.style.visibility = 'visible';
+                return;
             }
-            else if (isAtInterval) {
-                textEl.style.visibility = 'visible';
-            }
-            else {
-                textEl.style.visibility = 'hidden';
-            }
+            textEl.style.visibility = isAtInterval ? 'visible' : 'hidden';
         });
-        // Handle edge case: if last label is preserved but would overlap with the last visible interval label
-        if (this.preserveEndLabels && labelCount > 1) {
-            const lastVisibleIntervalIndex = Math.floor((labelCount - 2) / skipInterval) * skipInterval;
-            if (lastVisibleIntervalIndex !== labelCount - 1 &&
-                labelCount - 1 - lastVisibleIntervalIndex < skipInterval) {
-                // Hide the last interval label to avoid overlap with preserved last label
-                const textEl = labelEntries[lastVisibleIntervalIndex];
-                if (textEl && lastVisibleIntervalIndex !== 0) {
-                    textEl.style.visibility = 'hidden';
-                }
-            }
+    }
+    hideLastOverlappingIntervalLabel(labelEntries, skipInterval) {
+        const lastVisibleIntervalIndex = Math.floor((labelEntries.length - 2) / skipInterval) * skipInterval;
+        if (lastVisibleIntervalIndex === labelEntries.length - 1 ||
+            labelEntries.length - 1 - lastVisibleIntervalIndex >= skipInterval) {
+            return;
+        }
+        const textEl = labelEntries[lastVisibleIntervalIndex];
+        if (textEl && lastVisibleIntervalIndex !== 0) {
+            textEl.style.visibility = 'hidden';
         }
     }
 }

package/dist/xy-chart.d.ts

@@ -1,6 +1,6 @@
 import { BaseChart, type BaseChartConfig, type BaseLayoutContext, type BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
-import { type AreaStackConfig, type BarStackConfig, type LegendSeries, type Orientation } from './types.js';
+import { type AreaStackConfig, type AxisScaleConfig, type BarStackConfig, type LegendSeries, type Orientation, type ScaleType } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
     orientation?: Orientation;
     barStack?: BarStackConfig;
@@ -13,29 +13,68 @@ export declare class XYChart extends BaseChart {
     private barStackReverseSeries;
     private areaStackMode;
     private readonly orientation;
+    private scaleConfigOverride;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponentBase): this;
     protected getExportComponents(): ChartComponentBase[];
     protected createExportChart(): BaseChart;
     protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
+    private getYAxisEstimateLabels;
+    private createContinuousScaleForLayoutEstimate;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     private getXKey;
     protected getLegendSeries(): LegendSeries[];
     private getCategoryScaleType;
+    getOrientation(): Orientation;
+    getValueAxisScaleType(): ScaleType | null;
+    getValueAxisDomain(): [number, number] | null;
+    getBaseValueAxisDomain(): [number, number] | null;
+    setScaleConfigOverride(override: AxisScaleConfig | null, rerender?: boolean): this;
+    private resolveValueAxisDomain;
     private getVisibleSeries;
     private getDisplaySeries;
     private resolveSeriesDefaults;
     private shouldReplaceSeriesColor;
     private cloneSeriesWithOverride;
     private setupScales;
+    private get resolvedScaleConfig();
+    private getResolvedAxisConfigs;
+    private getAxisConfigsForScaleConfig;
     private isHorizontalOrientation;
+    private getSeriesTypeName;
     private validateSeriesOrientation;
     private collectSeriesValues;
+    private getBarPercentDomain;
+    private getBarValueDomain;
     private getStackedAreaGroups;
     private buildBandDomainWithGroupGaps;
+    private getScaleRange;
     private createScale;
+    private resolveScaleDomain;
     private getSeriesTooltipValue;
+    private validateRenderState;
+    private validateSeriesData;
+    private validateValueScaleRequirements;
+    private validateXAxisDataKey;
+    private renderAxes;
+    private attachTooltip;
+    private validateExplicitBarValueDomain;
+    private validateScaleDomain;
+    private buildScale;
+    private getSeriesBuckets;
+    private isBarValueScale;
+    private resolveRawScaleDomain;
+    private resolveTimeDomain;
+    private resolveNumericDataKeyDomain;
+    private resolveSeriesValueDomain;
+    private hasPercentValueDomain;
+    private resolvePercentValueDomain;
+    private resolveStandardValueDomain;
+    private collectStackedAreaTotals;
+    private addAreaBaselines;
+    private applyNiceDomain;
+    private getAreaTooltipValue;
     private renderSeries;
     private computeStackingData;
     private computeAreaStackingContexts;