@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) • 2.42 kB
TypeScript
import type { DotLayout } from './dot-layout.js';
import type { Channel, ChartKey, ChartMark, ChartMarkMotionOptions, ChartMarkState, ChartDotStateStyle, ChartNumericScale, ChartValue, OptionChannelOutput } from './types.js';
export interface DotOptions<TDatum> extends ChartMarkMotionOptions<TDatum> {
id?: string;
x?: Channel<TDatum, ChartValue | null | undefined>;
y?: Channel<TDatum, ChartValue | null | undefined>;
z?: Channel<TDatum, ChartKey | null | undefined>;
color?: Channel<TDatum, ChartKey | null | undefined>;
key?: Channel<TDatum, ChartKey>;
r?: number | Channel<TDatum, number | null | undefined>;
rScale?: ChartNumericScale;
fill?: string;
fillOpacity?: number;
layout?: DotLayout;
stroke?: string;
strokeOpacity?: number;
strokeWidth?: number;
states?: readonly ChartMarkState<TDatum, ChartDotStateStyle<TDatum>>[];
}
type DotOptionLayout<TOptions> = TOptions extends {
readonly layout?: infer TLayout;
} ? NonNullable<TLayout> : never;
type DotPointX<TDatum, TOptions> = [DotOptionLayout<TOptions>] extends [never] ? OptionChannelOutput<TDatum, TOptions, 'x', number> : DotOptionLayout<TOptions> extends DotLayout<'x', infer TAnchor> ? TAnchor : OptionChannelOutput<TDatum, TOptions, 'x', number>;
type DotPointY<TDatum, TOptions> = [DotOptionLayout<TOptions>] extends [never] ? OptionChannelOutput<TDatum, TOptions, 'y', number> : DotOptionLayout<TOptions> extends DotLayout<'y', infer TAnchor> ? TAnchor : OptionChannelOutput<TDatum, TOptions, 'y', number>;
type DotScaleX<TDatum, TOptions> = [DotOptionLayout<TOptions>] extends [never] ? OptionChannelOutput<TDatum, TOptions, 'x', number> : DotOptionLayout<TOptions> extends DotLayout<'x'> ? never : OptionChannelOutput<TDatum, TOptions, 'x', number>;
type DotScaleY<TDatum, TOptions> = [DotOptionLayout<TOptions>] extends [never] ? OptionChannelOutput<TDatum, TOptions, 'y', number> : DotOptionLayout<TOptions> extends DotLayout<'y'> ? never : OptionChannelOutput<TDatum, TOptions, 'y', number>;
export declare function dot<TDatum>(source: Iterable<TDatum>): ChartMark<TDatum, number, number>;
export declare function dot<TDatum, const TOptions extends DotOptions<NoInfer<TDatum>> | undefined>(source: Iterable<TDatum>, options: TOptions): ChartMark<TDatum, DotPointX<TDatum, TOptions>, DotPointY<TDatum, TOptions>, DotScaleX<TDatum, TOptions>, DotScaleY<TDatum, TOptions>>;
export {};