svelteplot 0.10.3-pr-488.4 → 0.10.3-pr-490.0

package/dist/marks/Cell.svelte

@@ -21,7 +21,8 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        LinkableMarkProps
+        LinkableMarkProps,
+        MarkType
     } from '../types/index.js';
     import Mark from '../Mark.svelte';
     import { recordizeY, sort } from '../index.js';
@@ -67,11 +68,11 @@
 </script>
 
 <Mark
-    type="cell"
     required={['x', 'y']}
     requiredScales={{ x: ['band'], y: ['band'] }}
     channels={['x', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
-    {...args}>
+    {...args}
+    type={"cell" as MarkType}>
     {#snippet children({ scaledData, usedScales })}
         {@const bwx = plot.scales.x.fn.bandwidth()}
         {@const bwy = plot.scales.y.fn.bandwidth()}
@@ -85,10 +86,10 @@
                     )
                     .map((d) => ({
                         ...d,
-                        x1: d.x - bwx * 0.5,
-                        x2: d.x + bwx * 0.5,
-                        y1: d.y - bwy * 0.5,
-                        y2: d.y + bwy * 0.5
+                        x1: (d.x as number) - bwx * 0.5,
+                        x2: (d.x as number) + bwx * 0.5,
+                        y1: (d.y as number) - bwy * 0.5,
+                        y2: (d.y as number) + bwy * 0.5
                     }))}
                 <RectCanvas options={args} data={rectCanvasData} {usedScales} />
             {:else}
@@ -99,8 +100,8 @@
                             class={className}
                             {usedScales}
                             options={args}
-                            x={d.x - bwx * 0.5}
-                            y={d.y - bwy * 0.5}
+                            x={(d.x as number) - bwx * 0.5}
+                            y={(d.y as number) - bwy * 0.5}
                             width={bwx}
                             height={bwy} />
                     {/if}

package/dist/marks/CustomMarkHTML.svelte

@@ -27,7 +27,7 @@
         /** CSS class applied to the wrapper element */
         class: string | null;
         /** snippet rendered for each data point with the datum and its projected coordinates */
-        children: Snippet<{ datum: Datum; x: number; y: number }>;
+        children: Snippet<[{ datum: Datum; x: number; y: number }]>;
     }
     import { type Snippet } from 'svelte';
     import type { ChannelAccessor, ConstantAccessor, DataRecord } from '../types/index.js';
