svelteplot 0.3.11 → 0.4.0

package/dist/core/FacetGrid.svelte

@@ -59,6 +59,9 @@
     {#each fyValues as facetY, j (j)}
         <g
             class="facet"
+            data-facet-x={i}
+            data-facet-y={j}
+            data-facet={i * fyValues.length + j}
             fill="currentColor"
             style:display={emptyFacets.get(facetX)?.get(facetY) ? 'none' : 'block'}
             transform="translate({useFacetX ? facetXScale(facetX) : 0}, {useFacetY

package/dist/helpers/group.d.ts

@@ -1,6 +1,6 @@
-import type { Channels, DataRecord } from '../types/index.js';
+import type { Channels } from '../types/index.js';
 /**
  * Groups the data by the fx, fy and z channels and calls the reduce function
  * for each group. Returns the new channels to be added in the transform.
  */
-export declare function groupFacetsAndZ(items: DataRecord[], channels: Channels, reduce: (items: DataRecord[]) => any): any;
+export declare function groupFacetsAndZ<T>(items: T[], channels: Channels<T>, reduce: (items: T[]) => any): any;

package/dist/helpers/index.d.ts

@@ -1,18 +1,15 @@
-import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '../types/index.js';
+import type { ChannelName, Channels, DataRecord, RawValue } from '../types/index.js';
 import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
 export declare function coalesce(...args: (RawValue | undefined | null)[]): RawValue | null;
-export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | symbol | Date | {
-    value: import("../types/index.js").ChannelValue<Record<string | symbol, RawValue>>;
-    scale: boolean | null;
-} | null;
+export declare function testFilter<T>(datum: T, options: Channels<T>): true | T | null;
 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;
 export declare function maybeData(data: DataRecord[]): DataRecord[];
-export declare function isObject(option: object | RawValue): option is object;
+export declare function isObject<T>(option: object | T): option is object;
 export declare function maybeNumber(value: RawValue | null): number | null;
 export declare const constant: <T>(x: T) => () => T;
 export declare const POSITION_CHANNELS: Set<ChannelName>;

package/dist/helpers/index.js

@@ -14,7 +14,7 @@ export function coalesce(...args) {
 }
 export function testFilter(datum, options) {
     return (options.filter == null ||
-        resolveProp(options.filter, datum?.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
+        resolveProp(options.filter, isObject(datum) && datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
 }
 export function randomId() {
     return Math.ceil(1e9 + Math.random() * 1e9).toString(36);

package/dist/marks/GridX.svelte

@@ -9,7 +9,7 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types/index.js';
-    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
@@ -68,6 +68,8 @@
                         (plot.scales.x.type === 'band' ? plot.scales.x.fn.bandwidth() * 0.5 : 0)}
                     {@const y1_ = resolveChannel('y1', tick, options)}
                     {@const y2_ = resolveChannel('y2', tick, options)}
+                    {@const dx = +resolveProp(options?.dx, tick, 0)}
+                    {@const dy = +resolveProp(options?.dy, tick, 0)}
                     {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
                     {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
                     {@const [style, styleClass] = resolveStyles(
@@ -80,7 +82,7 @@
                     )}
                     <line
                         class={styleClass}
-                        transform="translate({x},{plot.options.marginTop})"
+                        transform="translate({x + dx},{plot.options.marginTop + dy})"
                         {style}
                         {y1}
                         {y2} />

package/dist/marks/GridY.svelte

@@ -9,7 +9,7 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types/index.js';
-    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
@@ -70,6 +70,8 @@
                     {@const x2_ = resolveChannel('x2', tick, options)}
                     {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
                     {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    {@const dx = +resolveProp(options?.dx, tick, 0)}
+                    {@const dy = +resolveProp(options?.dy, tick, 0)}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         { datum: { [RAW_VALUE]: tick } },
@@ -81,7 +83,7 @@
                     <line
                         {style}
                         class={styleClass}
-                        transform="translate({plot.options.marginLeft},{y})"
+                        transform="translate({plot.options.marginLeft + dx},{y + dy})"
                         {x1}
                         {x2} />
                 {/if}

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/Text.svelte

@@ -49,6 +49,10 @@
             | 'bottom-right',
             Datum
         >;
+        /**
+         * rotate text by angle in degrees
+         */
+        rotate?: ConstantAccessor<number, Datum>;
     }
 
     import { getContext, type Snippet } from 'svelte';
@@ -59,14 +63,11 @@
         ConstantAccessor,
         ChannelAccessor,
         PlotDefaults,
-        TransformArg,
-        RawValue,
         LinkableMarkProps
     } from '../types/index.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import Mark from '../Mark.svelte';
     import { sort } from '../index.js';
-    import Anchor from './helpers/Anchor.svelte';
 
     import MultilineText from './helpers/MultilineText.svelte';
 
@@ -76,6 +77,7 @@
         strokeWidth: 1.6,
         frameAnchor: 'center',
         lineHeight: 1.1,
+        rotate: 0,
         ...getContext<PlotDefaults>('svelteplot/_defaults').text
     };
 

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

@@ -1,6 +1,6 @@
 import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
-import type { DataRecord, ConstantAccessor, ChannelAccessor, RawValue, LinkableMarkProps } from '../types/index.js';
+import type { DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<{
         filter?: ConstantAccessor<boolean, Datum>;
@@ -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").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -94,6 +94,10 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          */
         lineHeight?: ConstantAccessor<number, Datum>;
         frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "top-left" | "bottom-left" | "top-right" | "bottom-right", Datum>;
+        /**
+         * rotate text by angle in degrees
+         */
+        rotate?: ConstantAccessor<number, Datum>;
     };
     events(): {};
     slots(): {};

package/dist/marks/helpers/MultilineText.svelte

@@ -116,6 +116,8 @@
     const lineHeight = $derived(
         textLines.length > 1 ? (resolveProp(args.lineHeight, d.datum) ?? 1.2) : 0
     );
+
+    const rotate = $derived(+resolveProp(args.rotate, d.datum, 0));
 </script>
 
 {#if textLines.length > 1}
@@ -134,7 +136,7 @@
                       : 0) *
                     computedFontSize *
                     lineHeight
-        )})"
+        )}) rotate({rotate})"
         >{#each textLines as line, l (l)}<tspan
                 x="0"
                 dy={l ? computedFontSize * lineHeight : 0}
@@ -146,7 +148,7 @@
     <text
         class={[textClassName, styleClass]}
         dominant-baseline={LINE_ANCHOR[lineAnchor]}
-        transform="translate({Math.round(x + dx)},{Math.round(y + dy)})"
+        transform="translate({Math.round(x + dx)},{Math.round(y + dy)}) rotate({rotate})"
         {style}
         >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
 {/if}

package/dist/transforms/filter.d.ts

@@ -1,2 +1,2 @@
-import type { DataRecord, TransformArg } from '../types/index.js';
-export declare function filter({ data, ...channels }: TransformArg<DataRecord>): TransformArg<DataRecord>;
+import type { TransformArg } from '../types/index.js';
+export declare function filter<T>({ data, ...channels }: TransformArg<T>): TransformArg<T>;

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, stackMosaicX, stackMosaicY } 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, stackMosaicX, stackMosaicY } from './stack.js';
 export { windowX, windowY } from './window.js';

