/**
 * BumpChart — how a set of things ranked against each other over time.
 *
 * ```tsx
 * <BumpChart data={standings} xDataKey="week" defaultHighlight="harbour">
 *   <BumpChart.Grid />
 *   <BumpChart.Line dataKey="harbour" label="Harbour" />
 *   <BumpChart.Line dataKey="northside" label="Northside" />
 *   <BumpChart.YAxis />
 *   <BumpChart.XAxis />
 *   <BumpChart.Labels />
 *   <BumpChart.Tooltip />
 * </BumpChart>
 * ```
 *
 * ## Positions, not values
 *
 * The y-axis is the rank, so the rows are evenly spaced whatever the gap
 * between the underlying scores. That is the point of the chart: who passed
 * whom, and when. A line chart of the same scores answers how far apart they
 * were, and loses the order wherever two lines run close together.
 *
 * Pass the ranks directly, or pass the scores with `values="score"` and each
 * column is ranked for you, highest first. `bumpRanks` is exported so a header
 * or a table beside the chart can read the same order the chart drew.
 *
 * ## One line at a time
 *
 * Past three or four series, every line in its own colour is a tangle. The
 * chart reads best with one line picked out: `highlight` draws that one in its
 * colour and on top, and the rest in a muted grey. Tapping a name in
 * `BumpChart.Labels` picks that line, and tapping it again clears it.
 */
import { type ReactNode } from 'react';
import { type ViewProps } from 'react-native';
import { type ChartAccessibilityProps } from '../../primitives/chart-accessibility.js';
import { type SeriesColorIndex } from '../../utils/chart.js';
type Layer = 'svg' | 'series' | 'overlay' | 'header';
export type BumpChartStatus = 'loading' | 'ready';
export type BumpChartDatum = Record<string, string | number | null | undefined>;
/** Ranks per series key, one entry per row. `null` where a series has none. */
export type BumpRanks = Record<string, (number | null)[]>;
/**
 * Each series' rank in every row.
 *
 * With `values: 'rank'` the rows already hold ranks and they are only
 * validated. With `values: 'score'` each row is ranked highest first; a tie
 * keeps the order the keys are passed in, so two equal scores never draw on
 * top of each other.
 */
export declare function bumpRanks(data: BumpChartDatum[], keys: string[], options?: {
    values?: 'rank' | 'score';
}): BumpRanks;
/** The row under the scrub, and which line is picked out. */
export declare function useBumpChart(): {
    activeIndex: number;
    activePoint: BumpChartDatum | null;
    xDataKey: string;
    ranks: BumpRanks;
    highlight: string | null;
    setHighlight: (key: string | null) => void;
};
export interface BumpChartProps extends ViewProps, ChartAccessibilityProps<BumpChartDatum> {
    className?: string;
    /** The rows. Each one is a column: a week, a round, a release. */
    data: BumpChartDatum[];
    /** Key holding the column's label. */
    xDataKey?: string;
    /**
     * What the series columns hold. `rank` (the default) takes them as places,
     * `1` at the top. `score` ranks every row for you, highest first.
     */
    values?: 'rank' | 'score';
    /**
     * The series drawn in its colour and on top, with the rest muted. `null`
     * picks none, and every line keeps its own colour. Controlled — pair it with
     * `onHighlightChange`.
     */
    highlight?: string | null;
    /** The series picked out on first render, when `highlight` is not passed. */
    defaultHighlight?: string | null;
    /** Called when a name in `BumpChart.Labels` is tapped. */
    onHighlightChange?: (key: string | null) => void;
    /**
     * `loading` hides the lines and shows `BumpChart.Skeleton` if there is one.
     * The lines are revealed when it turns `ready`.
     */
    status?: BumpChartStatus;
    /** Width ÷ height. */
    aspectRatio?: number;
    /** Milliseconds for the reveal on mount. */
    animationDuration?: number;
    /** Milliseconds for the lines to move to new places when the data changes. */
    morphDuration?: number;
    /**
     * The column under the scrub as it moves, and `-1`/`null` when it lifts.
     * Fires when the index changes, not per frame.
     */
    onActiveIndexChange?: (index: number, datum: BumpChartDatum | null) => void;
    /** Drop the axis padding, for a chart with no axes. */
    compact?: boolean;
    children?: ReactNode;
}
/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
export interface BumpChartHandle {
    replay: () => void;
}
export interface BumpChartGridProps {
    /** A guide down every column. */
    vertical?: boolean;
    /** A guide across every rank. */
    horizontal?: boolean;
    color?: string;
    dashArray?: string;
    opacity?: number;
}
/** Guides down each column, so a dot can be read against the label below it. */
declare function BumpChartGrid({ vertical, horizontal, color, dashArray, opacity, }: BumpChartGridProps): import("react").JSX.Element;
declare namespace BumpChartGrid {
    var displayName: string;
    var layer: Layer;
}
export interface BumpChartLineProps {
    /** Column in the data holding this series' rank, or its score with `values="score"`. */
    dataKey: string;
    /** The name shown by `Labels`, the tooltip and the legend. Defaults to `dataKey`. */
    label?: string;
    /** Explicit colour. Defaults to the `--color-chart-*` token for `colorIndex`. */
    color?: string;
    /** Which of the five chart tokens to take. */
    colorIndex?: SeriesColorIndex;
    /** Thickness of the line. The picked-out line is drawn one point thicker. */
    strokeWidth?: number;
    /** Draw a dot at every column. */
    showDots?: boolean;
}
/**
 * One series. It draws nothing itself: the lines are drawn together, so the
 * one picked out can be drawn last and sit on top of every crossing.
 */
