svelteplot 0.5.1 → 0.5.2

package/dist/constants.d.ts

@@ -1,5 +1,6 @@
-import type { ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
+import type { ChannelName, ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
 export declare const SCALE_TYPES: Record<ScaleName, symbol>;
+export declare const ORIGINAL_NAME_KEYS: Record<ChannelName, symbol>;
 export declare const SCALES: ScaleName[];
 export declare const VALID_SCALE_TYPES: Record<ScaleName, Set<ScaleType>>;
 /**

package/dist/constants.js

@@ -10,6 +10,28 @@ export const SCALE_TYPES = {
     fy: Symbol('fy'),
     projection: Symbol('projection')
 };
+export const ORIGINAL_NAME_KEYS = {
+    x: Symbol('origName_x'),
+    x1: Symbol('origName_x1'),
+    x2: Symbol('origName_x2'),
+    y: Symbol('origName_y'),
+    y1: Symbol('origName_y1'),
+    y2: Symbol('origName_y2'),
+    fill: Symbol('origName_color'),
+    stroke: Symbol('origName_color'),
+    opacity: Symbol('origName_opacity'),
+    symbol: Symbol('origName_symbol'),
+    r: Symbol('origName_r'),
+    z: Symbol('origName_z'),
+    sort: Symbol('origName_sort'),
+    filter: Symbol('origName_filter'),
+    interval: Symbol('origName_interval'),
+    length: Symbol('origName_length'),
+    fx: Symbol('origName_fx'),
+    fy: Symbol('origName_fy'),
+    fillOpacity: Symbol('origName_opacity'),
+    strokeOpacity: Symbol('origName_opacity')
+};
 export const SCALES = [
     'x',
     'y',

package/dist/core/Plot.svelte

@@ -65,7 +65,7 @@
         margin: 'auto',
         colorScheme: 'turbo',
         unknown: '#cccccc99',
-
+        sortOrdinalDomains: true,
         categoricalColorScheme: 'observable10',
         pointScaleHeight: 18,
         bandScaleHeight: 30,
@@ -365,7 +365,12 @@
         initialOpts: Partial<PlotOptions>,
         opts: PlotOptionsParameters
     ): PlotOptions {
-        return mergeDeep<PlotOptions>({}, smartDefaultPlotOptions(opts), initialOpts);
+        return mergeDeep<PlotOptions>(
+            {},
+            { sortOrdinalDomains: DEFAULTS.sortOrdinalDomains },
+            smartDefaultPlotOptions(opts),
+            initialOpts
+        );
     }
 
     function maybeMargin(

package/dist/helpers/autoScales.js

@@ -79,7 +79,16 @@ export function autoScale({ name, type, domain, scaleOptions, plotOptions, plotW
         ...(type === 'band' || type === 'point'
             ? {
                 align: scaleOptions.align,
-                padding: maybeNumber(coalesce(scaleOptions.padding, plotOptions.padding, 0.15))
+                ...(type === 'point'
+                    ? {
+                        // point scales don't have paddingInner/Outer, only padding
+                        padding: maybeNumber(coalesce(scaleOptions.padding, plotOptions.padding, 0.15))
+                    }
+                    : {
+                        //   padding: maybeNumber(coalesce(scaleOptions.padding, plotOptions.padding, 0.15)),
+                        paddingInner: maybeNumber(coalesce(scaleOptions.paddingInner, scaleOptions.padding, plotOptions.padding, 0.15)),
+                        paddingOuter: maybeNumber(coalesce(scaleOptions.paddingOuter, scaleOptions.padding, plotOptions.padding, 0.15))
+                    })
             }
             : {})
     };

package/dist/helpers/index.d.ts

@@ -3,7 +3,7 @@ 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 coalesce(...args: (RawValue | undefined | null)[]): string | number | boolean | symbol | object | 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;

package/dist/helpers/isRawValue.js

@@ -1,5 +1,10 @@
 import { isDate } from './typeChecks.js';
 export default function (value) {
     const t = typeof value;
-    return t === 'string' || t === 'number' || t === 'boolean' || isDate(value) || t === null;
+    return (t === 'string' ||
+        t === 'number' ||
+        t === 'boolean' ||
+        t === 'object' ||
+        isDate(value) ||
+        t === null);
 }

package/dist/helpers/reduce.js

@@ -1,6 +1,7 @@
 import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';
+import { ORIGINAL_NAME_KEYS } from '../constants.js';
 const niceReduceNames = {
     count: 'Frequency',
     deviation: 'Standard Deviation',
@@ -72,10 +73,10 @@ export function reduceOutputs(newDatum, data, options, outputs, channels, newCha
                     if (typeof channels[k] === 'string') {
                         // the named reducer is applied to a column name, so we can use a combination
                         // of both as axis labels, e.g. MEAN(weight)
-                        newChannels[`__${k}_origField`] = `${reducerName} ( ${channels[k]} )`;
+                        newChannels[ORIGINAL_NAME_KEYS[k]] = `${reducerName} ( ${channels[k]} )`;
                     }
                     else {
-                        newChannels[`__${k}_origField`] = reducerName;
+                        newChannels[ORIGINAL_NAME_KEYS[k]] = reducerName;
                     }
                 }
             }

package/dist/helpers/scales.d.ts

@@ -40,3 +40,4 @@ export declare function looksLikeANumber(input: string | number): boolean;
 export declare function projectXY(scales: PlotScales, x: RawValue, y: RawValue, useXScale?: boolean, useYScale?: boolean): [number, number];
 export declare function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value: RawValue): number;
 export declare function projectY(channel: 'y' | 'y1' | 'y2', scales: PlotScales, value: RawValue): number;
+export declare function isOrdinalScale(scaleType: ScaleType): scaleType is "ordinal" | "point" | "band" | "categorical" | "threshold";

package/dist/helpers/scales.js

@@ -1,6 +1,6 @@
 import { extent, ascending } from 'd3-array';
 import { isColorOrNull, isDate, isDateOrNull, isNumberOrNull, isNumberOrNullOrNaN, isStringOrNull } from './typeChecks.js';
-import { CHANNEL_SCALE, VALID_SCALE_TYPES } from '../constants.js';
+import { CHANNEL_SCALE, ORIGINAL_NAME_KEYS, VALID_SCALE_TYPES } from '../constants.js';
 import { isSymbolOrNull } from './typeChecks.js';
 import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
@@ -48,7 +48,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
     let manualActiveMarks = 0;
     const propNames = new Set();
     const uniqueScaleProps = new Set();
-    let sortOrdinalDomain = true;
+    let sortOrdinalDomain = plotOptions.sortOrdinalDomains ?? true;
     for (const mark of marks) {
         // we only sort the scale domain alphabetically, if none of the
         // marks that map to it are using the `sort` transform. Note that
@@ -126,9 +126,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                 }
                 // special handling of marks using the stackX/stackY transform
                 if ((name === 'x' || name === 'y') &&
-                    mark.options[`__${name}_origField`] &&
-                    !mark.options[`__${name}_origField`].startsWith('__')) {
-                    propNames.add(mark.options[`__${name}_origField`]);
+                    mark.options[ORIGINAL_NAME_KEYS[name]] &&
+                    !mark.options[ORIGINAL_NAME_KEYS[name]].startsWith('__')) {
+                    propNames.add(mark.options[ORIGINAL_NAME_KEYS[name]]);
                 }
             }
             else {
@@ -152,11 +152,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         throw new Error(`Invalid scale type ${type} for scale
             ${name}. Valid types are ${[...VALID_SCALE_TYPES[name]].join(', ')}`);
     }
-    const isOrdinal = type === 'band' ||
-        type === 'point' ||
-        type === 'ordinal' ||
-        type === 'categorical' ||
-        type === 'threshold';
+    const isOrdinal = isOrdinalScale(type);
     if (isOrdinal && sortOrdinalDomain) {
         valueArr.sort(ascending);
     }
@@ -351,3 +347,10 @@ export function projectY(channel, scales, value) {
                 ? scales.y.fn.bandwidth()
                 : 0));
 }
+export function isOrdinalScale(scaleType) {
+    return (scaleType === 'band' ||
+        scaleType === 'point' ||
+        scaleType === 'ordinal' ||
+        scaleType === 'categorical' ||
+        scaleType === 'threshold');
+}

package/dist/marks/Area.svelte

@@ -14,6 +14,7 @@
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
+        areaClass?: ConstantAccessor<string, Datum>;
     }
 
     import Mark from '../Mark.svelte';
@@ -37,7 +38,6 @@
         ChannelAccessor,
         ScaledDataRecord,
         LinkableMarkProps,
-        PlotDefaults,
         RawValue
     } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
@@ -59,6 +59,7 @@
         curve = 'linear' as CurveName,
         tension = 0,
         class: className = '',
+        areaClass,
         canvas = false,
         ...options
     }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
@@ -114,13 +115,14 @@
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     required={['x1', 'y1']}
+    {...markProps}
     {...options}>
     {#snippet children({ mark, usedScales, scaledData })}
         {@const grouped = groupAndSort(scaledData)}
         {#if canvas}
             <AreaCanvas groupedAreaData={grouped} {mark} {usedScales} {areaPath} />
         {:else}
-            <GroupMultiple length={grouped.length}>
+            <GroupMultiple class={className} length={grouped.length}>
                 {#each grouped as areaData, i (i)}
                     {@const datum = areaData[0]}
                     {#if areaData.length > 0}
@@ -134,7 +136,11 @@
                                 usedScales
                             )}
                             <path
-                                class={['svelteplot-area', className, styleClass]}
+                                class={[
+                                    'area',
+                                    resolveProp(areaClass, areaData[0].datum),
+                                    styleClass
+                                ]}
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
                                 {@attach addEventHandlers({

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

@@ -78,6 +78,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
+        areaClass?: ConstantAccessor<string, Datum>;
     };
     events(): {};
     slots(): {};

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

@@ -76,6 +76,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         };
         stack?: Partial<import("../transforms/stack.js").StackOptions>;
         canvas?: boolean;
+        areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "y1" | "y2"> & {
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;

package/dist/marks/BarX.svelte

@@ -59,7 +59,7 @@
         stackX(
             intervalX(
                 // by default, sort by y channel (the ordinal labels)
-                sort(recordizeX({ data, sort: { channel: 'y' }, ...options })),
+                sort(recordizeX({ data, ...options })),
                 { plot }
             ),
             stack

package/dist/marks/BarY.svelte

@@ -59,7 +59,7 @@
         stackY(
             intervalY(
                 // by default, sort by x channel (the ordinal labels)
-                sort(recordizeY({ data, sort: { channel: 'x' }, ...options })),
+                sort(recordizeY({ data, ...options })),
                 { plot }
             ),
             stack

package/dist/marks/BoxX.svelte

@@ -10,6 +10,8 @@
     import { type ComponentProps } from 'svelte';
     import type BoxY from './BoxY.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { IS_SORTED } from '../transforms/sort';
+    import { sort } from 'd3-array';
 
     let markProps: BoxXMarkProps = $props();
 
@@ -70,6 +72,8 @@
         ...(fy != null && { fy: FY })
     });
 
+    const sortProps = { [IS_SORTED]: true };
+
     const boxData = $derived(
         grouped
             .map((row) => {
@@ -107,7 +111,15 @@
 </script>
 
 <GroupMultiple class="box-x {className || ''}" length={className ? 2 : grouped.length}>
-    <RuleY data={boxData} y={Y} x1={MIN} x2={P25} {stroke} {...rule || {}} {...facets} />
+    <RuleY
+        data={boxData}
+        y={Y}
+        x1={MIN}
+        x2={P25}
+        {stroke}
+        {...rule || {}}
+        {...facets}
+        {...sortProps} />
     <RuleY data={boxData} y={Y} x1={P75} x2={MAX} {stroke} {...rule || {}} {...facets} />
     <BarX data={boxData} y={Y} x1={P25} x2={P75} {fill} {stroke} {...facets} {...bar || {}} />
     {#if tickMedian}

package/dist/marks/BoxY.svelte

@@ -33,6 +33,7 @@
     import { resolveChannel } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import type { BaseMarkProps, ChannelAccessor, DataRecord } from '../types';
+    import { IS_SORTED } from '../transforms/sort';
 
     let markProps: BoxYMarkProps = $props();
 
@@ -93,6 +94,8 @@
         ...(fy != null && { fy: FY })
     });
 
+    const sortProps = { [IS_SORTED]: true };
+
     const boxData = $derived(
         grouped
             .map((row) => {
@@ -129,7 +132,15 @@
 </script>
 
 <GroupMultiple class="box-y {className || ''}" length={className ? 2 : grouped.length}>
-    <RuleX data={boxData} x={X} y1={MIN} y2={P25} {stroke} {...rule || {}} {...facets} />
+    <RuleX
+        data={boxData}
+        x={X}
+        y1={MIN}
+        y2={P25}
+        {stroke}
+        {...sortProps}
+        {...rule || {}}
+        {...facets} />
     <RuleX data={boxData} x={X} y1={P75} y2={MAX} {stroke} {...rule || {}} {...facets} />
     <BarY data={boxData} x={X} y1={P25} y2={P75} {fill} {stroke} {...facets} {...bar || {}} />
     {#if tickMedian}

package/dist/marks/Dot.svelte

@@ -32,6 +32,7 @@
     import { addEventHandlers } from './helpers/events.js';
     import Anchor from './helpers/Anchor.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { isOrdinalScale } from '../helpers/scales.js';
 
     const DEFAULTS = {
         ...getPlotDefaults().dot
@@ -60,7 +61,11 @@
             recordizeXY({
                 data,
                 // sort by descending radius by default
-                ...(options.r ? { sort: { channel: '-r' } } : {}),
+                ...(options.r &&
+                !isOrdinalScale(plot.scales.x.type) &&
+                !isOrdinalScale(plot.scales.y.type)
+                    ? { sort: { channel: '-r' } }
+                    : {}),
                 ...options,
                 ...(options.fill === true ? { fill: 'currentColor' } : {})
             })

package/dist/marks/Rect.svelte

@@ -31,6 +31,7 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { IS_SORTED } from '../transforms/sort';
 
     let markProps: RectMarkProps = $props();
 
@@ -59,6 +60,7 @@
     type="rect"
     required={[]}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...markProps}
     {...args}>
     {#snippet children({ usedScales, scaledData })}
         <GroupMultiple class={scaledData.length > 1 ? className : null} length={scaledData.length}>

package/dist/marks/RuleX.svelte

@@ -45,7 +45,11 @@
     const args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
 </script>
 
-<Mark type="ruleX" channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+<Mark
+    type="ruleX"
+    channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']}
+    {...markProps}
+    {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         <GroupMultiple class="rule-x {className || ''}" length={className ? 2 : scaledData.length}>
             {#each scaledData as d, i (i)}

package/dist/marks/RuleY.svelte

@@ -24,6 +24,7 @@
         ChannelAccessor
     } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { IS_SORTED } from '../transforms/sort';
 
     let markProps: RuleYMarkProps = $props();
     const DEFAULTS = {
@@ -44,7 +45,11 @@
     const args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
 </script>
 
-<Mark type="ruleY" channels={['y', 'x1', 'x2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+<Mark
+    type="ruleY"
+    channels={['y', 'x1', 'x2', 'stroke', 'opacity', 'strokeOpacity']}
+    {...markProps}
+    {...args}>
     {#snippet children({ scaledData, usedScales })}
         <GroupMultiple class="rule-y {className || ''}" length={className ? 2 : args.data.length}>
             {#each scaledData as d, i (i)}

package/dist/marks/TickX.svelte

@@ -61,7 +61,11 @@
     let testFacet = $derived(getTestFacet());
 </script>
 
-<Mark type="tickX" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+<Mark
+    type="tickX"
+    channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
+    {...markProps}
+    {...args}>
     {#snippet children({ mark, usedScales })}
         <g class="tick-x">
             {#each args.data as datum, i (i)}

package/dist/marks/TickY.svelte

@@ -60,7 +60,11 @@
     let testFacet = $derived(getTestFacet());
 </script>
 
-<Mark type="tickY" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+<Mark
+    type="tickY"
+    channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
+    {...markProps}
+    {...args}>
     {#snippet children({ mark, usedScales })}
         <g class="tick-y">
             {#each args.data as datum, i (i)}

package/dist/marks/helpers/RectPath.svelte

@@ -81,7 +81,9 @@ Helper component for rendering rectangular marks in SVG
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
-    const borderRadius = $derived((options.borderRadius ?? 0) as BorderRadius);
+    const borderRadius = $derived(
+        resolveProp(options.borderRadius, datum?.datum, 0) as BorderRadius
+    );
     const hasBorderRadius = $derived(
         (typeof borderRadius === 'number' && borderRadius > 0) ||
             (typeof borderRadius === 'object' &&

package/dist/transforms/bin.js

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

package/dist/transforms/sort.d.ts

@@ -4,10 +4,7 @@ export declare const IS_SORTED: unique symbol;
 export declare function sort<T>({ data, ...channels }: TransformArg<T>, options?: {
     reverse?: boolean;
 }): {
-    [IS_SORTED]: string | number | true | symbol | Date | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
-        channel: string;
-        order?: "ascending" | "descending";
-    } | ((d: T, index: number) => import("../types/index.js").RawValue);
+    [IS_SORTED]: string | number | true | symbol | object;
     sort: null;
     filter?: import("../types/index.js").ConstantAccessor<boolean, T>;
     facet?: "auto" | "include" | "exclude" | undefined;

package/dist/transforms/stack.d.ts

@@ -5,7 +5,7 @@ export type StackOptions = {
     offset: null | StackOffset;
     order: null | StackOrder;
     reverse: boolean;
-};
+} | false;
 export declare function stackY<T>({ data, ...channels }: TransformArg<T>, opts?: Partial<StackOptions>): TransformArg<T>;
 export declare function stackX<T>({ data, ...channels }: TransformArg<T>, opts?: Partial<StackOptions>): TransformArg<T>;
 export declare function stackMosaicX<T>(args: any, opts: any): {

package/dist/transforms/stack.js

@@ -5,7 +5,7 @@ import { sum, groups as d3Groups, min, range } from 'd3-array';
 import { groupFacetsAndZ } from '../helpers/group';
 import { filter } from './filter.js';
 import { sort } from './sort.js';
-import { INDEX } from '../constants.js';
+import { INDEX, ORIGINAL_NAME_KEYS } from '../constants.js';
 import { indexData, RAW_VALUE } from './recordize.js';
 const S = {
     x: Symbol('x'),
@@ -38,6 +38,10 @@ const STACK_OFFSET = {
     normalize: stackOffsetExpand
 };
 function stackXY(byDim, data, channels, options) {
+    if (options === false) {
+        // no stacking
+        return { data, ...channels };
+    }
     // we need to stack the data for each facet separately
     const groupFacetsBy = [
         channels.fx != null ? 'fx' : null,
@@ -143,8 +147,8 @@ function stackXY(byDim, data, channels, options) {
             data: out,
             ...channels,
             [byDim]: undefined,
-            ...(typeof channels[byDim] === 'string' && !channels[`__${byDim}_origField`]
-                ? { [`__${byDim}_origField`]: channels[byDim] }
+            ...(typeof channels[byDim] === 'string' && !channels[ORIGINAL_NAME_KEYS[byDim]]
+                ? { [ORIGINAL_NAME_KEYS[byDim]]: channels[byDim] }
                 : {}),
             ...{ [byLow]: S[byLow], [byHigh]: S[byHigh] }
         };
@@ -158,6 +162,8 @@ export function stackX({ data, ...channels }, opts = {}) {
     return stackXY('x', data, channels, applyDefaults(opts));
 }
 function applyDefaults(opts) {
+    if (opts === false)
+        return false;
     if (opts.offset === 'wiggle' && opts.order === undefined) {
         return { ...DEFAULT_STACK_OPTIONS, order: 'inside-out', ...opts };
     }

package/dist/types/channel.d.ts

@@ -1,5 +1,5 @@
 import type { ConstantAccessor, RawValue } from './index.js';
-export type Channels<T> = Record<string, ChannelAccessor<T> | ConstantAccessor<T, string | number | boolean | symbol>>;
+export type Channels<T> = Record<string | symbol, 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/data.d.ts

@@ -1,5 +1,5 @@
 import type { ScaledChannelName, ScaledChannelType } from './channel.js';
-export type RawValue = number | Date | boolean | string | symbol;
+export type RawValue = number | Date | boolean | string | symbol | object;
 export type DataRecord<T = Record<string | symbol, RawValue>> = T;
 export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, any>> & {
     datum: DataRecord<T>;

package/dist/types/mark.d.ts

@@ -126,5 +126,5 @@ export type BaseRectMarkProps<T> = {
     insetTop?: ConstantAccessor<number, T>;
     insetRight?: ConstantAccessor<number, T>;
     insetBottom?: ConstantAccessor<number, T>;
-    borderRadius?: BorderRadius;
+    borderRadius?: ConstantAccessor<BorderRadius, T>;
 };

package/dist/types/plot.d.ts

@@ -112,6 +112,10 @@ export type PlotDefaults = {
      * default dot radius for line markers, used in dot, circle, and circle-stroke markers
      */
     markerDotRadius: number;
+    /**
+     * if set to true, ordinal domains will be sorted alphabetically
+     */
+    sortOrdinalDomains: boolean;
     /**
      * default props for area marks, applied to area, areaX, and areaY marks
      */
@@ -467,5 +471,9 @@ export type PlotOptions = {
      * pass a @emotion/css function to style plot using dynamic classes
      */
     css: (d: string) => string | undefined;
+    /**
+     * if set to true, ordinal domains will be sorted alphabetically
+     */
+    sortOrdinalDomains: boolean;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteplot",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "license": "ISC",
   "author": {
     "name": "Gregor Aisch",
@@ -112,7 +112,7 @@
     "fast-equals": "^5.3.2",
     "interval-tree-1d": "^1.0.4",
     "merge-deep": "^3.0.3",
-    "svelte": "5.41.3"
+    "svelte": "5.43.0"
   },
   "scripts": {
     "dev": "vite dev",