layerchart 2.0.0-next.46 → 2.0.0-next.48

package/dist/components/Chord.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { ChordGroup, Chord } from 'd3-chord';
+
+  export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+
+    children?: Snippet<
+      [
+        {
+          groups: ChordGroup[];
+          chords: Chord[];
+          innerRadius: number;
+          outerRadius: number;
+        },
+      ]
+    >;
+  };
+</script>
+
+<script lang="ts">
+  import { chord as d3Chord, chordDirected, chordTranspose } from 'd3-chord';
+
+  import { getChartContext } from '../contexts/chart.js';
+
+  let {
+    matrix,
+    variant = 'default',
+    padAngle = 0,
+    sortGroups = null,
+    sortSubgroups = null,
+    sortChords = null,
+    innerRadiusRatio = 0.9,
+    children,
+  }: ChordProps = $props();
+
+  const ctx = getChartContext();
+
+  const outerRadius = $derived(Math.max(0, Math.min(ctx.width, ctx.height) / 2));
+  const innerRadius = $derived(outerRadius * innerRadiusRatio);
+
+  const chordLayout = $derived.by(() => {
+    const generator =
+      variant === 'directed'
+        ? chordDirected()
+        : variant === 'transpose'
+          ? chordTranspose()
+          : d3Chord();
+
+    generator.padAngle(padAngle);
+
+    if (sortGroups != null) {
+      generator.sortGroups(sortGroups);
+    }
+    if (sortSubgroups != null) {
+      generator.sortSubgroups(sortSubgroups);
+    }
+    if (sortChords != null) {
+      generator.sortChords(sortChords);
+    }
+
+    return generator(matrix);
+  });
+</script>
+
+{@render children?.({
+  groups: chordLayout.groups,
+  chords: chordLayout,
+  innerRadius,
+  outerRadius,
+})}

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

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { ChordGroup, Chord } from 'd3-chord';
+export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+    children?: Snippet<[
+        {
+            groups: ChordGroup[];
+            chords: Chord[];
+            innerRadius: number;
+            outerRadius: number;
+        }
+    ]>;
+};
+declare const Chord: import("svelte").Component<ChordProps, {}, "">;
+type Chord = ReturnType<typeof Chord>;
+export default Chord;

package/dist/components/Circle.svelte

@@ -1,17 +1,21 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Without } from '../utils/types.js';
+  import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
 
   export type CirclePropsWithoutHTML = {
     /**
      * The center x position of the circle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      *
      * @default 0
      */
-    cx?: number;
+    cx?: DataProp;
 
     /**
-     * The initial center x position of the circle.
+     * The initial center x position of the circle (pixel mode only).
      *
      * @default cx
      */
@@ -19,13 +23,16 @@
 
     /**
      * The center y position of the circle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      *
      * @default 0
      */
-    cy?: number;
+    cy?: DataProp;
 
     /**
-     * The initial center y position of the circle.
+     * The initial center y position of the circle (pixel mode only).
      *
      * @default cy
      */
@@ -33,30 +40,47 @@
 
     /**
      * The radius of the circle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
      *
      * @default 1
      */
-    r?: number;
+    r?: DataProp;
 
     /**
-     * The initial radius of the circle.
+     * The initial radius of the circle (pixel mode only).
      *
      * @default r
      */
     initialR?: number;
 
     /**
-     * A bindable reference to the `<circle>` element
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+
+    /**
+     * A bindable reference to the `<circle>` element (pixel mode only).
      *
      * @bindable
      */
     ref?: SVGCircleElement;
 
+    /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
 
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
-  } & CommonStyleProps;
+  } & DataDrivenStyleProps;
 
   export type CircleProps = CirclePropsWithoutHTML &
     Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
@@ -67,9 +91,13 @@
   import { merge } from '@layerstack/utils';
 
   import { getLayerContext } from '../contexts/layer.js';
-  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { untrack } from 'svelte';
+  import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
   import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { hasAnyDataProp, resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { chartDataArray } from '../utils/common.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createKey } from '../utils/key.svelte.js';
 
@@ -80,6 +108,8 @@
     initialCy: initialCyProp,
     r = 1,
     initialR: initialRProp,
+    data: dataProp,
+    key: keyFn = (_: any, i: number) => i,
     motion,
     fill,
     fillOpacity,
@@ -92,46 +122,166 @@
     ...restProps
   }: CircleProps = $props();
 
