react-klinecharts-ui 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import { Dispatch, RefObject, ReactNode, ReactElement } from 'react';
3
- import { Period, SymbolInfo, KLineData, Chart, DeepPartial, Styles, OverlayTemplate, DataLoader, IndicatorTemplate } from 'react-klinecharts';
3
+ import { Period, SymbolInfo, KLineData, Chart, DeepPartial, Styles, OverlayTemplate, YAxisOverride, DataLoader, IndicatorTemplate } from 'react-klinecharts';
4
4
  import { OrderLineExtendData } from './extensions.cjs';
5
5
  export { DepthOverlayExtendData, DepthOverlayRow, OrderLineFontStyle, OrderLineLabelStyle, OrderLineLineStyle, OrderLineMarkStyle, OrderLinePadding, depthOverlay, indicators, orderLine, overlays, registerExtensions } from './extensions.cjs';
6
6
 
@@ -9,6 +9,63 @@ interface TerminalPeriod extends Period {
9
9
  }
10
10
  declare const DEFAULT_PERIODS: TerminalPeriod[];
11
11
 
12
+ /**
13
+ * Shared domain types for stateful feature hooks (`useAlerts`, `useMeasure`,
14
+ * `useReplay`).
15
+ *
16
+ * These live in a neutral module so they can be referenced both by the
17
+ * provider store (`KlinechartsUIState` / actions in `./types`) and by the
18
+ * hooks, without creating a circular import between the two. The hooks
19
+ * re-export them so the public API surface (consumed via the package root)
20
+ * stays unchanged.
21
+ */
22
+ type AlertCondition = "crossing_up" | "crossing_down" | "crossing";
23
+ interface Alert {
24
+ id: string;
25
+ price: number;
26
+ condition: AlertCondition;
27
+ message?: string;
28
+ triggered: boolean;
29
+ }
30
+ interface MeasurePoint {
31
+ price: number;
32
+ timestamp: number;
33
+ barIndex: number;
34
+ }
35
+ interface MeasureResult {
36
+ from: MeasurePoint;
37
+ to: MeasurePoint;
38
+ /** Absolute price difference */
39
+ priceDiff: number;
40
+ /** Percentage change from → to */
41
+ pricePercent: number;
42
+ /** Number of bars between the two points */
43
+ bars: number;
44
+ /** Time difference in milliseconds */
45
+ timeDiff: number;
46
+ }
47
+ interface MeasureState {
48
+ /** Whether measure mode is active (waiting for clicks) */
49
+ isActive: boolean;
50
+ /** First point (set after first click) */
51
+ fromPoint: MeasurePoint | null;
52
+ /** Current measurement result (null until both points are set) */
53
+ result: MeasureResult | null;
54
+ }
55
+ type ReplaySpeed = 1 | 2 | 5 | 10;
56
+ interface ReplayState {
57
+ /** Whether a replay session is active */
58
+ isReplaying: boolean;
59
+ /** Whether the replay is currently paused */
60
+ isPaused: boolean;
61
+ /** Current playback speed multiplier */
62
+ speed: ReplaySpeed;
63
+ /** Current bar index in the replay */
64
+ barIndex: number;
65
+ /** Total number of bars in the saved data */
66
+ totalBars: number;
67
+ }
68
+
12
69
  /**
13
70
  * Explicit partial symbol type — avoids `PickPartial<SymbolInfo, ...>` which
14
71
  * degenerates when SymbolInfo has an index signature `[key: string]: unknown`.
@@ -65,6 +122,46 @@ interface KlinechartsUIState {
65
122
  periods: TerminalPeriod[];
66
123
  mainIndicators: string[];
67
124
  subIndicators: Record<string, string>;
125
+ /**
126
+ * Custom Y-axis bindings for indicators, keyed by indicator id
127
+ * (`main_<name>` / `sub_<name>`), value is the bound `yAxisId`.
128
+ * Only populated for indicators explicitly bound to a secondary
129
+ * (non-default) axis via `useIndicators`. Indicators on the shared
130
+ * default axis are absent. Used to persist bindings across
131
+ * undo/redo and layout presets.
132
+ */
133
+ indicatorAxes: Record<string, string>;
134
+ /**
135
+ * Visibility overrides for indicators, keyed by indicator id
136
+ * (`main_<name>` / `sub_<name>`), value is whether the indicator is shown.
137
+ * Mirrors the `visible` flag held inside klinecharts so `useIndicators` can
138
+ * expose a reactive getter (the chart instance has no React-friendly read
139
+ * path). Only populated for indicators whose visibility has been toggled
140
+ * away from the default; an absent key means visible (`true`). Updated by
141
+ * `setIndicatorVisible` and the collapse/expand helpers, and rebuilt when a
142
+ * layout preset is restored so the mirror never drifts from the chart.
143
+ */
144
+ indicatorVisibility: Record<string, boolean>;
145
+ /**
146
+ * Price alerts (`useAlerts`). Lives in the shared store rather than per-hook
147
+ * local state so every consumer (toolbar, list panel, status bar, sound
148
+ * trigger) observes one synchronized list. The crossing poller and the
149
+ * `onAlertTriggered` listener are owned by the provider, not the hook.
150
+ */
151
+ alerts: Alert[];
152
+ /**
153
+ * Measure-tool state (`useMeasure`). Shared so the toolbar toggle and the
154
+ * result readout panel stay in sync regardless of where each is mounted.
155
+ */
156
+ measure: MeasureState;
157
+ /**
158
+ * Historical-replay control state (`useReplay`). Shared so play/pause/step
159
+ * controls in different components drive one session. The playback interval
160
+ * and data buffers are owned by the provider (see the `replay*Ref` fields on
161
+ * the dispatch value), guaranteeing a single timer no matter how many hook
162
+ * instances are mounted.
163
+ */
164
+ replay: ReplayState;
68
165
  styles: DeepPartial<Styles> | undefined;
