svelteplot 0.3.10 → 0.3.11-pr-153.1

package/dist/marks/HTMLTooltip.svelte

@@ -8,6 +8,8 @@
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         r?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         children: Snippet<[{ datum: Datum }]>;
     }
     import { getContext, type Snippet } from 'svelte';
@@ -19,18 +21,33 @@
     import { resolveChannel } from '../helpers/resolve.js';
     import { quadtree } from 'd3-quadtree';
     import { projectX, projectY } from '../helpers/scales.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
 
-    let { data, x, y, r, children }: HTMLTooltipMarkProps = $props();
+    let { data, x, y, r, fx, fy, children }: HTMLTooltipMarkProps = $props();
 
     let datum = $state(false);
     let tooltipX = $state();
     let tooltipY = $state();
 
+    let facetOffsetX = $state(0);
+    let facetOffsetY = $state(0);
+
     function onPointerMove(evt: MouseEvent) {
         const plotRect = plot.body.getBoundingClientRect();
-        let relativeX = evt.clientX - plotRect.left;
-        let relativeY = evt.clientY - plotRect.top;
-        const pt = tree.find(relativeX, relativeY, 25);
+        let facetEl = evt.target as SVGElement;
+        while (facetEl && !facetEl.classList.contains('facet')) {
+            facetEl = facetEl.parentElement;
+        }
+        const facetIndex = +(facetEl.dataset?.facet ?? 0);
+        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+
+        facetOffsetX = facetRect.left - plotRect.left - plot.options.marginLeft;
+        facetOffsetY = facetRect.top - plotRect.top - plot.options.marginTop;
+
+        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
+        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+
+        const pt = trees[facetIndex].find(relativeX, relativeY, 25);
         if (pt) {
             tooltipX = resolveChannel('x', pt, { x, y, r });
             tooltipY = resolveChannel('y', pt, { x, y, r });
@@ -54,18 +71,26 @@
         };
     });
 
