svelteplot 0.10.3 → 0.11.0

package/dist/Mark.svelte

@@ -9,7 +9,14 @@
         children?: Snippet<
             [
                 {
-                    mark: Mark<GenericMarkOptions>;
+                    mark: {
+                        id: symbol;
+                        type: MarkType;
+                        channels: ScaledChannelName[];
+                        scales: Set<ScaleName>;
+                        data: DataRecord[];
+                        options: GenericMarkOptions;
+                    };
                     usedScales: ReturnType<typeof getUsedScales>;
                     scaledData: ScaledDataRecord<Datum>[];
                 }
@@ -121,7 +128,7 @@
         mark.channels = channels;
         mark.scales = new Set(
             channels
-                .filter((channel) => options[channel] !== 0)
+                .filter((channel) => (options as any)[channel] !== 0)
                 .map((channel) => CHANNEL_SCALE[channel])
         );
         mark.data = untrack(() => data);
@@ -149,10 +156,10 @@
                     ScaleName
                 ][]) {
                     // check if the mark has defined an accessor for this channel
-                    if (options?.[channel] !== undefined && out[channel] === undefined) {
+                    if ((options as any)?.[channel] !== undefined && out[channel] === undefined) {
                         // resolve value
-                        out[channel] = resolveChannel(channel, row, options, index);
-                        if (options[channel] === INDEX) {
+                        out[channel] = resolveChannel(channel, row, options as any);
+                        if ((options as any)[channel] === INDEX) {
                             const scale = plot.scales[CHANNEL_SCALE[channel]];
                             if (scale.type === 'band' || scale.type === 'point') {
                                 out[channel] = scale.domain[out[channel] % scale.domain.length];
@@ -167,7 +174,13 @@
     let prevResolvedData: ResolvedDataRecord[] = [];
 
     $effect(() => {
-        if (isDifferent(data, mark.data) || isDifferent(resolvedData, prevResolvedData)) {
+        if (
+            isDifferent(
+                data as unknown as ResolvedDataRecord[],
+                mark.data as unknown as ResolvedDataRecord[]
+            ) ||
+            isDifferent(resolvedData, prevResolvedData)
+        ) {
             prevResolvedData = resolvedData;
             // data has changed
             mark.data = data;
@@ -191,11 +204,11 @@
 
     const errors = $derived([
         ...required
-            .filter((name) => options[name] == null)
+            .filter((name) => (options as any)[name] == null)
             .map((name) => `missing channel value for ${mark.type} mark: ${name}`),
         ...Object.entries(requiredScales)
             .filter(([scale, types]) => {
-                return !types.includes(plot.scales[scale].type);
+                return !types.includes((plot.scales as any)[scale].type);
             })
             .map(
                 ([scale, types]) => `scale type mismatch for ${scale} (needs ${types.join(' or ')})`
@@ -204,7 +217,7 @@
 
     $effect(() => {
         for (const name of required) {
-            if (options[name] == null) throw new Error(`missing channel value: ${name}`);
+            if ((options as any)[name] == null) throw new Error(`missing channel value: ${name}`);
         }
     });
 
@@ -219,19 +232,21 @@
                 const out: ScaledDataRecord<Datum> = {
                     datum: row.datum,
                     resolved: row,
-                    index: row[INDEX],
-                    valid: true
+                    index: (row as any)[INDEX],
+                    valid: true,
+                    dx: 0,
+                    dy: 0
                 };
                 // compute dx/dy
-                out.dx = Number(resolveProp<number>(options.dx, out.datum, 0));
-                out.dy = Number(resolveProp<number>(options.dy, out.datum, 0));
+                out.dx = Number(resolveProp<number, Datum>(options.dx, out.datum, 0));
+                out.dy = Number(resolveProp<number, Datum>(options.dy, out.datum, 0));
 
                 // special handling if there's a projection, e.g. a line mark
                 if (plot.scales.projection && mark.type !== 'geo') {
                     for (const suffix of ['', '1', '2']) {
                         if (
-                            options?.[`x${suffix}`] !== undefined &&
-                            options?.[`y${suffix}`] !== undefined
+                            (options as any)?.[`x${suffix}`] !== undefined &&
+                            (options as any)?.[`y${suffix}`] !== undefined
                         ) {
                             // we have two-dimensional accessors
                             // for the x and y channels
@@ -243,12 +258,11 @@
                                           row.x,
                                           row.y,
                                           usedScales.x,
-                                          usedScales.y,
-                                          suffix
+                                          usedScales.y
                                       );
 
-                            out[`x${suffix}`] = x;
-                            out[`y${suffix}`] = y;
+                            (out as any)[`x${suffix}`] = x;
+                            (out as any)[`y${suffix}`] = y;
                             out.valid =
                                 out.valid &&
                                 isValid(row.x) &&
@@ -265,11 +279,14 @@
                     ScaleName
                 ][]) {
                     // check if the mark has defined an accessor for this channel
-                    if (options?.[channel] != null && out[channel] === undefined) {
+                    if (
+                        (options as any)?.[channel] != null &&
+                        (out as any)[channel] === undefined
+                    ) {
                         // resolve value
                         const value = row[channel];
                         // if this channel was renamed, use the original channel for scaling
-                        const origChannel = options?.[RENAME]?.[channel] || channel;
+                        const origChannel = (options as any)?.[RENAME]?.[channel] || channel;
                         const scaled = usedScales[channel]
                             ? scale === 'x'
                                 ? projectX(origChannel as 'x' | 'x1' | 'x2', plot.scales, value)
@@ -283,12 +300,12 @@
                         out.valid = out.valid && (scale === 'color' || isValid(value));
 
                         // apply dx/dy transform
-                        out[channel] =
+                        (out as any)[channel] =
                             Number.isFinite(scaled) && (scale === 'x' || scale === 'y')
                                 ? scaled + (scale === 'x' ? out.dx : out.dy)
                                 : scaled;
                     } else if (defaults[channel]) {
-                        out[channel] = defaults[channel];
+                        (out as any)[channel] = defaults[channel];
                     }
                 }
 
@@ -300,10 +317,10 @@
 
     function dodge<T>(data: ScaledDataRecord<Datum>[], options: BaseMarkProps<T>) {
         if (options.dodgeX) {
-            return dodgeX({ data, ...options }, plot);
+            return dodgeX({ data, ...options } as any, plot) as ScaledDataRecord<Datum>[];
         }
         if (options.dodgeY) {
-            return dodgeY({ data, ...options }, plot);
+            return dodgeY({ data, ...options } as any, plot) as ScaledDataRecord<Datum>[];
         }
         return data;
     }

package/dist/Mark.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { ScaledChannelName, MarkType, DataRecord, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
+import type { ScaledChannelName, MarkType, DataRecord, GenericMarkOptions, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
 import { getUsedScales } from './helpers/scales.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Partial<Partial<{
@@ -13,6 +13,16 @@ declare function $$render<Datum extends DataRecord>(): {
         dodgeY: import("./transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<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";
@@ -26,45 +36,107 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<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/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: 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>;
+        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/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("./types/index.js").ConstantAccessor<string, Datum>;
     }>> & {
         data?: Datum[];
         automatic?: boolean;
@@ -73,7 +145,14 @@ declare function $$render<Datum extends DataRecord>(): {
         required?: ScaledChannelName[];
         requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
         children?: Snippet<[{
-            mark: any;
+            mark: {
+                id: symbol;
+                type: MarkType;
+                channels: ScaledChannelName[];
+                scales: Set<ScaleName>;
+                data: DataRecord[];
+                options: GenericMarkOptions;
+            };
             usedScales: ReturnType<typeof getUsedScales>;
             scaledData: ScaledDataRecord<Datum>[];
         }]>;

package/dist/Plot.svelte

@@ -45,16 +45,16 @@
         if (
             projection &&
             typeof projection !== 'function' &&
-            typeof projection?.type !== 'function'
+            typeof (projection as any)?.type !== 'function'
         ) {
             const { type: projFactory, aspectRatio } = namedProjection(
-                isObject(projection) ? projection.type : projection
-            );
+                isObject(projection) ? (projection as any).type : (projection as string)
+            ) as { type: any; aspectRatio: number };
             return {
                 ...(isObject(projection) ? projection : {}),
                 type: projFactory,
                 aspectRatio
-            };
+            } as any;
         }
         return projection;
     });
@@ -62,8 +62,9 @@
     const scales = $derived(
         Object.fromEntries(
             ['x', 'y', 'r', 'color', 'opacity', 'symbol', 'length', 'fx', 'fy'].map((scale) => {
-                const scaleOpts = maybeScaleOptions(restOptions[scale]);
-                const scaleFn = scaleOpts.scale || (scale === 'color' ? autoScaleColor : autoScale);
+                const scaleOpts = maybeScaleOptions((restOptions as any)[scale]);
+                const scaleFn =
+                    (scaleOpts as any)?.scale || (scale === 'color' ? autoScaleColor : autoScale);
                 return [scale, { ...scaleOpts, scale: scaleFn }];
             })
         )
@@ -72,9 +73,9 @@
     function maybeScaleOptions(
         scaleOptions: undefined | false | RawValue[] | object
     ): Partial<ScaleOptions> | undefined {
-        if (scaleOptions === false) return { axis: false };
+        if (scaleOptions === false) return { axis: false } as any;
         if (Array.isArray(scaleOptions)) return { domain: scaleOptions };
-        return scaleOptions || {};
+        return (scaleOptions as any) || {};
     }
 </script>
 
@@ -84,7 +85,7 @@
     <!-- also pass on user header -->
     {#if userHeader}{@render userHeader?.()}{/if}
     {#if restOptions.color?.legend}
-        <ColorLegend />
+        <ColorLegend class={null} />
     {/if}
     {#if restOptions.symbol?.legend}
         <SymbolLegend />
@@ -110,8 +111,8 @@
         restOptions.color?.legend ||
         restOptions.symbol?.legend
             ? header
-            : null}
-        footer={userFooter || restOptions?.caption ? footer : null}
+            : undefined}
+        footer={userFooter || restOptions?.caption ? footer : undefined}
         projection={projectionOpts}
         implicitScales
         {...scales}>
@@ -157,11 +158,16 @@
                 {@render parentChildren?.({
                     options,
                     scales,
+                    hasProjection,
+                    hasExplicitAxisX,
+                    hasExplicitAxisY,
+                    hasExplicitGridX,
+                    hasExplicitGridY,
                     ...restProps
                 })}
-                {#snippet failed(error, reset)}
+                {#snippet failed(error: unknown, reset: () => void)}
                     <text class="error" transform="translate(10,10)">
-                        {#each error.message.split('\n') as line, i (i)}
+                        {#each (error as Error).message.split('\n') as line, i (i)}
                             <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
                         {/each}
                     </text>{/snippet}
@@ -171,8 +177,8 @@
             <FacetAxes />
         {/snippet}
     </Plot>
-    {#snippet failed(error)}
-        <div class="error">Error: {error.message}</div>
+    {#snippet failed(error: unknown)}
+        <div class="error">Error: {(error as Error).message}</div>
     {/snippet}
 </svelte:boundary>
 

package/dist/core/Facet.svelte

@@ -31,7 +31,7 @@
 
     setContext('svelteplot/facet', {
         getTestFacet() {
-            return (datum: DataRecord, options: Partial<BaseMarkProps>) => {
+            return (datum: DataRecord, options: Partial<BaseMarkProps<DataRecord>>) => {
                 return (
                     (options.fx == null || resolveChannel('fx', datum, options) === fx) &&
                     (options.fy == null || resolveChannel('fy', datum, options) === fy)

package/dist/core/FacetAxes.svelte

@@ -23,13 +23,13 @@
     const facetXScale = $derived(
         scaleBand()
             .paddingInner(plot.options.fx?.paddingInner ?? plot.options.fx?.padding ?? 0.1)
-            .domain(fxValues)
+            .domain(fxValues as string[])
             .rangeRound([0, plot.plotWidth])
     );
     const facetYScale = $derived(
         scaleBand()
             .paddingInner(plot.options.fy?.paddingInner ?? plot.options.fy?.padding ?? 0.1)
-            .domain(fyValues)
+            .domain(fyValues as string[])
             .rangeRound([0, plot.plotHeight])
     );
 </script>
@@ -39,17 +39,20 @@
     <g transform="translate({plot.options.marginLeft}, 0)">
         <BaseAxisX
             class="facet-axis-x"
-            scaleFn={facetXScale}
+            scaleFn={facetXScale as any}
             scaleType="band"
             ticks={fxValues}
-            tickFormat={plot.options.fx.tickFormat || ((d) => d)}
+            tickFormat={(plot.options.fx.tickFormat || ((d: any) => d)) as any}
             tickFontSize={11}
             tickSize={0}
             tickPadding={plot.options.x.axis === plot.options.fx.axis ||
             plot.options.x.axis === 'both'
                 ? 25
                 : 5}
-            anchor={plot.options.fx.axis}
+            anchor={plot.options.fx.axis === 'both'
+                ? 'top'
+                : (plot.options.fx.axis as 'top' | 'bottom' | undefined)}
+            title={null}
             options={plot.options.fx.axisOptions || {}}
             {...plot.options.fx.axisProps || {}}
             height={plot.plotHeight}
@@ -61,14 +64,16 @@
     <g transform="translate(0, {plot.options.marginTop})">
         <BaseAxisY
             class="facet-axis-y"
-            scaleFn={facetYScale}
+            scaleFn={facetYScale as any}
             scaleType="band"
             ticks={fyValues}
-            tickFormat={plot.options.fy.tickFormat || ((d) => d)}
+            tickFormat={(plot.options.fy.tickFormat || ((d: any) => d)) as any}
             tickFontSize={11}
             tickSize={0}
             tickPadding={5}
-            anchor={plot.options.fy.axis}
+            anchor={plot.options.fy.axis === 'both'
+                ? 'right'
+                : (plot.options.fy.axis as 'left' | 'right' | undefined)}
             lineAnchor="center"
             options={plot.options.fy.axisOptions || {}}
             {...plot.options.fy.axisProps || {}}

package/dist/core/FacetGrid.svelte

@@ -43,7 +43,7 @@
                     ? (plot.options.fx?.paddingInner ?? plot.options.fx?.padding ?? 0.1)
                     : 0
             )
-            .domain(fxValues)
+            .domain(fxValues as string[])
             .rangeRound([0, plot.plotWidth])
     );
     const facetYScale = $derived(
@@ -54,7 +54,7 @@
                     ? (plot.options.fy?.paddingInner ?? plot.options.fy?.padding ?? 0.1)
                     : 0
             )
-            .domain(fyValues)
+            .domain(fyValues as string[])
             .rangeRound([0, plot.plotHeight])
     );
 
@@ -75,8 +75,8 @@
             data-facet={i * fyValues.length + j}
             fill="currentColor"
             style:display={emptyFacets.get(facetX)?.get(facetY) ? 'none' : 'block'}
-            transform="translate({useFacetX ? facetXScale(facetX) : 0}, {useFacetY
-                ? facetYScale(facetY)
+            transform="translate({useFacetX ? facetXScale(facetX as string) : 0}, {useFacetY
+                ? facetYScale(facetY as string)
                 : 0})">
             <!-- facets need invisible rect -->
             <rect