svelteplot 0.10.3-pr-475.2 → 0.10.3-pr-477.1

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/marks/Area.svelte

@@ -33,7 +33,7 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { groups as d3Groups } from 'd3-array';
-    import { area, type CurveFactory } from 'd3-shape';
+    import { area, type Area, type CurveFactory } from 'd3-shape';
     import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
     import { isValid } from '../helpers/index.js';
@@ -101,7 +101,7 @@
                       y0: (d: ScaledDataRecord) => d.y1,
                       y1: (d: ScaledDataRecord) => d.y2
                   })
-        })
+        }) as unknown as Area<ScaledDataRecord>
     );
 
     function groupAndSort(data: ScaledDataRecord[]) {
@@ -109,12 +109,11 @@
             ? d3Groups(data, (d) => resolveProp(groupByKey, d.datum)).map((d) => d[1])
             : [data];
         if (options.sort) {
-            return groups.toSorted((a, b) =>
-                resolveChannel('sort', a[0].datum, options) >
-                resolveChannel('sort', b[0].datum, options)
-                    ? 1
-                    : -1
-            );
+            return groups.toSorted((a, b) => {
+                const av = resolveChannel('sort', a[0].datum, options) as string | number | null;
+                const bv = resolveChannel('sort', b[0].datum, options) as string | number | null;
+                return av! > bv! ? 1 : -1;
+            });
         }
         return groups;
     }
