svelteplot 0.0.1-alpha.9 → 0.1.3-next.12

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

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { RuleYMarkProps } from '../types.js';
-declare const __propDef: {
-    props: RuleYMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type RuleYMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    y?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    inset?: ConstantAccessor<number>;
+    insetLeft?: ConstantAccessor<number>;
+    insetRight?: ConstantAccessor<number>;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
 };
-export type RuleYProps = typeof __propDef.props;
-export type RuleYEvents = typeof __propDef.events;
-export type RuleYSlots = typeof __propDef.slots;
-export default class RuleY extends SvelteComponent<RuleYProps, RuleYEvents, RuleYSlots> {
-}
-export {};
+declare const RuleY: import("svelte").Component<RuleYMarkProps, {}, "">;
+type RuleY = ReturnType<typeof RuleY>;
+export default RuleY;

package/dist/marks/Sphere.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { type BaseMarkProps } from '../types.js';
+    import Geo from './Geo.svelte';
+
+    let { ...args }: BaseMarkProps = $props();
+</script>
+
+<Geo data={[{ type: 'Sphere' }]} {...args} geoType="sphere" />

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

@@ -0,0 +1,51 @@
+declare const Sphere: import("svelte").Component<Partial<{
+    filter?: import("../types.js").ConstantAccessor<boolean>;
+    facet?: "auto" | "include" | "exclude";
+    fx: import("../types.js").ChannelAccessor;
+    fy: import("../types.js").ChannelAccessor;
+    dx: import("../types.js").ConstantAccessor<number>;
+    dy: import("../types.js").ConstantAccessor<number>;
+    fill: import("../types.js").ConstantAccessor<string>;
+    fillOpacity: import("../types.js").ConstantAccessor<number>;
+    stroke: import("../types.js").ConstantAccessor<string>;
+    strokeWidth: import("../types.js").ConstantAccessor<number>;
+    strokeOpacity: import("../types.js").ConstantAccessor<number>;
+    strokeLinejoin: import("../types.js").ConstantAccessor<"bevel" | "miter" | "miter-clip" | "round">;
+    strokeLinecap: import("../types.js").ConstantAccessor<"butt" | "square" | "round">;
+    strokeMiterlimit: import("../types.js").ConstantAccessor<number>;
+    opacity: import("../types.js").ConstantAccessor<number>;
+    strokeDasharray: import("../types.js").ConstantAccessor<string>;
+    strokeDashoffset: import("../types.js").ConstantAccessor<number>;
+    mixBlendMode: import("../types.js").ConstantAccessor<"normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-darker" | "plus-lighter">;
+    clipPath: string;
+    imageFilter: import("../types.js").ConstantAccessor<string>;
+    shapeRendering: import("../types.js").ConstantAccessor<"crispEdges" | "geometricPrecision" | "optimizeSpeed" | "auto">;
+    paintOrder: import("../types.js").ConstantAccessor<string>;
+    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>;
+    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>;
+    title: import("../types.js").ConstantAccessor<string>;
+    href: import("../types.js").ConstantAccessor<string>;
+    target: import("../types.js").ConstantAccessor<"_self" | "_blank" | string>;
+    class: string;
+}>, {}, "">;
+type Sphere = ReturnType<typeof Sphere>;
+export default Sphere;

package/dist/marks/Spike.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import Vector, { type VectorMarkProps } from './Vector.svelte';
+    let { data = [{}], ...options }: VectorMarkProps = $props();
+</script>
+
+<Vector
+    {data}
+    fill={options.stroke || 'currentColor'}
+    fillOpacity={0.3}
+    strokeWidth={1}
+    anchor="start"
+    stroke="currentColor"
+    sort={{ channel: '-y' }}
+    {...options}
+    shape="spike" />

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

@@ -0,0 +1,4 @@
+import { type VectorMarkProps } from './Vector.svelte';
+declare const Spike: import("svelte").Component<VectorMarkProps, {}, "">;
+type Spike = ReturnType<typeof Spike>;
+export default Spike;

package/dist/marks/SymbolLegend.svelte

