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