svelteplot 0.10.3 → 0.11.0

package/dist/marks/helpers/BaseAxisY.svelte

@@ -6,36 +6,35 @@
     import type {
         AutoMarginStores,
         ConstantAccessor,
-        DataRecord,
         PlotState,
+        PlotScaleFunction,
         RawValue,
         ScaledDataRecord,
         ScaleType
     } from '../../types/index.js';
-    import { RAW_VALUE } from '../../transforms/recordize';
-    import { INDEX } from '../../constants';
+    import type { AxisTickDatum, AxisYTick, BaseAxisYOptions } from '../../types/axes.js';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
+    import { INDEX } from '../../constants.js';
+    type AxisDatum = AxisTickDatum<typeof RAW_VALUE, typeof INDEX>;
+    type AxisTick = AxisYTick<AxisDatum>;
 
     type BaseAxisYProps = {
-        scaleFn: (d: RawValue) => number;
+        scaleFn: PlotScaleFunction;
         scaleType: ScaleType;
         ticks: RawValue[];
         tickFormat: (d: RawValue, i: number, ticks: RawValue[]) => string | string[];
-        anchor: 'left' | 'right';
-        lineAnchor: 'top' | 'center' | 'bottom';
-        tickSize: number;
-        tickPadding: number;
-        tickFontSize: ConstantAccessor<number>;
-        tickClass: ConstantAccessor<number>;
+        anchor?: 'left' | 'right';
+        lineAnchor?: 'top' | 'center' | 'bottom';
+        tickSize?: number;
+        tickPadding?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickClass?: ConstantAccessor<string>;
         marginLeft: number;
         width: number;
-        title: string | null;
-        options: {
-            dx: ConstantAccessor<number>;
-            dy: ConstantAccessor<number>;
-            textAnchor: 'start' | 'middle' | 'end';
-        };
+        title?: string | null;
+        options: BaseAxisYOptions;
         plot: PlotState;
-        text: boolean | null;
+        text?: boolean | null;
         class: string | undefined;
     };
 
@@ -44,15 +43,15 @@
         scaleType,
         ticks,
         tickFormat,
-        anchor,
-        lineAnchor,
-        tickSize,
-        tickPadding,
-        tickFontSize,
-        tickClass,
+        anchor = 'left',
+        lineAnchor = 'center',
+        tickSize = 6,
+        tickPadding = 3,
+        tickFontSize = 11,
+        tickClass = null,
         marginLeft,
         width,
-        title,
+        title = null,
         plot,
         options,
         text = true,
@@ -63,16 +62,17 @@
         top: 'hanging',
         center: 'middle',
         bottom: 'auto'
