ts: improve arrow prop type

gka · gka · commit 61354457c747 · 2025-06-11T19:38:46.000+02:00
diff --git a/src/lib/marks/Arrow.svelte b/src/lib/marks/Arrow.svelte
@@ -1,43 +1,40 @@
 <!-- @component
     Creates arrows with customizable heads, angles, and bending
 -->
-<script module lang="ts">
-    export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
-        data: DataRecord[];
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ArrowMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        data: Datum[];
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
-        x1: ChannelAccessor;
-        y1: ChannelAccessor;
-        x2: ChannelAccessor;
-        y2: ChannelAccessor;
+        x1: ChannelAccessor<Datum>;
+        y1: ChannelAccessor<Datum>;
+        x2: ChannelAccessor<Datum>;
+        y2: ChannelAccessor<Datum>;
         /**
          * the bend angle, in degrees; defaults to 0°; true for 22.5°
          */
-        bend?: ConstantAccessor<number> | true;
+        bend?: ConstantAccessor<number, Datum> | true;
         /**
          * the arrowhead angle, in degrees; defaults to 60°
          */
-        headAngle?: ConstantAccessor<number>;
+        headAngle?: ConstantAccessor<number, Datum>;
         /**
          * the arrowhead scale; defaults to 8
          */
-        headLength?: ConstantAccessor<number>;
+        headLength?: ConstantAccessor<number, Datum>;
         /**
          * inset at the end of the arrow (useful if the arrow points to a dot)
          */
-        insetEnd?: ConstantAccessor<number>;
+        insetEnd?: ConstantAccessor<number, Datum>;
         /**
          * inset at the start of the arrow
          */
-        insetStart?: ConstantAccessor<number>;
+        insetStart?: ConstantAccessor<number, Datum>;
         /**
          * shorthand for the two insets
          */
-        inset?: ConstantAccessor<number>;
+        inset?: ConstantAccessor<number, Datum>;
         sweep?: SweepOption;
-    };
-</script>
-
-<script lang="ts">
+    }
     import { getContext } from 'svelte';
     import type {
         PlotContext,
@@ -66,7 +63,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         ...options
     }: ArrowMarkProps = $derived({
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -229,6 +229,10 @@ export type ColorScaleOptions = ScaleOptions & {
      */
     n: number;
     interpolate: (d: any) => typeof d;
+    /**
+     * The tick format for the color scale legend.
+     */
+    tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
 };
 
 export type AxisXAnchor = 'bottom' | 'top' | 'both';
@@ -254,7 +258,7 @@ export type XScaleOptions = ScaleOptions & {
 
     labelAnchor: 'auto' | 'left' | 'center' | 'right';
 
-    tickFormat: 'auto' | string | ((d: RawValue) => string);
+    tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
 };
 
 export type YScaleOptions = ScaleOptions & {
@@ -270,7 +274,7 @@ export type YScaleOptions = ScaleOptions & {
      * add an explicit AxisY mark to your plot instead of using the implicit axes.
      */
     axis: AxisYAnchor | false;
-    tickFormat: string | ((d: RawValue) => string);
+    tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
     /**
      * rotate the axis ticks
      */
diff --git a/src/routes/examples/arrow/metro.svelte b/src/routes/examples/arrow/metro.svelte
@@ -7,7 +7,10 @@
     import { page } from '$app/state';
     import { setContext } from 'svelte';
     import { type PlotDefaults } from 'svelteplot/types';
-    let { metros } = $derived(page.data.data);
+    import type { ExamplesData } from '../types';
+    let { metros } = $derived(
+        page.data.data
+    ) as ExamplesData;
 
     setContext<Partial<PlotDefaults>>(
         'svelteplot/defaults',
@@ -18,7 +21,7 @@
         }
     );
 
-    let hl = $state(false);
+    let hl: false | (typeof metros)[0] = $state(false);
 </script>
 
 <Plot
@@ -31,7 +34,10 @@
     color={{
         label: 'Change in inequality from 1980 to 2015',
         legend: true,
-        tickFormat: '+f'
+        tickFormat: {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 1
+        }
     }}>
     <Arrow
         data={metros}
diff --git a/src/routes/examples/types.ts b/src/routes/examples/types.ts
@@ -81,6 +81,19 @@ type RiaaRow = {
     revenue: number;
 };
 
+type MetrosRow = {
+    Metro: string;
+    POP_1980: number;
+    LPOP_1980: number;
+    R90_10_1980: number;
+    POP_2015: number;
+    LPOP_2015: number;
+    R90_10_2015: number;
+    nyt_display: string;
+    state_display: string;
+    highlight: number;
+};
+
 export type ExamplesData = {
     aapl: AaplRow[];
     simpsons: SimpsonsRow[];
@@ -93,4 +106,5 @@ export type ExamplesData = {
     world: any;
     beagle: BeagleRow[];
     riaa: RiaaRow[];
+    metros: MetrosRow[];
 };
