react-klinecharts-ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { registerExtensions, TA_default } from './chunk-U325AHHX.js';
-export { TA_default as TA, abcd_default as abcd, anyWaves_default as anyWaves, arrow_default as arrow, bollTv_default as bollTv, brush_default as brush, cci_default as cci, circle_default as circle, depthOverlay_default as depthOverlay, eightWaves_default as eightWaves, elliottWave_default as elliottWave, fibRetracement_default as fibRetracement, fibonacciCircle_default as fibonacciCircle, fibonacciExtension_default as fibonacciExtension, fibonacciSegment_default as fibonacciSegment, fibonacciSpeedResistanceFan_default as fibonacciSpeedResistanceFan, fibonacciSpiral_default as fibonacciSpiral, fiveWaves_default as fiveWaves, gannBox_default as gannBox, gannFan_default as gannFan, hma_default as hma, ichimoku_default as ichimoku, indicators, longPosition_default as longPosition, maRibbon_default as maRibbon, macdTv_default as macdTv, measure_default as measure, orderLine_default as orderLine, overlays, parallelChannel_default as parallelChannel, parallelogram_default as parallelogram, pivotPoints_default as pivotPoints, ray_default as ray, rect_default as rect, registerExtensions, rsiTv_default as rsiTv, shortPosition_default as shortPosition, stochastic_default as stochastic, superTrend_default as superTrend, threeWaves_default as threeWaves, triangle_default as triangle, vwap_default as vwap, xabcd_default as xabcd } from './chunk-U325AHHX.js';
+import { registerExtensions, TA_default } from './chunk-DTBNTO4M.js';
+export { TA_default as TA, abcd_default as abcd, anyWaves_default as anyWaves, arrow_default as arrow, bollTv_default as bollTv, brush_default as brush, cci_default as cci, circle_default as circle, depthOverlay_default as depthOverlay, eightWaves_default as eightWaves, elliottWave_default as elliottWave, fibRetracement_default as fibRetracement, fibonacciCircle_default as fibonacciCircle, fibonacciExtension_default as fibonacciExtension, fibonacciSegment_default as fibonacciSegment, fibonacciSpeedResistanceFan_default as fibonacciSpeedResistanceFan, fibonacciSpiral_default as fibonacciSpiral, fiveWaves_default as fiveWaves, gannBox_default as gannBox, gannFan_default as gannFan, hma_default as hma, ichimoku_default as ichimoku, indicators, longPosition_default as longPosition, maRibbon_default as maRibbon, macdTv_default as macdTv, measure_default as measure, orderLine_default as orderLine, overlays, parallelChannel_default as parallelChannel, parallelogram_default as parallelogram, pivotPoints_default as pivotPoints, ray_default as ray, rect_default as rect, registerExtensions, rsiTv_default as rsiTv, shortPosition_default as shortPosition, stochastic_default as stochastic, superTrend_default as superTrend, threeWaves_default as threeWaves, triangle_default as triangle, vwap_default as vwap, xabcd_default as xabcd } from './chunk-DTBNTO4M.js';
 import { createContext, useContext, useReducer, useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { registerOverlay, registerIndicator } from 'react-klinecharts';
 import { jsx } from 'react/jsx-runtime';
@@ -57,6 +57,16 @@ function reducer(state, action) {
       return { ...state, mainIndicators: action.indicators };
     case "SET_SUB_INDICATORS":
       return { ...state, subIndicators: action.indicators };
+    case "SET_INDICATOR_AXES":
+      return { ...state, indicatorAxes: action.axes };
+    case "SET_INDICATOR_VISIBILITY":
+      return { ...state, indicatorVisibility: action.visibility };
+    case "SET_ALERTS":
+      return { ...state, alerts: action.alerts };
+    case "SET_MEASURE":
+      return { ...state, measure: { ...state.measure, ...action.measure } };
+    case "SET_REPLAY":
+      return { ...state, replay: { ...state.replay, ...action.replay } };
     case "SET_STYLES":
       return { ...state, styles: action.styles };
     case "SET_LOCALE":
@@ -119,12 +129,28 @@ function KlinechartsUIProvider({
         (acc, name) => ({ ...acc, [name]: "" }),
         {}
       ),
+      indicatorAxes: {},
+      indicatorVisibility: {},
+      alerts: [],
+      measure: { isActive: false, fromPoint: null, result: null },
+      replay: {
+        isReplaying: false,
+        isPaused: false,
+        speed: 1,
+        barIndex: 0,
+        totalBars: 0
+      },
       styles: opts.styles,
       screenshotUrl: null
     })
   );
   const fullscreenContainerRef = useRef(null);
   const undoRedoListenerRef = useRef(null);
