layerchart 2.0.0-next.57 → 2.0.0-next.59

package/dist/components/index.d.ts

@@ -46,8 +46,6 @@ export { default as ClipPath } from './ClipPath.svelte';
 export * from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export * from './ColorRamp.svelte';
-export { default as Connector } from './Connector.svelte';
-export * from './Connector.svelte';
 export { default as Contour } from './Contour.svelte';
 export * from './Contour.svelte';
 export { default as Dagre } from './Dagre.svelte';

package/dist/components/index.js

@@ -46,8 +46,6 @@ export { default as ClipPath } from './ClipPath.svelte';
 export * from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export * from './ColorRamp.svelte';
-export { default as Connector } from './Connector.svelte';
-export * from './Connector.svelte';
 export { default as Contour } from './Contour.svelte';
 export * from './Contour.svelte';
 export { default as Dagre } from './Dagre.svelte';

package/dist/components/tooltip/TooltipContext.svelte

@@ -2,6 +2,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import { asAny, type Without } from '../../utils/types.js';
   import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
+  import type { Accessor } from '../../utils/common.js';
 
   export type TooltipMode =
     | 'bisect-x' // requires values to be sorted
@@ -55,6 +56,21 @@
      */
     radius?: number;
 
+    /**
+     * Override the `x` accessor used for quadtree/voronoi hit detection.
+     * Useful when the chart's `x` accessor returns an array of values and you
+     * want hit detection at a specific endpoint.
+     *
+     * Accepts a string property name (e.g. `'POP_2015'`) or a function.
+     */
+    x?: Accessor;
+
+    /**
+     * Override the `y` accessor used for quadtree/voronoi hit detection.
+     * See `x` above.
+     */
+    y?: Accessor;
+
     /**
      * Enable debug view (show hit targets, etc)
      * @default false
@@ -131,6 +147,8 @@
     radius = Infinity,
     raiseTarget = false,
     state: stateProp = $bindable() as TooltipStateType<TData>,
+    x: xProp,
+    y: yProp,
     children,
   }: TooltipContextProps<TData> = $props();
 
@@ -411,6 +429,9 @@
     }, hideDelay);
   }
 
+  const xAccessorOverride = $derived(xProp != null ? accessor(xProp) : undefined);
+  const yAccessorOverride = $derived(yProp != null ? accessor(yProp) : undefined);
+
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
     if (['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
       return d3Quadtree()
@@ -419,6 +440,11 @@
             return 0;
           }
 
+          if (xAccessorOverride) {
+            const scaled = ctx.xScale(xAccessorOverride(d));
+            return typeof scaled === 'number' ? scaled : 0;
+          }
+
           if (geo.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -429,11 +455,10 @@
           const value = ctx.xGet(d);
 
           if (Array.isArray(value)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            // Using first value.  Consider using average, max, etc
-            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-            // return midpoint;
-            return min(value);
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`).
+            // Default to the max (typically the "target"/"end" endpoint); override
+            // via the `x` prop for explicit control.
+            return max(value);
           } else {
             return value;
           }
@@ -443,6 +468,11 @@
             return 0;
           }
 
+          if (yAccessorOverride) {
+            const scaled = ctx.yScale(yAccessorOverride(d));
+            return typeof scaled === 'number' ? scaled : 0;
+          }
+
           if (geo.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -453,11 +483,8 @@
           const value = ctx.yGet(d);
 
           if (Array.isArray(value)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            // Using first value.  Consider using average, max, etc
-            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-            // return midpoint;
-            return min(value);
+            // `y` accessor with multiple properties — default to max endpoint.
+            return max(value);
           } else {
             return value;
           }
@@ -676,6 +703,8 @@
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
+          x={xProp}
+          y={yProp}
           r={radius}
           onpointerenter={(e, { data }) => {
             showTooltip(e, data);

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Without } from '../../utils/types.js';
 import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
+import type { Accessor } from '../../utils/common.js';
 export type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 type TooltipContextPropsWithoutHTML<T = any> = {
     /**
@@ -36,6 +37,19 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      * @default Infinity
      */
     radius?: number;
