svelteplot 0.0.1-alpha.9 → 0.1.3-next.4

package/dist/marks/Line.svelte.d.ts

@@ -1,15 +1,31 @@
-import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types.js';
-declare const __propDef: {
-    props: LineMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, MarkerOptions } from '../types.js';
+export type BaseLineMarkProps = {
+    data: DataRecord[];
+    z?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    outlineStroke?: ConstantAccessor<string>;
+    outlineStrokeWidth?: ConstantAccessor<number>;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    curve?: CurveName | CurveFactory;
+    tension?: number;
+    sort?: ConstantAccessor<RawValue> | {
+        channel: 'stroke' | 'fill';
     };
-    slots: {};
-};
-export type LineProps = typeof __propDef.props;
-export type LineEvents = typeof __propDef.events;
-export type LineSlots = typeof __propDef.slots;
-export default class Line extends SvelteComponent<LineProps, LineEvents, LineSlots> {
-}
-export {};
+    text?: ConstantAccessor<string>;
+    textFill?: ConstantAccessor<string>;
+    textStroke?: ConstantAccessor<string>;
+    textStartOffset?: ConstantAccessor<string>;
+    textStrokeWidth?: ConstantAccessor<number>;
+    lineClass?: ConstantAccessor<string>;
+} & MarkerOptions;
+import { type CurveFactory } from 'd3-shape';
+import type { RawValue } from '../types.js';
+type LineMarkProps = BaseMarkProps & {
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+} & BaseLineMarkProps;
+/** Line mark, useful for line charts */
+declare const Line: import("svelte").Component<LineMarkProps, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

package/dist/marks/LineX.svelte

@@ -1,10 +1,10 @@
-<script>import Line from "./Line.svelte";
-let { data, ...rest } = $props();
+<script lang="ts">
+    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import { recordizeX } from '../index.js';
+
+    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+
+    let args = $derived(recordizeX({ data, ...rest }));
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="value"
-    y="index"
-    {...rest}
-/>
+<Line {...args} />

package/dist/marks/LineX.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LineXProps = typeof __propDef.props;
-export type LineXEvents = typeof __propDef.events;
-export type LineXSlots = typeof __propDef.slots;
-export default class LineX extends SvelteComponent<LineXProps, LineXEvents, LineXSlots> {
-}
-export {};
+import { type BaseLineMarkProps } from './Line.svelte';
+declare const LineX: import("svelte").Component<BaseLineMarkProps, {}, "">;
+type LineX = ReturnType<typeof LineX>;
+export default LineX;

package/dist/marks/LineY.svelte

@@ -1,10 +1,9 @@
-<script>import Line from "./Line.svelte";
-let { data, ...rest } = $props();
+<script lang="ts">
+    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import { recordizeY } from '../index.js';
+
+    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+    let args = $derived(recordizeY({ data, ...rest }));
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="index"
-    y="value"
-    {...rest}
-/>
+<Line {...args} />

package/dist/marks/LineY.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LineYProps = typeof __propDef.props;
-export type LineYEvents = typeof __propDef.events;
-export type LineYSlots = typeof __propDef.slots;
-export default class LineY extends SvelteComponent<LineYProps, LineYEvents, LineYSlots> {
-}
-export {};
+import { type BaseLineMarkProps } from './Line.svelte';
+declare const LineY: import("svelte").Component<BaseLineMarkProps, {}, "">;
+type LineY = ReturnType<typeof LineY>;
+export default LineY;