@@ -1,24 +1,38 @@
-<script>import { getContext } from "svelte";
-import { symbol as d3Symbol } from "d3-shape";
-import { maybeSymbol } from "../helpers/symbols.js";
-const plot = getContext("svelteplot");
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import { symbol as d3Symbol } from 'd3-shape';
+    import { maybeSymbol } from '../helpers/symbols.js';
+    import type { PlotContext } from '../types.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    // TODO: allow styling of legend
 </script>
 
-{#if plot.color.manualActiveMarks.length > 0 && !(plot.options.color?.legend && plot.colorSymbolRedundant)}
+<!--
+    @component
+    The SymbolLegend is an HTML mark that can be placed in the header, footer and overlay
+    snippets. You can activate an implicit SymbolLegend above the chart using the global
+    symbol.legend scale option.
+-->
+
+{#if plot.scales.color.manualActiveMarks > 0}
     <div class="symbol-legend">
-        {#each plot.symbolScale.domain() as value}
-            {@const symbolV = plot.symbolScale(value)}
+        {#each plot.scales.color.domain as value}
+            {@const symbolV = plot.scales.symbol.fn(value)}
             {@const symbolType = maybeSymbol(symbolV)}
-            {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
+            {@const color = plot.colorSymbolRedundant
+                ? plot.scales.color.fn(value)
+                : 'currentColor'}
             <div class="item">
                 <div class="swatch">
                     <svg width="15" height="15">
                         <path
                             transform="translate(7.5,7.5)"
-                            fill={plot.hasFilledDotMarks ? color : 'none'}
-                            stroke={plot.hasFilledDotMarks ? null : color}
-                            d={d3Symbol(symbolType, 40)()}
-                        />
+                            style:fill={plot.hasFilledDotMarks ? color : 'none'}
+                            style:stroke={plot.hasFilledDotMarks ? null : color}
+                            d={d3Symbol(symbolType, 40)()} />
                     </svg>
                 </div>
                 <span class="item-label">{value}</span>
@@ -32,6 +46,7 @@ const plot = getContext("svelteplot");
         text-align: left;
         font-size: 12px;
         display: inline-block;
+        margin-right: 2em;
     }
     .item {
         margin: 0 1em 0.5ex 0;

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

@@ -1,14 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SymbolLegendProps = typeof __propDef.props;
-export type SymbolLegendEvents = typeof __propDef.events;
-export type SymbolLegendSlots = typeof __propDef.slots;
-export default class SymbolLegend extends SvelteComponent<SymbolLegendProps, SymbolLegendEvents, SymbolLegendSlots> {
-}
-export {};
+/**
+ * The SymbolLegend is an HTML mark that can be placed in the header, footer and overlay
+ * snippets. You can activate an implicit SymbolLegend above the chart using the global
+ * symbol.legend scale option.
+ */
+declare const SymbolLegend: import("svelte").Component<Record<string, never>, {}, "">;
+type SymbolLegend = ReturnType<typeof SymbolLegend>;
+export default SymbolLegend;

package/dist/marks/Text.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import Mark from '../Mark.svelte';
+    import { sort } from '../index.js';
+
+    type TextMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        children?: Snippet;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+        text: ConstantAccessor<string>;
+        title: ConstantAccessor<string>;
+        /**
+         * if you want to apply class names to individual text elements
+         */
+        textClass: ConstantAccessor<string>;
+        /**
+         * the line anchor for vertical position; top, bottom, or middle
+         */
+        lineAnchor?: ConstantAccessor<'bottom' | 'top' | 'middle'>;
+        frameAnchor?: ConstantAccessor<
+            | 'bottom'
+            | 'top'
+            | 'left'
+            | 'right'
+            | 'top-left'
+            | 'bottom-left'
+            | 'top-right'
+            | 'bottom-right'
+        >;
+    };
+
+    let { data = [{}], class: className = null, ...options }: TextMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    const LINE_ANCHOR = {
+        bottom: 'auto',
+        middle: 'central',
+        top: 'hanging'
+    };
+
+    const args = $derived(
+        sort({
+            data,
+            ...options
+        })
+    );
+</script>
+
+<Mark
+    type="text"
+    channels={[
+        'x',
+        'y',
+        'r',
+        'symbol',
+        'fill',
+        'stroke',
+        'opacity',
+        'strokeOpacity',
+        'fillOpacity'
+    ]}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <GroupMultiple class="text {className || null}" length={className ? 2 : args.data.length}>
+            {#each scaledData as d}
+                {#if d.valid}
+                    {@const title = resolveProp(args.title, d.datum, '')}
+                    {@const frameAnchor = resolveProp(args.frameAnchor, d.datum)}
+                    {@const isLeft =
+                        frameAnchor === 'left' ||
+                        frameAnchor === 'top-left' ||
+                        frameAnchor === 'bottom-left'}
+                    {@const isRight =
+                        frameAnchor === 'right' ||
+                        frameAnchor === 'top-right' ||
+                        frameAnchor === 'bottom-right'}
+                    {@const isTop =
+                        frameAnchor === 'top' ||
+                        frameAnchor === 'top-left' ||
+                        frameAnchor === 'top-right'}
+                    {@const isBottom =
+                        frameAnchor === 'bottom' ||
+                        frameAnchor === 'bottom-left' ||
+                        frameAnchor === 'bottom-right'}
+                    {@const [x, y] =
+                        args.x != null && args.y != null
+                            ? [d.x, d.y]
+                            : [
+                                  args.x != null
+                                      ? d.x
+                                      : isLeft
+                                        ? plot.options.marginLeft
+                                        : isRight
+                                          ? plot.options.marginLeft + plot.facetWidth
+                                          : plot.options.marginLeft + plot.facetWidth * 0.5,
+                                  args.y != null
+                                      ? d.y
+                                      : isTop
+                                        ? plot.options.marginTop
+                                        : isBottom
+                                          ? plot.options.marginTop + plot.facetHeight
+                                          : plot.options.marginTop + plot.facetHeight * 0.5
+                              ]}
+
+                    {@const dx = +resolveProp(args.dx, d.datum, 0)}
+                    {@const dy = +resolveProp(args.dy, d.datum, 0)}
+                    {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
+                    {@const lineAnchor = resolveProp(
+                        args.lineAnchor,
+                        d.datum,
+                        args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
+                    )}
+                    {@const textClassName = resolveProp(args.textClass, d.datum, null)}
+
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { ...d, __tspanIndex: 0 },
+                        {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            strokeWidth: 1.6,
+                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
+                            ...args
+                        },
+                        'fill',
+                        usedScales
+                    )}
+
+                    {#if textLines.length > 1}
+                        <!-- multiline text-->
+                        {@const fontSize = resolveProp(args.fontSize, d.datum) || 12}
+                        <text
+                            class={[textClassName]}
+                            dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                            transform="translate({[
+                                Math.round(x + dx),
+                                Math.round(
+                                    y +
+                                        dy -
+                                        (lineAnchor === 'bottom'
+                                            ? textLines.length - 1
+                                            : lineAnchor === 'middle'
+                                              ? (textLines.length - 1) * 0.5
+                                              : 0) *
+                                            fontSize
+                                )
+                            ]})"
+                            >{#each textLines as line, l}<tspan
+                                    x="0"
+                                    dy={l ? fontSize : 0}
+                                    class={styleClass}
+                                    {style}>{line}</tspan
+                                >{/each}{#if title}<title>{title}</title>{/if}</text>
+                    {:else}
+                        <!-- singleline text-->
+                        <text
+                            class={[textClassName, styleClass]}
+                            dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                            transform="translate({[Math.round(x + dx), Math.round(y + dy)]})"
+                            {style}
+                            >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
+                    {/if}
+                {/if}
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>
+
+<style>
+    text {
+        paint-order: stroke fill;
+    }
+</style>

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

@@ -0,0 +1,26 @@
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type TextMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x: ChannelAccessor;
+    y: ChannelAccessor;
+    fill?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    children?: Snippet;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    text: ConstantAccessor<string>;
+    title: ConstantAccessor<string>;
+    /**
+     * if you want to apply class names to individual text elements
+     */
+    textClass: ConstantAccessor<string>;
+    /**
+     * the line anchor for vertical position; top, bottom, or middle
+     */
+    lineAnchor?: ConstantAccessor<'bottom' | 'top' | 'middle'>;
+    frameAnchor?: ConstantAccessor<'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right'>;
+};
+declare const Text: import("svelte").Component<TextMarkProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/marks/TickX.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        ChannelAccessor,
+        DataRow,
+        FacetContext
+    } from '../types.js';
+    import { recordizeX } from '../index.js';
+    import { projectX, projectY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/isValid.js';
+    import { testFilter, parseInset } from '../helpers/index.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    type TickXMarkProps = BaseMarkProps & {
+        data: DataRow[];
+        /**
+         * the horizontal position; bound to the x scale
+         */
+        x?: ChannelAccessor;
+        /**
+         * the vertical position; bound to the y scale, which must be band. If the y channel
+         * is not specified, the tick will span the full vertical extent of the frame.
+         */
+        y?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+
+    let { data = [{}], ...options }: TickXMarkProps = $props();
+
+    let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    let testFacet = $derived(getTestFacet());
+</script>
+
+<Mark type="tickX" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ mark, usedScales })}
+        <g class="tick-x">
+            {#each args.data as datum}
+                {#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}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    .tick-x line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,22 @@
+import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+type TickXMarkProps = BaseMarkProps & {
+    data: DataRow[];
+    /**
+     * the horizontal position; bound to the x scale
+     */
+    x?: ChannelAccessor;
+    /**
+     * the vertical position; bound to the y scale, which must be band. If the y channel
+     * is not specified, the tick will span the full vertical extent of the frame.
+     */
+    y?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    /**
+     * if ticks are used on a non-bandwidth scale, this will determine the
+     * length of the tick. Defaults to 10 pixel
+     */
+    tickLength?: ConstantAccessor<number>;
+};
+declare const TickX: import("svelte").Component<TickXMarkProps, {}, "">;
+type TickX = ReturnType<typeof TickX>;
+export default TickX;

package/dist/marks/TickY.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        ChannelAccessor,
+        DataRow,
+        FacetContext,
+        ConstantAccessor
+    } from '../types.js';
+    import { recordizeY } from '../index.js';
+    import { projectX, projectY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/isValid.js';
+    import { testFilter, parseInset } from '../helpers/index.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    type TickYMarkProps = BaseMarkProps & {
+        data: DataRow[];
+        /**
+         * the vertical position; bound to the x scale
+         */
+        y?: ChannelAccessor;
+        /**
+         * the horizontal position; bound to the x scale, which must be band. If the x channel
+         * is not specified, the tick will span the full horizontal extent of the frame.
+         */
+        x?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+
+    let { data = [{}], ...options }: TickYMarkProps = $props();
+
+    let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    let testFacet = $derived(getTestFacet());
+</script>
+
+<Mark type="tickY" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ mark, usedScales })}
+        <g class="tick-y">
+            {#each args.data as datum}
+                {#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}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    .tick-y line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,22 @@
+import type { BaseMarkProps, ChannelAccessor, DataRow, ConstantAccessor } from '../types.js';
+type TickYMarkProps = BaseMarkProps & {
+    data: DataRow[];
+    /**
+     * the vertical position; bound to the x scale
+     */
+    y?: ChannelAccessor;
+    /**
+     * the horizontal position; bound to the x scale, which must be band. If the x channel
+     * is not specified, the tick will span the full horizontal extent of the frame.
+     */
+    x?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    /**
+     * if ticks are used on a non-bandwidth scale, this will determine the
+     * length of the tick. Defaults to 10 pixel
+     */
+    tickLength?: ConstantAccessor<number>;
+};
+declare const TickY: import("svelte").Component<TickYMarkProps, {}, "">;
+type TickY = ReturnType<typeof TickY>;
+export default TickY;