svelteplot 0.10.3 → 0.11.0

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

@@ -1,4 +1,4 @@
-import { type CurveFactory } from 'd3-shape';
+import { type Area, type CurveFactory } from 'd3-shape';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,10 +9,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";
@@ -26,59 +36,133 @@ 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> & {
-        data: Datum[];
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the starting horizontal position channel for the area baseline */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel for the area topline */
         x2?: ChannelAccessor<Datum>;
+        /** the starting vertical position channel for the area baseline */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position channel for the area topline */
         y2?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
         z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
         curve?: CurveName | CurveFactory;
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
+        /** controls the order of data points before rendering */
         sort?: ConstantAccessor<RawValue> | {
             channel: "stroke" | "fill";
         };
+        /** options for stacking area data values */
         stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
         areaClass?: ConstantAccessor<string, Datum>;
     };
     exports: {};

package/dist/marks/AreaX.svelte

@@ -3,33 +3,67 @@
     stacked horizontally if just the x channel is defined.
 -->
 <script lang="ts" generics="Datum extends DataRow">
-    interface AreaXMarkProps extends Omit<ComponentProps<typeof Area>, 'y1' | 'y2'> {
+    interface AreaXMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the horizontal position channel, implicit stacking is used to derive x1 and x2 channels */
         x?: ChannelAccessor<Datum>;
+        /** the horizontal position channel of the lower end of bands */
+        x1?: ChannelAccessor<Datum>;
+        /** the horizontal position channel of the upper end of bands */
+        x2?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
         y?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
+        z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
+        curve?: CurveName | CurveFactory;
+        /** 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' };
+        /** options for stacking area data values */
+        stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
+        areaClass?: ConstantAccessor<string, Datum>;
     }
     import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackX } from '../transforms/stack.js';
     import { recordizeX } from '../transforms/recordize.js';
-    import type { ChannelAccessor, DataRow } from '../types/index.js';
-    import { type ComponentProps } from 'svelte';
+    import type { CurveFactory } from 'd3-shape';
+    import type { StackOptions } from '../transforms/stack.js';
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        CurveName,
+        DataRow,
+        LinkableMarkProps,
+        RawValue
+    } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
     let markProps: AreaXMarkProps = $props();
 
     const DEFAULTS = getPlotDefaults().areaX;
 
-    const { data, stack, ...options }: AreaXMarkProps = $derived({
+    const {
+        data = [],
+        stack,
+        ...options
+    }: AreaXMarkProps = $derived({
         ...(markProps.x == undefined ? { x1: 0, x2: 0 } : {}),
         ...DEFAULTS,
         ...markProps
     });
 
     const args = $derived(
-        renameChannels<AreaXMarkProps>(
-            stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack),
-            { y: 'y1' }
-        )
+        renameChannels(stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack), {
+            y: 'y1'
+        })
     );
 </script>
 

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

@@ -1,86 +1,169 @@
-import type { ChannelAccessor, DataRow } from '../types/index.js';
+import type { CurveFactory } from 'd3-shape';
+import type { StackOptions } from '../transforms/stack.js';
+import type { ChannelAccessor, ConstantAccessor, CurveName, DataRow, LinkableMarkProps, RawValue } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
-    props: Omit<Partial<{
-        filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
+    props: Partial<{
+        filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        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";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
-        stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        opacity: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
+        } | ConstantAccessor<RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: ConstantAccessor<number, Datum>;
+        strokeOpacity: ConstantAccessor<number, Datum>;
+        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: ConstantAccessor<number, Datum>;
+        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: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-        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>;
+        imageFilter: ConstantAccessor<string, Datum>;
+        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: ConstantAccessor<string, Datum>;
+        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, Record<string | symbol, import("../types/data").RawValue>>;
-    }> & import("../types/mark").LinkableMarkProps<Record<string | symbol, import("../types/data").RawValue>> & {
-        data: Record<string | symbol, import("../types/data").RawValue>[];
-        x1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        x2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        y1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        y2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        z?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory;
+        cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the horizontal position channel, implicit stacking is used to derive x1 and x2 channels */
+        x?: ChannelAccessor<Datum>;
+        /** the horizontal position channel of the lower end of bands */
+        x1?: ChannelAccessor<Datum>;
+        /** the horizontal position channel of the upper end of bands */
+        x2?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
+        z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
+        curve?: CurveName | CurveFactory;
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
-        sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
+        /** controls the order of data points before rendering */
+        sort?: ConstantAccessor<RawValue, Datum> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        /** options for stacking area data values */
+        stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
-        areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-    }, "y1" | "y2"> & {
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
+        /** CSS class name(s) to apply to individual area path elements */
+        areaClass?: ConstantAccessor<string, Datum>;
     };
     exports: {};
     bindings: "";

package/dist/marks/AreaY.svelte

@@ -3,33 +3,67 @@
     stacked vertically if just the y channel is defined.
 -->
 <script lang="ts" generics="Datum extends DataRow">
-    interface AreaYMarkProps extends Omit<ComponentProps<typeof Area>, 'x1' | 'x2'> {
+    interface AreaYMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the horizontal position channel */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel. Implicit stacking is used to derive y1 and y2  */
         y?: ChannelAccessor<Datum>;
+        /** the vertical position channel of the lower end of bands */
+        y1?: ChannelAccessor<Datum>;
+        /** the vertical position channel of the upper end of bands */
+        y2?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
+        z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
+        curve?: CurveName | CurveFactory;
+        /** 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' };
+        /** options for stacking area data values */
+        stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
+        areaClass?: ConstantAccessor<string, Datum>;
     }
     import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackY } from '../transforms/stack.js';
     import { recordizeY } from '../transforms/recordize.js';
-    import type { ChannelAccessor, DataRow } from '../types/index.js';
-    import type { ComponentProps } from 'svelte';
+    import type { CurveFactory } from 'd3-shape';
+    import type { StackOptions } from '../transforms/stack.js';
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        CurveName,
+        DataRow,
+        LinkableMarkProps,
+        RawValue
+    } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
     let markProps: AreaYMarkProps = $props();
 
     const DEFAULTS = getPlotDefaults().areaY;
 
-    const { data, stack, ...options }: AreaYMarkProps = $derived({
+    const {
+        data = [],
+        stack,
+        ...options
+    }: AreaYMarkProps = $derived({
         ...(markProps.y == undefined ? { y1: 0, y2: 0 } : {}),
         ...DEFAULTS,
         ...markProps
     });
 
     const args = $derived(
-        renameChannels<AreaYMarkProps>(
-            stackY(recordizeY({ data, ...options, x1: null, x2: null }), stack),
-            { x: 'x1' }
-        )
+        renameChannels(stackY(recordizeY({ data, ...options, x1: null, x2: null }), stack), {
+            x: 'x1'
+        })
     );
 </script>