@internetstiftelsen/charts 0.3.2 → 0.3.3

package/base-chart.d.ts

@@ -54,6 +54,7 @@ export declare abstract class BaseChart {
      * Override in subclasses to provide chart-specific components
      */
     protected getLayoutComponents(): LayoutAwareComponent[];
+    protected prepareLayout(): void;
     /**
      * Setup ResizeObserver for automatic resize handling
      */

package/base-chart.js

@@ -164,6 +164,7 @@ export class BaseChart {
             .attr('height', this.height)
             .style('display', 'block');
         this.container.appendChild(this.svg.node());
+        this.prepareLayout();
         // Calculate layout
         const layoutTheme = {
             ...this.theme,
@@ -194,6 +195,9 @@ export class BaseChart {
             components.push(this.legend);
         return components;
     }
+    // Hook for subclasses to update component layout estimates before layout calc
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    prepareLayout() { }
     /**
      * Setup ResizeObserver for automatic resize handling
      */

package/package.json

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

package/x-axis.d.ts

@@ -6,11 +6,12 @@ export declare class XAxis implements LayoutAwareComponent {
     readonly dataKey?: string;
     private readonly rotatedLabels;
     private readonly tickPadding;
-    private readonly fontSize;
+    private fontSize;
     private readonly maxLabelWidth?;
     private readonly oversizedBehavior;
     private readonly tickFormat;
     private wrapLineCount;
+    private estimatedHeight;
     private readonly autoHideOverlapping;
     private readonly minLabelGap;
     private readonly preserveEndLabels;
@@ -19,6 +20,8 @@ export declare class XAxis implements LayoutAwareComponent {
      * Returns the space required by the x-axis
      */
     getRequiredSpace(): ComponentSpace;
+    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
+    clearEstimatedSpace(): void;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number): void;
     private applyLabelConstraints;
     private wrapTextElement;

package/x-axis.js

@@ -57,6 +57,12 @@ export class XAxis {
             writable: true,
             value: 1
         });
+        Object.defineProperty(this, "estimatedHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "autoHideOverlapping", {
             enumerable: true,
             configurable: true,
@@ -88,6 +94,13 @@ export class XAxis {
      * Returns the space required by the x-axis
      */
     getRequiredSpace() {
+        if (this.estimatedHeight !== null) {
+            return {
+                width: 0,
+                height: this.estimatedHeight,
+                position: 'bottom',
+            };
+        }
         // Height = tick padding + font size + some extra space for descenders
         // Rotated labels need more vertical space (roughly 2.5x for -45deg rotation)
         const baseHeight = this.tickPadding + this.fontSize + 5;
@@ -104,6 +117,55 @@ export class XAxis {
             position: 'bottom',
         };
     }
+    estimateLayoutSpace(labels, theme, svg) {
+        if (!labels.length) {
+            this.estimatedHeight = null;
+            return;
+        }
+        const parsedFontSize = typeof theme.axis.fontSize === 'string'
+            ? parseFloat(theme.axis.fontSize)
+            : theme.axis.fontSize;
+        this.fontSize = Number.isFinite(parsedFontSize)
+            ? parsedFontSize
+            : this.fontSize;
+        const fontSize = this.fontSize;
+        const fontFamily = theme.axis.fontFamily;
+        const fontWeight = theme.axis.fontWeight || 'normal';
+        let maxWidth = 0;
+        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);
+                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.estimatedHeight =
+                this.tickPadding + verticalFootprint + 5;
+        }
+        else {
+            this.estimatedHeight = this.tickPadding + textHeight + 5;
+        }
+        this.wrapLineCount = Math.max(this.wrapLineCount, maxLines);
+    }
+    clearEstimatedSpace() {
+        this.estimatedHeight = null;
+    }
     render(svg, x, theme, yPosition) {
         const axisGenerator = axisBottom(x)
             .tickSizeOuter(0)

package/xy-chart.d.ts

@@ -11,6 +11,7 @@ export declare class XYChart extends BaseChart {
     constructor(config: XYChartConfig);
     addChild(component: ChartComponent): this;
     private rerender;
+    protected prepareLayout(): void;
     protected renderChart(): void;
     private getXKey;
     private setupScales;

package/xy-chart.js

@@ -71,6 +71,14 @@ export class XYChart extends BaseChart {
     rerender() {
         this.update(this.data);
     }
+    prepareLayout() {
+        this.xAxis?.clearEstimatedSpace?.();
+        if (!this.xAxis || !this.svg)
+            return;
+        const xKey = this.getXKey();
+        const labels = this.data.map((item) => item[xKey]);
+        this.xAxis.estimateLayoutSpace?.(labels, this.theme, this.svg.node());
+    }
     renderChart() {
         if (!this.plotArea) {
             throw new Error('Plot area not calculated');