svelteplot 0.6.0 → 0.7.0

package/dist/marks/WaffleY.svelte

@@ -0,0 +1,119 @@
+<!--
+    @component
+    The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    import type {
+        DataRecord,
+        ChannelAccessor,
+        BaseMarkProps,
+        LinkableMarkProps,
+        PlotContext,
+        BorderRadius
+    } from '../types';
+    import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { getContext } from 'svelte';
+    import { intervalY, recordizeY, sort, stackY } from '../transforms';
+    import Mark from '../Mark.svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve';
+    import { roundedRect } from '../helpers/roundedRect';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    interface WaffleYMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            WaffleOptions<Datum> {
+        data?: Datum[];
+        /**
+         * bound to a babd scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y2?: ChannelAccessor<Datum>;
+    }
+
+    const DEFAULTS = {
+        ...getPlotDefaults().waffle,
+        ...getPlotDefaults().waffleY
+    };
+
+    let markProps: WaffleYMarkProps = $props();
+
+    const {
+        data = [{} as Datum],
+        class: className = null,
+        stack,
+        symbol = null,
+        ...options
+    }: WaffleYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackY(
+            intervalY(
+                // by default, sort by y channel (the ordinal labels)
+                sort(recordizeY({ data, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="waffleY"
+    requiredScales={{ x: ['band'] }}
+    channels={['y1', 'y2', 'x', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {@const wafflePoly = wafflePolygon('y', args, plot.scales)}
+        {#each scaledData as d, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                d,
+                args,
+                args.stroke && !args.fill ? 'stroke' : 'fill',
+                usedScales
+            )}
+            {@const borderRadius = resolveProp(args.borderRadius, d?.datum, 0) as BorderRadius}
+            {@const hasBorderRadius =
+                (typeof borderRadius === 'number' && borderRadius > 0) ||
+                (typeof borderRadius === 'object' &&
+                    Math.max(
+                        borderRadius.topRight ?? 0,
+                        borderRadius.bottomRight ?? 0,
+                        borderRadius.topLeft ?? 0,
+                        borderRadius.bottomLeft ?? 0
+                    ) > 0)}
+            {@const { pattern, rect, path } = wafflePoly(d)}
+            <g class={['waffle-y', className]}>
+                <pattern {...pattern}>
+                    {#if symbol}
+                        {@render symbol({ ...rect, style, styleClass, datum: d.datum })}
+                    {:else if hasBorderRadius}
+                        <path
+                            d={roundedRect(rect.x, rect.y, rect.width, rect.height, borderRadius)}
+                            {style}
+                            class={styleClass} />
+                    {:else}
+                        <rect {style} class={styleClass} {...rect} />
+                    {/if}
+                </pattern>
+                <path {...path} />
+            </g>
+        {/each}
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,100 @@
+import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types';
+import { type WaffleOptions } from './helpers/waffle';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): Partial<{
+        filter: import("../types").ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: import("../types").ConstantAccessor<number, Datum>;
+        dy: import("../types").ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: import("../types").ConstantAccessor<number, Datum>;
+        sort: ((a: import("../types").RawValue, b: import("../types").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | import("../types").ConstantAccessor<import("../types").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../types").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../types").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types").ConstantAccessor<number, Datum>;
+        mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: import("../types").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types").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: import("../types").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & WaffleOptions<Datum> & {
+        data?: Datum[] | undefined;
+        /**
+         * bound to a babd scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y2?: ChannelAccessor<Datum>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends 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 extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values. */
+declare const WaffleY: $$IsomorphicComponent;
+type WaffleY<Datum extends DataRecord> = InstanceType<typeof WaffleY<Datum>>;
+export default WaffleY;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -17,6 +17,7 @@
     import { randomId, testFilter } from '../../helpers/index.js';
     import { INDEX } from '../../constants';
     import { RAW_VALUE } from '../../transforms/recordize';
+    import wordwrap from '../../helpers/wordwrap';
 
     type BaseAxisXProps = {
         scaleFn: (d: RawValue) => number;
@@ -35,7 +36,9 @@
             dx: ConstantAccessor<number>;
             dy: ConstantAccessor<number>;
             filter: ChannelAccessor;
+            wordwrap: boolean;
             textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
+            removeDuplicateTicks: boolean;
         };
         text: boolean;
         plot: PlotState;
@@ -59,8 +62,21 @@
         text = true
     }: BaseAxisXProps = $props();
 