declare function BumpChartLine({ dataKey, label, color, colorIndex, strokeWidth, showDots, }: BumpChartLineProps): null;
declare namespace BumpChartLine {
    var displayName: string;
    var layer: Layer;
    var line: true;
}
export interface BumpChartSkeletonProps {
    /** Milliseconds for one pass of the sweep. */
    duration?: number;
    color?: string;
    /** How many rank rows to stand in for. */
    rows?: number;
}
/**
 * The loading state: a thin bar on every rank row with a highlight travelling
 * across them. Flat, so it says where the lines will be and nothing about
 * where they go.
 */
declare function BumpChartSkeleton({ duration, color, rows: rowsProp }: BumpChartSkeletonProps): import("react").JSX.Element | null;
declare namespace BumpChartSkeleton {
    var displayName: string;
    var layer: Layer;
}
export interface BumpChartXAxisProps {
    /** How many columns to label, spread across the run. */
    ticks?: number;
    format?: (datum: BumpChartDatum, index: number) => string;
    className?: string;
}
/** The column labels. Real text, so they follow the theme's font and text scaling. */
declare function BumpChartXAxis({ ticks, format, className }: BumpChartXAxisProps): import("react").JSX.Element;
declare namespace BumpChartXAxis {
    var displayName: string;
    var layer: Layer;
}
export interface BumpChartYAxisProps {
    /** Format a rank. Defaults to `#1`, `#2`… */
    format?: (rank: number) => string;
    className?: string;
}
/** The ranks down the side, one on every row. */
declare function BumpChartYAxis({ format, className }: BumpChartYAxisProps): import("react").JSX.Element;
declare namespace BumpChartYAxis {
    var displayName: string;
    var layer: Layer;
    var axis: "y";
}
export interface BumpChartLabelsProps {
    /** Room kept to the right of the plot for the names. Longer names are cut short. */
    width?: number;
    /** Let a tap on a name pick that line out, and a second tap clear it. */
    pressable?: boolean;
    className?: string;
}
/**
 * Each series' name beside its last point, so the lines can be told apart
 * without a legend to look across to. The names move with their lines when
 * the data changes.
 */
declare function BumpChartLabels({ pressable, className }: BumpChartLabelsProps): import("react").JSX.Element | null;
declare namespace BumpChartLabels {
    var displayName: string;
    var layer: Layer;
    var labels: true;
}
export interface BumpChartTooltipProps {
    color?: string;
    /** Format a rank in the readout. Defaults to `#1`, `#2`… */
    formatRank?: (rank: number) => string;
    /** Format the readout's heading from the row. Defaults to the value at xDataKey. */
    formatX?: (datum: BumpChartDatum) => string;
    className?: string;
}
/**
 * A scrub across the columns, and a readout listing every series in the order
 * it stood at the column under the finger.
 */
declare function BumpChartTooltip({ color, formatRank, formatX, className }: BumpChartTooltipProps): import("react").JSX.Element | null;
declare namespace BumpChartTooltip {
    var displayName: string;
    var layer: Layer;
}
export interface BumpChartLegendProps extends ViewProps {
    className?: string;
}
/** A swatch and a name per series, in declaration order. */
declare function BumpChartLegend({ className, ...props }: BumpChartLegendProps): import("react").JSX.Element | null;
declare namespace BumpChartLegend {
    var displayName: string;
    var layer: Layer;
}
export interface BumpChartHeaderProps extends ViewProps {
    className?: string;
    /** Small line above the value — what the chart is of. */
    title?: string;
    /** The readout. The largest thing on the card, and the first thing read. */
    value?: string;
    /** One muted line under the value — a period, a comparison, a total. */
    caption?: string;
    /** Draw a swatch and a name per series along the trailing edge. */
    legend?: boolean;
    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
    children?: ReactNode;
}
/**
 * The strip above the plot: what the chart is of and what it currently reads.
 * The value is not derived here — pass the formatted string, from
 * `onActiveIndexChange` or `onHighlightChange` if it follows the chart.
 */
declare function BumpChartHeader({ className, title, value, caption, legend, children, ...props }: BumpChartHeaderProps): import("react").JSX.Element;
declare namespace BumpChartHeader {
    var displayName: string;
    var layer: Layer;
}
export declare const BumpChart: import("react").ForwardRefExoticComponent<BumpChartProps & import("react").RefAttributes<BumpChartHandle>> & {
    Header: typeof BumpChartHeader;
    Grid: typeof BumpChartGrid;
    Line: typeof BumpChartLine;
    Skeleton: typeof BumpChartSkeleton;
    XAxis: typeof BumpChartXAxis;
    YAxis: typeof BumpChartYAxis;
    Labels: typeof BumpChartLabels;
    Tooltip: typeof BumpChartTooltip;
    Legend: typeof BumpChartLegend;
};
export {};
//# sourceMappingURL=index.d.ts.map