svelteplot 0.2.6-next.4 → 0.2.6-pr-67.0

package/dist/marks/helpers/RectPath.svelte

@@ -25,7 +25,8 @@ Helper component for rendering rectangular marks in SVG
         height,
         useInsetAsFallbackVertically = true,
         useInsetAsFallbackHorizontally = true,
-        usedScales
+        usedScales,
+        fallbackStyle = 'fill'
     }: {
         datum: ScaledDataRecord;
         class: string | null;
@@ -47,39 +48,40 @@ Helper component for rendering rectangular marks in SVG
          */
         useInsetAsFallbackHorizontally?: boolean;
         usedScales: UsedScales;
+        fallbackStyle?: 'fill' | 'stroke';
     } = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const dx = $derived(+(resolveProp(options.dx, datum.datum, 0) as number));
-    const dy = $derived(+(resolveProp(options.dy, datum.datum, 0) as number));
-    const inset = $derived(+(resolveProp(options.inset, datum.datum, 0) as number));
+    const dx = $derived(+(resolveProp(options.dx, datum?.datum, 0) as number));
+    const dy = $derived(+(resolveProp(options.dy, datum?.datum, 0) as number));
+    const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
     const insetLeft = $derived(
         +(resolveProp(
             options.insetLeft,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetRight = $derived(
         +(resolveProp(
             options.insetRight,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetTop = $derived(
         +(resolveProp(
             options.insetTop,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
     const insetBottom = $derived(
         +(resolveProp(
             options.insetBottom,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
@@ -94,12 +96,14 @@ Helper component for rendering rectangular marks in SVG
                     borderRadius.bottomLeft ?? 0
                 ) > 0)
     );
-    const [style, styleClass] = $derived(resolveStyles(plot, datum, options, 'fill', usedScales));
+    const [style, styleClass] = $derived(
+        resolveStyles(plot, datum, options, fallbackStyle, usedScales)
+    );
 </script>
 
 {#if hasBorderRadius}
     <path
-        transform="translate({[x + dx + insetLeft, y + insetBottom + dy]})"
+        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
         d={roundedRect(
             0,
             0,
@@ -112,11 +116,11 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {:else}
     <rect
-        transform="translate({[x + dx + insetLeft, y + insetBottom + dy]})"
+        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
         width={width - insetLeft - insetRight}
         height={height - insetTop - insetBottom}
         class={[styleClass, className]}
@@ -124,6 +128,6 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {/if}

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

@@ -20,6 +20,7 @@ type $$ComponentProps = {
      */
     useInsetAsFallbackHorizontally?: boolean;
     usedScales: UsedScales;
+    fallbackStyle?: 'fill' | 'stroke';
 };
 /** Helper component for rendering rectangular marks in SVG */
 declare const RectPath: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/marks/helpers/events.js

@@ -6,7 +6,7 @@ import { INDEX } from '../../constants.js';
  * of the plot frame, regardless of which element triggered the event
  */
 export function clientToLayerCoordinates(event, plotBody) {
-    // If layerX/Y already exist and the target is the plot frame (rect element), 
+    // If layerX/Y already exist and the target is the plot frame (rect element),
     // we can use them directly
     // if (event.layerX !== undefined && (event.target as SVGElement).tagName === 'rect') {
     //     return [event.layerX, event.layerY];
@@ -17,10 +17,7 @@ export function clientToLayerCoordinates(event, plotBody) {
         return [0, 0];
     const plotBodyRect = plotBody.getBoundingClientRect();
     // Calculate the coordinates relative to the plot body
-    return [
-        event.clientX - plotBodyRect.left,
-        event.clientY - plotBodyRect.top
-    ];
+    return [event.clientX - plotBodyRect.left, event.clientY - plotBodyRect.top];
 }
 export function addEventHandlers(node, { options, datum, getPlotState }) {
     const events = pick(options, [
@@ -52,7 +49,7 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
         'ontouchcancel',
         'ontouchend',
         'ontouchmove',
-        'onwheel',
+        'onwheel'
     ]);
     const listeners = new Map();
     // attach event handlers

package/dist/transforms/bollinger.d.ts

@@ -11,11 +11,4 @@ export type BollingerOptions = {
 };
 export declare function bollingerX(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
 export declare function bollingerY(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
-export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): {
-    data: {
-        __x: import("../types.js").RawValue;
-        __lo: number;
-        __avg: number;
-        __hi: number;
-    }[];
-};
+export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): any;

package/dist/transforms/centroid.d.ts

@@ -1,9 +1,2 @@
 import type { DataRecord, TransformArg } from '../types.js';
-export declare function geoCentroid({ data, ...options }: TransformArg<DataRecord>): {
-    x: (d: any) => any;
-    y: (d: any) => any;
-    data: {
-        __centroid__: [number, number];
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-};
+export declare function geoCentroid({ data, ...options }: TransformArg<DataRecord>): any;

package/dist/transforms/group.d.ts

@@ -38,29 +38,21 @@ type GroupZOptions = GroupXOptions | GroupYOptions;
  * groups the dataset by x and y channel and optionally reduces the group items
  * to output channels fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: DataRecord[];
-};
+export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the x channel and optionally reduces the group items
  * to output channels y, y1, y2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: DataRecord[];
-};
+export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the y channel and optionally reduces the group items
  * to output channels x, x1, x2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): {
-    data: DataRecord[];
-};
+export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): any;
 /**
  * groups the dataset by the z channel and optionally reduces the group items
  * to output channels x, x1, x2, y, y1, y2, fill, stroke, r, opacity, fillOpacity,
  * or strokeOpacity
  */
-export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): {
-    data: DataRecord[];
-};
+export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): any;
 export {};

package/dist/transforms/index.d.ts

@@ -6,6 +6,7 @@ export { map, mapX, mapY } from './map.js';
 export { normalizeX, normalizeY } from './normalize.js';
 export { group, groupX, groupY, groupZ } from './group.js';
 export { intervalX, intervalY } from './interval.js';
+export { jitterX, jitterY } from './jitter.js';
 export { recordizeX, recordizeY } from './recordize.js';
 export { renameChannels, replaceChannels } from './rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';

package/dist/transforms/index.js

@@ -6,6 +6,7 @@ export { map, mapX, mapY } from './map.js';
 export { normalizeX, normalizeY } from './normalize.js';
 export { group, groupX, groupY, groupZ } from './group.js';
 export { intervalX, intervalY } from './interval.js';
+export { jitterX, jitterY } from './jitter.js';
 export { recordizeX, recordizeY } from './recordize.js';
 export { renameChannels, replaceChannels } from './rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';

package/dist/transforms/interval.d.ts

@@ -1,11 +1,7 @@
 import type { PlotState, TransformArg } from '../types.js';
 export declare function intervalX<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    data: T[];
-};
+}): any;
 export declare function intervalY<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    data: T[];
-};
+}): any;

package/dist/transforms/jitter.d.ts

@@ -0,0 +1,17 @@
+import type { Channels, DataRecord, TransformArg } from '../types.js';
+type JitterOptions = {
+    type: 'uniform' | 'normal';
+    /** width for uniform jittering */
+    width: number;
+    /** standard deviation for normal jittering */
+    std: number;
+    /**
+     * optional random number source that produces values in range [0,1)
+     * useful for testing with a deterministic source
+     */
+    source?: () => number;
+};
+export declare function jitterX({ data, ...channels }: TransformArg<DataRecord>, options: JitterOptions): TransformArg<DataRecord>;
+export declare function jitterY({ data, ...channels }: TransformArg<DataRecord>, options: JitterOptions): TransformArg<DataRecord>;
+export declare function jitter(channel: 'x' | 'y', data: DataRecord[], channels: Channels, options: JitterOptions): TransformArg<DataRecord>;
+export {};

package/dist/transforms/jitter.js

@@ -1 +1,60 @@
-"use strict";
+import { resolveChannel } from '../helpers/resolve';
+import { randomUniform, randomNormal } from 'd3-random';
+import { isDate } from '../helpers/typeChecks';
+import { durations, maybeTimeInterval, parseTimeInterval } from '../helpers/time';
+const JITTER_X = Symbol('jitterX');
+const JITTER_Y = Symbol('jitterY');
+export function jitterX({ data, ...channels }, options) {
+    return jitter('x', data, channels, options);
+}
+export function jitterY({ data, ...channels }, options) {
+    return jitter('y', data, channels, options);
+}
+export function jitter(channel, data, channels, options) {
+    if (channels[channel]) {
+        const type = options?.type ?? 'uniform';
+        const width = parseNumber(options?.width ?? 0.35);
+        const std = parseNumber(options?.std ?? 0.15);
+        // @todo support time interval strings as width/std parameters
+        // Use the provided source or default to Math.random
+        const rng = options?.source ?? Math.random;
+        const random = type === 'uniform'
+            ? randomUniform.source(rng)(-width, width)
+            : randomNormal.source(rng)(0, std);
+        const accKey = channel === 'x' ? JITTER_X : JITTER_Y;
+        return {
+            data: data.map((row) => {
+                const value = resolveChannel(channel, row, channels);
+                return {
+                    ...row,
+                    [accKey]: typeof value === 'number'
+                        ? value + random()
+                        : isDate(value)
+                            ? new Date(value.getTime() + random())
+                            : value
+                };
+            }),
+            ...channels,
+            // point channel to new accessor symbol
+            [channel]: accKey
+        };
+    }
+    return {
+        data,
+        ...channels
+    };
+}
+function parseNumber(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string') {
+        try {
+            const [name, period] = parseTimeInterval(value);
+            return durations.get(name) * period;
+        }
+        catch (err) {
+            return 0;
+        }
+    }
+    return 0;
+}

package/dist/transforms/map.d.ts

@@ -1,10 +1,4 @@
-import type { TransformArg, MapOptions, MapMethod, DataRecord } from '../types.js';
-export declare function map<T>(args: TransformArg<T>, options: MapOptions): {
-    data: DataRecord[];
-};
-export declare function mapX<T>(args: TransformArg<T>, mapper: MapMethod): {
-    data: DataRecord[];
-};
-export declare function mapY<T>(args: TransformArg<T>, mapper: MapMethod): {
-    data: DataRecord[];
-};
+import type { TransformArg, MapOptions, MapMethod } from '../types.js';
+export declare function map<T>(args: TransformArg<T>, options: MapOptions): any;
+export declare function mapX<T>(args: TransformArg<T>, mapper: MapMethod): any;
+export declare function mapY<T>(args: TransformArg<T>, mapper: MapMethod): any;

package/dist/transforms/normalize.d.ts

@@ -1,9 +1,5 @@
 import type { TransformArg, MapIndexObject } from '../types.js';
 type NormalizeBasis = 'deviation' | 'first' | 'last' | 'min' | 'max' | 'mean' | 'median' | 'sum' | 'extent' | MapIndexObject;
-export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): {
-    data: import("../types.js").DataRecord[];
-};
-export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): {
-    data: import("../types.js").DataRecord[];
-};
+export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
+export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
 export {};

