layerchart 2.0.0-next.5 → 2.0.0-next.50

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

@@ -1,36 +1,110 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
+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'>;
-} & CommonStyleProps;
-export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+    /** Children content to render.  Note: Only works for Html layers */
+    children?: Snippet;
+} & DataDrivenStyleProps;
+export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
 type Rect = ReturnType<typeof Rect>;
 export default 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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import type { Without } from '../utils/types.js';
+  import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
@@ -58,7 +58,8 @@
     Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
 
   export type RectClipPathProps = RectClipPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -73,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, '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/RectClipPath.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type RectPropsWithoutHTML } from './Rect.svelte';
-import type { Without } from '../utils/types.js';
+import type { CommonEvents, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 export type BaseRectClipPathPropsWithoutHTML = {
@@ -48,7 +48,7 @@ export type BaseRectClipPathPropsWithoutHTML = {
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 };
 export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML & Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
-export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> & CommonEvents;
 import type { MotionProp } from '../utils/motion.svelte.js';
 declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
 type RectClipPath = ReturnType<typeof RectClipPath>;

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;