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

package/dist/components/Link.svelte

@@ -3,116 +3,169 @@
   import type { Without } from '../utils/types.js';
   import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
   import { curveBumpX, curveBumpY, type CurveFactory } from 'd3-shape';
+  import type { LinkSweep, LinkType } from '../utils/linkUtils.js';
+  import type { PathProps, PathPropsWithoutHTML } from './Path.svelte';
+  import type { Accessor } from '../utils/common.js';
 
   export type LinkPropsWithoutHTML = {
-    // Override what is used from context
+    /**
+     * Source `x` coordinate. Accepts a `number` (pixel value), a string property
+     * name, or `(d) => value` accessor. Strings/functions use `ctx.xScale`.
+     */
+    x1?: Accessor;
+    /**
+     * Source `y` coordinate. Accepts a `number`, property name, or
+     * `(d) => value` accessor. Strings/functions use `ctx.yScale`.
+     */
+    y1?: Accessor;
+    /** Target `x` coordinate. See `x1`. */
+    x2?: Accessor;
+    /** Target `y` coordinate. See `y1`. */
+    y2?: Accessor;
+
+    /**
+     * Data for the link. In array mode (when `x1`/`y1`/`x2`/`y2` are strings or
+     * functions) this should be an array of rows; one path is rendered per row.
+     * In hierarchy/sankey mode, a single link object (`{source, target, ...}`).
+     * Defaults to `ctx.data` in array mode.
+     */
     data?: any;
 
     /**
-     * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+     * Update source and target accessors to be compatible with d3-sankey. see:
+     * https://github.com/d3/d3-sankey#sankeyLinkHorizontal
      *
      * @default false
      */
     sankey?: boolean;
+    /** Accessor returning the source node from `data` (hierarchy/sankey mode). */
     source?: (d: any) => any;
+    /** Accessor returning the target node from `data` (hierarchy/sankey mode). */
     target?: (d: any) => any;
-
-    /**
-     * Convenient property to swap x/y accessor logic
-     */
-    orientation?: 'vertical' | 'horizontal';
-
+    /** Accessor returning `x` for a node (hierarchy/sankey mode). */
     x?: (d: any) => any;
+    /** Accessor returning `y` for a node (hierarchy/sankey mode). */
     y?: (d: any) => any;
-    curve?: CurveFactory;
 
     /**
-     * Marker to attach to both start and end points of the line
+     * The link path type.
+     *
+     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
+     *
+     * @default 'd3'
      */
-    marker?: MarkerOptions;
+    type?: LinkType;
 
     /**
-     * Marker to attach to the middle point of the line
+     * Corner radius (used by `'beveled'` and `'rounded'`).
+     *
+     * @default 20
      */
-    markerMid?: MarkerOptions;
+    radius?: number;
 
     /**
-     * Marker to attach to the start point of the line
+     * Bend angle in degrees for the `'swoop'` link type.
+     *
+     * @default 22.5
      */
-    markerStart?: MarkerOptions;
+    bend?: number;
+
+    /** D3 curve function (used when `type === 'd3'`). */
+    curve?: CurveFactory;
+
+    /** Sweep direction for preset types and d3 paths. */
+    sweep?: LinkSweep;
 
     /**
-     * Marker to attach to the end point of the line
+     * Natural flow direction (affects default curve and axis-dependent step
+     * curves). Also toggles x/y accessor logic in hierarchy mode.
      */
-    markerEnd?: MarkerOptions;
+    orientation?: 'vertical' | 'horizontal';
 
     /**
-     * Apply explicit coordinates to the line. Useful when dealing with
-     * force simulation links.
+     * Interpret coords as polar (`x` = angle, `y` = radius) and render in
+     * radial space. Defaults to `ctx.radial` when unset.
      */
-    explicitCoords?: {
-      x1: number;
-      y1: number;
-      x2: number;
-      y2: number;
-    };
+    radial?: boolean;
+
+    /** Marker at both start and end points. */
+    marker?: MarkerOptions;
+    /** Marker at the middle point. */
+    markerMid?: MarkerOptions;
+    /** Marker at the start point. */
+    markerStart?: MarkerOptions;
+    /** Marker at the end point. */
+    markerEnd?: MarkerOptions;
 
     motion?: MotionTweenOption | MotionNoneOption;
-  };
 
