svelteplot 0.7.1 → 0.8.0-pr-270.0

package/dist/Mark.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type Snippet } from 'svelte';
+import { CHANNEL_SCALE } from './constants.js';
 import type { ScaledChannelName, MarkType, DataRecord, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
 import { getUsedScales } from './helpers/scales.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("./types/index.js").ConstantAccessor<number, Datum>;
         dy: import("./types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("./transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("./transforms/dodge.js").DodgeYOptions;
+        dodgeX: CHANNEL_SCALE;
+        dodgeY: CHANNEL_SCALE;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("./types/index.js").ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | import("./types/index.js").ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("./types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;

package/dist/constants.d.ts

@@ -13,4 +13,4 @@ export declare const CSS_COLOR_MIX: RegExp;
 export declare const CSS_COLOR_CONTRAST: RegExp;
 export declare const CSS_RGBA: RegExp;
 export declare const CSS_URL: RegExp;
-export declare const INDEX: unique symbol;
+export declare const INDEX: any;

package/dist/core/Plot.svelte

@@ -67,7 +67,7 @@
         unknown: '#cccccc99',
         sortOrdinalDomains: true,
         categoricalColorScheme: 'observable10',
-        pointScaleHeight: 18,
+        pointScaleHeight: 20,
         bandScaleHeight: 30,
         locale: 'en-US',
         numberFormat: {
@@ -208,6 +208,12 @@
         isOneDimensional && explicitScales.has('x') ? 1 : preScales.y.domain.length
     );
 
+    const defaultPointScaleHeight = $derived(
+        explicitScales.has('r') && plotOptions.r.range
+            ? plotOptions.r.range[1] * 2
+            : DEFAULTS.pointScaleHeight
+    );
+
     // compute the (automatic) height based on various factors:
     // - if the plot used a projection and the projection requires an aspect ratio,
     //   we use it, but adjust for the facet counts
@@ -239,7 +245,7 @@
                                 : preScales.y.type === 'band'
                                   ? yFacetCount * yDomainCount * DEFAULTS.bandScaleHeight
                                   : preScales.y.type === 'point'
-                                    ? yFacetCount * yDomainCount * DEFAULTS.pointScaleHeight
+                                    ? yFacetCount * yDomainCount * defaultPointScaleHeight
                                     : DEFAULTS.height) +
                             plotOptions.marginTop +
                             plotOptions.marginBottom

package/dist/helpers/colors.d.ts

@@ -1,13 +1,10 @@
-import { interpolateBrBG } from 'd3-scale-chromatic';
 import type { ColorScheme } from '../types/index.js';
-export declare const categoricalSchemes: Map<string, readonly string[]>;
-export declare function isCategoricalScheme(scheme: string): boolean;
-type SchemeGetter = (n: number) => readonly string[];
-export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
-export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
-export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
-export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
-export declare function isQuantitativeScheme(scheme: string): boolean;
-export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
-export declare function isDivergingScheme(scheme: string): boolean;
-export {};
+export declare const categoricalSchemes: any;
+export declare function isCategoricalScheme(scheme: string): any;
+export declare function isOrdinalScheme(scheme: ColorScheme): any;
+export declare function ordinalScheme(scheme: string): any;
+export declare function ordinalRange(scheme: string, length: number): any;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): any[] | undefined;
+export declare function isQuantitativeScheme(scheme: string): any;
+export declare function quantitativeScheme(scheme: string): any;
+export declare function isDivergingScheme(scheme: string): any;

package/dist/helpers/facets.d.ts

@@ -9,4 +9,4 @@ import type { GenericMarkOptions, Mark, RawValue } from '../types/index.js';
  * @param fyValues y facet domain
  * @returns
  */
-export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): Map<RawValue, Map<RawValue, boolean>>;
+export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): any;

package/dist/helpers/getBaseStyles.d.ts

@@ -1,9 +1,7 @@
 import type { Channels } from '../types/index.js';
 import type { DataRow } from '../types/index.js';
-export declare function getBaseStylesObject(datum: DataRow, props: Partial<Channels>): {
-    [k: string]: string | number;
-};
-export default function (datum: DataRow, props: Partial<Channels>): string;
+export declare function getBaseStylesObject(datum: DataRow, props: Partial<Channels>): any;
+export default function (datum: DataRow, props: Partial<Channels>): any;
 export declare function maybeToPixel(cssKey: string, value: string | number): string | number;
 export declare function maybeFromPixel(value: string | number): string | number;
 export declare function maybeFromRem(value: string | number, rootFontSize?: number): string | number;

