UNPKG

@tanstack/charts

Version:

A chart grammar for TypeScript and JavaScript. Marks consume your data directly, channels describe visual encodings, and the engine compiles them into a renderer-neutral keyed scene. TanStack's compact scales cover common numeric and categorical mappings.

30 lines (29 loc) 1.47 kB
import type { Channel, ChannelOutput, ChartKey, ChartMark, ChartMarkMotionOptions, ChartValue, VisualChannel } from './types.js'; export interface ArrowOptions<TDatum> extends ChartMarkMotionOptions<TDatum> { id?: string; x1: Channel<TDatum, ChartValue | null | undefined>; y1: Channel<TDatum, ChartValue | null | undefined>; x2: Channel<TDatum, ChartValue | null | undefined>; y2: Channel<TDatum, ChartValue | null | undefined>; z?: Channel<TDatum, ChartKey | null | undefined>; color?: Channel<TDatum, ChartKey | null | undefined>; key?: Channel<TDatum, ChartKey>; stroke?: VisualChannel<TDatum, string>; strokeOpacity?: number; strokeWidth?: number; headLength?: number; headAngle?: number; } type ArrowXOutput<TDatum, TOptions> = ChannelOutput<TDatum, TOptions extends { x1: infer T; } ? T : never, number> | ChannelOutput<TDatum, TOptions extends { x2: infer T; } ? T : never, number>; type ArrowYOutput<TDatum, TOptions> = ChannelOutput<TDatum, TOptions extends { y1: infer T; } ? T : never, number> | ChannelOutput<TDatum, TOptions extends { y2: infer T; } ? T : never, number>; /** Draws one straight directed segment per datum with a scale-independent head. */ export declare function arrow<TDatum, const TOptions extends ArrowOptions<NoInfer<TDatum>>>(source: Iterable<TDatum>, options: TOptions): ChartMark<TDatum, ArrowXOutput<TDatum, TOptions>, ArrowYOutput<TDatum, TOptions>>; export {};