package/dist/marks/Link.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        CurveName,
+        MarkerOptions,
+        RawValue,
+        FacetContext,
+        DataRow,
+        ScaledDataRecord
+    } from '../types.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { maybeData, testFilter } from '../helpers/index.js';
+    import { getUsedScales, projectXY } from '../helpers/scales.js';
+    import Mark from '../Mark.svelte';
+    import MarkerPath from './helpers/MarkerPath.svelte';
+    import { replaceChannels } from '../transforms/rename.js';
+    import { line, type CurveFactory } from 'd3-shape';
+    import callWithProps from '../helpers/callWithProps.js';
+    import { maybeCurve } from '../helpers/curves.js';
+    import { geoPath } from 'd3-geo';
+    import { pick } from 'es-toolkit';
+
+    type LinkMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        x1: ChannelAccessor;
+        y1: ChannelAccessor;
+        x2: ChannelAccessor;
+        y2: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        curve?: 'auto' | CurveName | CurveFactory;
+        tension?: number;
+        text: ConstantAccessor<string>;
+        children?: Snippet;
+    } & MarkerOptions;
+
+    let {
+        data = [{}],
+        curve = 'auto',
+        tension = 0,
+        text,
+        class: className = null,
+        ...options
+    }: LinkMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    function isValid(value: RawValue): value is number | Date | string {
+        return value !== null && (typeof value === 'string' || !Number.isNaN(value));
+    }
+
+    const sorted = $derived(
+        options.sort
+            ? maybeData(data).toSorted((a, b) =>
+                  resolveChannel('sort', a, options) > resolveChannel('sort', b, options) ? 1 : -1
+              )
+            : maybeData(data)
+    );
+
+    const args = $derived(
+        replaceChannels(
+            { data: sorted, stroke: 'currentColor', ...options },
+            { y: ['y1', 'y2'], x: ['x1', 'x2'] }
+        )
+    );
+
+    const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
+
+    const linePath: (d: ScaledDataRecord) => string = $derived.by(() => {
+        const fn = callWithProps(line, [], {
+            curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
+            x: (d) => d[0],
+            y: (d) => d[1]
+        });
+
+        return (d: ScaledDataRecord) =>
+            fn([
+                [d.x1, d.y1],
+                [d.x2, d.y2]
+            ]);
+    });
+
+    const sphericalLinePath: (d: ScaledDataRecord) => string = $derived.by(() => {
+        const fn = sphereLine(plot.scales.projection);
+        return (d: ScaledDataRecord) => {
+            const x1 = resolveChannel('x1', d.datum, args);
+            const y1 = resolveChannel('y1', d.datum, args);
+            const x2 = resolveChannel('x2', d.datum, args);
+            const y2 = resolveChannel('y2', d.datum, args);
+            return fn(x1, y1, x2, y2);
+        };
+    });
+    //     sphericalLine
+    //         ?
+
+    //         sphereLine(plot.scales.projection)
+    //         :
+    // );
+
+    function sphereLine(projection) {
+        const path = geoPath(projection);
+        return (x1: number, y1: number, x2: number, y2: number) => {
+            return path({
+                type: 'LineString',
+                coordinates: [
+                    [x1, y1],
+                    [x2, y2]
+                ]
+            });
+        };
+    }
+</script>
+
+<Mark
+    type="link"
+    required={['x1', 'x2', 'y1', 'y2']}
+    channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
+            {#each scaledData as d}
+                {#if d.valid || true}
+                    {@const dx = resolveProp(args.dx, d.datum, 0)}
+                    {@const dy = resolveProp(args.dx, d.datum, 0)}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        d,
+                        { strokeWidth: 1.6, ...args },
+                        'stroke',
+                        usedScales
+                    )}
+                    {@const [textStyle, textStyleClass] = resolveStyles(
+                        plot,
+                        d,
+                        {
+                            textAnchor: 'middle',
+                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle', 'textAnchor']),
+                            fill: args.textFill || args.stroke,
+                            stroke: args.textStroke,
+                            strokeWidth: args.textStrokeWidth
+                        },
+                        'fill',
+                        usedScales
+                    )}
+
+                    <MarkerPath
+                        {mark}
+                        scales={plot.scales}
+                        markerStart={args.markerStart}
+                        markerEnd={args.markerEnd}
+                        marker={args.marker}
+                        class={styleClass}
+                        strokeWidth={args.strokeWidth}
+                        datum={d.datum}
+                        color={d.stroke}
+                        d={sphericalLine ? sphericalLinePath(d) : linePath(d)}
+                        {style}
+                        text={text ? resolveProp(text, d.datum) : null}
+                        startOffset={resolveProp(args.textStartOffset, d.datum, '50%')}
+                        {textStyle}
+                        {textStyleClass}
+                        transform={dx || dy ? `translate(${dx}, ${dy})` : null} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, CurveName, MarkerOptions, RawValue } from '../types.js';
+import { type CurveFactory } from 'd3-shape';
+type LinkMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    sort?: ConstantAccessor<RawValue> | {
+        channel: 'stroke' | 'fill';
+    };
+    x1: ChannelAccessor;
+    y1: ChannelAccessor;
+    x2: ChannelAccessor;
+    y2: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    curve?: 'auto' | CurveName | CurveFactory;
+    tension?: number;
+    text: ConstantAccessor<string>;
+    children?: Snippet;
+} & MarkerOptions;
+declare const Link: import("svelte").Component<LinkMarkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/marks/Pointer.svelte