-    };
+    } as const;
+    const toScaledDatum = (tick: AxisTick) => ({ datum: tick }) as unknown as ScaledDataRecord;
 
     const positionedTicks = $derived.by(() => {
-        let tickObjects = ticks.map((tick, i) => {
-            const datum = { [RAW_VALUE]: tick, [INDEX]: i };
+        let tickObjects: AxisTick[] = ticks.map((tick, i) => {
+            const datum: AxisDatum = { [RAW_VALUE]: tick, [INDEX]: i };
             return {
                 ...datum,
                 hidden: false,
-                dx: +resolveProp(options.dx, datum, 0),
-                dy: +resolveProp(options.dy, datum, 0),
+                dx: Number(resolveProp(options.dx, datum, 0) ?? 0),
+                dy: Number(resolveProp(options.dy, datum, 0) ?? 0),
                 y: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
                 text: tickFormat(tick, i, ticks),
                 element: null as SVGTextElement | null
@@ -95,7 +95,7 @@
         return tickObjects;
     });
 
-    let tickTexts = $state([] as SVGTextElement[]);
+    let tickTexts = $state([] as (SVGTextElement | undefined)[]);
 
     const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
 
@@ -122,7 +122,7 @@
                         if (tickTexts[i]) return tickTexts[i].getBoundingClientRect().width;
                         return 0;
                     }) as number[]
-                )
+                ) ?? 0
             ) + Math.max(0, tickPadding + tickSize);
 
         if (!isNaN(maxLabelWidth)) {
@@ -161,7 +161,7 @@
             {@const tickClass_ = resolveProp(tickClass, tick)}
             {@const [textStyle, textClass] = resolveStyles(
                 plot,
-                { datum: tick },
+                toScaledDatum(tick),
                 {
                     fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
                     ...options,
@@ -169,7 +169,7 @@
                     stroke: null
                 },
                 'fill',
-                { y: true },
+                { y: true } as any,
                 true
             )}
             <g
@@ -180,10 +180,10 @@
                 {#if tickSize}
                     {@const [tickLineStyle, tickLineClass] = resolveStyles(
                         plot,
-                        { datum: tick },
+                        toScaledDatum(tick),
                         options,
                         'stroke',
-                        { y: true },
+                        { y: true } as any,
                         true
                     )}
                     <line

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

@@ -1,25 +1,22 @@
-import type { ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types/index.js';
+import type { ConstantAccessor, PlotState, PlotScaleFunction, RawValue, ScaleType } from '../../types/index.js';
+import type { BaseAxisYOptions } from '../../types/axes.js';
 type BaseAxisYProps = {
-    scaleFn: (d: RawValue) => number;
+    scaleFn: PlotScaleFunction;
     scaleType: ScaleType;
     ticks: RawValue[];
     tickFormat: (d: RawValue, i: number, ticks: RawValue[]) => string | string[];
-    anchor: 'left' | 'right';
-    lineAnchor: 'top' | 'center' | 'bottom';
-    tickSize: number;
-    tickPadding: number;
-    tickFontSize: ConstantAccessor<number>;
-    tickClass: ConstantAccessor<number>;
+    anchor?: 'left' | 'right';
+    lineAnchor?: 'top' | 'center' | 'bottom';
+    tickSize?: number;
+    tickPadding?: number;
+    tickFontSize?: ConstantAccessor<number>;
+    tickClass?: ConstantAccessor<string>;
     marginLeft: number;
     width: number;
-    title: string | null;
-    options: {
-        dx: ConstantAccessor<number>;
-        dy: ConstantAccessor<number>;
-        textAnchor: 'start' | 'middle' | 'end';
-    };
+    title?: string | null;
+    options: BaseAxisYOptions;
     plot: PlotState;
-    text: boolean | null;
+    text?: boolean | null;
     class: string | undefined;
 };
 declare const BaseAxisY: import("svelte").Component<BaseAxisYProps, {}, "">;

package/dist/marks/helpers/Box.svelte

@@ -41,13 +41,13 @@
     import GroupMultiple from './GroupMultiple.svelte';
     import { groupX, groupY, BarY, TickY, RuleX, BarX, TickX, RuleY, Dot } from '../../index.js';
     import { resolveChannel } from '../../helpers/resolve.js';
-    import type { BaseMarkProps, ChannelAccessor, DataRecord, RawValue } from '../../types';
-    import { IS_SORTED } from '../../transforms/sort';
+    import type { BaseMarkProps, ChannelAccessor, DataRecord, RawValue } from '../../types/index.js';
+    import { IS_SORTED } from '../../transforms/sort.js';
 
     let markProps: BoxMarkProps = $props();
 
     const {
-        data = [{}],
+        data = [] as Datum[],
         bar,
         rule,
         tickMedian,
@@ -89,7 +89,7 @@
                 fy
             },
             { [xProp]: 'median', [x1Prop]: 'p25', [x2Prop]: 'p75', fill: (rows) => rows }
-        )
+        ) as { data: any[]; [key: string]: any }
     );
 
     const X = Symbol('x'),
@@ -112,13 +112,15 @@
     const sortProps = { [IS_SORTED]: true };
 
     const compareValues = (a: RawValue, b: RawValue) =>