-    let tree = $derived(
-        quadtree()
-            .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
-            .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
-            .addAll(data)
+    const groups = $derived.by(() => {
+        const groups: Datum[][] = [];
+        groupFacetsAndZ(data, { fx, fy }, (d) => groups.push(d));
+        return groups;
+    });
+
+    const trees = $derived(
+        groups.map((items) =>
+            quadtree()
+                .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
+                .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
+                .addAll(items)
+        )
     );
 </script>
 
 <div
     class={['tooltip', { hide: !datum }]}
-    style:left="{tooltipX ? projectX('x', plot.scales, tooltipX) : 0}px"
-    style:top="{tooltipY ? projectY('y', plot.scales, tooltipY) : 0}px">
+    style:left="{tooltipX ? facetOffsetX + projectX('x', plot.scales, tooltipX) : 0}px"
+    style:top="{tooltipY ? facetOffsetY + projectY('y', plot.scales, tooltipY) : 0}px">
     <div class="tooltip-body">
         {@render children({ datum })}
     </div>
@@ -77,9 +102,10 @@
         background: var(--svelteplot-tooltip-bg);
         border: 1px solid #ccc;
         border-color: var(--svelteplot-tooltip-border);
-        font-size: 13px;
+        font-size: 12px;
         padding: 1ex 1em;
         border-radius: 3px;
+        line-height: 1.2;
         box-shadow:
             rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
             rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

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

@@ -6,6 +6,8 @@ declare class __sveltets_Render<Datum = DataRow> {
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         r?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         children: Snippet<[{
             datum: Datum;
         }]>;

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

@@ -14,7 +14,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
+        } | ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | ConstantAccessor<import("../types/data.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         outlineStrokeOpacity?: number;
         curve?: CurveName | CurveFactory | "auto";
         tension?: number;
-        sort?: ConstantAccessor<RawValue, Datum> | {
+        sort?: ConstantAccessor<RawValue, Datum_1> | {
             channel: "stroke" | "fill";
         };
         text?: ConstantAccessor<string, Datum>;

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

@@ -1,3 +1,4 @@
+import { recordizeX } from '../index.js';
 import type { DataRow } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<import("../types").MarkerOptions & Partial<{
@@ -69,7 +70,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         outlineStrokeOpacity?: number;
         curve?: import("../types").CurveName | import("d3-shape").CurveFactory | "auto";
         tension?: number;
-        sort?: import("../types").ConstantAccessor<import("../types").RawValue, import("../types").DataRecord> | {
+        sort?: import("../types").ConstantAccessor<recordizeX, Datum_1> | {
             channel: "stroke" | "fill";
         };
         text?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;

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

@@ -1,3 +1,4 @@
+import { recordizeY } from '../index.js';
 import type { DataRow } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<import("../types").MarkerOptions & Partial<{
@@ -69,7 +70,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         outlineStrokeOpacity?: number;
         curve?: import("../types").CurveName | import("d3-shape").CurveFactory | "auto";
         tension?: number;
-        sort?: import("../types").ConstantAccessor<import("../types").RawValue, import("../types").DataRecord> | {
+        sort?: import("../types").ConstantAccessor<recordizeY, Datum_1> | {
             channel: "stroke" | "fill";
         };
         text?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;

package/dist/marks/Pointer.svelte

@@ -1,14 +1,21 @@
 <script lang="ts" generics="Datum extends DataRow">
     interface PointerMarkProps {
         data: Datum[];
-        children: Snippet<[{ data: Datum[] }]>;
+        children?: Snippet<[{ data: Datum[] }]>;
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         z?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points
          */
         maxDistance?: number;
+        /**
+         * tolerance for considering points as "the same" when sharing x or y values
+         * defaults to 0 pixel
+         */
+        tolerance?: number;
         /**
          * called whenever the selection changes
          * @param data
@@ -24,10 +31,14 @@
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
+    const POINTER_X = Symbol('pointerX');
+    const POINTER_Y = Symbol('pointerY');
+
     let markProps: PointerMarkProps = $props();
 
     const DEFAULTS = {
@@ -40,7 +51,10 @@
         x,
         y,
         z,
+        fx,
+        fy,
         maxDistance = 15,
+        tolerance = Number.NEGATIVE_INFINITY,
         onupdate = null
     }: PointerMarkProps = $derived({
         ...DEFAULTS,
@@ -49,27 +63,21 @@
 
     let selectedData = $state([]);
 
-    function onMouseMove(evt: MouseEvent) {
-        updateSelection(evt.layerX, evt.layerY);
-    }
-
-    function onTouchMove(evt: TouchEvent) {
-        if (evt.touches) {
-            const rect = (evt.target as HTMLElement).getBoundingClientRect();
-            const pageTop = window.scrollY || document.documentElement.scrollTop;
-            const ox = rect.left;
-            const oy = rect.top + pageTop;
-
-            const touch = evt.touches[0] || evt.changedTouches[0];
-            if (touch) {
-                const ex = touch.pageX - ox;
-                const ey = touch.pageY - oy;
-                updateSelection(ex, ey);
-            }
+    function onPointerMove(evt: MouseEvent) {
+        let facetEl = evt.target as SVGElement;
+        while (facetEl && !facetEl.classList.contains('facet')) {
+            facetEl = facetEl.parentElement;
         }
+        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+
+        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
+        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+
+        // console.log({ relativeX, relativeY }, evt);
+        updateSelection(relativeX, relativeY);
     }
 
-    function onMouseLeave() {
+    function onPointerLeave() {
         selectedData = [];
         if (onupdate) onupdate(selectedData);
     }
@@ -79,31 +87,44 @@
         const points = trees.map((tree) =>
             tree.find(x != null ? ex : 0, y != null ? ey : 0, maxDistance)
         );
-        selectedData = points.filter((d) => d != null);
+        // also include other points that share the same x or y value
+        const otherPoints = trees.flatMap((tree, i) => {
+            return tree
+                .data()
+                .filter((d) => d !== points[i])
+                .filter(
+                    (d) =>
+                        (!isFinite(d[POINTER_X]) ||
+                            Math.abs(d[POINTER_X] - points[i]?.[POINTER_X]) < tolerance) &&
+                        (!isFinite(d[POINTER_Y]) ||
+                            Math.abs(d[POINTER_Y] - points[i]?.[POINTER_Y]) < tolerance)
+                );
+        });
+        selectedData = [...points, ...otherPoints].filter((d) => d != null);
         if (onupdate) onupdate(selectedData);
     }
 
     $effect(() => {
-        plot.body?.addEventListener('mousemove', onMouseMove);
-        plot.body?.addEventListener('mouseleave', onMouseLeave);
-        plot.body?.addEventListener('touchmove', onTouchMove);
+        plot.body?.addEventListener('pointermove', onPointerMove);
+        plot.body?.addEventListener('pointerleave', onPointerLeave);
 
         return () => {
-            plot.body?.removeEventListener('mousemove', onMouseMove);
-            plot.body?.removeEventListener('mouseleave', onMouseLeave);
-            plot.body?.removeEventListener('touchmove', onTouchMove);
+            plot.body?.removeEventListener('pointermove', onPointerMove);
+            plot.body?.removeEventListener('pointerleave', onPointerLeave);
         };
     });
 
-    const groups = $derived(
-        z != null ? d3Groups(data, (d) => resolveChannel('z', d, { x, z })) : [[null, data]]
-    );
+    const groups = $derived.by(() => {
+        const groups = [];
+        groupFacetsAndZ(data, { x, y, z, fx, fy }, (d) => groups.push(d));
+        return groups;
+    });
 
     const trees = $derived(
-        groups.map(([, items]) =>
+        groups.map((items) =>
             quadtree()
-                .x(x != null ? (d) => d.__pointerX : () => 0)
-                .y(y != null ? (d) => d.__pointerY : () => 0)
+                .x(x != null ? (d) => d[POINTER_X] : () => 0)
+                .y(y != null ? (d) => d[POINTER_Y] : () => 0)
                 .addAll(
                     items?.map((d) => {
                         const [px, py] = projectXY(
@@ -115,8 +136,8 @@
                         );
                         return {
                             ...(isDataRecord(d) ? d : { [RAW_VALUE]: d }),
-                            __pointerX: px,
-                            __pointerY: py
+                            [POINTER_X]: px,
+                            [POINTER_Y]: py
                         };
                     }) ?? []
                 )

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

@@ -3,16 +3,23 @@ import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): {
         data: Datum[];
-        children: Snippet<[{
+        children?: Snippet<[{
             data: Datum[];
-        }]>;
+        }]> | undefined;
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         z?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points
          */
         maxDistance?: number;
+        /**
+         * tolerance for considering points as "the same" when sharing x or y values
+         * defaults to 0 pixel
+         */
+        tolerance?: number;
         /**
          * called whenever the selection changes
          * @param data

package/dist/transforms/bollinger.d.ts

@@ -11,69 +11,4 @@ export type BollingerOptions = {
 };
 export declare function bollingerX(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
 export declare function bollingerY(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
-export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, DataRecord>;
-    facet?: "auto" | "include" | "exclude" | undefined;
-    fx?: import("../types/index.js").ChannelAccessor<DataRecord>;
-    fy?: import("../types/index.js").ChannelAccessor<DataRecord>;
-    dx?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    dy?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    fill?: import("../types/index.js").ChannelAccessor<DataRecord>;
-    fillOpacity?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    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, DataRecord>;
-    stroke?: import("../types/index.js").ChannelAccessor<DataRecord>;
-    strokeWidth?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, DataRecord>;
-    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, DataRecord>;
-    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    opacity?: import("../types/index.js").ChannelAccessor<DataRecord>;
-    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, DataRecord>;
-    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, DataRecord>;
-    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, DataRecord>;
-    clipPath?: string | undefined;
-    imageFilter?: import("../types/index.js").ConstantAccessor<string, DataRecord>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, DataRecord>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, DataRecord>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, DataRecord>;
-    data: {
-        __x: import("../types/index.js").RawValue;
-        __lo: number;
-        __avg: number;
-        __hi: number;
-    }[];
-};
+export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): any;

package/dist/transforms/group.d.ts

@@ -38,29 +38,21 @@ type GroupZOptions = GroupXOptions | GroupYOptions;
  * groups the dataset by x and y channel and optionally reduces the group items
  * to output channels fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: DataRecord[];
-};
+export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the x channel and optionally reduces the group items
  * to output channels y, y1, y2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: DataRecord[];
-};
+export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the y channel and optionally reduces the group items
  * to output channels x, x1, x2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): {
-    data: DataRecord[];
-};
+export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): any;
 /**
  * groups the dataset by the z channel and optionally reduces the group items
  * to output channels x, x1, x2, y, y1, y2, fill, stroke, r, opacity, fillOpacity,
  * or strokeOpacity
  */
-export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): {
-    data: DataRecord[];
-};
+export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): any;
 export {};

package/dist/transforms/index.d.ts

@@ -12,5 +12,5 @@ export { renameChannels, replaceChannels } from './rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';
 export { shiftX, shiftY } from './shift.js';
 export { sort, shuffle, reverse } from './sort.js';
-export { stackX, stackY } from './stack.js';
+export { stackX, stackY, stackMarimekko } from './stack.js';
 export { windowX, windowY } from './window.js';

package/dist/transforms/index.js

@@ -12,5 +12,5 @@ export { renameChannels, replaceChannels } from './rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';
 export { shiftX, shiftY } from './shift.js';
 export { sort, shuffle, reverse } from './sort.js';
-export { stackX, stackY } from './stack.js';
+export { stackX, stackY, stackMarimekko } from './stack.js';
 export { windowX, windowY } from './window.js';

package/dist/transforms/interval.d.ts

@@ -1,127 +1,7 @@
 import type { PlotState, TransformArg } from '../types/index.js';
 export declare function intervalX<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
-    facet?: "auto" | "include" | "exclude" | undefined;
-    fx?: import("../types/index.js").ChannelAccessor<T>;
-    fy?: import("../types/index.js").ChannelAccessor<T>;
-    dx?: import("../types/index.js").ConstantAccessor<number, T>;
-    dy?: import("../types/index.js").ConstantAccessor<number, T>;
-    fill?: import("../types/index.js").ChannelAccessor<T>;
-    fillOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    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, T>;
-    stroke?: import("../types/index.js").ChannelAccessor<T>;
-    strokeWidth?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, T>;
-    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, T>;
-    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, T>;
-    opacity?: import("../types/index.js").ChannelAccessor<T>;
-    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, T>;
-    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, T>;
-    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, T>;
-    clipPath?: string | undefined;
-    imageFilter?: import("../types/index.js").ConstantAccessor<string, T>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, T>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, T>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
-    data: T[];
-};
+}): any;
 export declare function intervalY<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
-    facet?: "auto" | "include" | "exclude" | undefined;
-    fx?: import("../types/index.js").ChannelAccessor<T>;
-    fy?: import("../types/index.js").ChannelAccessor<T>;
-    dx?: import("../types/index.js").ConstantAccessor<number, T>;
-    dy?: import("../types/index.js").ConstantAccessor<number, T>;
-    fill?: import("../types/index.js").ChannelAccessor<T>;
-    fillOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    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, T>;
-    stroke?: import("../types/index.js").ChannelAccessor<T>;
-    strokeWidth?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, T>;
-    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, T>;
-    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, T>;
-    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, T>;
-    opacity?: import("../types/index.js").ChannelAccessor<T>;
-    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, T>;
-    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, T>;
-    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, T>;
-    clipPath?: string | undefined;
-    imageFilter?: import("../types/index.js").ConstantAccessor<string, T>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, T>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, T>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
-    data: T[];
-};
+}): any;