layerchart 2.0.0-next.56 → 2.0.0-next.58

package/dist/components/Voronoi.svelte.d.ts

@@ -1,9 +1,18 @@
 import type { Without } from '../utils/types.js';
+import type { Accessor } from '../utils/common.js';
 export type VoronoiPropsWithoutHTML = {
     /**
      * Override data instead of using context
      */
     data?: any;
+    /**
+     * Override the `x` accessor used to place each point. Useful when the
+     * chart's `x` accessor returns an array of values (e.g. `['start', 'end']`)
+     * and you want to use a specific one.
+     */
+    x?: Accessor;
+    /** Override the `y` accessor used to place each point. See `x` above. */
+    y?: Accessor;
     /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
     r?: number;
     /**

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);
@@ -678,8 +694,13 @@ export class ChartState {
     rDomain = $derived(calcDomain('r', this.extents, this.props.rDomain));
     x1Domain = $derived.by(() => {
         if (this.props.x1Domain) {
-            const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
-            return this.props.x1Domain.filter((key) => visibleKeys.has(key));
+            // Only filter by visible series when series are configured — otherwise the
+            // full x1Domain is used as-is (composable charts without series).
+            if (this.seriesState.series.length > 0) {
+                const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
+                return this.props.x1Domain.filter((key) => visibleKeys.has(key));
+            }
+            return this.props.x1Domain;
         }
         // Auto-derive for grouped series when x is the category axis
         if (this.props.seriesLayout === 'group' && this.valueAxis === 'y') {
@@ -692,8 +713,13 @@ export class ChartState {
     });
     y1Domain = $derived.by(() => {
         if (this.props.y1Domain) {
-            const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
-            return this.props.y1Domain.filter((key) => visibleKeys.has(key));
+            // Only filter by visible series when series are configured — otherwise the
+            // full y1Domain is used as-is (composable charts without series).
+            if (this.seriesState.series.length > 0) {
+                const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
+                return this.props.y1Domain.filter((key) => visibleKeys.has(key));
+            }
+            return this.props.y1Domain;
         }
         // Auto-derive for grouped series when y is the category axis
         if (this.props.seriesLayout === 'group' && this.valueAxis === 'x') {

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 },
@@ -1406,3 +1587,49 @@ describe('ChartState group layout auto-derives x1/y1', () => {
         }
     });
 });
+describe('ChartState x1Domain/y1Domain without series', () => {
+    const longData = [
+        { year: 2019, fruit: 'apples', value: 3840 },
+        { year: 2019, fruit: 'bananas', value: 1920 },
+        { year: 2018, fruit: 'apples', value: 1600 },
+        { year: 2018, fruit: 'bananas', value: 1440 },
+    ];
+    it('should pass through explicit x1Domain when no series are configured', () => {
+        const { state, cleanup } = createChartState({
+            data: longData,
+            x: 'year',
+            xScale: scaleBand(),
+            y: 'value',
+            x1: 'fruit',
+            x1Domain: ['apples', 'bananas'],
+            x1Range: ({ xScale }) => [0, xScale.bandwidth()],
+        });
+        try {
+            expect(state.seriesState.series).toHaveLength(0);
+            expect(state.x1Domain).toEqual(['apples', 'bananas']);
+            expect(state.x1Scale.domain()).toEqual(['apples', 'bananas']);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should pass through explicit y1Domain when no series are configured', () => {
+        const { state, cleanup } = createChartState({
+            data: longData,
+            y: 'year',
+            yScale: scaleBand(),
+            x: 'value',
+            y1: 'fruit',
+            y1Domain: ['apples', 'bananas'],
+            y1Range: ({ yScale }) => [0, yScale.bandwidth()],
+        });
+        try {
+            expect(state.seriesState.series).toHaveLength(0);
+            expect(state.y1Domain).toEqual(['apples', 'bananas']);
+            expect(state.y1Scale.domain()).toEqual(['apples', 'bananas']);
+        }
+        finally {
+            cleanup();
+        }
+    });
+});

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 {};