ts: rect mark props

gka · gka · commit 3f7bf7619820 · 2025-06-11T19:38:24.000+02:00
diff --git a/src/lib/marks/Rect.svelte b/src/lib/marks/Rect.svelte
@@ -2,22 +2,21 @@
     @component
     For arbitrary rectangles, requires quantitative x and y scales 
 -->
-<script module lang="ts">
-    export type RectMarkProps = {
-        data: DataRecord[];
-        x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RectMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            BaseRectMarkProps<Datum> {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
         interval?: number | string;
-    } & BaseMarkProps &
-        LinkableMarkProps &
-        BaseRectMarkProps;
-</script>
-
-<script lang="ts">
+        className?: string;
+    }
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { intervalX, intervalY } from '$lib/index.js';
@@ -27,7 +26,8 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        PlotDefaults
+        PlotDefaults,
+        LinkableMarkProps
     } from '../types.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
@@ -39,7 +39,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         ...options
     }: RectMarkProps = $derived({
diff --git a/src/lib/marks/RectX.svelte b/src/lib/marks/RectX.svelte
@@ -1,15 +1,16 @@
 <!-- @component
     Convenience wrapper for rectangles oriented along the x axis 
 -->
-<script module lang="ts">
-    export type RectXMarkProps = Omit<RectMarkProps, 'y'> & { stack?: Partial<StackOptions> };
-</script>
 
-<script lang="ts">
-    import Rect, { type RectMarkProps } from './Rect.svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RectXMarkProps extends Omit<ComponentProps<typeof Rect>, 'y'> {
+        stack?: Partial<StackOptions>;
+    }
+
+    import Rect from './Rect.svelte';
     import { intervalY, stackX, recordizeX } from '$lib/index.js';
-    import type { PlotContext, PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+    import type { DataRecord, PlotContext, PlotDefaults } from '../types.js';
+    import { getContext, type ComponentProps } from 'svelte';
     import type { StackOptions } from '$lib/transforms/stack';
 
     let markProps: RectXMarkProps = $props();
@@ -20,7 +21,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         stack,
         ...options
     }: RectXMarkProps = $derived({
diff --git a/src/lib/marks/RectY.svelte b/src/lib/marks/RectY.svelte
@@ -1,15 +1,14 @@
 <!-- @component
     Convenience wrapper for rectangles oriented along the x axis 
 -->
-<script module lang="ts">
-    export type RectYMarkProps = Omit<RectMarkProps, 'x'> & { stack?: Partial<StackOptions> };
-</script>
-
-<script lang="ts">
-    import Rect, { type RectMarkProps } from './Rect.svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RectYMarkProps extends Omit<ComponentProps<typeof Rect>, 'y'> {
+        stack?: Partial<StackOptions>;
+    }
+    import Rect from './Rect.svelte';
     import { intervalX, stackY, recordizeY } from '$lib/index.js';
-    import type { PlotContext, PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+    import type { DataRecord, PlotContext, PlotDefaults } from '../types.js';
+    import { getContext, type ComponentProps } from 'svelte';
     import type { StackOptions } from '$lib/transforms/stack';
 
     let markProps: RectYMarkProps = $props();
@@ -20,7 +19,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         stack,
         ...options
     }: RectYMarkProps = $derived({
