layerchart 2.0.0-next.45 → 2.0.0-next.47

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

@@ -1,38 +1,109 @@
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
+import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
+import type { Insets } from '../utils/rect.svelte.js';
 export type RectPropsWithoutHTML = {
     /**
+     * The x position of the rectangle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
+     *
      * @default 0
      */
-    x?: number;
+    x?: DataProp;
     /**
+     * The initial x position (pixel mode only).
+     *
      * @default x
      */
     initialX?: number;
     /**
+     * The y position of the rectangle.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
+     *
      * @default 0
      */
-    y?: number;
+    y?: DataProp;
     /**
+     * The initial y position (pixel mode only).
+     *
      * @default y
      */
     initialY?: number;
-    width: number;
+    /**
+     * The width of the rectangle (pixels).
+     *
+     * @default 0
+     */
+    width?: number;
     initialWidth?: number;
-    height: number;
+    /**
+     * The height of the rectangle (pixels).
+     *
+     * @default 0
+     */
+    height?: number;
     initialHeight?: number;
     /**
-     * Underlying `<rect>` tag when using <Svg>. Useful for bindings.
+     * Left/start x edge (data mode).
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
+     * - `number`: pixel value
+     */
+    x0?: DataProp;
+    /**
+     * Right/end x edge (data mode).
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
+     * - `number`: pixel value
+     */
+    x1?: DataProp;
+    /**
+     * Top/start y edge (data mode).
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
+     * - `number`: pixel value
+     */
+    y0?: DataProp;
+    /**
+     * Bottom/end y edge (data mode).
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
+     * - `number`: pixel value
+     */
+    y1?: DataProp;
+    /**
+     * Insets to shrink the rendered rectangle.
+     * Supports `all`, `x`, `y`, `left`, `right`, `top`, `bottom`.
+     */
+    insets?: Insets;
+    /**
+     * 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;
+    /**
+     * Underlying `<rect>` tag when using <Svg>. Useful for bindings (pixel mode only).
      *
      * @bindable
      */
     ref?: SVGRectElement;
+    /** Motion configuration (pixel mode only). */
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
-} & CommonStyleProps;
+} & DataDrivenStyleProps;
 export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
 type Rect = ReturnType<typeof Rect>;

package/dist/components/Rect.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Rect.svelte.test.js

@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Rect from './Rect.svelte';
+describe('Rect', () => {
+    describe('pixel mode', () => {
+        it('should render a rect with pixel values', async () => {
+            render(TestHarness, {
+                component: Rect,
+                componentProps: {
+                    x: 10,
+                    y: 10,
+                    width: 100,
+                    height: 50,
+                    fill: 'red',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('width')).toBe('100');
+            expect(el.element()?.getAttribute('height')).toBe('50');
+        });
+    });
+    describe('data mode - standard', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20 },
+            { date: new Date('2024-02-01'), value: 40 },
+            { date: new Date('2024-03-01'), value: 60 },
+        ];
+        it('should render one rect per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    width: 20,
+                    height: 10,
+                },
+            });
+            const rects = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => rects.length).toBe(3);
+        });
+    });
+    describe('data mode - colors', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20, category: 'A' },
+            { date: new Date('2024-02-01'), value: 40, category: 'B' },
+            { date: new Date('2024-03-01'), value: 60, category: 'A' },
+        ];
+        it('should resolve data-driven fill through cScale', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    width: 20,
+                    height: 10,
+                    fill: 'category',
+                },
+            });
+            const rects = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => rects.length).toBe(3);
+            expect(rects[0].getAttribute('fill')).toBe('steelblue');
+            expect(rects[1].getAttribute('fill')).toBe('coral');
+            expect(rects[2].getAttribute('fill')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    width: 20,
+                    height: 10,
+                    fill: 'red',
+                },
+            });
+            const rects = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => rects.length).toBe(3);
+            expect(rects[0].getAttribute('fill')).toBe('red');
+            expect(rects[1].getAttribute('fill')).toBe('red');
+        });
+    });
+    describe('data mode - edge-based', () => {
+        const data = [
+            { x0: 0, x1: 30, count: 5 },
+            { x0: 30, x1: 60, count: 10 },
+            { x0: 60, x1: 100, count: 3 },
+        ];
+        it('should render rects from edge props', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data,
+                    x: ['x0', 'x1'],
+                    y: 'count',
+                    xDomain: [0, 100],
+                    yDomain: [0, 15],
+                },
+                componentProps: {
+                    x0: 'x0',
+                    x1: 'x1',
+                    y0: (d) => 0,
+                    y1: 'count',
+                },
+            });
+            const rects = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => rects.length).toBe(3);
+        });
+        it('should render rects with insets', async () => {
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data,
+                    x: ['x0', 'x1'],
+                    y: 'count',
+                    xDomain: [0, 100],
+                    yDomain: [0, 15],
+                },
+                componentProps: {
+                    x0: 'x0',
+                    x1: 'x1',
+                    y0: (d) => 0,
+                    y1: 'count',
+                    insets: { x: 2 },
+                },
+            });
+            const rects = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => rects.length).toBe(3);
+            // Verify insets affect width (rect should be narrower than without insets)
+            const firstRect = rects[0];
+            const width = Number(firstRect?.getAttribute('width'));
+            expect(width).toBeGreaterThan(0);
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ x0: 0, x1: 50, count: 5 }];
+            render(TestHarness, {
+                component: Rect,
+                chartProps: {
+                    data,
+                    x: ['x0', 'x1'],
+                    y: 'count',
+                    xDomain: [0, 100],
+                    yDomain: [0, 15],
+                },
+                componentProps: {
+                    data: explicitData,
+                    x0: 'x0',
+                    x1: 'x1',
+                    y0: (d) => 0,
+                    y1: 'count',
+                },
+            });
+            const rects = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => rects.length).toBe(1);
+        });
+    });
+});

