svelteplot 0.3.7 → 0.3.8-pr-134.0

package/dist/Mark.svelte

@@ -11,7 +11,7 @@
                 {
                     mark: Mark<GenericMarkOptions>;
                     usedScales: ReturnType<typeof getUsedScales>;
-                    scaledData: ScaledDataRecord[];
+                    scaledData: ScaledDataRecord<Datum>[];
                 }
             ]
         >;
@@ -158,7 +158,7 @@
     let prevResolvedData: ResolvedDataRecord[] = [];
 
     $effect(() => {
-        if (isDifferent(resolvedData, prevResolvedData)) {
+        if (isDifferent(data, mark.data) || isDifferent(resolvedData, prevResolvedData)) {
             prevResolvedData = resolvedData;
             // data has changed
             mark.data = data;

package/dist/Mark.svelte.d.ts

@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         children?: Snippet<[{
             mark: any;
             usedScales: ReturnType<typeof getUsedScales>;
-            scaledData: ScaledDataRecord[];
+            scaledData: ScaledDataRecord<Datum>[];
         }]> | undefined;
         defaults?: Partial<Record<ScaledChannelName, RawValue>>;
     };

package/dist/helpers/colors.d.ts

@@ -6,7 +6,7 @@ type SchemeGetter = (n: number) => readonly string[];
 export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
 export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
 export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
-export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): any[] | undefined;
 export declare function isQuantitativeScheme(scheme: string): boolean;
 export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
 export declare function isDivergingScheme(scheme: string): boolean;

package/dist/helpers/index.d.ts

@@ -3,11 +3,8 @@ import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-export declare function coalesce(...args: (RawValue | undefined | null)[]): RawValue | null;
-export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | symbol | Date | {
-    value: import("../types/index.js").ChannelValue<Record<string | symbol, RawValue>>;
-    scale: boolean | null;
-} | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): any;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;

package/dist/helpers/scales.d.ts

@@ -15,7 +15,7 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
     skip: Map<ScaledChannelName, Set<symbol>>;

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types/index.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean;
+export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDate(v: RawValue): v is Date;
-export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
+export declare function isDateOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
-export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
+export declare function isStringOrNull(v: RawValue | null | undefined): boolean;
 export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
 export declare function isOpacityOrNull(v: RawValue): boolean;

package/dist/marks/Area.svelte

@@ -41,6 +41,7 @@
         RawValue
     } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
+    import { addEventHandlers } from './helpers/events';
 
     let markProps: AreaMarkProps = $props();
 
@@ -135,6 +136,11 @@
                                 class={['svelteplot-area', className, styleClass]}
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options,
+                                    datum: datum.datum
+                                }}
                                 {style}
                                 >{#if title}<title>{title}</title>{/if}</path>
                         </Anchor>

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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
@@ -71,7 +72,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
     }, "y1" | "y2"> & {
         x?: ChannelAccessor<Datum>;

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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
@@ -71,7 +72,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
     }, "x1" | "x2"> & {
         x?: ChannelAccessor<Datum>;

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

@@ -59,7 +59,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         class: string | null;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fill" | "fillOpacity" | "href" | "target" | "paintOrder" | "title"> & {
+    }>, "fill" | "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[] | undefined;
         automatic?: boolean;
         title?: string | false | null;

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

@@ -59,7 +59,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         class: string | null;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fill" | "fillOpacity" | "href" | "target" | "paintOrder" | "title"> & {
+    }>, "fill" | "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[] | undefined;
         automatic?: boolean;
         title?: string | false | null;

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

@@ -14,7 +14,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;

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

