svelteplot 0.4.2 → 0.4.3-pr-198.0

package/dist/marks/helpers/RectPath.svelte

@@ -28,18 +28,12 @@ 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';
 
     let {
         datum,
@@ -52,7 +46,7 @@ Helper component for rendering rectangular marks in SVG
         useInsetAsFallbackVertically = true,
         useInsetAsFallbackHorizontally = true,
         usedScales,
-        fallbackStyle = 'fill'
+        fallbackStyle
     }: RectPathProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -99,7 +93,13 @@ Helper component for rendering rectangular marks in SVG
                 ) > 0)
     );
     const [style, styleClass] = $derived(
-        resolveStyles(plot, datum, options, fallbackStyle, usedScales)
+        resolveStyles(
+            plot,
+            datum,
+            options,
+            !fallbackStyle ? (options.stroke && !options.fill ? 'stroke' : 'fill') : fallbackStyle,
+            usedScales
+        )
     );
 </script>
 
@@ -116,11 +116,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 +128,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,4 +1,6 @@
-import type { BaseMarkProps, BaseRectMarkProps, ScaledDataRecord, UsedScales, DataRecord } from '../../index.js';
+import type { BaseMarkProps, 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>;

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/bollinger.d.ts

@@ -11,69 +11,4 @@ export type BollingerOptions = {
 };
 export declare function bollingerX(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
 export declare function bollingerY(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
-export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/index.js").RawValue>>;
-    facet?: "auto" | "include" | "exclude" | undefined;
-    fx?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
-    fy?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
-    dx?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    dy?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    fill?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
-    fillOpacity?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    sort?: {
-        channel: string;
-        order?: "ascending" | "descending";
-    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Record<string | symbol, import("../types/index.js").RawValue>>;
-    stroke?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeWidth?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    opacity?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
-    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
-    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/index.js").RawValue>>;
-    clipPath?: string | undefined;
-    imageFilter?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/index.js").RawValue>>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/index.js").RawValue>>;
-    data: {
-        __x: import("../types/index.js").RawValue;
-        __lo: number;
-        __avg: number;
-        __hi: number;
-    }[];
-};
+export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): any;

package/dist/transforms/group.d.ts

@@ -38,29 +38,21 @@ type GroupZOptions = GroupXOptions | GroupYOptions;
  * groups the dataset by x and y channel and optionally reduces the group items
  * to output channels fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: Record<string | symbol, RawValue>[];
-};
+export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the x channel and optionally reduces the group items
  * to output channels y, y1, y2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: Record<string | symbol, RawValue>[];
-};
+export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the y channel and optionally reduces the group items
  * to output channels x, x1, x2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): {
-    data: Record<string | symbol, RawValue>[];
-};
+export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): any;
 /**
  * groups the dataset by the z channel and optionally reduces the group items
  * to output channels x, x1, x2, y, y1, y2, fill, stroke, r, opacity, fillOpacity,
  * or strokeOpacity
  */
-export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): {
-    data: Record<string | symbol, RawValue>[];
-};
+export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): any;
 export {};

package/dist/transforms/interval.d.ts

@@ -1,127 +1,7 @@
 import type { PlotState, TransformArg } from '../types/index.js';
 export declare function intervalX<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
-    facet?: "auto" | "include" | "exclude" | undefined;
-    fx?: import("../types/index.js").ChannelAccessor<T>;
-    fy?: import("../types/index.js").ChannelAccessor<T>;
-    dx?: import("../types/index.js").ConstantAccessor<number, T>;
-    dy?: import("../types/index.js").ConstantAccessor<number, T>;
-    fill?: import("../types/index.js").ChannelAccessor<T>;
-    fillOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    sort?: {
-        channel: string;
-        order?: "ascending" | "descending";
-    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, T>;
-    stroke?: import("../types/index.js").ChannelAccessor<T>;
-    strokeWidth?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, T>;
-    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, T>;
-    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, T>;
-    opacity?: import("../types/index.js").ChannelAccessor<T>;
-    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, T>;
-    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, T>;
-    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, T>;
-    clipPath?: string | undefined;
-    imageFilter?: import("../types/index.js").ConstantAccessor<string, T>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, T>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, T>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
-    data: T[];
-};
+}): any;
 export declare function intervalY<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
-    facet?: "auto" | "include" | "exclude" | undefined;
-    fx?: import("../types/index.js").ChannelAccessor<T>;
-    fy?: import("../types/index.js").ChannelAccessor<T>;
-    dx?: import("../types/index.js").ConstantAccessor<number, T>;
-    dy?: import("../types/index.js").ConstantAccessor<number, T>;
-    fill?: import("../types/index.js").ChannelAccessor<T>;
-    fillOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    sort?: {
-        channel: string;
-        order?: "ascending" | "descending";
-    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, T>;
-    stroke?: import("../types/index.js").ChannelAccessor<T>;
-    strokeWidth?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, T>;
-    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, T>;
-    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, T>;
-    opacity?: import("../types/index.js").ChannelAccessor<T>;
-    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, T>;
-    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, T>;
-    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, T>;
-    clipPath?: string | undefined;
-    imageFilter?: import("../types/index.js").ConstantAccessor<string, T>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, T>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, T>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
-    data: T[];
-};
+}): any;

package/dist/transforms/recordize.d.ts

@@ -1,16 +1,18 @@
 import type { TransformArgsRow, TransformArgsRecord } from '../types/index.js';
-export declare const INDEX: unique symbol;
+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 & {})[];
+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 };
 }