svelteplot 0.4.2 → 0.4.3-pr-198.0

package/dist/marks/Dot.svelte

@@ -28,7 +28,7 @@
     import { sort } from '../index.js';
     import Mark from '../Mark.svelte';
     import DotCanvas from './helpers/DotCanvas.svelte';
-    import { maybeData, isValid } from '../helpers/index.js';
+    import { isValid } from '../helpers/index.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
     import Anchor from './helpers/Anchor.svelte';
@@ -58,7 +58,7 @@
         // todo: move sorting to Mark
         sort(
             recordizeXY({
-                data: maybeData(data),
+                data,
                 // sort by descending radius by default
                 ...(options.r ? { sort: { channel: '-r' } } : {}),
                 ...options,
@@ -107,11 +107,11 @@
                                     styleClass
                                 ]}
                                 {style}
-                                use:addEventHandlers={{
+                                {@attach addEventHandlers({
                                     getPlotState,
                                     options: args,
-                                    datum: d.datum
-                                }} />
+                                    datum: d?.datum
+                                })} />
                         </Anchor>
                     {/if}
                 {/each}

package/dist/marks/Geo.svelte

@@ -111,11 +111,11 @@
                                 d={path(geometry)}
                                 {style}
                                 class={[styleClass]}
-                                use:addEventHandlers={{
+                                {@attach addEventHandlers({
                                     getPlotState,
                                     options: args,
-                                    datum: d.datum
-                                }}>
+                                    datum: d?.datum
+                                })}>
                                 {#if title}<title>{title}</title>{/if}
                             </path>
                         </Anchor>

package/dist/marks/GridX.svelte

@@ -5,14 +5,25 @@
     interface GridXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
         data?: Datum[];
         automatic?: boolean;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
     }
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types/index.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        RawValue,
+        PlotDefaults,
+        DataRecord,
+        ChannelAccessor
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
+    import isDataRecord from '../helpers/isDataRecord';
+    import { INDEX } from '../constants';
 
     let markProps: GridXMarkProps = $props();
 
@@ -37,8 +48,8 @@
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    const ticks: RawValue[] = $derived(
-        data.length > 0
+    const ticks: DataRecord[] = $derived(
+        (data.length > 0
             ? // use custom tick values if user passed any as prop
               data
             : // use custom scale tick values if user passed any as plot scale option
@@ -50,6 +61,9 @@
                   plot.scales.x.fn,
                   autoTickCount
               )
+        ).map((d, i) =>
+            isDataRecord(d) ? { ...d, [INDEX]: i } : { [RAW_VALUE]: d, [INDEX]: i }
+        ) as DataRecord[]
     );
 </script>
 
@@ -64,17 +78,21 @@
             {#each ticks as tick, t (t)}
                 {#if testFilter(tick, options)}
                     {@const x =
-                        plot.scales.x.fn(tick) +
+                        plot.scales.x.fn(tick[RAW_VALUE]) +
                         (plot.scales.x.type === 'band' ? plot.scales.x.fn.bandwidth() * 0.5 : 0)}
                     {@const y1_ = resolveChannel('y1', tick, options)}
                     {@const y2_ = resolveChannel('y2', tick, options)}
                     {@const dx = +resolveProp(options?.dx, tick, 0)}
                     {@const dy = +resolveProp(options?.dy, tick, 0)}
-                    {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
-                    {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
+                    {@const y1 =
+                        options.y1 != null ? plot.scales.y.fn(y1_) : plot.options.marginTop}
+                    {@const y2 =
+                        options.y2 != null
+                            ? plot.scales.y.fn(y2_)
+                            : plot.options.marginTop + plot.facetHeight}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
-                        { datum: { [RAW_VALUE]: tick } },
+                        { datum: tick },
                         options,
                         'stroke',
                         usedScales,
@@ -82,7 +100,7 @@
                     )}
                     <line
                         class={styleClass}
-                        transform="translate({x + dx},{plot.options.marginTop + dy})"
+                        transform="translate({x + dx},{dy})"
                         {style}
                         {y1}
                         {y2} />

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

@@ -1,25 +1,25 @@
-import type { RawValue } from '../types/index.js';
+import type { RawValue, ChannelAccessor } from '../types/index.js';
 declare class __sveltets_Render<Datum = RawValue> {
     props(): Omit<Partial<{
         filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
         facet?: "auto" | "include" | "exclude";
-        fx: import("../types/channel").ChannelAccessor<Datum>;
-        fy: import("../types/channel").ChannelAccessor<Datum>;
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: import("../types/channel").ChannelAccessor<Datum>;
+        fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         sort: {
             channel: string;
             order?: "ascending" | "descending";
         } | ((a: RawValue, b: RawValue) => number) | import("../types/index.js").ConstantAccessor<RawValue, Datum>;
-        stroke: import("../types/channel").ChannelAccessor<Datum>;
+        stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
         strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
         strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: import("../types/channel").ChannelAccessor<Datum>;
+        opacity: ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
@@ -62,6 +62,8 @@ declare class __sveltets_Render<Datum = RawValue> {
     }>, "fill" | "fillOpacity"> & {
         data?: Datum[] | undefined;
         automatic?: boolean;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
     };
     events(): {};
     slots(): {};

package/dist/marks/GridY.svelte

@@ -5,10 +5,18 @@
     interface GridYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
         data?: Datum[];
         automatic?: boolean;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
     }
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types/index.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        RawValue,
+        PlotDefaults,
+        ChannelAccessor
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
@@ -68,8 +76,12 @@
                         (plot.scales.y.type === 'band' ? plot.scales.y.fn.bandwidth() * 0.5 : 0)}
                     {@const x1_ = resolveChannel('x1', tick, options)}
                     {@const x2_ = resolveChannel('x2', tick, options)}
-                    {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
-                    {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    {@const x1 =
+                        options.x1 != null ? plot.scales.x.fn(x1_) : plot.options.marginLeft}
+                    {@const x2 =
+                        options.x2 != null
+                            ? plot.scales.x.fn(x2_)
+                            : plot.options.marginLeft + plot.facetWidth}
                     {@const dx = +resolveProp(options?.dx, tick, 0)}
                     {@const dy = +resolveProp(options?.dy, tick, 0)}
                     {@const [style, styleClass] = resolveStyles(
@@ -83,7 +95,7 @@
                     <line
                         {style}
                         class={styleClass}
-                        transform="translate({plot.options.marginLeft + dx},{y + dy})"
+                        transform="translate({dx},{y + dy})"
                         {x1}
                         {x2} />
                 {/if}

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

@@ -1,25 +1,25 @@
-import type { RawValue } from '../types/index.js';
+import type { RawValue, ChannelAccessor } from '../types/index.js';
 declare class __sveltets_Render<Datum = RawValue> {
     props(): Omit<Partial<{
         filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
         facet?: "auto" | "include" | "exclude";
-        fx: import("../types/channel").ChannelAccessor<Datum>;
-        fy: import("../types/channel").ChannelAccessor<Datum>;
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: import("../types/channel").ChannelAccessor<Datum>;
+        fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         sort: {
             channel: string;
             order?: "ascending" | "descending";
         } | ((a: RawValue, b: RawValue) => number) | import("../types/index.js").ConstantAccessor<RawValue, Datum>;
-        stroke: import("../types/channel").ChannelAccessor<Datum>;
+        stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
         strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
         strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: import("../types/channel").ChannelAccessor<Datum>;
+        opacity: ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
@@ -62,6 +62,8 @@ declare class __sveltets_Render<Datum = RawValue> {
     }>, "fill" | "fillOpacity"> & {
         data?: Datum[] | undefined;
         automatic?: boolean;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
     };
     events(): {};
     slots(): {};

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

@@ -14,7 +14,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
+        } | ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | ConstantAccessor<import("../types/data.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         outlineStrokeOpacity?: number;
         curve?: CurveName | CurveFactory | "auto";
         tension?: number;
-        sort?: ConstantAccessor<RawValue, Datum> | {
+        sort?: ConstantAccessor<RawValue, Datum_1> | {
             channel: "stroke" | "fill";
         };
         text?: ConstantAccessor<string, Datum>;

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

@@ -1,3 +1,4 @@
+import { recordizeX } from '../index.js';
 import type { DataRow } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<import("../types").MarkerOptions & Partial<{
@@ -69,7 +70,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         outlineStrokeOpacity?: number;
         curve?: import("../types").CurveName | import("d3-shape").CurveFactory | "auto";
         tension?: number;
-        sort?: import("../types").ConstantAccessor<import("../types").RawValue, Record<string | symbol, import("../types").RawValue>> | {
+        sort?: import("../types").ConstantAccessor<recordizeX, Datum_1> | {
             channel: "stroke" | "fill";
         };
         text?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;

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

@@ -1,3 +1,4 @@
+import { recordizeY } from '../index.js';
 import type { DataRow } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<import("../types").MarkerOptions & Partial<{
@@ -69,7 +70,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         outlineStrokeOpacity?: number;
         curve?: import("../types").CurveName | import("d3-shape").CurveFactory | "auto";
         tension?: number;
-        sort?: import("../types").ConstantAccessor<import("../types").RawValue, Record<string | symbol, import("../types").RawValue>> | {
+        sort?: import("../types").ConstantAccessor<recordizeY, Datum_1> | {
             channel: "stroke" | "fill";
         };
         text?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;

package/dist/marks/Link.svelte

@@ -48,7 +48,6 @@
         PlotDefaults
     } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { maybeData } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { replaceChannels } from '../transforms/rename.js';
@@ -57,6 +56,8 @@
     import { maybeCurve } from '../helpers/curves.js';
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
+    import { sort } from '../transforms/sort.js';
+    import { indexData } from '../transforms/recordize.js';
 
     let markProps: LinkMarkProps = $props();
     const DEFAULTS = {
@@ -77,17 +78,13 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    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 },
+            sort({
+                data: indexData(data),
+                stroke: 'currentColor',
+                ...options
+            }),
             { y: ['y1', 'y2'], x: ['x1', 'x2'] }
         )
     );

package/dist/marks/Pointer.svelte

@@ -30,7 +30,7 @@
     import { quadtree } from 'd3-quadtree';
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
-    import { RAW_VALUE } from '../transforms/recordize.js';
+    import { indexData, RAW_VALUE } from '../transforms/recordize.js';
     import { groupFacetsAndZ } from '../helpers/group.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -116,7 +116,7 @@
 
     const groups = $derived.by(() => {
         const groups = [];
-        groupFacetsAndZ(data, { x, y, z, fx, fy }, (d) => groups.push(d));
+        groupFacetsAndZ(indexData(data), { x, y, z, fx, fy }, (d) => groups.push(d));
         return groups;
     });
 

package/dist/marks/RuleX.svelte

@@ -3,7 +3,7 @@
 -->
 <script lang="ts" generics="Datum = DataRecord | RawValue">
     interface RuleXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
-        data: Datum[];
+        data?: Datum[];
         x?: ChannelAccessor<Datum>;
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;

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

@@ -60,7 +60,7 @@ declare class __sveltets_Render<Datum = DataRecord | RawValue> {
         class: string | null;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
     }>, "fill" | "fillOpacity"> & {
-        data: Datum[];
+        data?: Datum[] | undefined;
         x?: ChannelAccessor<Datum>;
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;

package/dist/marks/Text.svelte

@@ -71,6 +71,7 @@
     import { sort } from '../index.js';
 
     import MultilineText from './helpers/MultilineText.svelte';
+    import { indexData } from '../transforms/recordize';
 
     const DEFAULTS = {
         fontSize: 12,
@@ -95,7 +96,7 @@
 
     const args = $derived(
         sort({
-            data,
+            data: indexData(data),
             ...options
         })
     ) as TextMarkProps;

package/dist/marks/Vector.svelte

@@ -44,8 +44,9 @@
     import { sort } from '../index.js';
     import Mark from '../Mark.svelte';
     //import DotCanvas from './helpers/DotCanvas.svelte';
-    import { maybeData, testFilter, isValid } from '../helpers/index.js';
+    import { isValid } from '../helpers/index.js';
     import { addEventHandlers } from './helpers/events.js';
+    import { indexData } from '../transforms/recordize.js';
 
     const defaultRadius = 3.5;
 
@@ -145,7 +146,7 @@
 
     const args = $derived(
         sort({
-            data: maybeData(data),
+            data: indexData(data),
             // sort by descending radius by default
             ...options
         })
@@ -201,11 +202,11 @@
                                   ? `translate(0, ${d.length})`
                                   : `translate(0, ${d.length / 2})`}"
                             {style}
-                            use:addEventHandlers={{
+                            {@attach addEventHandlers({
                                 getPlotState,
                                 options: args,
-                                datum: d.datum
-                            }}
+                                datum: d?.datum
+                            })}
                             class={[styleClass]} />
                     {/if}
                 {/each}

package/dist/marks/helpers/BaseAxisX.svelte

@@ -9,11 +9,14 @@
         ConstantAccessor,
         PlotState,
         RawValue,
+        ScaledDataRecord,
         ScaleType
     } from '../../types/index.js';
     import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '../../helpers/index.js';
+    import { INDEX } from '../../constants';
+    import { RAW_VALUE } from '../../transforms/recordize';
 
     type BaseAxisXProps = {
         scaleFn: (d: RawValue) => number;
@@ -76,11 +79,12 @@
     const positionedTicks = $derived.by(() => {
         let tickObjects = removeIdenticalLines(
             ticks.map((tick, i) => {
+                const datum = { [RAW_VALUE]: tick, [INDEX]: i };
                 return {
-                    value: tick,
+                    ...datum,
                     hidden: false,
-                    dx: +resolveProp(options.dx, tick, 0),
-                    dy: +resolveProp(options.dy, tick, 0),
+                    dx: +resolveProp(options.dx, datum, 0),
+                    dy: +resolveProp(options.dy, datum, 0),
                     x: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
                     text: splitTick(tickFormat(tick, i)),
                     element: null as SVGTextElement | null
@@ -101,7 +105,7 @@
                 }
             }
         }
-        return tickObjects;
+        return tickObjects as ScaledDataRecord[];
     });
 
     $effect(() => {
@@ -114,11 +118,11 @@
                 max(
                     positionedTicks.map((tick, i) => {
                         if (
-                            resolveProp(options.anchor, tick.value, outsideTextAnchor) !==
+                            resolveProp(options.anchor, tick, outsideTextAnchor) !==
                             outsideTextAnchor
                         )
                             return 0;
-                        if (tick.hidden || !testFilter(tick.value, options)) return 0;
+                        if (tick.hidden || !testFilter(tick, options)) return 0;
                         if (tickTextElements[i])
                             return tickTextElements[i].getBoundingClientRect().height;
                         return 0;
@@ -148,8 +152,9 @@
 
 <g class="axis-x">
     {#each positionedTicks as tick, t (t)}
-        {#if testFilter(tick.value, options) && !tick.hidden}
-            {@const tickClass_ = resolveProp(tickClass, tick.value)}
+        {#if testFilter(tick, options) && !tick.hidden}
+            {@const tickClass_ = resolveProp(tickClass, tick)}
+            {@const tickFontSize_ = +resolveProp(tickFontSize, tick, 10)}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
@@ -157,7 +162,7 @@
                 {#if tickSize}
                     {@const [tickLineStyle, tickLineClass] = resolveStyles(
                         plot,
-                        tick,
+                        { datum: tick },
                         options,
                         'stroke',
                         { x: true },
@@ -174,15 +179,15 @@
                     {@const prevTextLines = t && positionedTicks[t - 1].text}
 
                     {@const moveDown =
-                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize_ * 0.35 : 0)) *
                         (anchor === 'bottom' ? 1 : -1)}
                     {@const [textStyle, textClass] = resolveStyles(
                         plot,
-                        tick,
+                        { datum: tick },
                         {
                             fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
                             ...options,
-                            fontSize: tickFontSize,
+                            fontSize: tickFontSize_,
                             stroke: null
                         },
                         'fill',

package/dist/marks/helpers/BaseAxisY.svelte

@@ -6,10 +6,14 @@
     import type {
         AutoMarginStores,
         ConstantAccessor,
+        DataRecord,
         PlotState,
         RawValue,
+        ScaledDataRecord,
         ScaleType
     } from '../../types/index.js';
+    import { RAW_VALUE } from '../../transforms/recordize';
+    import { INDEX } from '../../constants';
 
     type BaseAxisYProps = {
         scaleFn: (d: RawValue) => number;
@@ -61,13 +65,14 @@
 
     const positionedTicks = $derived.by(() => {
         let tickObjects = ticks.map((tick, i) => {
+            const datum = { [RAW_VALUE]: tick, [INDEX]: i };
             return {
-                value: tick,
+                ...datum,
                 hidden: false,
-                dx: +resolveProp(options.dx, tick, 0),
-                dy: +resolveProp(options.dy, tick, 0),
+                dx: +resolveProp(options.dx, datum, 0),
+                dy: +resolveProp(options.dy, datum, 0),
                 y: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
-                text: tickFormat(tick),
+                text: tickFormat(tick, i),
                 element: null as SVGTextElement | null
             };
         });
@@ -107,11 +112,11 @@
                 max(
                     positionedTicks.map((tick, i) => {
                         if (
-                            resolveProp(options.textAnchor, tick.value, outsideTextAnchor) !==
+                            resolveProp(options.textAnchor, tick, outsideTextAnchor) !==
                             outsideTextAnchor
                         )
                             return 0;
-                        if (tick.hidden || !testFilter(tick.value, options)) return 0;
+                        if (tick.hidden || !testFilter(tick, options)) return 0;
                         if (tickTexts[i]) return tickTexts[i].getBoundingClientRect().width;
                         return 0;
                     }) as number[]
@@ -150,11 +155,11 @@
 
 <g class="axis-y">
     {#each positionedTicks as tick, t (t)}
-        {#if testFilter(tick.value, options) && !tick.hidden}
-            {@const tickClass_ = resolveProp(tickClass, tick.value)}
+        {#if testFilter(tick, options) && !tick.hidden}
+            {@const tickClass_ = resolveProp(tickClass, tick)}
             {@const [textStyle, textClass] = resolveStyles(
                 plot,
-                tick,
+                { datum: tick },
                 {
                     fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
                     ...options,
@@ -173,7 +178,7 @@
                 {#if tickSize}
                     {@const [tickLineStyle, tickLineClass] = resolveStyles(
                         plot,
-                        tick,
+                        { datum: tick },
                         options,
                         'stroke',
                         { y: true },

package/dist/marks/helpers/MarkerPath.svelte

@@ -95,7 +95,11 @@
     {transform}
     class={className}
     stroke-width={strokeWidth_}
-    use:addEventHandlers={{ getPlotState, options: mark.options, datum }}>
+    {@attach addEventHandlers({
+        getPlotState,
+        options: mark.options,
+        datum: datum
+    })}>
     {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker] (key)}
         {@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
         {#if isSnippet(marker)}
@@ -122,7 +126,11 @@
         marker-end={markerEnd || marker ? `url(#marker-${markerEnd ? 'end-' : ''}${id})` : null}
         {d}
         {style}
-        use:addEventHandlers={{ getPlotState, options: mark.options, datum }} />
+        {@attach addEventHandlers({
+            getPlotState,
+            options: mark.options,
+            datum: datum
+        })} />
     {#if text}
         <!-- since textPath.side is not yet supported, we have to use an invisible
             path in order to keep the text from turning upside down -->