@@ -0,0 +1,126 @@
+<script module lang="ts">
+    import type { ChannelAccessor, DataRow } from '../types.js';
+
+    export type PointerMarkProps = {
+        data: DataRow[];
+        children: Snippet<[{ data: DataRow[] }]>;
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        z?: ChannelAccessor;
+        /**
+         * maximum cursor distance to select data points
+         */
+        maxDistance: number;
+        /**
+         * called whenever the selection changes
+         * @param data
+         */
+        onupdate: (data: DataRow[]) => void;
+    };
+</script>
+
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type { PlotContext } from '../types.js';
+    import { groups as d3Groups } from 'd3-array';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    import { resolveChannel } from '../helpers/resolve.js';
+    import { quadtree } from 'd3-quadtree';
+    import { projectXY } from '../helpers/scales.js';
+    import isDataRecord from '../helpers/isDataRecord.js';
+
+    let {
+        data = [{}],
+        children,
+        x,
+        y,
+        z,
+        maxDistance = 15,
+        onupdate = null
+    }: PointerMarkProps = $props();
+
+    let selectedData = $state([]);
+
+    function onMouseMove(evt: MouseEvent) {
+        updateSelection(evt.layerX, evt.layerY);
+    }
+
+    function onTouchMove(evt: TouchEvent) {
+        if (evt.touches) {
+            const rect = (evt.target as HTMLElement).getBoundingClientRect();
+            const pageTop = window.scrollY || document.documentElement.scrollTop;
+            const ox = rect.left;
+            const oy = rect.top + pageTop;
+
+            const touch = evt.touches[0] || evt.changedTouches[0];
+            if (touch) {
+                const ex = touch.pageX - ox;
+                const ey = touch.pageY - oy;
+                updateSelection(ex, ey);
+            }
+        }
+    }
+
+    function onMouseLeave() {
+        selectedData = [];
+        if (onupdate) onupdate(selectedData);
+    }
+
+    function updateSelection(ex: number, ey: number) {
+        // find data row with minimum distance to
+        const points = trees.map((tree) =>
+            tree.find(x != null ? ex : 0, y != null ? ey : 0, maxDistance)
+        );
+        selectedData = points.filter((d) => d != null);
+        if (onupdate) onupdate(selectedData);
+    }
+
+    $effect(() => {
+        plot.body?.addEventListener('mousemove', onMouseMove);
+        plot.body?.addEventListener('mouseleave', onMouseLeave);
+        plot.body?.addEventListener('touchmove', onTouchMove);
+
+        return () => {
+            plot.body?.removeEventListener('mousemove', onMouseMove);
+            plot.body?.removeEventListener('mouseleave', onMouseLeave);
+            plot.body?.removeEventListener('touchmove', onTouchMove);
+        };
+    });
+
+    const groups = $derived(
+        z != null ? d3Groups(data, (d) => resolveChannel('z', d, { x, z })) : [[null, data]]
+    );
+
+    const trees = $derived(
+        groups.map(([, items]) =>
+            quadtree()
+                .x(x != null ? (d) => d.__pointerX : () => 0)
+                .y(y != null ? (d) => d.__pointerY : () => 0)
+                .addAll(
+                    items?.map((d) => {
+                        const [px, py] = projectXY(
+                            plot.scales,
+                            resolveChannel('x', d, { x }),
+                            resolveChannel('y', d, { y }),
+                            true,
+                            true
+                        );
+                        return {
+                            ...(isDataRecord(d) ? d : { ___orig___: d }),
+                            __pointerX: px,
+                            __pointerY: py
+                        };
+                    }) ?? []
+                )
+        )
+    );
+</script>
+
+{#if children}
+    <g class="pointer">
+        {@render children({ data: selectedData })}
+    </g>
+{/if}

package/dist/marks/Pointer.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ChannelAccessor, DataRow } from '../types.js';
+export type PointerMarkProps = {
+    data: DataRow[];
+    children: Snippet<[{
+        data: DataRow[];
+    }]>;
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    z?: ChannelAccessor;
+    /**
+     * maximum cursor distance to select data points
+     */
+    maxDistance: number;
+    /**
+     * called whenever the selection changes
+     * @param data
+     */
+    onupdate: (data: DataRow[]) => void;
+};
+import { type Snippet } from 'svelte';
+declare const Pointer: import("svelte").Component<PointerMarkProps, {}, "">;
+type Pointer = ReturnType<typeof Pointer>;
+export default Pointer;

package/dist/marks/Rect.svelte