+    /**
+     * Override the `x` accessor used for quadtree/voronoi hit detection.
+     * Useful when the chart's `x` accessor returns an array of values and you
+     * want hit detection at a specific endpoint.
+     *
+     * Accepts a string property name (e.g. `'POP_2015'`) or a function.
+     */
+    x?: Accessor;
+    /**
+     * Override the `y` accessor used for quadtree/voronoi hit detection.
+     * See `x` above.
+     */
+    y?: Accessor;
     /**
      * Enable debug view (show hit targets, etc)
      * @default false

package/dist/states/brush.svelte.d.ts

@@ -35,7 +35,7 @@ export declare class BrushState {
     x: BrushDomainType;
     y: BrushDomainType;
     active: boolean | undefined;
-    axis: "both" | "x" | "y";
+    axis: "x" | "y" | "both";
     handleSize: number;
     constructor(ctx: typeof this.ctx, options?: {
         x?: BrushDomainType;

package/dist/states/chart.svelte.js

@@ -174,6 +174,13 @@ export class ChartState {
             // Use the value axis accessor (y for horizontal charts, x for vertical).
             const valueAxis = this.valueAxis;
             const chartValueProp = valueAxis === 'y' ? this.props.y : this.props.x;
+            const chartValueKeys = Array.isArray(chartValueProp)
+                ? chartValueProp.filter((k) => typeof k === 'string')
+                : typeof chartValueProp === 'string'
+                    ? [chartValueProp]
+                    : [];
+            const chartHasOwnData = this.props.data != null &&
+                (!Array.isArray(this.props.data) || this.props.data.length > 0);
             const implicitSeries = [];
             for (const { info } of this._markInfos) {
                 const valueAccessor = valueAxis === 'y' ? info.y : info.x;
@@ -181,10 +188,12 @@ export class ChartState {
                     (typeof valueAccessor === 'string' ? valueAccessor : undefined);
                 if (!key)
                     continue;
-                // Skip if the mark just reuses the chart's own axis accessor and has no
-                // separate data — it's not defining a new series, just using the chart's axis.
-                // Marks with their own data arrays are kept (multi-dataset scenario).
-                if (key === chartValueProp && !info.data)
+                // Skip if the mark's key matches one of the chart's axis accessors.
+                // When the chart has its own data, any mark using that accessor is just
+                // decorating (e.g. a filtered label subset), not defining a new series.
+                // Without explicit chart data, still skip unless the mark has its own
+                // dataset (multi-dataset scenario).
+                if (chartValueKeys.includes(key) && (chartHasOwnData || !info.data))
                     continue;
                 if (implicitSeries.some((s) => s.key === key))
                     continue;
@@ -316,14 +325,21 @@ export class ChartState {
     // Use $derived fields instead of getters for caching
     containerWidth = $derived(this.props.width ?? this._containerWidth);
     containerHeight = $derived(this.props.height ?? this._containerHeight);
-    // If seriesState has series-specific data, use visible series data (for domain calculations).
-    // This allows simplified charts to pass raw data and let Chart derive chartData from seriesState.
-    // Using visibleSeriesData ensures domain recalculates when series are shown/hidden via legend.
+    // When `<Chart data>` is passed with a non-empty dataset, it's canonical —
+    // marks with their own `data` (e.g. filtered label subsets) still contribute
+    // to `flatData` for domain calculation but don't replace iteration data.
+    // Otherwise fall back to `visibleSeriesData` so simplified charts that pass
+    // data via series definitions still work, with reactive recomputation when
+    // series are shown/hidden via legend.
     data = $derived.by(() => {
+        const propsData = this.props.data;
+        if (propsData != null && (!Array.isArray(propsData) || propsData.length > 0)) {
+            return propsData;
+        }
         if (this.seriesState?.visibleSeriesData?.length) {
             return this.seriesState.visibleSeriesData;
         }
-        return this.props.data ?? [];
+        return [];
     });
     flatData = $derived.by(() => {
         const base = (this.props.flatData ?? this.data);

package/dist/states/chart.svelte.test.js

@@ -534,6 +534,187 @@ describe('ChartState mark registration', () => {
         }
     });
 });
+describe('ChartState data vs visibleSeriesData', () => {
+    it('should return props.data when explicit, even if a mark registers a filtered subset', () => {
+        const fullData = [
+            { date: '2024-01', value: 10 },
+            { date: '2024-02', value: 20 },
+            { date: '2024-03', value: 30 },
+        ];
+        const highlighted = [fullData[0]]; // filtered subset
+        const { state, cleanup } = createChartState({
+            data: fullData,
+            x: 'date',
+            y: 'value',
+        });
+        try {
+            // Simulate a decorative mark (e.g. <Text data={highlighted}>) registering
+            // its own filtered dataset with the same value accessor as the chart.
+            state.registerMark({ y: 'value', data: highlighted });
+            flushSync();
+            // ctx.data (used by sibling marks for iteration) should remain the full
+            // chart data, not be replaced by the filtered subset.
+            expect(state.data).toBe(fullData);
+            expect(state.data).toHaveLength(3);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should fall back to visibleSeriesData when props.data is not provided', () => {
+        const applesData = [
+            { date: '2024-01', value: 10 },
+            { date: '2024-02', value: 20 },
+        ];
+        const bananasData = [
+            { date: '2024-01', value: 15 },
+            { date: '2024-02', value: 25 },
+        ];
+        const { state, cleanup } = createChartState({
+            x: 'date',
+            y: 'value',
+            series: [
+                { key: 'apples', data: applesData },
+                { key: 'bananas', data: bananasData },
+            ],
+        });
+        try {
+            // No props.data — ctx.data should flatten series data for iteration.
+            expect(state.data).toHaveLength(4);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should not create an implicit series for a decorative mark when chart has own data', () => {
+        // Scenario: <Chart data={full}> + <Text data={highlighted} y="value"> (labels)
+        // The Text mark shouldn't create an implicit series that narrows the domain.
+        const fullData = [
+            { date: '2024-01', value: 10 },
+            { date: '2024-02', value: 50 },
+            { date: '2024-03', value: 100 },
+        ];
+        const highlighted = [fullData[1]];
+        const { state, cleanup } = createChartState({
+            data: fullData,
+            x: 'date',
+            y: 'value',
+        });
+        try {
+            state.registerMark({ y: 'value', data: highlighted });
+            flushSync();
+            // Decorative mark shouldn't turn this into a multi-series chart.
+            expect(state.seriesState.isDefaultSeries).toBe(true);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should not create an implicit series when chart uses array y accessor matching the mark key', () => {
+        const fullData = [
+            { date: '2024-01', v1: 10, v2: 20 },
+            { date: '2024-02', v1: 30, v2: 40 },
+        ];
+        const { state, cleanup } = createChartState({
+            data: fullData,
+            x: 'date',
+            y: ['v1', 'v2'],
+        });
+        try {
+            state.registerMark({ y: 'v2', data: [fullData[0]] });
+            flushSync();
+            expect(state.seriesState.isDefaultSeries).toBe(true);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should compute yDomain from full chart data when a decorative mark has a filtered subset', () => {
+        // Regression: Text labeling highlighted rows shouldn't narrow the y domain.
+        const fullData = [
+            { date: '2024-01', value: 10 },
+            { date: '2024-02', value: 50 },
+            { date: '2024-03', value: 100 },
+        ];
+        const highlighted = [fullData[1]]; // only value=50
+        const { state, cleanup } = createChartState({
+            data: fullData,
+            x: 'date',
+            y: 'value',
+        });
+        try {
+            state.registerMark({ y: 'value', data: highlighted });
+            flushSync();
+            // yDomain should reflect the full data extent [10, 100], not just [50, 50].
+            expect(state.yDomain).toEqual([10, 100]);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should compute yDomain across all array y accessors on Chart', () => {
+        const data = [
+            { date: '2024-01', v1: 3, v2: 5 },
+            { date: '2024-02', v1: 2, v2: 8 },
+            { date: '2024-03', v1: 4, v2: 9 },
+        ];
+        const { state, cleanup } = createChartState({
+            data,
+            x: 'date',
+            y: ['v1', 'v2'],
+        });
+        try {
+            // Domain should span min(v1) = 2 to max(v2) = 9
+            expect(state.yDomain).toEqual([2, 9]);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should keep full yDomain when decorative mark + array y both present', () => {
+        const data = [
+            { date: '2024-01', v1: 3, v2: 5 },
+            { date: '2024-02', v1: 2, v2: 8 },
+            { date: '2024-03', v1: 4, v2: 9 },
+        ];
+        const { state, cleanup } = createChartState({
+            data,
+            x: 'date',
+            y: ['v1', 'v2'],
+        });
+        try {
+            // Decorative Text mark with subset data and y matching one of chart's keys
+            state.registerMark({ y: 'v2', data: [data[0]] });
+            flushSync();
+            // Still the full range [2, 9], not narrowed to [5, 5]
+            expect(state.yDomain).toEqual([2, 9]);
+            expect(state.seriesState.isDefaultSeries).toBe(true);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should fall back to visibleSeriesData when props.data is an empty array', () => {
+        // Composite charts (BarChart, etc.) default `data = []` when not passed.
+        const applesData = [{ date: '2024-01', value: 10 }];
+        const bananasData = [{ date: '2024-01', value: 15 }];
+        const { state, cleanup } = createChartState({
+            data: [],
+            x: 'date',
+            y: 'value',
+            series: [
+                { key: 'apples', data: applesData },
+                { key: 'bananas', data: bananasData },
+            ],
+        });
+        try {
+            expect(state.data).toHaveLength(2);
+        }
+        finally {
+            cleanup();
+        }
+    });
+});
 describe('ChartState geo projection skips markInfo', () => {
     const geoData = [
         { name: 'New York', longitude: -74.006, latitude: 40.7128 },

package/dist/utils/linkUtils.d.ts

@@ -0,0 +1,42 @@
+import { type CurveFactory } from 'd3-shape';
+export type LinkCoords = {
+    x: number;
+    y: number;
+};
+export type PresetLinkType = 'straight' | 'square' | 'beveled' | 'rounded' | 'swoop';
+export type LinkType = PresetLinkType | 'd3';
+export type LinkSweep = 'horizontal-vertical' | 'vertical-horizontal' | 'none';
+type GetLinkPresetPathProps = {
+    source: LinkCoords;
+    target: LinkCoords;
+    radius: number;
+    type: PresetLinkType;
+    sweep: LinkSweep;
+    /** Bend angle in degrees, used by 'swoop' type. Default 22.5. */
+    bend?: number;
+};
+export declare function getLinkPresetPath(opts: GetLinkPresetPathProps): string;
+type GetLinkD3PathProps = Omit<GetLinkPresetPathProps, 'radius' | 'type'> & {
+    curve: CurveFactory;
+    /**
+     * Cartesian orientation hint for axis-dependent curves (d3 step variants step
+     * along x by default; for 'vertical' we step along y to match the natural flow).
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+export declare function getLinkD3Path({ source, target, sweep, curve, orientation, }: GetLinkD3PathProps): string;
+type GetLinkRadialPresetPathProps = {
+    source: LinkCoords;
+    target: LinkCoords;
+    type: PresetLinkType;
+    radius: number;
+    bend?: number;
+};
+export declare function getLinkRadialPresetPath({ source, target, type, radius, bend, }: GetLinkRadialPresetPathProps): string;
+type GetLinkRadialD3PathProps = {
+    source: LinkCoords;
+    target: LinkCoords;
+    curve?: CurveFactory;
+};
+export declare function getLinkRadialD3Path({ source, target, curve, }: GetLinkRadialD3PathProps): string;
+export {};

package/dist/utils/{connectorUtils.js → linkUtils.js}

@@ -58,27 +58,63 @@ function createRoundedPath(opts) {
         return `M ${source.x} ${source.y} L ${pBeforeCorner.x} ${pBeforeCorner.y} A ${effectiveRadius} ${effectiveRadius} 0 0 ${sweepFlag} ${pAfterCorner.x} ${pAfterCorner.y} L ${target.x} ${target.y}`;
     }
 }
+/**
+ * Swoop: circular arc between source and target. Equivalent to ObservablePlot's
+ * Arrow `bend` option — positive angle bends right (clockwise from source to
+ * target), negative bends left, 0 is a straight line.
+ */
+function createSwoopPath({ source, target, dx, dy, bend = 22.5 }) {
+    const chordLen = Math.hypot(dx, dy);
+    const bendRad = (bend * Math.PI) / 180;
+    if (Math.abs(bendRad) < 1e-6 || chordLen < 1e-6) {
+        return createDirectPath(source, target);
+    }
+    // Half-chord subtends `bend` at the arc center, so radius = chord / (2 * sin(bend))
+    const arcRadius = chordLen / (2 * Math.sin(Math.abs(bendRad)));
+    const largeArc = Math.abs(bend) > 90 ? 1 : 0;
+    const sweepFlag = bend > 0 ? 1 : 0;
+    return `M${source.x},${source.y}A${arcRadius},${arcRadius} 0 ${largeArc} ${sweepFlag} ${target.x},${target.y}`;
+}
 const pathStrategies = {
     square: createSquarePath,
     beveled: createBeveledPath,
     rounded: createRoundedPath,
+    swoop: createSwoopPath,
 };
-export function getConnectorPresetPath(opts) {
+export function getLinkPresetPath(opts) {
     const { source, target, type } = opts;
     if (isSamePoint(source, target))
         return '';
     const dx = target.x - source.x;
     const dy = target.y - source.y;
-    // straight line cases
-    if (type === 'straight' || isNearZero(dx) || isNearZero(dy)) {
+    // straight line cases (swoop still bends even when axis-aligned)
+    if (type === 'straight' || (type !== 'swoop' && (isNearZero(dx) || isNearZero(dy)))) {
         return createDirectPath(source, target);
     }
     return (pathStrategies[type] || pathStrategies.square)({ ...opts, dx, dy });
 }
 const FALLBACK_PATH = 'M0,0L0,0';
-export function getConnectorD3Path({ source, target, sweep, curve }) {
+export function getLinkD3Path({ source, target, sweep, curve, orientation = 'horizontal', }) {
     const dx = target.x - source.x;
     const dy = target.y - source.y;
+    // d3 step curves always step along x. For vertical orientation, emit a
+    // y-axis step manually so the step sits between parent/child along depth.
+    if (orientation === 'vertical' && sweep === 'none') {
+        const { x: sx, y: sy } = source;
+        const { x: tx, y: ty } = target;
+        if (curve === curveStep) {
+            const my = (sy + ty) / 2;
+            return `M${sx},${sy}L${sx},${my}L${tx},${my}L${tx},${ty}`;
+        }
+        if (curve === curveStepBefore) {
+            // Bump near source: sibling (x) changes first, then depth (y)
+            return `M${sx},${sy}L${tx},${sy}L${tx},${ty}`;
+        }
+        if (curve === curveStepAfter) {
+            // Bump near target: depth (y) changes first, then sibling (x)
+            return `M${sx},${sy}L${sx},${ty}L${tx},${ty}`;
+        }
+    }
     const line = d3Line().curve(curve);
     let points = [];
     const isAligned = isNearZero(dx) || isNearZero(dy);
@@ -135,12 +171,26 @@ function radialGeometry(source, target) {
         sweepFlag,
     };
 }
-export function getConnectorRadialPresetPath({ source, target, type, radius, }) {
+export function getLinkRadialPresetPath({ source, target, type, radius, bend = 22.5, }) {
     const g = radialGeometry(source, target);
     const { sr, ta, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
     if (type === 'straight') {
         return `M${sx},${sy}L${tx},${ty}`;
     }
+    if (type === 'swoop') {
+        // Circular arc in cartesian space between the polar-converted endpoints.
+        const dx = tx - sx;
+        const dy = ty - sy;
+        const chordLen = Math.hypot(dx, dy);
+        const bendRad = (bend * Math.PI) / 180;
+        if (Math.abs(bendRad) < 1e-6 || chordLen < 1e-6) {
+            return `M${sx},${sy}L${tx},${ty}`;
+        }
+        const arcRadius = chordLen / (2 * Math.sin(Math.abs(bendRad)));
+        const largeArc = Math.abs(bend) > 90 ? 1 : 0;
+        const arcSweep = bend > 0 ? 1 : 0;
+        return `M${sx},${sy}A${arcRadius},${arcRadius} 0 ${largeArc} ${arcSweep} ${tx},${ty}`;
+    }
     if (type === 'rounded') {
         // visx LinkRadialCurve: cubic Bezier with rotated offset (percent controls tension)
         const percent = 0.2;
@@ -183,7 +233,7 @@ export function getConnectorRadialPresetPath({ source, target, type, radius, })
     const p2y = cornerY + radialDir * r * ts;
     return `M${sx},${sy}L${p1x},${p1y}L${p2x},${p2y}L${tx},${ty}`;
 }
-export function getConnectorRadialD3Path({ source, target, curve, }) {
+export function getLinkRadialD3Path({ source, target, curve, }) {
     const g = radialGeometry(source, target);
     const { sr, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
     // Step curves render as polar arcs/radials rather than cartesian stairs.

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.57",
+  "version": "2.0.0-next.59",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",