+    const isBandScale = $derived(scaleType === 'band');
+    const bandWidth = $derived(isBandScale ? scaleFn.bandwidth() : 0);
+
     function splitTick(tick: string | string[]) {
-        return Array.isArray(tick) ? tick : [tick];
+        return Array.isArray(tick)
+            ? tick
+            : typeof tick === 'string' && isBandScale && options.wordwrap !== false
+              ? wordwrap(
+                    tick,
+                    { maxLineWidth: bandWidth * 0.9 },
+                    { minCharactersPerLine: 4 },
+                    +resolveProp(tickFontSize, {}, 11),
+                    false
+                )
+              : [tick];
     }
 
     let tickRotate = $derived(plot.options.x.tickRotate || 0);
@@ -72,7 +88,7 @@
     // generate id used for registering margins
     const id = randomId();
 
-    const { autoMarginTop, autoMarginBottom } =
+    const { autoMarginTop, autoMarginBottom, autoMarginLeft, autoMarginRight } =
         getContext<AutoMarginStores>('svelteplot/autoMargins');
 
     let tickTextElements = $state([] as SVGTextElement[]);
@@ -109,6 +125,14 @@
         return tickObjects as ScaledDataRecord[];
     });
 
+    $effect(() => {
+        // just add some minimal horizontal margins for axis ticks
+        untrack(() => $autoMarginLeft);
+        untrack(() => $autoMarginRight);
+        $autoMarginLeft.set(id, 5);
+        $autoMarginRight.set(id, 10);
+    });
+
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
         if (!text) return;
@@ -147,6 +171,8 @@
         return () => {
             if ($autoMarginBottom.has(id)) $autoMarginBottom.delete(id);
             if ($autoMarginTop.has(id)) $autoMarginTop.delete(id);
+            if ($autoMarginLeft.has(id)) $autoMarginLeft.delete(id);
+            if ($autoMarginRight.has(id)) $autoMarginRight.delete(id);
         };
     });
 </script>
@@ -222,7 +248,9 @@
                             {:else}
                                 {#each textLines as line, i (i)}
                                     <tspan x="0" dy={i ? 12 : 0}
-                                        >{!prevTextLines || prevTextLines[i] !== line
+                                        >{!prevTextLines ||
+                                        prevTextLines[i] !== line ||
+                                        options.removeDuplicateTicks === false
                                             ? line
                                             : ''}</tspan>
                                 {/each}

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

@@ -16,7 +16,9 @@ type BaseAxisXProps = {
         dx: ConstantAccessor<number>;
         dy: ConstantAccessor<number>;
         filter: ChannelAccessor;
+        wordwrap: boolean;
         textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
+        removeDuplicateTicks: boolean;
     };
     text: boolean;
     plot: PlotState;

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/group.js

@@ -1,5 +1,5 @@
 import { groupFacetsAndZ } from '../helpers/group.js';
-import { testFilter } from '../helpers/index.js';
+import { isValid, testFilter } from '../helpers/index.js';
 import { reduceOutputs } from '../helpers/reduce.js';
 import { resolveChannel } from '../helpers/resolve.js';
 import { groups as d3Groups } from 'd3-array';
@@ -58,8 +58,12 @@ export function groupY(input, options = {}) {
 export function groupZ(input, options = {}) {
     return groupXYZ('z', input, options);
 }
+const groupDimRaw = Symbol('groupDimRaw');
 function groupXYZ(dim, { data, ...channels }, options = {}) {
-    if ((dim === 'z' ? channels.z || channels.fill || channels.stroke : channels[dim]) == null)
+    // console.log({ dim, data, channels, options });
+    if ((dim === 'z'
+        ? channels.z || channels.fill || channels.stroke || channels.fx || channels.fy
+        : channels[dim]) == null)
         throw new Error('you must provide a channel to group on ' + dim);
     const propName = options[`${dim}PropName`] != null
         ? options[`${dim}PropName`]
@@ -70,9 +74,11 @@ function groupXYZ(dim, { data, ...channels }, options = {}) {
     // group by x or y
     const groups = dim === 'z'
         ? [[null, data]]
-        : d3Groups(data.filter((d) => testFilter(d, channels)), (d) => {
-            const v = resolveChannel(dim, d, channels);
-            return interval ? interval.round(v) : v;
+        : d3Groups(data
+            .filter((d) => testFilter(d, channels))
+            .map((d) => ({ ...d, [groupDimRaw]: resolveChannel(dim, d, channels) }))
+            .filter((d) => isValid(d[groupDimRaw])), (d) => {
+            return interval ? interval.floor(d[groupDimRaw]) : d[groupDimRaw];
         });
     const newData = [];
     let newChannels = omit({ ...channels }, 'filter');

package/dist/types/data.d.ts

@@ -11,6 +11,7 @@ export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
     dx: number;
     dy: number;
     datum: DataRecord<T>;
+    resolved: ResolvedDataRecord<T>;
     valid: Boolean;
     index: number;
 };

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
+export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'waffleX' | 'waffleY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { MouseEventHandler } from 'svelte/elements';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';