svelteplot 0.10.3 → 0.11.0

package/dist/marks/helpers/Regression.svelte

@@ -1,12 +1,15 @@
 <script module lang="ts">
-    import type { BaseMarkProps, ChannelAccessor, FacetContext } from '../../types/index.js';
+    import type { BaseMarkProps, ChannelAccessor } from '../../types/index.js';
 
-    type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
+    export type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
 
-    export type RegressionMarkProps = BaseMarkProps & {
+    export type RegressionOptions = BaseMarkProps & {
+        /** the horizontal position channel; bound to the x scale */
         x: ChannelAccessor;
+        /** the vertical position channel; bound to the y scale */
         y: ChannelAccessor;
-        type: RegressionType;
+        /** the regression model type */
+        type?: RegressionType;
         /**
          * If order is specified, sets the regression's order to the specified number.
          * For example, if order is set to 4, the regression generator will perform a
@@ -16,13 +19,13 @@
          * regression line will fit your data with a high determination coefficient,
          * it may have little predictive power for data outside of your domain.
          */
-        order: number;
-        // for log
-        base: number;
-        // for loess
-        span: number;
-        // for confidence bands
-        confidence: number;
+        order?: number;
+        /** the base for logarithmic regression */
+        base?: number;
+        /** the bandwidth for LOESS regression, as a fraction of the data range (0 to 1) */
+        span?: number;
+        /** the confidence level for confidence bands (e.g. 0.95 for 95% confidence) */
+        confidence?: number | false;
     };
 </script>
 
@@ -42,25 +45,64 @@
     import { resolveChannel } from '../../helpers/resolve.js';
     import { confidenceInterval } from '../../helpers/math.js';
     import callWithProps from '../../helpers/callWithProps.js';
-    import { isDate } from '../../helpers/typeChecks.js';
-
-    const regressions = new Map<RegressionType, typeof regressionLinear>([
-        ['linear', regressionLinear],
-        ['quad', regressionQuad],
-        ['poly', regressionPoly],
-        ['exp', regressionExp],
-        ['log', regressionLog],
-        ['pow', regressionPow],
-        ['loess', regressionLoess]
-    ]);
-
-    function maybeRegression(name: string) {
-        name = `${name}`.toLowerCase();
-        if (regressions.has(name)) return regressions.get(name);
-        throw new Error('unknown regression ' + name);
+    import type { DataRecord, FacetContext, RawValue } from '../../types/index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    type RegressionData = { x: number; y: number };
+    type RegressionOutput = [number, number][] & {
+        predict?: (x: number) => number;
+        predictMany?: (points: number[]) => number[];
+    };
+    type RegressionGenerator = ((data: RegressionData[]) => RegressionOutput) & {
+        x: (fn: (d: RegressionData) => number) => RegressionGenerator;
+        y: (fn: (d: RegressionData) => number) => RegressionGenerator;
+        domain?: (domain: [number, number]) => RegressionGenerator;
+        order?: (order: number) => RegressionGenerator;
+        base?: (base: number) => RegressionGenerator;
+        bandwidth?: (span: number) => RegressionGenerator;
+    };
+    type RegressionFactory = () => RegressionGenerator;
+
+    interface RegressionProps extends RegressionOptions {
+        data: DataRecord[];
+        dependent: 'x' | 'y';
+        canvas?: boolean;
     }
 
-    import { usePlot } from '../../hooks/usePlot.svelte.js';
+    // Normalize all regression constructors behind one callable adapter shape.
+    const regressions: Record<RegressionType, RegressionFactory> = {
+        linear: regressionLinear as RegressionFactory,
+        quad: regressionQuad as RegressionFactory,
+        poly: regressionPoly as RegressionFactory,
+        exp: regressionExp as RegressionFactory,
+        log: regressionLog as RegressionFactory,
+        pow: regressionPow as RegressionFactory,
+        loess: regressionLoess as RegressionFactory
+    };
+
+    function maybeRegression(name: RegressionType): RegressionFactory {
+        const fn = regressions[name];
+        if (fn) return fn;
+        throw new Error(`unknown regression ${name}`);
+    }
+
+    // Regression engines operate on numeric domains; convert Date channels to epoch ms.
+    function toNumeric(value: RawValue): number {
+        return value instanceof Date ? value.valueOf() : Number(value);
+    }
+
+    // Convert generated points back to Date for time scales so downstream marks render correctly.
+    function toOutputX(value: number, scaleType: string): RawValue {
+        return scaleType === 'time' ? new Date(value) : value;
+    }
+
+    function makeTicks(domain: [number, number], count = 40): number[] {
+        const [start, end] = domain;
+        if (start === end) return [start];
+        const tickCount = Math.max(1, count);
+        const step = (end - start) / tickCount;
+        return Array.from({ length: tickCount + 1 }, (_, i) => start + i * step);
+    }
 
     const plot = usePlot();
 
@@ -69,91 +111,138 @@
         dependent,
         type = 'linear',
         order = 3,
-        base = 2.71828,
+        base = Math.E,
         span = 0.3,
         confidence = 0.99,
-        class: className = null,
+        class: className = '',
+        canvas = false,
         ...options
-    }: RegressionMarkProps & { dependent: 'x' | 'y' } = $props();
+    }: RegressionProps = $props();
 
     const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    let testFacet = $derived(getTestFacet());