package/dist/helpers/index.d.ts

@@ -3,8 +3,8 @@ import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-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 coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter<T>(datum: T, options: Channels<T>): any;
 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;
@@ -15,4 +15,4 @@ export declare const POSITION_CHANNELS: Set<ChannelName>;
 export declare function parseInset(inset: number | string, width: number): number;
 export declare function omit<T extends {}, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
 export declare function identity<T>(x: T): T;
-export declare const GEOJSON_PREFER_STROKE: Set<string>;
+export declare const GEOJSON_PREFER_STROKE: any;

package/dist/helpers/reduce.d.ts

@@ -4,7 +4,7 @@ type ReducerOption = ReducerName | ReducerFunc;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 export type ReducerPercentile = (`p${Digit}${Digit}` & Record<never, never>) | 'p25' | 'p50' | 'p75';
 export type ReducerName = 'count' | 'deviation' | 'difference' | 'first' | 'last' | 'max' | 'mean' | 'median' | 'min' | 'mode' | 'ratio' | 'sum' | 'variance' | ReducerPercentile;
-export declare const Reducer: Record<ReducerName, ReducerFunc>;
+export declare const Reducer: any;
 export declare function mayberReducer(r: ReducerOption): ReducerFunc;
 export declare function reduceOutputs(newDatum: DataRecord, data: DataRecord[], options: Record<ChannelName, ReducerOption>, outputs: Iterable<ChannelName>, channels: Channels, newChannels: Channels): void;
 export {};

package/dist/helpers/scales.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
+import type { GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, UsedScales } from '../types/index.js';
 /**
  * compute the plot scales
  */
@@ -8,19 +8,19 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     domain: number[];
     range: number[];
     fn: (() => string) | (() => number);
-    skip: Map<any, any>;
+    skip: any;
     isDummy: boolean;
     manualActiveMarks?: undefined;
     uniqueScaleProps?: undefined;
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
-    skip: Map<ScaledChannelName, Set<symbol>>;
+    skip: any;
     manualActiveMarks: number;
-    uniqueScaleProps: Set<ChannelAccessor>;
+    uniqueScaleProps: any;
     autoTitle: string | null;
     isDummy?: undefined;
 };
@@ -36,8 +36,8 @@ export declare function inferScaleType(name: ScaleName, dataValues: RawValue[],
  * not. That's what this function is used for.
  */
 export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;
-export declare function looksLikeANumber(input: string | number): boolean;
+export declare function looksLikeANumber(input: string | number): any;
 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";
+export declare function isOrdinalScale(scaleType: ScaleType): scaleType is "point" | "ordinal" | "band" | "categorical" | "threshold";

package/dist/helpers/symbols.d.ts

@@ -1,5 +1,5 @@
 import { type SymbolType } from 'd3-shape';
 export declare const sqrt3: number;
 export declare const sqrt4_3: number;
-export declare function isSymbol(value: string | SymbolType): boolean;
-export declare function maybeSymbol(symbol: SymbolType | string): SymbolType;
+export declare function isSymbol(value: string | SymbolType): any;
+export declare function maybeSymbol(symbol: SymbolType | string): any;

package/dist/helpers/time.d.ts

@@ -1,6 +1,6 @@
-export declare const durations: Map<string, number>;
-export declare const intervalDuration: unique symbol;
-export declare const intervalType: unique symbol;
+export declare const durations: any;
+export declare const intervalDuration: any;
+export declare const intervalType: any;
 export declare function parseTimeInterval(input: string): [string, number];
 export declare function maybeTimeInterval(input: string): any;
 export declare function maybeUtcInterval(input: string): any;

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types/index.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean;
+export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDate(v: RawValue): v is Date;
-export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
-export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
-export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
-export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
-export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
-export declare function isOpacityOrNull(v: RawValue): boolean;
+export declare function isDateOrNull(v: RawValue | null | undefined): boolean;
+export declare function isNumberOrNull(v: RawValue | null | undefined): any;
+export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): any;
+export declare function isStringOrNull(v: RawValue | null | undefined): boolean;
+export declare function isSymbolOrNull(v: RawValue | null | undefined): any;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
+export declare function isOpacityOrNull(v: RawValue): any;

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

@@ -1,4 +1,5 @@
 import { type CurveFactory } from 'd3-shape';
