svelteplot 0.10.3 → 0.11.0

package/dist/marks/TickX.svelte

@@ -3,8 +3,9 @@
     The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale.
 -->
 
-<script lang="ts" generics="Datum extends DataRow">
+<script lang="ts" generics="Datum = DataRecord | RawValue">
     interface TickXMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** the input data array; each element becomes one vertical tick */
         data: Datum[];
         /**
          * the horizontal position; bound to the x scale
@@ -20,23 +21,21 @@
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         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 { resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
         BaseMarkProps,
         ChannelAccessor,
-        DataRow,
-        FacetContext,
-        ConstantAccessor
+        ConstantAccessor,
+        DataRecord,
+        RawValue
     } from '../types/index.js';
     import { recordizeX } from '../index.js';
-    import { projectX, projectY } from '../helpers/scales.js';
-    import { isValid } from '../helpers/index.js';
-    import { testFilter, parseInset } from '../helpers/index.js';
+    import { parseInset } from '../helpers/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
@@ -48,7 +47,7 @@
         ...getPlotDefaults().tickX
     };
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         canvas = false,
         ...options
@@ -57,51 +56,60 @@
         ...markProps
     });
 
-    let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    let testFacet = $derived(getTestFacet());
+    let args = $derived(recordizeX({ data, ...options } as any, { withIndex: false }));
 </script>
 
 <Mark
     type="tickX"
     channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
-    {...markProps}
-    {...args}>
-    {#snippet children({ mark, usedScales, scaledData })}
+    {...markProps as any}
+    {...args as any}>
+    {#snippet children({ usedScales, scaledData })}
         {#if canvas}
-            <TickCanvas data={scaledData} options={args} {usedScales} orientation="vertical" />
+            <TickCanvas
+                data={scaledData}
+                options={args as any}
+                {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}
+            {@const yUsesBand = usedScales.y && plot.scales.y.type === 'band'}
+            {@const yBandwidth = yUsesBand ? plot.scales.y.fn.bandwidth() : 0}
+            <g class="tick-x {className || ''}">
+                {#each scaledData as d, i (i)}
+                    {#if d.valid && d.x != null}
+                        {@const inset_ = resolveProp(args.inset, d.datum, 0)}
+                        {@const tickLength_ = Number(
+                            resolveProp(args.tickLength, d.datum, 10) ?? 10
+                        )}
+                        {@const y1 =
+                            args.y != null && d.y != null
+                                ? yUsesBand
+                                    ? d.y - yBandwidth * 0.5
+                                    : d.y
+                                : plot.options.marginTop}
+                        {@const y2 =
+                            args.y != null && d.y != null
+                                ? yUsesBand
+                                    ? d.y + yBandwidth * 0.5
+                                    : d.y
+                                : plot.options.marginTop + plot.plotHeight}
+                        {@const insetValue =
+                            typeof inset_ === 'number' || typeof inset_ === 'string' ? inset_ : 0}
+                        {@const inset = parseInset(insetValue, Math.abs(y2 - y1))}
+                        {@const tickOffset = y1 === y2 ? tickLength_ * 0.5 : 0}
+                        {@const xTransform = d.x}
+                        {@const yTransform = args.y == null ? d.dy : 0}
+                        <line
+                            transform="translate({xTransform}, {yTransform})"
+                            style={resolveScaledStyles(
+                                d.datum,
+                                args as any,
+                                usedScales,
+                                plot,
+                                'stroke'
+                            )}
+                            y1={y1 + inset + tickOffset}
+                            y2={y2 - inset - tickOffset} />
                     {/if}
                 {/each}
             </g>

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

@@ -1,5 +1,5 @@
-import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
-declare function $$render<Datum extends DataRow>(): {
+import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from '../types/index.js';
+declare function $$render<Datum = DataRecord | RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
@@ -7,14 +7,24 @@ 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: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -24,46 +34,109 @@ declare function $$render<Datum extends DataRow>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }>, "fill" | "fillOpacity"> & {
+        /** the input data array; each element becomes one vertical tick */
         data: Datum[];
         /**
          * the horizontal position; bound to the x scale
@@ -79,6 +152,7 @@ declare function $$render<Datum extends DataRow>(): {
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
     };
     exports: {};
@@ -86,7 +160,7 @@ declare function $$render<Datum extends DataRow>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Datum extends DataRow> {
+declare class __sveltets_Render<Datum = DataRecord | RawValue> {
     props(): ReturnType<typeof $$render<Datum>>['props'];
     events(): ReturnType<typeof $$render<Datum>>['events'];
     slots(): ReturnType<typeof $$render<Datum>>['slots'];
@@ -94,13 +168,13 @@ declare class __sveltets_Render<Datum extends DataRow> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Datum extends DataRow>(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']>> & {
+    new <Datum = DataRecord | RawValue>(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 DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum = DataRecord | RawValue>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /** The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale. */
 declare const TickX: $$IsomorphicComponent;