package/dist/transforms/recordize.js

@@ -12,7 +12,7 @@ export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: t
             data: data.map((value, index) => ({
                 __value: value,
                 ...(withIndex ? { [INDEX]: index } : {}),
-                [RAW_VALUE]: value,
+                [RAW_VALUE]: value
             })),
             ...channels,
             x: RAW_VALUE,
@@ -33,7 +33,7 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
         return {
             data: Array.from(data).map((value, index) => ({
                 ...(withIndex ? { __index: index } : {}),
-                [RAW_VALUE]: value,
+                [RAW_VALUE]: value
             })),
             ...channels,
             ...(withIndex ? { x: '__index' } : {}),
@@ -80,9 +80,9 @@ export function recordize({ data, ...channels }) {
     if (!isDataRecord(data[0])) {
         return {
             data: data.map((d) => ({
-                [RAW_VALUE]: d,
+                [RAW_VALUE]: d
             })),
-            ...channels,
+            ...channels
         };
     }
     return { data, ...channels };

package/dist/transforms/select.d.ts

@@ -5,31 +5,17 @@ type AtLeastOne<T, U = {
 type SelectOptions = 'first' | 'last' | AtLeastOne<{
     [k in ChannelName]: 'min' | 'max';
 }>;
-export declare function select({ data, ...channels }: TransformArg<DataRecord>, options: SelectOptions): {
-    data: DataRecord[];
-};
+export declare function select({ data, ...channels }: TransformArg<DataRecord>, options: SelectOptions): any;
 /**
  * Keeps only the first item of each group
  */
-export declare function selectFirst(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
+export declare function selectFirst(args: TransformArg<DataRecord>): any;
 /**
  * Keeps only the last item of each group
  */
-export declare function selectLast(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMinX(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMaxX(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMinY(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMaxY(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
+export declare function selectLast(args: TransformArg<DataRecord>): any;
+export declare function selectMinX(args: TransformArg<DataRecord>): any;
+export declare function selectMaxX(args: TransformArg<DataRecord>): any;
+export declare function selectMinY(args: TransformArg<DataRecord>): any;
+export declare function selectMaxY(args: TransformArg<DataRecord>): any;
 export {};

package/dist/transforms/sort.d.ts

@@ -2,27 +2,14 @@ import type { DataRecord, DataRow, TransformArg } from '../types.js';
 export declare const SORT_KEY: unique symbol;
 export declare function sort({ data, ...channels }: TransformArg<DataRecord>, options?: {
     reverse?: boolean;
-}): {
-    sort: null;
-    data: {
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-} | {
-    data: DataRecord[];
-};
+}): any;
 /**
  * reverses the data row order
  */
 export declare function shuffle({ data, ...channels }: TransformArg<DataRow[]>, options?: {
     seed?: number;
-}): {
-    sort: null;
-    data: DataRow[][];
-};
+}): any;
 /**
  * reverses the data row order
  */
-export declare function reverse({ data, ...channels }: TransformArg<DataRow[]>): {
-    sort: null;
-    data: DataRow[][];
-};
+export declare function reverse({ data, ...channels }: TransformArg<DataRow[]>): any;

package/dist/transforms/window.d.ts

@@ -7,18 +7,6 @@ type WindowOptions = {
     reduce: ReducerName;
     strict: boolean;
 };
-export declare function windowX(args: TransformArg<DataRecord>, options: WindowOptions): {
-    data: {
-        [x: string]: import("../types.js").RawValue;
-        [x: symbol]: import("../types.js").RawValue;
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-};
-export declare function windowY(args: TransformArg<DataRecord>, options: WindowOptions): {
-    data: {
-        [x: string]: import("../types.js").RawValue;
-        [x: symbol]: import("../types.js").RawValue;
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-};
+export declare function windowX(args: TransformArg<DataRecord>, options: WindowOptions): any;
+export declare function windowY(args: TransformArg<DataRecord>, options: WindowOptions): any;
 export {};

package/dist/types.d.ts

@@ -488,6 +488,18 @@ export type FacetContext = {
     getTestFacet: () => TestFacetFunction;
     getFacetState: () => FacetState;
 };
+export type LinkableMarkProps = {
+    /**
+     * simple browser tooltip to be displayed on mouseover
+     */
+    title: ConstantAccessor<string>;
+    /**
+     * if set, the mark element will be wrapped in a <a> link
+     * element
+     */
+    href: ConstantAccessor<string>;
+    target: ConstantAccessor<'_self' | '_blank' | string>;
+};
 export type BaseMarkProps = Partial<{
     /**
      * Filter the data without modifying the inferred scales
@@ -544,20 +556,10 @@ export type BaseMarkProps = Partial<{
     ontouchcancel?: MouseEventHandler<SVGPathElement>;
     oncontextmenu?: MouseEventHandler<SVGPathElement>;
     onwheel?: MouseEventHandler<SVGPathElement>;
-    /**
-     * simple browser tooltip to be displayed on mouseover
-     */
-    title: ConstantAccessor<string>;
-    /**
-     * if set, the mark element will be wrapped in a <a> link
-     * element
-     */
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<'_self' | '_blank' | string>;
     /**
      * if you want to give your mark element an extra CSS class
      */
-    class: string;
+    class: string | null;
     cursor: ConstantAccessor<CSS.Property.Cursor>;
 }>;
 export type BorderRadius = number | {

package/dist/ui/RadioInput.svelte

@@ -18,7 +18,7 @@
     {#if label}
         <label for={randomId}>{label}:</label>
     {/if}
-    {#each options as p}
+    {#each options as p (p)}
         <label>
             <input type="radio" id={randomId} bind:group={value} value={p} />
             {format(p)}

package/dist/ui/Select.svelte

@@ -15,7 +15,7 @@
 <label
     >{label || ''}
     <select bind:value>
-        {#each options as p}
+        {#each options as p (p)}
             <option value={p}>{format(p)}</option>
         {/each}
     </select></label>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.4",
+    "version": "0.2.6-pr-67.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -53,13 +53,13 @@
         "@sveltejs/adapter-auto": "^6.0.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/eslint-config": "^8.2.0",
-        "@sveltejs/kit": "^2.21.0",
+        "@sveltejs/kit": "^2.21.1",
         "@sveltejs/package": "^2.3.11",
         "@sveltejs/vite-plugin-svelte": "5.0.3",
         "@sveltepress/theme-default": "^6.0.3",
         "@sveltepress/twoslash": "^1.2.2",
         "@sveltepress/vite": "^1.2.2",
-        "@testing-library/svelte": "^5.2.7",
+        "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3-array": "^3.2.1",
         "@types/d3-color": "^3.1.3",
@@ -77,9 +77,9 @@
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
-        "eslint": "^9.26.0",
+        "eslint": "^9.27.0",
         "eslint-config-prettier": "^10.1.5",
-        "eslint-plugin-svelte": "3.7.0",
+        "eslint-plugin-svelte": "3.9.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
@@ -93,11 +93,11 @@
         "svg-path-parser": "^1.1.0",
         "topojson-client": "^3.1.0",
         "tslib": "^2.8.1",
-        "typedoc": "^0.28.4",
+        "typedoc": "^0.28.5",
         "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
-        "vitest": "^3.1.3",
+        "vitest": "^3.1.4",
         "vitest-matchmedia-mock": "^2.0.3"
     },
     "types": "./dist/index.d.ts",
@@ -116,9 +116,9 @@
         "d3-scale-chromatic": "^3.1.0",
         "d3-shape": "^3.2.0",
         "d3-time": "^3.1.0",
-        "es-toolkit": "^1.37.2",
+        "es-toolkit": "^1.38.0",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
-        "svelte": "5.30.1"
+        "svelte": "5.33.2"
     }
 }