svelteplot 0.6.0 → 0.7.0

package/dist/Mark.svelte

@@ -152,6 +152,12 @@
                     if (options?.[channel] !== undefined && out[channel] === undefined) {
                         // resolve value
                         out[channel] = resolveChannel(channel, row, options);
+                        if (options[channel] === INDEX) {
+                            const scale = plot.scales[CHANNEL_SCALE[channel]];
+                            if (scale.type === 'band' || scale.type === 'point') {
+                                out[channel] = scale.domain[out[channel] % scale.domain.length];
+                            }
+                        }
                     }
                 }
                 return [out];
@@ -212,6 +218,7 @@
             resolvedData.flatMap((row) => {
                 const out: ScaledDataRecord<Datum> = {
                     datum: row.datum,
+                    resolved: row,
                     index: row[INDEX],
                     valid: true
                 };

package/dist/Plot.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotOptions } from './types/index.js';
+    import type { PlotOptions, RawValue, ScaleOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
@@ -62,12 +62,20 @@
     const scales = $derived(
         Object.fromEntries(
             ['x', 'y', 'r', 'color', 'opacity', 'symbol', 'length', 'fx', 'fy'].map((scale) => {
-                const scaleOpts = restOptions[scale] || {};
+                const scaleOpts = maybeScaleOptions(restOptions[scale]);
                 const scaleFn = scaleOpts.scale || (scale === 'color' ? autoScaleColor : autoScale);
                 return [scale, { ...scaleOpts, scale: scaleFn }];
             })
         )
     );
+
+    function maybeScaleOptions(
+        scaleOptions: undefined | false | RawValue[] | object
+    ): Partial<ScaleOptions> | undefined {
+        if (scaleOptions === false) return { axis: false };
+        if (Array.isArray(scaleOptions)) return { domain: scaleOptions };
+        return scaleOptions || {};
+    }
 </script>
 
 {#snippet header()}

package/dist/core/FacetAxes.svelte

@@ -35,7 +35,7 @@
             scaleFn={facetXScale}
             scaleType="band"
             ticks={fxValues}
-            tickFormat={(d) => d}
+            tickFormat={plot.options.fx.tickFormat || ((d) => d)}
             tickFontSize={11}
             tickSize={0}
             tickPadding={5}
@@ -53,7 +53,7 @@
             scaleFn={facetYScale}
             scaleType="band"
             ticks={fyValues}
-            tickFormat={(d) => d}
+            tickFormat={plot.options.fy.tickFormat || ((d) => d)}
             tickFontSize={11}
             tickSize={0}
             tickPadding={5}

package/dist/core/Plot.svelte

@@ -114,7 +114,7 @@
         class: className = '',
         css = DEFAULTS.css,
         width: fixedWidth,
-        ...initialOpts
+        ...initialOptions
     }: Partial<PlotOptions> = $props();
 
     let width = $state(DEFAULTS.initialWidth);
@@ -164,7 +164,7 @@
     );
 
     const explicitDomains = $derived(
-        new Set(SCALES.filter((scale) => !!initialOpts[scale]?.domain))
+        new Set(SCALES.filter((scale) => !!initialOptions[scale]?.domain))
     );
 
     // one-dimensional plots have different automatic margins and heights
@@ -173,12 +173,12 @@
     // construct the plot options from the user-defined options (top-level props) as well
     // as extending them from smart context-aware defaults
     const plotOptions = $derived(
-        extendPlotOptions(initialOpts, {
+        extendPlotOptions(initialOptions, {
             explicitScales,
             explicitDomains,
-            hasProjection: !!initialOpts.projection,
-            margin: initialOpts.margin,
-            inset: initialOpts.inset
+            hasProjection: !!initialOptions.projection,
+            margin: initialOptions.margin,
+            inset: initialOptions.inset
         })
     );
 
@@ -369,7 +369,7 @@
             {},
             { sortOrdinalDomains: DEFAULTS.sortOrdinalDomains },
             smartDefaultPlotOptions(opts),
-            initialOpts
+            initialOptions
         );
     }
 
@@ -614,10 +614,6 @@
         border: 0 !important;
     }
 
-    .plot-header :global(h3) {
-        font-weight: 500;
-    }
-
     .plot-footer {
         margin-bottom: 2rem;
     }

package/dist/helpers/getBaseStyles.d.ts

@@ -7,3 +7,5 @@ export default function (datum: DataRow, props: Partial<Channels>): string;
 export declare function maybeToPixel(cssKey: string, value: string | number): string | number;
 export declare function maybeFromPixel(value: string | number): string | number;
 export declare function maybeFromRem(value: string | number, rootFontSize?: number): string | number;
