import * as react from 'react'; import { ReactNode, HTMLAttributes, Ref } from 'react'; import { IndicatorCreate, PaneOptions, YAxisOverride, Nullable, OverlayCreate, DomPosition, VisibleRange, Crosshair, KLineData, ActionType, Chart, Options, DataLoader, PickPartial, SymbolInfo, Period, DeepPartial, Styles, Formatter, ThousandsSeparator, DecimalFold, ZoomAnchorType, ZoomAnchor, Hotkey, Layout, XAxisOverride, BarSpace, YAxisFilter, YAxis as YAxis$1, ActionCallback } from 'klinecharts'; export * from 'klinecharts'; interface UseIndicatorOptions { /** Indicator name or full creation config. */ value: string | IndicatorCreate; /** Whether to stack on existing indicators in the same pane. */ isStack?: boolean; /** Options applied to the indicator pane via `setPaneOptions`. */ pane?: Partial; /** * Y axis configuration for the indicator pane. Applied via `createYAxis` * (idempotent in KLineCharts v10). */ yAxis?: YAxisOverride; /** * Options applied to the indicator pane. * @deprecated Renamed to `pane` to match KLineCharts v10. Use `pane` instead. */ paneOptions?: Partial; } /** * Manages the lifecycle of a technical indicator. * * In KLineCharts v10, `createIndicator(value, isStack?)` no longer accepts a * separate options object: `paneId`/`yAxisId` live on the `IndicatorCreate` * value itself. This hook therefore: * 1. Creates the indicator (optionally passing a stable `paneId`/`id`). * 2. Applies `pane` to the resulting pane via `setPaneOptions`. * 3. Configures the pane's Y axis via `createYAxis` when `yAxis` is provided. * * @returns The indicator id, or `null`. */ declare function useIndicator(options: UseIndicatorOptions): Nullable; type IndicatorProps = UseIndicatorOptions; /** * Declarative indicator management as a child of ``. * Renders nothing — purely manages the indicator lifecycle. * * @example * ```tsx * * * * * ``` */ declare function Indicator(props: IndicatorProps): null; declare namespace Indicator { var displayName: string; } interface UseOverlayOptions { /** Overlay name, creation config, or an array for batch creation. */ value: string | OverlayCreate | Array; } /** * Manages the lifecycle of overlay(s) (drawing tools). * Creates on mount, removes on unmount, and overrides config on change. * * @returns The overlay ID(s), or `null`. */ declare function useOverlay(options: UseOverlayOptions): Nullable | Array>; type OverlayProps = UseOverlayOptions; /** * Declarative overlay management as a child of ``. * Renders nothing — purely manages the overlay lifecycle. * * @example * ```tsx * * * * * ``` */ declare function Overlay(props: OverlayProps): null; declare namespace Overlay { var displayName: string; } interface WidgetProps { paneId?: string; position?: DomPosition; children?: ReactNode; } /** * A declarative component that injects React elements into specific chart DOM * layers using portals. Uses `chart.getDom(paneId, position)` under the hood. * * If the target DOM node does not exist yet (e.g. an indicator pane that has * not been laid out), the component retries on the next animation frame until * it resolves the node, then renders its children into it via a portal. */ declare function Widget({ paneId, position, children }: WidgetProps): react.ReactPortal | null; interface UseYAxisOptions { /** * Y axis configuration. `createYAxis` in KLineCharts v10 is idempotent: if a * Y axis with the same `id` already exists on the pane, the call is a no-op. */ value: YAxisOverride; } /** * Manages the lifecycle of a standalone Y axis. * * KLineCharts v10 introduced explicit multi-YAxis support. This hook creates a * Y axis on mount, overrides its config when `value` changes, and removes it on * unmount. The axis is identified by a stable `useId()`-generated id so cleanup * always targets exactly the axis it created. * * @returns The Y axis id, or `null`. */ declare function useYAxis(options: UseYAxisOptions): Nullable; type YAxisProps = UseYAxisOptions; /** * Declarative Y axis management as a child of ``. * Renders nothing — purely manages the Y axis lifecycle. * * KLineCharts v10 supports multiple Y axes per pane. Use this to add an extra * axis to a pane (e.g. a secondary price scale on an indicator pane). * * @example * ```tsx * * * * ``` */ declare function YAxis(props: YAxisProps): null; declare namespace YAxis { var displayName: string; } /** * Maps each {@link ActionType} to the payload type its callback receives. * * These are derived from the values klinecharts passes to * `chart.executeAction(type, data)`: * - `onCrosshairChange` → current `Crosshair` * - `onCandleBarClick` → the clicked `KLineData` * - `onZoom` → `{ scale }` * - `onScroll` → `{ distance }` * - `onVisibleRangeChange` → current `VisibleRange` * - `onPaneDrag` → `{ paneId }` * - feature-click events → the klinecharts "feature info" object (treated as * `unknown` because klinecharts does not export the exact type). */ interface ActionPayloadMap { onZoom: { scale: number; }; onScroll: { distance: number; }; onVisibleRangeChange: VisibleRange; onCrosshairChange: Crosshair; onCandleBarClick: KLineData; onPaneDrag: { paneId: string; }; onCandleTooltipFeatureClick: unknown; onIndicatorTooltipFeatureClick: unknown; onCrosshairFeatureClick: unknown; } /** * Strongly-typed callback for a given chart action. */ type TypedActionCallback = (data: ActionPayloadMap[T]) => void; interface KLineChartProps extends Omit, "children"> { ref?: Ref; children?: ReactNode; /** Chart initialization options (applied once on mount). */ options?: Options; /** * Static data array to apply to the chart. * * The array identity is used as the effect dependency: replacing the * array re-applies the data, but mutating it in place does not. For * streaming/realtime updates prefer {@link KLineChartProps.dataLoader} * with a `subscribeBar` implementation. */ data?: KLineData[]; /** Data loader for fetching and subscribing to bar data. Calls `setDataLoader`. */ dataLoader?: DataLoader; /** Symbol info (ticker, precision). Calls `setSymbol`. */ symbol?: PickPartial; /** Time period. Calls `setPeriod`. */ period?: Period; /** Chart styles. Calls `setStyles` on change. */ styles?: string | DeepPartial; /** Locale identifier. Calls `setLocale` on change. */ locale?: string; /** IANA timezone string. Calls `setTimezone` on change. */ timezone?: string; /** Custom formatters for dates and big numbers. Calls `setFormatter`. */ formatter?: Partial; /** Thousands separator config. Calls `setThousandsSeparator`. */ thousandsSeparator?: Partial; /** Decimal fold config. Calls `setDecimalFold`. */ decimalFold?: Partial; /** Enable/disable zoom. Calls `setZoomEnabled`. */ zoomEnabled?: boolean; /** Enable/disable scroll. Calls `setScrollEnabled`. */ scrollEnabled?: boolean; /** Zoom anchor config. Calls `setZoomAnchor`. */ zoomAnchor?: ZoomAnchorType | Partial; /** Right offset distance in pixels. Calls `setOffsetRightDistance`. */ offsetRightDistance?: number; /** Maximum left offset distance. Calls `setMaxOffsetLeftDistance`. */ maxOffsetLeftDistance?: number; /** Maximum right offset distance. Calls `setMaxOffsetRightDistance`. */ maxOffsetRightDistance?: number; /** Minimum visible bar count on the left. */ leftMinVisibleBarCount?: number; /** Minimum visible bar count on the right. */ rightMinVisibleBarCount?: number; /** Width of a single bar in pixels. Calls `setBarSpace`. */ barSpace?: number; /** Hot-key configuration. Calls `setHotkey`. */ hotkey?: Partial; /** Default layout options. Calls `setLayoutOptions`. */ layoutOptions?: DeepPartial; /** Override the X axis. Calls `overrideXAxis`. */ xAxis?: XAxisOverride; /** Override the Y axis. Calls `overrideYAxis`. */ yAxis?: YAxisOverride; /** Fired once the chart instance has been created. */ onReady?: (chart: Chart) => void; /** Chart zoom event. */ onZoom?: TypedActionCallback<"onZoom">; /** * Chart scroll event (klinecharts `onScroll` action). * * Named `onChartScroll` to avoid colliding with the native DOM * `onScroll` handler that is passed through to the container element. */ onChartScroll?: TypedActionCallback<"onScroll">; /** Visible data range changed. */ onVisibleRangeChange?: TypedActionCallback<"onVisibleRangeChange">; /** Crosshair position changed. */ onCrosshairChange?: TypedActionCallback<"onCrosshairChange">; /** Candle bar clicked. */ onCandleBarClick?: TypedActionCallback<"onCandleBarClick">; /** Pane drag event. */ onPaneDrag?: TypedActionCallback<"onPaneDrag">; /** Candle tooltip feature clicked. */ onCandleTooltipFeatureClick?: TypedActionCallback<"onCandleTooltipFeatureClick">; /** Indicator tooltip feature clicked. */ onIndicatorTooltipFeatureClick?: TypedActionCallback<"onIndicatorTooltipFeatureClick">; /** Crosshair feature clicked. */ onCrosshairFeatureClick?: TypedActionCallback<"onCrosshairFeatureClick">; } declare const KLineChart: react.ForwardRefExoticComponent & react.RefAttributes> & { Indicator: typeof Indicator; Overlay: typeof Overlay; Widget: typeof Widget; YAxis: typeof YAxis; }; interface KLineChartContextValue { chart: Chart | null; } declare const KLineChartContext: react.Context; /** * Access the KlineCharts `Chart` instance from any descendant of ``. * Returns `null` before the chart has initialized. */ declare function useKLineChart(): Chart | null; /** * Subscribe to a chart action event. * Uses a stable ref-based handler to avoid re-subscribing when the callback * identity changes between renders. * * The callback is strongly typed based on the action type, so e.g. * `useChartEvent("onCrosshairChange", (crosshair) => ...)` receives a * {@link Crosshair} instead of `unknown`. * * @example * ```ts * useChartEvent("onCrosshairChange", (crosshair) => { * console.log(crosshair.x, crosshair.y); * }); * ``` */ declare function useChartEvent(type: T, callback: TypedActionCallback): void; /** * Tracks the current crosshair state. * * Returns the latest `Crosshair` (which may be `null` when the crosshair * leaves the chart) and re-renders the host component whenever it changes. * * @example * ```tsx * function CrosshairInfo() { * const crosshair = useCrosshair(); * if (!crosshair?.kLineData) return Hover the chart; * return {crosshair.kLineData.close}; * } * ``` */ declare function useCrosshair(): Crosshair | null; /** * Tracks the currently visible data range. * * Re-renders the host component whenever the visible range changes * (zoom, scroll, data load, etc.). Returns `null` before the chart has * laid out for the first time. * * @example * ```tsx * function RangeInfo() { * const range = useVisibleRange(); * return {range ? `${range.from}..${range.to}` : "—"}; * } * ``` */ declare function useVisibleRange(): VisibleRange | null; /** * Tracks the current bar spacing. * * klinecharts does not emit a dedicated "bar space changed" action, so this * hook recomputes on every visible-range change (which is fired on zoom, * resize, and data load — i.e. exactly when bar space can change) and on * chart instance change. * * @example * ```tsx * function BarSpaceInfo() { * const bs = useBarSpace(); * return {bs ? `${bs.bar}px / bar` : "—"}; * } * ``` */ declare function useBarSpace(): BarSpace | null; /** * Tracks the chart's full data list. * * Re-renders the host component whenever the data changes (initial load, * scroll-back pagination, realtime update). Returns `null` before the chart * has been initialized. The returned array is a snapshot reference; mutating * it has no effect on the chart. * * @example * ```tsx * function LastClose() { * const list = useDataList(); * const last = list?.[list.length - 1]; * return {last ? last.close : "—"}; * } * ``` */ declare function useDataList(): KLineData[] | null; /** * Reads pane options from the chart. * * - If `id` is provided, returns the options for that pane (or `null` if it * does not exist). * - Otherwise returns the array of all pane options. * * The hook re-reads on chart instance change and on visible-range change * (which is emitted whenever layout-affecting operations complete). * * @example * ```tsx * function PaneHeights() { * const panes = usePane(); * // panes is PaneOptions[] * } * * function CandlePaneHeight() { * const opts = usePane("candle"); * return {opts?.height ?? "auto"}; * } * ``` */ declare function usePane(): PaneOptions[]; declare function usePane(id: string): Nullable; /** * Tracks the chart's Y axes. * * Reads `chart.getYAxes(filter)` and re-reads on visible-range change (which * fires after axis-affecting operations such as indicator creation, axis * override, and layout). Returns an empty array before the chart initializes. * * @example * ```tsx * function AxisList() { * const axes = useYAxes({ paneId: "candle" }); * return {axes.map((a) => a.id).join(", ")}; * } * ``` */ declare function useYAxes(filter?: YAxisFilter): YAxis$1[]; /** * Subscribes `handler` to the given chart action and returns a cleanup * function that unsubscribes it. Returns a no-op when `chart` is null. * * The handler is invoked through a stable wrapper so callers can pass a * ref-stored callback without re-subscribing on every render. */ declare function subscribeChartAction(chart: Chart | null, type: ActionType, handler: ActionCallback): () => void; export { type ActionPayloadMap, type IndicatorProps, KLineChart, KLineChartContext, type KLineChartContextValue, type KLineChartProps, type OverlayProps, type TypedActionCallback, type UseIndicatorOptions, type UseOverlayOptions, type UseYAxisOptions, Widget, type WidgetProps, YAxis, type YAxisProps, subscribeChartAction, useBarSpace, useChartEvent, useCrosshair, useDataList, useIndicator, useKLineChart, useOverlay, usePane, useVisibleRange, useYAxes, useYAxis };