svelteplot 0.2.0 → 0.2.2

package/dist/Mark.svelte

@@ -18,6 +18,7 @@
         ScaledDataRecord,
         ScaleType
     } from './types.js';
+    import { isEqual } from 'es-toolkit';
     import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
     import { testFilter, isValid } from './helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
@@ -105,6 +106,13 @@
 
     let added = false;
 
+    $effect(() => {
+        const prevOptions = untrack(() => mark.options);
+        if (!isEqual(prevOptions, optionsWithAutoFacet)) {
+            mark.options = optionsWithAutoFacet;
+        }
+    });
+
     $effect(() => {
         if (added) return;
         // without using untrack() here we end up with inexplicable
@@ -118,6 +126,7 @@
         );
         mark.data = untrack(() => data);
         mark.options = untrack(() => optionsWithAutoFacet);
+
         addMark(mark);
         added = true;
     });
@@ -225,6 +234,7 @@
                                       usedScales.y,
                                       suffix
                                   );
+
                         out[`x${suffix}`] = x;
                         out[`y${suffix}`] = y;
                         out.valid =
@@ -243,7 +253,7 @@
                 ScaleName
             ][]) {
                 // check if the mark has defined an accessor for this channel
-                if (options?.[channel] !== undefined && out[channel] === undefined) {
+                if (options?.[channel] != null && out[channel] === undefined) {
                     // resolve value
                     const value = row[channel];
 
@@ -256,6 +266,7 @@
                         : value;
 
                     out.valid = out.valid && isValid(value);
+
                     // apply dx/dy transform
                     out[channel] =
                         scale === 'x' && Number.isFinite(scaled) ? (scaled as number) + dx : scaled;

package/dist/helpers/index.d.ts

@@ -16,3 +16,4 @@ export declare const POSITION_CHANNELS: Set<ChannelName>;
 export declare function parseInset(inset: number | string, width: number): number;
 export declare function omit<T extends {}, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
 export declare function identity<T>(x: T): T;
+export declare const GEOJSON_PREFER_STROKE: Set<string>;

package/dist/helpers/index.js

@@ -53,3 +53,4 @@ export function omit(obj, ...keys) {
 export function identity(x) {
     return x;
 }
+export const GEOJSON_PREFER_STROKE = new Set(['MultiLineString', 'LineString']);

package/dist/helpers/resolve.d.ts

@@ -3,7 +3,7 @@ import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRo
 type ChannelAlias = {
     channel: ScaledChannelName;
 };
-export declare function resolveProp<T>(accessor: ConstantAccessor<T>, datum: DataRecord | null, _defaultValue?: T | null): T | null;
+export declare function resolveProp<T>(accessor: ConstantAccessor<T>, datum: DataRecord | null, _defaultValue?: T | null): T | typeof _defaultValue;
 type ChannelOptions = {
     value: ChannelAccessor;
     scale?: ScaleName | null;

package/dist/helpers/resolve.js

@@ -4,16 +4,17 @@ import isRawValue from './isRawValue.js';
 import { isValid } from './isValid.js';
 import { pick } from 'es-toolkit';
 import { getBaseStylesObject } from './getBaseStyles.js';
+import { RAW_VALUE } from '../transforms/recordize.js';
 export function resolveProp(accessor, datum, _defaultValue = null) {
     if (typeof accessor === 'function') {
-        // datum.___orig___ exists if an array of raw values was used as dataset and got
+        // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
         // "recordized" by the recordize transform. We want to hide this wrapping to the user
         // so we're passing the original value to accessor functions instead of our wrapped record
         return datum == null
             ? accessor()
-            : accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+            : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
     }
-    else if (typeof accessor === 'string' && datum && datum[accessor] !== undefined) {
+    else if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum && datum[accessor] !== undefined) {
         return datum[accessor];
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
@@ -46,10 +47,10 @@ function resolve(datum, accessor, channel, scale) {
     if (isDataRecord(datum)) {
         // use accessor function
         if (typeof accessor === 'function')
-            // datum.___orig___ exists if an array of raw values was used as dataset and got
+            // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
             // "recordized" by the recordize transform. We want to hide this wrapping to the user
             // so we're passing the original value to accessor functions instead of our wrapped record
-            return accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+            return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
         // use accessor string
         if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum[accessor] !== undefined)
             return datum[accessor];

package/dist/helpers/scales.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName } from '../types.js';
+import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types.js';
 /**
  * compute the plot scales
  */
@@ -35,7 +35,7 @@ export declare function inferScaleType(name: ScaleName, dataValues: RawValue[],
  * scales, we need to check if the the scale is supposed to be used
  * not. That's what this function is used for.
  */
-export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): { [k in ScaledChannelName]: boolean; };
+export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;
 export declare function looksLikeANumber(input: string | number): boolean;
 export declare function projectXY(scales: PlotScales, x: RawValue, y: RawValue, useXScale?: boolean, useYScale?: boolean): [number, number];
 export declare function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value: RawValue): number;

package/dist/helpers/scales.js

@@ -113,7 +113,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                             for (const datum of mark.data) {
                                 const value = resolveProp(channelOptions.value, datum);
                                 dataValues.add(value);
-                                if (name === 'color' && scaleOptions.type === 'quantile') {
+                                if (name === 'color' && scaleOptions.type === 'quantile' || scaleOptions.type === 'quantile-cont') {
                                     allDataValues.push(value);
                                 }
                             }
@@ -146,6 +146,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
     if (isOrdinal && sortOrdinalDomain) {
         valueArr.sort(ascending);
     }
+    const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
     const domain = scaleOptions.domain
         ? isOrdinal
             ? scaleOptions.domain
@@ -157,9 +158,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
             type === 'quantile' ||
             type === 'quantile-cont'
             ? name === 'y'
-                ? valueArr.toReversed()
-                : valueArr
-            : extent(scaleOptions.zero ? [0, ...valueArr] : valueArr);
+                ? valueArray.toReversed()
+                : valueArray
+            : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
     if (!scaleOptions.scale) {
         throw new Error(`No scale function defined for ${name}`);
     }

package/dist/helpers/typeChecks.js

@@ -26,16 +26,20 @@ export function isSymbolOrNull(v) {
     return v == null || ((typeof v === 'string' || typeof v === 'object') && isSymbol(v));
 }
 export function isColorOrNull(v) {
-    return (v == null ||
-        (typeof v === 'string' &&
-            (v === 'currentColor' ||
-                CSS_VAR.test(v) ||
-                CSS_COLOR.test(v) ||
-                CSS_COLOR_MIX.test(v) ||
-                CSS_COLOR_CONTRAST.test(v) ||
-                CSS_RGBA.test(v) ||
-                CSS_URL.test(v) ||
-                color(v) !== null)));
+    if (v == null)
+        return true;
+    if (typeof v === 'string') {
+        v = `${v}`.toLowerCase();
+        return (v === 'currentcolor' ||
+            CSS_VAR.test(v) ||
+            CSS_COLOR.test(v) ||
+            CSS_COLOR_MIX.test(v) ||
+            CSS_COLOR_CONTRAST.test(v) ||
+            CSS_RGBA.test(v) ||
+            CSS_URL.test(v) ||
+            color(v) !== null);
+    }
+    return false;
 }
 export function isOpacityOrNull(v) {
     return v == null || (typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 1);

package/dist/index.d.ts

@@ -58,10 +58,12 @@ export { normalizeX, normalizeY } from './transforms/normalize.js';
 export { group, groupX, groupY, groupZ } from './transforms/group.js';
 export { intervalX, intervalY } from './transforms/interval.js';
 export { recordizeX, recordizeY } from './transforms/recordize.js';
-export { renameChannels } from './transforms/rename.js';
+export { renameChannels, replaceChannels } from './transforms/rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
 export { shiftX, shiftY } from './transforms/shift.js';
 export { sort, shuffle, reverse } from './transforms/sort.js';
 export { stackX, stackY } from './transforms/stack.js';
 export { windowX, windowY } from './transforms/window.js';
 export { formatMonth } from './helpers/formats.js';
+export { default as LinearGradientX } from './marks/helpers/LinearGradientX.svelte';
+export { default as LinearGradientY } from './marks/helpers/LinearGradientY.svelte';

package/dist/index.js

@@ -61,11 +61,13 @@ export { normalizeX, normalizeY } from './transforms/normalize.js';
 export { group, groupX, groupY, groupZ } from './transforms/group.js';
 export { intervalX, intervalY } from './transforms/interval.js';
 export { recordizeX, recordizeY } from './transforms/recordize.js';
-export { renameChannels } from './transforms/rename.js';
+export { renameChannels, replaceChannels } from './transforms/rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
 export { shiftX, shiftY } from './transforms/shift.js';
 export { sort, shuffle, reverse } from './transforms/sort.js';
 export { stackX, stackY } from './transforms/stack.js';
 export { windowX, windowY } from './transforms/window.js';
-// format helpers
+// helpers
 export { formatMonth } from './helpers/formats.js';
+export { default as LinearGradientX } from './marks/helpers/LinearGradientX.svelte';
+export { default as LinearGradientY } from './marks/helpers/LinearGradientY.svelte';

package/dist/marks/BarX.svelte

@@ -6,13 +6,11 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { stackX, recordizeX, intervalX, sort } from '../index.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { roundedRect } from '../helpers/roundedRect.js';
     import type { PlotContext, BaseMarkProps, RectMarkProps, ChannelAccessor } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
     import type { DataRow } from '../types.js';
-    import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
     type BarXProps = BaseMarkProps & {
         data: DataRow[];
@@ -21,14 +19,6 @@
         x2?: ChannelAccessor;
         y?: ChannelAccessor;
         stack?: StackOptions;
-        borderRadius?:
-            | number
-            | {
-                  topLeft?: number;
-                  topRight?: number;
-                  bottomRight?: number;
-                  bottomLeft?: number;
-              };
     } & RectMarkProps;
 
     let { data = [{}], class: className = null, stack, ...options }: BarXProps = $props();
@@ -59,33 +49,17 @@
                 {@const bw = plot.scales.y.fn.bandwidth()}
                 {@const minx = Math.min(d.x1, d.x2)}
                 {@const maxx = Math.max(d.x1, d.x2)}
-                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
-                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
-                {@const insetTop = resolveProp(args.insetTop || args.inset, d.datum, 0)}
-                {@const insetBottom = resolveProp(args.insetBottom || args.inset, d.datum, 0)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <path
-                        d={roundedRect(
-                            0,
-                            0,
-                            maxx - minx - insetLeft - insetRight,
-                            bw - insetTop - insetBottom,
-                            options.borderRadius
-                        )}
-                        class={[styleClass, className]}
-                        {style}
-                        transform="translate({[
-                            minx + dx + insetLeft,
-                            d.y + insetTop + dy - bw * 0.5
-                        ]})"
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        {usedScales}
+                        class={className}
+                        {options}
+                        datum={d}
+                        x={minx}
+                        useInsetAsFallbackHorizontally={false}
+                        y={d.y - bw * 0.5}
+                        width={maxx - minx}
+                        height={bw} />
                 {/if}
             {/each}
         </GroupMultiple>

package/dist/marks/BarY.svelte

@@ -6,40 +6,25 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { intervalY, stackY, recordizeY, sort } from '../index.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { roundedRect } from '../helpers/roundedRect.js';
-    import {
-        type PlotContext,
-        type BaseMarkProps,
-        type ChannelAccessor,
-        type DataRow
-    } from '../types.js';
+    import type { PlotContext, BaseMarkProps, BaseRectMarkProps } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
-    import { maybeData } from '../helpers/index.js';
-    import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
-    type BarYProps = BaseMarkProps & {
-        data: DataRow[];
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        stack?: StackOptions;
-        /**
-         * Converts y into y1/y2 ranges based on the provided interval. Disables the
-         * implicit stacking
-         */
-        interval?: number | string;
-        borderRadius?:
-            | number
-            | {
-                  topLeft?: number;
-                  topRight?: number;
-                  bottomRight?: number;
-                  bottomLeft?: number;
-              };
-    };
+    type BarYProps = BaseMarkProps &
+        BaseRectMarkProps & {
+            data: DataRow[];
+            x?: ChannelAccessor;
+            y?: ChannelAccessor;
+            y1?: ChannelAccessor;
+            y2?: ChannelAccessor;
+            stack?: StackOptions;
+            /**
+             * Converts y into y1/y2 ranges based on the provided interval. Disables the
+             * implicit stacking
+             */
+            interval?: number | string;
+        };
 
     let { data = [{}], class: className = null, stack, ...options }: BarYProps = $props();
 
@@ -63,39 +48,23 @@
     requiredScales={{ x: ['band'] }}
     channels={['x', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, scaledData, usedScales })}
+    {#snippet children({ scaledData, usedScales })}
         <GroupMultiple class="bar-y" length={scaledData.length}>
             {#each scaledData as d}
                 {@const bw = plot.scales.x.fn.bandwidth()}
                 {@const miny = Math.min(d.y1, d.y2)}
                 {@const maxy = Math.max(d.y1, d.y2)}
-                {@const insetLeft = resolveProp(args.insetLeft || args.inset, d.datum, 0)}
-                {@const insetRight = resolveProp(args.insetRight || args.inset, d.datum, 0)}
-                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
-                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <path
-                        d={roundedRect(
-                            0,
-                            0,
-                            bw - insetLeft - insetRight,
-                            maxy - miny - insetTop - insetBottom,
-                            options.borderRadius
-                        )}
-                        class={[styleClass, className]}
-                        {style}
-                        transform="translate({[
-                            d.x + insetLeft + dx - bw * 0.5,
-                            miny + dy + insetTop
-                        ]})"
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        x={d.x - bw * 0.5}
+                        y={miny}
+                        options={args}
+                        class={className}
+                        width={bw}
+                        height={maxy - miny}
+                        datum={d}
+                        {usedScales}
+                        useInsetAsFallbackVertically={false} />
                 {/if}
             {/each}
         </GroupMultiple>

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

@@ -1,6 +1,6 @@
-import { type BaseMarkProps, type ChannelAccessor, type DataRow } from '../types.js';
+import type { BaseMarkProps, BaseRectMarkProps } from '../types.js';
 import type { StackOptions } from '../transforms/stack.js';
-type BarYProps = BaseMarkProps & {
+type BarYProps = BaseMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
@@ -12,12 +12,6 @@ type BarYProps = BaseMarkProps & {
      * implicit stacking
      */
     interval?: number | string;
-    borderRadius?: number | {
-        topLeft?: number;
-        topRight?: number;
-        bottomRight?: number;
-        bottomLeft?: number;
-    };
 };
 /** For vertical column charts using a band scale as x axis */
 declare const BarY: import("svelte").Component<BarYProps, {}, "">;

package/dist/marks/Cell.svelte

@@ -6,9 +6,7 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { recordizeY, sort } from '../index.js';
-    import { roundedRect } from '../helpers/roundedRect.js';
-    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeNumber } from '../helpers/index.js';
+    import { resolveChannel } from '../helpers/resolve.js';
     import type {
         PlotContext,
         DataRecord,
@@ -17,7 +15,7 @@
         ChannelAccessor
     } from '../types.js';
     import { isValid } from '../helpers/isValid.js';
-    import { addEventHandlers } from './helpers/events.js';
+    import RectPath from './helpers/RectPath.svelte';
 
     type CellProps = BaseMarkProps & {
         data: DataRecord[];
@@ -59,43 +57,21 @@
     requiredScales={{ x: ['band'], y: ['band'] }}
     channels={['x', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, scaledData, usedScales })}
+    {#snippet children({ scaledData, usedScales })}
         {@const bwx = plot.scales.x.fn.bandwidth()}
         {@const bwy = plot.scales.y.fn.bandwidth()}
         <g class="cell {className || ''}" data-fill={usedScales.fillOpacity}>
             {#each scaledData as d}
-                {@const inset = resolveProp(args.inset, d.datum, 0)}
-                {@const insetLeft = resolveProp(args.insetLeft, d.datum)}
-                {@const insetRight = resolveProp(args.insetRight, d.datum)}
-                {@const insetTop = resolveProp(args.insetTop, d.datum)}
-                {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
-                {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0))}
-                {@const insetT = maybeNumber(coalesce(insetTop, inset, 0))}
-                {@const insetR = maybeNumber(coalesce(insetRight, inset, 0))}
-                {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0))}
                 {#if d.valid && (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))}
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <path
-                        d={roundedRect(
-                            0,
-                            0,
-                            bwx - insetL - insetR,
-                            bwy - insetT - insetB,
-                            options.borderRadius
-                        )}
-                        class={[styleClass]}
-                        {style}
-                        transform="translate({[
-                            d.x + insetL + dx - bwx * 0.5,
-                            d.y + insetT + dy - bwy * 0.5
-                        ]})"
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        datum={d}
+                        class={className}
+                        {usedScales}
+                        options={args}
+                        x={d.x - bwx * 0.5}
+                        y={d.y - bwy * 0.5}
+                        width={bwx}
+                        height={bwy} />
                 {/if}
             {/each}
         </g>

package/dist/marks/ColorLegend.svelte

@@ -2,7 +2,7 @@
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '../index.js';
     import { symbol as d3Symbol, symbol } from 'd3-shape';
-    import { range as d3Range } from 'd3-array';
+    import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
     import type { DefaultOptions, PlotContext } from '../types.js';
@@ -72,7 +72,7 @@
                 </div>
             {/each}
         {:else if scaleType === 'quantile' || scaleType === 'quantize' || scaleType === 'threshold'}
-            {@const domain = plot.scales.color.domain}
+            {@const domain = extent(plot.scales.color.fn.domain())}
             {@const range = plot.scales.color.range}
             {@const tickLabels =
                 scaleType === 'quantile'
@@ -85,7 +85,6 @@
                 domain[1],
                 (domain[1] - domain[0]) / range.length
             ).slice(1)}
