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

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>

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

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

package/dist/marks/RegressionX.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { ChannelName } from '../types.js';
+    import Mark from '../Mark.svelte';
+    import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
+    import { groups as d3Groups } from 'd3-array';
+
+    let { data = [{}], ...options }: RegressionMarkProps = $props();
+
+    let groupBy: ChannelName | null =
+        options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
+    // separate groups
+    let groups = $derived(
+        groupBy !== null
+            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options)).map(
+                  (g) => g[1]
+              )
+            : [data]
+    );
+</script>
+
+<Mark type="regression">
+    {#each groups as group}
+        <Regression data={group} dependent="x" {...options} />
+    {/each}
+</Mark>

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

@@ -0,0 +1,4 @@
+import { type RegressionMarkProps } from './helpers/Regression.svelte';
+declare const RegressionX: import("svelte").Component<RegressionMarkProps, {}, "">;
+type RegressionX = ReturnType<typeof RegressionX>;
+export default RegressionX;

package/dist/marks/RegressionY.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { ChannelName } from '../types.js';
+    import Mark from '../Mark.svelte';
+    import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
+    import { groups as d3Groups } from 'd3-array';
+
+    let { data = [{}], ...options }: RegressionMarkProps = $props();
+
+    let groupBy: ChannelName | null =
+        options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
+    // separate groups
+    let groups = $derived(
+        groupBy !== null
+            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options)).map(
+                  (g) => g[1]
+              )
+            : [data]
+    );
+</script>
+
+<Mark type="regression">
+    {#each groups as group}
+        <Regression data={group} dependent="y" {...options} />
+    {/each}
+</Mark>

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

@@ -0,0 +1,4 @@
+import { type RegressionMarkProps } from './helpers/Regression.svelte';
+declare const RegressionY: import("svelte").Component<RegressionMarkProps, {}, "">;
+type RegressionY = ReturnType<typeof RegressionY>;
+export default RegressionY;

package/dist/marks/RuleX.svelte

@@ -1,30 +1,54 @@
-<script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import resolveChannel from "../helpers/resolveChannel.js";
-const BaseMark_RuleX = BaseMark;
-const plot = getContext("svelteplot");
-let { data = [], x, y1, y2, ...styleProps } = $props();
-let dataWrapped = $derived(x ? data : data.map((d) => ({ x: d, ___orig___: d })));
-</script>
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeX } from '../transforms/recordize.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+
+    type RuleXMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetTop?: ConstantAccessor<number>;
+        insetBottom?: ConstantAccessor<number>;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+    };
 
-<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={['x', 'y']} {x} {y1} {y2}>
-    <g class="rule-x">
-        {#each data as datum}
-            <line
-                transform="translate({plot.xScale(resolveChannel('x', datum, x))}, {0})"
-                style={getBaseStyles(datum, styleProps)}
-                y1={y1 != null ? plot.yScale(resolveChannel('y', datum, y1)) : plot.margins.top}
-                y2={y2 != null
-                    ? plot.yScale(resolveChannel('y', datum, y2))
-                    : plot.plotHeight + plot.margins.top}
-            />
-        {/each}
-    </g>
-</BaseMark_RuleX>
+    let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+    const args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
+</script>
 
-<style>
-    .rule-x line {
-        stroke: currentColor;
-    }
-</style>
+<Mark type="ruleX" channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <GroupMultiple class="rule-x {className || ''}" length={className ? 2 : scaledData.length}>
+            {#each scaledData as d}
+                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
+                <line
+                    transform="translate({d.x + dx}, {dy})"
+                    {style}
+                    class={[styleClass]}
+                    y1={(inset || insetTop) + (d.y1 != null ? d.y1 : plot.options.marginTop)}
+                    y2={(d.y2 != null ? d.y2 : plot.facetHeight + plot.options.marginTop) -
+                        (inset || insetBottom)} />
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { RuleXMarkProps } from '../types.js';
-declare const __propDef: {
-    props: RuleXMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type RuleXMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    inset?: ConstantAccessor<number>;
+    insetTop?: ConstantAccessor<number>;
+    insetBottom?: ConstantAccessor<number>;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
 };
-export type RuleXProps = typeof __propDef.props;
-export type RuleXEvents = typeof __propDef.events;
-export type RuleXSlots = typeof __propDef.slots;
-export default class RuleX extends SvelteComponent<RuleXProps, RuleXEvents, RuleXSlots> {
-}
-export {};
+declare const RuleX: import("svelte").Component<RuleXMarkProps, {}, "">;
+type RuleX = ReturnType<typeof RuleX>;
+export default RuleX;

package/dist/marks/RuleY.svelte

@@ -1,30 +1,54 @@
-<script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import resolveChannel from "../helpers/resolveChannel.js";
-const BaseMark_RuleY = BaseMark;
-const plot = getContext("svelteplot");
-let { data = [], y, x1, x2, ...styleProps } = $props();
-let dataWrapped = $derived(y ? data : data.map((d) => ({ y: d, ___orig___: d })));
-</script>
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeY } from '../transforms/recordize.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+
+    type RuleYMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        y?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetLeft?: ConstantAccessor<number>;
+        insetRight?: ConstantAccessor<number>;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+    };
 
-<BaseMark_RuleY type="rule-y" data={dataWrapped} channels={['y', 'x']} {y} {x1} {x2}>
-    <g class="rule-y">
-        {#each data as datum}
-            <line
-                transform="translate(0,{plot.yScale(resolveChannel('y', datum, y))})"
-                style={getBaseStyles(datum, styleProps)}
-                x1={x1 != null ? plot.xScale(resolveChannel('x', datum, x1)) : plot.margins.left}
-                x2={x2 != null
-                    ? plot.xScale(resolveChannel('x', datum, x2))
-                    : plot.plotWidth + plot.margins.left}
-            />
-        {/each}
-    </g>
-</BaseMark_RuleY>
+    let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+    const args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
+</script>
 
-<style>
-    .rule-y line {
-        stroke: currentColor;
-    }
-</style>
+<Mark type="ruleY" channels={['y', 'x1', 'x2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        <GroupMultiple class="rule-y {className || ''}" length={className ? 2 : args.data.length}>
+            {#each scaledData as d}
+                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
+                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
+                <line
+                    transform="translate({dx}, {d.y + dy})"
+                    {style}
+                    class={[styleClass]}
+                    x1={(inset || insetLeft) + (d.x1 != null ? d.x1 : plot.options.marginLeft)}
+                    x2={(d.x2 != null ? d.x2 : plot.facetWidth + plot.options.marginLeft) -
+                        (inset || insetRight)} />
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>