+  const alertTriggeredListenerRef = useRef(null);
+  const replayIntervalRef = useRef(null);
+  const replaySavedDataRef = useRef([]);
+  const replayIndexRef = useRef(0);
+  const alertPrevCloseRef = useRef(null);
   const stateRef = useRef(state);
   stateRef.current = state;
   const callbacksRef = useRef({
@@ -185,13 +211,58 @@ function KlinechartsUIProvider({
       state.chart.setStyles(state.styles);
     }
   }, [state.chart, state.styles]);
+  const hasAlerts = state.alerts.length > 0;
+  useEffect(() => {
+    const chart = state.chart;
+    if (!chart || !hasAlerts) return;
+    alertPrevCloseRef.current = null;
+    const interval = setInterval(() => {
+      const dataList = chart.getDataList();
+      if (!dataList || dataList.length === 0) return;
+      const currentClose = dataList[dataList.length - 1].close;
+      const prevClose = alertPrevCloseRef.current;
+      alertPrevCloseRef.current = currentClose;
+      if (prevClose === null) return;
+      const alerts = stateRef.current.alerts;
+      let changed = false;
+      const next = alerts.map((alert) => {
+        if (alert.triggered) return alert;
+        const crossedUp = prevClose < alert.price && currentClose >= alert.price;
+        const crossedDown = prevClose > alert.price && currentClose <= alert.price;
+        const shouldTrigger = alert.condition === "crossing_up" ? crossedUp : alert.condition === "crossing_down" ? crossedDown : crossedUp || crossedDown;
+        if (shouldTrigger) {
+          changed = true;
+          const triggered = { ...alert, triggered: true };
+          alertTriggeredListenerRef.current?.(triggered);
+          return triggered;
+        }
+        return alert;
+      });
+      if (changed) {
+        enhancedDispatch({ type: "SET_ALERTS", alerts: next });
+      }
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [state.chart, hasAlerts, enhancedDispatch]);
+  useEffect(() => {
+    return () => {
+      if (replayIntervalRef.current !== null) {
+        clearInterval(replayIntervalRef.current);
+        replayIntervalRef.current = null;
+      }
+    };
+  }, []);
   const dispatchValue = useMemo(
     () => ({
       dispatch: enhancedDispatch,
       datafeed,
       onSettingsChange,
       fullscreenContainerRef,
-      undoRedoListenerRef
+      undoRedoListenerRef,
+      alertTriggeredListenerRef,
+      replayIntervalRef,
+      replaySavedDataRef,
+      replayIndexRef
     }),
     [enhancedDispatch, datafeed, onSettingsChange]
   );
@@ -653,75 +724,140 @@ function useIndicators() {
     const activeNames = state.mainIndicators;
     const inactive = MAIN_INDICATORS.filter((n) => !activeNames.includes(n));
     return [
-      ...activeNames.map((name) => ({ name, isActive: true })),
-      ...inactive.map((name) => ({ name, isActive: false }))
+      ...activeNames.map((name) => ({
+        name,
+        isActive: true,
+        visible: state.indicatorVisibility[`main_${name}`] ?? true
+      })),
+      ...inactive.map((name) => ({ name, isActive: false, visible: true }))
     ];
-  }, [state.mainIndicators]);
+  }, [state.mainIndicators, state.indicatorVisibility]);
   const subIndicators = useMemo(() => {
     const activeNames = Object.keys(state.subIndicators);
     const inactive = SUB_INDICATORS.filter((n) => !activeNames.includes(n));
     return [
-      ...activeNames.map((name) => ({ name, isActive: true })),
-      ...inactive.map((name) => ({ name, isActive: false }))
+      ...activeNames.map((name) => ({
+        name,
+        isActive: true,
+        visible: state.indicatorVisibility[`sub_${name}`] ?? true
+      })),
+      ...inactive.map((name) => ({ name, isActive: false, visible: true }))
     ];
-  }, [state.subIndicators]);
+  }, [state.subIndicators, state.indicatorVisibility]);
   const addMainIndicator = useCallback(
-    (name) => {
+    (name, options) => {
       if (state.mainIndicators.includes(name)) return;
+      const yAxis = options?.yAxis;
       state.chart?.createIndicator(
-        { name, id: `main_${name}`, paneId: "candle_pane" },
-        true,
-        { id: "candle_pane" }
+        { name, id: `main_${name}` },
+        { isStack: true, pane: { id: "candle_pane" }, yAxis }
       );
       const newIndicators = [...state.mainIndicators, name];
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      if (yAxis?.id) {
+        dispatch({
+          type: "SET_INDICATOR_AXES",
+          axes: { ...state.indicatorAxes, [`main_${name}`]: yAxis.id }
+        });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: false, isMain: true, paneId: "candle_pane" }
+        data: {
+          name,
+          wasActive: false,
+          isMain: true,
+          paneId: "candle_pane",
+          yAxisId: yAxis?.id
+        }
       });
     },
-    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.mainIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const removeMainIndicator = useCallback(
     (name) => {
-      state.chart?.removeIndicator({ id: `main_${name}` });
+      const id = `main_${name}`;
+      const yAxisId = state.indicatorAxes[id];
+      state.chart?.removeIndicator({ id });
       const newIndicators = state.mainIndicators.filter((n) => n !== name);
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      if (yAxisId) {
+        const nextAxes = { ...state.indicatorAxes };
+        delete nextAxes[id];
+        dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+      }
+      if (id in state.indicatorVisibility) {
+        const nextVisibility = { ...state.indicatorVisibility };
+        delete nextVisibility[id];
+        dispatch({ type: "SET_INDICATOR_VISIBILITY", visibility: nextVisibility });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: true, isMain: true, paneId: "candle_pane" }
+        data: { name, wasActive: true, isMain: true, paneId: "candle_pane", yAxisId }
       });
     },