+  // Data mode detection: if any positional prop is a string or function
+  const dataMode = $derived(hasAnyDataProp(cx, cy, r));
+
+  // Chart context (safe to call outside Chart — returns fallback)
+  const chartCtx = getChartContext();
+  const geo = getGeoContext();
+
+  // Data to iterate over in data mode
+  const resolvedData: any[] = $derived(
+    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
+  );
+
+  // Resolve a single data item to pixel coordinates
+  function resolveCircle(d: any) {
+    if (geo.projection) {
+      const [projX, projY] = resolveGeoDataPair(cx, cy, d, geo.projection);
+      return {
+        cx: projX,
+        cy: projY,
+        r: resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1),
+      };
+    }
+    return {
+      cx: resolveDataProp(cx, d, chartCtx.xScale, 0),
+      cy: resolveDataProp(cy, d, chartCtx.yScale, 0),
+      r: resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1),
+    };
+  }
+
+  // --- Data mode: resolved items with optional motion ---
+  const dataMotionMap = createDataMotionMap(motion);
+
+  // Update motion targets when resolved values change
+  $effect(() => {
+    if (!dataMode || !dataMotionMap) return;
+    const activeKeys = new Set<any>();
+    for (let i = 0; i < resolvedData.length; i++) {
+      const d = resolvedData[i];
+      const key = keyFn(d, i);
+      activeKeys.add(key);
+      const resolved = resolveCircle(d);
+      untrack(() => dataMotionMap.update(key, resolved));
+    }
+    untrack(() => dataMotionMap.cleanup(activeKeys));
+  });
+
+  // Single source of truth: resolved values with animated overlay
+  // Reading Spring .current here makes this reactive to animation frames
+  const resolvedItems = $derived.by(() => {
+    if (!dataMode) return [];
+    return resolvedData.map((d, i) => {
+      const key = keyFn(d, i);
+      const resolved = resolveCircle(d);
+      const animated = dataMotionMap?.get(key);
+      return {
+        d,
+        key,
+        cx: animated?.cx ?? resolved.cx,
+        cy: animated?.cy ?? resolved.cy,
+        r: animated?.r ?? resolved.r,
+      };
+    });
+  });
+
+  // --- Pixel mode ---
   let ref = $state<SVGCircleElement>();
 
   $effect.pre(() => {
     refProp = ref;
   });
 
-  const initialCx = initialCxProp ?? cx;
-  const initialCy = initialCyProp ?? cy;
-  const initialR = initialRProp ?? r;
+  const initialCx = initialCxProp ?? (typeof cx === 'number' ? cx : 0);
+  const initialCy = initialCyProp ?? (typeof cy === 'number' ? cy : 0);
+  const initialR = initialRProp ?? (typeof r === 'number' ? r : 1);
 
   const layerCtx = getLayerContext();
 