@@ -0,0 +1,103 @@
+<!--
+    @component
+    For arbitrary rectangles, requires quantitative x and y scales 
+-->
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeY, intervalX, intervalY } from '../index.js';
+    import {
+        resolveChannel,
+        resolveProp,
+        resolveScaledStyles,
+        resolveStyles
+    } from '../helpers/resolve.js';
+    import { getUsedScales, projectX, projectY } from '../helpers/scales.js';
+    import { coalesce, testFilter, maybeNumber } from '../helpers/index.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        BaseRectMarkProps,
+        ChannelAccessor
+    } from '../types.js';
+    import { isValid } from '../helpers/isValid.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    type RectMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        interval?: number | string;
+    } & BaseRectMarkProps;
+
+    let { data = [{}], class: className = null, ...options }: RectMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    const args = $derived(
+        intervalY(intervalX({ data, ...options }, { plot }), { plot }) as RectMarkProps
+    );
+</script>
+
+<Mark
+    type="rect"
+    required={[]}
+    channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        <g class="rect">
+            {#each scaledData as d}
+                {#if d.valid}
+                    {@const x1 = d.x1 == null ? plot.options.marginLeft : d.x1}
+                    {@const x2 = d.x2 == null ? plot.options.marginLeft + plot.facetWidth : d.x2}
+                    {@const y1 = d.y1 == null ? plot.options.marginTop : d.y1}
+                    {@const y2 = d.y2 == null ? plot.options.marginTop + plot.facetHeight : d.y2}
+
+                    {@const miny = Math.min(y1, y2)}
+                    {@const maxy = Math.max(y1, y2)}
+                    {@const minx = Math.min(x1, x2)}
+                    {@const maxx = Math.max(x1, x2)}
+                    {@const inset = resolveProp(args.inset, d.datum, 0)}
+                    {@const insetLeft = resolveProp(args.insetLeft, d.datum)}
+                    {@const insetRight = resolveProp(args.insetRight, d.datum)}
+                    {@const insetTop = resolveProp(args.insetTop, d.datum)}
+                    {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
+                    {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0))}
+                    {@const insetT = maybeNumber(coalesce(insetTop, inset, 0))}
+                    {@const insetR = maybeNumber(coalesce(insetRight, inset, 0))}
+                    {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0))}
+
+                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
+                    <rect
+                        class={[styleClass]}
+                        {style}
+                        x={minx + insetL}
+                        y={miny + insetT}
+                        width={maxx - minx - insetL - insetR}
+                        height={maxy - miny - insetT - insetB}
+                        rx={resolveProp(args.rx, d.datum, null)}
+                        ry={resolveProp(args.ry, d.datum, null)}
+                        use:addEventHandlers={{
+                            getPlotState,
+                            options: args,
+                            datum: d.datum
+                        }} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    rect {
+        stroke: none;
+        /* fill: none; */
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
+type RectMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    interval?: number | string;
+} & BaseRectMarkProps;
+/** For arbitrary rectangles, requires quantitative x and y scales */
+declare const Rect: import("svelte").Component<RectMarkProps, {}, "">;
+type Rect = ReturnType<typeof Rect>;
+export default Rect;

package/dist/marks/RectX.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import Rect from './Rect.svelte';
+    import { intervalY, stackX, recordizeX } from '../index.js';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        BaseRectMarkProps,
+        PlotContext
+    } from '../types.js';
+    import type { StackOptions } from '../transforms/stack.js';
+    import { getContext } from 'svelte';
+
+    type RectXMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        stack?: StackOptions;
+        interval?: number | string;
+    } & BaseRectMarkProps;
+
+    let { data = [{}], stack, ...options }: RectXMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    const args = $derived(stackX(intervalY(recordizeX({ data, ...options }), { plot }), stack));
+</script>
+
+<Rect {...args}></Rect>

package/dist/marks/RectX.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { DataRecord, BaseMarkProps, ChannelAccessor, BaseRectMarkProps } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+type RectXMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    stack?: StackOptions;
+    interval?: number | string;
+} & BaseRectMarkProps;
+declare const RectX: import("svelte").Component<RectXMarkProps, {}, "">;
+type RectX = ReturnType<typeof RectX>;
+export default RectX;

package/dist/marks/RectY.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import Rect from './Rect.svelte';
+    import { intervalX, stackY, recordizeY } from '../index.js';
+    import type { StackOptions } from '../transforms/stack.js';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        BaseRectMarkProps,
+        PlotContext
+    } from '../types.js';
+    import { getContext } from 'svelte';
+
+    type RectYMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        y?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        stack?: StackOptions;
+        interval?: number | string;
+    } & BaseRectMarkProps;
+
+    let { data = [{}], stack, ...options }: RectYMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(stackY(intervalX(recordizeY({ data, ...options }), { plot }), stack));
+</script>
+
+<Rect {...args}></Rect>