svelteplot 0.8.1 → 0.9.0

package/dist/marks/Trail.svelte

@@ -0,0 +1,161 @@
+<script lang="ts" generics="Datum extends DataRecord">
+    interface TrailMarkProps extends Omit<
+        BaseMarkProps<Datum>,
+        'stroke' | 'strokeWidth' | 'strokeDasharray'
+    > {
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
+        defined?: ConstantAccessor<boolean, Datum>;
+        canvas?: boolean;
+        cap?: 'butt' | 'round';
+        /**
+         * Samples per segment for curve interpolation
+         */
+        resolution?: number | 'auto';
+    }
+    import type {
+        DataRecord,
+        ChannelAccessor,
+        BaseMarkProps,
+        ConstantAccessor,
+        RawValue,
+        ScaledDataRecord,
+        CurveName
+    } from '../types';
+    import Mark from '../Mark.svelte';
+    import { path as d3Path } from 'd3-path';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { sort } from '../transforms';
+    import trailPath, { type TrailSample } from './helpers/trail.js';
+    import TrailCanvas from './helpers/TrailCanvas.svelte';
+    import { addEventHandlers } from './helpers/events';
+    import type { CurveFactory } from 'd3-shape';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+
+    let markProps: TrailMarkProps = $props();
+
+    const DEFAULTS: TrailMarkProps = {
+        curve: 'linear',
+        r: 3,
+        canvas: false,
+        resolution: 'auto',
+        cap: 'round',
+        tension: 0,
+        ...getPlotDefaults().trail
+    };
+
+    const {
+        data = [{} as Datum],
+        curve,
+        resolution,
+        tension,
+        canvas,
+        cap,
+        class: className,
+        ...options
+    }: TrailMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
+
+    const args = $derived(sort({ data, ...options })) as TrailMarkProps;
+
+    const plot = usePlot();
+
+    /**
+     * Groups the data by the specified key
+     */
+    function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
+        if (!groupByKey) return [data];
+        let group: ScaledDataRecord[] = [];
+        const groups = [group];
+        let lastGroupValue;
+        for (const d of data) {
+            const groupValue = resolveProp(groupByKey, d.datum);
+            if (groupValue === lastGroupValue || group.length === 0) {
+                group.push(d);
+                lastGroupValue = groupValue;
+            } else {
+                // new group
+                group = [d];
+                groups.push(group);
+                lastGroupValue = groupValue;
+            }
+        }
+        return groups.filter((d) => d.length > 0);
+    }
+
+    const groupByKey = $derived(args.z || args.fill) as ChannelAccessor<Datum> | null;
+</script>
+
+<Mark
+    type="trail"
+    channels={['x', 'y', 'opacity', 'fill', 'fillOpacity', 'r']}
+    required={['x', 'y']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if scaledData.length > 0}
+            {@const groupedTrailData = groupIndex(scaledData, groupByKey)}
+            {#if canvas}
+                <!-- todo -->
+                <TrailCanvas
+                    {curve}
+                    {cap}
+                    {tension}
+                    {resolution}
+                    {usedScales}
+                    data={groupedTrailData}
+                    options={args} />
+            {:else}
+                <g class={['trail', className]}>
+                    {#each groupedTrailData as trailData, i (i)}
+                        {@const samples = trailData.map((d) => ({
+                            x: Number(d.x),
+                            y: Number(d.y),
+                            r: Number(d.r ?? 0)
+                        })) satisfies TrailSample[]}
+                        {@const defined = trailData.map(
+                            (d) =>
+                                d.valid &&
+                                d.r >= 0 &&
+                                (resolveProp(options.defined, d.datum, true) ?? true)
+                        )}
+                        {@const pathString = trailPath(samples, defined, d3Path(), {
+                            curve,
+                            cap,
+                            tension,
+                            ...(typeof resolution === 'number'
+                                ? { samplesPerSegment: resolution }
+                                : {})
+                        })}
+                        {@const [style, styleClass] = resolveStyles(
+                            plot,
+                            trailData[0],
+                            {
+                                ...args
+                            },
+                            'fill',
+                            usedScales
+                        )}
+                        <path
+                            d={pathString}
+                            {style}
+                            class={styleClass}
+                            {@attach addEventHandlers({
+                                plot,
+                                options: mark.options,
+                                datum: trailData[0].datum
+                            })} />
+                    {/each}
+                </g>
+            {/if}
+        {/if}
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,107 @@
+import type { DataRecord, ChannelAccessor, ConstantAccessor, RawValue, CurveName } from '../types';
+import type { CurveFactory } from 'd3-shape';
+declare function $$render<Datum extends DataRecord>(): {
+    props: Omit<Partial<{
+        filter: ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: ConstantAccessor<number, Datum>;
+        sort: ((a: RawValue, b: RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ConstantAccessor<RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: ConstantAccessor<number, Datum>;
+        strokeOpacity: ConstantAccessor<number, Datum>;
+        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: ConstantAccessor<string, Datum>;
+        strokeDashoffset: ConstantAccessor<number, Datum>;
+        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        mask: string;
+        imageFilter: ConstantAccessor<string, Datum>;
+        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: ConstantAccessor<string, Datum>;
+        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        class: string;
+        style: string;
+        cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }>, "stroke" | "strokeWidth" | "strokeDasharray"> & {
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue, Datum> | {
+            channel: "stroke" | "fill";
+        };
+        defined?: ConstantAccessor<boolean, Datum>;
+        canvas?: boolean;
+        cap?: "butt" | "round";
+        /**
+         * Samples per segment for curve interpolation
+         */
+        resolution?: number | "auto";
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Trail: $$IsomorphicComponent;
+type Trail<Datum extends DataRecord> = InstanceType<typeof Trail<Datum>>;
+export default Trail;

package/dist/marks/Vector.svelte

@@ -29,7 +29,6 @@
         canvas?: boolean;
     }
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ChannelAccessor,
@@ -47,6 +46,7 @@
     import { addEventHandlers } from './helpers/events.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     const defaultRadius = 3.5;
 
@@ -72,8 +72,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
     const testFacet = $derived(getTestFacet());
@@ -203,7 +202,7 @@
                                   : `translate(0, ${d.length / 2})`}"
                             {style}
                             {@attach addEventHandlers({
-                                getPlotState,
+                                plot,
                                 options: args,
                                 datum: d?.datum
                             })}

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

@@ -31,6 +31,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

package/dist/marks/WaffleX.svelte

@@ -15,9 +15,9 @@
     import { intervalX, recordizeX, sort, stackX } from '../transforms';
     import type { StackOptions } from '../transforms/stack';
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve';
     import { roundedRect } from '../helpers/roundedRect';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface WaffleXMarkProps
         extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, WaffleOptions<Datum> {
@@ -58,8 +58,7 @@
         ...options
     }: WaffleXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         stackX(

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types").ConstantAccessor<string, Datum>;

package/dist/marks/WaffleY.svelte

@@ -8,17 +8,16 @@
         ChannelAccessor,
         BaseMarkProps,
         LinkableMarkProps,
-        PlotContext,
         BorderRadius
     } from '../types';
     import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
     import { getPlotDefaults } from '../hooks/plotDefaults';
-    import { getContext } from 'svelte';
     import { intervalY, recordizeY, sort, stackY } from '../transforms';
     import Mark from '../Mark.svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve';
     import { roundedRect } from '../helpers/roundedRect';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface WaffleYMarkProps
         extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, WaffleOptions<Datum> {
@@ -56,8 +55,7 @@
         ...options
     }: WaffleYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         stackY(

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types").ConstantAccessor<string, Datum>;

package/dist/marks/helpers/AreaCanvas.svelte

@@ -2,17 +2,16 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales
     } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext } from 'svelte';
     import { type Area } from 'd3-shape';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         mark,
@@ -26,8 +25,7 @@
         areaPath: Area<ScaledDataRecord>;
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function maybeOpacity(value: unknown) {
         return value == null ? 1 : +value;

package/dist/marks/helpers/Box.svelte

@@ -0,0 +1,271 @@
+<!-- @component
+    Internal shared box plot implementation for BoxX and BoxY
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    type Orientation = 'x' | 'y';
+
+    interface BoxMarkProps extends Pick<
+        BaseMarkProps<Datum>,
+        'class' | 'fill' | 'stroke' | 'fx' | 'fy'
+    > {
+        data: Datum[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        /**
+         * Custom sort order for grouped box plot data
+         */
+        sort?: 'min' | 'max' | 'median' | 'p25' | 'p75' | ((d: Datum) => RawValue);
+        /**
+         * Options for the rule marks that represent the min/max range
+         */
+        rule: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the bar marks that represent the IQR range
+         */
+        bar: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the tick marks that represent the median
+         */
+        tickMedian: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the tick marks that represent the min/max range
+         */
+        tickMinMax: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the dot marks that represent the outliers
+         */
+        dot: Record<string, ChannelAccessor<Datum>>;
+        orientation: Orientation;
+    }
+
+    import GroupMultiple from './GroupMultiple.svelte';
+    import { groupX, groupY, BarY, TickY, RuleX, BarX, TickX, RuleY, Dot } from '../../index.js';
+    import { resolveChannel } from '../../helpers/resolve.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRecord, RawValue } from '../../types';
+    import { IS_SORTED } from '../../transforms/sort';
+
+    let markProps: BoxMarkProps = $props();
+
+    const {
+        data = [{}],
+        bar,
+        rule,
+        tickMedian,
+        tickMinMax,
+        dot,
+        x,
+        y,
+        sort,
+        fx,
+        fy,
+        fill,
+        stroke,
+        orientation,
+        class: className = ''
+    }: BoxMarkProps = $derived(markProps);
+
+    const groupFn = $derived(orientation === 'y' ? groupX : groupY);
+    const BarMark = $derived(orientation === 'y' ? BarY : BarX);
+    const RuleMark = $derived(orientation === 'y' ? RuleX : RuleY);
+    const TickMark = $derived(orientation === 'y' ? TickY : TickX);
+
+    // the channels as if this would be a BoxX
+    const xChannel = $derived(orientation === 'y' ? y : x);
+    const yChannel = $derived(orientation === 'y' ? x : y);
+    const xProp = $derived(orientation === 'x' ? 'x' : 'y');
+    const x1Prop = $derived(`${xProp}1`);
+    const x2Prop = $derived(`${xProp}2`);
+    const yProp = $derived(orientation === 'x' ? 'y' : 'x');
+
+    const { data: grouped, ...groupChannels } = $derived(
+        groupFn(
+            {
+                data: data.filter((d) => resolveChannel(xProp, d, { x, y }) != null),
+                x,
+                y,
+                [x1Prop]: xChannel,
+                [x2Prop]: xChannel,
+                fx,
+                fy
+            },
+            { [xProp]: 'median', [x1Prop]: 'p25', [x2Prop]: 'p75', fill: (rows) => rows }
+        )
+    );
+
+    const X = Symbol('x'),
+        Y = Symbol('y'),
+        FX = Symbol('fx'),
+        FY = Symbol('fy'),
+        P25 = Symbol('p25'),
+        P75 = Symbol('p75'),
+        MEDIAN = Symbol('median'),
+        MIN = Symbol('min'),
+        MAX = Symbol('max'),
+        OUTLIERS = Symbol('outliers'),
+        SORT_REF = Symbol('sortRef');
+
+    const facets = $derived({
+        ...(fx != null && { fx: FX }),
+        ...(fy != null && { fy: FY })
+    });
+
+    const sortProps = { [IS_SORTED]: true };
+
+    const compareValues = (a: RawValue, b: RawValue) =>
+        (typeof a === 'string' && typeof b === 'string'
+            ? a.localeCompare(b)
+            : a > b
+              ? 1
+              : a < b
+                ? -1
+                : 0) || 0;
+
+    const boxData = $derived.by(() => {
+        const boxes = grouped
+            .map((row) => {
+                const medianKey = groupChannels[xProp];
+                const p25Key = groupChannels[x1Prop];
+                const p75Key = groupChannels[x2Prop];
+                const groupKey = groupChannels[yProp];
+
+                const iqr = row[p75Key] - row[p25Key];
+                const whisker = iqr * 1.5;
+                const lower = row[p25Key] - whisker;
+                const upper = row[p75Key] + whisker;
+                const data = row[groupChannels.fill].map((d) => ({
+                    ...d,
+                    [orientation === 'y' ? Y : X]: resolveChannel(xProp, d, {
+                        x,
+                        y
+                    })
+                }));
+                const valueSym = orientation === 'y' ? Y : X;
+                const groupSym = orientation === 'y' ? X : Y;
+                const outliers = data.filter((d) => d[valueSym] < lower || d[valueSym] > upper);
+                const inside = data
+                    .filter((d) => d[valueSym] >= lower && d[valueSym] <= upper)
+                    .sort((a, b) => a[valueSym] - b[valueSym]);
+
+                return {
+                    ...data[0],
+                    [SORT_REF]: row[groupChannels.fill]?.[0],
+                    [groupSym]: row[groupKey],
+                    [P25]: row[p25Key],
+                    [MEDIAN]: row[medianKey],
+                    [P75]: row[p75Key],
+                    [MIN]: inside.length ? inside[0][valueSym] : null,
+                    [MAX]: inside.length ? inside.at(-1)[valueSym] : null,
+                    [FX]: resolveChannel('fx', data[0], { fx }, null),
+                    [FY]: resolveChannel('fy', data[0], { fy }, null),
+                    [OUTLIERS]: outliers
+                };
+            })
+            .filter(Boolean);
+
+        const stripSortRef = ({ [SORT_REF]: _, ...rest }) => rest;
+
+        if (!sort) return boxes.map(stripSortRef);
+
+        const [sort_, direction] = maybeSort(sort);
+
+        const sortAccessor =
+            typeof sort === 'function'
+                ? (d) => sort(d[SORT_REF])
+                : (d) => {
+                      switch (sort_) {
+                          case 'min':
+                              return d[MIN];
+                          case 'max':
+                              return d[MAX];
+                          case 'p25':
+                              return d[P25];
+                          case 'p75':
+                              return d[P75];
+                          case 'median':
+                          default:
+                              return d[MEDIAN];
+                      }
+                  };
+
+        return boxes
+            .toSorted(
+                (a, b) =>
+                    compareValues(sortAccessor(a), sortAccessor(b)) *
+                    direction *
+                    (orientation === 'x' ? -1 : 1)
+            )
+            .map(stripSortRef);
+    });
+
+    function maybeSort(
+        sort: string | ((d: Datum) => RawValue) | undefined
+    ): [string | ((d: Datum) => RawValue), 1 | -1] {
+        if (typeof sort !== 'string') return [sort, 1];
+        if (sort.startsWith('-')) {
+            return [sort.slice(1), -1];
+        }
+        return [sort, 1];
+    }
+
+    const valueSymbol = $derived(orientation === 'y' ? Y : X);
+    const groupSymbol = $derived(orientation === 'y' ? X : Y);
+    const length = $derived(className ? 2 : grouped.length);
+    const baseClass = $derived(`box-${orientation} ${className || ''}`);
+</script>
+
+<GroupMultiple class={baseClass} {length}>
+    <RuleMark
+        data={boxData}
+        {...{ [yProp]: groupSymbol, [x1Prop]: MIN, [x2Prop]: P25 }}
+        {stroke}
+        {...rule || {}}
+        {...facets}
+        {...sortProps} />
+    <RuleMark
+        data={boxData}
+        {...{ [yProp]: groupSymbol, [x1Prop]: P75, [x2Prop]: MAX }}
+        {stroke}
+        {...rule || {}}
+        {...facets} />
+    <BarMark
+        data={boxData}
+        {...{ [yProp]: groupSymbol, [x1Prop]: P25, [x2Prop]: P75 }}
+        {fill}
+        {stroke}
+        {...facets}
+        {...bar || {}} />
+    {#if tickMedian}
+        <TickMark
+            data={boxData}
+            {...{ [yProp]: groupSymbol, [xProp]: MEDIAN }}
+            {...facets}
+            {stroke}
+            strokeWidth={2}
+            {...typeof tickMedian === 'object' ? tickMedian : {}} />
+    {/if}
+    {#if tickMinMax}
+        <TickMark
+            data={boxData}
+            {...{ [yProp]: groupSymbol, [xProp]: MIN }}
+            {stroke}
+            {...facets}
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+        <TickMark
+            data={boxData}
+            {...{ [yProp]: groupSymbol, [xProp]: MAX }}
+            {stroke}
+            {...facets}
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+    {/if}
+    <Dot
+        data={boxData.map((d) => d[OUTLIERS]).flat()}
+        {x}
+        {y}
+        {fx}
+        {fy}
+        {fill}
+        {stroke}
+        {...dot || {}} />
+</GroupMultiple>