layerchart 2.0.0-next.6 → 2.0.0-next.60

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

@@ -1,36 +1,122 @@
-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 Corners, 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>;
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
+    /**
+     * Per-corner radii. Accepts a number (all corners equal — same as `rx`),
+     * a `[tl, tr, br, bl]` tuple, or `{ topLeft, topRight, bottomRight, bottomLeft }`.
+     * Takes precedence over `rx`/`ry` when corners differ.
+     */
+    corners?: Corners;
+    /** 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 RectPropsWithoutHTML } from './Rect.svelte';
+  import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
@@ -45,6 +45,13 @@
      */
     disabled?: boolean;
 
+    /**
+     * Invert the clip — content renders *outside* the rect.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
     /**
      * The default children snippet which provides
      * the id and url for the clipPath.
@@ -58,13 +65,13 @@
     Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
 
   export type RectClipPathProps = RectClipPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
   import ClipPath from './ClipPath.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
   import type { MotionProp } from '../utils/motion.svelte.js';
 
   const uid = $props.id();
@@ -73,16 +80,17 @@
     id = createId('clipPath-', uid),
     x = 0,
     y = 0,
+    width,
+    height,
     disabled = false,
+    invert = false,
     children: childrenProp,
-    ...restProps
   }: RectClipPathProps = $props();
+
+  const path = $derived(`M${x},${y} h${width} v${height} h${-width} Z`);
 </script>
 
-<ClipPath {id} {disabled}>
-  {#snippet clip()}
-    <Rect {x} {y} {...extractLayerProps(restProps, 'clip-path-rect')} />
-  {/snippet}
+<ClipPath {id} {disabled} {invert} {path}>
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}
   {/snippet}

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 = {
@@ -37,6 +37,12 @@ export type BaseRectClipPathPropsWithoutHTML = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the rect.
+     *
+     * @default false
+     */
+    invert?: boolean;
     /**
      * The default children snippet which provides
      * the id and url for the clipPath.
@@ -48,7 +54,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>;