@internetstiftelsen/charts 0.18.1 → 0.19.0

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/tooltip/geometry.js

@@ -1,6 +1,7 @@
 import { SPLIT_TOOLTIP_GAP_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX, TOOLTIP_CONNECTOR_ELBOW_RATIO, TOOLTIP_CONNECTOR_INSET_PX, TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX, TOOLTIP_CONNECTOR_PADDING_PX, TOOLTIP_OFFSET_PX, TOOLTIP_TOTAL_BORDER_WIDTH_PX, TOOLTIP_VIEWPORT_PADDING_PX, } from './types.js';
 const MAX_EXHAUSTIVE_HORIZONTAL_ROW_LAYOUTS = 10;
 const HORIZONTAL_ROW_ORDER_FLIP_PENALTY_PX = 128;
+const AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 8;
 export function getSplitTooltipViewportBounds() {
     const visualViewport = window.visualViewport;
     const viewportLeft = window.scrollX + (visualViewport?.offsetLeft ?? 0);
@@ -98,13 +99,16 @@ export function getAnchoredTooltipPosition(anchor, target, tooltipWidth, tooltip
     };
 }
 export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
-    const localTargetX = targetX - tooltipLeft;
-    const localTargetY = targetY - tooltipTop;
+    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
+    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
+    const arrowTipX = tooltipLeft + arrowTip.x;
+    const arrowTipY = tooltipTop + arrowTip.y;
+    const connectorTarget = resolveTooltipConnectorTarget(arrowEdge, targetX, targetY, arrowTipX, arrowTipY, anchor);
+    const localTargetX = connectorTarget.x - tooltipLeft;
+    const localTargetY = connectorTarget.y - tooltipTop;
     if (!Number.isFinite(localTargetX) || !Number.isFinite(localTargetY)) {
         return null;
     }
-    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
-    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
     const minX = Math.min(arrowTip.x, localTargetX) - TOOLTIP_CONNECTOR_PADDING_PX;
     const maxX = Math.max(arrowTip.x, localTargetX) + TOOLTIP_CONNECTOR_PADDING_PX;
     const minY = Math.min(arrowTip.y, localTargetY) - TOOLTIP_CONNECTOR_PADDING_PX;
@@ -117,9 +121,7 @@ export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop
     const startY = arrowTip.y - minY;
     const endX = localTargetX - minX;
     const endY = localTargetY - minY;
-    const arrowTipX = tooltipLeft + arrowTip.x;
-    const arrowTipY = tooltipTop + arrowTip.y;
-    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor);
+    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor, connectorTarget.preferDirectPath);
     if (!hasFiniteNumbers(width, height, boxX, boxY, startX, startY, endX, endY)) {
         return null;
     }
@@ -134,6 +136,43 @@ export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop
         arrowY: boxArrowPosition.y,
     };
 }