package/dist/components/RectClipPath.svelte

@@ -74,15 +74,26 @@
     id = createId('clipPath-', uid),
     x = 0,
     y = 0,
+    width,
+    height,
     disabled = false,
     children: childrenProp,
     ...restProps
   }: RectClipPathProps = $props();
+
+  function canvasClip(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+  }
+
+  function canvasClipDeps() {
+    return [x, y, width, height];
+  }
 </script>
 
-<ClipPath {id} {disabled}>
+<ClipPath {id} {disabled} {canvasClip} {canvasClipDeps}>
   {#snippet clip()}
-    <Rect {x} {y} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
+    <Rect {x} {y} {width} {height} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
   {/snippet}
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}

package/dist/components/Ribbon.svelte

@@ -0,0 +1,141 @@
+<script lang="ts" module>
+  import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
+
+  import Path, { type PathPropsWithoutHTML } from './Path.svelte';
+  import type { MotionProp } from '../utils/motion.svelte.js';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+
+  export type RibbonPropsWithoutHTML = {
+    /**
+     * A single chord object from the d3-chord layout, containing `source` and `target`
+     * sub-objects each with `startAngle`, `endAngle`, `value`, and `index`.
+     */
+    chord: import('d3-chord').Chord;
+
+    /**
+     * The radius of the ribbon.
+     */
+    radius?: number;
+
+    /**
+     * When true, uses `ribbonArrow()` instead of `ribbon()` to render
+     * directed ribbons with arrowheads.
+     *
+     * @default false
+     */
+    directed?: boolean;
+
+    /**
+     * The radius of the arrowhead when `directed` is true.
+     * Only applies when `directed` is true.
+     */
+    headRadius?: number;
+
+    /**
+     * Setup pointer events to show tooltip for related data.
+     *
+     * **Must set `data` prop as well**
+     */
+    tooltip?: boolean;
+
+    /**
+     * Data to set when showing tooltip
+     */
+    data?: any;
+
+    /**
+     * Animation/transition configuration for the ribbon path.
+     */
+    motion?: MotionProp;
+
+    onpointerenter?: PointerEventHandler<SVGPathElement>;
+    onpointermove?: PointerEventHandler<SVGPathElement>;
+    onpointerleave?: PointerEventHandler<SVGPathElement>;
+    ontouchmove?: (e: TouchEvent & { currentTarget: SVGPathElement }) => void;
+  } & CommonStyleProps;
+
+  export type RibbonProps = RibbonPropsWithoutHTML &
+    Without<SVGAttributes<SVGPathElement>, RibbonPropsWithoutHTML & PathPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { ribbon as d3ribbon, ribbonArrow as d3ribbonArrow } from 'd3-chord';
+
+  import { getChartContext } from '../contexts/chart.js';
+  import { cls } from '@layerstack/tailwind';
+
+  let {
+    chord,
+    radius,
+    directed = false,
+    headRadius,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    data,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    ontouchmove,
+    tooltip,
+    motion,
+    class: className,
+    ...restProps
+  }: RibbonProps = $props();
+
+  const ctx = getChartContext();
+
+  const ribbonGenerator = $derived.by(() => {
+    if (directed) {
+      const gen = d3ribbonArrow();
+      if (radius != null) gen.radius(radius);
+      if (headRadius != null) gen.headRadius(headRadius);
+      return gen;
+    } else {
+      const gen = d3ribbon();
+      if (radius != null) gen.radius(radius);
+      return gen;
+    }
+  });
+
+  // @ts-expect-error - Chord type is compatible with Ribbon at runtime; radius is set on the generator
+  const pathData = $derived(ribbonGenerator(chord) ?? undefined);
+
+  const onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) ctx.tooltip.hide();
+  };
+</script>
+
+<Path
+  {pathData}
+  {fill}
+  {fillOpacity}
+  {stroke}
+  {strokeWidth}
+  {opacity}
+  {motion}
+  {...restProps}
+  class={cls('lc-ribbon', className)}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  ontouchmove={(e) => {
+    ontouchmove?.(e);
+    if (tooltip) {
+      e.preventDefault();
+    }
+  }}
+/>

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