+    const testFacet = $derived(getTestFacet());
+
+    const filteredData = $derived(data.filter((d) => testFacet(d, options as any)));
 
-    let filteredData = $derived(data.filter((d) => testFacet(d, options)));
+    const independent: 'x' | 'y' = $derived(dependent === 'x' ? 'y' : 'x');
 
-    let independent: 'x' | 'y' = $derived(dependent === 'x' ? 'y' : 'x');
+    const regressionFn = $derived(maybeRegression(type));
 
-    let regressionFn = $derived(maybeRegression(type));
+    // Build a clean numeric input set for regression fitting, dropping invalid rows early.
+    const regressionInput = $derived(
+        filteredData
+            .map((d) => ({
+                x: toNumeric(resolveChannel(independent, d, options as any)),
+                y: toNumeric(resolveChannel(dependent, d, options as any))
+            }))
+            .filter(({ x, y }) => Number.isFinite(x) && Number.isFinite(y))
+    );
 
-    let regression = $derived(
+    const independentDomain = $derived.by(() => {
+        // Prefer the active scale domain, but fall back to observed data when the scale
+        // is still initializing (common in tests and first render passes).
+        const scaleDomain = plot.scales[independent].domain;
+        const scaleStart = toNumeric(scaleDomain[0]);
+        const scaleEnd = toNumeric(scaleDomain.at(-1) ?? scaleDomain[0]);
+        if (Number.isFinite(scaleStart) && Number.isFinite(scaleEnd)) {
+            return scaleStart <= scaleEnd
+                ? ([scaleStart, scaleEnd] as [number, number])
+                : ([scaleEnd, scaleStart] as [number, number]);
+        }
+        if (regressionInput.length === 0) return null;
+        let min = Infinity;
+        let max = -Infinity;
+        for (const point of regressionInput) {
+            if (point.x < min) min = point.x;
+            if (point.x > max) max = point.x;
+        }
+        if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+        return min <= max ? ([min, max] as [number, number]) : ([max, min] as [number, number]);
+    });
+
+    const regression = $derived(
         callWithProps(regressionFn, [], {
-            x: (d) => resolveChannel(independent, d, options),
-            y: (d) => resolveChannel(dependent, d, options),
+            x: (d: RegressionData) => d.x,
+            y: (d: RegressionData) => d.y,
             ...(type === 'poly' ? { order } : {}),
             ...(type === 'log' ? { base } : {}),
-            ...(!type.startsWith('loess') ? { domain: plot.scales[independent].domain } : {}),
+            ...(type !== 'loess' && independentDomain != null ? { domain: independentDomain } : {}),
             ...(type === 'loess' ? { bandwidth: span } : {})
-        })(filteredData)
+        })(regressionInput)
     );
 