+export declare function getClipId(): string;
+export declare function getPatternId(): string;

package/dist/helpers/getBaseStyles.js

@@ -54,3 +54,11 @@ export function maybeFromRem(value, rootFontSize = 16) {
         ? +value.slice(0, -3) * rootFontSize
         : value;
 }
+let nextClipId = 0;
+let nextPatternId = 0;
+export function getClipId() {
+    return `svp-clip-${++nextClipId}`;
+}
+export function getPatternId() {
+    return `svp-pattern-${++nextPatternId}`;
+}

package/dist/helpers/removeIdenticalLines.js

@@ -12,10 +12,11 @@ export default function removeIdenticalLines(input) {
             text: []
         });
     }
-    for (let l = 0; l < input[0].text.length; l++) {
+    const maxLines = Math.max(...input.map((t) => t.text.length));
+    for (let l = 0; l < maxLines; l++) {
         const isIdentical = input.length > 1 && input.every((tick) => input[0].text[l] === tick.text[l]);
         for (let c = 0; c < input.length; c++) {
-            if (!isIdentical && input[c].text[l])
+            if (!isIdentical && input[c].text[l] != null)
                 uniqueTicks[c].text.push(input[c].text[l]);
         }
     }

package/dist/helpers/scales.js

@@ -218,8 +218,8 @@ function domainFromInterval(domain, interval, name) {
     return name === 'y' ? out.toReversed() : out;
 }
 const markTypesWithBandDefault = {
-    x: new Set(['barY', 'cell', 'tickY']),
-    y: new Set(['barX', 'cell', 'tickX'])
+    x: new Set(['barY', 'cell', 'tickY', 'waffleY']),
+    y: new Set(['barX', 'cell', 'tickX', 'waffleX'])
 };
 /**
  * Infer a scale type based on the scale name, the data values mapped to it and

package/dist/helpers/wordwrap.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Greedy word-wrapping that approximates visual width by character widths.
+ *
+ * - Splits input into words, additionally breaking on `-` to avoid very long segments.
+ * - Uses a rough character width table to approximate line widths.
+ * - Wraps once the maximum visual width is exceeded, but only after a minimum.
+ */
+export default function wordwrap(line: string, { maxCharactersPerLine, maxLineWidth }: {
+    maxCharactersPerLine?: number;
+    maxLineWidth?: number;
+}, { minCharactersPerLine, minLineWidth }: {
+    minCharactersPerLine?: number;
+    minLineWidth?: number;
+}, fontSize?: number, monospace?: boolean): string[];

package/dist/helpers/wordwrap.js

@@ -0,0 +1,129 @@
+import { sum } from 'd3-array';
+// Per-character width table for a typical proportional font.
+// This is not perfect for all fonts, but is better than treating
+// all characters as equal width. Set `monospace = true` to bypass.
+const CHAR_W = {
+    A: 7,
+    a: 7,
+    B: 8,
+    b: 7,
+    C: 8,
+    c: 6,
+    D: 9,
+    d: 7,
+    E: 7,
+    e: 7,
+    F: 7,
+    f: 4,
+    G: 9,
+    g: 7,
+    H: 9,
+    h: 7,
+    I: 3,
+    i: 3,
+    J: 5,
+    j: 3,
+    K: 8,
+    k: 6,
+    L: 7,
+    l: 3,
+    M: 11,
+    m: 11,
+    N: 9,
+    n: 7,
+    O: 9,
+    o: 7,
+    P: 8,
+    p: 7,
+    Q: 9,
+    q: 7,
+    R: 8,
+    r: 4,
+    S: 8,
+    s: 6,
+    T: 7,
+    t: 4,
+    U: 9,
+    u: 7,
+    V: 7,
+    v: 6,
+    W: 11,
+    w: 9,
+    X: 7,
+    x: 6,
+    Y: 7,
+    y: 6,
+    Z: 7,
+    z: 5,
+    '.': 2,
+    ',': 2,
+    ':': 2,
+    ';': 2
+};
+/**
+ * Greedy word-wrapping that approximates visual width by character widths.
+ *
+ * - Splits input into words, additionally breaking on `-` to avoid very long segments.
+ * - Uses a rough character width table to approximate line widths.
+ * - Wraps once the maximum visual width is exceeded, but only after a minimum.
+ */
+export default function wordwrap(line, { maxCharactersPerLine, maxLineWidth }, { minCharactersPerLine, minLineWidth }, fontSize = 12, monospace = false) {
+    // Tokenized words (with hyphen-splitting applied) including trailing spaces/hyphens.
+    const tokens = [];
+    // First split by spaces, then further split by hyphens so we can
+    // wrap inside hyphenated words if necessary.
+    const spaceSeparated = line.split(' ');
+    spaceSeparated.forEach((word, wordIndex) => {
+        const hyphenParts = word.split('-');
+        const trailingWhitespace = wordIndex < spaceSeparated.length - 1 ? ' ' : '';
+        if (hyphenParts.length > 1) {
+            hyphenParts.forEach((part, partIndex) => {
+                const suffix = partIndex < hyphenParts.length - 1 ? '-' : trailingWhitespace;
+                tokens.push(part + suffix);
+            });
+        }
+        else {
+            tokens.push(word + trailingWhitespace);
+        }
+    });
+    const maxChars = maxCharactersPerLine || 40;
+    if (!maxLineWidth) {
+        // Fallback for max characters per line if not provided / falsy.
+        // Convert character counts into approximate visual widths.
+        maxLineWidth = maxChars * CHAR_W.a;
+    }
+    if (!minLineWidth) {
+        // Estimate a good minimum line length:
+        //  - start from either a provided value or
+        //  - clamp a scaled median word length between 3 and half of maxChars.
+        const sortedWordLengths = tokens.map((t) => t.length).sort((a, b) => a - b);
+        const medianIndex = Math.round(tokens.length / 2);
+        const medianWordLength = sortedWordLengths[medianIndex] ?? maxChars;
+        const minChars = minCharactersPerLine || Math.max(3, Math.min(maxChars * 0.5, 0.75 * medianWordLength));
+        minLineWidth = minChars * CHAR_W.a;
+    }
+    const lines = [];
+    const currentWords = [];
+    let currentWidth = 0;
+    // Helper to look up a character width, falling back to "a" if unknown
+    // or when monospace mode is enabled.
+    const charWidth = (char) => (fontSize / 12) * (!monospace ? CHAR_W[char] : CHAR_W.a);
+    // Greedy line construction: append tokens until the next one would exceed
+    // max visual width, but only break if the line has passed the minimum width.
+    tokens.forEach((token) => {
+        const tokenWidth = sum(token.split('').map(charWidth));
+        if (currentWidth + tokenWidth > maxLineWidth && currentWidth > minLineWidth) {
+            lines.push(currentWords.join(''));
+            currentWords.length = 0;
+            currentWidth = 0;
+        }
+        currentWidth += tokenWidth;
+        currentWords.push(token);
+    });
+    // Flush trailing tokens into the last line.
+    if (currentWords.length > 0) {
+        lines.push(currentWords.join(''));
+    }
+    // Filter out any empty lines that may have been created.
+    return lines.filter((d) => d !== '');
+}

package/dist/marks/AxisX.svelte

@@ -51,6 +51,7 @@
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor | 'auto', Datum>;
+        removeDuplicateTicks: boolean;
     }
 
     let markProps: AxisXMarkProps = $props();