@@ -0,0 +1,51 @@
+import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
+import { type PathPropsWithoutHTML } from './Path.svelte';
+import type { MotionProp } from '../utils/motion.svelte.js';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+export type RibbonPropsWithoutHTML = {
+    /**
+     * A single chord object from the d3-chord layout, containing `source` and `target`
+     * sub-objects each with `startAngle`, `endAngle`, `value`, and `index`.
+     */
+    chord: import('d3-chord').Chord;
+    /**
+     * The radius of the ribbon.
+     */
+    radius?: number;
+    /**
+     * When true, uses `ribbonArrow()` instead of `ribbon()` to render
+     * directed ribbons with arrowheads.
+     *
+     * @default false
+     */
+    directed?: boolean;
+    /**
+     * The radius of the arrowhead when `directed` is true.
+     * Only applies when `directed` is true.
+     */
+    headRadius?: number;
+    /**
+     * Setup pointer events to show tooltip for related data.
+     *
+     * **Must set `data` prop as well**
+     */
+    tooltip?: boolean;
+    /**
+     * Data to set when showing tooltip
+     */
+    data?: any;
+    /**
+     * Animation/transition configuration for the ribbon path.
+     */
+    motion?: MotionProp;
+    onpointerenter?: PointerEventHandler<SVGPathElement>;
+    onpointermove?: PointerEventHandler<SVGPathElement>;
+    onpointerleave?: PointerEventHandler<SVGPathElement>;
+    ontouchmove?: (e: TouchEvent & {
+        currentTarget: SVGPathElement;
+    }) => void;
+} & CommonStyleProps;
+export type RibbonProps = RibbonPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, RibbonPropsWithoutHTML & PathPropsWithoutHTML>;
+declare const Ribbon: import("svelte").Component<RibbonProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/Spline.svelte

@@ -4,6 +4,7 @@
   import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 
   import { accessor, type Accessor } from '../utils/common.js';
+  import type { MotionProp } from '../utils/motion.svelte.js';
 
   export type SplinePropsWithoutHTML = {
     /**
@@ -21,6 +22,11 @@
      */
     y?: Accessor;
 
+    /**
+     * Series key to use for accessor.  Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
+
     /**
      * Function to determine if a point is defined
      *
@@ -39,7 +45,13 @@
      * @type {CurveFactory | CurveFactoryLineOnly | undefined}
      */
     curve?: CurveFactory | CurveFactoryLineOnly;
-  } & Omit<PathProps, 'x' | 'y'>;
+
+    /**
+     * Whether to animate the path using tweened interpolation.
+     * When set, the line will animate from the baseline (y=0) on mount.
+     */
+    motion?: MotionProp;
+  } & Omit<PathProps, 'x' | 'y' | 'motion'>;
 
   export type SplineProps = SplinePropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
@@ -48,16 +60,31 @@
 <script lang="ts">
   import { draw as _drawTransition } from 'svelte/transition';
 
+  import { geoPath as d3GeoPath } from 'd3-geo';
   import { line as d3Line, lineRadial } from 'd3-shape';
   import { max } from 'd3-array';