@@ -1,77 +1,6 @@
-import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import type { DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        class: string | null;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        data: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        /**
-         * the window size (the window transform's k option), an integer; defaults to 20
-         */
-        n?: number;
-        /**
-         * the band radius, a number representing a multiple of standard deviations; defaults to 2
-         */
-        k?: number;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -1,77 +1,6 @@
-import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import type { DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        class: string | null;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        data: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        /**
-         * the window size (the window transform's k option), an integer; defaults to 20
-         */
-        n?: number;
-        /**
-         * the band radius, a number representing a multiple of standard deviations; defaults to 2
-         */
-        k?: number;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -1,88 +1,29 @@
 import type { ChannelAccessor, DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Pick<Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        class: string | null;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "class"> & {
+    props(): Pick<BaseMarkProps<Datum_1>, "class"> & {
         data: Datum[];
         x: ChannelAccessor;
         y: ChannelAccessor;
         /**
          * Options for the rule marks that represent the min/max range
          */
-        rule: Record<string, ChannelAccessor<Datum>>;
+        rule: Record<string, ChannelAccessor<Datum_1>>;
         /**
          * Options for the bar marks that represent the IQR range
          */
-        bar: Record<string, ChannelAccessor<Datum>>;
+        bar: Record<string, ChannelAccessor<Datum_1>>;
         /**
          * Options for the tick marks that represent the median
          */
-        tickMedian: boolean | Record<string, ChannelAccessor<Datum>>;
+        tickMedian: Record<string, ChannelAccessor<Datum_1>> | boolean;
         /**
          * Options for the tick marks that represent the min/max range
          */
-        tickMinMax: boolean | Record<string, ChannelAccessor<Datum>>;
+        tickMinMax: Record<string, ChannelAccessor<Datum_1>> | boolean;
         /**
          * Options for the dot marks that represent the outliers
          */
-        dot: Record<string, ChannelAccessor<Datum>>;
+        dot: Record<string, ChannelAccessor<Datum_1>>;
     };
     events(): {};
     slots(): {};

package/dist/marks/CustomMark.svelte

@@ -4,10 +4,18 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
-        data: Datum[];
+        data?: Datum[];
         x?: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
-        children: Snippet<[{ datum: Datum; x: number; y: number }]>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        mark?: Snippet<
+            [{ record: ScaledDataRecord<Datum>; index: number; usedScales: UsedScales }]
+        >;
+        marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
     }
 
     import { getContext } from 'svelte';
@@ -15,36 +23,47 @@
         PlotContext,
         DataRecord,
         ChannelAccessor,
-        BaseMarkProps
+        BaseMarkProps,
+        ScaledDataRecord,
+        UsedScales,
+        ScaledChannelName
     } from '../types/index.js';
     import type { Snippet } from 'svelte';
+    import { sort } from '../index.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    import Mark from '../Mark.svelte';
 
-    import { resolveChannel } from '../helpers/resolve.js';
-    import { projectXY } from '../helpers/scales.js';
-    import { isValid } from '../helpers/index.js';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
 
-    let {
-        data = [{} as Datum],
-        x,
-        y,
-        children,
-        class: className = null
-    }: CustomMarkProps = $props();
+    const args = $derived(sort({ data, ...options })) as CustomMarkProps;
+
+    const channels: ScaledChannelName[] = [
+        'x',
+        'x1',
+        'x2',
+        'y',
+        'y1',
+        'y2',
+        'r',
+        'fill',
+        'stroke',
+        'opacity',
+        'fillOpacity',
+        'strokeOpacity'
+    ];
 </script>
 
-<GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
-    {#each data as datum, i (i)}
-        {@const x_ = resolveChannel<Datum>('x', datum, { x, y })}
-        {@const y_ = resolveChannel<Datum>('y', datum, { x, y })}
-        {#if isValid(x_) && isValid(y_)}
-            {@const [px, py] = projectXY(plot.scales, x_, y_)}
-            <g transform="translate({px}, {py})">
-                {@render children({ datum, x: px, y: py })}
-            </g>
+<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        {#if marks}
+            {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}
+        {/if}
+        {#if mark}
+            {#each scaledData as datum, i (i)}
+                {#if datum.valid}
+                    {@render mark({ record: datum, index: i, usedScales })}
+                {/if}
+            {/each}
         {/if}
-    {/each}
-</GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -1,75 +1,6 @@
-import type { DataRecord, ChannelAccessor } from '../types/index.js';
-import type { Snippet } from 'svelte';
+import type { DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        class: string | null;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        data: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        children: Snippet<[{
-            datum: Datum;
-            x: number;
-            y: number;
-        }]>;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";