@@ -125,8 +124,8 @@
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     required={['x1', 'y1']}
-    {...markProps}
-    {...options}>
+    {...markProps as any}
+    {...options as any}>
     {#snippet children({ mark, usedScales, scaledData })}
         {@const grouped = groupAndSort(scaledData)}
         {#if canvas}
@@ -136,7 +135,7 @@
                 {#each grouped as areaData, i (i)}
                     {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        <Anchor {options} {datum}>
+                        <Anchor options={options as any} {datum}>
                             {@const title = resolveProp(options.title, datum.datum, '')}
                             {@const [style, styleClass] = resolveStyles(
                                 plot,

package/dist/marks/Area.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CurveFactory } from 'd3-shape';
+import { type Area, type CurveFactory } from 'd3-shape';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare function $$render<Datum extends DataRecord>(): {

package/dist/marks/Arrow.svelte

@@ -49,13 +49,17 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        RawValue,
-        PlotDefaults
+        RawValue
     } from '../types/index.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { coalesce, maybeNumber } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
-    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
+    import {
+        arrowPath,
+        maybeSweep,
+        type SweepFunc,
+        type SweepOption
+    } from '../helpers/arrowPath.js';
     import { replaceChannels } from '../transforms/rename.js';
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
@@ -87,10 +91,10 @@
     const args: ArrowMarkProps = $derived(
         sort(
             replaceChannels(
-                { data: indexData(data), ...options },
+                { data: indexData(data as object[]), ...options },
                 { y: ['y1', 'y2'], x: ['x1', 'x2'] }
             )
-        )
+        ) as unknown as ArrowMarkProps
     );
 </script>
 
@@ -98,29 +102,37 @@
     type="arrow"
     required={['x1', 'x2', 'y1', 'y2']}
     channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
-    {...args}>
+    {...args as any}>
     {#snippet children({ usedScales, scaledData })}
-        {@const sweep = maybeSweep(args.sweep)}
+        {@const sweep = maybeSweep(args.sweep) as SweepFunc}
         <GroupMultiple class="arrow" length={scaledData.length}>
             {#each scaledData as d, i (i)}
                 {#if d.valid}
-                    {@const inset = resolveProp(args.inset, d.datum, 0)}
-                    {@const insetStart = resolveProp(args.insetStart, d.datum)}
-                    {@const insetEnd = resolveProp(args.insetEnd, d.datum)}
-                    {@const headAngle = resolveProp(args.headAngle, d.datum)}
-                    {@const headLength = resolveProp(args.headLength, d.datum)}
-                    {@const bend = resolveProp(args.bend, d.datum, 0)}
-                    {@const strokeWidth = resolveProp(args.strokeWidth, d.datum, 1)}
+                    {@const datum = d.datum as unknown as Datum}
+                    {@const inset = resolveProp(args.inset, datum, 0)}
+                    {@const insetStart = resolveProp(args.insetStart, datum)}
+                    {@const insetEnd = resolveProp(args.insetEnd, datum)}
+                    {@const headAngle = (resolveProp(args.headAngle, datum, 60) ?? 60) as number}
+                    {@const headLength = (resolveProp(args.headLength, datum, 8) ?? 8) as number}
+                    {@const bendVal =
+                        args.bend === true
+                            ? 22.5
+                            : (resolveProp(
+                                  args.bend as ConstantAccessor<number, Datum>,
+                                  datum,
+                                  0
+                              ) ?? 0)}
+                    {@const strokeWidth = (resolveProp(args.strokeWidth, datum, 1) ?? 1) as number}
                     {@const arrPath = arrowPath(
-                        d.x1,
-                        d.y1,
-                        d.x2,
-                        d.y2,
-                        maybeNumber(coalesce(insetStart, inset)),
-                        maybeNumber(coalesce(insetEnd, inset)),
+                        d.x1 ?? 0,
+                        d.y1 ?? 0,
+                        d.x2 ?? 0,
+                        d.y2 ?? 0,
+                        maybeNumber(coalesce(insetStart, inset)) ?? 0,
+                        maybeNumber(coalesce(insetEnd, inset)) ?? 0,
                         headAngle,
                         headLength,
-                        bend === true ? 22.5 : bend === false ? 0 : bend,
+                        bendVal,
                         strokeWidth,
                         sweep
                     )}
@@ -140,7 +152,7 @@
                         class={[className]}
                         {@attach addEventHandlers({
                             plot,
-                            options,
+                            options: options as any,
                             datum: d?.datum
                         })}>
                         {#if options.onmouseenter || options.onclick}

package/dist/marks/AxisX.svelte

@@ -10,7 +10,10 @@
         RawValue,
         ConstantAccessor,
         FacetContext,
-        ChannelName
+        ChannelName,
+        TickFormatFunction,
+        DataRecord,
+        ScaledChannelName
     } from '../types/index.js';
     import type * as CSS from 'csstype';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
@@ -22,7 +25,7 @@
 
     interface AxisXMarkProps extends Omit<
         BaseMarkProps<Datum>,
-        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'textAnchor'
     > {
         /** custom tick values to display on the axis */
         data?: Datum[];
@@ -72,7 +75,7 @@
 
     let markProps: AxisXMarkProps = $props();
 
-    const DEFAULTS: Omit<AxisXMarkProps, 'data' | ChannelName> = {
+    const DEFAULTS = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
@@ -87,7 +90,7 @@
     const { ticks: magicTicks } = $derived({ ...DEFAULTS, ...markProps });
 
     const {
-        data,
+        data = [] as Datum[],
         automatic = false,
         title,
         anchor,
@@ -105,12 +108,12 @@
         text = true,
         ...options
     }: AxisXMarkProps = $derived({
-        data: Array.isArray(magicTicks) ? magicTicks : [],
+        data: (Array.isArray(magicTicks) ? magicTicks : []) as Datum[],
         tickCount: typeof magicTicks === 'number' ? magicTicks : undefined,
         interval: typeof magicTicks === 'string' ? magicTicks : undefined,
         ...DEFAULTS,
         ...markProps
-    });
+    } as AxisXMarkProps);
 
     const plot = usePlot();
 
@@ -138,15 +141,14 @@
     );
 
     const useCompactNotation = $derived.by(() => {
-        const range =
-            extent(plot.scales.x.domain).filter(
-                (d): d is number => typeof d === 'number' && Number.isFinite(d)
-            ) ?? [];
-
-        if (range[0] === undefined || range[1] === undefined) return false;
-        const crossesZero = range[0] <= 0 && range[1] >= 0;
+        const numericDomain = plot.scales.x.domain.filter(
+            (d): d is number => typeof d === 'number' && Number.isFinite(d)
+        );
+        if (numericDomain.length < 2) return false;
+        const [min, max] = extent(numericDomain) as [number, number];
+        const crossesZero = min <= 0 && max >= 0;
         if (crossesZero) return true;
-        const magnitudes = range.map((d) =>
+        const magnitudes = [min, max].map((d) =>
             d === 0 ? -Infinity : Math.floor(Math.log10(Math.abs(d)))
         );
         return magnitudes[0] !== magnitudes[1];
@@ -158,7 +160,7 @@
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
-              ? (d) => d
+              ? (d: RawValue) => String(d)
               : plot.scales.x.type === 'time'
                 ? // time scale
                   typeof tickFmt === 'object'
@@ -172,9 +174,9 @@
                         Intl.NumberFormat(plot.options.locale, {
                             // use compact notation if range covers multiple magnitudes
                             ...(useCompactNotation ? { notation: 'compact' } : {}),
-                            ...DEFAULTS.numberFormat,
+                            ...getPlotDefaults().numberFormat,
                             style: plot.options.x.percent ? 'percent' : 'decimal'
-                        }).format(d)
+                        }).format(d as number)
     );
 
     const optionsLabel = $derived(plot.options?.x?.label);
@@ -223,13 +225,13 @@
     type="axisX"
     data={data.length ? data.map((tick) => ({ __x: tick })) : []}
     channels={['x']}
-    {...options}
+    {...options as any}
     x="__x"
     {automatic}>
     {#if left && top && useTitle}
         <text
             style={resolveScaledStyles(
-                null,
+                {} as DataRecord,
                 {
                     opacity: 0.8,
                     ...options,
@@ -242,7 +244,7 @@
                               ? 'middle'
                               : 'start'
                 },
-                {},
+                {} as Record<ScaledChannelName, boolean>,
                 plot,
                 'fill'
             )}
@@ -258,12 +260,11 @@
         <BaseAxisX
             {anchor}
             class={className}
-            {labelAnchor}
-            options={{ ...options, ...plot.options.x }}
+            options={{ ...(options as any), ...plot.options.x }}
             {plot}
             {text}
-            {tickClass}
-            {tickFontSize}
+            tickClass={tickClass as ConstantAccessor<string>}
+            tickFontSize={tickFontSize as ConstantAccessor<number>}
             {tickPadding}
             {ticks}
             {tickSize}
@@ -271,8 +272,8 @@
             marginTop={plot.options.marginTop}
             scaleFn={plot.scales.x.fn}
             scaleType={plot.scales.x.type}
-            tickFormat={useTickFormat}
-            title={useTitle} />
+            tickFormat={useTickFormat as TickFormatFunction}
+            title={useTitle as string | null} />
     {/if}
 </Mark>
 

package/dist/marks/AxisX.svelte.d.ts

@@ -136,7 +136,7 @@ declare function $$render<Datum extends RawValue>(): {
         style: string;
         cursor: ConstantAccessor<CSS.Property.Cursor, Datum>;
         title: ConstantAccessor<string, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "title" | "href" | "target"> & {
+    }>, "fillOpacity" | "textAnchor" | "paintOrder" | "title" | "href" | "target"> & {
         /** custom tick values to display on the axis */
         data?: Datum[];
         /** whether this axis was automatically added by the Plot component */

package/dist/marks/AxisY.svelte

@@ -10,7 +10,10 @@
         RawValue,
         FacetContext,
         ChannelName,
-        ConstantAccessor
+        ConstantAccessor,
+        TickFormatFunction,
+        DataRecord,
+        ScaledChannelName
     } from '../types/index.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import { autoTicks } from '../helpers/autoTicks.js';
@@ -21,7 +24,7 @@
 
     interface AxisYMarkProps extends Omit<
         BaseMarkProps<Datum>,
-        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'textAnchor'
     > {
         /** custom tick values to display on the axis */
         data?: Datum[];
@@ -69,7 +72,7 @@
 
     let markProps: AxisYMarkProps = $props();
 
-    const DEFAULTS: Omit<AxisYMarkProps, 'data' | ChannelName> = {
+    const DEFAULTS = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
@@ -83,7 +86,7 @@
     const { ticks: magicTicks } = $derived({ ...DEFAULTS, ...markProps });
 
     const {
-        data,
+        data = [] as Datum[],
         automatic = false,
         title,
         anchor = 'left',
@@ -102,12 +105,12 @@
         text = true,
         ...options
     }: AxisYMarkProps = $derived({
-        data: Array.isArray(magicTicks) ? magicTicks : [],
+        data: (Array.isArray(magicTicks) ? magicTicks : []) as Datum[],
         tickCount: typeof magicTicks === 'number' ? magicTicks : undefined,
         interval: typeof magicTicks === 'string' ? magicTicks : undefined,
         ...DEFAULTS,
         ...markProps
-    });
+    } as AxisYMarkProps);
 
     const plot = usePlot();
 
@@ -135,15 +138,14 @@
     );
 
     const useCompactNotation = $derived.by(() => {
-        const range =
-            extent(plot.scales.y.domain).filter(
-                (d): d is number => typeof d === 'number' && Number.isFinite(d)
-            ) ?? [];
-
-        if (range[0] === undefined || range[1] === undefined) return false;
-        const crossesZero = range[0] <= 0 && range[1] >= 0;
+        const numericDomain = plot.scales.y.domain.filter(
+            (d): d is number => typeof d === 'number' && Number.isFinite(d)
+        );
+        if (numericDomain.length < 2) return false;
+        const [min, max] = extent(numericDomain) as [number, number];
+        const crossesZero = min <= 0 && max >= 0;
         if (crossesZero) return true;
-        const magnitudes = range.map((d) =>
+        const magnitudes = [min, max].map((d) =>
             d === 0 ? -Infinity : Math.floor(Math.log10(Math.abs(d)))
         );
         return magnitudes[0] !== magnitudes[1];
@@ -155,7 +157,7 @@
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.y.type === 'band' || plot.scales.y.type === 'point'
-              ? (d) => d
+              ? (d: RawValue) => String(d)
               : plot.scales.y.type === 'time'
                 ? // time scale
                   typeof tickFmt === 'object'
@@ -169,9 +171,9 @@
                         Intl.NumberFormat(plot.options.locale, {
                             // use compact notation if range covers multiple magnitudes
                             ...(useCompactNotation ? { notation: 'compact' } : {}),
-                            ...DEFAULTS.numberFormat,
+                            ...getPlotDefaults().numberFormat,
                             style: plot.options.y.percent ? 'percent' : 'decimal'
-                        }).format(d)
+                        }).format(d as number)
     );
 
     const optionsLabel = $derived(plot.options.y.label);
@@ -210,12 +212,12 @@
     type="axisY"
     data={data.length ? data.map((tick) => ({ __y: tick })) : []}
     channels={['y']}
-    {...{ ...options, y: '__y' }}
+    {...{ ...options, y: '__y' } as any}
     {automatic}>
     {#if left && top && useTitle}
         <text
             style={resolveScaledStyles(
-                null,
+                {} as DataRecord,
                 {
                     opacity: 0.8,
                     ...options,
@@ -224,7 +226,7 @@
                     stroke: null,
                     textAnchor: anchor === 'left' ? 'start' : 'end'
                 },
-                {},
+                {} as Record<ScaledChannelName, boolean>,
                 plot,
                 'fill'
             )}
@@ -239,7 +241,7 @@
             class={className}
             {lineAnchor}
             options={{
-                ...options,
+                ...(options as any),
                 textAnchor:
                     textAnchor == null || textAnchor === 'auto'
                         ? anchor === 'left'
@@ -249,16 +251,16 @@
             }}
             {plot}
             {text}
-            {tickClass}
-            {tickFontSize}
+            tickClass={tickClass as ConstantAccessor<string>}
+            tickFontSize={tickFontSize as ConstantAccessor<number>}
             {tickPadding}
             {ticks}
             {tickSize}
             marginLeft={plot.options.marginLeft}
             scaleFn={plot.scales.y.fn}
             scaleType={plot.scales.y.type}
-            tickFormat={useTickFormat}
-            title={useTitle}
+            tickFormat={useTickFormat as TickFormatFunction}
+            title={useTitle as string | null}
             width={plot.facetWidth} />
     {/if}
 </Mark>

package/dist/marks/AxisY.svelte.d.ts

@@ -135,7 +135,7 @@ declare function $$render<Datum extends RawValue>(): {
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
         title: ConstantAccessor<string, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "title" | "href" | "target"> & {
+    }>, "fillOpacity" | "textAnchor" | "paintOrder" | "title" | "href" | "target"> & {
         /** custom tick values to display on the axis */
         data?: Datum[];
         /** whether this axis was automatically added by the Plot component */

package/dist/marks/ColorLegend.svelte

@@ -73,7 +73,7 @@
                 </div>
             {/each}
         {:else if scaleType === 'quantile' || scaleType === 'quantize' || scaleType === 'threshold'}
-            {@const domain = extent(plot.scales.color.fn.domain())}
+            {@const domain = extent(plot.scales.color.fn.domain() as number[]) as [number, number]}
             {@const range = plot.scales.color.range}
             {@const tickLabels =
                 scaleType === 'quantile'
@@ -95,28 +95,34 @@
                 marginBottom={20}
                 height={38}
                 inset={0}
-                x={{ domain, ticks }}>
+                x={{ domain: domain as [number, number], ticks }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
-                        <stop offset="0%" stop-color={range[0]} />
+                        <stop offset="0%" stop-color={range[0] as string} />
                         {#each ticks as t, i (i)}
                             {@const offset = (100 * (t - domain[0])) / (domain[1] - domain[0])}
                             <stop
                                 offset="{offset - 0.001}%"
-                                stop-color={plot.scales.color.fn(tickLabels[i] - 0.1)} />
+                                stop-color={plot.scales.color.fn(
+                                    (tickLabels[i] as number) - 0.1
+                                )} />
                             <stop
                                 offset="{offset}%"
-                                stop-color={plot.scales.color.fn(tickLabels[i])} />
+                                stop-color={plot.scales.color.fn(tickLabels[i] as number)} />
                         {/each}
-                        <stop offset="100%" stop-color={range.at(-1)} />
+                        <stop offset="100%" stop-color={range.at(-1) as string} />
                     </linearGradient>
                 </defs>
-                <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
-                <AxisX tickSize={18} dy={-17} tickFormat={(d, i) => tickFormat(tickLabels[i])} />
+                <Frame dy={-5} stroke={undefined} fill="url(#gradient-{randId})" />
+                <AxisX
+                    tickSize={18}
+                    dy={-17}
+                    tickFormat={(d, i) =>
+                        (tickFormat as (d: number) => string)(tickLabels[i] as number)} />
             </Plot>
         {:else}
             <!--- continuous -->
-            {@const domain = extent(plot.scales.color.domain)}
+            {@const domain = extent(plot.scales.color.domain as number[]) as [number, number]}
             {@const ticks = d3Range(domain[0], domain[1], (domain[1] - domain[0]) / 7).slice(1)}
 
             <Plot
@@ -128,7 +134,11 @@
                 marginBottom={20}
                 height={38}
                 inset={0}
-                x={{ domain, tickSpacing: 30, tickFormat }}>
+                x={{
+                    domain: domain as [number, number],
+                    tickSpacing: 30,
+                    tickFormat: tickFormat as any
+                }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
                         {#each ticks as t (t)}
@@ -138,7 +148,7 @@
                         {/each}
                     </linearGradient>
                 </defs>
-                <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
+                <Frame dy={-5} stroke={undefined} fill="url(#gradient-{randId})" />
                 <AxisX tickSize={18} dy={-17} />
             </Plot>
         {/if}

package/dist/marks/Frame.svelte

@@ -32,7 +32,12 @@
         insetBottom?: number;
     }
     import Mark from '../Mark.svelte';
-    import type { BaseRectMarkProps, LinkableMarkProps, DataRecord } from '../types/index.js';
+    import type {
+        BaseRectMarkProps,
+        LinkableMarkProps,
+        DataRecord,
+        ScaledDataRecord
+    } from '../types/index.js';
     import type { BaseMarkProps } from '../types/index.js';
     import RectPath from './helpers/RectPath.svelte';
     import { resolveProp } from '../helpers/resolve';
@@ -41,13 +46,15 @@
 
     let markProps: FrameMarkProps = $props();
 
+    const _plotDefaults = getPlotDefaults();
+    const _frame = _plotDefaults.frame;
     const DEFAULTS: FrameMarkProps = {
         fill: undefined,
         class: 'frame',
         stroke: undefined,
         fillOpacity: 1,
         strokeOpacity: 1,
-        ...getPlotDefaults().frame
+        ...(_frame != null && _frame !== true ? _frame : {})
     };
 
     const {
@@ -73,8 +80,16 @@
 <Mark type="frame" {automatic}>
     {#snippet children({ usedScales })}
         <RectPath
-            class={className}
-            datum={{ fill, stroke, fillOpacity, strokeOpacity, opacity, datum: {}, valid: true }}
+            class={className ?? null}
+            datum={{
+                fill,
+                stroke,
+                fillOpacity,
+                strokeOpacity,
+                opacity,
+                datum: {} as Datum,
+                valid: true
+            } as unknown as ScaledDataRecord<Datum>}
             x={plot.options.marginLeft + dx}
             y={plot.options.marginTop + dy}
             width={plot.facetWidth}

package/dist/marks/GridX.svelte

@@ -13,7 +13,13 @@
         y2?: ChannelAccessor<Datum>;
     }
     import Mark from '../Mark.svelte';
-    import type { BaseMarkProps, RawValue, DataRecord, ChannelAccessor } from '../types/index.js';
+    import type {
+        BaseMarkProps,
+        RawValue,
+        DataRecord,
+        ChannelAccessor,
+        ScaledDataRecord
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
@@ -25,9 +31,12 @@
 
     let markProps: GridXMarkProps = $props();
 
+    const _plotDefaults = getPlotDefaults();
+    const _grid = _plotDefaults.grid;
+    const _gridX = _plotDefaults.gridX;
     const DEFAULTS = {
-        ...getPlotDefaults().grid,
-        ...getPlotDefaults().gridX
+        ...(_grid != null && _grid !== true ? _grid : {}),
+        ...(_gridX != null && _gridX !== true ? _gridX : {})
     };
 
     const {
@@ -59,37 +68,39 @@
                   autoTickCount
               )
         ).map((d, i) =>
-            isDataRecord(d) ? { ...d, [INDEX]: i } : { [RAW_VALUE]: d, [INDEX]: i }
+            isDataRecord(d) ? { ...d, [INDEX]: i } : { [RAW_VALUE]: d as RawValue, [INDEX]: i }
         ) as DataRecord[]
     );
 </script>
 
 <Mark
     type="gridX"
-    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick as RawValue })) : []}
     channels={['y1', 'y2', 'x', 'stroke', 'strokeOpacity']}
-    {...{ ...options, x: RAW_VALUE }}
+    {...{ ...options, x: RAW_VALUE } as any}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">
             {#each ticks as tick, t (t)}
-                {#if testFilter(tick, options)}
+                {#if testFilter(tick as any, options as any)}
                     {@const x =
                         plot.scales.x.fn(tick[RAW_VALUE]) +
                         (plot.scales.x.type === 'band' ? plot.scales.x.fn.bandwidth() * 0.5 : 0)}
-                    {@const y1_ = resolveChannel('y1', tick, options)}
-                    {@const y2_ = resolveChannel('y2', tick, options)}
-                    {@const dx = +resolveProp(options?.dx, tick, 0)}
-                    {@const dy = +resolveProp(options?.dy, tick, 0)}
+                    {@const y1_ = resolveChannel('y1', tick as any, options as any)}
+                    {@const y2_ = resolveChannel('y2', tick as any, options as any)}
+                    {@const dx = resolveProp(options.dx, tick as any, 0) ?? 0}
+                    {@const dy = resolveProp(options.dy, tick as any, 0) ?? 0}
                     {@const y1 =
-                        options.y1 != null ? plot.scales.y.fn(y1_) : plot.options.marginTop}
+                        options.y1 != null && y1_ != null
+                            ? plot.scales.y.fn(y1_)
+                            : plot.options.marginTop}
                     {@const y2 =
-                        options.y2 != null
+                        options.y2 != null && y2_ != null
                             ? plot.scales.y.fn(y2_)
                             : plot.options.marginTop + plot.facetHeight}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
-                        { datum: tick },
+                        { datum: tick } as ScaledDataRecord,
                         options,
                         'stroke',
                         usedScales,

package/dist/marks/GridY.svelte

@@ -13,7 +13,13 @@
         x2?: ChannelAccessor<Datum>;
     }
     import Mark from '../Mark.svelte';
-    import type { BaseMarkProps, RawValue, ChannelAccessor } from '../types/index.js';
+    import type {
+        BaseMarkProps,
+        RawValue,
+        DataRecord,
+        ChannelAccessor,
+        ScaledDataRecord
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
@@ -23,9 +29,12 @@
 
     let markProps: GridYMarkProps = $props();
 
+    const _plotDefaults = getPlotDefaults();
+    const _grid = _plotDefaults.grid;
+    const _gridY = _plotDefaults.gridY;
     const DEFAULTS = {
-        ...getPlotDefaults().grid,
-        ...getPlotDefaults().gridY
+        ...(_grid != null && _grid !== true ? _grid : {}),
+        ...(_gridY != null && _gridY !== true ? _gridY : {})
     };
 
     const {
@@ -46,7 +55,7 @@
     const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
-              data
+              (data as RawValue[])
             : // use custom scale tick values if user passed any as plot scale option
               autoTicks(
                   plot.scales.y.type,
@@ -61,31 +70,33 @@
 
 <Mark
     type="gridY"
-    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick as RawValue })) : []}
     channels={['x1', 'x2', 'y', 'stroke', 'strokeOpacity']}
-    {...{ ...options, y: RAW_VALUE }}
+    {...{ ...options, y: RAW_VALUE } as any}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">
             {#each ticks as tick, t (t)}
-                {#if testFilter(tick, options)}
+                {#if testFilter(tick as any, options as any)}
                     {@const y =
                         plot.scales.y.fn(tick) +
                         (plot.scales.y.type === 'band' ? plot.scales.y.fn.bandwidth() * 0.5 : 0)}
-                    {@const x1_ = resolveChannel('x1', tick, options)}
-                    {@const x2_ = resolveChannel('x2', tick, options)}
+                    {@const x1_ = resolveChannel('x1', tick as any, options as any)}
+                    {@const x2_ = resolveChannel('x2', tick as any, options as any)}
                     {@const x1 =
-                        options.x1 != null ? plot.scales.x.fn(x1_) : plot.options.marginLeft}
+                        options.x1 != null && x1_ != null
+                            ? plot.scales.x.fn(x1_)
+                            : plot.options.marginLeft}
                     {@const x2 =
-                        options.x2 != null
+                        options.x2 != null && x2_ != null
                             ? plot.scales.x.fn(x2_)
                             : plot.options.marginLeft + plot.facetWidth}
-                    {@const dx = +resolveProp(options?.dx, tick, 0)}
-                    {@const dy = +resolveProp(options?.dy, tick, 0)}
+                    {@const dx = resolveProp(options.dx, tick as any, 0) ?? 0}
+                    {@const dy = resolveProp(options.dy, tick as any, 0) ?? 0}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
-                        { datum: { [RAW_VALUE]: tick } },
-                        options,
+                        { datum: { [RAW_VALUE]: tick } } as unknown as ScaledDataRecord,
+                        options as any,
                         'stroke',
                         usedScales,
                         true

package/dist/marks/helpers/AreaCanvas.svelte

@@ -47,13 +47,13 @@
                     const firstPoint = group[0];
                     if (!firstPoint || !firstPoint.valid) continue;
 
-                    let { fill, stroke, ...restStyles } = resolveScaledStyleProps(
+                    const { fill, stroke, ...restStyles } = resolveScaledStyleProps(
                         firstPoint.datum,
                         mark.options,
                         usedScales,
                         plot,
                         'fill'
-                    );
+                    ) as { fill: string; stroke: string } & Record<string, unknown>;
 
                     const opacity = maybeOpacity(restStyles['opacity']);
                     const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
@@ -65,23 +65,23 @@
                         0
                     ) as number;
 
-                    fill = resolveColor(fill || 'currentColor', canvas);
-                    stroke = resolveColor(stroke, canvas);
+                    const fillStyle = resolveColor(fill || 'currentColor', canvas);
+                    const strokeStyle = resolveColor(stroke, canvas);
 
                     // Start drawing the area
                     context.beginPath();
                     areaPath(group);
 
                     // Fill the area
-                    if (fill && fill !== 'none') {
-                        context.fillStyle = fill;
+                    if (fillStyle && fillStyle !== 'none') {
+                        context.fillStyle = fillStyle;
                         context.globalAlpha = opacity * fillOpacity;
                         context.fill();
                     }
 
                     // Stroke the area outline if strokeWidth > 0
-                    if (stroke && stroke !== 'none' && strokeWidth > 0) {
-                        context.strokeStyle = stroke;
+                    if (strokeStyle && strokeStyle !== 'none' && strokeWidth > 0) {
+                        context.strokeStyle = strokeStyle;
                         context.lineWidth = strokeWidth;
                         context.globalAlpha = opacity * strokeOpacity;
                         context.stroke();

package/dist/marks/helpers/Marker.svelte

@@ -33,7 +33,7 @@
         width: 6,
         height: 6,
         orient,
-        color: 'stroke'
+        color: 'stroke' as const
     });
 
     const MARKERS: Record<

package/dist/marks/helpers/TrailCanvas.svelte

@@ -5,7 +5,8 @@
         ScaledDataRecord,
         UsedScales,
         CurveName,
-        ConstantAccessor
+        ConstantAccessor,
+        DataRecord
     } from '../../types/index.js';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
@@ -14,7 +15,7 @@
     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 { usePlot } from '../..';
 
     interface TrailCanvasProps<Datum extends object> {
         curve?: CurveName | CurveFactory;

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

@@ -1,4 +1,4 @@
-import type { ScaledDataRecord, UsedScales, CurveName, ConstantAccessor } from '../../types/index.js';
+import type { ScaledDataRecord, UsedScales, CurveName, ConstantAccessor, DataRecord } from '../../types/index.js';
 import type { CurveFactory } from 'd3-shape';
 interface TrailCanvasProps<Datum extends object> {
     curve?: CurveName | CurveFactory;

package/package.json

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