svelteplot 0.4.2 → 0.4.3

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 -->

package/dist/marks/helpers/RectPath.svelte

@@ -28,18 +28,13 @@ Helper component for rendering rectangular marks in SVG
 
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
     import { roundedRect } from '../../helpers/roundedRect';
-    import type {
-        BaseMarkProps,
-        BaseRectMarkProps,
-        BorderRadius,
-        ScaledDataRecord,
-        UsedScales,
-        PlotContext,
-        DataRecord
-    } from '../../index.js';
     import { addEventHandlers } from './events.js';
     import { getContext } from 'svelte';
     import Anchor from './Anchor.svelte';
+    import type { BaseMarkProps, BaseRectMarkProps, BorderRadius } from '../../types/mark.js';
+    import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
+    import type { PlotContext, UsedScales } from '../../types/index.js';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
 
     let {
         datum,
@@ -116,11 +111,11 @@ Helper component for rendering rectangular marks in SVG
             )}
             class={[styleClass, className]}
             {style}
-            use:addEventHandlers={{
+            {@attach addEventHandlers({
                 getPlotState,
                 options,
                 datum: datum?.datum
-            }} />
+            })} />
     {:else}
         <rect
             transform="translate({x + insetLeft},{y + insetBottom})"
@@ -128,10 +123,10 @@ Helper component for rendering rectangular marks in SVG
             height={height - insetTop - insetBottom}
             class={[styleClass, className]}
             {style}
-            use:addEventHandlers={{
+            {@attach addEventHandlers({
                 getPlotState,
                 options,
                 datum: datum?.datum
-            }} />
+            })} />
     {/if}
 </Anchor>

package/dist/marks/helpers/RectPath.svelte.d.ts

