svelteplot 0.12.0 → 0.14.0

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

@@ -0,0 +1,152 @@
+import type { DataRow, ChannelAccessor } from '../types/index.js';
+import { type InterpolateFunction } from '../helpers/rasterInterpolate.js';
+declare function $$render<Datum extends DataRow>(): {
+    props: {
+        /**
+         * Input data.  For **dense grid** mode supply a flat row-major array and
+         * set `width`/`height`.  Omit (or set null) for **function-sampling**
+         * mode.  For **scatter interpolation** supply an array of records with
+         * `x`/`y` channels.
+         */
+        data?: Datum[] | null;
+        /** x position channel (scatter mode) */
+        x?: ChannelAccessor<Datum>;
+        /** y position channel (scatter mode) */
+        y?: ChannelAccessor<Datum>;
+        /**
+         * Scalar field accessor, identity function for dense grid, or an
+         * `(x, y) => number` function for function-sampling mode.
+         */
+        value?: ChannelAccessor<Datum> | ((x: number, y: number) => number);
+        /**
+         * Contour threshold levels.  Can be:
+         * - a **count** (number): approximately that many nicely-spaced levels
+         * - an explicit **array** of threshold values
+         * - a **function** `(values, min, max) => number[]`
+         * - a d3 **threshold scheme** object with `.floor()` / `.range()`
+         *
+         * Defaults to Sturges' formula applied to the value range.
+         */
+        thresholds?: number | number[] | ((values: number[], min: number, max: number) => number[]) | {
+            floor(x: number): number;
+            range(a: number, b: number): number[];
+        };
+        /**
+         * Step interval between contour levels (alternative to `thresholds`).
+         * Can be a number (constant step) or an interval object with `.floor()`
+         * / `.range()`.
+         */
+        interval?: number | {
+            floor(x: number): number;
+            range(a: number, b: number): number[];
+        };
+        /**
+         * Whether to apply linear interpolation when tracing contour edges
+         * (default `true`).  Set to `false` for a blockier, faster appearance.
+         */
+        smooth?: boolean;
+        /** left bound of the domain in data coordinates */
+        x1?: number;
+        /** top bound of the domain in data coordinates */
+        y1?: number;
+        /** right bound of the domain in data coordinates */
+        x2?: number;
+        /** bottom bound of the domain in data coordinates */
+        y2?: number;
+        /**
+         * Explicit grid width; required for dense grid mode, overrides
+         * `pixelSize` in other modes.
+         */
+        width?: number;
+        /**
+         * Explicit grid height; required for dense grid mode, overrides
+         * `pixelSize` in other modes.
+         */
+        height?: number;
+        /** pixel size in screen pixels (default 2) */
+        pixelSize?: number;
+        /** Gaussian blur radius applied before contouring (default 0) */
+        blur?: number;
+        /**
+         * Spatial interpolation for scatter mode:
+         * `"none"` | `"nearest"` | `"barycentric"` | `"random-walk"` or a
+         * custom `(index, w, h, X, Y, V) => W` function.
+         * Defaults to `"nearest"` when data is provided.
+         */
+        interpolate?: "none" | "nearest" | "barycentric" | "random-walk" | InterpolateFunction;
+        /**
+         * Fill color for contour polygons.  Use `"value"` to map each
+         * threshold level through the plot's color scale.  Default `"none"`.
+         *
+         * **Shorthand**: if `value` is omitted and `fill` is a field name or
+         * accessor function (not a CSS color), it is automatically promoted to
+         * the `value` channel and `fill` is set to `"value"`.
+         */
+        fill?: string | ChannelAccessor<Datum>;
+        /**
+         * Stroke color for contour lines.  Use `"value"` to map each
+         * threshold level through the plot's color scale.  Default
+         * `"currentColor"`.
+         *
+         * **Shorthand**: if `value` is omitted and `stroke` is a field name or
+         * accessor function (not a CSS color), it is automatically promoted to
+         * the `value` channel and `stroke` is set to `"value"`.
+         */
+        stroke?: string | ChannelAccessor<Datum>;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+        clipPath?: string;
+        class?: string;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+        /** the horizontal facet channel */
+        fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
+        fy?: ChannelAccessor<Datum>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Renders contour lines (or filled contour bands) from a scalar field using
+ * the marching-squares algorithm.
+ *
+ * Supports the same three input modes as the `Raster` mark:
+ *
+ * **Dense grid mode** (`data` is a flat row-major array, `width`/`height` are
+ * set, no `x`/`y` channels): each datum is its own scalar value (unless `value`
+ * is specified).
+ *
+ * **Function sampling mode** (`data` is omitted/null, `value` is an
+ * `(x, y) => number` function): the function is evaluated on a pixel grid.
+ *
+ * **Scatter interpolation mode** (`data` is an array with `x`/`y` channels):
+ * each datum contributes a position and scalar value; the mark spatially
+ * interpolates over the grid before running marching squares.
+ *
+ * Styling: `fill` and `stroke` accept ordinary CSS color strings **or** the
+ * special keyword `"value"`, which maps each contour level's threshold through
+ * the plot's color scale.  Defaults: `fill="none"`, `stroke="currentColor"`.
+ */
+declare const Contour: $$IsomorphicComponent;
+type Contour<Datum extends DataRow> = InstanceType<typeof Contour<Datum>>;
+export default Contour;

package/dist/marks/DelaunayLink.svelte

@@ -0,0 +1,127 @@
+<!-- @component
+    Renders individual Delaunay triangulation edges as separate paths,
+    allowing per-edge styling based on the source data point.
+-->
+<script lang="ts" generics="Datum = DataRecord">
+    interface DelaunayLinkMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate triangulations per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    }
+
+    import { Delaunay } from 'd3-delaunay';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        LinkableMarkProps,
+        MarkType,
+        ScaledDataRecord
+    } from '../types/index.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import { sort } from '../index.js';
+    import Mark from '../Mark.svelte';
+    import PathItems from './helpers/PathItems.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { SvelteSet } from 'svelte/reactivity';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().delaunayLink
+    };
+
+    let markProps: DelaunayLinkMarkProps = $props();
+
+    const {
+        data = [] as Datum[],
+        class: className = 'delaunay-link',
+        canvas = false,
+        ...options
+    }: DelaunayLinkMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const args = $derived(
+        sort(
+            recordizeXY({
+                data: data as any[],
+                ...options
+            })
+        )
+    );
+
+    const plot = usePlot();
+
+    function computeEdges(scaledData: ScaledDataRecord[]) {
+        const scaledByDatum = new Map(scaledData.map((d) => [d.datum, d]));
+        const results: { path: string; datum: ScaledDataRecord }[] = [];
+
+        groupFacetsAndZ(
+            scaledData.map((d) => d.datum),
+            args,
+            (groupItems) => {
+                const groupScaled = groupItems
+                    .map((d) => scaledByDatum.get(d))
+                    .filter(
+                        (d): d is ScaledDataRecord =>
+                            d !== undefined &&
+                            d.valid &&
+                            Number.isFinite(d.x as number) &&
+                            Number.isFinite(d.y as number)
+                    );
+                if (groupScaled.length < 2) return;
+
+                const delaunay = Delaunay.from(
+                    groupScaled,
+                    (d) => d.x as number,
+                    (d) => d.y as number
+                );
+                const { halfedges, triangles } = delaunay;
+                const seen = new SvelteSet<string>();
+
+                for (let i = 0; i < halfedges.length; i++) {
+                    const j = halfedges[i];
+                    if (j < i && j !== -1) continue;
+                    const a = triangles[i];
+                    const b = triangles[i % 3 === 2 ? i - 2 : i + 1];
+                    const key = a < b ? `${a},${b}` : `${b},${a}`;
+                    if (seen.has(key)) continue;
+                    seen.add(key);
+
+                    const p = groupScaled[a];
+                    const q = groupScaled[b];
+                    results.push({
+                        datum: p,
+                        path: `M${p.x},${p.y}L${q.x},${q.y}`
+                    });
+                }
+            },
+            false
+        );
+
+        return results;
+    }
+</script>
+
+<Mark
+    type={'delaunayLink' as MarkType}
+    channels={['x', 'y', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
+    defaults={{ fill: 'none', stroke: 'currentColor' }}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        <PathItems
+            paths={computeEdges(scaledData)}
+            {args}
+            {options}
+            {className}
+            {usedScales}
+            {plot}
+            {canvas} />
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,175 @@
+import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+declare function $$render<Datum = DataRecord>(): {
+    props: Partial<{
+        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        mask: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        class: string;
+        style: string;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate triangulations per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum = DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum = DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum = DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Renders individual Delaunay triangulation edges as separate paths,
+ * allowing per-edge styling based on the source data point.
+ */
+declare const DelaunayLink: $$IsomorphicComponent;
+type DelaunayLink<Datum = DataRecord> = InstanceType<typeof DelaunayLink<Datum>>;
+export default DelaunayLink;

package/dist/marks/DelaunayMesh.svelte

@@ -0,0 +1,102 @@
+<!-- @component
+    Renders the full Delaunay triangulation as a single SVG path.
+-->
+<script lang="ts" generics="Datum = DataRecord">
+    interface DelaunayMeshMarkProps extends BaseMarkProps<Datum> {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate triangulations per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    }
+
+    import { Delaunay } from 'd3-delaunay';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        MarkType,
+        ScaledDataRecord
+    } from '../types/index.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import Mark from '../Mark.svelte';
+    import PathGroup from './helpers/PathGroup.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().delaunayMesh
+    };
+
+    let markProps: DelaunayMeshMarkProps = $props();
+
+    const {
+        data = [] as Datum[],
+        class: className = 'delaunay-mesh',
+        canvas = false,
+        ...options
+    }: DelaunayMeshMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const args = $derived(
+        recordizeXY({
+            data: data as any[],
+            ...options
+        })
+    );
+
+    const plot = usePlot();
+
+    function computeMeshPaths(scaledData: ScaledDataRecord[]) {
+        const scaledByDatum = new Map(scaledData.map((d) => [d.datum, d]));
+        const meshes: { path: string; datum: ScaledDataRecord }[] = [];
+
+        groupFacetsAndZ(
+            scaledData.map((d) => d.datum),
+            args,
+            (groupItems) => {
+                const groupScaled = groupItems
+                    .map((d) => scaledByDatum.get(d))
+                    .filter(
+                        (d): d is ScaledDataRecord =>
+                            d !== undefined &&
+                            d.valid &&
+                            Number.isFinite(d.x as number) &&
+                            Number.isFinite(d.y as number)
+                    );
+                if (groupScaled.length < 2) return;
+                const delaunay = Delaunay.from(
+                    groupScaled,
+                    (d) => d.x as number,
+                    (d) => d.y as number
+                );
+                const path = delaunay.render();
+                if (path) meshes.push({ path, datum: groupScaled[0] });
+            },
+            false
+        );
+
+        return meshes;
+    }
+</script>
+
+<Mark
+    type={'delaunayMesh' as MarkType}
+    channels={['x', 'y', 'fill', 'stroke', 'strokeOpacity', 'fillOpacity', 'opacity']}
+    defaults={{ fill: 'none', stroke: 'currentColor' }}
+    {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        <PathGroup
+            paths={computeMeshPaths(scaledData)}
+            {args}
+            {className}
+            {usedScales}
+            {plot}
+            {canvas} />
+    {/snippet}
+</Mark>