-
             <Plot
                 maxWidth="240px"
                 margins={1}
@@ -112,16 +111,13 @@
                     </linearGradient>
                 </defs>
                 <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
-                <AxisX tickSize={18} dy={-17} />
+                <AxisX tickSize={18} dy={-17} tickFormat={(d, i) => tickFormat(tickLabels[i])} />
             </Plot>
         {:else}
             <!--- continuous -->
-            {@const domain = plot.scales.color.domain}
-            {@const ticks = new Set([
-                domain[0],
-                ...(plot.scales.color?.fn?.ticks?.(Math.ceil(width / 5)) ?? []),
-                domain[1]
-            ])}
+            {@const domain = extent(plot.scales.color.domain)}
+            {@const ticks = d3Range(domain[0], domain[1], (domain[1] - domain[0]) / 7).slice(1)}
+
             <Plot
                 maxWidth="240px"
                 margins={1}

package/dist/marks/Dot.svelte

@@ -53,7 +53,7 @@
     }: DotProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
     function getSymbolPath(symbolType, size) {
         return d3Symbol(maybeSymbol(symbolType), size)();
@@ -96,7 +96,7 @@
     {#snippet children({ mark, usedScales, scaledData })}
         <g class="dots {className || ''}">
             {#if canvas}
-                <DotCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} />
+                <DotCanvas data={scaledData} {mark} />
             {:else}
                 {#each scaledData as d}
                     {#if d.valid && isValid(d.r)}