@internetstiftelsen/charts 0.21.0 → 0.21.1

package/dist/chart-interface.d.ts

@@ -11,6 +11,11 @@ export type ComponentSpace = {
     width: number;
     height: number;
     position: 'top' | 'bottom' | 'left' | 'right';
+    /** Minimum chart-edge space required for labels extending sideways. */
+    minMargins?: {
+        left: number;
+        right: number;
+    };
 };
 export interface LayoutAwareComponentBase extends ChartComponentBase {
     getRequiredSpace(theme?: ChartTheme): ComponentSpace;

package/dist/layout-manager.js

@@ -52,6 +52,13 @@ export class LayoutManager {
                     break;
             }
         }
+        for (const component of components) {
+            const minMargins = component.getRequiredSpace(this.theme).minMargins;
+            if (minMargins) {
+                marginLeft = Math.max(marginLeft, minMargins.left);
+                marginRight = Math.max(marginRight, minMargins.right);
+            }
+        }
         // Calculate plot area bounds
         this.plotBounds = {
             left: marginLeft,

package/dist/types.d.ts

@@ -274,6 +274,8 @@ export type XAxisConfigBase = {
     groupLabelMaxWidth?: number;
     groupLabelOversizedBehavior?: LabelOversizedBehavior;
     rotatedLabels?: boolean;
+    /** Reserve side margins for rotated category labels. Default: true. */
+    autoLabelMargins?: boolean;
     /** Overrides automatic width for unrotated category labels; also caps numeric/time labels. */
     maxLabelWidth?: number;
     /** Automatically size category labels when maxLabelWidth is omitted. Default: true. */

package/dist/x-axis.d.ts

@@ -1,4 +1,5 @@
-import { type Selection } from 'd3';
+import { type ScaleBand, type Selection } from 'd3';
+import type { PlotAreaBounds } from './layout-manager.js';
 import type { XAxisConfig, ChartTheme, D3Scale, DataItem, ExportHooks, XAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
@@ -12,6 +13,8 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly groupLabelMaxWidth?;
     private readonly groupLabelOversizedBehavior;
     private readonly rotatedLabels;
+    private readonly autoLabelMargins;
+    private estimatedSideMargins?;
     private readonly tickPadding;
     private fontSize;
     private readonly maxLabelWidth?;
@@ -37,6 +40,11 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     getRequiredSpace(): ComponentSpace;
     estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement, data?: DataItem[], estimatedXAxisRangeWidth?: number, categoryScale?: D3Scale): void;
     private getEstimateLabels;
+    estimateSideMargins(scale: ScaleBand<string> | undefined, theme: ChartTheme, svg: SVGSVGElement, data: DataItem[], plotArea: PlotAreaBounds, chartWidth: number): {
+        left: number;
+        right: number;
+    } | undefined;
+    private resolveSideMargins;
     clearEstimatedSpace(): void;
     private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;

package/dist/x-axis.js

@@ -1,4 +1,4 @@
-import { axisBottom } from 'd3';
+import { axisBottom, select } 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 GROUP_LABEL_HORIZONTAL_PADDING = 4;
@@ -8,6 +8,7 @@ const DEFAULT_X_AXIS_CONFIG = {
     groupLabelGap: 10,
     groupLabelOversizedBehavior: 'truncate',
     rotatedLabels: false,
+    autoLabelMargins: true,
     autoMaxLabelWidth: true,
     oversizedBehavior: 'truncate',
     tickFormat: null,
@@ -102,6 +103,18 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "autoLabelMargins", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "estimatedSideMargins", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tickPadding", {
             enumerable: true,
             configurable: true,
@@ -200,6 +213,7 @@ export class XAxis {
         this.groupLabelOversizedBehavior =
             resolvedConfig.groupLabelOversizedBehavior;
         this.rotatedLabels = resolvedConfig.rotatedLabels;
+        this.autoLabelMargins = resolvedConfig.autoLabelMargins;
         this.maxLabelWidth = resolvedConfig.maxLabelWidth;
         this.autoMaxLabelWidth = resolvedConfig.autoMaxLabelWidth;
         this.oversizedBehavior = resolvedConfig.oversizedBehavior;
@@ -220,6 +234,7 @@ export class XAxis {
             groupLabelMaxWidth: this.groupLabelMaxWidth,
             groupLabelOversizedBehavior: this.groupLabelOversizedBehavior,
             rotatedLabels: this.rotatedLabels,
+            autoLabelMargins: this.autoLabelMargins,
             maxLabelWidth: this.maxLabelWidth,
             autoMaxLabelWidth: this.autoMaxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
@@ -252,6 +267,7 @@ export class XAxis {
                 width: 0,
                 height: this.estimatedHeight,
                 position: 'bottom',
+                minMargins: this.estimatedSideMargins,
             };
         }
         // Height = tick padding + font size + some extra space for descenders
@@ -298,7 +314,7 @@ export class XAxis {
             maxLines = Math.max(maxLines, measurement.lines);
             maxWidth = Math.max(maxWidth, measurement.width);
         }
-        this.groupLabelWrapLineCount = this.estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth);
+        this.groupLabelWrapLineCount = this.estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth, categoryScale);
         this.setEstimatedDimensions(maxWidth, maxLines, theme);
         this.wrapLineCount = maxLines;
     }
@@ -313,7 +329,86 @@ export class XAxis {
                 : String(value ?? ''),
         }));
     }