69
166
  screenshotUrl: string | null;
70
167
  }
@@ -92,6 +189,21 @@ type KlinechartsUIAction = {
92
189
  } | {
93
190
  type: "SET_SUB_INDICATORS";
94
191
  indicators: Record<string, string>;
192
+ } | {
193
+ type: "SET_INDICATOR_AXES";
194
+ axes: Record<string, string>;
195
+ } | {
196
+ type: "SET_INDICATOR_VISIBILITY";
197
+ visibility: Record<string, boolean>;
198
+ } | {
199
+ type: "SET_ALERTS";
200
+ alerts: Alert[];
201
+ } | {
202
+ type: "SET_MEASURE";
203
+ measure: Partial<MeasureState>;
204
+ } | {
205
+ type: "SET_REPLAY";
206
+ replay: Partial<ReplayState>;
95
207
  } | {
96
208
  type: "SET_STYLES";
97
209
  styles: DeepPartial<Styles> | undefined;
@@ -115,6 +227,20 @@ interface KlinechartsUIDispatchValue {
115
227
  fullscreenContainerRef: RefObject<HTMLElement | null>;
116
228
  /** Ref populated by useUndoRedo; other hooks call it to record actions. */
117
229
  undoRedoListenerRef: RefObject<UndoRedoListener | null>;
230
+ /**
231
+ * Listener set by `useAlerts.onAlertTriggered`; invoked by the provider-owned
232
+ * crossing poller when an alert fires. Last writer wins (one active listener).
233
+ */
234
+ alertTriggeredListenerRef: RefObject<((alert: Alert) => void) | null>;
235
+ /**
236
+ * Provider-owned replay resources, shared across every `useReplay` instance
237
+ * so there is exactly one playback timer and one data buffer. The hook reads
238
+ * and writes these instead of its own refs; the provider clears the interval
239
+ * on unmount.
240
+ */
241
+ replayIntervalRef: RefObject<ReturnType<typeof setInterval> | null>;
242
+ replaySavedDataRef: RefObject<KLineData[]>;
243
+ replayIndexRef: RefObject<number>;
118
244
  }
119
245
  /** Combined context value returned by `useKlinechartsUI()`. */
120
246
  interface KlinechartsUIContextValue extends KlinechartsUIDispatchValue {
@@ -175,6 +301,23 @@ declare function useSymbolSearch(debounceMs?: number): UseSymbolSearchReturn;
175
301
  interface IndicatorInfo {
176
302
  name: string;
177
303
  isActive: boolean;
304
+ /**
305
+ * Whether the indicator is currently visible on the chart. Defaults to
306
+ * `true`; only `false` after the indicator has been hidden via
307
+ * `setIndicatorVisible` or `collapseSubIndicator`. Meaningful only when
308
+ * `isActive` is `true` (inactive indicators are always reported `true`).
309
+ */
310
+ visible: boolean;
311
+ }
312
+ /** Options accepted when adding an indicator. */
313
+ interface AddIndicatorOptions {
314
+ /**
315
+ * Bind the indicator to a custom Y-axis (klinecharts v10 multiple y-axes).
316
+ * Provide a stable `id` to create/share a secondary axis; e.g.
317
+ * `{ id: "rsi_axis", position: "left" }`. Omit to use the pane's default
318
+ * (shared) axis.
319
+ */
320
+ yAxis?: YAxisOverride;
178
321
  }
179
322
  interface UseIndicatorsReturn {
180
323
  mainIndicators: IndicatorInfo[];
@@ -183,15 +326,22 @@ interface UseIndicatorsReturn {
183
326
  activeSubIndicators: Record<string, string>;
184
327
  availableMainIndicators: string[];
185
328
  availableSubIndicators: string[];
186
- addMainIndicator: (name: string) => void;
329
+ addMainIndicator: (name: string, options?: AddIndicatorOptions) => void;
187
330
  removeMainIndicator: (name: string) => void;
188
- addSubIndicator: (name: string) => void;
331
+ addSubIndicator: (name: string, options?: AddIndicatorOptions) => void;
189
332
  removeSubIndicator: (name: string) => void;
190
333
  toggleMainIndicator: (name: string) => void;
191
334
  toggleSubIndicator: (name: string) => void;
192
335
  moveToMain: (name: string) => void;
193
336
  moveToSub: (name: string) => void;
194
337
  setIndicatorVisible: (name: string, isMain: boolean, visible: boolean) => void;
338
+ /**
339
+ * Read whether an indicator is currently visible. Returns `true` for the
340
+ * default (un-toggled) state and for inactive indicators. This is the
341
+ * reactive read counterpart to `setIndicatorVisible` — UI no longer needs to
342
+ * track visibility locally or reach into the chart instance.
343
+ */
344
+ isIndicatorVisible: (name: string, isMain: boolean) => boolean;
195
345
  updateIndicatorParams: (name: string, paneId: string, params: number[]) => void;
196
346
  getIndicatorParams: (name: string) => {
197
347
  label: string;
@@ -207,6 +357,28 @@ interface UseIndicatorsReturn {
207
357
  isSubIndicatorCollapsed: (name: string) => boolean;
208
358
  /** Reorder a sub-indicator pane up or down relative to other sub-indicators. */
209
359
  reorderSubIndicator: (name: string, direction: "up" | "down") => void;
360
+ /**
361
+ * Custom Y-axis bindings, keyed by indicator id (`main_<name>` /
362
+ * `sub_<name>`). Only contains indicators bound to a secondary axis.
363
+ */
364
+ indicatorAxes: Record<string, string>;
365
+ /** Get the custom `yAxisId` an indicator is bound to, or `undefined` for the default axis. */
366
+ getIndicatorAxis: (name: string, isMain: boolean) => string | undefined;
367
+ /**
368
+ * Visibility overrides keyed by indicator id (`main_<name>` / `sub_<name>`).
369
+ * Only contains indicators hidden away from the default; an absent key means
370
+ * visible. Mirror of the provider state, exposed for layout-preset
371
+ * persistence and direct rendering.
372
+ */
373
+ indicatorVisibility: Record<string, boolean>;
374
+ /**
375
+ * Rebind an existing indicator to a different Y-axis. Because klinecharts v10
376
+ * `overrideIndicator` cannot change axis binding, this removes and recreates
377
+ * the indicator (preserving calc params, styles and visibility).
378
+ * Pass `yAxis` to bind to a secondary axis, or omit it to return the
379
+ * indicator to the pane's default (shared) axis.
380
+ */
381
+ bindIndicatorToNewAxis: (name: string, isMain: boolean, yAxis?: YAxisOverride) => void;
210
382
  }
211
383
  declare function useIndicators(): UseIndicatorsReturn;
212
384
 
@@ -418,6 +590,8 @@ interface ChartLayoutState {
418
590
  calcParams: any[];
419
591
  visible: boolean;
420
592
  styles?: any;
593
+ /** Custom Y-axis the indicator is bound to (klinecharts v10 multiple y-axes). */
594
+ yAxisId?: string;
421
595
  }>;
422
596
  drawings: Array<{
423
597
  name: string;
@@ -522,14 +696,6 @@ interface UseCrosshairReturn {
522
696
  }
523
697
  declare function useCrosshair(): UseCrosshairReturn;
524
698
 
525
- type AlertCondition = "crossing_up" | "crossing_down" | "crossing";
526
- interface Alert {
527
- id: string;
528
- price: number;
529
- condition: AlertCondition;
530
- message?: string;
531
- triggered: boolean;
532
- }
533
699
  interface UseAlertsReturn {
534
700
  alerts: Alert[];
535
701
  addAlert: (price: number, condition: AlertCondition, message?: string) => string;
@@ -537,6 +703,15 @@ interface UseAlertsReturn {
537
703
  clearAlerts: () => void;
538
704
  onAlertTriggered: (callback: (alert: Alert) => void) => void;
539
705
  }
706
+ /**
707
+ * Headless hook for price-crossing alerts.
708
+ *
709
+ * The alert list lives in the shared provider store, and the 1s crossing
710
+ * poller + the `onAlertTriggered` listener are owned by the provider. This
711
+ * means several `useAlerts()` instances (toolbar, list panel, sound trigger)
712
+ * observe and mutate one synchronized list and share a single poller — they no
713
+ * longer drift apart or each spawn their own interval.
714
+ */
540
715
  declare function useAlerts(): UseAlertsReturn;
541
716
 
542
717
  type ExportFormat = "csv" | "json";
@@ -563,7 +738,6 @@ interface UseWatchlistReturn {
563
738
  }
564
739
  declare function useWatchlist(): UseWatchlistReturn;
565
740
 
566
- type ReplaySpeed = 1 | 2 | 5 | 10;
567
741
  interface UseReplayReturn {
568
742
  /** Whether a replay session is active */
569
743
  isReplaying: boolean;
@@ -594,8 +768,13 @@ interface UseReplayReturn {
594
768
  * Headless hook for historical data replay (bar-by-bar playback).
595
769
  *
596
770
  * Loads the current chart data, clears the chart, then progressively adds
597
- * bars back one at a time at the configured speed. Useful for backtesting
598
- * and reviewing price action.
771
+ * bars back one at a time at the configured speed.
772
+ *
773
+ * Replay control state lives in the shared provider store and the playback
774
+ * interval + data buffers are owned by the provider (accessed through stable
775
+ * refs). This guarantees a single playback session even when `useReplay()` is
776
+ * mounted in several components (e.g. toolbar + bottom controls + status bar):
777
+ * starting in one and stepping in another drives the same timer and buffer.
599
778
  */
600
779
  declare function useReplay(): UseReplayReturn;
601
780
 
@@ -627,23 +806,6 @@ interface UseCompareReturn {
627
806
  */
628
807
  declare function useCompare(): UseCompareReturn;
629
808
 
630
- interface MeasurePoint {
631
- price: number;
632
- timestamp: number;
633
- barIndex: number;
634
- }
635
- interface MeasureResult {
636
- from: MeasurePoint;
637
- to: MeasurePoint;
638
- /** Absolute price difference */
639
- priceDiff: number;
640
- /** Percentage change from → to */
641
- pricePercent: number;
642
- /** Number of bars between the two points */
643
- bars: number;
644
- /** Time difference in milliseconds */
645
- timeDiff: number;
646
- }
647
809
  interface UseMeasureReturn {
648
810
  /** Whether measure mode is active (waiting for clicks) */
649
811
  isActive: boolean;
@@ -662,7 +824,10 @@ interface UseMeasureReturn {
662
824
  * Headless hook for measuring distance/time/percentage between two points.
663
825
  *
664
826
  * Activates measure mode, captures two clicks on the chart via overlay
665
- * interaction, then computes price diff, %, bar count, and time diff.
827
+ * interaction, then computes price diff, %, bar count, and time diff. The
828
+ * measure state (active/from/result) lives in the shared provider store, so a
829
+ * toolbar toggle and a separate result-readout panel stay in sync no matter
830
+ * where each is mounted.
666
831
  */
667
832
  declare function useMeasure(): UseMeasureReturn;
668
833
 
@@ -861,4 +1026,4 @@ declare const superTrend: IndicatorTemplate;
861
1026
 
862
1027
  declare const vwap: IndicatorTemplate;
863
1028
 
864
- export { type Alert, type AlertCondition, type Annotation, CANDLE_TYPES, COMPARE_RULES, type CandleTypeItem, type CandleTypeOption, type ChartLayoutState, type CompareRule, type CompareSymbol, type CrosshairBarData, DEFAULT_PERIODS, DRAWING_CATEGORIES, type Datafeed, type DrawingCategoryItem, type DrawingTool, type DrawingToolCategory, type DrawingToolItem, type ExportFormat, INDICATOR_PARAMS, type IndicatorDefinition, type IndicatorInfo, type IndicatorParamConfig, type KlinechartsUIAction, type KlinechartsUIContextValue, KlinechartsUIDispatchContext, type KlinechartsUIDispatchValue, type KlinechartsUIOptions, KlinechartsUIProvider, type KlinechartsUISettingsState, type KlinechartsUIState, KlinechartsUIStateContext, type LayoutEntry, MAIN_INDICATORS, type MagnetMode, type MeasurePoint, type MeasureResult, OrderLineExtendData, type OrderLineOptions, PRICE_AXIS_TYPES, type PartialSymbolInfo, type PriceAxisType, type ReplaySpeed, SUB_INDICATORS, type ScriptPlacement, TA, TIMEZONES, TOOLTIP_SHOW_RULES, type TerminalPeriod, type TimezoneItem, type TimezoneOption, type TooltipShowRule, type UndoRedoAction, type UndoRedoActionType, type UseAlertsReturn, type UseAnnotationsReturn, type UseCompareReturn, type UseCrosshairReturn, type UseDataExportReturn, type UseDrawingToolsReturn, type UseFullscreenReturn, type UseIndicatorsReturn, type UseKlinechartsUILoadingReturn, type UseKlinechartsUISettingsReturn, type UseKlinechartsUIThemeReturn, type UseLayoutManagerReturn, type UseMeasureReturn, type UseOrderLinesReturn, type UsePeriodsReturn, type UseReplayReturn, type UseScreenshotReturn, type UseScriptEditorReturn, type UseSymbolSearchReturn, type UseTimezoneReturn, type UseUndoRedoReturn, type UseWatchlistReturn, type WatchlistItem, YAXIS_POSITIONS, type YAxisPosition, abcd, anyWaves, arrow, bollTv, brush, cci, circle, createDataLoader, eightWaves, elliottWave, fibRetracement, fibonacciCircle, fibonacciExtension, fibonacciSegment, fibonacciSpeedResistanceFan, fibonacciSpiral, fiveWaves, gannBox, gannFan, hma, ichimoku, longPosition, maRibbon, macdTv, measure, parallelChannel, parallelogram, pivotPoints, ray, rect, rsiTv, shortPosition, stochastic, superTrend, threeWaves, triangle, useAlerts, useAnnotations, useCompare, useCrosshair, useDataExport, useDrawingTools, useFullscreen, useIndicators, useKlinechartsUI, useKlinechartsUILoading, useKlinechartsUISettings, useKlinechartsUITheme, useLayoutManager, useMeasure, useOrderLines, usePeriods, useReplay, useScreenshot, useScriptEditor, useSymbolSearch, useTimezone, useUndoRedo, useWatchlist, vwap, xabcd };
1029
+ export { type AddIndicatorOptions, type Alert, type AlertCondition, type Annotation, CANDLE_TYPES, COMPARE_RULES, type CandleTypeItem, type CandleTypeOption, type ChartLayoutState, type CompareRule, type CompareSymbol, type CrosshairBarData, DEFAULT_PERIODS, DRAWING_CATEGORIES, type Datafeed, type DrawingCategoryItem, type DrawingTool, type DrawingToolCategory, type DrawingToolItem, type ExportFormat, INDICATOR_PARAMS, type IndicatorDefinition, type IndicatorInfo, type IndicatorParamConfig, type KlinechartsUIAction, type KlinechartsUIContextValue, KlinechartsUIDispatchContext, type KlinechartsUIDispatchValue, type KlinechartsUIOptions, KlinechartsUIProvider, type KlinechartsUISettingsState, type KlinechartsUIState, KlinechartsUIStateContext, type LayoutEntry, MAIN_INDICATORS, type MagnetMode, type MeasurePoint, type MeasureResult, OrderLineExtendData, type OrderLineOptions, PRICE_AXIS_TYPES, type PartialSymbolInfo, type PriceAxisType, type ReplaySpeed, SUB_INDICATORS, type ScriptPlacement, TA, TIMEZONES, TOOLTIP_SHOW_RULES, type TerminalPeriod, type TimezoneItem, type TimezoneOption, type TooltipShowRule, type UndoRedoAction, type UndoRedoActionType, type UseAlertsReturn, type UseAnnotationsReturn, type UseCompareReturn, type UseCrosshairReturn, type UseDataExportReturn, type UseDrawingToolsReturn, type UseFullscreenReturn, type UseIndicatorsReturn, type UseKlinechartsUILoadingReturn, type UseKlinechartsUISettingsReturn, type UseKlinechartsUIThemeReturn, type UseLayoutManagerReturn, type UseMeasureReturn, type UseOrderLinesReturn, type UsePeriodsReturn, type UseReplayReturn, type UseScreenshotReturn, type UseScriptEditorReturn, type UseSymbolSearchReturn, type UseTimezoneReturn, type UseUndoRedoReturn, type UseWatchlistReturn, type WatchlistItem, YAXIS_POSITIONS, type YAxisPosition, abcd, anyWaves, arrow, bollTv, brush, cci, circle, createDataLoader, eightWaves, elliottWave, fibRetracement, fibonacciCircle, fibonacciExtension, fibonacciSegment, fibonacciSpeedResistanceFan, fibonacciSpiral, fiveWaves, gannBox, gannFan, hma, ichimoku, longPosition, maRibbon, macdTv, measure, parallelChannel, parallelogram, pivotPoints, ray, rect, rsiTv, shortPosition, stochastic, superTrend, threeWaves, triangle, useAlerts, useAnnotations, useCompare, useCrosshair, useDataExport, useDrawingTools, useFullscreen, useIndicators, useKlinechartsUI, useKlinechartsUILoading, useKlinechartsUISettings, useKlinechartsUITheme, useLayoutManager, useMeasure, useOrderLines, usePeriods, useReplay, useScreenshot, useScriptEditor, useSymbolSearch, useTimezone, useUndoRedo, useWatchlist, vwap, xabcd };