import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
import type { LegendInteractionMode } from "../shared/hooks";
import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
import type { RealtimeFrameHandle } from "../../realtime/types";
import { type RegressionProp } from "../shared/regressionUtils";
/**
 * BarChart component props
 */
export interface BarChartProps<TDatum extends Datum = Datum> extends BaseChartProps {
    /**
     * Array of data rows. Each row should have a category and a numeric value.
     * Omit when using the push API.
     * @example
     * ```ts
     * [{ region: "EMEA", revenue: 120 }, { region: "Americas", revenue: 85 }]
     * ```
     */
    data?: TDatum[];
    /**
     * Field name or function returning the category for each row.
     * @default "category"
     */
    categoryAccessor?: ChartAccessor<TDatum, string>;
    /**
     * Field name or function returning the bar value.
     * @default "value"
     */
    valueAccessor?: ChartAccessor<TDatum, number>;
    /**
     * Bar direction. Horizontal puts categories on the y-axis; usually needs
     * a wider left margin to fit the category labels.
     * @default "vertical"
     */
    orientation?: "vertical" | "horizontal";
    /** Label rendered next to the category axis. */
    categoryLabel?: string;
    /** Label rendered next to the value axis. */
    valueLabel?: string;
    /** Custom formatter for value-axis ticks and tooltip values. */
    valueFormat?: (d: number | string) => string;
    /**
     * Field or function that determines bar color. Defaults to a single
     * color when omitted. Setting `colorBy` also enables the legend.
     */
    colorBy?: ChartAccessor<TDatum, string>;
    /**
     * Color scheme for `colorBy`. Either a d3 scheme name (`"category10"`,
     * `"set2"`, etc.) or an explicit array of colors. Falls back to the
     * theme's categorical palette when omitted.
     */
    colorScheme?: string | string[];
    /** Category ordering. `false` (default) = insertion order. `"asc"` /
     *  `"desc"` sorts by total value. `"auto"` preserves insertion order
     *  while streaming and falls through to value-desc on static data.
     *  `true` = value-desc regardless of source. Custom comparator functions
     *  receive category name strings (not row objects) and run against
     *  the category list on the axis. */
    sort?: boolean | "asc" | "desc" | "auto" | ((a: string, b: string) => number);
    barPadding?: number;
    /** Rounded top corner radius in pixels. Only the end away from the baseline is rounded. */
    roundedTop?: number;
    /**
     * Gradient fill from the bar's tip (opposite the baseline) toward its base.
     * - `true` — default opacity fade (80% → 5% of the resolved fill color).
     * - `{ topOpacity, bottomOpacity }` — explicit opacity stops on the resolved fill.
     * - `{ colorStops: [{offset, color}, ...] }` — arbitrary multi-color gradient.
     *
     * Direction follows the bar's orientation (vertical/horizontal) and sign
     * (positive/negative bars). Same API as `AreaChart.gradientFill`.
     * @default false
     */
    gradientFill?: boolean | {
        topOpacity: number;
        bottomOpacity: number;
    } | {
        colorStops: Array<{
            offset: number;
            color: string;
        }>;
    };
    /** When true, adds padding below the 0 baseline. Default false (bars flush with axis). */
    baselinePadding?: boolean;
    enableHover?: boolean;
    showGrid?: boolean;
    showCategoryTicks?: boolean;
    showLegend?: boolean;
    legendInteraction?: LegendInteractionMode;
    legendPosition?: "right" | "left" | "top" | "bottom";
    tooltip?: TooltipProp;
    annotations?: Datum[];
    /**
     * Overlay a regression line through the bar tops. Accepts `true`
     * (linear), a method name (`"linear"` | `"polynomial"` | `"loess"`),
     * or a full `RegressionConfig`. The regression treats categories
     * as a numeric category-index for fit input; pixel positions are
     * resolved through the band scale, so the line passes through bar
     * centers. Best for ordered categories (months, quarters, score
     * buckets) where a slope reads as a meaningful trend. Sugar over
     * the `trend` annotation.
     */
    regression?: RegressionProp;
    /** Custom formatter for category tick labels */
    categoryFormat?: CategoryFormatFn;
    /** Fixed value-axis domain `[min, max]`. Either bound may be `undefined` to leave that side data-derived. */
    valueExtent?: [number | undefined, number | undefined] | [number];
    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
}
/**
 * BarChart - Visualize categorical data with vertical or horizontal bars.
 *
 * One bar per category. For multiple values per category use
 * {@link StackedBarChart} (stacked segments) or {@link GroupedBarChart}
 * (side-by-side bars).
 *
 * @example
 * ```tsx
 * // Simple bar chart
 * <BarChart
 *   data={[
 *     { region: "EMEA", revenue: 120 },
 *     { region: "Americas", revenue: 85 },
 *     { region: "APAC", revenue: 60 },
 *   ]}
 *   categoryAccessor="region"
 *   valueAccessor="revenue"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Color by category, sorted descending by value
 * <BarChart
 *   data={data}
 *   categoryAccessor="region"
 *   valueAccessor="revenue"
 *   colorBy="region"
 *   sort="desc"
 *   showLegend
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Horizontal orientation — usually wants extra left margin for labels
 * <BarChart
 *   data={data}
 *   categoryAccessor="region"
 *   valueAccessor="revenue"
 *   orientation="horizontal"
 *   margin={{ left: 120 }}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Gradient fill from bar tip toward baseline
 * <BarChart
 *   data={data}
 *   categoryAccessor="region"
 *   valueAccessor="revenue"
 *   color="steelblue"
 *   gradientFill
 *   roundedTop={4}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Push API — omit `data`, mutate via ref
 * const ref = useRef<RealtimeFrameHandle>(null)
 * useEffect(() => {
 *   ref.current?.push({ region: "EMEA", revenue: 120 })
 * }, [])
 *
 * <BarChart
 *   ref={ref}
 *   categoryAccessor="region"
 *   valueAccessor="revenue"
 * />
 * ```
 *
 * @remarks
 * Wraps {@link StreamOrdinalFrame} with sensible bar defaults. For custom
 * marks, advanced annotations, or non-standard layouts, pass through via
 * `frameProps` or use StreamOrdinalFrame directly. See
 * {@link https://semiotic.nteract.io/charts/bar-chart} for live demos.
 */
export declare const BarChart: {
    <TDatum extends Datum = Datum>(props: BarChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