-  export type LinkProps = LinkPropsWithoutHTML & Without<ConnectorProps, LinkPropsWithoutHTML>;
+    /**
+     * CSS class. In array mode, accepts a `(d) => string` function evaluated
+     * per datum.
+     */
+    class?: string | ((d: any) => string);
+  } & Omit<PathPropsWithoutHTML, 'class'>;
+
+  export type LinkProps = LinkPropsWithoutHTML & Without<PathProps, LinkPropsWithoutHTML>;
 
   const FALLBACK_COORDS = { x: 0, y: 0 };
+
+  function isAccessorAccessor(value: Accessor | undefined): boolean {
+    return typeof value === 'string' || typeof value === 'function';
+  }
 </script>
 
 <script lang="ts">
-  /*
-TODO:
-		- [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
-    - [ ] Support link types
-      - [ ] https://airbnb.io/visx/linktypes
-        - [ ] https://github.com/airbnb/visx/tree/master/packages/visx-shape/src/shapes/link
-      - [ ] https://observablehq.com/@nitaku/corner-connectors
-      - [ ] Straight
-      - [ ] Square
-      - [ ] Beveled
-      - [ ] Rounded
-    - [ ] Investigate: https://observablehq.com/@fil/sankey-link-paths
-    - [ ] Use for annotations - https://github.com/techniq/layerchart/issues/11
-	*/
-  import Connector, { type ConnectorProps } from './Connector.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import {
+    getLinkD3Path,
+    getLinkPresetPath,
+    getLinkRadialD3Path,
+    getLinkRadialPresetPath,
+  } from '../utils/linkUtils.js';
   import { getChartContext } from '../contexts/chart.js';
+  import Path from './Path.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { accessor } from '../utils/common.js';
+  import { cls } from '@layerstack/tailwind';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+  import { interpolatePath } from 'd3-interpolate-path';
 
   const ctx = getChartContext();
 
   let {
+    x1,
+    y1,
+    x2,
+    y2,
     data,
     sankey = false,
     source: sourceProp,
     target: targetProp,
-    orientation: orientationProp,
     x: xProp,
     y: yProp,
+    orientation: orientationProp,
     curve: curveProp,
-    explicitCoords,
     type = 'd3',
-    sweep = 'none',
+    sweep: sweepProp,
     radius = 20,
+    bend = 22.5,
+    radial: radialProp,
+    marker,
+    markerStart,
+    markerMid,
+    markerEnd,
+    motion,
+    pathRef = $bindable(),
+    pathData: pathDataProp,
+    class: classProp,
     ...restProps
   }: LinkProps = $props();
 
-  const sourceAccessor = $derived.by(() => {
-    if (sourceProp) return sourceProp;
-    if (sankey) return (d: any) => ({ node: d.source, y: d.y0, isSource: true });
-    return (d: any) => d.source;
-  });
-
-  const targetAccessor = $derived.by(() => {
-    if (targetProp) return targetProp;
-    if (sankey) return (d: any) => ({ node: d.target, y: d.y1, isSource: false });
-    return (d: any) => d.target;
-  });
+  const radial = $derived(radialProp ?? ctx.radial ?? false);
 
   const orientation = $derived.by(() => {
     if (orientationProp) return orientationProp;
@@ -126,24 +179,82 @@ TODO:
     return curveBumpY;
   });
 