@@ -49,7 +49,7 @@
     }: CustomMarkHTMLProps = $props();
 
     function getXY(datum: Datum) {
-        const fa = frameAnchor || 'center';
+        const fa = (frameAnchor || 'center') as string;
         const isLeft = fa.endsWith('left');
         const isRight = fa.endsWith('right');
         const isTop = fa.startsWith('top');

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

@@ -13,11 +13,11 @@ declare function $$render<Datum extends DataRecord>(): {
         /** CSS class applied to the wrapper element */
         class: string | null;
         /** snippet rendered for each data point with the datum and its projected coordinates */
-        children: Snippet<{
+        children: Snippet<[{
             datum: Datum;
             x: number;
             y: number;
-        }>;
+        }]>;
     };
     exports: {};
     bindings: "";

package/dist/marks/DifferenceY.svelte

@@ -81,7 +81,7 @@
     const {
         data,
         stroke,
-        class: className = null,
+        class: className = '',
         ...options
     }: DifferenceYMarkProps = $derived({
         ...DEFAULTS,
@@ -92,27 +92,33 @@
     const x1x2Differ = $derived((x1 == null || x2 == null) && x1 !== x2);
 
     const xExtent = $derived(
-        x1x2Differ && x != null ? extent(data, (d) => resolveChannel('x', d, options)) : null
+        x1x2Differ && x != null
+            ? extent(data, (d) => resolveChannel('x', d, options) as number | null | undefined)
+            : null
     );
     const x1Extent = $derived(
-        x1x2Differ && x1 != null ? extent(data, (d) => resolveChannel('x1', d, options)) : null
+        x1x2Differ && x1 != null
+            ? extent(data, (d) => resolveChannel('x1', d, options) as number | null | undefined)
+            : null
     );
     const x2Extent = $derived(
-        x1x2Differ && x2 != null ? extent(data, (d) => resolveChannel('x2', d, options)) : null
+        x1x2Differ && x2 != null
+            ? extent(data, (d) => resolveChannel('x2', d, options) as number | null | undefined)
+            : null
     );
 
     const maxMin = $derived(
-        max([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[0]))
+        max([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d![0] as number))
     );
     const minMax = $derived(
-        min([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[1]))
+        min([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d![1] as number))
     );
 
     const croppedX1 = $derived(
         x1x2Differ
             ? data.filter((d) => {
-                  const x1val = resolveChannel(x1 != null ? 'x1' : 'x', d, options);
-                  return x1val >= maxMin && x1val <= minMax;
+                  const x1val = resolveChannel(x1 != null ? 'x1' : 'x', d, options) as number;
+                  return x1val >= (maxMin as number) && x1val <= (minMax as number);
               })
             : data
     );
@@ -120,8 +126,8 @@
     const croppedX2 = $derived(
         x1x2Differ
             ? data.filter((d) => {
-                  const x2val = resolveChannel(x2 != null ? 'x2' : 'x', d, options);
-                  return x2val >= maxMin && x2val <= minMax;
+                  const x2val = resolveChannel(x2 != null ? 'x2' : 'x', d, options) as number;
+                  return x2val >= (maxMin as number) && x2val <= (minMax as number);
               })
             : data
     );
@@ -146,7 +152,7 @@
         data={croppedX1}
         {...options}
         fill={options.positiveFill || 'pink'}
-        fillOpacity={coalesce(options.positiveFillOpacity, options.fillOpacity, 1)}
+        fillOpacity={coalesce(options.positiveFillOpacity, options.fillOpacity, 1) as number}
         x1={coalesce(x1, x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)} />
@@ -168,7 +174,7 @@
         data={croppedX2}
         {...options}
         fill={options.negativeFill || 'cyan'}
-        fillOpacity={coalesce(options.negativeFillOpacity, options.fillOpacity, 1)}
+        fillOpacity={coalesce(options.negativeFillOpacity, options.fillOpacity, 1) as number}
         x1={coalesce(x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y2, y)} />

package/dist/marks/Dot.svelte

@@ -57,7 +57,7 @@
 
     const plot = usePlot();
 
-    function getSymbolPath(symbolType, size) {
+    function getSymbolPath(symbolType: string, size: number) {
         return d3Symbol(maybeSymbol(symbolType), size)();
     }
 
@@ -65,7 +65,7 @@
         // todo: move sorting to Mark
         sort(
             recordizeXY({
-                data,
+                data: data as any[],
                 // sort by descending radius by default
                 ...(options.r &&
                 !isOrdinalScale(plot.scales.x.type) &&
@@ -98,7 +98,7 @@
     {#snippet children({ mark, usedScales, scaledData })}
         <g class="dot {className || ''}">
             {#if canvas}
-                <DotCanvas data={scaledData} {mark} />
+                <DotCanvas data={scaledData} {mark} {plot} />
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid && isValid(d.r)}
@@ -109,18 +109,18 @@
                             'stroke',
                             usedScales
                         )}
-                        <Anchor {options} datum={d.datum}>
+                        <Anchor options={options as any} datum={d.datum}>
                             <path
                                 transform="translate({d.x}, {d.y})"
-                                d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                                d={getSymbolPath(d.symbol as string, (d.r as number) ** 2 * Math.PI)}
                                 class={[
-                                    dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                    dotClass ? resolveProp(dotClass, d.datum as Datum, null) : null,
                                     styleClass
                                 ]}
                                 {style}
                                 {@attach addEventHandlers({
                                     plot,
-                                    options: args,
+                                    options: args as any,
                                     datum: d?.datum
                                 })} />
                         </Anchor>

package/dist/marks/Geo.svelte

@@ -71,7 +71,7 @@
             geoPath,
             [plot.scales.projection],
             options.r
-                ? { pointRadius: (d) => plot.scales.r.fn(resolveChannel('r', d, options)) }
+                ? { pointRadius: (d: any) => plot.scales.r.fn(resolveChannel('r', d, options)) }
                 : { pointRadius: 3 }
         )
     );
@@ -79,7 +79,7 @@
     const args = $derived(
         sort(
             recordize({
-                data,
+                data: data as any[],
                 ...(options.r ? { sort: { channel: '-r' } } : {}),
                 ...options
             })
@@ -101,24 +101,24 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        <Anchor {options} datum={d.datum}>
+                        <Anchor options={options as any} datum={d.datum}>
                             {@const title = resolveProp(args.title, d.datum, '')}
                             {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
                             {@const [style, styleClass] = resolveStyles(
                                 plot,
                                 d,
-                                args,
-                                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                                args as any,
+                                GEOJSON_PREFER_STROKE.has((geometry as any)?.type) ? 'stroke' : 'fill',
                                 usedScales
                             )}
                             <path
-                                d={path(geometry)}
+                                d={path(geometry as any)}
                                 {style}
                                 class={[styleClass]}
-                                filter={resolveProp(args.svgFilter, d.datum, undefined)}
+                                filter={resolveProp(args.svgFilter, d.datum, undefined) as string | undefined}
                                 {@attach addEventHandlers({
                                     plot,
-                                    options: args,
+                                    options: args as any,
                                     datum: d?.datum
                                 })}>
                                 {#if title}<title>{title}</title>{/if}

package/dist/marks/HTMLTooltip.svelte

@@ -32,7 +32,7 @@
 
     let { data, x, y, r, fx, fy, children }: HTMLTooltipMarkProps = $props();
 
-    let datum = $state(false);
+    let datum = $state<Datum | false>(false);
     let tooltipX = $state();
     let tooltipY = $state();
 
@@ -41,12 +41,12 @@
 
     function onPointerMove(evt: MouseEvent) {
         const plotRect = plot.body.getBoundingClientRect();
-        let facetEl = evt.target as SVGElement;
+        let facetEl: Element | null = evt.target as Element;
         while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement;
+            facetEl = facetEl.parentElement as Element | null;
         }
-        const facetIndex = +(facetEl?.dataset?.facet ?? 0);
-        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+        const facetIndex = +((facetEl as HTMLElement)?.dataset?.facet ?? 0);
+        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
 
         facetOffsetX = facetRect.left - plotRect.left - plot.options.marginLeft;
         facetOffsetY = facetRect.top - plotRect.top - plot.options.marginTop;
@@ -86,7 +86,7 @@
 
     const trees = $derived(
         groups.map((items) =>
-            quadtree()
+            quadtree<Datum>()
                 .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
                 .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
                 .addAll(items)
@@ -98,7 +98,7 @@
     class={['svelteplot-tooltip', { hide: !datum }]}
     style:left="{tooltipX ? facetOffsetX + projectX('x', plot.scales, tooltipX) : 0}px"
     style:top="{tooltipY ? facetOffsetY + projectY('y', plot.scales, tooltipY) : 0}px">
-    {@render children({ datum })}
+    {@render children({ datum: datum as Datum })}
 </div>
 
 <style>

package/dist/marks/Pointer.svelte

@@ -53,7 +53,7 @@
     };
 
     const {
-        data = [{}],
+        data = [] as Datum[],
         children,
         x,
         y,
@@ -62,20 +62,20 @@
         fy,
         maxDistance = 15,
         tolerance = Number.NEGATIVE_INFINITY,
-        onupdate = null
+        onupdate = undefined
     }: PointerMarkProps = $derived({
         ...DEFAULTS,
         ...markProps
     });
 
-    let selectedData = $state([]);
+    let selectedData = $state<any[]>([]);
 
     function onPointerMove(evt: MouseEvent) {
-        let facetEl = evt.target as SVGElement;
+        let facetEl: Element | null = evt.target as Element;
         while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement;
+            facetEl = facetEl.parentElement as Element | null;
         }
-        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
 
         const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
         const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
@@ -100,11 +100,11 @@
                 .data()
                 .filter((d) => d !== points[i])
                 .filter(
-                    (d) =>
+                    (d: any) =>
                         (!isFinite(d[POINTER_X]) ||
-                            Math.abs(d[POINTER_X] - points[i]?.[POINTER_X]) < tolerance) &&
+                            Math.abs(d[POINTER_X] - (points[i] as any)?.[POINTER_X]) < tolerance) &&
                         (!isFinite(d[POINTER_Y]) ||
-                            Math.abs(d[POINTER_Y] - points[i]?.[POINTER_Y]) < tolerance)
+                            Math.abs(d[POINTER_Y] - (points[i] as any)?.[POINTER_Y]) < tolerance)
                 );
         });
         selectedData = [...points, ...otherPoints].filter((d) => d != null);
@@ -122,18 +122,18 @@
     });
 
     const groups = $derived.by(() => {
-        const groups = [];
-        groupFacetsAndZ(indexData(data), { x, y, z, fx, fy }, (d) => groups.push(d));
+        const groups: any[][] = [];
+        groupFacetsAndZ(indexData(data as object[]) as any, { x, y, z, fx, fy }, (d) => groups.push(d));
         return groups;
     });
 
     const trees = $derived(
         groups.map((items) =>
-            quadtree()
-                .x(x != null ? (d) => d[POINTER_X] : () => 0)
-                .y(y != null ? (d) => d[POINTER_Y] : () => 0)
+            quadtree<any>()
+                .x(x != null ? (d: any) => d[POINTER_X] : () => 0)
+                .y(y != null ? (d: any) => d[POINTER_Y] : () => 0)
                 .addAll(
-                    items?.map((d) => {
+                    items?.map((d: any) => {
                         const [px, py] = projectXY(
                             plot.scales,
                             resolveChannel('x', d, { x }),

package/dist/marks/Vector.svelte

@@ -71,7 +71,7 @@
         r: defaultRadius
     };
     const {
-        data = [{}],
+        data = [{} as Datum],
         canvas,
         shape = 'arrow',
         anchor = 'middle',
@@ -151,7 +151,7 @@
 
     const args = $derived(
         sort({
-            data: indexData(data),
+            data: indexData(data as object[]) as unknown as Datum[],
             // sort by descending radius by default
             ...options
         })
@@ -173,7 +173,7 @@
         'fillOpacity',
         'strokeOpacity'
     ]}
-    {...args}>
+    {...(args as any)}>
     {#snippet children({ scaledData, usedScales })}
         <g class="vector" data-l={usedScales.length}>
             {#if canvas}
@@ -190,25 +190,25 @@
                                 strokeLinejoin: 'round',
                                 strokeLinecap: 'round',
                                 ...args
-                            },
+                            } as any,
                             shape === 'arrow-filled' ? 'fill' : 'stroke',
                             usedScales
                         )}
                         <path
-                            d={shapePath(shape, d.length, d.r)}
+                            d={shapePath(shape, d.length as number, d.r as number)}
                             transform="translate({d.x}, {d.y}) rotate({resolveProp(
                                 args.rotate,
-                                d.datum,
+                                d.datum as any,
                                 0
-                            )}) {anchor === 'start'
+                            ) as number}) {anchor === 'start'
                                 ? ''
                                 : anchor === 'end'
-                                  ? `translate(0, ${d.length})`
-                                  : `translate(0, ${d.length / 2})`}"
+                                  ? `translate(0, ${d.length as number})`
+                                  : `translate(0, ${(d.length as number) / 2})`}"
                             {style}
                             {@attach addEventHandlers({
                                 plot,
-                                options: args,
+                                options: args as any,
                                 datum: d?.datum
                             })}
                             class={[styleClass]} />

package/package.json

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