-type TickX<Datum extends DataRow> = InstanceType<typeof TickX<Datum>>;
+type TickX<Datum = DataRecord | RawValue> = InstanceType<typeof TickX<Datum>>;
 export default TickX;

package/dist/marks/TickY.svelte

@@ -2,16 +2,17 @@
     @component 
     The TickY mark is useful for showing one-dimensional distributions along the y axis. The x axis must be a band scale.
 -->
-<script lang="ts" generics="Datum extends DataRow">
+<script lang="ts" generics="Datum = DataRecord | RawValue">
     interface TickYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** the input data array; each element becomes one horizontal tick */
         data: Datum[];
         /**
-         * the vertical position; bound to the x scale
+         * the vertical position; bound to the y scale
          */
         y?: ChannelAccessor<Datum>;
         /**
-         * the horizontal 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.
+         * 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<Datum>;
         /**
@@ -19,23 +20,21 @@
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
         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 { resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
         BaseMarkProps,
         ChannelAccessor,
-        DataRow,
-        FacetContext,
-        ConstantAccessor
+        ConstantAccessor,
+        DataRecord,
+        RawValue
     } from '../types/index.js';
     import { recordizeY } from '../index.js';
-    import { projectX, projectY } from '../helpers/scales.js';
-    import { isValid } from '../helpers/index.js';
-    import { testFilter, parseInset } from '../helpers/index.js';
+    import { parseInset } from '../helpers/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
@@ -47,7 +46,7 @@
         ...getPlotDefaults().tickY
     };
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         canvas = false,
         ...options
@@ -56,51 +55,60 @@
         ...markProps
     });
 
-    let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    let testFacet = $derived(getTestFacet());
+    let args = $derived(recordizeY({ data, ...options } as any, { withIndex: false }));
 </script>
 
 <Mark
     type="tickY"
     channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
-    {...markProps}
-    {...args}>
-    {#snippet children({ mark, usedScales, scaledData })}
+    {...markProps as any}
+    {...args as any}>
+    {#snippet children({ usedScales, scaledData })}
         {#if canvas}
-            <TickCanvas data={scaledData} options={args} {usedScales} orientation="horizontal" />
+            <TickCanvas
+                data={scaledData}
+                options={args as any}
+                {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}
+            {@const xUsesBand = usedScales.x && plot.scales.x.type === 'band'}
+            {@const xBandwidth = xUsesBand ? plot.scales.x.fn.bandwidth() : 0}
+            <g class="tick-y {className || ''}">
+                {#each scaledData as d, i (i)}
+                    {#if d.valid && d.y != null}
+                        {@const inset_ = resolveProp(args.inset, d.datum, 0)}
+                        {@const tickLength_ = Number(
+                            resolveProp(args.tickLength, d.datum, 10) ?? 10
+                        )}
+                        {@const x1 =
+                            args.x != null && d.x != null
+                                ? xUsesBand
+                                    ? d.x - xBandwidth * 0.5
+                                    : d.x
+                                : plot.options.marginLeft}
+                        {@const x2 =
+                            args.x != null && d.x != null
+                                ? xUsesBand
+                                    ? d.x + xBandwidth * 0.5
+                                    : d.x
+                                : plot.options.marginLeft + plot.facetWidth}
+                        {@const insetValue =
+                            typeof inset_ === 'number' || typeof inset_ === 'string' ? inset_ : 0}
+                        {@const inset = parseInset(insetValue, Math.abs(x2 - x1))}
+                        {@const tickOffset = x1 === x2 ? tickLength_ * 0.5 : 0}
+                        {@const xTransform = args.x == null ? d.dx : 0}
+                        {@const yTransform = d.y}
+                        <line
+                            transform="translate({xTransform}, {yTransform})"
+                            style={resolveScaledStyles(
+                                d.datum,
+                                args as any,
+                                usedScales,
+                                plot,
+                                'stroke'
+                            )}
+                            x1={x1 + inset + tickOffset}
+                            x2={x2 - inset - tickOffset} />
                     {/if}
                 {/each}
             </g>