svelteplot 0.10.3 → 0.11.0

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

@@ -7,10 +7,20 @@ declare function $$render<Datum = RawValue>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -24,49 +34,115 @@ declare function $$render<Datum = RawValue>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: 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").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: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }>, "fill" | "fillOpacity"> & {
+        /** custom values at which to draw vertical gridlines */
         data?: Datum[];
+        /** whether these gridlines were automatically added by the Plot component */
         automatic?: boolean;
+        /** the starting vertical position of the gridline */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position of the gridline */
         y2?: ChannelAccessor<Datum>;
     };
     exports: {};

package/dist/marks/GridY.svelte

@@ -3,13 +3,23 @@
 -->
 <script lang="ts" generics="Datum = RawValue">
     interface GridYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** custom values at which to draw horizontal gridlines */
         data?: Datum[];
+        /** whether these gridlines were automatically added by the Plot component */
         automatic?: boolean;
+        /** the starting horizontal position of the gridline */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position of the gridline */
         x2?: ChannelAccessor<Datum>;
     }
     import Mark from '../Mark.svelte';
-    import type { BaseMarkProps, RawValue, ChannelAccessor } from '../types/index.js';
+    import type {
+        BaseMarkProps,
+        RawValue,
+        DataRecord,
+        ChannelAccessor,
+        ScaledDataRecord
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
@@ -19,9 +29,12 @@
 
     let markProps: GridYMarkProps = $props();
 
+    const _plotDefaults = getPlotDefaults();
+    const _grid = _plotDefaults.grid;
+    const _gridY = _plotDefaults.gridY;
     const DEFAULTS = {
-        ...getPlotDefaults().grid,
-        ...getPlotDefaults().gridY
+        ...(_grid != null && _grid !== true ? _grid : {}),
+        ...(_gridY != null && _gridY !== true ? _gridY : {})
     };
 
     const {
@@ -42,7 +55,7 @@
     const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
-              data
+              (data as RawValue[])
             : // use custom scale tick values if user passed any as plot scale option
               autoTicks(
                   plot.scales.y.type,
@@ -57,31 +70,33 @@
 
 <Mark
     type="gridY"
-    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick as RawValue })) : []}
     channels={['x1', 'x2', 'y', 'stroke', 'strokeOpacity']}
-    {...{ ...options, y: RAW_VALUE }}
+    {...{ ...options, y: RAW_VALUE } as any}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">
             {#each ticks as tick, t (t)}
-                {#if testFilter(tick, options)}
+                {#if testFilter(tick as any, options as any)}
                     {@const y =
                         plot.scales.y.fn(tick) +
                         (plot.scales.y.type === 'band' ? plot.scales.y.fn.bandwidth() * 0.5 : 0)}
-                    {@const x1_ = resolveChannel('x1', tick, options)}
-                    {@const x2_ = resolveChannel('x2', tick, options)}
+                    {@const x1_ = resolveChannel('x1', tick as any, options as any)}
+                    {@const x2_ = resolveChannel('x2', tick as any, options as any)}
                     {@const x1 =
-                        options.x1 != null ? plot.scales.x.fn(x1_) : plot.options.marginLeft}
+                        options.x1 != null && x1_ != null
+                            ? plot.scales.x.fn(x1_)
+                            : plot.options.marginLeft}
                     {@const x2 =
-                        options.x2 != null
+                        options.x2 != null && x2_ != null
                             ? plot.scales.x.fn(x2_)
                             : plot.options.marginLeft + plot.facetWidth}
-                    {@const dx = +resolveProp(options?.dx, tick, 0)}
-                    {@const dy = +resolveProp(options?.dy, tick, 0)}
+                    {@const dx = resolveProp(options.dx, tick as any, 0) ?? 0}
+                    {@const dy = resolveProp(options.dy, tick as any, 0) ?? 0}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
-                        { datum: { [RAW_VALUE]: tick } },
-                        options,
+                        { datum: { [RAW_VALUE]: tick } } as unknown as ScaledDataRecord,
+                        options as any,
                         'stroke',
                         usedScales,
                         true

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

@@ -7,10 +7,20 @@ declare function $$render<Datum = RawValue>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -24,49 +34,115 @@ declare function $$render<Datum = RawValue>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: 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").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: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }>, "fill" | "fillOpacity"> & {
+        /** custom values at which to draw horizontal gridlines */
         data?: Datum[];
+        /** whether these gridlines were automatically added by the Plot component */
         automatic?: boolean;
+        /** the starting horizontal position of the gridline */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position of the gridline */
         x2?: ChannelAccessor<Datum>;
     };
     exports: {};

package/dist/marks/HTMLTooltip.svelte

@@ -4,12 +4,19 @@
 -->
 <script lang="ts" generics="Datum = DataRow">
     interface HTMLTooltipMarkProps {
+        /** 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>;
+        /** the radius channel, used for positioning with dot-based data */
         r?: ChannelAccessor<Datum>;
+        /** the horizontal facet channel */
         fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
         fy?: ChannelAccessor<Datum>;
+        /** snippet for rendering the tooltip content; receives the nearest datum */
         children: Snippet<[{ datum: Datum }]>;
     }
     import { type Snippet } from 'svelte';
@@ -25,7 +32,7 @@
 
     let { data, x, y, r, fx, fy, children }: HTMLTooltipMarkProps = $props();
 
-    let datum = $state(false);
+    let datum = $state<Datum | false>(false);
     let tooltipX = $state();
     let tooltipY = $state();
 
@@ -34,12 +41,12 @@
 
     function onPointerMove(evt: MouseEvent) {
         const plotRect = plot.body.getBoundingClientRect();
-        let facetEl = evt.target as SVGElement;
+        let facetEl: Element | null = evt.target as Element;
         while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement;
+            facetEl = facetEl.parentElement as Element | null;
         }
-        const facetIndex = +(facetEl?.dataset?.facet ?? 0);
-        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+        const facetIndex = +((facetEl as HTMLElement)?.dataset?.facet ?? 0);
+        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
 
         facetOffsetX = facetRect.left - plotRect.left - plot.options.marginLeft;
         facetOffsetY = facetRect.top - plotRect.top - plot.options.marginTop;
@@ -79,7 +86,7 @@
 
     const trees = $derived(
         groups.map((items) =>
-            quadtree()
+            quadtree<Datum>()
                 .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
                 .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
                 .addAll(items)
@@ -91,7 +98,7 @@
     class={['svelteplot-tooltip', { hide: !datum }]}
     style:left="{tooltipX ? facetOffsetX + projectX('x', plot.scales, tooltipX) : 0}px"
     style:top="{tooltipY ? facetOffsetY + projectY('y', plot.scales, tooltipY) : 0}px">
-    {@render children({ datum })}
+    {@render children({ datum: datum as Datum })}
 </div>
 
 <style>

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

@@ -2,12 +2,19 @@ import { type Snippet } from 'svelte';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare function $$render<Datum = DataRow>(): {
     props: {
+        /** 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>;
+        /** the radius channel, used for positioning with dot-based data */
         r?: ChannelAccessor<Datum>;
+        /** the horizontal facet channel */
         fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
         fy?: ChannelAccessor<Datum>;
+        /** snippet for rendering the tooltip content; receives the nearest datum */
         children: Snippet<[{
             datum: Datum;
         }]>;

package/dist/marks/Image.svelte

@@ -4,16 +4,26 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface ImageMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input data array; each element becomes one image */
         data: Datum[];
+        /** the horizontal position channel */
         x: ChannelAccessor<Datum>;
+        /** the vertical position channel */
         y: ChannelAccessor<Datum>;
+        /** the clip radius for the image in pixels */
         r?: ChannelAccessor<Datum>;
+        /** the width of the image in pixels */
         width?: ConstantAccessor<number, Datum>;
+        /** the height of the image in pixels */
         height?: ConstantAccessor<number, Datum>;
+        /** the image source URL */
         src?: ConstantAccessor<string, Datum>;
+        /** the title attribute for the image element (shown as a browser tooltip) */
         title?: ConstantAccessor<string, Datum>;
+        /** the SVG preserveAspectRatio attribute for the image (e.g. "xMidYMid meet") */
         preserveAspectRatio?: string;
         // canvas?: boolean;
+        /** CSS class name(s) to apply to individual image elements */
         imageClass?: ConstantAccessor<string, Datum>;
     }
 
@@ -22,13 +32,14 @@
         ChannelAccessor,
         ConstantAccessor,
         DataRecord,
-        LinkableMarkProps
-    } from '../types';
-    import { resolveProp } from '../helpers/resolve';
-    import CustomMark from './CustomMark.svelte';
-    import { getPlotDefaults } from '../hooks/plotDefaults';
-    import { sort } from '../transforms';
+        LinkableMarkProps,
+        TransformArg
+    } from '../types/index.js';
+    import { resolveProp } from '../helpers/resolve.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { sort } from '../transforms/index.js';
     import Anchor from './helpers/Anchor.svelte';
+    import Mark from '../Mark.svelte';
 
     let markProps: ImageMarkProps = $props();
 
@@ -52,25 +63,39 @@
         ...markProps
     });
 
-    const args = $derived(sort({ data, ...options }));
+    const args = $derived(sort({ data, ...options } as TransformArg<Datum>));
 </script>
 
-<CustomMark type="image" {...args}>
-    {#snippet mark({ record, index, usedScales })}
-        {@const w = record.r !== undefined ? record.r * 2 : resolveProp(width, record.datum, 20)}
-        {@const h =
-            record.r !== undefined ? record.r * 2 : resolveProp(height || width, record.datum, 20)}
-        <Anchor {options} datum={record.datum}>
-            <image
-                class={resolveProp(imageClass, record.datum, null)}
-                href={resolveProp(src, record.datum, '')}
-                x={record.x - w * 0.5}
-                y={record.y - h * 0.5}
-                {preserveAspectRatio}
-                clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
-                width={w}
-                height={h}
-                >{#if title}<title>{resolveProp(title, record.datum, '')}</title>{/if}</image>
-        </Anchor>
+<Mark
+    required={['x', 'y']}
+    channels={['x', 'y', 'r', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
+    {...args}
+    type="image">
+    {#snippet children({ scaledData })}
+        {#each scaledData as record, i (i)}
+            {#if record.valid}
+                {@const w =
+                    record.r !== undefined
+                        ? record.r * 2
+                        : Number(resolveProp(width, record.datum, 20) ?? 20)}
+                {@const h =
+                    record.r !== undefined
+                        ? record.r * 2
+                        : Number(resolveProp(height || width, record.datum, 20) ?? 20)}
+                <Anchor {options} datum={record.datum}>
+                    <image
+                        class={resolveProp(imageClass, record.datum, null)}
+                        href={resolveProp(src, record.datum, '')}
+                        x={record.x! - w * 0.5}
+                        y={record.y! - h * 0.5}
+                        {preserveAspectRatio}
+                        clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
+                        width={w}
+                        height={h}
+                        >{#if title}<title>{resolveProp(title, record.datum, '')}</title
+                            >{/if}</image>
+                </Anchor>
+            {/if}
+        {/each}
     {/snippet}
-</CustomMark>
+</Mark>