@@ -223,7 +224,7 @@
             {anchor}
             {className}
             {labelAnchor}
-            {options}
+            options={{ ...options, ...plot.options.x }}
             {plot}
             {text}
             {tickClass}

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

@@ -87,6 +87,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<"auto" | CSS.Property.TextAnchor, Datum>;
+        removeDuplicateTicks: boolean;
     };
     events(): {};
     slots(): {};

package/dist/marks/Brush.svelte

@@ -33,14 +33,17 @@
         onbrushend?: (evt: BrushEvent) => void;
         onbrush?: (evt: BrushEvent) => void;
     }
-    import { getContext } from 'svelte';
+    import { getContext, untrack } from 'svelte';
     import Rect from './Rect.svelte';
     import type { BaseMarkProps, DataRecord, PlotContext } from '../types/index.js';
     import { clientToLayerCoordinates } from './helpers/events.js';
     import Frame from './Frame.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
-    let { brush = $bindable({ enabled: false }), ...markProps }: BrushMarkProps = $props();
+    let { brush: brushExternal = $bindable({ enabled: false }), ...markProps }: BrushMarkProps =
+        $props();
+
+    let brush = $state<Brush>(brushExternal);
 
     const DEFAULTS = {
         stroke: 'currentColor',
@@ -179,6 +182,7 @@
     );
 
     $effect(() => {
+        // update brush prop when internal state changes
         brush.x1 =
             !brush.enabled || limitDimension === 'y'
                 ? undefined
@@ -197,6 +201,38 @@
                 : constrain(y1 > y2 ? y1 : y2, yDomain);
     });
 
