svelteplot 0.4.4 → 0.4.5-pr-208.0

package/dist/Mark.svelte

@@ -41,6 +41,7 @@
     import { testFilter, isValid } from './helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
     import { RENAME } from './transforms/rename.js';
+    import { dodgeX, dodgeY } from './transforms/dodge.js';
 
     let {
         data = [],
@@ -207,85 +208,98 @@
      * elements to the scales
      */
     const scaledData = $derived(
-        resolvedData.flatMap((row) => {
-            const out: ScaledDataRecord<Datum> = {
-                datum: row.datum,
-                index: row[INDEX],
-                valid: true
-            };
-            // compute dx/dy
-            out.dx = Number(resolveProp<number>(options.dx, out.datum, 0));
-            out.dy = Number(resolveProp<number>(options.dy, out.datum, 0));
-
-            // special handling if there's a projection, e.g. a line mark
-            if (plot.scales.projection && mark.type !== 'geo') {
-                for (const suffix of ['', '1', '2']) {
-                    if (
-                        options?.[`x${suffix}`] !== undefined &&
-                        options?.[`y${suffix}`] !== undefined
-                    ) {
-                        // we have two-dimensional accessors
-                        // for the x and y channels
-                        const [x, y] =
-                            mark.type === 'line'
-                                ? [row.x, row.y] // line paths are projected later
-                                : projectXY(
-                                      plot.scales,
-                                      row.x,
-                                      row.y,
-                                      usedScales.x,
-                                      usedScales.y,
-                                      suffix
-                                  );
-
-                        out[`x${suffix}`] = x;
-                        out[`y${suffix}`] = y;
-                        out.valid =
-                            out.valid &&
-                            isValid(row.x) &&
-                            isValid(row.y) &&
-                            isValid(x) &&
-                            isValid(y);
+        dodge(
+            resolvedData.flatMap((row) => {
+                const out: ScaledDataRecord<Datum> = {
+                    datum: row.datum,
+                    index: row[INDEX],
+                    valid: true
+                };
+                // compute dx/dy
+                out.dx = Number(resolveProp<number>(options.dx, out.datum, 0));
+                out.dy = Number(resolveProp<number>(options.dy, out.datum, 0));
+
+                // special handling if there's a projection, e.g. a line mark
+                if (plot.scales.projection && mark.type !== 'geo') {
+                    for (const suffix of ['', '1', '2']) {
+                        if (
+                            options?.[`x${suffix}`] !== undefined &&
+                            options?.[`y${suffix}`] !== undefined
+                        ) {
+                            // we have two-dimensional accessors
+                            // for the x and y channels
+                            const [x, y] =
+                                mark.type === 'line'
+                                    ? [row.x, row.y] // line paths are projected later
+                                    : projectXY(
+                                          plot.scales,
+                                          row.x,
+                                          row.y,
+                                          usedScales.x,
+                                          usedScales.y,
+                                          suffix
+                                      );
+
+                            out[`x${suffix}`] = x;
+                            out[`y${suffix}`] = y;
+                            out.valid =
+                                out.valid &&
+                                isValid(row.x) &&
+                                isValid(row.y) &&
+                                isValid(x) &&
+                                isValid(y);
+                        }
                     }
                 }
-            }
 
-            // iterate over all scaled channels
-            for (const [channel, scale] of Object.entries(CHANNEL_SCALE) as [
-                ScaledChannelName,
-                ScaleName
-            ][]) {
-                // check if the mark has defined an accessor for this channel
-                if (options?.[channel] != null && out[channel] === undefined) {
-                    // resolve value
-                    const value = row[channel];
-                    // if this channel was renamed, use the original channel for scaling
-                    const origChannel = options?.[RENAME]?.[channel] || channel;
-                    const scaled = usedScales[channel]
-                        ? scale === 'x'
-                            ? projectX(origChannel as 'x' | 'x1' | 'x2', plot.scales, value)
-                            : scale === 'y'
-                              ? projectY(origChannel as 'y' | 'y1' | 'y2', plot.scales, value)
-                              : scale === 'color' && !isValid(value)
-                                ? plot.options.color.unknown
-                                : plot.scales[scale].fn(value)
-                        : value;
-
-                    out.valid = out.valid && (scale === 'color' || isValid(value));
-
-                    // apply dx/dy transform
-                    out[channel] =
-                        Number.isFinite(scaled) && (scale === 'x' || scale === 'y')
-                            ? scaled + (scale === 'x' ? out.dx : out.dy)
-                            : scaled;
-                } else if (defaults[channel]) {
-                    out[channel] = defaults[channel];
+                // iterate over all scaled channels
+                for (const [channel, scale] of Object.entries(CHANNEL_SCALE) as [
+                    ScaledChannelName,
+                    ScaleName
+                ][]) {
+                    // check if the mark has defined an accessor for this channel
+                    if (options?.[channel] != null && out[channel] === undefined) {
+                        // resolve value
+                        const value = row[channel];
+                        // if this channel was renamed, use the original channel for scaling
+                        const origChannel = options?.[RENAME]?.[channel] || channel;
+                        const scaled = usedScales[channel]
+                            ? scale === 'x'
+                                ? projectX(origChannel as 'x' | 'x1' | 'x2', plot.scales, value)
+                                : scale === 'y'
+                                  ? projectY(origChannel as 'y' | 'y1' | 'y2', plot.scales, value)
+                                  : scale === 'color' && !isValid(value)
+                                    ? plot.options.color.unknown
+                                    : plot.scales[scale].fn(value)
+                            : value;
+
+                        out.valid = out.valid && (scale === 'color' || isValid(value));
+
+                        // apply dx/dy transform
+                        out[channel] =
+                            Number.isFinite(scaled) && (scale === 'x' || scale === 'y')
+                                ? scaled + (scale === 'x' ? out.dx : out.dy)
+                                : scaled;
+                    } else if (defaults[channel]) {
+                        out[channel] = defaults[channel];
+                    }
                 }
-            }
 
-            return [out];
-        })
+                return [out];
+            }),
+            options
+        )
     );
+
+    function dodge<T>(data: ScaledDataRecord<Datum>[], options: BaseMarkProps<T>) {
+        if (options.dodgeX) {
+            return dodgeX({ data, ...options }, plot);
+        }
+        if (options.dodgeY) {
+            return dodgeY({ data, ...options }, plot);
+        }
+        return data;
+    }
 </script>
 
 {#if errors.length}

package/dist/Mark.svelte.d.ts

@@ -1,14 +1,17 @@
 import { type Snippet } from 'svelte';
+import { CHANNEL_SCALE } from './constants.js';
 import type { ScaledChannelName, MarkType, DataRecord, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
 import { getUsedScales } from './helpers/scales.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<Partial<{
-        filter?: import("./types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
+        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>;
+        dodgeX: CHANNEL_SCALE;
+        dodgeY: CHANNEL_SCALE;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;
         sort: {
@@ -29,37 +32,38 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         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.js").MouseEventHandler<SVGPathElement>;
-        ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-        class: string | null;
+        onclick: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondblclick: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseup: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousedown: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousemove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseout: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointercancel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerdown: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerup: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointermove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerout: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrag: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrop: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragstart: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragend: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchstart: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchmove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchend: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchcancel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        oncontextmenu: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onwheel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        class: string;
+        style: string;
         cursor: import("./types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
     }>> & {
         data?: Datum[] | undefined;

package/dist/core/Plot.svelte

@@ -69,6 +69,7 @@
         numberFormat: {
             style: 'decimal',
             // notation: 'compact',
+            useGrouping: 'min2',
             compactDisplay: 'short'
         },
         markerDotRadius: 3,

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,8 +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<T>(datum: T, options: Channels<T>): true | T | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter<T>(datum: T, options: Channels<T>): 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/resolve.js

@@ -11,7 +11,7 @@ export function resolveProp(accessor, datum, _defaultValue = null) {
         // so we're passing the original value to accessor functions instead of our wrapped record
         return datum == null
             ? accessor()
-            : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum, datum[INDEX]);
+            : accessor(datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
     }
     else if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
         datum &&

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.d.ts

@@ -1,14 +1,17 @@
 import { type CurveFactory } from 'd3-shape';
+import callWithProps from '../helpers/callWithProps.js';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<{
-        filter?: ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
+        filter: ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
         fx: ChannelAccessor<Datum>;
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
+        dodgeX: callWithProps;
+        dodgeY: callWithProps;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         sort: {
@@ -29,37 +32,38 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         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>;
-        class: string | null;
+        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;
+        style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
     }> & LinkableMarkProps<Datum> & {
         data: Datum[];

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

@@ -1,12 +1,15 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
-        facet?: "auto" | "include" | "exclude";
+        filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
+        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: renameChannels;
+        dodgeY: renameChannels;
         fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         sort: {
@@ -27,37 +30,38 @@ declare class __sveltets_Render<Datum extends DataRow> {
         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>;
-        class: string | null;
+        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;
+        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>[];
@@ -71,7 +75,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

@@ -10,9 +10,10 @@
     import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackY } from '../transforms/stack.js';
-    import { recordizeY } from '../transforms/recordize.js';
+    import { RAW_VALUE, recordizeY } from '../transforms/recordize.js';
     import type { ChannelAccessor, DataRow, PlotDefaults } from '../types/index.js';
     import { getContext, type Component, type ComponentProps } from 'svelte';
+    import { area } from 'd3-shape';
 
     let markProps: AreaYMarkProps = $props();