+function resolveTooltipConnectorTarget(arrowEdge, targetX, targetY, arrowTipX, arrowTipY, anchor) {
+    if (isPointTooltipAnchor(anchor)) {
+        return { x: targetX, y: targetY, preferDirectPath: false };
+    }
+    if (arrowEdge === 'left') {
+        return {
+            x: anchor.right,
+            y: clampTooltipCoordinate(arrowTipY, anchor.top, anchor.bottom),
+            preferDirectPath: true,
+        };
+    }
+    if (arrowEdge === 'right') {
+        return {
+            x: anchor.left,
+            y: clampTooltipCoordinate(arrowTipY, anchor.top, anchor.bottom),
+            preferDirectPath: true,
+        };
+    }
+    if (arrowEdge === 'top') {
+        return {
+            x: clampTooltipCoordinate(arrowTipX, anchor.left, anchor.right),
+            y: anchor.bottom,
+            preferDirectPath: true,
+        };
+    }
+    return {
+        x: clampTooltipCoordinate(arrowTipX, anchor.left, anchor.right),
+        y: anchor.top,
+        preferDirectPath: true,
+    };
+}
+function isPointTooltipAnchor(anchor) {
+    return (Math.abs(anchor.left - anchor.right) <=
+        TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        Math.abs(anchor.top - anchor.bottom) <=
+            TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
 export function resolveTooltipArrowPosition(arrowEdge, boxX, boxY, length, halfHeight) {
     switch (arrowEdge) {
         case 'left':
@@ -210,17 +249,26 @@ function getTooltipConnectorOffset(start, size, target) {
     const preferredOffset = target - start;
     return Math.max(minOffset, Math.min(preferredOffset, maxOffset));
 }
-function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor) {
+function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor, preferDirectPath) {
     if (arrowEdge === 'left' || arrowEdge === 'right') {
-        if (isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor)) {
+        const minPathLength = preferDirectPath
+            ? AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX
+            : TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX;
+        if (isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor, minPathLength)) {
             return '';
         }
+        if (preferDirectPath) {
+            return `M ${startX},${startY} L ${endX},${endY}`;
+        }
         const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
         return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
     }
     if (isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor)) {
         return '';
     }
+    if (preferDirectPath) {
+        return `M ${startX},${startY} L ${endX},${endY}`;
+    }
     const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
     return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
 }
@@ -232,12 +280,12 @@ function isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor) {
     return (arrowTipY >= anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
         arrowTipY <= anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
 }
-function isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor) {
+function isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor, minPathLength = TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX) {
     if (isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
         return true;
     }
-    return (arrowTipY >= anchor.top - TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX &&
-        arrowTipY <= anchor.bottom + TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX);
+    return (arrowTipY >= anchor.top - minPathLength &&
+        arrowTipY <= anchor.bottom + minPathLength);
 }
 function resolveTooltipArrowTip(arrowEdge, boxX, boxY, length) {
     if (arrowEdge === 'left' || arrowEdge === 'right') {
@@ -288,6 +336,7 @@ function getCombinedSplitTooltipTarget(layouts) {
 function getSideSplitTooltipLayouts(layouts) {
     if (layouts.every((layout) => layout.targetMode === 'auto')) {
         return [...layouts].sort((a, b) => a.anchor.top - b.anchor.top ||
+            a.anchor.bottom - b.anchor.bottom ||
             a.anchor.left - b.anchor.left ||
             a.order - b.order);
     }
@@ -662,6 +711,15 @@ function getSidePlacementCandidates(layout, placedLayouts, allLayouts, bounds) {
     ];
     if (layout.targetMode === 'auto') {
         const connectorlessRange = getSideConnectorlessTopRange(layout);
+        const exactConnectorlessRange = getExactSideConnectorlessTopRange(layout);
+        candidates.push({
+            top: exactConnectorlessRange.min,
+            arrowEdge: layout.arrowEdge,
+        });
+        candidates.push({
+            top: exactConnectorlessRange.max,
+            arrowEdge: layout.arrowEdge,
+        });
         candidates.push({
             top: connectorlessRange.min,
             arrowEdge: layout.arrowEdge,
@@ -750,6 +808,17 @@ function getFixedPointSideSpreadPreferredTop(layout, direction) {
     return layout.targetY - TOOLTIP_CONNECTOR_INSET_PX;
 }
 function getSideConnectorlessTopRange(layout) {
+    const nearPathPadding = layout.targetMode === 'auto'
+        ? AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX
+        : 0;
+    return {
+        min: layout.anchor.top -
+            getTooltipConnectorMaxOffset(layout.height) -
+            nearPathPadding,
+        max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX + nearPathPadding,
+    };
+}
+function getExactSideConnectorlessTopRange(layout) {
     return {
         min: layout.anchor.top - getTooltipConnectorMaxOffset(layout.height),
         max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX,
@@ -757,7 +826,9 @@ function getSideConnectorlessTopRange(layout) {
 }
 function isSidePlacementConnectorless(candidate, layout) {
     if (layout.targetMode === 'auto') {
-        return doRangesOverlap(layout.anchor.top, layout.anchor.bottom, candidate.top + TOOLTIP_CONNECTOR_INSET_PX, candidate.top + getTooltipConnectorMaxOffset(layout.height));
+        const connectorlessRange = getSideConnectorlessTopRange(layout);
+        return (candidate.top >= connectorlessRange.min &&
+            candidate.top <= connectorlessRange.max);
     }
     const arrowTipY = getSidePlacementArrowTipY(candidate.top, layout);
     return (arrowTipY >=

package/dist/tooltip/types.d.ts

@@ -6,7 +6,7 @@ import type { Scatter } from '../scatter.js';
 import type { TooltipTransitionConfig } from '../types.js';
 export declare const TOOLTIP_OFFSET_PX = 12;
 export declare const TOOLTIP_VIEWPORT_PADDING_PX = 10;
-export declare const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export declare const TOOLTIP_CONNECTOR_INSET_PX = 10;
 export declare const TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 16;
 export declare const TOOLTIP_CONNECTOR_PADDING_PX = 4;
 export declare const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
@@ -20,7 +20,7 @@ export declare const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 export declare const TOOLTIP_BODY_Z_INDEX = 6;
 export declare const TOOLTIP_TOTAL_BORDER_WIDTH_PX: number;
 export declare const TOOLTIP_ROOT_Z_INDEX = 30;
-export declare const SPLIT_TOOLTIP_GAP_PX = 8;
+export declare const SPLIT_TOOLTIP_GAP_PX = 4;
 export declare const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 export declare const DEFAULT_TOOLTIP_TRANSITION: Required<TooltipTransitionConfig>;
 export declare const TOOLTIP_HIDDEN_TRANSFORM = "translateY(2px)";

package/dist/tooltip/types.js

@@ -1,6 +1,6 @@
 export const TOOLTIP_OFFSET_PX = 12;
 export const TOOLTIP_VIEWPORT_PADDING_PX = 10;
-export const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export const TOOLTIP_CONNECTOR_INSET_PX = 10;
 export const TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 16;
 export const TOOLTIP_CONNECTOR_PADDING_PX = 4;
 export const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
@@ -14,7 +14,7 @@ export const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 export const TOOLTIP_BODY_Z_INDEX = 6;
 export const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
 export const TOOLTIP_ROOT_Z_INDEX = 30;
-export const SPLIT_TOOLTIP_GAP_PX = 8;
+export const SPLIT_TOOLTIP_GAP_PX = 4;
 export const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 export const DEFAULT_TOOLTIP_TRANSITION = {
     show: false,

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;

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.1",
+    "version": "0.19.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,