svelteplot 0.2.6-next.4 → 0.2.6

package/dist/marks/GridY.svelte

@@ -1,3 +1,13 @@
+<!-- @component
+    Renders horizontal gridlines at y-axis tick positions
+-->
+<script module lang="ts">
+    export type GridYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data?: RawValue[];
+        automatic?: boolean;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
@@ -7,8 +17,6 @@
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
-    type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
-
     let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -42,7 +50,7 @@
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">
-            {#each ticks as tick}
+            {#each ticks as tick, t (t)}
                 {#if testFilter(tick, options)}
                     {@const y =
                         plot.scales.y.fn(tick) +

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

@@ -1,8 +1,9 @@
-import type { BaseMarkProps, RawValue } from '../types.js';
-type GridYMarkProps = BaseMarkProps & {
+export type GridYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data?: RawValue[];
     automatic?: boolean;
 };
+import type { BaseMarkProps, RawValue } from '../types.js';
+/** Renders horizontal gridlines at y-axis tick positions */
 declare const GridY: import("svelte").Component<GridYMarkProps, {}, "">;
 type GridY = ReturnType<typeof GridY>;
 export default GridY;

package/dist/marks/HTMLTooltip.svelte

@@ -10,11 +10,12 @@
         x?: ChannelAccessor;
         y?: ChannelAccessor;
         r?: ChannelAccessor;
+        children: Snippet<[{ datum: DataRow }]>;
     };
 </script>
 
 <script lang="ts">
-    import { getContext } from 'svelte';
+    import { getContext, type Snippet } from 'svelte';
     import type { PlotContext } from '../types.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');

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

@@ -4,7 +4,11 @@ export type HTMLTooltipMarkProps = {
     x?: ChannelAccessor;
     y?: ChannelAccessor;
     r?: ChannelAccessor;
+    children: Snippet<[{
+        datum: DataRow;
+    }]>;
 };
+import { type Snippet } from 'svelte';
 /** For showing custom HTML tooltips positioned at x/y coordinates */
 declare const HtmlTooltip: import("svelte").Component<HTMLTooltipMarkProps, {}, "">;
 type HtmlTooltip = ReturnType<typeof HtmlTooltip>;

package/dist/marks/Line.svelte

@@ -1,6 +1,5 @@
-<!--
-    @component
-    Line mark, useful for line charts
+<!-- @component
+    Creates line charts with connecting points in a dataset with customizable curves and markers
 -->
 <script module lang="ts">
     import type {
@@ -14,15 +13,14 @@
         ScaledDataRecord
     } from '../types.js';
 
-    export type BaseLineMarkProps = {
+    export type LineMarkProps = {
         data: DataRecord[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
         z?: ChannelAccessor;
-        stroke?: ChannelAccessor;
         outlineStroke?: string;
         outlineStrokeWidth?: number;
         outlineStrokeOpacity?: number;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         curve?: CurveName | CurveFactory;
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
@@ -33,7 +31,8 @@
         textStrokeWidth?: ConstantAccessor<number>;
         lineClass?: ConstantAccessor<string>;
         canvas?: boolean;
-    } & MarkerOptions;
+    } & MarkerOptions &
+        BaseMarkProps;
 </script>
 
 <script lang="ts">
@@ -48,11 +47,6 @@
     import { pick } from 'es-toolkit';
     import LineCanvas from './helpers/LineCanvas.svelte';
 
-    type LineMarkProps = BaseMarkProps & {
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-    } & BaseLineMarkProps;
-
     import type { RawValue } from '../types.js';
     import { isValid } from '../helpers/index.js';
     import { sort } from '../transforms/sort.js';
@@ -144,7 +138,7 @@
                 <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
             {:else}
                 <g class={['lines', className]}>
-                    {#each groupedLineData as lineData, i}
+                    {#each groupedLineData as lineData, i (i)}
                         {@const pathString = linePath(lineData)}
                         {#if pathString}
                             <GroupMultiple class={resolveProp(lineClass, lineData[0])}>

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

@@ -1,13 +1,12 @@
 import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, MarkerOptions } from '../types.js';
-export type BaseLineMarkProps = {
+export type LineMarkProps = {
     data: DataRecord[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
     z?: ChannelAccessor;
-    stroke?: ChannelAccessor;
     outlineStroke?: string;
     outlineStrokeWidth?: number;
     outlineStrokeOpacity?: number;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
     curve?: CurveName | CurveFactory;
     tension?: number;
     sort?: ConstantAccessor<RawValue> | {
@@ -20,14 +19,10 @@ export type BaseLineMarkProps = {
     textStrokeWidth?: ConstantAccessor<number>;
     lineClass?: ConstantAccessor<string>;
     canvas?: boolean;
-} & MarkerOptions;
+} & MarkerOptions & BaseMarkProps;
 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 */
+/** Creates line charts with connecting points in a dataset with customizable curves and markers */
 declare const Line: import("svelte").Component<LineMarkProps, {}, "">;
 type Line = ReturnType<typeof Line>;
 export default Line;

package/dist/marks/LineX.svelte

@@ -1,8 +1,11 @@
+<!-- @component
+    Creates a horizontal line chart with x values and index positions for y
+-->
 <script lang="ts">
-    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import Line, { type LineMarkProps } from './Line.svelte';
     import { recordizeX } from '../index.js';
 
-    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+    let { data = [{}], ...rest }: Omit<LineMarkProps, 'y'> = $props();
 
     let args = $derived(recordizeX({ data, ...rest }));
 </script>

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

@@ -1,4 +1,5 @@
-import { type BaseLineMarkProps } from './Line.svelte';
-declare const LineX: import("svelte").Component<BaseLineMarkProps, {}, "">;
+import { type LineMarkProps } from './Line.svelte';
+/** Creates a horizontal line chart with x values and index positions for y */
+declare const LineX: import("svelte").Component<Omit<LineMarkProps, "y">, {}, "">;
 type LineX = ReturnType<typeof LineX>;
 export default LineX;

package/dist/marks/LineY.svelte

@@ -1,8 +1,11 @@
+<!-- @component
+    Creates a vertical line chart with y values and index positions for x
+-->
 <script lang="ts">
-    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import Line, { type LineMarkProps } from './Line.svelte';
     import { recordizeY } from '../index.js';
 
-    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+    let { data = [{}], ...rest }: Omit<LineMarkProps, 'x'> = $props();
     let args = $derived(recordizeY({ data, ...rest }));
 </script>
 

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

@@ -1,4 +1,5 @@
-import { type BaseLineMarkProps } from './Line.svelte';
-declare const LineY: import("svelte").Component<BaseLineMarkProps, {}, "">;
+import { type LineMarkProps } from './Line.svelte';
+/** Creates a vertical line chart with y values and index positions for x */
+declare const LineY: import("svelte").Component<Omit<LineMarkProps, "x">, {}, "">;
 type LineY = ReturnType<typeof LineY>;
 export default LineY;

package/dist/marks/Link.svelte

@@ -1,3 +1,22 @@
+<!-- @component
+    Creates connections between pairs of points with optional curve styling and markers
+-->
+<script lang="ts" module>
+    export type LinkMarkProps = BaseMarkProps &
+        MarkerOptions & {
+            data: DataRecord[];
+            sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+            x1: ChannelAccessor;
+            y1: ChannelAccessor;
+            x2: ChannelAccessor;
+            y2: ChannelAccessor;
+            curve?: 'auto' | CurveName | CurveFactory;
+            tension?: number;
+            text: ConstantAccessor<string>;
+            children?: Snippet;
+        };
+</script>
+
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import type {
@@ -22,20 +41,6 @@
     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',
@@ -48,10 +53,6 @@
     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) =>
@@ -130,7 +131,7 @@
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid || true}
                     {@const dx = resolveProp(args.dx, d.datum, 0)}
                     {@const dy = resolveProp(args.dx, d.datum, 0)}

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

@@ -1,7 +1,4 @@
-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 & {
+export type LinkMarkProps = BaseMarkProps & MarkerOptions & {
     data: DataRecord[];
     sort?: ConstantAccessor<RawValue> | {
         channel: 'stroke' | 'fill';
@@ -10,12 +7,15 @@ type LinkMarkProps = BaseMarkProps & {
     y1: ChannelAccessor;
     x2: ChannelAccessor;
     y2: ChannelAccessor;
-    stroke?: ChannelAccessor;
     curve?: 'auto' | CurveName | CurveFactory;
     tension?: number;
     text: ConstantAccessor<string>;
     children?: Snippet;
-} & MarkerOptions;
+};
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, CurveName, MarkerOptions, RawValue } from '../types.js';
+import { type CurveFactory } from 'd3-shape';
+/** Creates connections between pairs of points with optional curve styling and markers */
 declare const Link: import("svelte").Component<LinkMarkProps, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/marks/Rect.svelte

@@ -2,6 +2,20 @@
     @component
     For arbitrary rectangles, requires quantitative x and y scales 
 -->
+<script module lang="ts">
+    export type RectMarkProps = {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        interval?: number | string;
+    } & BaseMarkProps &
+        BaseRectMarkProps;
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -16,17 +30,6 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.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 = 'rect', ...options }: RectMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -44,7 +47,7 @@
     {...args}>
     {#snippet children({ usedScales, scaledData })}
         <GroupMultiple class={scaledData.length > 1 ? className : null} length={scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#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}

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

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

package/dist/marks/RectX.svelte

@@ -1,26 +1,16 @@
+<!-- @component
+    Convenience wrapper for rectangles oriented along the x axis 
+-->
+<script module lang="ts">
+    export type RectXMarkProps = Omit<RectMarkProps, 'y'> & { stack?: Partial<StackOptions> };
+</script>
+
 <script lang="ts">
-    import Rect from './Rect.svelte';
+    import Rect, { type RectMarkProps } 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 type { PlotContext } from '../types.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;
+    import type { StackOptions } from '../transforms/stack';
 
     let { data = [{}], stack, ...options }: RectXMarkProps = $props();
 

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

@@ -1,15 +1,9 @@
-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;
+export type RectXMarkProps = Omit<RectMarkProps, 'y'> & {
+    stack?: Partial<StackOptions>;
+};
+import { type RectMarkProps } from './Rect.svelte';
+import type { StackOptions } from '../transforms/stack';
+/** Convenience wrapper for rectangles oriented along the x axis */
 declare const RectX: import("svelte").Component<RectXMarkProps, {}, "">;
 type RectX = ReturnType<typeof RectX>;
 export default RectX;

package/dist/marks/RectY.svelte

@@ -1,26 +1,16 @@
+<!-- @component
+    Convenience wrapper for rectangles oriented along the x axis 
+-->
+<script module lang="ts">
+    export type RectYMarkProps = Omit<RectMarkProps, 'x'> & { stack?: Partial<StackOptions> };
+</script>
+
 <script lang="ts">
-    import Rect from './Rect.svelte';
+    import Rect, { type RectMarkProps } 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 type { 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;
+    import type { StackOptions } from '../transforms/stack';
 
     let { data = [{}], stack, ...options }: RectYMarkProps = $props();
 

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

@@ -1,15 +1,9 @@
-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;
+export type RectYMarkProps = Omit<RectMarkProps, 'x'> & {
+    stack?: Partial<StackOptions>;
+};
+import { type RectMarkProps } from './Rect.svelte';
+import type { StackOptions } from '../transforms/stack';
+/** Convenience wrapper for rectangles oriented along the x axis */
 declare const RectY: import("svelte").Component<RectYMarkProps, {}, "">;
 type RectY = ReturnType<typeof RectY>;
 export default RectY;

package/dist/marks/RegressionX.svelte

@@ -1,3 +1,11 @@
+<!-- @component
+    Calculates and displays a regression line with x as the dependent variable
+-->
+
+<script module lang="ts">
+    export type RegressionXMarkProps = RegressionMarkProps;
+</script>
+
 <script lang="ts">
     import { resolveChannel } from '../helpers/resolve.js';
     import type { ChannelName } from '../types.js';
@@ -5,7 +13,7 @@
     import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
     import { groups as d3Groups } from 'd3-array';
 
-    let { data = [{}], ...options }: RegressionMarkProps = $props();
+    let { data = [{}], ...options }: RegressionXMarkProps = $props();
 
     let groupBy: ChannelName | null =
         options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
@@ -20,7 +28,7 @@
 </script>
 
 <Mark type="regression">
-    {#each groups as group}
+    {#each groups as group, g (g)}
         <Regression data={group} dependent="x" {...options} />
     {/each}
 </Mark>

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

@@ -1,4 +1,6 @@
+export type RegressionXMarkProps = RegressionMarkProps;
 import { type RegressionMarkProps } from './helpers/Regression.svelte';
+/** Calculates and displays a regression line with x as the dependent variable */
 declare const RegressionX: import("svelte").Component<RegressionMarkProps, {}, "">;
 type RegressionX = ReturnType<typeof RegressionX>;
 export default RegressionX;

package/dist/marks/RegressionY.svelte

@@ -1,3 +1,10 @@
+<!-- @component
+    Calculates and displays a regression line with y as the dependent variable
+-->
+<script module lang="ts">
+    export type RegressionYMarkProps = RegressionMarkProps;
+</script>
+
 <script lang="ts">
     import { resolveChannel } from '../helpers/resolve.js';
     import type { ChannelName } from '../types.js';
@@ -5,7 +12,7 @@
     import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
     import { groups as d3Groups } from 'd3-array';
 
-    let { data = [{}], ...options }: RegressionMarkProps = $props();
+    let { data = [{}], ...options }: RegressionYMarkProps = $props();
 
     let groupBy: ChannelName | null =
         options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
@@ -20,7 +27,7 @@
 </script>
 
 <Mark type="regression">
-    {#each groups as group}
+    {#each groups as group, i (i)}
         <Regression data={group} dependent="y" {...options} />
     {/each}
 </Mark>

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

@@ -1,4 +1,6 @@
+export type RegressionYMarkProps = RegressionMarkProps;
 import { type RegressionMarkProps } from './helpers/Regression.svelte';
+/** Calculates and displays a regression line with y as the dependent variable */
 declare const RegressionY: import("svelte").Component<RegressionMarkProps, {}, "">;
 type RegressionY = ReturnType<typeof RegressionY>;
 export default RegressionY;

package/dist/marks/RuleX.svelte

@@ -1,3 +1,18 @@
+<!-- @component
+    Renders vertical rule lines at specified x positions with customizable vertical range
+-->
+<script module lang="ts">
+    export type RuleXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetTop?: ConstantAccessor<number>;
+        insetBottom?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
@@ -12,18 +27,6 @@
         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>;
-    };
-
     let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -34,7 +37,7 @@
 <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}
+            {#each scaledData as d, i (i)}
                 {@const inset = resolveProp(args.inset, d.datum, 0)}
                 {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
                 {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}

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

@@ -1,5 +1,4 @@
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
-type RuleXMarkProps = BaseMarkProps & {
+export type RuleXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data: DataRecord[];
     x?: ChannelAccessor;
     y1?: ChannelAccessor;
@@ -7,9 +6,9 @@ type RuleXMarkProps = BaseMarkProps & {
     inset?: ConstantAccessor<number>;
     insetTop?: ConstantAccessor<number>;
     insetBottom?: ConstantAccessor<number>;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
 };
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+/** Renders vertical rule lines at specified x positions with customizable vertical range */
 declare const RuleX: import("svelte").Component<RuleXMarkProps, {}, "">;
 type RuleX = ReturnType<typeof RuleX>;
 export default RuleX;