svelteplot 0.10.3 → 0.11.0

package/dist/helpers/resolve.js

@@ -8,19 +8,21 @@ export function resolveProp(accessor, datum, _defaultValue = null) {
     if (typeof accessor === 'function') {
         const accessorFn = accessor;
         // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
-        // "recordized" by the recordi e transform. We want to hide this wrapping to the user
+        // "recordized" by the recordize transform. We want to hide this wrapping to the user
         // so we're passing the original value to accessor functions instead of our wrapped record
+        const d = datum;
         return datum == null
             ? accessorFn()
-            : accessorFn(datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
+            : accessorFn(d[RAW_VALUE] != null ? d[RAW_VALUE] : datum, d[INDEX]);
     }
     else {
         const accessorValue = accessor;
-        // accessor may be a
-        if ((typeof accessorValue === 'string' || typeof accessorValue === 'symbol') &&
-            datum &&
-            datum[accessorValue] !== undefined) {
-            return datum[accessor];
+        // accessor may be a column name
+        if ((typeof accessorValue === 'string' || typeof accessorValue === 'symbol') && datum) {
+            const d = datum;
+            if (d[accessorValue] !== undefined) {
+                return d[accessorValue];
+            }
         }
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
@@ -51,19 +53,20 @@ export function resolveChannel(channel, datum, channels) {
 }
 function resolve(datum, accessor, channel, scale) {
     if (isDataRecord(datum)) {
+        const d = datum;
         // use accessor function
         if (typeof accessor === 'function')
             // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
             // "recordized" by the recordize transform. We want to hide this wrapping to the user
             // so we're passing the original value to accessor functions instead of our wrapped record
-            return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum, datum?.[INDEX]);
+            return accessor(d[RAW_VALUE] != null ? d[RAW_VALUE] : datum, d[INDEX]);
         // use accessor string
         if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
-            datum[accessor] !== undefined)
-            return datum[accessor];
+            d[accessor] !== undefined)
+            return d[accessor];
         // fallback to channel name as accessor
-        if (accessor === null && datum[channel] !== undefined)
-            return datum[channel];
+        if (accessor === null && d[channel] !== undefined)
+            return d[channel];
         return isRawValue(accessor) ? accessor : null;
     }
     else if (Array.isArray(datum) &&
@@ -73,8 +76,9 @@ function resolve(datum, accessor, channel, scale) {
     }
     else {
         // return single value or accessor
+        const d = datum;
         return typeof accessor === 'function'
-            ? accessor(datum, datum?.[INDEX])
+            ? accessor(datum, d?.[INDEX])
             : accessor !== null && isRawValue(accessor)
                 ? accessor
                 : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
@@ -89,7 +93,6 @@ const scaledStyleProps = {
     strokeOpacity: 'stroke-opacity',
     opacity: 'opacity'
 };
-const scaledStylePropsKeys = Object.keys(scaledStyleProps);
 // TODO: find a better name
 const oppositeColor = {
     fill: 'stroke',
@@ -105,7 +108,11 @@ export function resolveScaledStyleProps(datum, channels, useScale, plot, default
             : {}),
         ...Object.fromEntries(Object.entries(scaledStyleProps)
             .filter(([key]) => channels[key] != null)
-            .map(([key, cssAttr]) => [key, cssAttr, resolveChannel(key, datum, channels)])
+            .map(([key, cssAttr]) => [
+            key,
+            cssAttr,
+            resolveChannel(key, datum, channels)
+        ])
             .filter(([key, , value]) => isValid(value) || key === 'fill' || key === 'stroke')
             .map(([key, cssAttr, value]) => {
             if (useScale[key]) {
@@ -143,7 +150,9 @@ export function resolveStyles(plot, datum, channels, defaultColorProp = null, us
             .map(([key, cssAttr]) => [
             key,
             cssAttr,
-            recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
+            (recomputeChannels
+                ? resolveChannel(key, datum?.datum, channels)
+                : datum?.[key])
         ])
             .filter(([key, , value]) => isValid(value) || key === 'fill' || key === 'stroke')
             .map(([key, cssAttr, value]) => {

package/dist/helpers/scales.d.ts

@@ -1,23 +1,23 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
+import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotScaleFunction, ResolvedPlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
 /**
  * compute the plot scales
  */
-export declare function computeScales(plotOptions: PlotOptions, plotWidth: number, plotHeight: number, plotHasFilledDotMarks: boolean, marks: Mark<GenericMarkOptions>[], plotDefaults: PlotDefaults): PlotScales;
-export declare function createScale<T extends ScaleOptions>(name: ScaleName, scaleOptions: T, marks: Mark<GenericMarkOptions>[], plotOptions: PlotOptions, plotWidth: number, plotHeight: number, plotHasFilledDotMarks: boolean, plotDefaults: PlotDefaults): {
-    type: string;
+export declare function computeScales(plotOptions: ResolvedPlotOptions, plotWidth: number, plotHeight: number, plotHasFilledDotMarks: boolean, marks: Mark<GenericMarkOptions>[], plotDefaults: PlotDefaults): PlotScales;
+export declare function createScale(name: ScaleName, scaleOptions: Partial<ScaleOptions>, marks: Mark<GenericMarkOptions>[], plotOptions: ResolvedPlotOptions, plotWidth: number, plotHeight: number, plotHasFilledDotMarks: boolean, plotDefaults: PlotDefaults): {
+    type: ScaleType;
     domain: number[];
     range: number[];
-    fn: (() => string) | (() => number);
+    fn: PlotScaleFunction;
     skip: Map<any, any>;
     isDummy: boolean;
-    manualActiveMarks?: undefined;
-    uniqueScaleProps?: undefined;
+    manualActiveMarks: number;
+    uniqueScaleProps: Set<unknown>;
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
-    range: any;
-    fn: any;
+    domain: RawValue[];
+    range: RawValue[];
+    fn: PlotScaleFunction;
     skip: Map<ScaledChannelName, Set<symbol>>;
     manualActiveMarks: number;
     uniqueScaleProps: Set<ChannelAccessor>;

package/dist/helpers/scales.js

@@ -7,6 +7,17 @@ import isDataRecord from './isDataRecord.js';
 import { createProjection } from './projection.js';
 import { maybeInterval } from './autoTicks.js';
 import { IS_SORTED } from '../transforms/sort.js';
+function normalizeScaleFn(fn) {
+    const out = fn;
+    out.range ||= () => [];
+    out.invert ||= (value) => value;
+    out.bandwidth ||= () => 0;
+    out.ticks ||= () => [];
+    out.quantiles ||= () => [];
+    out.thresholds ||= () => [];
+    out.domain ||= () => [];
+    return out;
+}
 /**
  * compute the plot scales
  */
@@ -38,7 +49,17 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         // no scale defined, return a dummy scale
         const fn = name === 'color' ? () => 'currentColor' : () => 0;
         fn.range = name === 'color' ? () => ['currentColor'] : () => [0];
-        return { type: 'linear', domain: [0], range: [0], fn, skip: new Map(), isDummy: true };
+        const normalizedFn = normalizeScaleFn(fn);
+        return {
+            type: 'linear',
+            domain: [0],
+            range: [0],
+            fn: normalizedFn,
+            skip: new Map(),
+            isDummy: true,
+            manualActiveMarks: 0,
+            uniqueScaleProps: new Set()
+        };
     }
     // gather all marks that use channels which support this scale
     const dataValues = new Set();
@@ -145,7 +166,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
     }
     // construct domain from data values
     const valueArr = [...dataValues.values(), ...(scaleOptions.domain || [])].filter((d) => d != null);
-    const type = scaleOptions.type === 'auto'
+    const type = !scaleOptions.type || scaleOptions.type === 'auto'
         ? inferScaleType(name, valueArr, markTypes, scaleOptions)
         : scaleOptions.type;
     if (VALID_SCALE_TYPES[name] && !VALID_SCALE_TYPES[name].has(type)) {
@@ -181,10 +202,12 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
             }
         }
     }
-    if (!scaleOptions.scale) {
+    // `scale` is a factory function injected by Plot.svelte (autoScale/autoScaleColor)
+    const scaleFn = scaleOptions.scale;
+    if (!scaleFn) {
         throw new Error(`No scale function defined for ${name}`);
     }
-    const fn = scaleOptions.scale({
+    const rawFn = scaleFn({
         name,
         type,
         domain,
@@ -195,6 +218,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         plotHasFilledDotMarks,
         plotDefaults
     });
+    const fn = normalizeScaleFn(rawFn);
     const range = fn.range();
     return {
         type,
@@ -241,14 +265,16 @@ export function inferScaleType(name, dataValues, markTypes, scaleOptions = {}) {
         return 'ordinal';
     if (name === 'x' || name === 'y') {
         // if for a positional scale we may infer the scale type from the scale options
-        if (scaleOptions.nice || scaleOptions.zero)
-            return 'linear';
         if (scaleOptions.domain && scaleOptions.domain.length === 2) {
             if (scaleOptions.domain.every(Number.isFinite))
                 return 'linear';
             if (scaleOptions.domain.every(isDate))
                 return 'time';
         }
+        if (scaleOptions.zero)
+            return 'linear';
+        if (scaleOptions.nice)
+            return dataValues.length > 0 && dataValues.every(isDateOrNull) ? 'time' : 'linear';
     }
     // for positional scales, try to pick a scale that's required by the mark types
     if (name === 'y' && Array.from(markTypes).some((d) => markTypesWithBandDefault.y.has(d)))
@@ -316,7 +342,7 @@ export function projectXY(scales, x, y, useXScale = true, useYScale = true) {
         // TODO: pretty sure this is not how projection streams are supposed to be used
         // efficiently, in observable plot, all data points of a mark are projected using
         // the same stream
-        let x_, y_;
+        let x_ = 0, y_ = 0;
         const stream = scales.projection.stream({
             point(px, py) {
                 x_ = px;
@@ -332,19 +358,23 @@ export function projectXY(scales, x, y, useXScale = true, useYScale = true) {
     ];
 }
 export function projectX(channel, scales, value) {
-    return (scales.x.fn(value) +
+    const x = scales.x.fn(value) ?? NaN;
+    const xBandwidth = scales.x.type === 'band' ? scales.x.fn.bandwidth() : 0;
+    return (x +
         (channel === 'x' && scales.x.type === 'band'
-            ? scales.x.fn.bandwidth() * 0.5
+            ? xBandwidth * 0.5
             : channel === 'x2' && scales.x.type === 'band'
-                ? scales.x.fn.bandwidth()
+                ? xBandwidth
                 : 0));
 }
 export function projectY(channel, scales, value) {
-    return (scales.y.fn(value) +
+    const y = scales.y.fn(value) ?? NaN;
+    const yBandwidth = scales.y.type === 'band' ? scales.y.fn.bandwidth() : 0;
+    return (y +
         (channel === 'y' && scales.y.type === 'band'
-            ? scales.y.fn.bandwidth() * 0.5
+            ? yBandwidth * 0.5
             : channel === 'y2' && scales.y.type === 'band'
-                ? scales.y.fn.bandwidth()
+                ? yBandwidth
                 : 0));
 }
 export function isOrdinalScale(scaleType) {

package/dist/helpers/time.d.ts

@@ -1,7 +1,14 @@
+type CountableTimeInterval = {
+    floor: (date: Date) => Date;
+    offset: (date: Date, step?: number) => Date;
+    range: (start: Date, stop: Date, step?: number) => Date[];
+    every: (step: number) => CountableTimeInterval | null | undefined;
+};
 export declare const durations: Map<string, number>;
 export declare const intervalDuration: unique symbol;
 export declare const intervalType: unique symbol;
 export declare function parseTimeInterval(input: string): [string, number];
-export declare function maybeTimeInterval(input: string): any;
-export declare function maybeUtcInterval(input: string): any;
-export declare function generalizeTimeInterval(interval: any, n: any): any;
+export declare function maybeTimeInterval(input: string): CountableTimeInterval | undefined;
+export declare function maybeUtcInterval(input: string): CountableTimeInterval | undefined;
+export declare function generalizeTimeInterval(interval: CountableTimeInterval, n: number): CountableTimeInterval | undefined;
+export {};

package/dist/helpers/time.js

@@ -8,7 +8,6 @@
  */
 import { bisector } from 'd3-array';
 import { utcSecond, utcMinute, utcHour, unixDay, utcWeek, utcMonth, utcYear, utcMonday, utcTuesday, utcWednesday, utcThursday, utcFriday, utcSaturday, utcSunday, timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear, timeMonday, timeTuesday, timeWednesday, timeThursday, timeFriday, timeSaturday, timeSunday } from 'd3-time';
-// import {orderof} from "./options.js";
 const durationSecond = 1000;
 const durationMinute = durationSecond * 60;
 const durationHour = durationMinute * 60;
@@ -187,6 +186,8 @@ export function maybeUtcInterval(input) {
 }
 function asInterval([name, period], type) {
     let interval = (type === 'time' ? timeIntervals : utcIntervals).get(name);
+    if (!interval)
+        throw new Error('invalid interval: ' + name);
     if (period > 1) {
         interval = interval.every(period);
         interval[intervalDuration] = durations.get(name) * period;

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './plotDefaults.js';
+export { usePlot } from './usePlot.svelte.js';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './plotDefaults.js';
+export { usePlot } from './usePlot.svelte.js';

package/dist/hooks/plotDefaults.d.ts

@@ -1,3 +1,5 @@
-import type { PlotDefaults } from '../types';
+import type { PlotDefaults } from '../types/index.js';
+/** sets default options for all Plot components in this component tree, merging with any existing defaults from parent contexts */
 export declare function setPlotDefaults(plotDefaults: Partial<PlotDefaults>): void;
+/** retrieves the current plot defaults from the Svelte context, or an empty object if none have been set */
 export declare function getPlotDefaults(): Partial<PlotDefaults>;

package/dist/hooks/plotDefaults.js

@@ -1,10 +1,13 @@
 import { getContext, hasContext, setContext } from 'svelte';
 const PLOT_DEFAULTS_KEY = Symbol('svelteplot/defaults');
+/** sets default options for all Plot components in this component tree, merging with any existing defaults from parent contexts */
 export function setPlotDefaults(plotDefaults) {
     const existingDefaults = getPlotDefaults();
-    const mergedDefaults = { ...existingDefaults, ...plotDefaults };
+    const normalizedDefaults = normalizePlotDefaults(plotDefaults, existingDefaults);
+    const mergedDefaults = { ...existingDefaults, ...normalizedDefaults };
     setContext(PLOT_DEFAULTS_KEY, mergedDefaults);
 }
+/** retrieves the current plot defaults from the Svelte context, or an empty object if none have been set */
 export function getPlotDefaults() {
     return hasContext(PLOT_DEFAULTS_KEY)
         ? getContext(PLOT_DEFAULTS_KEY)
@@ -14,3 +17,32 @@ export function getPlotDefaults() {
                     getContext('svelteplot/defaults'))
                 : {};
 }
+function normalizePlotDefaults(plotDefaults, existingDefaults) {
+    const grid = normalizeGridDefaults(plotDefaults.grid, existingDefaults.grid);
+    const gridX = normalizeGridDefaults(plotDefaults.gridX, existingDefaults.gridX);
+    const gridY = normalizeGridDefaults(plotDefaults.gridY, existingDefaults.gridY);
+    const frame = normalizeFrameDefaults(plotDefaults.frame, existingDefaults.frame);
+    return {
+        ...plotDefaults,
+        ...(grid !== undefined ? { grid } : {}),
+        ...(gridX !== undefined ? { gridX } : {}),
+        ...(gridY !== undefined ? { gridY } : {}),
+        ...(frame !== undefined ? { frame } : {})
+    };
+}
+function normalizeGridDefaults(input, existing) {
+    if (input !== true)
+        return input;
+    return {
+        ...(typeof existing === 'object' ? existing : {}),
+        implicit: true
+    };
+}
+function normalizeFrameDefaults(input, existing) {
+    if (input !== true)
+        return input;
+    return {
+        ...(typeof existing === 'object' ? existing : {}),
+        implicit: true
+    };
+}

package/dist/hooks/usePlot.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { PlotOptions } from '../types/plot';
-import type { PlotScales, PlotState as TPlotState } from '../types';
+import type { ResolvedPlotOptions } from '../types/plot.js';
+import type { PlotScales, PlotState as TPlotState } from '../types/index.js';
 /**
- * Internal state representation of a Plot.
+ * internal state representation of a Plot, using Svelte 5 runes for reactivity
  */
 declare class PlotState implements TPlotState {
     width: number;
     height: number;
-    options: PlotOptions;
+    options: ResolvedPlotOptions;
     facetWidth: number;
     facetHeight: number;
     plotWidth: number;
@@ -24,28 +24,13 @@ declare class PlotState implements TPlotState {
     hasFilledDotMarks: boolean;
     css: ((d: string) => string) | null;
     constructor(state: PlotState);
+    /** merges partial state into the current plot state */
     update(newState: Partial<PlotState>): void;
-    get publicState(): PublicPlotState;
+    /** returns a read-only wrapper exposing only public properties */
+    get publicState(): Readonly<TPlotState>;
 }
-/**
- * A public-facing wrapper around PlotState that exposes only read-only properties.
- */
-declare class PublicPlotState {
-    #private;
-    constructor(plotState: PlotState);
-    get width(): number;
-    get height(): number;
-    get options(): PlotOptions;
-    get scales(): PlotScales;
-    get plotWidth(): number;
-    get plotHeight(): number;
-    get facetWidth(): number;
-    get facetHeight(): number;
-    get body(): HTMLDivElement;
-    get colorSymbolRedundant(): boolean;
-    get hasFilledDotMarks(): boolean;
-    get css(): ((d: string) => string) | null;
-}
-export declare function setPlot(initialState: PlotState): PlotState;
+/** creates a new PlotState instance from the given initial state */
+export declare function setPlot(initialState: TPlotState): PlotState;
+/** returns the current Plot's public state from Svelte context. Must be called within a `<Plot>` component tree. */
 export declare function usePlot(): Readonly<TPlotState>;
 export {};

package/dist/hooks/usePlot.svelte.js

@@ -1,9 +1,8 @@
 import { getContext } from 'svelte';
 /**
- * Internal state representation of a Plot.
+ * internal state representation of a Plot, using Svelte 5 runes for reactivity
  */
 class PlotState {
-    // Define properties and methods for PlotState as needed
     width = $state(50);
     height = $state(50);
     options = $state({});
@@ -11,8 +10,8 @@ class PlotState {
     facetHeight = $state(0);
     plotWidth = $state(0);
     plotHeight = $state(0);
-    scales = $state();
-    body = $state();
+    scales = $state(undefined);
+    body = $state(undefined);
     /**
      * True if there's a color scale and a symbol scale and both are bound to the same
      * single channel accessor.
@@ -27,16 +26,16 @@ class PlotState {
         // Initialization code here
         Object.assign(this, state);
     }
+    /** merges partial state into the current plot state */
     update(newState) {
         Object.assign(this, newState);
     }
+    /** returns a read-only wrapper exposing only public properties */
     get publicState() {
         return new PublicPlotState(this);
     }
 }
-/**
- * A public-facing wrapper around PlotState that exposes only read-only properties.
- */
+/** read-only wrapper around PlotState that exposes only getter properties */
 class PublicPlotState {
     #plotState;
     constructor(plotState) {
@@ -79,11 +78,13 @@ class PublicPlotState {
         return this.#plotState.css;
     }
 }
+/** creates a new PlotState instance from the given initial state */
 export function setPlot(initialState) {
     return new PlotState({
         ...initialState
     });
 }
+/** returns the current Plot's public state from Svelte context. Must be called within a `<Plot>` component tree. */
 export function usePlot() {
     const { getPlotState } = getContext('svelteplot');
     return getPlotState().publicState;

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { default as Plot } from './Plot.svelte';
 export { default as PlotCore } from './core/Plot.svelte';
 export * from './marks/index.js';
 export * from './transforms/index.js';
+export * from './hooks/index.js';
 export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
-export * from './hooks/plotDefaults.js';
-export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/index.js

@@ -2,9 +2,7 @@ export { default as Plot } from './Plot.svelte';
 export { default as PlotCore } from './core/Plot.svelte';
 export * from './marks/index.js';
 export * from './transforms/index.js';
+export * from './hooks/index.js';
 // helpers
 export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
-// hooks
-export * from './hooks/plotDefaults.js';
-export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/marks/Area.svelte

@@ -3,17 +3,29 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface AreaMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
-        data: Datum[];
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the starting horizontal position channel for the area baseline */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel for the area topline */
         x2?: ChannelAccessor<Datum>;
+        /** the starting vertical position channel for the area baseline */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position channel for the area topline */
         y2?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
         z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
         curve?: CurveName | CurveFactory;
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
+        /** controls the order of data points before rendering */
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        /** options for stacking area data values */
         stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
         areaClass?: ConstantAccessor<string, Datum>;
     }
 
@@ -21,7 +33,7 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { groups as d3Groups } from 'd3-array';
-    import { area, type CurveFactory } from 'd3-shape';
+    import { area, type Area, type CurveFactory } from 'd3-shape';
     import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
     import { isValid } from '../helpers/index.js';
@@ -39,7 +51,7 @@
         RawValue
     } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
-    import { addEventHandlers } from './helpers/events';
+    import { addEventHandlers } from './helpers/events.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
@@ -89,7 +101,7 @@
                       y0: (d: ScaledDataRecord) => d.y1,
                       y1: (d: ScaledDataRecord) => d.y2
                   })
-        })
+        }) as unknown as Area<ScaledDataRecord>
     );
 
     function groupAndSort(data: ScaledDataRecord[]) {
@@ -97,12 +109,11 @@
             ? d3Groups(data, (d) => resolveProp(groupByKey, d.datum)).map((d) => d[1])
             : [data];
         if (options.sort) {
-            return groups.toSorted((a, b) =>
-                resolveChannel('sort', a[0].datum, options) >
-                resolveChannel('sort', b[0].datum, options)
-                    ? 1
-                    : -1
-            );
+            return groups.toSorted((a, b) => {
+                const av = resolveChannel('sort', a[0].datum, options) as string | number | null;
+                const bv = resolveChannel('sort', b[0].datum, options) as string | number | null;
+                return av! > bv! ? 1 : -1;
+            });
         }
         return groups;
     }
@@ -113,8 +124,8 @@
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     required={['x1', 'y1']}
-    {...markProps}
-    {...options}>
+    {...markProps as any}
+    {...options as any}>
     {#snippet children({ mark, usedScales, scaledData })}
         {@const grouped = groupAndSort(scaledData)}
         {#if canvas}
@@ -124,7 +135,7 @@
                 {#each grouped as areaData, i (i)}
                     {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        <Anchor {options} {datum}>
+                        <Anchor options={options as any} {datum}>
                             {@const title = resolveProp(options.title, datum.datum, '')}
                             {@const [style, styleClass] = resolveStyles(
                                 plot,