-        (typeof a === 'string' && typeof b === 'string'
-            ? a.localeCompare(b)
-            : a > b
-              ? 1
-              : a < b
-                ? -1
-                : 0) || 0;
+        (typeof a === 'symbol' || typeof b === 'symbol'
+            ? 0
+            : typeof a === 'string' && typeof b === 'string'
+              ? a.localeCompare(b)
+              : (a as number) > (b as number)
+                ? 1
+                : (a as number) < (b as number)
+                  ? -1
+                  : 0) || 0;
 
     const boxData = $derived.by(() => {
         const boxes = grouped
@@ -128,11 +130,11 @@
                 const p75Key = groupChannels[x2Prop];
                 const groupKey = groupChannels[yProp];
 
-                const iqr = row[p75Key] - row[p25Key];
+                const iqr = (row[p75Key] as number) - (row[p25Key] as number);
                 const whisker = iqr * 1.5;
-                const lower = row[p25Key] - whisker;
-                const upper = row[p75Key] + whisker;
-                const data = row[groupChannels.fill].map((d) => ({
+                const lower = (row[p25Key] as number) - whisker;
+                const upper = (row[p75Key] as number) + whisker;
+                const data = (row[groupChannels.fill] as any[]).map((d) => ({
                     ...d,
                     [orientation === 'y' ? Y : X]: resolveChannel(xProp, d, {
                         x,
@@ -141,10 +143,12 @@
                 }));
                 const valueSym = orientation === 'y' ? Y : X;
                 const groupSym = orientation === 'y' ? X : Y;
-                const outliers = data.filter((d) => d[valueSym] < lower || d[valueSym] > upper);
+                const outliers = data.filter(
+                    (d: any) => d[valueSym] < lower || d[valueSym] > upper
+                );
                 const inside = data
-                    .filter((d) => d[valueSym] >= lower && d[valueSym] <= upper)
-                    .sort((a, b) => a[valueSym] - b[valueSym]);
+                    .filter((d: any) => d[valueSym] >= lower && d[valueSym] <= upper)
+                    .sort((a: any, b: any) => a[valueSym] - b[valueSym]);
 
                 return {
                     ...data[0],
@@ -154,15 +158,18 @@
                     [MEDIAN]: row[medianKey],
                     [P75]: row[p75Key],
                     [MIN]: inside.length ? inside[0][valueSym] : null,
-                    [MAX]: inside.length ? inside.at(-1)[valueSym] : null,
-                    [FX]: resolveChannel('fx', data[0], { fx }, null),
-                    [FY]: resolveChannel('fy', data[0], { fy }, null),
+                    [MAX]: inside.length ? (inside.at(-1) as any)[valueSym] : null,
+                    [FX]: resolveChannel('fx', data[0], { fx }),
+                    [FY]: resolveChannel('fy', data[0], { fy }),
                     [OUTLIERS]: outliers
                 };
             })
             .filter(Boolean);
 
-        const stripSortRef = ({ [SORT_REF]: _, ...rest }) => rest;
+        const stripSortRef = (obj: any) => {
+            const { [SORT_REF]: _unused, ...rest } = obj;
+            return rest;
+        };
 
         if (!sort) return boxes.map(stripSortRef);
 
@@ -170,8 +177,8 @@
 
         const sortAccessor =
             typeof sort === 'function'
-                ? (d) => sort(d[SORT_REF])
-                : (d) => {
+                ? (d: any) => sort(d[SORT_REF])
+                : (d: any) => {
                       switch (sort_) {
                           case 'min':
                               return d[MIN];
@@ -200,7 +207,7 @@
     function maybeSort(
         sort: string | ((d: Datum) => RawValue) | undefined
     ): [string | ((d: Datum) => RawValue), 1 | -1] {
-        if (typeof sort !== 'string') return [sort, 1];
+        if (typeof sort !== 'string') return [sort as (d: Datum) => RawValue, 1];
         if (sort.startsWith('-')) {
             return [sort.slice(1), -1];
         }
@@ -249,18 +256,18 @@
             {...{ [yProp]: groupSymbol, [xProp]: MIN }}
             {stroke}
             {...facets}
-            inset="20%"
+            {...{ inset: '20%' } as any}
             {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
         <TickMark
             data={boxData}
             {...{ [yProp]: groupSymbol, [xProp]: MAX }}
             {stroke}
             {...facets}
-            inset="20%"
+            {...{ inset: '20%' } as any}
             {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
     {/if}
     <Dot
-        data={boxData.map((d) => d[OUTLIERS]).flat()}
+        data={boxData.map((d) => (d as any)[OUTLIERS]).flat()}
         {x}
         {y}
         {fx}

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

@@ -1,68 +1,140 @@
-import type { ChannelAccessor, DataRecord, RawValue } from '../../types';
+import type { ChannelAccessor, DataRecord, RawValue } from '../../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Pick<Partial<{
-        filter: import("../../types").ConstantAccessor<boolean, Datum>;
+        filter: import("../../types/index.js").ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
         fx: ChannelAccessor<Datum>;
         fy: ChannelAccessor<Datum>;
-        dx: import("../../types").ConstantAccessor<number, Datum>;
-        dy: import("../../types").ConstantAccessor<number, Datum>;
-        dodgeX: import("../../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../../transforms/dodge").DodgeYOptions;
+        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;
         fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../../types").ConstantAccessor<number, Datum>;
+        fillOpacity: import("../../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: import("../../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../../types").ConstantAccessor<RawValue, Datum>;
+        } | import("../../types/index.js").ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../../types").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../../types").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../../types").ConstantAccessor<number, Datum>;
+        strokeWidth: import("../../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../../types/index.js").ConstantAccessor<number, Datum>;
         opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../../types").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../../types").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        strokeDasharray: import("../../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: import("../../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
-        imageFilter: import("../../types").ConstantAccessor<string, Datum>;
-        shapeRendering: import("../../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: import("../../types").ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        imageFilter: import("../../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../../types/index.js").ConstantAccessor<string, Datum>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
-        cursor: import("../../types").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        cursor: import("../../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../../types/index.js").ConstantAccessor<string, Datum>;
     }>, "fx" | "fy" | "fill" | "stroke" | "class"> & {
         data: Datum[];
         x: ChannelAccessor;

package/dist/marks/helpers/DotCanvas.svelte

@@ -25,14 +25,15 @@
         data: ScaledDataRecord[];
     } = $props();
 
-    function drawSymbolPath(symbolType: string, size: number, context) {
+    function drawSymbolPath(symbolType: string, size: number, context: CanvasRenderingContext2D) {
         // maybeSymbol(symbolType).draw(context, size);
         return d3Symbol(maybeSymbol(symbolType), size).context(context)();
     }
 
     let _markOptions = $state(mark.options);
 
-    const renderDots: Attachment = (canvas: HTMLCanvasElement) => {
+    const renderDots: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
         const context = canvas.getContext('2d');
 
         $effect(() => {
@@ -44,8 +45,8 @@
                     if (datum.valid) {
                         let { fill, stroke } = datum;
 
-                        fill = resolveColor(fill, canvas);
-                        stroke = resolveColor(stroke, canvas);
+                        fill = resolveColor(fill ?? 'none', canvas) as string;
+                        stroke = resolveColor(stroke ?? 'none', canvas) as string;
 
                         if (stroke && stroke !== 'none') {
                             const strokeWidth = resolveProp(
@@ -53,17 +54,18 @@
                                 datum.datum,
                                 1.6
                             );
-                            context.lineWidth = strokeWidth;
+                            context.lineWidth = strokeWidth ?? 1.6;
                         }
 
                         context.fillStyle = fill ? fill : 'none';
                         context.strokeStyle = stroke ? stroke : 'none';
-                        context.translate(datum.x, datum.y);
+                        context.translate(datum.x ?? 0, datum.y ?? 0);
 
-                        const size = datum.r * datum.r * Math.PI;
+                        const r = datum.r ?? 1;
+                        const size = r * r * Math.PI;
 
                         context.beginPath();
-                        drawSymbolPath(datum.symbol, size, context);
+                        drawSymbolPath(datum.symbol ?? 'circle', size, context);
                         context.closePath();
 
                         const { opacity = 1, fillOpacity = 1, strokeOpacity = 1 } = datum;
@@ -74,7 +76,7 @@
                         if (strokeOpacity != null)
                             context.globalAlpha = (opacity ?? 1) * strokeOpacity;
                         if (stroke && stroke !== 'none') context.stroke();
-                        context.translate(-datum.x, -datum.y);
+                        context.translate(-(datum.x ?? 0), -(datum.y ?? 0));
                     }
                 }
             }

package/dist/marks/helpers/GeoCanvas.svelte

@@ -28,11 +28,12 @@
 
     const plot = usePlot();
 
-    function maybeOpacity(value) {
+    function maybeOpacity(value: unknown) {
         return value == null ? 1 : +value;
     }
 
-    const render: Attachment = (canvas: HTMLCanvasElement) => {
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
         const context = canvas.getContext('2d');
 
         $effect(() => {
@@ -44,7 +45,7 @@
 
                 for (const d of data) {
                     if (!d.valid) continue;
-                    const geometry = resolveProp(mark.options.geometry, d.datum, d.datum);
+                    const geometry = resolveProp((mark.options as any).geometry, d.datum, d.datum);
                     // untrack the filter test to avoid redrawing when not necessary
                     let { stroke, fill, ...restStyles } = resolveScaledStyleProps(
                         d.datum,
@@ -52,7 +53,7 @@
                         usedScales,
                         plot,
                         GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill'
-                    );
+                    ) as { fill: string; stroke: string } & Record<string, unknown>;
 
                     const opacity = maybeOpacity(restStyles['opacity']);
                     const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
@@ -62,13 +63,13 @@
                         fill =
                             currentColor ||
                             (currentColor = getComputedStyle(
-                                canvas?.parentElement?.parentElement
+                                canvas?.parentElement?.parentElement ?? canvas
                             ).getPropertyValue('color'));
                     if (`${stroke}`.toLowerCase() === 'currentcolor')
                         stroke =
                             currentColor ||
                             (currentColor = getComputedStyle(
-                                canvas?.parentElement?.parentElement
+                                canvas?.parentElement?.parentElement ?? canvas
                             ).getPropertyValue('color'));
                     if (CSS_VAR.test(fill))
                         fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));