package/dist/transforms/map.d.ts

@@ -1,184 +1,4 @@
-import type { TransformArg, MapOptions, MapMethod, DataRecord } from '../types/index.js';
-export declare function map<T>(args: TransformArg<T>, options: MapOptions): {
-    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: DataRecord[];
-};
-export declare function mapX<T>(args: TransformArg<T>, mapper: MapMethod): {
-    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: DataRecord[];
-};
-export declare function mapY<T>(args: TransformArg<T>, mapper: MapMethod): {
-    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: DataRecord[];
-};
+import type { TransformArg, MapOptions, MapMethod } from '../types/index.js';
+export declare function map<T>(args: TransformArg<T>, options: MapOptions): any;
+export declare function mapX<T>(args: TransformArg<T>, mapper: MapMethod): any;
+export declare function mapY<T>(args: TransformArg<T>, mapper: MapMethod): any;

package/dist/transforms/normalize.d.ts

@@ -1,125 +1,5 @@
-import type { TransformArg, RawValue, MapIndexObject } from '../types/index.js';
+import type { TransformArg, MapIndexObject } from '../types/index.js';
 type NormalizeBasis = 'deviation' | 'first' | 'last' | 'min' | 'max' | 'mean' | 'median' | 'sum' | 'extent' | MapIndexObject;