-    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
+    [
+      state.chart,
+      state.mainIndicators,
+      state.indicatorAxes,
+      state.indicatorVisibility,
+      dispatch,
+      undoRedoListenerRef
+    ]
   );
   const addSubIndicator = useCallback(
-    (name) => {
+    (name, options) => {
       if (name in state.subIndicators) return;
       const id = `sub_${name}`;
-      state.chart?.createIndicator({ name, id });
+      const yAxis = options?.yAxis;
+      state.chart?.createIndicator({ name, id }, { yAxis });
       const paneId = state.chart?.getIndicators({ id })?.[0]?.paneId ?? "";
       const newIndicators = { ...state.subIndicators, [name]: paneId };
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      if (yAxis?.id) {
+        dispatch({
+          type: "SET_INDICATOR_AXES",
+          axes: { ...state.indicatorAxes, [id]: yAxis.id }
+        });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: false, isMain: false, paneId }
+        data: { name, wasActive: false, isMain: false, paneId, yAxisId: yAxis?.id }
       });
     },
-    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.subIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const removeSubIndicator = useCallback(
     (name) => {
+      const id = `sub_${name}`;
       const paneId = state.subIndicators[name] ?? "";
-      state.chart?.removeIndicator({ id: `sub_${name}` });
+      const yAxisId = state.indicatorAxes[id];
+      state.chart?.removeIndicator({ id });
       const newIndicators = { ...state.subIndicators };
       delete newIndicators[name];
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      if (yAxisId) {
+        const nextAxes = { ...state.indicatorAxes };
+        delete nextAxes[id];
+        dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+      }
+      if (id in state.indicatorVisibility) {
+        const nextVisibility = { ...state.indicatorVisibility };
+        delete nextVisibility[id];
+        dispatch({ type: "SET_INDICATOR_VISIBILITY", visibility: nextVisibility });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: true, isMain: false, paneId }
+        data: { name, wasActive: true, isMain: false, paneId, yAxisId }
       });
     },
-    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
+    [
+      state.chart,
+      state.subIndicators,
+      state.indicatorAxes,
+      state.indicatorVisibility,
+      dispatch,
+      undoRedoListenerRef
+    ]
   );
   const toggleMainIndicator = useCallback(
     (name) => {
@@ -747,12 +883,22 @@ function useIndicators() {
     (name, isMain, visible) => {
       const id = isMain ? `main_${name}` : `sub_${name}`;
       state.chart?.overrideIndicator({ name, id, visible });
+      const nextVisibility = { ...state.indicatorVisibility };
+      if (visible) delete nextVisibility[id];
+      else nextVisibility[id] = false;
+      dispatch({ type: "SET_INDICATOR_VISIBILITY", visibility: nextVisibility });
     },
-    [state.chart]
+    [state.chart, state.indicatorVisibility, dispatch]
+  );
+  const isIndicatorVisible = useCallback(
+    (name, isMain) => state.indicatorVisibility[isMain ? `main_${name}` : `sub_${name}`] ?? true,
+    [state.indicatorVisibility]
   );
   const updateIndicatorParams = useCallback(
-    (name, paneId, params) => {
-      state.chart?.overrideIndicator({ name, paneId, calcParams: params });
+    // `paneId` is kept in the signature for API stability; klinecharts v10
+    // `overrideIndicator` no longer accepts it and targets by name/id instead.
+    (name, _paneId, params) => {
+      state.chart?.overrideIndicator({ name, calcParams: params });
     },
     [state.chart]
   );
@@ -773,11 +919,9 @@ function useIndicators() {
         {
           name,
           id: `main_${name}`,
-          paneId: "candle_pane",
           ...prevCalcParams ? { calcParams: prevCalcParams } : {}
         },
-        true,
-        { id: "candle_pane" }
+        { isStack: true, pane: { id: "candle_pane" } }
       );
       const newSub = { ...state.subIndicators };
       delete newSub[name];
@@ -831,9 +975,14 @@ function useIndicators() {
         id: paneId,
         height: COLLAPSED_HEIGHT
       });
-      state.chart.overrideIndicator({ name, id: `sub_${name}`, visible: false });
+      const id = `sub_${name}`;
+      state.chart.overrideIndicator({ name, id, visible: false });
+      dispatch({
+        type: "SET_INDICATOR_VISIBILITY",
+        visibility: { ...state.indicatorVisibility, [id]: false }
+      });
     },
-    [state.chart, state.subIndicators]
+    [state.chart, state.subIndicators, state.indicatorVisibility, dispatch]
   );
   const expandSubIndicator = useCallback(
     (name) => {
@@ -845,9 +994,13 @@ function useIndicators() {
         id: paneId,
         height: savedHeight
       });
-      state.chart.overrideIndicator({ name, id: `sub_${name}`, visible: true });
+      const id = `sub_${name}`;
+      state.chart.overrideIndicator({ name, id, visible: true });
+      const nextVisibility = { ...state.indicatorVisibility };
+      delete nextVisibility[id];
+      dispatch({ type: "SET_INDICATOR_VISIBILITY", visibility: nextVisibility });
     },
