svelteplot 0.6.0 → 0.7.0-pr-274.0

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

@@ -1,168 +1,6 @@
-import { type MarkerShape } from './Marker.svelte';
-import type { ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types/index.js';
+import type { DataRecord } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    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;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -1,77 +1,15 @@
-import type { BaseRectMarkProps } from '../../types/mark.js';
+import type { BaseMarkProps, 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>;
+        datum: ScaledDataRecord<Datum_1>;
         class: string | null;
         x: number;
         y: number;
         width: number;
         height: number;
-        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>;
-        }>;
+        options: BaseRectMarkProps<Datum_1> & BaseMarkProps<Datum_1>;
         /**
          * 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,64 @@
+/**
+ * This implementation is based on the waffle chart implementation in Observable Plot!
+ * https://github.com/observablehq/plot/blob/main/src/marks/waffle.js
+ *
+ * Kept the comments from the original implementation for clarity.
+ */
+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,162 @@
+/**
+ * This implementation is based on the waffle chart implementation in Observable Plot!
+ * https://github.com/observablehq/plot/blob/main/src/marks/waffle.js
+ *
+ * Kept the comments from the original implementation for clarity.
+ */
+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,72 +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): {
-    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;
-    }[];
-};
+export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): any;

package/dist/transforms/centroid.d.ts

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

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: Record<string | symbol, RawValue>[];
-};
+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: Record<string | symbol, RawValue>[];
-};
+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: Record<string | symbol, RawValue>[];
-};
+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: Record<string | symbol, RawValue>[];
-};
+export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): any;
 export {};