svelteplot 0.10.3-pr-490.2 → 0.10.3-pr-491.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<{
@@ -145,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/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

package/dist/core/Plot.svelte

@@ -94,8 +94,8 @@
         axisY: {
             anchor: 'left',
             implicit: true,
-            ...USER_DEFAULTS.axis,
-            ...USER_DEFAULTS.axisY
+            ...(USER_DEFAULTS.axis as any),
+            ...(USER_DEFAULTS.axisY as any)
         },
         gridX: {
             implicit: false,
@@ -107,7 +107,7 @@
             ...asGridDefaults(USER_DEFAULTS.grid),
             ...asGridDefaults(USER_DEFAULTS.gridY)
         }
-    };
+    } as PlotDefaults;
 
     let {
         header,
@@ -171,7 +171,7 @@
     );
 
     const explicitDomains = $derived(
-        new Set(SCALES.filter((scale) => !!initialOptions[scale]?.domain))
+        new Set(SCALES.filter((scale) => !!(initialOptions as any)[scale]?.domain))
     );
 
     // one-dimensional plots have different automatic margins and heights
@@ -184,7 +184,7 @@
             explicitScales,
             explicitDomains,
             hasProjection: !!initialOptions.projection,
-            margin: initialOptions.margin,
+            margin: initialOptions.margin as number | 'auto' | undefined,
             inset: initialOptions.inset
         })
     );
@@ -217,7 +217,7 @@
 
     const defaultPointScaleHeight = $derived(
         explicitScales.has('r') && plotOptions.r.range
-            ? plotOptions.r.range[1] * 2
+            ? (plotOptions.r.range[1] as number) * 2
             : DEFAULTS.pointScaleHeight
     );
 
@@ -233,8 +233,8 @@
             ? plotOptions.height(plotWidth)
             : maybeNumber(plotOptions.height) === null || plotOptions.height === 'auto'
               ? Math.round(
-                    preScales.projection && preScales.projection.aspectRatio
-                        ? ((plotWidth * preScales.projection.aspectRatio) / xFacetCount) *
+                    preScales.projection && (preScales.projection as any).aspectRatio
+                        ? ((plotWidth * (preScales.projection as any).aspectRatio) / xFacetCount) *
                               yFacetCount +
                               plotOptions.marginTop +
                               plotOptions.marginBottom
@@ -260,7 +260,7 @@
               : maybeNumber(plotOptions.height)
     );
 
-    const plotHeight = $derived(height - plotOptions.marginTop - plotOptions.marginBottom);
+    const plotHeight = $derived((height ?? 0) - plotOptions.marginTop - plotOptions.marginBottom);
 
     // TODO: check if there's still a reason to store and expose the plot body element
     let plotBody: HTMLDivElement | null = $state(null);
@@ -280,7 +280,7 @@
         const scales = computeScales(
             plotOptions,
             facetWidth || width,
-            facetHeight || height,
+            facetHeight ?? height ?? 0,
             hasFilledDotMarks,
             marks,
             DEFAULTS
@@ -293,9 +293,9 @@
         return {
             options: plotOptions,
             width,
-            height,
-            facetWidth,
-            facetHeight,
+            height: height ?? 0,
+            facetWidth: facetWidth ?? undefined,
+            facetHeight: facetHeight ?? undefined,
             plotHeight,
             plotWidth,
             scales,
@@ -303,7 +303,7 @@
             hasFilledDotMarks,
             body: plotBody,
             css
-        };
+        } as any;
     }
 
     setContext('svelteplot', {
@@ -363,11 +363,11 @@
         const xDomainExtent =
             x.type === 'band' || x.type === 'point'
                 ? x.domain.length
-                : Math.abs(x.domain[1] - x.domain[0]);
+                : Math.abs((x.domain[1] as number) - (x.domain[0] as number));
         const yDomainExtent =
             y.type === 'band' || y.type === 'point'
                 ? y.domain.length
-                : Math.abs(y.domain[1] - y.domain[0]);
+                : Math.abs((y.domain[1] as number) - (y.domain[0] as number));
         return (
             ((plotWidth / xDomainExtent) * yDomainExtent) / aspectRatio + marginTop + marginBottom
         );
@@ -378,10 +378,10 @@
         opts: PlotOptionsParameters
     ): ResolvedPlotOptions {
         return mergeDeep<PlotOptions>(
-            {},
-            { sortOrdinalDomains: DEFAULTS.sortOrdinalDomains },
-            smartDefaultPlotOptions(opts),
-            initialOptions
+            {} as Partial<PlotOptions>,
+            { sortOrdinalDomains: DEFAULTS.sortOrdinalDomains } as Partial<PlotOptions>,
+            smartDefaultPlotOptions(opts) as any,
+            initialOptions as any
         ) as ResolvedPlotOptions;
     }
 
@@ -510,14 +510,14 @@
                 padding: 0,
                 align: 0
             },
-            color: { type: 'auto', unknown: DEFAULTS.unknown },
+            color: { type: 'auto' as any, unknown: DEFAULTS.unknown },
             length: { type: 'linear' },
             symbol: { type: 'ordinal' },
             fx: { type: 'band', axis: 'top' },
             fy: { type: 'band', axis: 'right' },
             locale: DEFAULTS.locale,
             css: DEFAULTS.css
-        };
+        } as ResolvedPlotOptions;
     }
 
     const mapXY = $derived((x: RawValue, y: RawValue) => {
@@ -548,7 +548,7 @@
                 {#if children}
                     {@render children({
                         width,
-                        height,
+                        height: height ?? 0,
                         options: plotOptions,
                         scales: plotState.scales,
                         mapXY,
@@ -564,7 +564,7 @@
         {#if overlay}<div class="plot-overlay">
                 {@render overlay?.({
                     width,
-                    height,
+                    height: height ?? 0,
                     options: plotOptions,
                     scales: plotState.scales,
                     mapXY,

package/dist/types/plot.d.ts

@@ -495,6 +495,12 @@ export type PlotOptions = {
             height: number;
             options: ResolvedPlotOptions;
             scales: PlotScales;
+            hasProjection: boolean;
+            hasExplicitAxisX: boolean;
+            hasExplicitAxisY: boolean;
+            hasExplicitGridX: boolean;
+            hasExplicitGridY: boolean;
+            [key: string]: any;
         }
     ]>;
     /**
@@ -522,6 +528,12 @@ export type PlotOptions = {
             height: number;
             options: ResolvedPlotOptions;
             scales: PlotScales;
+            hasProjection: boolean;
+            hasExplicitAxisX: boolean;
+            hasExplicitAxisY: boolean;
+            hasExplicitGridX: boolean;
+            hasExplicitGridY: boolean;
+            [key: string]: any;
         }
     ]>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.10.3-pr-490.2",
+    "version": "0.10.3-pr-491.0",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",