-    [state.chart, state.subIndicators]
+    [state.chart, state.subIndicators, state.indicatorVisibility, dispatch]
   );
   const isSubIndicatorCollapsed = useCallback(
     (name) => {
@@ -893,7 +1046,7 @@ function useIndicators() {
         if (sub.styles) {
           state.chart.overrideIndicator({
             name: sub.name,
-            paneId,
+            id,
             styles: sub.styles
           });
         }
@@ -902,6 +1055,44 @@ function useIndicators() {
     },
     [state.chart, state.subIndicators, dispatch]
   );
+  const getIndicatorAxis = useCallback(
+    (name, isMain) => state.indicatorAxes[isMain ? `main_${name}` : `sub_${name}`],
+    [state.indicatorAxes]
+  );
+  const bindIndicatorToNewAxis = useCallback(
+    (name, isMain, yAxis) => {
+      if (!state.chart) return;
+      const id = isMain ? `main_${name}` : `sub_${name}`;
+      const current = state.chart.getIndicators({ id })?.[0];
+      if (!current) return;
+      const calcParams = current.calcParams;
+      const styles = current.styles;
+      const visible = current.visible ?? true;
+      const paneId = isMain ? "candle_pane" : current.paneId ?? state.subIndicators[name] ?? "";
+      state.chart.removeIndicator({ id });
+      state.chart.createIndicator(
+        {
+          name,
+          id,
+          ...calcParams ? { calcParams } : {},
+          visible
+        },
+        {
+          isStack: isMain,
+          ...paneId ? { pane: { id: paneId } } : {},
+          yAxis
+        }
+      );
+      if (styles) {
+        state.chart.overrideIndicator({ name, id, styles });
+      }
+      const nextAxes = { ...state.indicatorAxes };
+      if (yAxis?.id) nextAxes[id] = yAxis.id;
+      else delete nextAxes[id];
+      dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+    },
+    [state.chart, state.indicatorAxes, state.subIndicators, dispatch]
+  );
   return {
     mainIndicators,
     subIndicators,
@@ -918,6 +1109,7 @@ function useIndicators() {
     moveToMain,
     moveToSub,
     setIndicatorVisible,
+    isIndicatorVisible,
     updateIndicatorParams,
     getIndicatorParams,
     isMainIndicatorActive,
@@ -925,7 +1117,11 @@ function useIndicators() {
     collapseSubIndicator,
     expandSubIndicator,
     isSubIndicatorCollapsed,
-    reorderSubIndicator
+    reorderSubIndicator,
+    indicatorAxes: state.indicatorAxes,
+    getIndicatorAxis,
+    indicatorVisibility: state.indicatorVisibility,
+    bindIndicatorToNewAxis
   };
 }
 
@@ -1235,20 +1431,23 @@ function useKlinechartsUISettings() {
     () => TOOLTIP_SHOW_RULES.map((r) => ({ key: r, localeKey: r })),
     []
   );
+  const applyPaneAxis = useCallback(
+    (axis) => {
+      state.chart?.overrideYAxis?.({ paneId: "candle_pane", ...axis });
+    },
+    [state.chart]
+  );
   const hasAppliedInitial = useRef(false);
   useEffect(() => {
     if (!state.chart || hasAppliedInitial.current) return;
     hasAppliedInitial.current = true;
-    const needsPaneOptions = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
-    if (needsPaneOptions) {
-      state.chart.setPaneOptions({
-        id: "candle_pane",
-        axis: {
-          ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
-          ...settings.reverseCoordinate && { reverse: true },
-          ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
-          ...settings.yAxisInside && { inside: true }
-        }
+    const needsAxisOverride = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
+    if (needsAxisOverride) {
+      applyPaneAxis({
+        ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
+        ...settings.reverseCoordinate && { reverse: true },
+        ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
+        ...settings.yAxisInside && { inside: true }
       });
     }
     if (settings.showIndicatorLastValue) {
@@ -1271,12 +1470,6 @@ function useKlinechartsUISettings() {
     },
     [state.chart]
   );
-  const applyPaneAxis = useCallback(
-    (axis) => {
-      state.chart?.setPaneOptions({ id: "candle_pane", axis });
-    },
-    [state.chart]
-  );
   const setCandleType = useCallback(
     (type) => {
       applyStyle("candle.type", type);
@@ -1424,11 +1617,8 @@ function useKlinechartsUISettings() {
   const resetToDefaults = useCallback(() => {
     setSettings(defaultSettings);
     state.chart?.setStyles(state.theme);
-    state.chart?.setPaneOptions({
-      id: "candle_pane",
-      axis: { name: "normal", reverse: false, position: "right", inside: false }
-    });
-  }, [state.chart, state.theme]);
+    applyPaneAxis({ name: "normal", reverse: false, position: "right", inside: false });
+  }, [state.chart, state.theme, applyPaneAxis]);
   return {
     ...settings,
     candleTypes,
@@ -1685,21 +1875,28 @@ function useUndoRedo() {
           break;
         }
         case "indicator_toggled": {
-          const { name, wasActive, isMain, paneId } = action.data;
+          const { name, wasActive, isMain, paneId, yAxisId } = action.data;
+          const id = isMain ? `main_${name}` : `sub_${name}`;
           if (wasActive) {
             if (isMain) {
               state.chart.createIndicator(
-                { name, id: `main_${name}`, paneId: "candle_pane" },
-                true,
-                { id: "candle_pane" }
+                { name, id },
+                {
+                  isStack: true,
+                  pane: { id: "candle_pane" },
+                  ...yAxisId ? { yAxis: { id: yAxisId } } : {}
+                }
               );
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: [...state.mainIndicators, name]
               });
             } else {
-              state.chart.createIndicator({ name, id: `sub_${name}` });
-              const newPaneId = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.paneId ?? "";
+              state.chart.createIndicator(
+                { name, id },
+                yAxisId ? { yAxis: { id: yAxisId } } : void 0
+              );
+              const newPaneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
               dispatch({
                 type: "SET_SUB_INDICATORS",
                 indicators: {
@@ -1708,9 +1905,15 @@ function useUndoRedo() {
                 }
               });
             }
+            if (yAxisId) {
+              dispatch({
+                type: "SET_INDICATOR_AXES",
+                axes: { ...state.indicatorAxes, [id]: yAxisId }
+              });
+            }
           } else {
+            state.chart.removeIndicator({ id });
             if (isMain) {
-              state.chart.removeIndicator({ id: `main_${name}` });
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: state.mainIndicators.filter(
@@ -1718,7 +1921,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1726,6 +1928,11 @@ function useUndoRedo() {
                 indicators: newSub
               });
             }
+            if (state.indicatorAxes[id]) {
+              const nextAxes = { ...state.indicatorAxes };
+              delete nextAxes[id];
+              dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+            }
           }
           setRedoStack((prev) => [
             ...prev,
@@ -1735,7 +1942,8 @@ function useUndoRedo() {
                 name,
                 wasActive: !wasActive,
                 isMain,
-                paneId
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1745,7 +1953,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   const redo = useCallback(() => {
     if (redoStack.length === 0 || !state.chart || isProcessingRef.current)
       return;
@@ -1797,21 +2005,28 @@ function useUndoRedo() {
           break;
         }
         case "indicator_toggled": {
-          const { name, wasActive, isMain } = action.data;
+          const { name, wasActive, isMain, paneId, yAxisId } = action.data;
+          const id = isMain ? `main_${name}` : `sub_${name}`;
           if (wasActive) {
             if (isMain) {
               state.chart.createIndicator(
-                { name, id: `main_${name}`, paneId: "candle_pane" },
-                true,
-                { id: "candle_pane" }
+                { name, id },
+                {
+                  isStack: true,
+                  pane: { id: "candle_pane" },
+                  ...yAxisId ? { yAxis: { id: yAxisId } } : {}
+                }
               );
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: [...state.mainIndicators, name]
               });
             } else {
-              state.chart.createIndicator({ name, id: `sub_${name}` });
-              const newPaneId = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.paneId ?? "";
+              state.chart.createIndicator(
+                { name, id },
+                yAxisId ? { yAxis: { id: yAxisId } } : void 0
+              );
+              const newPaneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
               dispatch({
                 type: "SET_SUB_INDICATORS",
                 indicators: {
@@ -1820,9 +2035,15 @@ function useUndoRedo() {
                 }
               });
             }
+            if (yAxisId) {
+              dispatch({
+                type: "SET_INDICATOR_AXES",
+                axes: { ...state.indicatorAxes, [id]: yAxisId }
+              });
+            }
           } else {
+            state.chart.removeIndicator({ id });
             if (isMain) {
-              state.chart.removeIndicator({ id: `main_${name}` });
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: state.mainIndicators.filter(
@@ -1830,7 +2051,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1838,6 +2058,11 @@ function useUndoRedo() {
                 indicators: newSub
               });
             }
+            if (state.indicatorAxes[id]) {
+              const nextAxes = { ...state.indicatorAxes };
+              delete nextAxes[id];
+              dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+            }
           }
           setUndoStack((prev) => [
             ...prev,
@@ -1846,7 +2071,9 @@ function useUndoRedo() {
               data: {
                 name,
                 wasActive: !wasActive,
-                isMain
+                isMain,
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1856,7 +2083,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   useEffect(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrMeta = e.ctrlKey || e.metaKey;
@@ -1930,12 +2157,14 @@ function useLayoutManager() {
     if (indicatorMap) {
       indicatorMap.forEach((paneIndicators, paneId) => {
         paneIndicators.forEach((indicator) => {
+          const yAxisId = state.indicatorAxes[indicator.id];
           indicators2.push({
             paneId,
             name: indicator.name,
             calcParams: indicator.calcParams,
             visible: indicator.visible,
-            ...indicator.styles ? { styles: indicator.styles } : {}
+            ...indicator.styles ? { styles: indicator.styles } : {},
+            ...yAxisId ? { yAxisId } : {}
           });
         });
       });
@@ -1963,7 +2192,7 @@ function useLayoutManager() {
       indicators: indicators2,
       drawings
     };
-  }, [state.chart, state.symbol, state.period]);
+  }, [state.chart, state.symbol, state.period, state.indicatorAxes]);
   const saveLayout = useCallback(
     (name) => {
       const chartState = serializeState();
@@ -2011,25 +2240,39 @@ function useLayoutManager() {
       }
       const newMainIndicators = [];
       const newSubIndicators = {};
+      const restoredAxes = {};
+      const restoredVisibility = {};
       if (chartState.indicators) {
         for (const ind of chartState.indicators) {
+          const isMain = ind.paneId === "candle_pane";
+          const id2 = isMain ? `main_${ind.name}` : `sub_${ind.name}`;
           chart.createIndicator(
             {
               name: ind.name,
+              id: id2,
               calcParams: ind.calcParams,
               visible: ind.visible
             },
-            ind.paneId !== "candle_pane",
-            { id: ind.paneId }
+            {
+              isStack: ind.paneId !== "candle_pane",
+              pane: { id: ind.paneId },
+              ...ind.yAxisId ? { yAxis: { id: ind.yAxisId } } : {}
+            }
           );
           if (ind.styles) {
             chart.overrideIndicator({
               name: ind.name,
-              paneId: ind.paneId,
+              id: id2,
               styles: ind.styles
             });
           }
-          if (ind.paneId === "candle_pane") {
+          if (ind.yAxisId) {
+            restoredAxes[id2] = ind.yAxisId;
+          }
+          if (ind.visible === false) {
+            restoredVisibility[id2] = false;
+          }
+          if (isMain) {
             newMainIndicators.push(ind.name);
           } else {
             newSubIndicators[ind.name] = ind.paneId;
@@ -2044,6 +2287,14 @@ function useLayoutManager() {
         type: "SET_SUB_INDICATORS",
         indicators: newSubIndicators
       });
+      dispatch({
+        type: "SET_INDICATOR_AXES",
+        axes: restoredAxes
+      });
+      dispatch({
+        type: "SET_INDICATOR_VISIBILITY",
+        visibility: restoredVisibility
+      });
       if (chartState.drawings) {
         for (const drawing of chartState.drawings) {
           chart.createOverlay({
@@ -2269,8 +2520,7 @@ ${code}`
       if (placement === "main") {
         paneId = chart.createIndicator(
           { name: indicatorName },
-          true,
-          { id: "candle_pane" }
+          { isStack: true, pane: { id: "candle_pane" } }
         );
       } else {
         paneId = chart.createIndicator({ name: indicatorName });
@@ -2411,10 +2661,9 @@ function useCrosshair() {
 }
 var alertCounter = 0;
 function useAlerts() {
-  const { state } = useKlinechartsUI();
-  const [alerts, setAlerts] = useState([]);
-  const callbackRef = useRef(null);
-  const prevCloseRef = useRef(null);
+  const { state, dispatch } = useKlinechartsUI();
+  const { alertTriggeredListenerRef } = useKlinechartsUIDispatch();
+  const alerts = state.alerts;
   const addAlert = useCallback(
     (price, condition, message) => {
       const id = `alert_${++alertCounter}`;
@@ -2425,7 +2674,7 @@ function useAlerts() {
         message,
         triggered: false
       };
-      setAlerts((prev) => [...prev, alert]);
+      dispatch({ type: "SET_ALERTS", alerts: [...state.alerts, alert] });
       if (state.chart) {
         state.chart.createOverlay({
           name: "horizontalStraightLine",
@@ -2444,67 +2693,30 @@ function useAlerts() {
       }
       return id;
     },
-    [state.chart]
+    [state.chart, state.alerts, dispatch]
   );
   const removeAlert = useCallback(
     (id) => {
-      setAlerts((prev) => prev.filter((a) => a.id !== id));
+      dispatch({
+        type: "SET_ALERTS",
+        alerts: state.alerts.filter((a) => a.id !== id)
+      });
       state.chart?.removeOverlay({ id });
     },
-    [state.chart]
+    [state.chart, state.alerts, dispatch]
   );
   const clearAlerts = useCallback(() => {
-    setAlerts((prev) => {
-      for (const alert of prev) {
-        state.chart?.removeOverlay({ id: alert.id });
-      }
-      return [];
-    });
-  }, [state.chart]);
+    for (const alert of state.alerts) {
+      state.chart?.removeOverlay({ id: alert.id });
+    }
+    dispatch({ type: "SET_ALERTS", alerts: [] });
+  }, [state.chart, state.alerts, dispatch]);
   const onAlertTriggered = useCallback(
     (callback) => {
-      callbackRef.current = callback;
+      alertTriggeredListenerRef.current = callback;
     },
-    []
+    [alertTriggeredListenerRef]
   );
-  useEffect(() => {
-    if (!state.chart) return;
-    const interval = setInterval(() => {
-      const dataList = state.chart?.getDataList();
-      if (!dataList || dataList.length === 0) return;
-      const lastBar = dataList[dataList.length - 1];
-      const currentClose = lastBar.close;
-      const prevClose = prevCloseRef.current;
-      if (prevClose === null) {
-        prevCloseRef.current = currentClose;
-        return;
-      }
-      prevCloseRef.current = currentClose;
-      setAlerts((prev) => {
-        let changed = false;
-        const next = prev.map((alert) => {
-          if (alert.triggered) return alert;
-          let shouldTrigger = false;
-          if (alert.condition === "crossing_up") {
-            shouldTrigger = prevClose < alert.price && currentClose >= alert.price;
-          } else if (alert.condition === "crossing_down") {
-            shouldTrigger = prevClose > alert.price && currentClose <= alert.price;
-          } else if (alert.condition === "crossing") {
-            shouldTrigger = prevClose < alert.price && currentClose >= alert.price || prevClose > alert.price && currentClose <= alert.price;
-          }
-          if (shouldTrigger) {
-            changed = true;
-            const triggered = { ...alert, triggered: true };
-            callbackRef.current?.(triggered);
-            return triggered;
-          }
-          return alert;
-        });
-        return changed ? next : prev;
-      });
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [state.chart]);
   return {
     alerts,
     addAlert,
@@ -2650,128 +2862,124 @@ function useWatchlist() {
   };
 }
 function useReplay() {
-  const { state } = useKlinechartsUI();
-  const [isReplaying, setIsReplaying] = useState(false);
-  const [isPaused, setIsPaused] = useState(false);
-  const [speed, setSpeedState] = useState(1);
-  const [barIndex, setBarIndex] = useState(0);
-  const [totalBars, setTotalBars] = useState(0);
-  const intervalRef = useRef(null);
-  const savedDataRef = useRef([]);
-  const currentIndexRef = useRef(0);
+  const { state, dispatch } = useKlinechartsUI();
+  const { replayIntervalRef, replaySavedDataRef, replayIndexRef } = useKlinechartsUIDispatch();
+  const { isReplaying, isPaused, speed, barIndex, totalBars } = state.replay;
   const clearInterval_ = useCallback(() => {
-    if (intervalRef.current !== null) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
+    if (replayIntervalRef.current !== null) {
+      clearInterval(replayIntervalRef.current);
+      replayIntervalRef.current = null;
     }
-  }, []);
+  }, [replayIntervalRef]);
   const addNextBar = useCallback(() => {
     if (!state.chart) return;
-    const data = savedDataRef.current;
-    const idx = currentIndexRef.current;
+    const data = replaySavedDataRef.current;
+    const idx = replayIndexRef.current;
     if (idx >= data.length) {
       clearInterval_();
-      setIsPaused(true);
+      dispatch({ type: "SET_REPLAY", replay: { isPaused: true } });
       return;
     }
     const bar = data[idx];
     state.chart.updateData?.(bar);
-    currentIndexRef.current = idx + 1;
-    setBarIndex(idx + 1);
-  }, [state.chart, clearInterval_]);
+    replayIndexRef.current = idx + 1;
+    dispatch({ type: "SET_REPLAY", replay: { barIndex: idx + 1 } });
+  }, [state.chart, clearInterval_, replaySavedDataRef, replayIndexRef, dispatch]);
   const startInterval = useCallback(
     (currentSpeed) => {
       clearInterval_();
-      intervalRef.current = setInterval(addNextBar, 1e3 / currentSpeed);
+      replayIntervalRef.current = setInterval(addNextBar, 1e3 / currentSpeed);
     },
-    [addNextBar, clearInterval_]
+    [addNextBar, clearInterval_, replayIntervalRef]
   );
   const startReplay = useCallback(() => {
     if (!state.chart) return;
     const dataList = state.chart.getDataList();
     if (!dataList || dataList.length === 0) return;
-    savedDataRef.current = [...dataList];
-    currentIndexRef.current = 0;
-    setTotalBars(dataList.length);
-    setBarIndex(0);
-    setIsReplaying(true);
-    setIsPaused(false);
+    replaySavedDataRef.current = [...dataList];
+    replayIndexRef.current = 0;
+    dispatch({
+      type: "SET_REPLAY",
+      replay: {
+        totalBars: dataList.length,
+        barIndex: 0,
+        isReplaying: true,
+        isPaused: false
+      }
+    });
     state.chart.clearData?.();
     startInterval(speed);
-  }, [state.chart, speed, startInterval]);
+  }, [state.chart, speed, startInterval, replaySavedDataRef, replayIndexRef, dispatch]);
   const stopReplay = useCallback(() => {
     if (!state.chart) return;
     clearInterval_();
-    const data = savedDataRef.current;
+    const data = replaySavedDataRef.current;
     if (data.length > 0) {
       state.chart.clearData?.();
       for (const bar of data) {
         state.chart.updateData?.(bar);
       }
     }
-    savedDataRef.current = [];
-    currentIndexRef.current = 0;
-    setIsReplaying(false);
-    setIsPaused(false);
-    setBarIndex(0);
-    setTotalBars(0);
-  }, [state.chart, clearInterval_]);
+    replaySavedDataRef.current = [];
+    replayIndexRef.current = 0;
+    dispatch({
+      type: "SET_REPLAY",
+      replay: { isReplaying: false, isPaused: false, barIndex: 0, totalBars: 0 }
+    });
+  }, [state.chart, clearInterval_, replaySavedDataRef, replayIndexRef, dispatch]);
   const togglePause = useCallback(() => {
     if (!isReplaying) return;
     if (isPaused) {
       startInterval(speed);
-      setIsPaused(false);
+      dispatch({ type: "SET_REPLAY", replay: { isPaused: false } });
     } else {
       clearInterval_();
-      setIsPaused(true);
+      dispatch({ type: "SET_REPLAY", replay: { isPaused: true } });
     }
-  }, [isReplaying, isPaused, speed, startInterval, clearInterval_]);
+  }, [isReplaying, isPaused, speed, startInterval, clearInterval_, dispatch]);
   const stepForward = useCallback(() => {
     if (!isReplaying || !isPaused) return;
     addNextBar();
   }, [isReplaying, isPaused, addNextBar]);
   const stepBackward = useCallback(() => {
     if (!isReplaying || !isPaused || !state.chart) return;
-    const idx = currentIndexRef.current;
+    const idx = replayIndexRef.current;
     if (idx <= 1) return;
-    const data = savedDataRef.current;
+    const data = replaySavedDataRef.current;
     state.chart.clearData?.();
     for (let i = 0; i < idx - 1; i++) {
       state.chart.updateData?.(data[i]);
     }
-    currentIndexRef.current = idx - 1;
-    setBarIndex(idx - 1);
-  }, [isReplaying, isPaused, state.chart]);
+    replayIndexRef.current = idx - 1;
+    dispatch({ type: "SET_REPLAY", replay: { barIndex: idx - 1 } });
+  }, [isReplaying, isPaused, state.chart, replaySavedDataRef, replayIndexRef, dispatch]);
   const seekTo = useCallback(
     (targetIndex) => {
       if (!isReplaying || !state.chart) return;
-      const data = savedDataRef.current;
+      const data = replaySavedDataRef.current;
       const clamped = Math.max(0, Math.min(targetIndex, data.length));
       clearInterval_();
-      setIsPaused(true);
       state.chart.clearData?.();
       for (let i = 0; i < clamped; i++) {
         state.chart.updateData?.(data[i]);
       }
-      currentIndexRef.current = clamped;
-      setBarIndex(clamped);
+      replayIndexRef.current = clamped;
+      dispatch({
+        type: "SET_REPLAY",
+        replay: { isPaused: true, barIndex: clamped }
+      });
     },
-    [isReplaying, state.chart, clearInterval_]
+    [isReplaying, state.chart, clearInterval_, replaySavedDataRef, replayIndexRef, dispatch]
   );
   const setSpeed = useCallback(
     (newSpeed) => {
-      setSpeedState(newSpeed);
+      dispatch({ type: "SET_REPLAY", replay: { speed: newSpeed } });
       if (isReplaying && !isPaused) {
         startInterval(newSpeed);
       }
     },
-    [isReplaying, isPaused, startInterval]
+    [isReplaying, isPaused, startInterval, dispatch]
   );
-  useEffect(() => {
-    return () => {
-      clearInterval_();
-    };
-  }, [clearInterval_]);
   return {
     isReplaying,
     isPaused,
@@ -2855,8 +3063,7 @@ function useCompare() {
       });
       const paneId = state.chart.createIndicator(
         { name: indicatorName },
-        true,
-        { id: "candle_pane" }
+        { isStack: true, pane: { id: "candle_pane" } }
       );
       indicatorsRef.current.set(ticker, {
         name: indicatorName,
@@ -2929,31 +3136,25 @@ function useCompare() {
   return { symbols, addSymbol, removeSymbol, toggleSymbol, clearAll };
 }
 var MEASURE_OVERLAY_ID = "__measure_line__";
+function computeResult(from, to) {
+  const priceDiff = to.price - from.price;
+  const pricePercent = from.price !== 0 ? priceDiff / from.price * 100 : 0;
+  const bars = Math.abs(to.barIndex - from.barIndex);
+  const timeDiff = Math.abs(to.timestamp - from.timestamp);
+  return { from, to, priceDiff, pricePercent, bars, timeDiff };
+}
 function useMeasure() {
-  const { state } = useKlinechartsUI();
-  const [isActive, setIsActive] = useState(false);
-  const [fromPoint, setFromPoint] = useState(null);
-  const [result, setResult] = useState(null);
-  const clickCountRef = useRef(0);
-  const computeResult = useCallback(
-    (from, to) => {
-      const priceDiff = to.price - from.price;
-      const pricePercent = from.price !== 0 ? priceDiff / from.price * 100 : 0;
-      const bars = Math.abs(to.barIndex - from.barIndex);
-      const timeDiff = Math.abs(to.timestamp - from.timestamp);
-      return { from, to, priceDiff, pricePercent, bars, timeDiff };
-    },
-    []
-  );
+  const { state, dispatch } = useKlinechartsUI();
+  const { isActive, fromPoint, result } = state.measure;
   const cleanup = useCallback(() => {
     state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });
   }, [state.chart]);
   const startMeasure = useCallback(() => {
     cleanup();
-    setIsActive(true);
-    setFromPoint(null);
-    setResult(null);
-    clickCountRef.current = 0;
+    dispatch({
+      type: "SET_MEASURE",
+      measure: { isActive: true, fromPoint: null, result: null }
+    });
     if (!state.chart) return;
     state.chart.createOverlay({
       name: "segment",
@@ -2989,23 +3190,25 @@ function useMeasure() {
         };
         const from = makePoint(points[0]);
         const to = makePoint(points[1]);
-        setFromPoint(from);
-        setResult(computeResult(from, to));
-        setIsActive(false);
+        dispatch({
+          type: "SET_MEASURE",
+          measure: {
+            isActive: false,
+            fromPoint: from,
+            result: computeResult(from, to)
+          }
+        });
       }
     });
-  }, [state.chart, cleanup, computeResult]);
+  }, [state.chart, cleanup, dispatch]);
   const cancelMeasure = useCallback(() => {
     cleanup();
-    setIsActive(false);
-    setFromPoint(null);
-    clickCountRef.current = 0;
-  }, [cleanup]);
+    dispatch({ type: "SET_MEASURE", measure: { isActive: false, fromPoint: null } });
+  }, [cleanup, dispatch]);
   const clearResult = useCallback(() => {
     cleanup();
-    setResult(null);
-    setFromPoint(null);
-  }, [cleanup]);
+    dispatch({ type: "SET_MEASURE", measure: { result: null, fromPoint: null } });
+  }, [cleanup, dispatch]);
   useEffect(() => {
     return () => {
       state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });