svelteplot 0.10.3 → 0.11.0

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

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, ConstantAccessor, DataRecord, LinkableMarkProps } from '../types';
+import type { ChannelAccessor, ConstantAccessor, DataRecord, LinkableMarkProps } from '../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +7,24 @@ 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>;
-        sort: ((a: import("../types").RawValue, b: import("../types").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: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types").RawValue, Datum>;
+        } | ConstantAccessor<import("../types/index.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -24,55 +34,127 @@ 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>;
     }> & 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;
+        /** CSS class name(s) to apply to individual image elements */
         imageClass?: ConstantAccessor<string, Datum>;
     };
     exports: {};

package/dist/marks/Line.svelte

@@ -3,22 +3,39 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface LineMarkProps extends MarkerOptions, BaseMarkProps<Datum> {
+        /** the input data array; each element becomes one point in the line */
         data?: Datum[];
+        /** the horizontal position channel */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
         y?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate lines by unique z values */
         z?: ChannelAccessor<Datum>;
+        /** the stroke color for the line outline */
         outlineStroke?: string;
+        /** the stroke width of the line outline in pixels */
         outlineStrokeWidth?: number;
+        /** the stroke opacity for the line outline; a number between 0 and 1 */
         outlineStrokeOpacity?: number;
+        /** the curve interpolation method for connecting data points (e.g. "basis", "catmull-rom") */
         curve?: CurveName | CurveFactory | 'auto';
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
+        /** controls the order of data points before rendering */
         sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
+        /** text label to render along the line path using a textPath element */
         text?: ConstantAccessor<string, Datum>;
+        /** the fill color for the text label rendered along the line */
         textFill?: ConstantAccessor<string, Datum>;
+        /** the stroke color for the text label rendered along the line */
         textStroke?: ConstantAccessor<string, Datum>;
+        /** the offset position for the text label along the line path (e.g. "50%") */
         textStartOffset?: ConstantAccessor<string, Datum>;
+        /** the stroke width for the text label rendered along the line in pixels */
         textStrokeWidth?: ConstantAccessor<number, Datum>;
+        /** CSS class name(s) to apply to individual line elements */
         lineClass?: ConstantAccessor<string, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     }
     import type {
@@ -32,10 +49,10 @@
     } from '../types/index.js';
     import Mark from '../Mark.svelte';
     import MarkerPath from './helpers/MarkerPath.svelte';
+    import type { MarkerShape } from './helpers/Marker.svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { line, type CurveFactory, type Line as D3Line } from 'd3-shape';
     import { geoPath } from 'd3-geo';
-    import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
     import { pick } from 'es-toolkit';
     import LineCanvas from './helpers/LineCanvas.svelte';
@@ -55,8 +72,8 @@
         tension: 0,
         canvas: false,
         markerScale: 1,
-        class: null,
-        lineClass: null,
+        class: undefined,
+        lineClass: undefined,
         ...getPlotDefaults().line
     };
 
@@ -81,8 +98,8 @@
      */
     function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
         if (!groupByKey) return [data];
-        let group = [];
-        const groups = [group];
+        let group: ScaledDataRecord[] = [];
+        const groups: ScaledDataRecord[][] = [group];
         let lastGroupValue;
         for (const d of data) {
             const groupValue = resolveProp(groupByKey, d.datum);
@@ -104,33 +121,30 @@
 
     const linePath: D3Line<ScaledDataRecord> = $derived(
         plot.scales.projection && curve === 'auto'
-            ? sphereLine(plot.scales.projection)
-            : callWithProps(line, [], {
-                  curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
-                  x: (d) => d.x,
-                  y: (d) => d.y,
-                  defined: (d) => isValid(d.x) && isValid(d.y)
-              })
+            ? (sphereLine(plot.scales.projection) as unknown as D3Line<ScaledDataRecord>)
+            : line<ScaledDataRecord>()
+                  .curve(maybeCurve(curve === 'auto' ? 'linear' : curve, tension ?? 0))
+                  .x((d) => d.x as number)
+                  .y((d) => d.y as number)
+                  .defined((d) => isValid(d.x) && isValid(d.y))
     );
 
-    function sphereLine(projection) {
+    function sphereLine(projection: any) {
         const path = geoPath(projection);
-        const fn = (lineData: ScaledDataRecord[]) => {
-            let line = [];
-            const lines = [line];
+        return (lineData: ScaledDataRecord[]) => {
+            let line: [number, number][] = [];
+            const lines: [number, number][][] = [line];
             for (const { x, y } of lineData) {
                 // if x or y is undefined, start a new line segment
                 if (!isValid(x) || !isValid(y)) {
                     line = [];
                     lines.push(line);
                 } else {
-                    line.push([x, y]);
+                    line.push([x as number, y as number]);
                 }
             }
             return path({ type: 'MultiLineString', coordinates: lines });
         };
-        fn.context = path.context;
-        return fn;
     }
 </script>
 
@@ -149,7 +163,7 @@
                     {#each groupedLineData as lineData, i (i)}
                         {@const pathString = linePath(lineData)}
                         {#if pathString}
-                            <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
+                            <GroupMultiple class={resolveProp(lineClass, lineData[0].datum)}>
                                 {#if options.outlineStroke}
                                     {@const [outlineStyle, outlineStyleClass] = resolveStyles(
                                         plot,
@@ -161,11 +175,11 @@
                                             strokeOpacity: options.outlineStrokeOpacity ?? 1,
                                             strokeWidth:
                                                 options.outlineStrokeWidth ||
-                                                resolveProp(
+                                                ((resolveProp(
                                                     options.strokeWidth,
                                                     lineData[0].datum,
                                                     1.4
-                                                ) + 2
+                                                ) as number) ?? 1.4) + 2
                                         },
                                         'stroke',
                                         usedScales
@@ -191,13 +205,8 @@
                                     plot,
                                     lineData[0],
                                     {
-                                        textAnchor: 'middle',
-                                        ...pick(args, [
-                                            'fontSize',
-                                            'fontWeight',
-                                            'fontStyle',
-                                            'textAnchor'
-                                        ]),
+                                        textAnchor: args.textAnchor || 'middle',
+                                        ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
                                         strokeWidth: args.textStrokeWidth
                                             ? args.textStrokeWidth
                                             : args.textStroke
@@ -212,26 +221,40 @@
                                 )}
                                 <MarkerPath
                                     {mark}
+                                    transform=""
                                     scales={plot.scales}
-                                    markerStart={args.markerStart}
-                                    markerMid={args.markerMid}
-                                    markerEnd={args.markerEnd}
-                                    marker={args.marker}
-                                    markerScale={args.markerScale}
-                                    strokeWidth={args.strokeWidth}
-                                    datum={lineData[0].datum}
+                                    markerStart={options.markerStart as
+                                        | boolean
+                                        | MarkerShape
+                                        | undefined}
+                                    markerMid={options.markerMid as
+                                        | boolean
+                                        | MarkerShape
+                                        | undefined}
+                                    markerEnd={options.markerEnd as
+                                        | boolean
+                                        | MarkerShape
+                                        | undefined}
+                                    marker={options.marker as boolean | MarkerShape | undefined}
+                                    markerScale={options.markerScale}
+                                    strokeWidth={options.strokeWidth}
+                                    datum={lineData[0].datum as Datum}
                                     d={pathString}
-                                    dInv={text ? linePath(lineData.toReversed()) : null}
+                                    dInv={text
+                                        ? (linePath(lineData.toReversed()) ?? undefined)
+                                        : undefined}
                                     color={lineData[0].stroke || 'currentColor'}
-                                    {style}
-                                    class={styleClass}
-                                    text={text ? resolveProp(text, lineData[0].datum) : null}
-                                    startOffset={resolveProp(
-                                        args.textStartOffset,
+                                    style={style ?? ''}
+                                    class={styleClass ?? undefined}
+                                    text={text
+                                        ? ((resolveProp(text, lineData[0].datum) as string) ?? '')
+                                        : ''}
+                                    startOffset={(resolveProp(
+                                        options.textStartOffset,
                                         lineData[0].datum,
                                         '50%'
-                                    )}
-                                    {textStyle}
+                                    ) as string) ?? '50%'}
+                                    textStyle={textStyle ?? ''}
                                     {textStyleClass} />
                             </GroupMultiple>
                         {/if}

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

@@ -13,6 +13,16 @@ declare function $$render<Datum extends DataRecord>(): {
         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";
@@ -26,64 +36,143 @@ 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>;
     }> & {
+        /** the input data array; each element becomes one point in the line */
         data?: Datum[];
+        /** the horizontal position channel */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
         y?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate lines by unique z values */
         z?: ChannelAccessor<Datum>;
+        /** the stroke color for the line outline */
         outlineStroke?: string;
+        /** the stroke width of the line outline in pixels */
         outlineStrokeWidth?: number;
+        /** the stroke opacity for the line outline; a number between 0 and 1 */
         outlineStrokeOpacity?: number;
+        /** the curve interpolation method for connecting data points (e.g. "basis", "catmull-rom") */
         curve?: CurveName | CurveFactory | "auto";
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
+        /** controls the order of data points before rendering */
         sort?: ConstantAccessor<RawValue, Datum> | {
             channel: "stroke" | "fill";
         };
+        /** text label to render along the line path using a textPath element */
         text?: ConstantAccessor<string, Datum>;
+        /** the fill color for the text label rendered along the line */
         textFill?: ConstantAccessor<string, Datum>;
+        /** the stroke color for the text label rendered along the line */
         textStroke?: ConstantAccessor<string, Datum>;
+        /** the offset position for the text label along the line path (e.g. "50%") */
         textStartOffset?: ConstantAccessor<string, Datum>;
+        /** the stroke width for the text label rendered along the line in pixels */
         textStrokeWidth?: ConstantAccessor<number, Datum>;
+        /** CSS class name(s) to apply to individual line elements */
         lineClass?: ConstantAccessor<string, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     };
     exports: {};

package/dist/marks/LineX.svelte

@@ -3,12 +3,13 @@
 -->
 <script lang="ts" generics="Datum extends DataRow">
     interface LineXMarkProps extends Omit<ComponentProps<typeof Line>, 'y' | 'data'> {
+        /** the input data array */
         data: Datum[];
     }
     import Line from './Line.svelte';
     import { recordizeX } from '../index.js';
     import type { ComponentProps } from 'svelte';
-    import type { DataRow } from '../index.js';
+    import type { DataRow } from '../types/index.js';
 
     let { data = [{} as Datum], ...rest }: LineXMarkProps = $props();