svelteplot 0.9.2 → 0.10.0-pr-356.0

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

@@ -1,3 +1,4 @@
+import { recordizeY } from '../transforms/recordize.js';
 import type { DataRecord, ConstantAccessor, ChannelAccessor } from '../types/index.js';
 declare function $$render<Datum = DataRecord>(): {
     props: Omit<Partial<{
@@ -7,14 +8,14 @@ declare function $$render<Datum = DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -71,6 +72,7 @@ declare function $$render<Datum = DataRecord>(): {
         inset?: ConstantAccessor<number, Datum>;
         insetLeft?: ConstantAccessor<number, Datum>;
         insetRight?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import { getPlotDefaults } from '../hooks/plotDefaults.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: getPlotDefaults;
+        dodgeY: getPlotDefaults;
         fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
         stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
@@ -74,7 +75,7 @@ declare function $$render<Datum extends DataRecord>(): {
         shape?: "arrow" | "spike" | "arrow-filled" | import("./Vector.svelte").ShapeRenderer;
         children?: import("svelte").Snippet;
         canvas?: boolean;
-    }, "data" | "r" | "length" | "x" | "y" | "rotate"> & {
+    }, "r" | "length" | "x" | "y" | "data" | "rotate"> & {
         data: Datum[];
         x: ChannelAccessor<Datum>;
         y: ChannelAccessor<Datum>;

package/dist/marks/Text.svelte

@@ -6,7 +6,7 @@
 <script lang="ts" generics="Datum extends DataRecord">
     import type * as CSS from 'csstype';
 
-    interface TextMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+    interface TextCommonMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
         data?: Datum[];
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
@@ -29,10 +29,6 @@
          * the horizontal text anchor; start, end, or middle
          */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
-        /**
-         * if you want to apply class names to individual text elements
-         */
-        textClass?: ConstantAccessor<string, Datum>;
         /**
          * the line anchor for vertical position; top, bottom, or middle
          */
@@ -60,6 +56,27 @@
         rotate?: ConstantAccessor<number, Datum>;
     }
 
+    type CanvasTextMarkProps = TextCommonMarkProps & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas: true;
+        textClass?: never;
+    };
+
+    type SvgTextMarkProps = TextCommonMarkProps & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas?: false | undefined;
+        /**
+         * if you want to apply class names to individual text elements. Only supported in SVG rendering.
+         */
+        textClass?: ConstantAccessor<string, Datum>;
+    };
+
+    type TextMarkProps = SvgTextMarkProps | CanvasTextMarkProps;
+
     import { type Snippet } from 'svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import type {
@@ -74,6 +91,7 @@
     import { sort } from '../index.js';
 
     import MultilineText from './helpers/MultilineText.svelte';
+    import TextCanvas from './helpers/TextCanvas.svelte';
     import { indexData } from '../transforms/recordize';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
@@ -89,14 +107,17 @@
 
     let markProps: TextMarkProps = $props();
 
+    const mergedProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    }) as TextMarkProps;
+
     const {
         data = [{} as Datum],
+        canvas = false,
         class: className = '',
         ...options
-    }: TextMarkProps = $derived({
-        ...DEFAULTS,
-        ...markProps
-    });
+    } = $derived(mergedProps);
 
     const args = $derived(
         sort({
@@ -107,7 +128,8 @@
 </script>
 
 <Mark
-    type="text"
+    {...args}
+    type={'text' as const}
     channels={[
         'x',
         'y',
@@ -119,17 +141,24 @@
         'strokeOpacity',
         'fillOpacity'
     ]}
-    required={[]}
-    {...args}>
+    required={[]}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <GroupMultiple class="text {className}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid}
-                    {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
+        {#if canvas}
+            <g class="text {className || ''}">
+                <TextCanvas data={scaledData} options={args as CanvasTextMarkProps} {usedScales} />
+            </g>
+        {:else}
+            <GroupMultiple
+                class="text {className}"
+                length={className ? 2 : (args.data?.length ?? 0)}>
+                {#each scaledData as d, i (i)}
+                    {#if d.valid}
+                        {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
 
-                    <MultilineText {textLines} {d} {args} {usedScales} />
-                {/if}
-            {/each}
-        </GroupMultiple>
+                        <MultilineText {textLines} {d} args={args as any} {usedScales} />
+                    {/if}
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -1,22 +1,23 @@
 import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
 import type { DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+import { sort } from '../index.js';
 declare function $$render<Datum extends DataRecord>(): {
-    props: Partial<{
+    props: (Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
         fx: ChannelAccessor<Datum>;
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -89,9 +90,114 @@ declare function $$render<Datum extends DataRecord>(): {
          */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
         /**
-         * if you want to apply class names to individual text elements
+         * the line anchor for vertical position; top, bottom, or middle
+         */
+        lineAnchor?: ConstantAccessor<"bottom" | "top" | "middle">;
+        /**
+         * line height as multiplier of font size
+         * @default 1.2
+         */
+        lineHeight?: ConstantAccessor<number, Datum>;
+        frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "top-left" | "bottom-left" | "top-right" | "bottom-right" | "middle", Datum>;
+        /**
+         * rotate text by angle in degrees
+         */
+        rotate?: ConstantAccessor<number, Datum>;
+    } & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas?: false | undefined;
+        /**
+         * if you want to apply class names to individual text elements. Only supported in SVG rendering.
          */
         textClass?: ConstantAccessor<string, Datum>;
+    }) | (Partial<{
+        filter: ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        dodgeX: sort;
+        dodgeY: sort;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: ConstantAccessor<number, Datum>;
+        sort: {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: ConstantAccessor<number, Datum>;
+        strokeOpacity: ConstantAccessor<number, Datum>;
+        strokeLinejoin: ConstantAccessor<CSS.Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<CSS.Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: ConstantAccessor<string, Datum>;
+        strokeDashoffset: ConstantAccessor<number, Datum>;
+        mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
+        clipPath: string;
+        mask: string;
+        imageFilter: ConstantAccessor<string, Datum>;
+        shapeRendering: ConstantAccessor<CSS.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<CSS.Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        children?: Snippet;
+        text: ConstantAccessor<string | null | false | undefined, Datum>;
+        title?: ConstantAccessor<string, Datum>;
+        /**
+         * the font size of the text
+         */
+        fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
+        fontSize?: ConstantAccessor<CSS.Property.FontSize | number, Datum>;
+        fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
+        fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
+        fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;
+        letterSpacing?: ConstantAccessor<CSS.Property.LetterSpacing, Datum>;
+        wordSpacing?: ConstantAccessor<CSS.Property.WordSpacing, Datum>;
+        textTransform?: ConstantAccessor<CSS.Property.TextTransform, Datum>;
+        textDecoration?: ConstantAccessor<CSS.Property.TextDecoration, Datum>;
+        /**
+         * the horizontal text anchor; start, end, or middle
+         */
+        textAnchor?: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
         /**
          * the line anchor for vertical position; top, bottom, or middle
          */
@@ -106,7 +212,13 @@ declare function $$render<Datum extends DataRecord>(): {
          * rotate text by angle in degrees
          */
         rotate?: ConstantAccessor<number, Datum>;
-    };
+    } & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas: true;
+        textClass?: never;
+    });
     exports: {};
     bindings: "";
     slots: {};

package/dist/marks/TickX.svelte

@@ -20,8 +20,10 @@
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
+    import TickCanvas from './helpers/TickCanvas.svelte';
     import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
@@ -48,6 +50,7 @@
     const {
         data = [{}],
         class: className = '',
+        canvas = false,
         ...options
     }: TickXMarkProps = $derived({
         ...DEFAULTS,
@@ -65,40 +68,44 @@
     channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
     {...markProps}
     {...args}>
-    {#snippet children({ mark, usedScales })}
-        <g class="tick-x">
-            {#each args.data as datum, i (i)}
-                {#if testFacet(datum, mark.options) && testFilter(datum, args)}
-                    {@const x_ = resolveChannel('x', datum, args)}
-                    {@const y_ = resolveChannel('y', datum, args)}
-                    {@const inset_ = resolveProp(args.inset, datum, 0)}
-                    {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
-                    {@const dx_ = resolveProp(args.dx, datum, 0)}
-                    {@const dy_ = resolveProp(args.dy, datum, 0)}
-                    {#if isValid(x_) && (isValid(y_) || args.y == null) && (args.filter == null || resolveProp(args.filter, datum))}
-                        {@const x = usedScales.x ? projectX('x', plot.scales, x_) : x_}
-                        {@const y1 =
-                            args.y != null
-                                ? usedScales.y
-                                    ? projectY('y1', plot.scales, y_)
-                                    : y_
-                                : plot.options.marginTop}
-                        {@const y2 =
-                            args.y != null
-                                ? usedScales.y
-                                    ? Number(projectY('y2', plot.scales, y_))
-                                    : y_
-                                : plot.options.marginTop + plot.plotHeight}
-                        {@const inset = parseInset(inset_, Math.abs(y2 - y1))}
-                        <line
-                            transform="translate({x + dx_}, {dy_})"
-                            style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
-                            y1={y1 + inset + (y1 === y2 ? tickLength_ * 0.5 : 0)}
-                            y2={y2 - inset - (y1 === y2 ? tickLength_ * 0.5 : 0)} />
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if canvas}
+            <TickCanvas data={scaledData} options={args} {usedScales} orientation="vertical" />
+        {:else}
+            <g class="tick-x">
+                {#each args.data as datum, i (i)}
+                    {#if testFacet(datum, mark.options) && testFilter(datum, args)}
+                        {@const x_ = resolveChannel('x', datum, args)}
+                        {@const y_ = resolveChannel('y', datum, args)}
+                        {@const inset_ = resolveProp(args.inset, datum, 0)}
+                        {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
+                        {@const dx_ = resolveProp(args.dx, datum, 0)}
+                        {@const dy_ = resolveProp(args.dy, datum, 0)}
+                        {#if isValid(x_) && (isValid(y_) || args.y == null) && (args.filter == null || resolveProp(args.filter, datum))}
+                            {@const x = usedScales.x ? projectX('x', plot.scales, x_) : x_}
+                            {@const y1 =
+                                args.y != null
+                                    ? usedScales.y
+                                        ? projectY('y1', plot.scales, y_)
+                                        : y_
+                                    : plot.options.marginTop}
+                            {@const y2 =
+                                args.y != null
+                                    ? usedScales.y
+                                        ? Number(projectY('y2', plot.scales, y_))
+                                        : y_
+                                    : plot.options.marginTop + plot.plotHeight}
+                            {@const inset = parseInset(inset_, Math.abs(y2 - y1))}
+                            <line
+                                transform="translate({x + dx_}, {dy_})"
+                                style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
+                                y1={y1 + inset + (y1 === y2 ? tickLength_ * 0.5 : 0)}
+                                y2={y2 - inset - (y1 === y2 ? tickLength_ * 0.5 : 0)} />
+                        {/if}
                     {/if}
-                {/if}
-            {/each}
-        </g>
+                {/each}
+            </g>
+        {/if}
     {/snippet}
 </Mark>
 

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeX } from '../index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeX;
+        dodgeY: recordizeX;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -79,6 +80,7 @@ declare function $$render<Datum extends DataRow>(): {
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/TickY.svelte

@@ -19,8 +19,10 @@
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
+    import TickCanvas from './helpers/TickCanvas.svelte';
     import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
@@ -47,6 +49,7 @@
     const {
         data = [{}],
         class: className = '',
+        canvas = false,
         ...options
     }: TickYMarkProps = $derived({
         ...DEFAULTS,
@@ -64,40 +67,44 @@
     channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
     {...markProps}
     {...args}>
-    {#snippet children({ mark, usedScales })}
-        <g class="tick-y">
-            {#each args.data as datum, i (i)}
-                {#if testFacet(datum, mark.options) && testFilter(datum, args)}
-                    {@const y_ = resolveChannel('y', datum, args)}
-                    {@const x_ = resolveChannel('x', datum, args)}
-                    {@const inset_ = resolveProp(args.inset, datum, 0)}
-                    {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
-                    {@const dx_ = resolveProp(args.dx, datum, 0)}
-                    {@const dy_ = resolveProp(args.dy, datum, 0)}
-                    {#if isValid(y_) && (isValid(x_) || args.x == null)}
-                        {@const y = usedScales.y ? projectY('y', plot.scales, y_) : y_}
-                        {@const x1 =
-                            args.x != null
-                                ? usedScales.x
-                                    ? projectX('x1', plot.scales, x_)
-                                    : x_
-                                : plot.options.marginLeft}
-                        {@const x2 =
-                            args.x != null
-                                ? usedScales.x
-                                    ? projectX('x2', plot.scales, x_)
-                                    : x_
-                                : plot.options.marginLeft + plot.facetWidth}
-                        {@const inset = parseInset(inset_, Math.abs(x2 - x1))}
-                        <line
-                            transform="translate({dx_}, {y + dy_})"
-                            style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
-                            x1={x1 + inset + (x1 === x2 ? tickLength_ * 0.5 : 0)}
-                            x2={x2 - inset - (x1 === x2 ? tickLength_ * 0.5 : 0)} />
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if canvas}
+            <TickCanvas data={scaledData} options={args} {usedScales} orientation="horizontal" />
+        {:else}
+            <g class="tick-y">
+                {#each args.data as datum, i (i)}
+                    {#if testFacet(datum, mark.options) && testFilter(datum, args)}
+                        {@const y_ = resolveChannel('y', datum, args)}
+                        {@const x_ = resolveChannel('x', datum, args)}
+                        {@const inset_ = resolveProp(args.inset, datum, 0)}
+                        {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
+                        {@const dx_ = resolveProp(args.dx, datum, 0)}
+                        {@const dy_ = resolveProp(args.dy, datum, 0)}
+                        {#if isValid(y_) && (isValid(x_) || args.x == null)}
+                            {@const y = usedScales.y ? projectY('y', plot.scales, y_) : y_}
+                            {@const x1 =
+                                args.x != null
+                                    ? usedScales.x
+                                        ? projectX('x1', plot.scales, x_)
+                                        : x_
+                                    : plot.options.marginLeft}
+                            {@const x2 =
+                                args.x != null
+                                    ? usedScales.x
+                                        ? projectX('x2', plot.scales, x_)
+                                        : x_
+                                    : plot.options.marginLeft + plot.facetWidth}
+                            {@const inset = parseInset(inset_, Math.abs(x2 - x1))}
+                            <line
+                                transform="translate({dx_}, {y + dy_})"
+                                style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
+                                x1={x1 + inset + (x1 === x2 ? tickLength_ * 0.5 : 0)}
+                                x2={x2 - inset - (x1 === x2 ? tickLength_ * 0.5 : 0)} />
+                        {/if}
                     {/if}
-                {/if}
-            {/each}
-        </g>
+                {/each}
+            </g>
+        {/if}
     {/snippet}
 </Mark>
 

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeY } from '../index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -79,6 +80,7 @@ declare function $$render<Datum extends DataRow>(): {
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";