@internetstiftelsen/charts 0.3.1 → 0.3.3

package/base-chart.d.ts

@@ -21,6 +21,7 @@ export declare abstract class BaseChart {
     protected readonly theme: ChartTheme;
     protected readonly scaleConfig: AxisScaleConfig;
     protected width: number;
+    protected height: number;
     protected xAxis: XAxis | null;
     protected yAxis: YAxis | null;
     protected grid: Grid | null;
@@ -53,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

@@ -31,6 +31,12 @@ export class BaseChart {
             writable: true,
             value: void 0
         }); // Current rendering width
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        }); // Current rendering height
         Object.defineProperty(this, "xAxis", {
             enumerable: true,
             configurable: true,
@@ -120,6 +126,7 @@ export class BaseChart {
         this.data = config.data;
         this.theme = { ...defaultTheme, ...config.theme };
         this.width = this.theme.width;
+        this.height = this.theme.height;
         this.scaleConfig = config.scales || {};
         this.layoutManager = new LayoutManager(this.theme);
     }
@@ -148,15 +155,22 @@ export class BaseChart {
         // Calculate current width
         this.width =
             this.container.getBoundingClientRect().width || this.theme.width;
+        this.height =
+            this.container.getBoundingClientRect().height || this.theme.height;
         // Clear and setup SVG
         this.container.innerHTML = '';
         this.svg = create('svg')
             .attr('width', '100%')
-            .attr('height', this.theme.height)
+            .attr('height', this.height)
             .style('display', 'block');
         this.container.appendChild(this.svg.node());
+        this.prepareLayout();
         // Calculate layout
-        const layoutTheme = { ...this.theme, width: this.width };
+        const layoutTheme = {
+            ...this.theme,
+            width: this.width,
+            height: this.height,
+        };
         this.layoutManager = new LayoutManager(layoutTheme);
         const components = this.getLayoutComponents();
         this.plotArea = this.layoutManager.calculateLayout(components);
@@ -181,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
      */
@@ -267,7 +284,7 @@ export class BaseChart {
         const clone = this.svg.node().cloneNode(true);
         clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         clone.setAttribute('width', String(this.width));
-        clone.setAttribute('height', String(this.theme.height));
+        clone.setAttribute('height', String(this.height));
         return clone.outerHTML;
     }
     exportJSON() {

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.3.1",
+    "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');