-export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): {
-    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: RawValue, b: RawValue) => number) | import("../types/index.js").ConstantAccessor<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.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
-    data: import("../types/index.js").DataRecord[];
-};
-export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): {
-    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: RawValue, b: RawValue) => number) | import("../types/index.js").ConstantAccessor<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.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement> | undefined;
-    class?: string | null | undefined;
-    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
-    data: import("../types/index.js").DataRecord[];
-};
+export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
+export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
 export {};

package/dist/transforms/sort.d.ts

@@ -1,36 +1,36 @@
-import type { DataRecord, DataRow, TransformArg } from '../types/index.js';
+import type { DataRow, TransformArg } from '../types/index.js';
 export declare const SORT_KEY: unique symbol;
 export declare const IS_SORTED: unique symbol;
-export declare function sort({ data, ...channels }: TransformArg<DataRecord>, options?: {
+export declare function sort<T>({ data, ...channels }: TransformArg<T>, options?: {
     reverse?: boolean;
 }): {
     [IS_SORTED]: string | number | true | symbol | Date | {
         channel: string;
         order?: "ascending" | "descending";
-    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | ((d: DataRecord) => import("../types/index.js").RawValue);
+    } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | ((d: T) => import("../types/index.js").RawValue);
     sort: null;
-    filter?: import("../types/index.js").ConstantAccessor<boolean, DataRecord>;
+    filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
     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>;
-    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>;
+    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>;
+    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, DataRecord>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, DataRecord>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, DataRecord>;
+    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;
@@ -62,37 +62,37 @@ export declare function sort({ data, ...channels }: TransformArg<DataRecord>, op
     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: {
-        ___orig___?: import("../types/index.js").RawValue | [import("../types/index.js").RawValue, import("../types/index.js").RawValue];
-    }[];
+    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
+    data: T[] | Omit<T & {
+        [SORT_KEY]: number | Date | string;
+    }, typeof SORT_KEY>[];
 } | {
-    filter?: import("../types/index.js").ConstantAccessor<boolean, DataRecord>;
+    filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
     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>;
+    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, 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>;
+    } | ((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, DataRecord>;
-    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, DataRecord>;
-    paintOrder?: import("../types/index.js").ConstantAccessor<string, DataRecord>;
+    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;
@@ -124,8 +124,8 @@ export declare function sort({ data, ...channels }: TransformArg<DataRecord>, op
     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: DataRecord[];
+    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, T>;
+    data: T[];
 };
 /**
  * shuffles the data row order

package/dist/transforms/stack.d.ts

@@ -1,4 +1,4 @@
-import type { TransformArg } from '../types/index.js';
+import type { ChannelAccessor, TransformArg } from '../types/index.js';
 export type StackOrder = 'none' | 'appearance' | 'inside-out' | 'sum';
 export type StackOffset = 'none' | 'wiggle' | 'center' | 'normalize' | 'diverging';
 export type StackOptions = {
@@ -8,3 +8,25 @@ export type StackOptions = {
 };
 export declare function stackY<T>({ data, ...channels }: T, opts?: Partial<StackOptions>): T;
 export declare function stackX({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export declare function stackMosaicX<T>(args: any, opts: any): {
+    fx: ChannelAccessor<unknown>;
+    fy: ChannelAccessor<unknown>;
+    data: unknown[];
+    x: symbol;
+    x1: symbol;
+    x2: symbol;
+    y: symbol;
+    y1: symbol;
+    y2: symbol;
+};
+export declare function stackMosaicY<T>(args: any, opts: any): {
+    fx: ChannelAccessor<unknown>;
+    fy: ChannelAccessor<unknown>;
+    data: unknown[];
+    x: symbol;
+    x1: symbol;
+    x2: symbol;
+    y: symbol;
+    y1: symbol;
+    y2: symbol;
+};

package/dist/transforms/stack.js

@@ -1,7 +1,10 @@
 import isDataRecord from '../helpers/isDataRecord.js';
-import { resolveChannel } from '../helpers/resolve.js';
+import { resolveChannel, resolveProp } from '../helpers/resolve.js';
 import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone, stackOffsetDiverging } from 'd3-shape';
-import { index, union, groups as d3Groups } from 'd3-array';
+import { index, union, sum, groups as d3Groups, extent, min } from 'd3-array';
+import { groupFacetsAndZ } from '../helpers/group';
+import { filter } from './filter.js';
+import { sort } from './sort.js';
 const GROUP = Symbol('group');
 const FACET = Symbol('group');
 const DEFAULT_STACK_OPTIONS = {
@@ -110,3 +113,69 @@ function applyDefaults(opts) {
     }
     return { ...DEFAULT_STACK_OPTIONS, ...opts };
 }
+const X = Symbol('x');
+const X1 = Symbol('x1');
+const X2 = Symbol('x2');
+const Y = Symbol('y');
+const Y1 = Symbol('y1');
+const Y2 = Symbol('y2');
+function stackMosaic({ data, x, y, value, fx, fy, ...rest }, { outer, inner }, { x: xOpt, y: yOpt } = {}) {
+    const out = [];
+    const { data: filtered, ...restArgs } = sort(filter({ data, x, y, value, fx, fy, ...rest }));
+    if (!filtered)
+        throw new Error('stackMosaic: missing data');
+    if (!x)
+        throw new Error('stackMosaic: missing x channel');
+    if (!y)
+        throw new Error('stackMosaic: missing y channel');
+    if (!value)
+        throw new Error('stackMosaic: missing value channel');
+    if (min(filtered, (d) => resolveProp(d[value], d)) < 0)
+        throw new Error('stackMosaic: negative values not supported');
+    groupFacetsAndZ(filtered, restArgs, (data) => {
+        const total = sum(data, (d) => resolveProp(d[value], d));
+        let outerPos = 0;
+        const outerChannel = outer === 'x' ? x : y;
+        const innerChannel = inner === 'x' ? x : y;
+        const outerSym1 = outer === 'x' ? X1 : Y1;
+        const outerSym2 = outer === 'x' ? X2 : Y2;
+        const innerSym1 = inner === 'x' ? X1 : Y1;
+        const innerSym2 = inner === 'x' ? X2 : Y2;
+        const outerOpt = outer === 'x' ? xOpt : yOpt;
+        const innerOpt = inner === 'x' ? xOpt : yOpt;
+        const grouped = d3Groups(data, (d) => resolveProp(d[outerChannel], d));
+        const innerOrder = new Map(grouped[0][1].map((d, i) => [d[innerChannel], i]));
+        grouped.forEach(([k, items], i) => {
+            const groupValue = sum(items, (d) => resolveProp(d[value], d));
+            const o1 = outerPos, o2 = outerPos + groupValue;
+            outerPos = o2;
+            let innerPos = 0;
+            (i
+                ? items.sort((a, b) => innerOrder.get(a[innerChannel]) - innerOrder.get(b[innerChannel]))
+                : items).forEach((d) => {
+                const iv = resolveProp(d[value], d);
+                const i1 = innerPos, i2 = innerPos + iv;
+                innerPos = i2;
+                const normO1 = outerOpt?.percent ? o1 / total : o1;
+                const normO2 = outerOpt?.percent ? o2 / total : o2;
+                const normI1 = innerOpt?.percent ? i1 / groupValue : i1;
+                const normI2 = innerOpt?.percent ? i2 / groupValue : i2;
+                const result = { ...d };
+                result[outerSym1] = normO1;
+                result[outerSym2] = normO2;
+                result[innerSym1] = normI1;
+                result[innerSym2] = normI2;
+                result[X] = (result[X1] + result[X2]) / 2;
+                result[Y] = (result[Y1] + result[Y2]) / 2;
+                out.push(result);
+            });
+        });
+    });
+    return { ...rest, fx, fy, data: out, x: X, x1: X1, x2: X2, y: Y, y1: Y1, y2: Y2 };
+}
+export function stackMosaicX(args, opts) {
+    return stackMosaic(args, { outer: 'x', inner: 'y' }, opts);
+}
+export function stackMosaicY(args, opts) {
+    return stackMosaic(args, { outer: 'y', inner: 'x' }, opts);
+}

package/dist/types/channel.d.ts

@@ -1,5 +1,5 @@
 import type { ConstantAccessor, RawValue } from './index.js';
-export type Channels = Record<string, ChannelAccessor | ConstantAccessor<string | number | boolean | symbol>>;
+export type Channels<T> = Record<string, ChannelAccessor<T> | ConstantAccessor<T, string | number | boolean | symbol>>;
 export type ChannelAccessor<T = Record<string | symbol, RawValue>> = ChannelValue<T> | {
     /** the channel value */
     value: ChannelValue<T>;

package/dist/types/index.d.ts

@@ -25,11 +25,11 @@ export type MarkerOptions = {
     marker?: boolean | MarkerShape | Snippet;
 };
 export type ConstantAccessor<T, D = Record<string | symbol, RawValue>> = T | ((d: D) => T) | null | undefined;
-export type TransformArg<K> = Channels & BaseMarkProps<K> & {
-    data: K[];
+export type TransformArg<T> = Channels<T> & BaseMarkProps<T> & {
+    data: T[];
 };
-export type MapArg<K> = Channels & {
-    data: K[];
+export type MapArg<T> = Channels<T> & {
+    data: T[];
 };
 export type TransformArgsRow = Partial<Channels> & {
     data: DataRow[];

package/dist/types/scale.d.ts

@@ -21,7 +21,7 @@ export type ScaleOptions = {
      * Reverse the scale.
      */
     reverse: boolean;
-    label?: string;
+    label?: string | false;
     interval?: string | number;
     clamp: boolean;
     nice: boolean;

package/dist/ui/ExamplesGrid.svelte

@@ -1,10 +1,11 @@
 <script>
+    import { resolve } from '$app/paths';
     let { examples } = $props();
 </script>
 
 <div class="list">
     {#each examples as page, i (i)}
-        <a href={page.url}>
+        <a href={resolve(page.url)}>
             <div>
                 {#if page.screenshot}
                     <img src={page.screenshot} alt={page.title} />{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteplot",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "license": "ISC",
   "author": {
     "name": "Gregor Aisch",
@@ -36,11 +36,11 @@
   "devDependencies": {
     "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
     "@emotion/css": "^11.13.5",
-    "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/eslint-config": "^8.3.4",
-    "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/package": "^2.4.0",
+    "@sveltejs/kit": "^2.37.0",
+    "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "5.1.1",
     "@sveltepress/theme-default": "^6.0.4",
     "@sveltepress/twoslash": "^1.2.2",
@@ -61,32 +61,32 @@
     "@types/geojson": "^7946.0.16",
     "@types/topojson": "^3.2.6",
     "@types/topojson-client": "^3.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.39.0",
-    "@typescript-eslint/parser": "^8.39.0",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
+    "@typescript-eslint/parser": "^8.42.0",
     "csstype": "^3.1.3",
     "d3-dsv": "^3.0.1",
     "d3-fetch": "^3.0.1",
     "d3-force": "^3.0.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "3.11.0",
+    "eslint-plugin-svelte": "3.12.1",
     "jsdom": "^26.1.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "puppeteer": "^24.15.0",
+    "puppeteer": "^24.19.0",
     "remark-code-extra": "^1.0.1",
     "remark-code-frontmatter": "^1.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.90.0",
+    "sass": "^1.92.0",
     "svelte-check": "^4.3.1",
     "svelte-eslint-parser": "1.3.1",
-    "svelte-highlight": "^7.8.3",
+    "svelte-highlight": "^7.8.4",
     "svg-path-parser": "^1.1.0",
     "topojson-client": "^3.1.0",
     "ts-essentials": "^10.1.1",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.9",
-    "typedoc-plugin-markdown": "^4.8.0",
+    "typedoc": "^0.28.12",
+    "typedoc-plugin-markdown": "^4.8.1",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",
     "vitest": "^3.2.4",
@@ -108,10 +108,10 @@
     "d3-scale-chromatic": "^3.1.0",
     "d3-shape": "^3.2.0",
     "d3-time": "^3.1.0",
-    "es-toolkit": "^1.39.8",
+    "es-toolkit": "^1.39.10",
     "fast-equals": "^5.2.2",
     "merge-deep": "^3.0.3",
-    "svelte": "5.37.3"
+    "svelte": "5.38.7"
   },
   "scripts": {
     "dev": "vite dev",