@internetstiftelsen/charts 0.18.2 → 0.19.1

package/README.md

@@ -255,7 +255,9 @@ axis, and responsive behavior. `ChartGroup.height` behaves like chart height:
 set it for a fixed total group height, or omit it to size from the render
 container. Set `syncY: true` when you want vertical `XYChart` children to share
 the same Y domain so grid lines stay aligned while only one child renders a
-visible Y axis.
+visible Y axis. Legend rows wrap automatically, with `align` positioning the
+legend block and `textAlign` aligning rows inside it:
+`new Legend({ align: 'center', textAlign: 'left' })`.
 
 `ChartGroup` also supports declarative responsive layout overrides. Group
 breakpoints can change `cols` and `gap`, while `addChart(..., options)` can

package/dist/legend.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { LegendConfig, ChartTheme, LegendSeries, ExportHooks, LegendConfigBase, LegendMode } from './types.js';
+import type { LegendConfig, ChartTheme, HorizontalAlignment, LegendSeries, ExportHooks, LegendConfigBase, LegendMode } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 import { LegendStateController } from './legend-state.js';
 export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
@@ -7,6 +7,8 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     mode: LegendMode;
     readonly position: LegendConfig['position'];
     readonly disconnectedTarget?: string | HTMLElement;
+    readonly align: HorizontalAlignment;
+    readonly textAlign: HorizontalAlignment;
     readonly exportHooks?: ExportHooks<LegendConfigBase>;
     private readonly marginTop;
     private readonly marginBottom;
@@ -53,5 +55,6 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private positionRows;
     private getLayoutSignature;
     private getFallbackRowHeight;
+    private getAlignmentOffset;
     private bindStateController;
 }

package/dist/legend.js

