rumble-charts/types/Ticks.d.ts

Truly declarative React charts components

import type { ReactElement, ReactNode } from 'react';
import type { GraphicProps, Size, Style } from './types';
export declare type TicksDefinition = {
    maxTicks?: number;
    minDistance?: number;
    distance?: number;
};
export declare type Tick = Partial<{
    x: number;
    y: number;
    label: ReactNode | (() => ReactNode);
    labelStyle: Style;
    labelAttributes: Record<string, any>;
    lineStyle: Style;
    lineAttributes: Record<string, any>;
    lineLength: Size;
    lineOffset: Size;
}>;
export declare type TicksConfig = number | TicksDefinition | Array<number | Tick>;
export declare type TickParams = {
    index: number;
    ticksLength: number;
    tick: Tick;
    props: TicksProps;
};
export declare type TicksProps = {
    axis?: 'x' | 'y';
    position?: 'top' | 'bottom' | 'left' | 'right';
    ticks?: TicksConfig | ((props: TicksProps) => number | TicksConfig);
    tickVisible?: boolean | ((params: TickParams) => boolean);
    tickAttributes?: Record<string, any> | ((params: TickParams) => Record<string, any>);
    tickStyle?: Style | ((params: TickParams) => Style);
    label?: ReactNode | ((params: TickParams) => ReactNode);
    labelVisible?: boolean | ((params: TickParams) => boolean);
    labelAttributes?: Record<string, any> | ((params: TickParams) => Record<string, any>);
    labelStyle?: Style | ((params: TickParams) => Style);
    labelFormat?: (label: string) => ReactNode;
    lineVisible?: boolean | ((params: TickParams) => boolean);
    lineAttributes?: Record<string, any> | ((params: TickParams) => Record<string, any>);
    lineStyle?: Style | ((params: TickParams) => Style);
    lineLength?: Size | ((params: TickParams) => Size);
    lineOffset?: Size | ((params: TickParams) => Size);
} & Omit<GraphicProps, 'colors'>;
/**
 * Renders ticks (labels and lines) for axis (x and y).
 */
export declare function Ticks(props: TicksProps): ReactElement;