svelteplot 0.6.0-pr-266.0 → 0.7.0

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

@@ -1,6 +1,168 @@
-import type { DataRecord } from '../../types/index.js';
+import { type MarkerShape } from './Marker.svelte';
+import type { ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): any;
+    props(): Partial<{
+        filter: ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: import("../../types/index.js").ChannelAccessor<Datum>;
+        fy: import("../../types/index.js").ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        dodgeX: import("../../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../../transforms/dodge").DodgeYOptions;
+        fill: import("../../types/index.js").ChannelAccessor<Datum>;
+        fillOpacity: ConstantAccessor<number, Datum>;
+        sort: ((a: import("../../types/index.js").RawValue, b: import("../../types/index.js").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ConstantAccessor<import("../../types/index.js").RawValue, Datum>;
+        stroke: import("../../types/index.js").ChannelAccessor<Datum>;
+        strokeWidth: ConstantAccessor<number, Datum>;
+        strokeOpacity: ConstantAccessor<number, Datum>;
+        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: ConstantAccessor<number, Datum>;
+        opacity: import("../../types/index.js").ChannelAccessor<Datum>;
+        strokeDasharray: ConstantAccessor<string, Datum>;
+        strokeDashoffset: ConstantAccessor<number, Datum>;
+        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: ConstantAccessor<string, Datum>;
+        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: ConstantAccessor<string, Datum>;
+        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        class: string;
+        style: string;
+        cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & {
+        /**
+         * the datum associated with this path, usually the first
+         * element of the data array group
+         */
+        datum: Datum;
+        /**
+         * the marker shape to use at the start of the path, defaults to
+         * circle
+         */
+        markerStart?: boolean | MarkerShape;
+        /**
+         * the marker shape to use at the middle of the path, defaults to circle
+         */
+        markerMid?: boolean | MarkerShape;
+        /**
+         * the marker shape to use at the end of the path, defaults to circle
+         */
+        markerEnd?: boolean | MarkerShape;
+        /**
+         * shorthand for setting all markers
+         */
+        marker?: boolean | MarkerShape;
+        /**
+         * path string
+         */
+        d: string;
+        style: string;
+        startOffset: string;
+        textStyle: string;
+        textStyleClass?: string | null;
+        text: string;
+        transform: string;
+        color: string;
+        strokeWidth: ConstantAccessor<number>;
+        mark: Mark<Partial<{
+            filter: ConstantAccessor<boolean, Datum>;
+            facet: "auto" | "include" | "exclude";
+            fx: import("../../types/index.js").ChannelAccessor<Datum>;
+            fy: import("../../types/index.js").ChannelAccessor<Datum>;
+            dx: ConstantAccessor<number, Datum>;
+            dy: ConstantAccessor<number, Datum>;
+            dodgeX: import("../../transforms/dodge").DodgeXOptions;
+            dodgeY: import("../../transforms/dodge").DodgeYOptions;
+            fill: import("../../types/index.js").ChannelAccessor<Datum>;
+            fillOpacity: ConstantAccessor<number, Datum>;
+            sort: ((a: import("../../types/index.js").RawValue, b: import("../../types/index.js").RawValue) => number) | {
+                channel: string;
+                order?: "ascending" | "descending";
+            } | ConstantAccessor<import("../../types/index.js").RawValue, Datum>;
+            stroke: import("../../types/index.js").ChannelAccessor<Datum>;
+            strokeWidth: ConstantAccessor<number, Datum>;
+            strokeOpacity: ConstantAccessor<number, Datum>;
+            strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+            strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+            strokeMiterlimit: ConstantAccessor<number, Datum>;
+            opacity: import("../../types/index.js").ChannelAccessor<Datum>;
+            strokeDasharray: ConstantAccessor<string, Datum>;
+            strokeDashoffset: ConstantAccessor<number, Datum>;
+            mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+            clipPath: string;
+            imageFilter: ConstantAccessor<string, Datum>;
+            shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+            paintOrder: ConstantAccessor<string, Datum>;
+            onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+            class: string;
+            style: string;
+            cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        }>>;
+        scales: PlotScales;
+    };
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -1,15 +1,77 @@
-import type { BaseMarkProps, BaseRectMarkProps } from '../../types/mark.js';
+import type { BaseRectMarkProps } from '../../types/mark.js';
 import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
 import type { UsedScales } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): {
-        datum: ScaledDataRecord<Datum_1>;
+        datum: ScaledDataRecord<Datum>;
         class: string | null;
         x: number;
         y: number;
         width: number;
         height: number;
-        options: BaseRectMarkProps<Datum_1> & BaseMarkProps<Datum_1>;
+        options: BaseRectMarkProps<Datum> & Partial<{
+            filter: import("../../types/index.js").ConstantAccessor<boolean, Datum>;
+            facet: "auto" | "include" | "exclude";
+            fx: import("../../types/index.js").ChannelAccessor<Datum>;
+            fy: import("../../types/index.js").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: import("../../types/index.js").ChannelAccessor<Datum>;
+            fillOpacity: import("../../types/index.js").ConstantAccessor<number, 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: import("../../types/index.js").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: import("../../types/index.js").ChannelAccessor<Datum>;
+            strokeDasharray: import("../../types/index.js").ConstantAccessor<string, Datum>;
+            strokeDashoffset: import("../../types/index.js").ConstantAccessor<number, Datum>;
+            mixBlendMode: import("../../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+            clipPath: 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: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondblclick: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseup: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmousedown: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmousemove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseout: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onmouseover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointercancel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerdown: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerup: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointermove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onpointerout: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondrag: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondrop: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragstart: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ondragend: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchstart: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchmove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchend: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            ontouchcancel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            oncontextmenu: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            onwheel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+            class: string;
+            style: string;
+            cursor: import("../../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        }>;
         /**
          * By default, the `inset` property is applied to all four insets. Mark components
          * can tweak this behavior for insetTop and insetBottom by setting the

package/dist/marks/helpers/waffle.d.ts

@@ -0,0 +1,58 @@
+import type { Snippet } from 'svelte';
+import type { StackOptions } from '../../transforms/stack';
+import type { BorderRadius, ConstantAccessor, PlotScales, ScaledDataRecord } from '../../types';
+type Point = [number, number];
+export type WaffleOptions<T> = {
+    /**
+     * the quantity represented by each square in the waffle chart, defaults to 1
+     */
+    unit?: number;
+    /**
+     * the number of cells per row (or column); defaults to undefined
+     */
+    multiple?: number;
+    /**
+     * the separation between adjacent cells, in pixels; defaults to 1
+     */
+    gap?: number;
+    /**
+     * whether to round values to avoid partial cells; defaults to false
+     */
+    round?: boolean;
+    stack?: StackOptions;
+    borderRadius?: ConstantAccessor<BorderRadius, T>;
+    symbol?: Snippet<[
+        {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            style: string | null;
+            styleClass: string | null;
+            datum: T;
+        }
+    ]>;
+};
+type WaffleProps = {
+    pattern: {
+        id: string;
+        patternUnits: 'userSpaceOnUse';
+        width: number;
+        height: number;
+    };
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    path: {
+        fill: string;
+        transform: string;
+        d: string;
+    };
+};
+export declare function wafflePolygon(y: 'x' | 'y', options: WaffleOptions, scales: PlotScales): (d: ScaledDataRecord) => WaffleProps;
+export declare function wafflePoints(i1: number, i2: number, columns: number): Point[];
+export declare function maybeRound(round: boolean | ((x: number) => number) | undefined): (x: number) => number;
+export {};

package/dist/marks/helpers/waffle.js

@@ -0,0 +1,194 @@
+// A waffle is approximately a rectangular shape, but may have one or two corner
+// cuts if the starting or ending value is not an even multiple of the number of
+// columns (the width of the waffle in cells). We can represent any waffle by
+// 8 points; below is a waffle of five columns representing the interval 2–11:
+//
+// 1-0
+// |•7-------6
+// |• • • • •|
+// 2---3• • •|
+//     4-----5
+//
+// Note that points 0 and 1 always have the same y-value, points 1 and 2 have
+// the same x-value, and so on, so we don’t need to materialize the x- and y-
+// values of all points. Also note that we can’t use the already-projected y-
+// values because these assume that y-values are distributed linearly along y
+// rather than wrapping around in columns.
+//
+// The corner points may be coincident. If the ending value is an even multiple
+// of the number of columns, say representing the interval 2–10, then points 6,
+// 7, and 0 are the same.
+//
+// 1-----0/7/6
+// |• • • • •|
+// 2---3• • •|
+//     4-----5
+//
+// Likewise if the starting value is an even multiple, say representing the
+// interval 0–10, points 2–4 are coincident.
+//
+// 1-----0/7/6
+// |• • • • •|
+// |• • • • •|
+// 4/3/2-----5
+//
+// Waffles can also represent fractional intervals (e.g., 2.4–10.1). These
+// require additional corner cuts, so the implementation below generates a few
+// more points.
+//
+import { getPatternId } from '../../helpers/getBaseStyles';
+export function wafflePolygon(y, options, scales) {
+    const x = y === 'y' ? 'x' : 'y';
+    const y1 = `${y}1`;
+    const y2 = `${y}2`;
+    const xScale = scales[x];
+    const yScale = scales[y];
+    const barwidth = xScale.fn.bandwidth();
+    const { unit = 1, gap = 1 } = options;
+    const round = maybeRound(options.round);
+    // The length of a unit along y in pixels.
+    const scale = Math.abs(yScale.fn(unit) - yScale.fn(0));
+    // The number of cells on each row (or column) of the waffle.
+    const multiple = options.multiple ?? Math.max(1, Math.floor(Math.sqrt(barwidth / scale)));
+    // The outer size of each square cell, in pixels, including the gap.
+    const cx = Math.min(barwidth / multiple, scale * multiple);
+    const cy = scale * multiple;
+    // The reference position.
+    const tx = (barwidth - multiple * cx) / 2;
+    const transform = y === 'y' ? ([x, y]) => [x * cx, -y * cy] : ([x, y]) => [y * cy, x * cx];
+    // const mx = typeof x0 === 'function' ? (i) => x0(i) - barwidth / 2 : () => x0;
+    const [ix, iy] = y === 'y' ? [0, 1] : [1, 0];
+    const y0 = yScale.fn(0);
+    const mx = -barwidth / 2;
+    return (d) => {
+        const y1val = d.resolved[y1];
+        const y2val = d.resolved[y2];
+        const P = wafflePoints(round(y1val / unit), round(y2val / unit), multiple).map(transform);
+        P.pop();
+        const id = getPatternId();
+        const pos = [d[x] + tx + mx, y0];
+        return {
+            pattern: {
+                id,
+                patternUnits: 'userSpaceOnUse',
+                width: cx,
+                height: cy
+            },
+            rect: {
+                x: gap / 2,
+                y: gap / 2,
+                width: cx - gap,
+                height: cy - gap
+            },
+            path: {
+                fill: `url(#${id})`,
+                transform: `translate(${pos[ix]},${pos[iy]})`,
+                d: `M${P.join('L')}Z`
+            }
+        };
+        // return `M${P.join('L')}Z`;
+    };
+    // const points = wafflePoints(i1, i2, columns);
+    // return dimension === 'x' ? points : points.map(([x, y]: Point): Point => [y, x]);
+}
+export function wafflePoints(i1, i2, columns) {
+    if (i2 < i1)
+        return wafflePoints(i2, i1, columns); // ensure i1 <= i2
+    if (i1 < 0)
+        return wafflePointsOffset(i1, i2, columns, Math.ceil(-Math.min(i1, i2) / columns)); // ensure i1 >= 0
+    const x1f = Math.floor(i1 % columns);
+    const x1c = Math.ceil(i1 % columns);
+    const x2f = Math.floor(i2 % columns);
+    const x2c = Math.ceil(i2 % columns);
+    const y1f = Math.floor(i1 / columns);
+    const y1c = Math.ceil(i1 / columns);
+    const y2f = Math.floor(i2 / columns);
+    const y2c = Math.ceil(i2 / columns);
+    const points = [];
+    if (y2c > y1c)
+        points.push([0, y1c]);
+    points.push([x1f, y1c], [x1f, y1f + (i1 % 1)], [x1c, y1f + (i1 % 1)]);
+    if (!(i1 % columns > columns - 1)) {
+        points.push([x1c, y1f]);
+        if (y2f > y1f)
+            points.push([columns, y1f]);
+    }
+    if (y2f > y1f)
+        points.push([columns, y2f]);
+    points.push([x2c, y2f], [x2c, y2f + (i2 % 1)], [x2f, y2f + (i2 % 1)]);
+    if (!(i2 % columns < 1)) {
+        points.push([x2f, y2c]);
+        if (y2c > y1c)
+            points.push([0, y2c]);
+    }
+    points.push(waffleCentroid(i1, i2, columns));
+    return points;
+}
+/**
+ * Compute waffle points when indices start in negative rows by applying a row offset.
+ * - Shifts both indices down by `k` rows (adding `k * columns`) so they are non-negative,
+ *   delegates to `wafflePoints`, then translates the resulting points back up by `k` on y.
+ * - `k` is the number of rows of vertical offset applied.
+ */
+function wafflePointsOffset(i1, i2, columns, k) {
+    return wafflePoints(i1 + k * columns, i2 + k * columns, columns).map(([x, y]) => [x, y - k]);
+}
+/**
+ * Centroid of the waffle region representing the interval [i1, i2).
+ * Chooses a strategy based on how many rows the interval spans:
+ * - Single row: delegate to `waffleRowCentroid`.
+ * - Two rows: if the projected columns overlap, return the midpoint of the overlap;
+ *   otherwise, return the centroid of the larger partial row.
+ * - >= 3 rows: return the center column and halfway between the middle rows.
+ */
+function waffleCentroid(i1, i2, columns) {
+    const r = Math.floor(i2 / columns) - Math.floor(i1 / columns);
+    return r === 0
+        ? // Single row
+            waffleRowCentroid(i1, i2, columns)
+        : r === 1
+            ? // Two incomplete rows; use the midpoint of their overlap if any, otherwise the larger row
+                Math.floor(i2 % columns) > Math.ceil(i1 % columns)
+                    ? [(Math.floor(i2 % columns) + Math.ceil(i1 % columns)) / 2, Math.floor(i2 / columns)]
+                    : i2 % columns > columns - (i1 % columns)
+                        ? waffleRowCentroid(i2 - (i2 % columns), i2, columns)
+                        : waffleRowCentroid(i1, columns * Math.ceil(i1 / columns), columns)
+            : // At least one full row; take the midpoint of all the rows that include the middle
+                [columns / 2, (Math.round(i1 / columns) + Math.round(i2 / columns)) / 2];
+}
+/**
+ * Centroid of a waffle segment constrained to a single row.
+ * Cases:
+ * - c === 0: both endpoints fall into the same cell; center on x, average fractional y.
+ * - c === 1: two adjacent partial cells; use the overlap center if > 0.5 cell,
+ *   otherwise the center of the larger partial cell.
+ * - c >= 2: at least one full cell between; x is the midpoint of full cells,
+ *   y is the row center (0.5) if there’s a full cell spanned, otherwise average fractional y.
+ */
+function waffleRowCentroid(i1, i2, columns) {
+    const c = Math.floor(i2) - Math.floor(i1);
+    return c === 0
+        ? // Single cell
+            [Math.floor(i1 % columns) + 0.5, Math.floor(i1 / columns) + (((i1 + i2) / 2) % 1)]
+        : c === 1
+            ? // Two incomplete cells; use the overlap if large enough, otherwise use the largest
+                (i2 % 1) - (i1 % 1) > 0.5
+                    ? [Math.ceil(i1 % columns), Math.floor(i2 / columns) + ((i1 % 1) + (i2 % 1)) / 2]
+                    : i2 % 1 > 1 - (i1 % 1)
+                        ? [Math.floor(i2 % columns) + 0.5, Math.floor(i2 / columns) + (i2 % 1) / 2]
+                        : [Math.floor(i1 % columns) + 0.5, Math.floor(i1 / columns) + (1 + (i1 % 1)) / 2]
+            : // At least one full cell; take the midpoint
+                [
+                    Math.ceil(i1 % columns) + Math.ceil(Math.floor(i2) - Math.ceil(i1)) / 2,
+                    Math.floor(i1 / columns) + (i2 >= 1 + i1 ? 0.5 : ((i1 + i2) / 2) % 1)
+                ];
+}
+export function maybeRound(round) {
+    if (round === undefined || round === false)
+        return Number;
+    if (round === true)
+        return Math.round;
+    if (typeof round !== 'function')
+        throw new Error(`invalid round: ${round}`);
+    return round;
+}

package/dist/marks/index.d.ts

@@ -33,7 +33,6 @@ export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';
 export { default as Link } from './Link.svelte';
 export { default as Pointer } from './Pointer.svelte';
-export { default as Vector } from './Vector.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectX } from './RectX.svelte';
 export { default as RectY } from './RectY.svelte';
@@ -46,6 +45,9 @@ export { default as Spike } from './Spike.svelte';
 export { default as Text } from './Text.svelte';
 export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
+export { default as Vector } from './Vector.svelte';
+export { default as WaffleX } from './WaffleX.svelte';
+export { default as WaffleY } from './WaffleY.svelte';
 export { default as ColorLegend } from './ColorLegend.svelte';
 export { default as HTMLTooltip } from './HTMLTooltip.svelte';
 export { default as SymbolLegend } from './SymbolLegend.svelte';

package/dist/marks/index.js

@@ -33,7 +33,6 @@ export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';
 export { default as Link } from './Link.svelte';
 export { default as Pointer } from './Pointer.svelte';
-export { default as Vector } from './Vector.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectX } from './RectX.svelte';
 export { default as RectY } from './RectY.svelte';
@@ -46,6 +45,9 @@ export { default as Spike } from './Spike.svelte';
 export { default as Text } from './Text.svelte';
 export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
+export { default as Vector } from './Vector.svelte';
+export { default as WaffleX } from './WaffleX.svelte';
+export { default as WaffleY } from './WaffleY.svelte';
 // HTML marks
 export { default as ColorLegend } from './ColorLegend.svelte';
 export { default as HTMLTooltip } from './HTMLTooltip.svelte';

package/dist/transforms/bollinger.d.ts

@@ -11,4 +11,72 @@ 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): any;
+export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): {
+    filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/index.js").RawValue>>;
+    facet?: "auto" | "include" | "exclude" | undefined;
+    fx?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+    fy?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+    dx?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    dy?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    dodgeX?: import("./dodge").DodgeXOptions | undefined;
+    dodgeY?: import("./dodge").DodgeYOptions | undefined;
+    fill?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+    fillOpacity?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    sort?: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
+        channel: string;
+        order?: "ascending" | "descending";
+    } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Record<string | symbol, import("../types/index.js").RawValue>>;
+    stroke?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeWidth?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeOpacity?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeLinejoin?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeLinecap?: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeMiterlimit?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    opacity?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeDasharray?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+    strokeDashoffset?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+    mixBlendMode?: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/index.js").RawValue>>;
+    clipPath?: string | undefined;
+    imageFilter?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+    shapeRendering?: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/index.js").RawValue>>;
+    paintOrder?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    class?: string | undefined;
+    style?: string | undefined;
+    cursor?: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/index.js").RawValue>>;
+    data: {
+        __x: import("../types/index.js").RawValue;
+        __lo: number;
+        __avg: number;
+        __hi: number;
+    }[];
+};

package/dist/transforms/centroid.d.ts

@@ -1,5 +1,8 @@
 import type { DataRecord, TransformArg } from '../types/index.js';
-type WithCentroid<T> = T & {};
+declare const CENTROID: unique symbol;
+type WithCentroid<T> = T & {
+    [CENTROID]: [number, number];
+};
 export declare function geoCentroid<Datum extends DataRecord>({ data, ...options }: {
     data: Datum[];
 } & TransformArg<Datum>): TransformArg<WithCentroid<Datum>>;