import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
import type { BaseChartProps } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
import type { RealtimeFrameHandle } from "../../realtime/types";
import { type GaugeGradientFill } from "../shared/gaugeGradient";
export interface GaugeThreshold {
    /** Upper bound of this zone (value, not percentage) */
    value: number;
    /** Color for this threshold zone */
    color: string;
    /** Optional label for the zone */
    label?: string;
}
export interface GaugeChartProps extends BaseChartProps {
    /** Current gauge value */
    value: number;
    /** Minimum scale value (default 0) */
    min?: number;
    /** Maximum scale value (default 100) */
    max?: number;
    /** Threshold zones — ordered list of { value, color, label? }. Last threshold's value should equal max. */
    thresholds?: GaugeThreshold[];
    /**
     * Arc-length gradient for the gauge band.
     *
     * The gradient is sampled along the visible filled arc from sweep start
     * toward the current value. If `fillZones` is false, the entire arc uses
     * the gradient. If `fillZones` is true, the unfilled remainder stays on
     * `backgroundColor`.
     */
    gradientFill?: GaugeGradientFill;
    /** Color of the value arc when no thresholds defined (default: theme primary) */
    color?: string;
    /** Background arc color (default: var(--semiotic-grid, #e0e0e0)) */
    backgroundColor?: string;
    /** Arc thickness as fraction of radius (0–1, default 0.3) */
    arcWidth?: number;
    /** Pixel radius for the rounded ends of each arc segment, same prop
     *  semantics as `DonutChart.cornerRadius`. Default `undefined`
     *  (sharp corners). Useful for the "pill" aesthetic where each
     *  threshold zone reads as a discrete capsule. */
    cornerRadius?: number;
    /** Show needle indicator (default true) */
    showNeedle?: boolean;
    /** Needle color (default: var(--semiotic-text, #333)) */
    needleColor?: string;
    /** Center content — ReactNode rendered at the gauge center. If not provided, shows the value. */
    centerContent?: React.ReactNode | ((value: number, min: number, max: number) => React.ReactNode);
    /** Format function for the default center value label */
    valueFormat?: (value: number) => string;
    /** Show scale tick labels at min, max, and threshold boundaries (default true) */
    showScaleLabels?: boolean;
    /** Arc sweep angle in degrees (default 240 — leaves a 120° gap at the bottom) */
    sweep?: number;
    /** When false, all threshold zones render at full color and only the needle indicates value. Default true (zones fill up to value). */
    fillZones?: boolean;
    /** Enable tooltip on arc segments */
    tooltip?: TooltipProp;
    /** Annotations — supports threshold markers via standard annotation system */
    annotations?: Datum[];
    /** Enable hover interaction (default true) */
    enableHover?: boolean;
    /** frameProps escape hatch */
    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
}
/**
 * GaugeChart - A single-value indicator with an optional needle and threshold zones.
 *
 * Pass a `value` between `min` and `max`; threshold zones color the arc
 * by status. Useful for KPI tiles, health-check displays, and scorecards.
 *
 * @example
 * ```tsx
 * // Simple gauge with threshold zones
 * <GaugeChart
 *   value={72}
 *   min={0}
 *   max={100}
 *   thresholds={[
 *     { value: 60, color: "#22c55e", label: "ok" },
 *     { value: 80, color: "#f59e0b", label: "warn" },
 *     { value: 100, color: "#ef4444", label: "crit" },
 *   ]}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Half-sweep gauge with center value text
 * <GaugeChart
 *   value={42}
 *   min={0}
 *   max={100}
 *   sweep={Math.PI}
 *   arcWidth={20}
 *   centerContent={<text fontSize={32}>42%</text>}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Hide needle, fill the zone-of-current-value instead
 * <GaugeChart
 *   value={87}
 *   thresholds={[{ value: 50, color: "#22c55e" }, { value: 90, color: "#f59e0b" }, { value: 100, color: "#ef4444" }]}
 *   showNeedle={false}
 *   fillZones
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Rounded segment ends — same `cornerRadius` semantics as DonutChart.
 * // Each threshold zone reads as a capsule with the others.
 * <GaugeChart
 *   value={65}
 *   thresholds={[
 *     { value: 60, color: "#22c55e" },
 *     { value: 80, color: "#f59e0b" },
 *     { value: 100, color: "#ef4444" },
 *   ]}
 *   cornerRadius={6}
 * />
 * ```
 */
export declare const GaugeChart: {
    (props: GaugeChartProps & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