+  import { interpolatePath } from 'd3-interpolate-path';
 
   import { isScaleBand } from '../utils/scales.svelte.js';
   import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
   import Path, { type PathProps } from './Path.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
 
   const ctx = getChartContext();
+  const geo = getGeoContext();
 
-  let { data, x, y, defined, curve, ...restProps }: SplineProps = $props();
+  let { data, x, y, seriesKey, defined, curve, stroke, motion, ...restProps }: SplineProps = $props();
+
+  ctx.registerComponent({
+    name: 'Spline',
+    kind: 'mark',
+    markInfo: () => ({ data, x, y, seriesKey, color: stroke as string | undefined }),
+  });
 
   function getScaleValue(
     data: any,
@@ -79,13 +106,35 @@
     }
   }
 
-  const xAccessor = $derived(x ? accessor(x) : ctx.x);
-  const yAccessor = $derived(y ? accessor(y) : ctx.y);
+  let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
+  let seriesAccessor = $derived(series?.value ?? (series?.data ? undefined : series?.key));
+
+  const xAccessor = $derived(
+    accessor(x ?? (ctx.valueAxis === 'x' ? seriesAccessor : undefined) ?? ctx.x)
+  );
+  const yAccessor = $derived(
+    accessor(y ?? (ctx.valueAxis === 'y' ? seriesAccessor : undefined) ?? ctx.y)
+  );
 
   const xOffset = $derived(isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0);
   const yOffset = $derived(isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0);
 
   const d = $derived.by(() => {
+    const resolvedData = data ?? series?.data ?? ctx.data;
+
+    // Geo mode: convert data to GeoJSON LineString and render via geoPath
+    if (geo.projection) {
+      const coordinates = resolvedData
+        .filter((d: any) => {
+          if (defined) return defined(d, 0, resolvedData);
+          return xAccessor(d) != null && yAccessor(d) != null;
+        })
+        .map((d: any) => [xAccessor(d), yAccessor(d)]);
+
+      const lineString = { type: 'LineString' as const, coordinates };
+      return d3GeoPath(geo.projection)(lineString) ?? '';
+    }
+
     const path = ctx.radial
       ? lineRadial()
           .angle((d) => getScaleValue(d, ctx.xScale, xAccessor) + 0) // Never apply xOffset (LineChart radar, BarChart radial, ...)?
@@ -98,8 +147,64 @@
     path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
     if (curve) path.curve(curve);
 
-    return path(data ?? ctx.data) ?? '';
+    return path(resolvedData) ?? '';
   });
+
+  const extractedTween = extractTweenConfig(motion);
+
+  const tweenOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: {
+          interpolate: interpolatePath,
+          ...extractedTween.options,
+        },
+      }
+    : undefined;
+
+  /**
+   * Provide initial `0` horizontal baseline so the line animates up from y=0 on mount.
+   * Computes a proper flattened path using d3-line with all y-values at baseline.
+   */
+  function defaultPathData() {
+    if (!tweenOptions) return '';
+
+    if (ctx.config.x) {
+      const resolvedData = data ?? series?.data ?? ctx.data;
+      const baseline = Math.min(ctx.yScale(0) ?? ctx.yRange[0], ctx.yRange[0]);
+
+      const path = ctx.radial
+        ? lineRadial()
+            .angle((d) => getScaleValue(d, ctx.xScale, xAccessor) + 0)
+            .radius(() => baseline)
+        : d3Line()
+            .x((d) => getScaleValue(d, ctx.xScale, xAccessor) + xOffset)
+            .y(() => baseline);
+
+      path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
+      if (curve) path.curve(curve);
+
+      return path(resolvedData) ?? '';
+    }
+
+    return '';
+  }
+
+  const tweenState = createMotion(defaultPathData(), () => d, tweenOptions);
 </script>
 
-<Path pathData={d} {...restProps} />
+<!-- TODO: handle in LineChart/etc? -->
+<!-- class: cls(props.spline?.class, s.props?.class), -->
+
+<Path
+  pathData={tweenOptions ? tweenState.current : d}
+  stroke={stroke ?? series?.color}
+  opacity={series?.key == null ||
+  // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
+  ctx.series.visibleSeries.length <= 1 ||
+  ctx.series.isHighlighted(series.key, true)
+    ? 1
+    : 0.1}
+  {...series?.props}
+  {...restProps}
+/>