svelteplot 0.5.0 → 0.5.1-pr-238.1

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

@@ -1,3 +1,4 @@
+import { recordizeY } from '../transforms/recordize.js';
 import type { DataRecord, ConstantAccessor, ChannelAccessor } from '../types/index.js';
 declare class __sveltets_Render<Datum = DataRecord> {
     props(): Omit<Partial<{
@@ -7,14 +8,14 @@ declare class __sveltets_Render<Datum = DataRecord> {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import { getPlotDefaults } from '../hooks/plotDefaults.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Omit<Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
@@ -7,14 +8,14 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         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;
+        dodgeX: getPlotDefaults;
+        dodgeY: getPlotDefaults;
         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) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | 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>>;
@@ -73,7 +74,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         shape?: "arrow" | "spike" | "arrow-filled" | import("./Vector.svelte").ShapeRenderer;
         children?: import("svelte").Snippet;
         canvas?: boolean;
-    }, "data" | "r" | "length" | "x" | "y" | "rotate"> & {
+    }, "r" | "length" | "x" | "y" | "data" | "rotate"> & {
         data: Datum[];
         x: ChannelAccessor<Datum>;
         y: ChannelAccessor<Datum>;

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

@@ -1,6 +1,7 @@
 import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
 import type { DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+import { sort } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -9,14 +10,14 @@ declare class __sveltets_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: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -75,7 +76,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          * the font size of the text
          */
         fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
         fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
         fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;
@@ -100,7 +101,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          * @default 1.2
          */
         lineHeight?: ConstantAccessor<number, Datum>;
-        frameAnchor?: ConstantAccessor<"left" | "right" | "middle" | "top" | "bottom" | "top-left" | "bottom-left" | "top-right" | "bottom-right", Datum>;
+        frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "middle" | "top-left" | "bottom-left" | "top-right" | "bottom-right", Datum>;
         /**
          * rotate text by angle in degrees
          */

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeX } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare class __sveltets_Render<Datum extends DataRow> {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeX;
+        dodgeY: recordizeX;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeY } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare class __sveltets_Render<Datum extends DataRow> {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -4,6 +4,7 @@ export type ShapeRenderer = {
 };
 import type { DataRecord, ChannelAccessor } from '../types/index.js';
 import { type Snippet } from 'svelte';
+import { sort } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
@@ -12,14 +13,14 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        dodgeX: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        } | ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -152,7 +152,7 @@
 </script>
 
 <g class="axis-x">
-    {#each positionedTicks as tick, t (t)}
+    {#each positionedTicks as tick, t (tick[RAW_VALUE])}
         {#if testFilter(tick, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick)}
             {@const tickFontSize_ = +resolveProp(tickFontSize, tick, 10)}

package/dist/marks/helpers/BaseAxisY.svelte

@@ -154,7 +154,7 @@
 </script>
 
 <g class="axis-y">
-    {#each positionedTicks as tick, t (t)}
+    {#each positionedTicks as tick, t (tick[RAW_VALUE])}
         {#if testFilter(tick, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick)}
             {@const [textStyle, textClass] = resolveStyles(

package/dist/marks/helpers/MarkerPath.svelte.d.ts

@@ -1,168 +1,6 @@
-import { type MarkerShape } from './Marker.svelte';
-import type { ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types/index.js';
+import type { DataRecord } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Partial<{
-        filter: ConstantAccessor<boolean, Datum>;
-        facet: "auto" | "include" | "exclude";
-        fx: import("../../types/index.js").ChannelAccessor<Datum>;
-        fy: import("../../types/index.js").ChannelAccessor<Datum>;
-        dx: ConstantAccessor<number, Datum>;
-        dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../../transforms/dodge").DodgeYOptions;
-        fill: import("../../types/index.js").ChannelAccessor<Datum>;
-        fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../../types/index.js").RawValue, b: import("../../types/index.js").RawValue) => number) | {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../../types/index.js").RawValue, Datum>;
-        stroke: import("../../types/index.js").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: import("../../types/index.js").ChannelAccessor<Datum>;
-        strokeDasharray: ConstantAccessor<string, Datum>;
-        strokeDashoffset: ConstantAccessor<number, Datum>;
-        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        class: string;
-        style: string;
-        cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        /**
-         * the datum associated with this path, usually the first
-         * element of the data array group
-         */
-        datum: Datum;
-        /**
-         * the marker shape to use at the start of the path, defaults to
-         * circle
-         */
-        markerStart?: boolean | MarkerShape;
-        /**
-         * the marker shape to use at the middle of the path, defaults to circle
-         */
-        markerMid?: boolean | MarkerShape;
-        /**
-         * the marker shape to use at the end of the path, defaults to circle
-         */
-        markerEnd?: boolean | MarkerShape;
-        /**
-         * shorthand for setting all markers
-         */
-        marker?: boolean | MarkerShape;
-        /**
-         * path string
-         */
-        d: string;
-        style: string;
-        startOffset: string;
-        textStyle: string;
-        textStyleClass?: string | null;
-        text: string;
-        transform: string;
-        color: string;
-        strokeWidth: ConstantAccessor<number>;
-        mark: Mark<Partial<{
-            filter: ConstantAccessor<boolean, Datum>;
-            facet: "auto" | "include" | "exclude";
-            fx: import("../../types/index.js").ChannelAccessor<Datum>;
-            fy: import("../../types/index.js").ChannelAccessor<Datum>;
-            dx: ConstantAccessor<number, Datum>;
-            dy: ConstantAccessor<number, Datum>;
-            dodgeX: import("../../transforms/dodge").DodgeXOptions;
-            dodgeY: import("../../transforms/dodge").DodgeYOptions;
-            fill: import("../../types/index.js").ChannelAccessor<Datum>;
-            fillOpacity: ConstantAccessor<number, Datum>;
-            sort: ((a: import("../../types/index.js").RawValue, b: import("../../types/index.js").RawValue) => number) | {
-                channel: string;
-                order?: "ascending" | "descending";
-            } | ConstantAccessor<import("../../types/index.js").RawValue, Datum>;
-            stroke: import("../../types/index.js").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: import("../../types/index.js").ChannelAccessor<Datum>;
-            strokeDasharray: ConstantAccessor<string, Datum>;
-            strokeDashoffset: ConstantAccessor<number, Datum>;
-            mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-            clipPath: 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>;
-            class: string;
-            style: string;
-            cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-        }>>;
-        scales: PlotScales;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/marks/helpers/RectPath.svelte.d.ts

@@ -1,77 +1,15 @@
-import type { BaseRectMarkProps } from '../../types/mark.js';
+import type { BaseMarkProps, BaseRectMarkProps } from '../../types/mark.js';
 import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
 import type { UsedScales } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): {
-        datum: ScaledDataRecord<Datum>;
+        datum: ScaledDataRecord<Datum_1>;
         class: string | null;
         x: number;
         y: number;
         width: number;
         height: number;
-        options: BaseRectMarkProps<Datum> & Partial<{
-            filter: import("../../types/index.js").ConstantAccessor<boolean, Datum>;
-            facet: "auto" | "include" | "exclude";
-            fx: import("../../types/index.js").ChannelAccessor<Datum>;
-            fy: import("../../types/index.js").ChannelAccessor<Datum>;
-            dx: import("../../types/index.js").ConstantAccessor<number, Datum>;
-            dy: import("../../types/index.js").ConstantAccessor<number, Datum>;
-            dodgeX: import("../../transforms/dodge.js").DodgeXOptions;
-            dodgeY: import("../../transforms/dodge.js").DodgeYOptions;
-            fill: import("../../types/index.js").ChannelAccessor<Datum>;
-            fillOpacity: import("../../types/index.js").ConstantAccessor<number, Datum>;
-            sort: ((a: import("../../types/data.js").RawValue, b: import("../../types/data.js").RawValue) => number) | {
-                channel: string;
-                order?: "ascending" | "descending";
-            } | import("../../types/index.js").ConstantAccessor<import("../../types/data.js").RawValue, Datum>;
-            stroke: import("../../types/index.js").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: import("../../types/index.js").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.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>;
-        }>;
+        options: BaseRectMarkProps<Datum_1> & BaseMarkProps<Datum_1>;
         /**
          * By default, the `inset` property is applied to all four insets. Mark components
          * can tweak this behavior for insetTop and insetBottom by setting the

package/dist/transforms/bin.js

@@ -4,6 +4,14 @@ import { bin as d3Bin, extent, thresholdFreedmanDiaconis, thresholdScott, thresh
 import { reduceOutputs } from '../helpers/reduce.js';
 import { groupFacetsAndZ } from '../helpers/group.js';
 import { isDate } from '../helpers/typeChecks.js';
+const CHANNELS = {
+    x: Symbol('x'),
+    x1: Symbol('x1'),
+    x2: Symbol('x2'),
+    y: Symbol('y'),
+    y1: Symbol('y1'),
+    y2: Symbol('y2')
+};
 const ThresholdGenerators = {
     auto: thresholdScott,
     scott: thresholdScott,
@@ -101,11 +109,12 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     // channels.x is the input
     binX.value((d) => resolveChannel('x', d, channels));
     binY.value((d) => resolveChannel('y', d, channels));
+    let yThresholds = [];
     if (interval) {
         const [xlo, xhi] = extent(data.map((d) => resolveChannel('x', d, channels)));
         const [ylo, yhi] = extent(data.map((d) => resolveChannel('y', d, channels)));
         binX.thresholds(maybeInterval(interval).range(xlo, xhi));
-        binY.thresholds(maybeInterval(interval).range(ylo, yhi));
+        binY.thresholds((yThresholds = maybeInterval(interval).range(ylo, yhi)));
     }
     else if (thresholds) {
         // when binning in x and y, we need to ensure we are using consistent thresholds
@@ -114,7 +123,7 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
             : thresholds;
         binX.thresholds(t);
         binY.thresholds(t);
-        const yThresholds = binY(data)
+        yThresholds = binY(data)
             .slice(1)
             .map((g) => g.x0);
         binY.thresholds(yThresholds);
@@ -124,12 +133,12 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     let newChannels = {
         inset: 0.5,
         ...channels,
-        x: '__x',
-        x1: '__x1',
-        x2: '__x2',
-        y: '__y',
-        y1: '__y1',
-        y2: '__y2',
+        x: CHANNELS.x,
+        x1: CHANNELS.x1,
+        x2: CHANNELS.x2,
+        y: CHANNELS.y,
+        y1: CHANNELS.y1,
+        y2: CHANNELS.y2,
         __x_origField: typeof channels.x === 'string' ? channels.x : null,
         __y_origField: typeof channels.y === 'string' ? channels.y : null
     };
@@ -141,20 +150,30 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     const newData = [];
     binX(data).forEach((groupX) => {
         const newRecordBaseX = {
-            __x1: groupX.x0,
-            __x2: groupX.x1,
-            __x: isDate(groupX.x0)
+            [CHANNELS.x1]: groupX.x0,
+            [CHANNELS.x2]: groupX.x1,
+            [CHANNELS.x]: isDate(groupX.x0)
                 ? new Date(Math.round((groupX.x0.getTime() + groupX.x1.getTime()) * 0.5))
                 : (groupX.x0 + groupX.x1) * 0.5
         };
-        binY(groupX).forEach((groupY) => {
+        const [ylo, yhi] = extent(groupX.map((d) => resolveChannel('y', d, channels)));
+        const tExtentLo = yThresholds.filter((d) => d < ylo).at(-1);
+        const tExtentHi = yThresholds.filter((d) => d > yhi).at(0);
+        binY(groupX).forEach((groupY, i) => {
+            if (groupY.length === 0)
+                return;
+            // The first bin.x0 is always equal to the minimum domain value,
+            // and the last bin.x1 is always equal to the maximum domain value,
+            // therefore we need to align with the thresholds
+            const y1 = groupY.x0 === ylo ? tExtentLo : groupY.x0;
+            const y2 = groupY.x1 === yhi ? tExtentHi : groupY.x1;
             const newRecordBaseY = {
                 ...newRecordBaseX,
-                __y1: groupY.x0,
-                __y2: groupY.x1,
-                __y: isDate(groupY.x0)
-                    ? new Date(Math.round((groupY.x0.getTime() + groupY.x1.getTime()) * 0.5))
-                    : (groupY.x0 + groupY.x1) * 0.5
+                [CHANNELS.y1]: y1,
+                [CHANNELS.y2]: y2,
+                [CHANNELS.y]: isDate(y1)
+                    ? new Date(Math.round((y1.getTime() + y2.getTime()) * 0.5))
+                    : (y1 + y2) * 0.5
             };
             const newGroupChannels = groupFacetsAndZ(groupY, channels, (items, itemGroupProps) => {
                 const newRecord = {