svelteplot 0.10.3 → 0.11.0

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

@@ -1,5 +1,5 @@
-import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
-declare function $$render<Datum extends DataRow>(): {
+import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from '../types/index.js';
+declare function $$render<Datum = DataRecord | RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
@@ -7,14 +7,24 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -24,54 +34,117 @@ declare function $$render<Datum extends DataRow>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }>, "fill" | "fillOpacity"> & {
+        /** the input data array; each element becomes one horizontal tick */
         data: Datum[];
         /**
-         * the vertical position; bound to the x scale
+         * the vertical position; bound to the y scale
          */
         y?: ChannelAccessor<Datum>;
         /**
-         * the horizontal position; bound to the y scale, which must be band. If the y channel
-         * is not specified, the tick will span the full vertical extent of the frame.
+         * the horizontal position; bound to the x scale, which must be band. If the x channel
+         * is not specified, the tick will span the full horizontal extent of the frame.
          */
         x?: ChannelAccessor<Datum>;
         /**
@@ -79,6 +152,7 @@ declare function $$render<Datum extends DataRow>(): {
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     };
     exports: {};
@@ -86,7 +160,7 @@ declare function $$render<Datum extends DataRow>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Datum extends DataRow> {
+declare class __sveltets_Render<Datum = DataRecord | RawValue> {
     props(): ReturnType<typeof $$render<Datum>>['props'];
     events(): ReturnType<typeof $$render<Datum>>['events'];
     slots(): ReturnType<typeof $$render<Datum>>['slots'];
@@ -94,13 +168,13 @@ declare class __sveltets_Render<Datum extends DataRow> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Datum extends DataRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+    new <Datum = DataRecord | RawValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
     } & ReturnType<__sveltets_Render<Datum>['exports']>;
-    <Datum extends DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum = DataRecord | RawValue>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /** The TickY mark is useful for showing one-dimensional distributions along the y axis. The x axis must be a band scale. */
 declare const TickY: $$IsomorphicComponent;
-type TickY<Datum extends DataRow> = InstanceType<typeof TickY<Datum>>;
+type TickY<Datum = DataRecord | RawValue> = InstanceType<typeof TickY<Datum>>;
 export default TickY;

package/dist/marks/Trail.svelte

@@ -3,16 +3,27 @@
         BaseMarkProps<Datum>,
         'stroke' | 'strokeWidth' | 'strokeDasharray'
     > {
+        /** the input data array */
         data?: Datum[];
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** grouping channel for splitting data into separate trails */
         z?: ChannelAccessor<Datum>;
+        /** the radius (width) of the trail at each data point */
         r?: ChannelAccessor<Datum>;
+        /** the curve interpolation type for connecting data points */
         curve?: CurveName | CurveFactory;
+        /** tension parameter for the curve interpolation */
         tension?: number;
+        /** sort order for data points before rendering */
         sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
+        /** accessor that returns false for data points that should create gaps in the trail */
         defined?: ConstantAccessor<boolean, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
+        /** the cap style for trail endpoints */
         cap?: 'butt' | 'round';
         /**
          * Samples per segment for curve interpolation
@@ -27,15 +38,15 @@
         RawValue,
         ScaledDataRecord,
         CurveName
-    } from '../types';
+    } from '../types/index.js';
     import Mark from '../Mark.svelte';
     import { path as d3Path } from 'd3-path';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { getPlotDefaults } from '../hooks/plotDefaults';
-    import { sort } from '../transforms';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { sort } from '../transforms/index.js';
     import trailPath, { type TrailSample } from './helpers/trail.js';
     import TrailCanvas from './helpers/TrailCanvas.svelte';
-    import { addEventHandlers } from './helpers/events';
+    import { addEventHandlers } from './helpers/events.js';
     import type { CurveFactory } from 'd3-shape';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
@@ -124,17 +135,18 @@
                         {@const defined = trailData.map(
                             (d) =>
                                 d.valid &&
-                                d.r >= 0 &&
+                                (d.r ?? 0) >= 0 &&
                                 (resolveProp(options.defined, d.datum, true) ?? true)
                         )}
-                        {@const pathString = trailPath(samples, defined, d3Path(), {
-                            curve,
-                            cap,
-                            tension,
-                            ...(typeof resolution === 'number'
-                                ? { samplesPerSegment: resolution }
-                                : {})
-                        })}
+                        {@const pathString =
+                            trailPath(samples, defined, d3Path(), {
+                                curve,
+                                cap,
+                                tension,
+                                ...(typeof resolution === 'number'
+                                    ? { samplesPerSegment: resolution }
+                                    : {})
+                            }) || ''}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
                             trailData[0],

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

@@ -1,4 +1,4 @@
-import type { DataRecord, ChannelAccessor, ConstantAccessor, RawValue, CurveName } from '../types';
+import type { DataRecord, ChannelAccessor, ConstantAccessor, RawValue, CurveName } from '../types/index.js';
 import type { CurveFactory } from 'd3-shape';
 declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
@@ -8,10 +8,20 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -25,58 +35,131 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }>, "stroke" | "strokeWidth" | "strokeDasharray"> & {
+        /** the input data array */
         data?: Datum[];
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** grouping channel for splitting data into separate trails */
         z?: ChannelAccessor<Datum>;
+        /** the radius (width) of the trail at each data point */
         r?: ChannelAccessor<Datum>;
+        /** the curve interpolation type for connecting data points */
         curve?: CurveName | CurveFactory;
+        /** tension parameter for the curve interpolation */
         tension?: number;
+        /** sort order for data points before rendering */
         sort?: ConstantAccessor<RawValue, Datum> | {
             channel: "stroke" | "fill";
         };
+        /** accessor that returns false for data points that should create gaps in the trail */
         defined?: ConstantAccessor<boolean, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
+        /** the cap style for trail endpoints */
         cap?: "butt" | "round";
         /**
          * Samples per segment for curve interpolation

package/dist/marks/Vector.svelte

@@ -9,13 +9,19 @@
     };
 </script>
 
-<script lang="ts" generics="Datum extends DataRecord">
+<script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
     interface VectorMarkProps extends BaseMarkProps<Datum> {
+        /** the input data array; each element becomes one vector */
         data: Datum[];
+        /** the horizontal position channel; bound to the x scale */
         x: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y: ChannelAccessor<Datum>;
+        /** the radius (width) of the vector shape in pixels */
         r?: number;
+        /** the length of the vector in pixels */
         length?: ChannelAccessor<Datum>;
+        /** rotation angle of the vector in degrees */
         rotate?: ChannelAccessor<Datum>;
         /**
          * Controls where the vector is anchored in relation to the x, y position.
@@ -24,8 +30,11 @@
          * 'end', the arrow will end at the x, y position.
          */
         anchor?: 'start' | 'middle' | 'end';
+        /** the shape of the vector; can be a preset name or a custom ShapeRenderer */
         shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
+        /** snippet for custom rendering inside the vector mark group */
         children?: Snippet;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     }
     import type {
@@ -62,7 +71,7 @@
         r: defaultRadius
     };
     const {
-        data = [{}],
+        data = [{} as Datum],
         canvas,
         shape = 'arrow',
         anchor = 'middle',
@@ -142,7 +151,7 @@
 
     const args = $derived(
         sort({
-            data: indexData(data),
+            data: indexData(data as object[]) as unknown as Datum[],
             // sort by descending radius by default
             ...options
         })
@@ -164,7 +173,7 @@
         'fillOpacity',
         'strokeOpacity'
     ]}
-    {...args}>
+    {...args as any}>
     {#snippet children({ scaledData, usedScales })}
         <g class="vector" data-l={usedScales.length}>
             {#if canvas}
@@ -181,25 +190,25 @@
                                 strokeLinejoin: 'round',
                                 strokeLinecap: 'round',
                                 ...args
-                            },
+                            } as any,
                             shape === 'arrow-filled' ? 'fill' : 'stroke',
                             usedScales
                         )}
                         <path
-                            d={shapePath(shape, d.length, d.r)}
+                            d={shapePath(shape, d.length as number, d.r as number)}
                             transform="translate({d.x}, {d.y}) rotate({resolveProp(
                                 args.rotate,
-                                d.datum,
+                                d.datum as any,
                                 0
-                            )}) {anchor === 'start'
+                            ) as number}) {anchor === 'start'
                                 ? ''
                                 : anchor === 'end'
-                                  ? `translate(0, ${d.length})`
-                                  : `translate(0, ${d.length / 2})`}"
+                                  ? `translate(0, ${d.length as number})`
+                                  : `translate(0, ${(d.length as number) / 2})`}"
                             {style}
                             {@attach addEventHandlers({
                                 plot,
-                                options: args,
+                                options: args as any,
                                 datum: d?.datum
                             })}
                             class={[styleClass]} />