+    // update internal state when external brush prop changes
+    $effect(() => {
+        const brushInt = untrack(() => brush);
+        if (!brushIdentical(brushInt, brushExternal)) {
+            brush = brushExternal;
+            // also keep internal x1,x2,y1,y2 in sync
+            x1 = brush.x1 as Date | number;
+            x2 = brush.x2 as Date | number;
+            y1 = brush.y1 as Date | number;
+            y2 = brush.y2 as Date | number;
+        }
+    });
+
+    // update external brush when internal state changes
+    $effect(() => {
+        const brushExt = untrack(() => brushExternal);
+        if (!brushIdentical(brush, brushExt)) {
+            // avoid cycles
+            brushExternal = brush;
+        }
+    });
+
+    function brushIdentical(b1: Brush, b2: Brush) {
+        return (
+            b1.enabled === b2.enabled &&
+            b1.x1 === b2.x1 &&
+            b1.x2 === b2.x2 &&
+            b1.y1 === b2.y1 &&
+            b1.y2 === b2.y2
+        );
+    }
+
     function constrain<T extends number | Date>(x: T, extent: [typeof x, typeof x]) {
         const minE = extent[0] < extent[1] ? extent[0] : extent[1];
         const maxE = extent[0] > extent[1] ? extent[0] : extent[1];
@@ -242,8 +278,12 @@
         } else {
             // draw new brush selection
             action = 'draw';
-            x1 = x2 = xScaleFn.invert(dragStart[0]);
-            y1 = y2 = yScaleFn.invert(dragStart[1]);
+            if (typeof xScaleFn.invert === 'function' && limitDimension !== 'y') {
+                x1 = x2 = xScaleFn.invert(dragStart[0]);
+            }
+            if (typeof yScaleFn.invert === 'function' && limitDimension !== 'x') {
+                y1 = y2 = yScaleFn.invert(dragStart[1]);
+            }
         }
         onbrushstart?.({ ...e, brush });
     }

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

@@ -75,7 +75,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          * the font size of the text
          */
         fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "math" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
         fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
         fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;

package/dist/marks/WaffleX.svelte

@@ -0,0 +1,115 @@
+<!--
+    @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,
+        BaseMarkProps,
+        ChannelAccessor,
+        LinkableMarkProps,
+        BorderRadius
+    } from '../types';
+    import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { intervalX, recordizeX, sort, stackX } from '../transforms';
+    import type { StackOptions } from '../transforms/stack';
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve';
+    import { roundedRect } from '../helpers/roundedRect';
+
+    interface WaffleXMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            WaffleOptions<Datum> {
+        data?: Datum[];
+        /**
+         * bound to a quantitative scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x2?: ChannelAccessor<Datum>;
+        /**
+         * bound to a band scale
+         */
+        y?: ChannelAccessor<Datum>;
+        stack?: StackOptions;
+    }
+
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getPlotDefaults().waffle,
+        ...getPlotDefaults().waffleX
+    };
+
+    let markProps: WaffleXMarkProps = $props();
+
+    const {
+        data = [{} as Datum],
+        class: className = null,
+        stack,
+        symbol = null,
+        unit,
+        ...options
+    }: WaffleXMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackX(
+            intervalX(
+                // by default, sort by y channel (the ordinal labels)
+                sort(recordizeX({ data, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="waffleX"
+    requiredScales={{ y: ['band'] }}
+    channels={['x1', 'x2', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {@const wafflePoly = wafflePolygon('x', args, plot.scales)}
+        {#each scaledData as d, i (i)}
+            {@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 [style, styleClass] = resolveStyles(plot, d, options, 'fill', usedScales)}
+            {@const { pattern, rect, path } = wafflePoly(d)}
+            <g class={['waffle-x', className]}>
+                <pattern {...pattern}>
+                    {#if symbol}
+                        {@render symbol(rect)}
+                    {: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/WaffleX.svelte.d.ts

@@ -0,0 +1,102 @@
+import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types';
+import { type WaffleOptions } from './helpers/waffle';
+import type { StackOptions } from '../transforms/stack';
+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 quantitative scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x2?: ChannelAccessor<Datum>;
+        /**
+         * bound to a band scale
+         */
+        y?: ChannelAccessor<Datum>;
+        stack?: StackOptions;
+    };
+    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 WaffleX: $$IsomorphicComponent;
+type WaffleX<Datum extends DataRecord> = InstanceType<typeof WaffleX<Datum>>;
+export default WaffleX;