-    let regrPoints = $derived([
-        ...new Set([
-            plot.scales[independent].domain[0],
-            ...plot.scales[independent].fn.ticks(40),
-            plot.scales[independent].domain[1]
-        ])
-    ]);
-
-    let regrData = $derived(
-        regression.predictMany
-            ? regression.predictMany(regrPoints).map((__y, i) => ({ __x: regrPoints[i], __y }))
-            : regression.predict
-              ? regrPoints.map((__x) => {
-                    // const __x = x;
-                    const __y = regression.predict(__x);
-                    return { __x, __y };
-                })
-              : regression.map(([__x, __y]) => ({
-                    __x: plot.scales[independent].type === 'time' ? new Date(__x) : __x,
-                    __y
-                }))
-    );
+    const regrPoints = $derived.by(() => {
+        if (independentDomain == null) return [] as number[];
+        // Use scale ticks when available; otherwise synthesize evenly spaced samples.
+        const ticks = plot.scales[independent].fn
+            .ticks(40)
+            .map(toNumeric)
+            .filter((value): value is number => Number.isFinite(value));
+        const points = ticks.length > 0 ? ticks : makeTicks(independentDomain, 40);
+        return [
+            ...new Set(
+                [independentDomain[0], ...points, independentDomain[1]].filter(
+                    (value): value is number => Number.isFinite(value)
+                )
+            )
+        ].sort((a, b) => a - b);
+    });
 
-    let stroke = $derived(
-        options.stroke != null ? resolveChannel('stroke', filteredData[0], options) : null
-    );
+    const regrData = $derived.by(() => {
+        // Prefer batch prediction when supported, then per-point predict, then raw curve output.
+        if (typeof regression.predictMany === 'function') {
+            return regression.predictMany(regrPoints).map((__y, i) => ({
+                __x: toOutputX(regrPoints[i], plot.scales[independent].type),
+                __y
+            }));
+        }
+        if (typeof regression.predict === 'function') {
+            return regrPoints.map((point) => ({
+                __x: toOutputX(point, plot.scales[independent].type),
+                __y: regression.predict!(point)
+            }));
+        }
+        return regression.map(([__x, __y]) => ({
+            __x: toOutputX(__x, plot.scales[independent].type),
+            __y
+        }));
+    });
 