+import callWithProps from '../helpers/callWithProps.js';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: callWithProps;
+        dodgeY: callWithProps;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: renameChannels;
+        dodgeY: renameChannels;
         fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
         stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
@@ -74,7 +75,7 @@ declare function $$render<Datum extends DataRow>(): {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
         areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "y1" | "y2"> & {

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

@@ -1,5 +1,6 @@
 import type { DataRecord, ConstantAccessor, ChannelAccessor, RawValue } from '../types/index.js';
 import { type SweepOption } from '../helpers/arrowPath.js';
+import { replaceChannels } from '../transforms/rename.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -8,14 +9,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        dodgeX: replaceChannels;
+        dodgeY: replaceChannels;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

package/dist/marks/AxisX.svelte

@@ -18,12 +18,12 @@
     import { autoTicks } from '../helpers/autoTicks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { extent } from 'd3-array';
 
-    interface AxisXMarkProps
-        extends Omit<
-            BaseMarkProps<Datum>,
-            'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
-        > {
+    interface AxisXMarkProps extends Omit<
+        BaseMarkProps<Datum>,
+        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+    > {
         data?: Datum[];
         automatic?: boolean;
         title?: string | false | null;
@@ -68,14 +68,15 @@
         ...getPlotDefaults().axisX
     };
 
+    const { ticks: magicTicks } = $derived({ ...DEFAULTS, ...markProps });
+
     const {
-        ticks: magicTicks,
-        data = Array.isArray(magicTicks) ? magicTicks : [],
+        data,
         automatic = false,
         title,
         anchor,
         facetAnchor = 'auto',
-        interval = typeof magicTicks === 'string' ? magicTicks : undefined,
+        interval,
         tickSize,
         tickFontSize,
         tickPadding,
@@ -83,11 +84,17 @@
         tickFormat,
         tickClass,
         class: className,
-        tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
+        tickCount,
         tickSpacing,
         text = true,
         ...options
-    }: AxisXMarkProps = $derived({ ...DEFAULTS, ...markProps });
+    }: AxisXMarkProps = $derived({
+        data: Array.isArray(magicTicks) ? magicTicks : [],
+        tickCount: typeof magicTicks === 'number' ? magicTicks : undefined,
+        interval: typeof magicTicks === 'string' ? magicTicks : undefined,
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -115,6 +122,21 @@
               )
     );
 
+    const useCompactNotation = $derived.by(() => {
+        const range =
+            extent(plot.scales.x.domain).filter(
+                (d): d is number => typeof d === 'number' && Number.isFinite(d)
+            ) ?? [];
+
+        if (range[0] === undefined || range[1] === undefined) return false;
+        const crossesZero = range[0] <= 0 && range[1] >= 0;
+        if (crossesZero) return true;
+        const magnitudes = range.map((d) =>
+            d === 0 ? -Infinity : Math.floor(Math.log10(Math.abs(d)))
+        );
+        return magnitudes[0] !== magnitudes[1];
+    });
+
     const tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
 
     const useTickFormat = $derived(
@@ -133,10 +155,8 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
-                            // use compact notation if range covers multipe magnitudes
-                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
-                                ? { notation: 'compact' }
-                                : {}),
+                            // use compact notation if range covers multiple magnitudes
+                            ...(useCompactNotation ? { notation: 'compact' } : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.x.percent ? 'percent' : 'decimal'
                         }).format(d)

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

@@ -1,5 +1,6 @@
 import type { RawValue, ConstantAccessor } from '../types/index.js';
 import type * as CSS from 'csstype';
+import autoTimeFormat from '../helpers/autoTimeFormat.js';
 declare function $$render<Datum extends RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -8,14 +9,14 @@ declare function $$render<Datum extends RawValue>(): {
         fy: import("../types/channel").ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: autoTimeFormat;
+        dodgeY: autoTimeFormat;
         fill: import("../types/channel").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: import("../types/channel").ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -63,7 +64,7 @@ declare function $$render<Datum extends RawValue>(): {
         class: string;
         style: string;
         cursor: ConstantAccessor<CSS.Property.Cursor, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "href" | "target" | "title"> & {
+    }>, "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[];
         automatic?: boolean;
         title?: string | false | null;

package/dist/marks/AxisY.svelte

@@ -17,12 +17,12 @@
     import { autoTicks } from '../helpers/autoTicks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { extent } from 'd3-array';
 
-    interface AxisYMarkProps
-        extends Omit<
-            BaseMarkProps<Datum>,
-            'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
-        > {
+    interface AxisYMarkProps extends Omit<
+        BaseMarkProps<Datum>,
+        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+    > {
         data?: Datum[];
         automatic?: boolean;
         title?: string | false | null;
@@ -65,15 +65,16 @@
         ...getPlotDefaults().axisY
     };
 
+    const { ticks: magicTicks } = $derived({ ...DEFAULTS, ...markProps });
+
     const {
-        ticks: magicTicks,
-        data = Array.isArray(magicTicks) ? magicTicks : [],
+        data,
         automatic = false,
         title,
         anchor = 'left',
         class: className,
         facetAnchor = 'auto',
-        interval = typeof magicTicks === 'string' ? magicTicks : undefined,
+        interval,
         lineAnchor = 'center',
         textAnchor,
         tickSize,
@@ -81,11 +82,17 @@
         tickPadding,
         tickFormat,
         tickClass,
-        tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
+        tickCount,
         tickSpacing,
         text = true,
         ...options
-    }: AxisYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+    }: AxisYMarkProps = $derived({
+        data: Array.isArray(magicTicks) ? magicTicks : [],
+        tickCount: typeof magicTicks === 'number' ? magicTicks : undefined,
+        interval: typeof magicTicks === 'string' ? magicTicks : undefined,
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -113,6 +120,21 @@
               )
     );
 
+    const useCompactNotation = $derived.by(() => {
+        const range =
+            extent(plot.scales.y.domain).filter(
+                (d): d is number => typeof d === 'number' && Number.isFinite(d)
+            ) ?? [];
+
+        if (range[0] === undefined || range[1] === undefined) return false;
+        const crossesZero = range[0] <= 0 && range[1] >= 0;
+        if (crossesZero) return true;
+        const magnitudes = range.map((d) =>
+            d === 0 ? -Infinity : Math.floor(Math.log10(Math.abs(d)))
+        );
+        return magnitudes[0] !== magnitudes[1];
+    });
+
     const tickFmt = $derived(tickFormat || plot.options.y.tickFormat);
 
     const useTickFormat = $derived(
@@ -131,10 +153,8 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
-                            // use compact notation if range covers multipe magnitudes
-                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
-                                ? { notation: 'compact' }
-                                : {}),
+                            // use compact notation if range covers multiple magnitudes
+                            ...(useCompactNotation ? { notation: 'compact' } : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.y.percent ? 'percent' : 'decimal'
                         }).format(d)
@@ -161,7 +181,7 @@
         facetAnchor !== 'auto' ? facetAnchor : anchor === 'left' ? 'left-empty' : 'right-empty'
     );
 
-    const showAxis = $state(
+    const showAxis = $derived(
         useFacetAnchor === 'left'
             ? left
             : useFacetAnchor === 'right'

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

@@ -1,4 +1,5 @@
 import type { RawValue, ConstantAccessor } from '../types/index.js';
+import autoTimeFormat from '../helpers/autoTimeFormat.js';
 declare function $$render<Datum extends RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends RawValue>(): {
         fy: import("../types/channel").ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: autoTimeFormat;
+        dodgeY: autoTimeFormat;
         fill: import("../types/channel").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: import("../types/channel").ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -62,7 +63,7 @@ declare function $$render<Datum extends RawValue>(): {
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "href" | "target" | "title"> & {
+    }>, "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[];
         automatic?: boolean;
         title?: string | false | null;

package/dist/marks/BarX.svelte

@@ -4,9 +4,7 @@
 -->
 <script lang="ts" generics="Datum extends DataRow">
     interface BarXMarkProps
-        extends BaseMarkProps<Datum>,
-            LinkableMarkProps<Datum>,
-            BaseRectMarkProps<Datum> {
+        extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, BaseRectMarkProps<Datum> {
         data: Datum[];
         x?: ChannelAccessor<Datum>;
         x1?: ChannelAccessor<Datum>;

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

@@ -1,3 +1,4 @@
+import { stackX } from '../index.js';
 import type { StackOptions } from '../transforms/stack.js';
 import type { DataRow } from '../types/index.js';
 import type { BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: stackX;
+        dodgeY: stackX;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;

package/dist/marks/BarY.svelte

@@ -5,9 +5,7 @@
 
 <script lang="ts" generics="Datum extends DataRow">
     interface BarYMarkProps
-        extends BaseMarkProps<Datum>,
-            LinkableMarkProps<Datum>,
-            BaseRectMarkProps<Datum> {
+        extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, BaseRectMarkProps<Datum> {
         data: Datum[];
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;