ts: export tick marks prop types

gka · gka · commit 6022452f5687 · 2025-05-26T18:27:42.000+02:00
diff --git a/src/lib/marks/TickX.svelte b/src/lib/marks/TickX.svelte
@@ -1,3 +1,27 @@
+<!-- 
+    @component 
+    The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale.
+-->
+<script module lang="ts">
+    export type TickXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        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;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -17,25 +41,6 @@
     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 }));
diff --git a/src/lib/marks/TickY.svelte b/src/lib/marks/TickY.svelte
@@ -1,3 +1,27 @@
+<!-- 
+    @component 
+    The TickY mark is useful for showing one-dimensional distributions along the y axis. The x axis must be a band scale.
+-->
+<script module lang="ts">
+    export type TickYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        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;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -18,25 +42,6 @@
     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 }));