-  const motionCx = createMotion(initialCx, () => cx, motion);
-  const motionCy = createMotion(initialCy, () => cy, motion);
-  const motionR = createMotion(initialR, () => r, motion);
+  const motionCx = createMotion(
+    initialCx,
+    () => (typeof cx === 'number' ? cx : 0),
+    motion
+  );
+  const motionCy = createMotion(
+    initialCy,
+    () => (typeof cy === 'number' ? cy : 0),
+    motion
+  );
+  const motionR = createMotion(
+    initialR,
+    () => (typeof r === 'number' ? r : 1),
+    motion
+  );
+
+  // Style options (shared between pixel and data mode)
+  function getStyleOptions(
+    styleOverrides: ComputedStylesOptions | undefined,
+    itemFill?: string | undefined,
+    itemStroke?: string | undefined,
+    itemFillOpacity?: number | undefined,
+    itemStrokeWidth?: number | undefined,
+    itemOpacity?: number | undefined,
+    itemClass?: string | undefined
+  ) {
+    return styleOverrides
+      ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+      : {
+          styles: {
+            fill: itemFill ?? fill,
+            fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+            stroke: itemStroke ?? stroke,
+            strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
+          },
+          classes: cls('lc-circle', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          style: restProps.style as string | undefined,
+        };
+  }
 
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    renderCircle(
-      ctx,
-      { cx: motionCx.current, cy: motionCy.current, r: motionR.current },
-      styleOverrides
-        ? merge({ styles: { strokeWidth } }, styleOverrides)
-        : {
-            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: cls('lc-circle', className),
-            style: restProps.style as string | undefined,
-          }
-    );
+    if (dataMode) {
+      for (const item of resolvedItems) {
+        const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d);
+        const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
+        const resolvedOpacity = resolveStyleProp(opacity, item.d);
+        const resolvedClass = resolveStyleProp(className, item.d);
+        const styleOpts = getStyleOptions(styleOverrides, resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        renderCircle(ctx, item, styleOpts);
+      }
+    } else {
+      const styleOpts = getStyleOptions(styleOverrides);
+      renderCircle(
+        ctx,
+        { cx: motionCx.current, cy: motionCy.current, r: motionR.current },
+        styleOpts
+      );
+    }
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Circle',
+  chartCtx.registerComponent({
+    name: 'Circle',
+    kind: 'mark',
+    markInfo: () => {
+      if (!dataMode) return {};
+      return {
+        data: dataProp,
+        x: typeof cx === 'string' ? cx : undefined,
+        y: typeof cy === 'string' ? cy : undefined,
+        color: typeof fill === 'string' ? fill : undefined,
+      };
+    },
+    canvasRender: layerCtx === 'canvas' ? {
       render,
       events: {
         click: restProps.onclick,
@@ -141,6 +291,8 @@
         pointerleave: restProps.onpointerleave,
       },
       deps: () => [
+        dataMode,
+        dataMode ? resolvedItems : null,
         motionCx.current,
         motionCy.current,
         motionR.current,
@@ -152,43 +304,93 @@
         className,
         restProps.style,
       ],
-    });
-  }
+    } : undefined,
+  });
 </script>
 
 {#if layerCtx === 'svg'}
-  <circle
-    bind:this={ref}
-    cx={motionCx.current}
-    cy={motionCy.current}
-    r={motionR.current}
-    {fill}
-    fill-opacity={fillOpacity}
-    {stroke}
-    stroke-width={strokeWidth}
-    {opacity}
-    class={cls('lc-circle', className)}
-    {...restProps}
-  />
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      <circle
+        cx={item.cx}
+        cy={item.cy}
+        r={item.r}
+        fill={resolvedFill}
+        fill-opacity={resolvedFillOpacity}
+        stroke={resolvedStroke}
+        stroke-width={resolvedStrokeWidth}
+        opacity={resolvedOpacity}
+        class={cls('lc-circle', resolvedClass)}
+        {...restProps}
+      />
+    {/each}
+  {:else}
+    <circle
+      bind:this={ref}
+      cx={motionCx.current}
+      cy={motionCy.current}
+      r={motionR.current}
+      fill={fill as string}
+      fill-opacity={fillOpacity as number}
+      stroke={stroke as string}
+      stroke-width={strokeWidth as number}
+      opacity={opacity as number}
+      class={cls('lc-circle', className as string)}
+      {...restProps}
+    />
+  {/if}
 {:else if layerCtx === 'html'}
-  <div
-    style:position="absolute"
-    style:left="{motionCx.current}px"
-    style:top="{motionCy.current}px"
-    style:width="{motionR.current * 2}px"
-    style:height="{motionR.current * 2}px"
-    style:border-radius="50%"
-    style:background-color={fill}
-    style:opacity
-    style:border-width={strokeWidth}
-    style:border-color={stroke}
-    style:border-style="solid"
-    style:transform="translate(-50%, -50%)"
-    class={cls('lc-circle', className)}
-    {...restProps}
-  >
-    {@render children?.()}
-  </div>
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      <div
+        style:position="absolute"
+        style:left="{item.cx}px"
+        style:top="{item.cy}px"
+        style:width="{item.r * 2}px"
+        style:height="{item.r * 2}px"
+        style:border-radius="50%"
+        style:background-color={resolvedFill}
+        style:opacity={resolvedOpacity}
+        style:border-width={resolvedStrokeWidth}
+        style:border-color={resolvedStroke}
+        style:border-style="solid"
+        style:transform="translate(-50%, -50%)"
+        class={cls('lc-circle', resolvedClass)}
+        {...restProps}
+      ></div>
+    {/each}
+  {:else}
+    <div
+      style:position="absolute"
+      style:left="{motionCx.current}px"
+      style:top="{motionCy.current}px"
+      style:width="{motionR.current * 2}px"
+      style:height="{motionR.current * 2}px"
+      style:border-radius="50%"
+      style:background-color={fill as string}
+      style:opacity={opacity as number}
+      style:border-width={strokeWidth as number}
+      style:border-color={stroke as string}
+      style:border-style="solid"
+      style:transform="translate(-50%, -50%)"
+      class={cls('lc-circle', className as string)}
+      {...restProps}
+    >
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}
 
 <style>

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

@@ -1,52 +1,74 @@
 import type { Snippet } from 'svelte';
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Without } from '../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
 export type CirclePropsWithoutHTML = {
     /**
      * The center x position of the circle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      *
      * @default 0
      */
-    cx?: number;
+    cx?: DataProp;
     /**
-     * The initial center x position of the circle.
+     * The initial center x position of the circle (pixel mode only).
      *
      * @default cx
      */
     initialCx?: number;
     /**
      * The center y position of the circle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      *
      * @default 0
      */
-    cy?: number;
+    cy?: DataProp;
     /**
-     * The initial center y position of the circle.
+     * The initial center y position of the circle (pixel mode only).
      *
      * @default cy
      */
     initialCy?: number;
     /**
      * The radius of the circle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
      *
      * @default 1
      */
-    r?: number;
+    r?: DataProp;
     /**
-     * The initial radius of the circle.
+     * The initial radius of the circle (pixel mode only).
      *
      * @default r
      */
     initialR?: number;
     /**
-     * A bindable reference to the `<circle>` element
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+    /**
+     * A bindable reference to the `<circle>` element (pixel mode only).
      *
      * @bindable
      */
     ref?: SVGCircleElement;
+    /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
-} & CommonStyleProps;
+} & DataDrivenStyleProps;
 export type CircleProps = CirclePropsWithoutHTML & Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { SVGAttributes } from 'svelte/elements';