@@ -1,13 +1,74 @@
-import type { BaseMarkProps, BaseRectMarkProps, ScaledDataRecord, UsedScales, DataRecord } from '../../index.js';
+import type { BaseRectMarkProps } from '../../types/mark.js';
+import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
+import type { UsedScales } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): {
-        datum: ScaledDataRecord<Datum_1>;
+        datum: ScaledDataRecord<Datum>;
         class: string | null;
         x: number;
         y: number;
         width: number;
         height: number;
-        options: BaseRectMarkProps<Datum_1> & BaseMarkProps<Datum_1>;
+        options: BaseRectMarkProps<Datum> & Partial<{
+            filter?: import("../../types/index.js").ConstantAccessor<boolean, Datum>;
+            facet?: "auto" | "include" | "exclude";
+            fx: import("../../types/index.js").ChannelAccessor<Datum>;
+            fy: import("../../types/index.js").ChannelAccessor<Datum>;
+            dx: import("../../types/index.js").ConstantAccessor<number, Datum>;
+            dy: import("../../types/index.js").ConstantAccessor<number, Datum>;
+            fill: import("../../types/index.js").ChannelAccessor<Datum>;
+            fillOpacity: import("../../types/index.js").ConstantAccessor<number, Datum>;
+            sort: {
+                channel: string;
+                order?: "ascending" | "descending";
+            } | ((a: import("../../types/data.js").RawValue, b: import("../../types/data.js").RawValue) => number) | import("../../types/index.js").ConstantAccessor<import("../../types/data.js").RawValue, Datum>;
+            stroke: import("../../types/index.js").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/index.js").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>;
+            clipPath: string;
+            imageFilter: import("../../types/index.js").ConstantAccessor<string, Datum>;
+            shapeRendering: import("../../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+            paintOrder: import("../../types/index.js").ConstantAccessor<string, Datum>;
+            onclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            class: string | null;
+            cursor: import("../../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        }>;
         /**
          * By default, the `inset` property is applied to all four insets. Mark components
          * can tweak this behavior for insetTop and insetBottom by setting the

package/dist/marks/helpers/events.d.ts

@@ -1,4 +1,5 @@
-import type { BaseMarkProps, DataRecord, PlotState } from '../../types/index.js';
+import type { BaseMarkProps, DataRecord, DataRow, PlotState } from '../../types/index.js';
+import type { Attachment } from 'svelte/attachments';
 declare global {
     interface MouseEvent {
         layerX?: number;
@@ -12,10 +13,8 @@ declare global {
  * of the plot frame, regardless of which element triggered the event
  */
 export declare function clientToLayerCoordinates(event: MouseEvent, plotBody: HTMLElement | null | undefined): [number, number];
-export declare function addEventHandlers(node: SVGElement, { options, datum, getPlotState }: {
-    options: BaseMarkProps;
+export declare function addEventHandlers<T extends DataRow>({ options, datum, getPlotState }: {
+    options: BaseMarkProps<T>;
     datum: DataRecord;
     getPlotState: () => PlotState;
-}): {
-    destroy(): void;
-};
+}): Attachment;

package/dist/marks/helpers/events.js

@@ -19,7 +19,7 @@ export function clientToLayerCoordinates(event, plotBody) {
     // Calculate the coordinates relative to the plot body
     return [event.clientX - plotBodyRect.left, event.clientY - plotBodyRect.top];
 }
-export function addEventHandlers(node, { options, datum, getPlotState }) {
+export function addEventHandlers({ options, datum, getPlotState }) {
     const events = pick(options, [
         'onclick',
         'oncontextmenu',
@@ -51,50 +51,62 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
         'ontouchmove',
         'onwheel'
     ]);
-    const listeners = new Map();
-    // attach event handlers
-    for (const [eventName, eventHandler] of Object.entries(events)) {
-        if (eventHandler) {
-            const wrappedHandler = (origEvent) => {
-                const { scales } = getPlotState();
-                if (origEvent.layerX !== undefined) {
-                    if (scales.projection) {
-                        const [x, y] = scales.projection.invert([
-                            origEvent.layerX,
-                            origEvent.layerY
-                        ]);
-                        origEvent.dataX = x;
-                        origEvent.dataY = y;
+    return (node) => {
+        const listeners = new Map();
+        // attach event handlers
+        for (const [eventName, eventHandler] of Object.entries(events)) {
+            if (eventHandler) {
+                const wrappedHandler = (origEvent) => {
+                    const { scales, body, options } = getPlotState();
+                    if (origEvent instanceof MouseEvent || origEvent instanceof PointerEvent) {
+                        let facetEl = origEvent.target;
+                        while (facetEl &&
+                            !facetEl.classList.contains('facet') &&
+                            facetEl.parentElement) {
+                            // ensure that parentElement is SVGElement
+                            if (!(facetEl.parentElement instanceof SVGElement))
+                                break;
+                            facetEl = facetEl.parentElement;
+                        }
+                        const facetRect = (facetEl?.firstElementChild ?? body).getBoundingClientRect();
+                        const relativeX = origEvent.clientX - facetRect.left + (options.marginLeft ?? 0);
+                        const relativeY = origEvent.clientY - facetRect.top + (options.marginTop ?? 0);
+                        if (scales.projection) {
+                            const [x, y] = scales.projection.invert([relativeX, relativeY]);
+                            origEvent.dataX = x;
+                            origEvent.dataY = y;
+                        }
+                        else {
+                            origEvent.dataX = invertScale(scales.x, relativeX);
+                            origEvent.dataY = invertScale(scales.y, relativeY);
+                        }
                     }
-                    else {
-                        origEvent.dataX = invertScale(scales.x, origEvent.layerX);
-                        origEvent.dataY = invertScale(scales.y, origEvent.layerY);
-                    }
-                }
-                eventHandler(origEvent, datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
-            };
-            listeners.set(eventName, wrappedHandler);
-            node.addEventListener(eventName.substring(2), wrappedHandler);
+                    eventHandler(origEvent, datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
+                };
+                listeners.set(eventName, wrappedHandler);
+                node.addEventListener(eventName.substring(2), wrappedHandler);
+            }
         }
-    }
-    if (events.onclick || events.onmousedown || events.onmouseup) {
-        // force role button
-        node.setAttribute('role', 'button');
-    }
-    return {
-        destroy() {
+        if (events.onclick || events.onmousedown || events.onmouseup) {
+            // force role button
+            node.setAttribute('role', 'button');
+        }
+        return () => {
             for (const [eventName, handler] of listeners.entries()) {
                 node.removeEventListener(eventName.substring(2), handler);
             }
-        }
+        };
     };
 }
 function invertScale(scale, position) {
     if (scale.type === 'band') {
-        // invert band scale since scaleBand doesn't have an invert function
+        const range = scale.fn.range();
+        const domain = scale.fn.domain();
         const eachBand = scale.fn.step();
-        const index = Math.floor(position / eachBand);
-        return scale.fn.domain()[index];
+        const extent = range[1] - range[0];
+        const posInRange = (position - range[0]) * Math.sign(extent);
+        const index = Math.floor(posInRange / eachBand);
+        return domain[index];
     }
     return scale.fn.invert ? scale.fn.invert(position) : undefined;
 }

package/dist/transforms/recordize.d.ts

@@ -1,16 +1,21 @@
 import type { TransformArgsRow, TransformArgsRecord } from '../types/index.js';
-export declare const INDEX: unique symbol;
+import { INDEX } from '../constants';
+export declare const X: unique symbol;
+export declare const Y: unique symbol;
 export declare const RAW_VALUE: unique symbol;
-export declare function recordizeX({ data, ...channels }: TransformArgsRow, { withIndex }?: {
+export declare function indexData<T extends object>(data: T[]): (T & {
+    [INDEX]: number;
+})[];
+export declare function recordizeX<T>({ data, ...channels }: TransformArgsRow<T>, { withIndex }?: {
     withIndex: boolean;
-}): TransformArgsRecord;
-export declare function recordizeY({ data, ...channels }: TransformArgsRow, { withIndex }?: {
+}): TransformArgsRecord<T>;
+export declare function recordizeY<T>({ data, ...channels }: TransformArgsRow<T>, { withIndex }?: {
     withIndex: boolean;
-}): TransformArgsRecord;
+}): TransformArgsRecord<T>;
 /**
  * This transform is used to allow users to pass an [[x0, y0], [x1, y1], ...] array
  * as dataset to marks that support it. It transforms the arrays into records, so
  * the rest of our code doesn't have to deal with this case anymore.
  */
-export declare function recordizeXY({ data, ...channels }: TransformArgsRow): TransformArgsRecord;
-export declare function recordize({ data, ...channels }: TransformArgsRow): TransformArgsRecord;
+export declare function recordizeXY<T>({ data, ...channels }: TransformArgsRow<T>): TransformArgsRecord<T>;
+export declare function recordize<T>({ data, ...channels }: TransformArgsRow<T>): TransformArgsRecord<T>;

package/dist/transforms/recordize.js

@@ -1,6 +1,11 @@
 import isDataRecord from '../helpers/isDataRecord.js';
-export const INDEX = Symbol('index');
+import { INDEX } from '../constants';
+export const X = Symbol('x');
+export const Y = Symbol('y');
 export const RAW_VALUE = Symbol('originalValue');
+export function indexData(data) {
+    return data.map((d, i) => ({ ...d, [INDEX]: i }));
+}
 /*
  * This transform takes an array of raw values as input and returns data records
  * in which the values are interpreted as x channel and their index as y
@@ -10,16 +15,15 @@ export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: t
     if (dataIsRawValueArray) {
         return {
             data: data.map((value, index) => ({
-                __value: value,
-                ...(withIndex ? { [INDEX]: index } : {}),
-                [RAW_VALUE]: value
+                [RAW_VALUE]: value,
+                [INDEX]: index
             })),
             ...channels,
             x: RAW_VALUE,
             ...(withIndex ? { y: INDEX } : {})
         };
     }
-    return { data: data, ...channels };
+    return { data: indexData(data), ...channels };
 }
 /*
  * This transform takes an array of raw values as input and returns data records
@@ -32,22 +36,15 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
     if (dataIsRawValueArray) {
         return {
             data: Array.from(data).map((value, index) => ({
-                ...(withIndex ? { __index: index } : {}),
+                [INDEX]: index,
                 [RAW_VALUE]: value
             })),
             ...channels,
-            ...(withIndex ? { x: '__index' } : {}),
+            ...(withIndex ? { x: INDEX } : {}),
             y: RAW_VALUE
         };
     }
-    return {
-        data: Array.from(data).map((d, index) => ({
-            ...d,
-            ...(withIndex ? { __index: index } : {})
-        })),
-        x: '__index',
-        ...channels
-    };
+    return { data: indexData(data), ...channels };
 }
 /**
  * This transform is used to allow users to pass an [[x0, y0], [x1, y1], ...] array
@@ -62,28 +59,30 @@ export function recordizeXY({ data, ...channels }) {
         channels.x === undefined &&
         channels.y === undefined) {
         return {
-            data: data.map(([x, y, ...rest]) => ({
+            data: data.map(([x, y, ...rest], i) => ({
                 [RAW_VALUE]: [x, y, ...rest],
-                __x: x,
-                __y: y
+                [INDEX]: i,
+                [X]: x,
+                [Y]: y
             })),
             ...channels,
-            x: '__x',
-            y: '__y'
+            x: X,
+            y: Y
         };
     }
-    return { data, ...channels };
+    return { data: data, ...channels };
 }
 export function recordize({ data, ...channels }) {
     if (!data)
         return { data, ...channels };
     if (!isDataRecord(data[0])) {
         return {
-            data: data.map((d) => ({
-                [RAW_VALUE]: d
+            data: data.map((d, i) => ({
+                [RAW_VALUE]: d,
+                [INDEX]: i
             })),
             ...channels
         };
     }
-    return { data, ...channels };
+    return { data: indexData(data), ...channels };
 }

package/dist/transforms/sort.d.ts

@@ -7,7 +7,7 @@ export declare function sort<T>({ data, ...channels }: TransformArg<T>, options?
     [IS_SORTED]: string | number | true | symbol | Date | {
         channel: string;
         order?: "ascending" | "descending";
-    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | ((d: T) => import("../types/index.js").RawValue);
+    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | ((d: T, index: number) => import("../types/index.js").RawValue);
     sort: null;
     filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
     facet?: "auto" | "include" | "exclude" | undefined;

package/dist/types/channel.d.ts

@@ -6,7 +6,7 @@ export type ChannelAccessor<T = Record<string | symbol, RawValue>> = ChannelValu
     /** you can bypass the scale by passing null */
     scale: boolean | null;
 };
-export type ChannelValue<T = Record<string | symbol, RawValue>> = RawValue | keyof T | ((d: T) => RawValue) | null | undefined;
+export type ChannelValue<T = Record<string | symbol, RawValue>> = RawValue | keyof T | ((d: T, index: number) => RawValue) | null | undefined;
 export type ScaledChannelName = 'fill' | 'fillOpacity' | 'opacity' | 'r' | 'length' | 'stroke' | 'strokeOpacity' | 'symbol' | 'fx' | 'fy' | 'x' | 'x1' | 'x2' | 'y' | 'y1' | 'y2';
 export type ScaledChannelType<T extends ScaledChannelName> = T extends 'fill' | 'stroke' | 'symbol' ? string : number;
 export type ChannelName = ScaledChannelName | 'z' | 'sort' | 'filter' | 'interval';

package/dist/types/data.d.ts

@@ -3,6 +3,7 @@ export type RawValue = number | Date | boolean | string | symbol;
 export type DataRecord<T = Record<string | symbol, RawValue>> = T;
 export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, any>> & {
     datum: DataRecord<T>;
+    index: number;
 };
 export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
     [K in ScaledChannelName]?: ScaledChannelType<K>;
@@ -11,5 +12,6 @@ export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
     dy: number;
     datum: DataRecord<T>;
     valid: Boolean;
+    index: number;
 };
 export type DataRow<T = Record<string | symbol, RawValue>> = DataRecord<T> | RawValue | [number, number] | null;

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { Writable } from 'svelte/store';
 import type { MarkerShape } from '../marks/helpers/Marker.svelte';
 import type { Channels, ScaledChannelName } from './channel.js';
-import type { DataRecord, DataRow, RawValue } from './data.js';
+import type { RawValue } from './data.js';
 import type { BaseMarkProps } from './mark.js';
 export type GenericMarkOptions = Record<string | symbol, any>;
 export type CurveName = 'basis' | 'basis-closed' | 'basis-open' | 'bundle' | 'bump-x' | 'bump-y' | 'cardinal' | 'cardinal-closed' | 'cardinal-open' | 'catmull-rom' | 'catmull-rom-closed' | 'catmull-rom-open' | 'linear' | 'linear-closed' | 'monotone-x' | 'monotone-y' | 'natural' | 'step' | 'step-after' | 'step-before';
@@ -24,18 +24,18 @@ export type MarkerOptions = {
      */
     marker?: boolean | MarkerShape | Snippet;
 };
-export type ConstantAccessor<K, T = Record<string | symbol, RawValue>> = K | ((d: T) => K) | null | undefined;
+export type ConstantAccessor<K, T = Record<string | symbol, RawValue>> = K | ((d: T, index: number) => K) | null | undefined;
 export type TransformArg<T> = Channels<T> & BaseMarkProps<T> & {
     data: T[];
 };
 export type MapArg<T> = Channels<T> & {
     data: T[];
 };
-export type TransformArgsRow = Partial<Channels> & {
-    data: DataRow[];
+export type TransformArgsRow<T extends RawValue & object> = Partial<Channels<T>> & {
+    data: T[];
 };
-export type TransformArgsRecord = Partial<Channels> & {
-    data: DataRecord[];
+export type TransformArgsRecord<T extends object> = Partial<Channels<T>> & {
+    data: T[];
 };
 export type AutoMarginStores = {
     autoMarginTop: Writable<Map<string, number>>;