+    estimateSideMargins(scale, theme, svg, data, plotArea, chartWidth) {
+        this.estimatedSideMargins = undefined;
+        if (!this.display ||
+            !this.rotatedLabels ||
+            !this.autoLabelMargins ||
+            !scale) {
+            return;
+        }
+        // Measure the same formatted, wrapped and anchored text that is rendered.
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
+        const axis = select(svg)
+            .append('g')
+            .call(this.createAxisGenerator(scale, this.buildLabelLookup(data)))
+            .attr('font-size', theme.axis.fontSize)
+            .attr('font-family', theme.axis.fontFamily)
+            .attr('font-weight', theme.axis.fontWeight || 'normal');
+        this.applyLabelConstraints(axis, svg, theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal', scale);
+        this.applyLabelRotation(axis);
+        const range = scale.range();
+        const start = Math.min(...range);
+        const rangeWidth = Math.abs(range[range.length - 1] - range[0]);
+        const footprints = [];
+        axis.selectAll('.tick text').each(function (value) {
+            if (this.style.visibility === 'hidden' ||
+                !this.textContent ||
+                rangeWidth <= 0)
+                return;
+            const box = this.getBBox();
+            // At -45 degrees, the horizontal projection is (x + y) / sqrt(2).
+            const left = (box.x + box.y) * Math.SQRT1_2;
+            const right = (box.x + box.width + box.y + box.height) * Math.SQRT1_2;
+            footprints.push({
+                value,
+                left: Math.max(0, -left) + 4,
+                right: Math.max(0, right) + 4,
+            });
+        });
+        axis.remove();
+        this.estimatedSideMargins = this.resolveSideMargins(footprints, scale, plotArea, chartWidth, start - plotArea.left);
+        return this.estimatedSideMargins;
+    }
+    resolveSideMargins(footprints, scale, plotArea, chartWidth, leadingPadding) {
+        let left = plotArea.left;
+        let right = chartWidth - plotArea.right;
+        const adjustedScale = scale.copy();
+        const reverse = scale.range()[0] > scale.range()[1];
+        // Moving a margin also moves band centers. Resolve both sides together,
+        // with a fixed pass limit and at least 40px retained for the plot.
+        for (let pass = 0; pass < 8; pass += 1) {
+            const previousLeft = left;
+            const previousRight = right;
+            const rangeStart = left + leadingPadding;
+            const rangeEnd = Math.max(rangeStart, chartWidth - right);
+            const rangeWidth = rangeEnd - rangeStart;
+            if (rangeWidth <= 0)
+                break;
+            adjustedScale.range(reverse ? [rangeEnd, rangeStart] : [rangeStart, rangeEnd]);
+            for (const label of footprints) {
+                // Recompute positions because rounded band steps change with the range.
+                const center = adjustedScale(label.value) + adjustedScale.bandwidth() / 2;
+                const p = (center - rangeStart) / rangeWidth;
+                if (p < 1) {
+                    const required = (label.left - p * (chartWidth - right)) / (1 - p) -
+                        leadingPadding;
+                    left = Math.max(left, Math.min(required, chartWidth - right - 40));
+                }
+                if (p > 0) {
+                    const required = (label.right -
+                        (1 - p) * (chartWidth - left - leadingPadding)) /
+                        p;
+                    right = Math.max(right, Math.min(required, chartWidth - left - 40));
+                }
+            }
+            if (left - previousLeft < 0.01 && right - previousRight < 0.01)
+                break;
+        }
+        return { left, right };
+    }
     clearEstimatedSpace() {
+        this.estimatedSideMargins = undefined;
         this.estimatedHeight = null;
         this.estimatedTickLabelVerticalFootprint = null;
         this.groupLabelWrapLineCount = 1;
@@ -622,20 +717,27 @@ export class XAxis {
             lines: 1,
         };
     }
-    estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth) {
+    estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth, categoryScale) {
         if (!this.showGroupLabels ||
             this.groupLabelOversizedBehavior !== 'wrap') {
             return 1;
         }
-        const groupLabels = this.buildGroupLabelEstimates(data);
+        const groupLabels = categoryScale
+            ? this.buildGroupRanges(categoryScale, data).map((range) => ({
+                label: range.label,
+                maxWidth: this.resolveGroupLabelMaxWidth(range),
+            }))
+            : this.buildGroupLabelEstimates(data).map((groupLabel) => ({
+                label: groupLabel.label,
+                maxWidth: this.groupLabelMaxWidth ??
+                    this.resolveEstimatedGroupLabelMaxWidth(groupLabel.itemCount, data.length, estimatedXAxisRangeWidth),
+            }));
         if (groupLabels.length === 0) {
             return 1;
         }
         const groupLabelStyle = this.resolveGroupLabelStyle(theme);
-        const totalItemCount = data.length;
         return groupLabels.reduce((maxLines, groupLabel) => {
-            const maxWidth = this.groupLabelMaxWidth ??
-                this.resolveEstimatedGroupLabelMaxWidth(groupLabel.itemCount, totalItemCount, estimatedXAxisRangeWidth);
+            const { maxWidth } = groupLabel;
             if (maxWidth === undefined || maxWidth <= 0) {
                 return maxLines;
             }

package/dist/xy-chart.d.ts

@@ -26,6 +26,7 @@ export declare class XYChart extends BaseChart {
     update(data: ChartData): void;
     protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
+    private estimateXAxisLayout;
     private getYAxisEstimateLabels;
     private createContinuousScaleForLayoutEstimate;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;

package/dist/xy-chart.js

@@ -156,7 +156,7 @@ export class XYChart extends BaseChart {
         super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace();
         this.yAxis?.clearEstimatedSpace();
-        const { x: xConfig, y: yConfig } = this.getResolvedAxisConfigs();
+        const { y: yConfig } = this.getResolvedAxisConfigs();
         if (this.yAxis) {
             this.yAxis.estimateLayoutSpace(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode, yConfig.type === 'band'
                 ? Math.max(0, this.width -
@@ -164,25 +164,35 @@ export class XYChart extends BaseChart {
                     this.renderTheme.margins.right) / 3
                 : undefined);
         }
-        if (this.xAxis) {
-            const xKey = this.getXKey();
-            const labelKey = this.xAxis.labelKey;
-            const labels = this.data.map((item) => {
-                if (labelKey) {
-                    return item[labelKey];
-                }
-                return item[xKey];
-            });
-            const plotArea = this.applyPlotAreaOverride(new LayoutManager(this.resolvedRenderTheme).calculateLayout(this.getLayoutComponents()));
-            const range = [
-                plotArea.left + 10,
-                Math.max(plotArea.left + 10, plotArea.right),
-            ];
-            const categoryScale = xConfig.type === 'band'
-                ? this.buildScale('band', this.resolveScaleDomain(xConfig, xKey), xConfig.reverse ? [range[1], range[0]] : range, xConfig)
-                : undefined;
-            this.xAxis.estimateLayoutSpace(labels, this.renderTheme, context.svgNode, this.data, range[1] - range[0], categoryScale);
-        }
+        this.estimateXAxisLayout(context);
+    }
+    estimateXAxisLayout(context) {
+        if (!this.xAxis)
+            return;
+        const { x: xConfig } = this.getResolvedAxisConfigs();
+        const xKey = this.getXKey();
+        const labelKey = this.xAxis.labelKey;
+        const labels = this.data.map((item) => {
+            if (labelKey) {
+                return item[labelKey];
+            }
+            return item[xKey];
+        });
+        const plotArea = this.applyPlotAreaOverride(new LayoutManager(this.resolvedRenderTheme).calculateLayout(this.getLayoutComponents()));
+        const range = [
+            plotArea.left + 10,
+            Math.max(plotArea.left + 10, plotArea.right),
+        ];
+        const categoryScale = xConfig.type === 'band'
+            ? this.buildScale('band', this.resolveScaleDomain(xConfig, xKey), xConfig.reverse ? [range[1], range[0]] : range, xConfig)
+            : undefined;
+        const sideMargins = this.xAxis.estimateSideMargins(categoryScale, this.renderTheme, context.svgNode, this.data, plotArea, this.width);
+        if (sideMargins && categoryScale) {
+            range[0] = sideMargins.left + 10;
+            range[1] = Math.max(range[0], this.width - sideMargins.right);
+            categoryScale.range(xConfig.reverse ? [range[1], range[0]] : range);
+        }
+        this.xAxis.estimateLayoutSpace(labels, this.renderTheme, context.svgNode, this.data, range[1] - range[0], categoryScale);
     }
     getYAxisEstimateLabels() {
         if (!this.yAxis) {

package/docs/components.md

@@ -17,6 +17,7 @@ new XAxis({
     groupLabelMaxWidth?: number, // Optional cap for grouped-label width
     groupLabelOversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Defaults to truncate
     rotatedLabels?: boolean,  // Rotate tick labels -45deg
+    autoLabelMargins?: boolean, // Reserve side margins for rotated category labels (default: true)
     maxLabelWidth?: number,   // Override automatic category-label width, in pixels
     autoMaxLabelWidth?: boolean, // Automatically size category labels (default: true)
     oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Default: truncate
@@ -41,6 +42,16 @@ chart updates, using the display text from `labelKey` or `tickFormat`.
 
 An explicit `maxLabelWidth` overrides automatic sizing. Numeric/time axes and
 rotated labels retain their existing uncapped behavior unless a width is supplied.
+Rotated category labels automatically reserve side margins inside their own chart,
+including in `ChartGroup`. The layout measures the formatted text after explicit
+width constraints and recalculates on resize, updates, and visual export. Rounded
+tick positions and group-label wrapping use the adjusted plot width. Theme
+side margins remain minimums. Set `autoLabelMargins: false` to use theme margins
+exactly, for example when providing a manual margin override. Numeric/time axes
+are unchanged. Layout adjustment is bounded and retains at least 40px of plot
+width; labels that cannot fit while preserving this plot width still need an
+explicit width limit.
+
 Set `autoMaxLabelWidth: false` to disable automatic sizing and leave category
 labels uncapped too. An explicit `maxLabelWidth` still applies when this is off;
 group-label sizing is controlled separately.

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.21.0",
+    "version": "0.21.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,