+  const sweep = $derived.by(() => {
+    if (type === 'd3') return sweepProp ?? 'none';
+    if (sweepProp && sweepProp !== 'none') return sweepProp;
+    return orientation === 'vertical' ? 'horizontal-vertical' : 'vertical-horizontal';
+  });
+
+  // Array/data mode: any of x1/y1/x2/y2 is a string or function
+  const isArrayMode = $derived(
+    isAccessorAccessor(x1) || isAccessorAccessor(y1) || isAccessorAccessor(x2) || isAccessorAccessor(y2)
+  );
+
+  // Pixel mode: any of x1/y1/x2/y2 is a number (and not array mode)
+  const isPixelMode = $derived(
+    !isArrayMode &&
+      (typeof x1 === 'number' ||
+        typeof y1 === 'number' ||
+        typeof x2 === 'number' ||
+        typeof y2 === 'number')
+  );
+
+  // --- Hierarchy/sankey accessors (used only when !isArrayMode && !isPixelMode) ---
+  const sourceAccessor = $derived.by(() => {
+    if (sourceProp) return sourceProp;
+    if (sankey) return (d: any) => ({ node: d.source, y: d.y0, isSource: true });
+    return (d: any) => d.source;
+  });
+
+  const targetAccessor = $derived.by(() => {
+    if (targetProp) return targetProp;
+    if (sankey) return (d: any) => ({ node: d.target, y: d.y1, isSource: false });
+    return (d: any) => d.target;
+  });
+
   const xAccessor = $derived.by(() => {
     if (xProp) return xProp;
     if (sankey) return (d: any) => (d.isSource ? d.node.x1 : d.node.x0);
-    if (ctx.radial) return (d: any) => d.x;
+    if (radial) return (d: any) => d.x;
     return (d: any) => (orientation === 'horizontal' ? d.y : d.x);
   });
 
   const yAccessor = $derived.by(() => {
     if (yProp) return yProp;
     if (sankey) return (d: any) => d.y;
-    if (ctx.radial) return (d: any) => d.y;
+    if (radial) return (d: any) => d.y;
     return (d: any) => (orientation === 'horizontal' ? d.x : d.y);
   });
 