@@ -28,6 +28,18 @@ export class Legend {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "align", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "textAlign", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "exportHooks", {
             enumerable: true,
             configurable: true,
@@ -106,10 +118,12 @@ export class Legend {
             writable: true,
             value: null
         });
-        const { mode = 'inline', position = 'bottom', disconnectedTarget, marginTop = 20, marginBottom = 10, paddingX, itemSpacingX, itemSpacingY, exportHooks, } = config ?? {};
+        const { mode = 'inline', position = 'bottom', disconnectedTarget, align = 'center', textAlign = 'center', marginTop = 20, marginBottom = 10, paddingX, itemSpacingX, itemSpacingY, exportHooks, } = config ?? {};
         this.mode = mode;
         this.position = position;
         this.disconnectedTarget = disconnectedTarget;
+        this.align = align;
+        this.textAlign = textAlign;
         this.marginTop = marginTop;
         this.marginBottom = marginBottom;
         this.paddingX = paddingX;
@@ -124,6 +138,8 @@ export class Legend {
             mode: this.mode,
             position: this.position,
             disconnectedTarget: this.disconnectedTarget,
+            align: this.align,
+            textAlign: this.textAlign,
             marginTop: this.marginTop,
             marginBottom: this.marginBottom,
             paddingX: this.paddingX,
@@ -335,6 +351,8 @@ export class Legend {
             paddingX: this.paddingX ?? theme.legend.paddingX,
             itemSpacingX: this.itemSpacingX ?? theme.legend.itemSpacingX,
             itemSpacingY: this.itemSpacingY ?? theme.legend.itemSpacingY,
+            align: this.align,
+            textAlign: this.textAlign,
         };
     }
     buildLegendItems(series) {
@@ -402,10 +420,15 @@ export class Legend {
     positionRows(rows, width, settings) {
         const positionedItems = [];
         const availableWidth = Math.max(0, width - settings.paddingX * 2);
+        const legendBlockWidth = rows.reduce((maxWidth, row) => {
+            return Math.max(maxWidth, row.width);
+        }, 0);
+        const legendBlockX = settings.paddingX +
+            this.getAlignmentOffset(availableWidth, legendBlockWidth, settings.align);
         let accumulatedRowHeight = 0;
         rows.forEach((row, rowIndex) => {
-            const rowX = settings.paddingX +
-                Math.max(0, (availableWidth - row.width) / 2);
+            const rowX = legendBlockX +
+                this.getAlignmentOffset(legendBlockWidth, row.width, settings.textAlign);
             const rowY = accumulatedRowHeight + rowIndex * settings.itemSpacingY;
             let currentX = rowX;
             row.items.forEach((item, itemIndex) => {
@@ -433,6 +456,8 @@ export class Legend {
             theme.legend.paddingX,
             theme.legend.itemSpacingX,
             theme.legend.itemSpacingY,
+            this.align,
+            this.textAlign,
             this.paddingX ?? '',
             this.itemSpacingX ?? '',
             this.itemSpacingY ?? '',
@@ -442,6 +467,16 @@ export class Legend {
     getFallbackRowHeight(theme) {
         return Math.max(theme.legend.boxSize, theme.legend.fontSize);
     }
+    getAlignmentOffset(availableWidth, rowWidth, align) {
+        const remainingWidth = Math.max(0, availableWidth - rowWidth);
+        if (align === 'left') {
+            return 0;
+        }
+        if (align === 'right') {
+            return remainingWidth;
+        }
+        return remainingWidth / 2;
+    }
     bindStateController(controller) {
         this.stateControllerCleanup?.();
         this.stateController = controller;

package/dist/radial-chart-base.d.ts

@@ -39,6 +39,10 @@ export declare abstract class RadialChartBase extends BaseChart {
     protected showTooltipAtElement(target: Element, content: string): void;
     protected hideTooltip(): void;
     private applyTooltipPosition;
+    private getTooltipViewportLeft;
+    private getTooltipViewportRight;
+    private getTooltipViewportTop;
+    private getTooltipViewportBottom;
     private resolveRadialLabelLayout;
     private resolveRadialLabelOverflowContext;
     private createVisibleRadialLabelLayout;

package/dist/radial-chart-base.js

@@ -159,7 +159,7 @@ export class RadialChartBase extends BaseChart {
         }
         let x = event.pageX + TOOLTIP_OFFSET_PX;
         const y = event.pageY - rect.height / 2;
-        if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
+        if (x + rect.width > this.getTooltipViewportRight()) {
             x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
         }
         this.applyTooltipPosition(x, y, rect.height, rect.width);
@@ -182,7 +182,7 @@ export class RadialChartBase extends BaseChart {
             window.scrollY +
             targetRect.height / 2 -
             tooltipRect.height / 2;
-        if (x + tooltipRect.width > window.innerWidth - EDGE_MARGIN_PX) {
+        if (x + tooltipRect.width > this.getTooltipViewportRight()) {
             x =
                 targetRect.left +
                     window.scrollX -
@@ -195,10 +195,22 @@ export class RadialChartBase extends BaseChart {
         this.tooltip?.hide();
     }
     applyTooltipPosition(rawX, rawY, height, width) {
-        const x = Math.max(EDGE_MARGIN_PX, Math.min(rawX, window.innerWidth + window.scrollX - width - EDGE_MARGIN_PX));
-        const y = Math.max(EDGE_MARGIN_PX, Math.min(rawY, window.innerHeight + window.scrollY - height - EDGE_MARGIN_PX));
+        const x = Math.max(this.getTooltipViewportLeft(), Math.min(rawX, this.getTooltipViewportRight() - width));
+        const y = Math.max(this.getTooltipViewportTop(), Math.min(rawY, this.getTooltipViewportBottom() - height));
         this.tooltip?.showAt(x, y);
     }
+    getTooltipViewportLeft() {
+        return window.scrollX + EDGE_MARGIN_PX;
+    }
+    getTooltipViewportRight() {
+        return window.scrollX + window.innerWidth - EDGE_MARGIN_PX;
+    }
+    getTooltipViewportTop() {
+        return window.scrollY + EDGE_MARGIN_PX;
+    }
+    getTooltipViewportBottom() {
+        return window.scrollY + window.innerHeight - EDGE_MARGIN_PX;
+    }
     resolveRadialLabelLayout(text, options) {
         const overflowContext = this.resolveRadialLabelOverflowContext(options.maxLabelWidth);
         if (!overflowContext) {

package/dist/tooltip/dom.d.ts

@@ -17,6 +17,7 @@ export declare class TooltipDom {
     private readonly transition;
     private readonly tooltipStyleKeys;
     private readonly tooltipTransitionFrameIds;
+    private readonly tooltipPositionResetTimeoutIds;
     private readonly tooltipStyles;
     private tooltipDiv;
     constructor(config: TooltipDomConfig);
@@ -45,6 +46,9 @@ export declare class TooltipDom {
     private showTooltipAt;
     private showTooltipSelection;
     private hideTooltipElement;
+    private resetTooltipPosition;
+    private scheduleTooltipPositionReset;
+    private cancelTooltipPositionReset;
     private getTooltipTransitionStyle;
     private isTooltipVisible;
     private getTooltipPosition;

package/dist/tooltip/dom.js

@@ -1,6 +1,7 @@
 import { select } from 'd3';
 import { resolveTooltipArrowPosition, resolveTooltipConnectorLayout, } from './geometry.js';
 import { TOOLTIP_ARROW_BORDER_Z_INDEX, TOOLTIP_ARROW_FILL_Z_INDEX, TOOLTIP_BODY_Z_INDEX, TOOLTIP_BORDER_WIDTH_PX, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_Z_INDEX, TOOLTIP_HIDDEN_TRANSFORM, TOOLTIP_ROOT_Z_INDEX, TOOLTIP_VISIBLE_TRANSFORM, } from './types.js';
+const HIDDEN_TOOLTIP_POSITION_PX = '0px';
 export class TooltipDom {
     constructor(config) {
         Object.defineProperty(this, "id", {
@@ -39,6 +40,12 @@ export class TooltipDom {
             writable: true,
             value: new WeakMap()
         });
+        Object.defineProperty(this, "tooltipPositionResetTimeoutIds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
         Object.defineProperty(this, "tooltipStyles", {
             enumerable: true,
             configurable: true,
@@ -284,15 +291,16 @@ export class TooltipDom {
             : null);
     }
     showTooltipSelection(tooltip, slideOffset = null) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        this.cancelTooltipPositionReset(node);
         tooltip.style('visibility', 'visible');
         if (!this.transition.show) {
             return;
         }
         tooltip.style('opacity', '1');
-        const node = tooltip.node();
-        if (!node) {
-            return;
-        }
         if (!slideOffset || !this.hasVisibleSlideOffset(slideOffset)) {
             this.cancelTooltipTransitionFrame(node);
             tooltip.style('transform', TOOLTIP_VISIBLE_TRANSFORM);
@@ -301,14 +309,43 @@ export class TooltipDom {
         this.slideTooltipFromOffset(node, slideOffset);
     }
     hideTooltipElement(node) {
+        const wasVisible = this.isTooltipVisible(node);
+        this.cancelTooltipPositionReset(node);
         this.cancelTooltipTransitionFrame(node);
         if (!this.transition.show) {
             node.style.visibility = 'hidden';
+            this.resetTooltipPosition(node);
             return;
         }
         node.style.visibility = 'visible';
         node.style.opacity = '0';
         node.style.transform = TOOLTIP_HIDDEN_TRANSFORM;
+        if (!wasVisible) {
+            this.resetTooltipPosition(node);
+            return;
+        }
+        this.scheduleTooltipPositionReset(node);
+    }
+    resetTooltipPosition(node) {
+        node.style.left = HIDDEN_TOOLTIP_POSITION_PX;
+        node.style.top = HIDDEN_TOOLTIP_POSITION_PX;
+    }
+    scheduleTooltipPositionReset(node) {
+        const timeoutId = window.setTimeout(() => {
+            this.tooltipPositionResetTimeoutIds.delete(node);
+            if (!this.isTooltipVisible(node)) {
+                this.resetTooltipPosition(node);
+            }
+        }, this.transition.duration);
+        this.tooltipPositionResetTimeoutIds.set(node, timeoutId);
+    }
+    cancelTooltipPositionReset(node) {
+        const timeoutId = this.tooltipPositionResetTimeoutIds.get(node);
+        if (timeoutId === undefined) {
+            return;
+        }
+        window.clearTimeout(timeoutId);
+        this.tooltipPositionResetTimeoutIds.delete(node);
     }
     getTooltipTransitionStyle() {
         return `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`;

package/dist/tooltip/xy-interaction.js

@@ -517,12 +517,36 @@ function getClosestSingleTooltipCandidate(candidates, request) {
         !Number.isFinite(request.pointerY)) {
         return candidates[0];
     }
+    const touchedBarCandidate = getTouchedBarTooltipCandidate(candidates, request);
+    if (touchedBarCandidate) {
+        return touchedBarCandidate;
+    }
     return candidates.reduce((closest, candidate) => {
         const closestDistance = getSingleTooltipDistance(closest, request);
         const candidateDistance = getSingleTooltipDistance(candidate, request);
         return candidateDistance < closestDistance ? candidate : closest;
     });
 }
+function getTouchedBarTooltipCandidate(candidates, request) {
+    const touchedBarCandidates = candidates.filter((candidate) => {
+        return (candidate.series.type === 'bar' &&
+            isPointerInsideAnchor(request, candidate.anchor));
+    });
+    return touchedBarCandidates[touchedBarCandidates.length - 1] ?? null;
+}
+function isPointerInsideAnchor(request, anchor) {
+    const { pointerX, pointerY } = request;
+    if (pointerX === undefined ||
+        pointerY === undefined ||
+        !Number.isFinite(pointerX) ||
+        !Number.isFinite(pointerY)) {
+        return false;
+    }
+    return (pointerX >= anchor.left &&
+        pointerX <= anchor.right &&
+        pointerY >= anchor.top &&
+        pointerY <= anchor.bottom);
+}
 function getSingleTooltipDistance(candidate, request) {
     const deltaX = (request.pointerX ?? 0) - candidate.target.x;
     const deltaY = (request.pointerY ?? 0) - candidate.target.y;
@@ -785,7 +809,7 @@ function attachTooltipScrollListeners(svgNode, onScroll) {
     };
 }
 function getTooltipScrollTargets(svgNode) {
-    const scrollTargets = new Set([window]);
+    const scrollTargets = new Set();
     let currentElement = svgNode.parentElement;
     while (currentElement) {
         if (isScrollableElement(currentElement)) {

package/dist/types.d.ts

@@ -330,10 +330,13 @@ export type TooltipConfigBase = {
 export type TooltipConfig = TooltipConfigBase & {
     exportHooks?: ExportHooks<TooltipConfigBase>;
 };
+export type HorizontalAlignment = 'left' | 'center' | 'right';
 export type LegendConfigBase = {
     mode?: LegendMode;
     position?: 'bottom';
     disconnectedTarget?: string | HTMLElement;
+    align?: HorizontalAlignment;
+    textAlign?: HorizontalAlignment;
     marginTop?: number;
     marginBottom?: number;
     paddingX?: number;
@@ -355,7 +358,7 @@ export type LegendItem = {
     visible: boolean;
 };
 export type TextPosition = 'top' | 'bottom';
-export type TextAlign = 'left' | 'center' | 'right';
+export type TextAlign = HorizontalAlignment;
 export type TextVariantStyle = {
     fontSize?: number;
     fontWeight?: string;

package/docs/components.md

@@ -211,6 +211,8 @@ new Legend({
     mode?: 'inline' | 'disconnected' | 'hidden', // Rendering mode (default: 'inline')
     position?: 'bottom',     // Position (currently only 'bottom')
     disconnectedTarget?: string | HTMLElement, // External mount target when mode is 'disconnected'
+    align?: 'left' | 'center' | 'right', // Legend block alignment (default: 'center')
+    textAlign?: 'left' | 'center' | 'right', // Wrapped row alignment within the legend block (default: 'center')
     marginTop?: number,      // Space above legend (default: 20)
     marginBottom?: number,   // Space below legend (default: 10)
     paddingX?: number,       // Horizontal inset for legend layout (default: theme.legend.paddingX)
@@ -220,7 +222,10 @@ new Legend({
 ```
 
 Legend items automatically wrap to new rows when they do not fit available
-width. Each wrapped row is centered independently.
+width. The widest wrapped row defines the legend block. Use `align` to position
+that block and `textAlign` to align rows inside it, for example
+`{ align: 'center', textAlign: 'left' }` for a centered legend with
+left-aligned wrapped rows.
 
 - `inline`: current default behavior (legend rendered inside the chart SVG)
 - `disconnected`: legend rendered in a separate SVG outside chart layout

package/package.json

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