-    let confBandGen = $derived(
-        confidence !== false && regression.predict
-            ? confidenceInterval(
-                  data
-                      .map((d) => ({
-                          x: resolveChannel(independent, d, options),
-                          y: resolveChannel(dependent, d, options)
-                      }))
-                      .filter(
-                          ({ x, y }) => (Number.isFinite(x) || isDate(x)) && Number.isFinite(y)
-                      ),
-                  regression.predict,
-                  1 - confidence
-              )
+    const stroke = $derived(
+        options.stroke != null && filteredData.length
+            ? resolveChannel('stroke', filteredData[0], options as any)
             : null
     );
 
-    let confBandData = $derived(
-        confidence !== false && regression.predict
-            ? regrPoints.map((x) => {
-                  const { x: __x, left, right } = confBandGen(x);
-                  return { __x, __y1: left, __y2: right };
-              })
-            : []
+    const confBandGen = $derived(
+        // Confidence bands require a predictor function and at least 3 points.
+        confidence !== false &&
+            typeof confidence === 'number' &&
+            typeof regression.predict === 'function' &&
+            regressionInput.length > 2
+            ? confidenceInterval(regressionInput, regression.predict, 1 - confidence)
+            : null
     );
+
+    const confBandData = $derived.by(() => {
+        if (confBandGen == null) return [];
+        return regrPoints.map((x) => {
+            const { x: __x, left, right } = confBandGen(x);
+            return {
+                __x: toOutputX(__x, plot.scales[independent].type),
+                __y1: left,
+                __y2: right
+            };
+        });
+    });
 </script>
 
 {#if filteredData.length}
+    <!-- TODO: when canvas rendering is requested, render both marks in same <canvas> -->
     <g class="regression-{independent} {className || ''}">
         <Line
             data={regrData}
+            {canvas}
             {...{
                 ...options,
                 fx: null,
@@ -165,6 +254,7 @@
         {#if confBandData.length}
             <Area
                 data={confBandData}
+                {canvas}
                 {...dependent === 'y'
                     ? { x1: '__x', y1: '__y1', y2: '__y2' }
                     : { y1: '__x', x1: '__y1', x2: '__y2' }}

package/dist/marks/helpers/Regression.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { BaseMarkProps, ChannelAccessor } from '../../types/index.js';
-type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
-export type RegressionMarkProps = BaseMarkProps & {
+export type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
+export type RegressionOptions = BaseMarkProps & {
+    /** the horizontal position channel; bound to the x scale */
     x: ChannelAccessor;
+    /** the vertical position channel; bound to the y scale */
     y: ChannelAccessor;
-    type: RegressionType;
+    /** the regression model type */
+    type?: RegressionType;
     /**
      * If order is specified, sets the regression's order to the specified number.
      * For example, if order is set to 4, the regression generator will perform a
@@ -13,11 +16,20 @@ export type RegressionMarkProps = BaseMarkProps & {
      * regression line will fit your data with a high determination coefficient,
      * it may have little predictive power for data outside of your domain.
      */
-    order: number;
-    base: number;
-    span: number;
-    confidence: number;
+    order?: number;
+    /** the base for logarithmic regression */
+    base?: number;
+    /** the bandwidth for LOESS regression, as a fraction of the data range (0 to 1) */
+    span?: number;
+    /** the confidence level for confidence bands (e.g. 0.95 for 95% confidence) */
+    confidence?: number | false;
 };
-declare const Regression: import("svelte").Component<any, {}, "">;
+import type { DataRecord } from '../../types/index.js';
+interface RegressionProps extends RegressionOptions {
+    data: DataRecord[];
+    dependent: 'x' | 'y';
+    canvas?: boolean;
+}
+declare const Regression: import("svelte").Component<RegressionProps, {}, "">;
 type Regression = ReturnType<typeof Regression>;
 export default Regression;

package/dist/marks/helpers/RuleCanvas.svelte

@@ -62,21 +62,24 @@ Helper component for rendering Rule marks (RuleX and RuleY) in canvas
                 for (const datum of data) {
                     if (!datum.valid) continue;
 
-                    let { stroke, ...restStyles } = resolveScaledStyleProps(
+                    const styleProps = resolveScaledStyleProps(
                         datum.datum,
                         options,
                         usedScales,
                         plot,
                         'stroke'
-                    );
+                    ) as Record<string, unknown>;
 
-                    const opacity = maybeOpacity(restStyles['opacity']);
-                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+                    const opacity = maybeOpacity(styleProps['opacity']);
+                    const strokeOpacity = maybeOpacity(styleProps['stroke-opacity']);
 
-                    stroke = resolveColor(stroke || 'currentColor', canvas);
+                    const stroke = resolveColor(
+                        String(styleProps.stroke || 'currentColor'),
+                        canvas
+                    );
 
                     if (stroke && stroke !== 'none') {
-                        const resolvedLinecap = restStyles['stroke-linecap'] as
+                        const resolvedLinecap = styleProps['stroke-linecap'] as
                             | CanvasLineCap
                             | undefined
                             | null;

package/dist/marks/helpers/TextCanvas.svelte

@@ -1,5 +1,5 @@
-<script lang="ts" generics="Datum extends DataRecord">
-    interface TextCanvasProps<Datum extends DataRecord> {
+<script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
+    interface TextCanvasProps<Datum> {
         data: ScaledDataRecord<Datum>[];
         options: BaseMarkProps<Datum> & {
             x?: ChannelAccessor<Datum>;
@@ -47,8 +47,8 @@
         UsedScales
     } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { CSS_VAR } from '../../constants';
-    import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles';
+    import { CSS_VAR } from '../../constants.js';
+    import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles.js';
     import { usePlot } from '../../hooks/usePlot.svelte.js';
     import CanvasLayer from './CanvasLayer.svelte';
     import { resolveColor } from './canvas.js';
@@ -164,7 +164,11 @@
                 for (const datum of data) {
                     if (!datum.valid) continue;
 
-                    const frameAnchor = resolveProp(options.frameAnchor, datum.datum, 'middle');
+                    const frameAnchor = resolveProp(
+                        options.frameAnchor,
+                        datum.datum as any,
+                        'middle'
+                    );
                     const isLeft =
                         frameAnchor === 'left' ||
                         frameAnchor === 'top-left' ||
@@ -206,7 +210,7 @@
                     const lineAnchor = normalizeLineAnchor(
                         resolveProp(
                             options.lineAnchor,
-                            datum.datum,
+                            datum.datum as any,
                             options.y != null
                                 ? 'middle'
                                 : isTop
@@ -218,7 +222,7 @@
                     );
                     const defaultTextAnchor = isLeft ? 'start' : isRight ? 'end' : 'middle';
                     const styleProps = resolveScaledStyleProps(
-                        datum.datum,
+                        datum.datum as any,
                         {
                             ...DEFAULT_TEXT_OPTIONS,
                             textAnchor: defaultTextAnchor,
@@ -227,7 +231,7 @@
                         usedScales,
                         plot,
                         'fill'
-                    );
+                    ) as Record<string, unknown>;
 
                     const inheritedFontSize = inheritedFontStyles.fontSize || '12px';
                     const { css: fontSize, numeric: fontSizePx } = toFontSize(
@@ -259,7 +263,7 @@
                             Math.PI) /
                         180;
 
-                    const textLines = String(resolveProp(options.text, datum.datum, ''))
+                    const textLines = String(resolveProp(options.text, datum.datum as any, ''))
                         .split('\n')
                         .map((line) => textTransform(line, textTransformValue));
 

package/dist/marks/helpers/TextCanvas.svelte.d.ts

@@ -1,6 +1,6 @@
 import type * as CSS from 'csstype';
 import type { BaseMarkProps, ChannelAccessor, ConstantAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
-interface TextCanvasProps<Datum extends DataRecord> {
+interface TextCanvasProps<Datum> {
     data: ScaledDataRecord<Datum>[];
     options: BaseMarkProps<Datum> & {
         x?: ChannelAccessor<Datum>;
@@ -24,14 +24,14 @@ interface TextCanvasProps<Datum extends DataRecord> {
     };
     usedScales: UsedScales;
 }
-declare function $$render<Datum extends DataRecord>(): {
+declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
     props: TextCanvasProps<Datum>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Datum extends DataRecord> {
+declare class __sveltets_Render<Datum = DataRecord | GeoJSON.GeoJsonObject> {
     props(): ReturnType<typeof $$render<Datum>>['props'];
     events(): ReturnType<typeof $$render<Datum>>['events'];
     slots(): ReturnType<typeof $$render<Datum>>['slots'];
@@ -39,12 +39,12 @@ declare class __sveltets_Render<Datum extends DataRecord> {
     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']>> & {
+    new <Datum = DataRecord | GeoJSON.GeoJsonObject>(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']>;
+    <Datum = DataRecord | GeoJSON.GeoJsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TextCanvas: $$IsomorphicComponent;
-type TextCanvas<Datum extends DataRecord> = InstanceType<typeof TextCanvas<Datum>>;
+type TextCanvas<Datum = DataRecord | GeoJSON.GeoJsonObject> = InstanceType<typeof TextCanvas<Datum>>;
 export default TextCanvas;

package/dist/marks/helpers/TickCanvas.svelte

@@ -96,17 +96,17 @@
                 };
 
                 const prepareStyle = (datum: ScaledDataRecord<Datum>) => {
-                    let { stroke, ...restStyles } = resolveScaledStyleProps(
+                    const styleProps = resolveScaledStyleProps(
                         datum.datum,
                         options,
                         usedScales,
                         plot,
                         'stroke'
-                    );
+                    ) as Record<string, unknown>;
 
-                    const opacity = maybeOpacity(restStyles['opacity']);
-                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
-                    const lineCap = normalizeLineCap(restStyles['stroke-linecap']);
+                    const opacity = maybeOpacity(styleProps['opacity']);
+                    const strokeOpacity = maybeOpacity(styleProps['stroke-opacity']);
+                    const lineCap = normalizeLineCap(styleProps['stroke-linecap']);
                     const strokeWidth = +(resolveProp(
                         options.strokeWidth,
                         datum.datum,
@@ -121,6 +121,7 @@
                         | number
                         | string;
 
+                    const stroke = styleProps.stroke;
                     const strokeValue = String(stroke || 'currentColor');
                     const alpha = opacity * strokeOpacity;
                     const styleKey = `${strokeValue}|${lineCap}|${strokeWidth}|${alpha}`;

package/dist/marks/helpers/TrailCanvas.svelte

@@ -1,22 +1,22 @@
 <script lang="ts" generics="Datum extends DataRecord">
     import type {
-        Mark,
-        BaseMarkProps,
         ScaledDataRecord,
         UsedScales,
         CurveName,
-        ConstantAccessor
+        ConstantAccessor,
+        DataRecord,
+        ChannelAccessor
     } from '../../types/index.js';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
     import type { CurveFactory } from 'd3-shape';
-    import { trailPath, type TrailSample } from './trail';
-    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve';
-    import { usePlot } from '../../hooks/usePlot.svelte.js';
+    import { trailPath, type TrailSample } from './trail.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { usePlot } from '../../index.js';
 
-    interface TrailCanvasProps<Datum> {
+    interface TrailCanvasProps<Datum extends object> {
         curve?: CurveName | CurveFactory;
         tension?: number;
         cap?: 'butt' | 'round';
@@ -24,10 +24,8 @@
         data: ScaledDataRecord<Datum>[][];
         usedScales: UsedScales;
         options: {
-            fill?: ConstantAccessor<string, Datum>;
+            fill?: ChannelAccessor<Datum>;
             defined?: ConstantAccessor<boolean, Datum>;
-            opacity?: ConstantAccessor<number, Datum>;
-            'fill-opacity'?: ConstantAccessor<number, Datum>;
         };
     }
 
@@ -71,22 +69,22 @@
                     const defined = trailData.map(
                         (d) =>
                             d.valid &&
-                            d.r >= 0 &&
-                            (resolveProp(options.defined, d.datum, true) ?? true)
+                            (d.r ?? 0) >= 0 &&
+                            (resolveProp(options.defined as any, d.datum, true) ?? true)
                     );
 
-                    let { fill, ...restStyles } = resolveScaledStyleProps(
+                    const styleProps = resolveScaledStyleProps(
                         firstPoint.datum,
-                        options,
+                        options as any,
                         usedScales,
                         plot,
                         'fill'
-                    );
+                    ) as Record<string, unknown>;
 
-                    const opacity = maybeOpacity(restStyles['opacity']);
-                    const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
+                    const opacity = maybeOpacity(styleProps['opacity']);
+                    const fillOpacity = maybeOpacity(styleProps['fill-opacity']);
 
-                    fill = resolveColor(fill, canvas);
+                    const fill = resolveColor(String(styleProps.fill || 'currentColor'), canvas);
 
                     context.fillStyle = fill ? fill : 'currentColor';
                     context.beginPath();

package/dist/marks/helpers/TrailCanvas.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { ScaledDataRecord, UsedScales, CurveName, ConstantAccessor } from '../../types/index.js';
+import type { ScaledDataRecord, UsedScales, CurveName, ConstantAccessor, DataRecord, ChannelAccessor } from '../../types/index.js';
 import type { CurveFactory } from 'd3-shape';
-interface TrailCanvasProps<Datum> {
+interface TrailCanvasProps<Datum extends object> {
     curve?: CurveName | CurveFactory;
     tension?: number;
     cap?: 'butt' | 'round';
@@ -8,10 +8,8 @@ interface TrailCanvasProps<Datum> {
     data: ScaledDataRecord<Datum>[][];
     usedScales: UsedScales;
     options: {
-        fill?: ConstantAccessor<string, Datum>;
+        fill?: ChannelAccessor<Datum>;
         defined?: ConstantAccessor<boolean, Datum>;
-        opacity?: ConstantAccessor<number, Datum>;
-        'fill-opacity'?: ConstantAccessor<number, Datum>;
     };
 }
 declare function $$render<Datum extends DataRecord>(): {