-  const sourceCoords = $derived.by(() => {
-    if (explicitCoords) return { x: explicitCoords.x1, y: explicitCoords.y1 };
-    if (!data) return FALLBACK_COORDS;
+  // --- Array mode: resolve endpoint coords for each row ---
+  const x1Accessor = $derived(accessor(x1 as Accessor));
+  const y1Accessor = $derived(accessor(y1 as Accessor));
+  const x2Accessor = $derived(accessor(x2 as Accessor));
+  const y2Accessor = $derived(accessor(y2 as Accessor));
 
+  const resolveArrayCoords = (d: any) => {
+    const sxRaw = x1Accessor(d);
+    const syRaw = y1Accessor(d);
+    const txRaw = x2Accessor(d);
+    const tyRaw = y2Accessor(d);
+    const scaleX = typeof x1 === 'string' || typeof x1 === 'function' ? ctx.xScale : null;
+    const scaleY = typeof y1 === 'string' || typeof y1 === 'function' ? ctx.yScale : null;
+    const sx = scaleX && sxRaw != null ? scaleX(sxRaw) : typeof sxRaw === 'number' ? sxRaw : 0;
+    const sy = scaleY && syRaw != null ? scaleY(syRaw) : typeof syRaw === 'number' ? syRaw : 0;
+    const tx = scaleX && txRaw != null ? scaleX(txRaw) : typeof txRaw === 'number' ? txRaw : 0;
+    const ty = scaleY && tyRaw != null ? scaleY(tyRaw) : typeof tyRaw === 'number' ? tyRaw : 0;
+    return {
+      source: { x: Number.isFinite(sx) ? sx : 0, y: Number.isFinite(sy) ? sy : 0 },
+      target: { x: Number.isFinite(tx) ? tx : 0, y: Number.isFinite(ty) ? ty : 0 },
+    };
+  };
+
+  // --- Single-path coords (pixel or hierarchy/sankey mode) ---
+  const singleSourceCoords = $derived.by(() => {
+    if (isPixelMode) {
+      return { x: typeof x1 === 'number' ? x1 : 0, y: typeof y1 === 'number' ? y1 : 0 };
+    }
+    if (!data) return FALLBACK_COORDS;
     try {
       const sourceData = sourceAccessor(data);
       if (sourceData == null) return FALLBACK_COORDS;
@@ -156,10 +267,11 @@ TODO:
     }
   });
 
-  const targetCoords = $derived.by(() => {
-    if (explicitCoords) return { x: explicitCoords.x2, y: explicitCoords.y2 };
+  const singleTargetCoords = $derived.by(() => {
+    if (isPixelMode) {
+      return { x: typeof x2 === 'number' ? x2 : 100, y: typeof y2 === 'number' ? y2 : 100 };
+    }
     if (!data) return FALLBACK_COORDS;
-
     try {
       const targetData = targetAccessor(data);
       if (targetData == null) return FALLBACK_COORDS;
@@ -171,15 +283,89 @@ TODO:
       return FALLBACK_COORDS;
     }
   });
+
+  function buildPath(source: { x: number; y: number }, target: { x: number; y: number }) {
+    if (pathDataProp) return pathDataProp;
+    if (radial) {
+      return type === 'd3'
+        ? getLinkRadialD3Path({ source, target, curve })
+        : getLinkRadialPresetPath({ source, target, type, radius, bend });
+    }
+    if (type === 'd3') {
+      return getLinkD3Path({ source, target, sweep, curve, orientation });
+    }
+    return getLinkPresetPath({ source, target, sweep, type, radius, bend });
+  }
+
+  // --- Single-path case ---
+  const singlePathData = $derived(
+    isArrayMode ? '' : buildPath(singleSourceCoords, singleTargetCoords)
+  );
+
+  const extractedTween = extractTweenConfig(motion);
+  const tweenOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: {
+          interpolate: interpolatePath,
+          ...extractedTween.options,
+        },
+      }
+    : undefined;
+
+  const motionPath = createMotion(
+    '',
+    () => singlePathData,
+    tweenOptions ? tweenOptions : { type: 'none' }
+  );
+
+  // --- Array mode paths ---
+  const arrayRows = $derived(isArrayMode ? ((data ?? ctx.data) ?? []) : []);
+
+  function resolvePerDatum<T>(value: T | ((d: any) => T) | undefined, d: any): T | undefined {
+    return typeof value === 'function' ? (value as (d: any) => T)(d) : (value as T | undefined);
+  }
+
+  function resolveClass(d: any): string | undefined {
+    return resolvePerDatum<string>(classProp as any, d);
+  }
+
+  // Pull potentially-per-datum style props out of restProps so we can resolve
+  // each per row in array mode (e.g. stroke={(d) => colorScale(...)})
+  const strokeProp = $derived((restProps as any).stroke);
+  const fillProp = $derived((restProps as any).fill);
+  const strokeWidthProp = $derived((restProps as any)['stroke-width'] ?? (restProps as any).strokeWidth);
 </script>
 
-<Connector
-  source={sourceCoords}
-  target={targetCoords}
-  {type}
-  {curve}
-  {sweep}
-  {radius}
-  radial={ctx.radial}
-  {...extractLayerProps(restProps, 'lc-link')}
-/>
+{#if isArrayMode}
+  {#each arrayRows as d, i (i)}
+    {@const { source, target } = resolveArrayCoords(d)}
+    {@const resolvedStroke =
+      resolvePerDatum(strokeProp, d) ?? (ctx.config.c ? ctx.cGet(d) : undefined)}
+    <Path
+      pathData={buildPath(source, target)}
+      {marker}
+      {markerStart}
+      {markerMid}
+      {markerEnd}
+      {...extractLayerProps(restProps, 'lc-link')}
+      {...restProps}
+      stroke={resolvedStroke}
+      fill={resolvePerDatum(fillProp, d)}
+      stroke-width={resolvePerDatum(strokeWidthProp, d)}
+      class={cls('lc-link', resolveClass(d))}
+    />
+  {/each}
+{:else}
+  <Path
+    pathData={motionPath.current}
+    bind:pathRef
+    {marker}
+    {markerStart}
+    {markerMid}
+    {markerEnd}
+    {...extractLayerProps(restProps, 'lc-link')}
+    {...restProps}
+    class={cls('lc-link', typeof classProp === 'string' ? classProp : undefined)}
+  />
+{/if}

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

@@ -2,53 +2,96 @@ import type { MarkerOptions } from './MarkerWrapper.svelte';
 import type { Without } from '../utils/types.js';
 import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
 import { type CurveFactory } from 'd3-shape';
+import type { LinkSweep, LinkType } from '../utils/linkUtils.js';
+import type { PathProps, PathPropsWithoutHTML } from './Path.svelte';
+import type { Accessor } from '../utils/common.js';
 export type LinkPropsWithoutHTML = {
+    /**
+     * Source `x` coordinate. Accepts a `number` (pixel value), a string property
+     * name, or `(d) => value` accessor. Strings/functions use `ctx.xScale`.
+     */
+    x1?: Accessor;
+    /**
+     * Source `y` coordinate. Accepts a `number`, property name, or
+     * `(d) => value` accessor. Strings/functions use `ctx.yScale`.
+     */
+    y1?: Accessor;
+    /** Target `x` coordinate. See `x1`. */
+    x2?: Accessor;
+    /** Target `y` coordinate. See `y1`. */
+    y2?: Accessor;
+    /**
+     * Data for the link. In array mode (when `x1`/`y1`/`x2`/`y2` are strings or
+     * functions) this should be an array of rows; one path is rendered per row.
+     * In hierarchy/sankey mode, a single link object (`{source, target, ...}`).
+     * Defaults to `ctx.data` in array mode.
+     */
     data?: any;
     /**
-     * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+     * Update source and target accessors to be compatible with d3-sankey. see:
+     * https://github.com/d3/d3-sankey#sankeyLinkHorizontal
      *
      * @default false
      */
     sankey?: boolean;
+    /** Accessor returning the source node from `data` (hierarchy/sankey mode). */
     source?: (d: any) => any;
+    /** Accessor returning the target node from `data` (hierarchy/sankey mode). */
     target?: (d: any) => any;
-    /**
-     * Convenient property to swap x/y accessor logic
-     */
-    orientation?: 'vertical' | 'horizontal';
+    /** Accessor returning `x` for a node (hierarchy/sankey mode). */
     x?: (d: any) => any;
+    /** Accessor returning `y` for a node (hierarchy/sankey mode). */
     y?: (d: any) => any;
-    curve?: CurveFactory;
     /**
-     * Marker to attach to both start and end points of the line
+     * The link path type.
+     *
+     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
+     *
+     * @default 'd3'
      */
-    marker?: MarkerOptions;
+    type?: LinkType;
     /**
-     * Marker to attach to the middle point of the line
+     * Corner radius (used by `'beveled'` and `'rounded'`).
+     *
+     * @default 20
      */
-    markerMid?: MarkerOptions;
+    radius?: number;
     /**
-     * Marker to attach to the start point of the line
+     * Bend angle in degrees for the `'swoop'` link type.
+     *
+     * @default 22.5
      */
-    markerStart?: MarkerOptions;
+    bend?: number;
+    /** D3 curve function (used when `type === 'd3'`). */
+    curve?: CurveFactory;
+    /** Sweep direction for preset types and d3 paths. */
+    sweep?: LinkSweep;
     /**
-     * Marker to attach to the end point of the line
+     * Natural flow direction (affects default curve and axis-dependent step
+     * curves). Also toggles x/y accessor logic in hierarchy mode.
      */
-    markerEnd?: MarkerOptions;
+    orientation?: 'vertical' | 'horizontal';
     /**
-     * Apply explicit coordinates to the line. Useful when dealing with
-     * force simulation links.
+     * Interpret coords as polar (`x` = angle, `y` = radius) and render in
+     * radial space. Defaults to `ctx.radial` when unset.
      */
-    explicitCoords?: {
-        x1: number;
-        y1: number;
-        x2: number;
-        y2: number;
-    };
+    radial?: boolean;
+    /** Marker at both start and end points. */
+    marker?: MarkerOptions;
+    /** Marker at the middle point. */
+    markerMid?: MarkerOptions;
+    /** Marker at the start point. */
+    markerStart?: MarkerOptions;
+    /** Marker at the end point. */
+    markerEnd?: MarkerOptions;
     motion?: MotionTweenOption | MotionNoneOption;
-};
-export type LinkProps = LinkPropsWithoutHTML & Without<ConnectorProps, LinkPropsWithoutHTML>;
-import { type ConnectorProps } from './Connector.svelte';
-declare const Link: import("svelte").Component<LinkProps, {}, "">;
+    /**
+     * CSS class. In array mode, accepts a `(d) => string` function evaluated
+     * per datum.
+     */
+    class?: string | ((d: any) => string);
+} & Omit<PathPropsWithoutHTML, 'class'>;
+export type LinkProps = LinkPropsWithoutHTML & Without<PathProps, LinkPropsWithoutHTML>;
+declare const Link: import("svelte").Component<LinkProps, {}, "pathRef">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/components/Text.svelte

@@ -10,7 +10,7 @@
    * rather than a data property accessor.
    */
   function isCSSValue(value: string): boolean {
-    return /^[\d.]+(%|em|rem|px|pt|cm|mm|in)?$/.test(value);
+    return /^-?[\d.]+(%|em|rem|px|pt|cm|mm|in)?$/.test(value);
   }
 
   /**

package/dist/components/Voronoi.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
   import type { Without } from '../utils/types.js';
+  import type { Accessor } from '../utils/common.js';
 
   export type VoronoiPropsWithoutHTML = {
     /**
@@ -7,6 +8,16 @@
      */
     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;
 
@@ -56,7 +67,7 @@
 </script>
 
 <script lang="ts">
-  import { min } from 'd3-array';
+  import { max } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
   import { type GeoPermissibleObjects } from 'd3-geo';
   // @ts-expect-error
@@ -69,10 +80,13 @@
   import Path from './Path.svelte';
   import { getChartContext } from '../contexts/chart.js';
   import { getGeoContext } from '../contexts/geo.js';
+  import { accessor } from '../utils/common.js';
   import CircleClipPath from './CircleClipPath.svelte';
 
   let {
     data,
+    x: xProp,
+    y: yProp,
     r,
     classes = {},
     onclick,
@@ -86,14 +100,29 @@
   const ctx = getChartContext();
   const geo = getGeoContext();
 
+  const xAccessorOverride = $derived(xProp != null ? accessor(xProp) : undefined);
+  const yAccessorOverride = $derived(yProp != null ? accessor(yProp) : undefined);
+
   const points = $derived(
     (data ?? ctx.flatData).map((d: any) => {
       // geo voronoi needs raw latitude/longitude, not mapped to range (chart dimensions)
-      const xValue = geo.projection ? ctx.x(d) : ctx.xGet(d);
-      const yValue = geo.projection ? ctx.y(d) : ctx.yGet(d);
-
-      const x = Array.isArray(xValue) ? min(xValue) : xValue;
-      const y = Array.isArray(yValue) ? min(yValue) : yValue;
+      const xValue = xAccessorOverride
+        ? geo.projection
+          ? xAccessorOverride(d)
+          : ctx.xScale(xAccessorOverride(d))
+        : geo.projection
+          ? ctx.x(d)
+          : ctx.xGet(d);
+      const yValue = yAccessorOverride
+        ? geo.projection
+          ? yAccessorOverride(d)
+          : ctx.yScale(yAccessorOverride(d))
+        : geo.projection
+          ? ctx.y(d)
+          : ctx.yGet(d);
+
+      const x = Array.isArray(xValue) ? max(xValue) : xValue;
+      const y = Array.isArray(yValue) ? max(yValue) : yValue;
 
       let point: [number, number];
       if (ctx.radial) {

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;
     /**