react-klinecharts-ui 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkPIFLJKYF_cjs = require('./chunk-PIFLJKYF.cjs');
+var chunkFSHI2ZDB_cjs = require('./chunk-FSHI2ZDB.cjs');
 var react = require('react');
 var reactKlinecharts = require('react-klinecharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -60,6 +60,14 @@ function reducer(state, action) {
       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":
@@ -123,12 +131,27 @@ function KlinechartsUIProvider({
         {}
       ),
       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 = react.useRef(null);
   const undoRedoListenerRef = react.useRef(null);
+  const alertTriggeredListenerRef = react.useRef(null);
+  const replayIntervalRef = react.useRef(null);
+  const replaySavedDataRef = react.useRef([]);
+  const replayIndexRef = react.useRef(0);
+  const alertPrevCloseRef = react.useRef(null);
   const stateRef = react.useRef(state);
   stateRef.current = state;
   const callbacksRef = react.useRef({
@@ -180,7 +203,7 @@ function KlinechartsUIProvider({
   const extraOverlaysRef = react.useRef(extraOverlays);
   react.useEffect(() => {
     if (shouldRegister) {
-      chunkPIFLJKYF_cjs.registerExtensions();
+      chunkFSHI2ZDB_cjs.registerExtensions();
     }
     extraOverlaysRef.current?.forEach((overlay) => reactKlinecharts.registerOverlay(overlay));
   }, [shouldRegister]);
@@ -189,13 +212,58 @@ function KlinechartsUIProvider({
       state.chart.setStyles(state.styles);
     }
   }, [state.chart, state.styles]);
+  const hasAlerts = state.alerts.length > 0;
+  react.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]);
+  react.useEffect(() => {
+    return () => {
+      if (replayIntervalRef.current !== null) {
+        clearInterval(replayIntervalRef.current);
+        replayIntervalRef.current = null;
+      }
+    };
+  }, []);
   const dispatchValue = react.useMemo(
     () => ({
       dispatch: enhancedDispatch,
       datafeed,
       onSettingsChange,
       fullscreenContainerRef,
-      undoRedoListenerRef
+      undoRedoListenerRef,
+      alertTriggeredListenerRef,
+      replayIntervalRef,
+      replaySavedDataRef,
+      replayIndexRef
     }),
     [enhancedDispatch, datafeed, onSettingsChange]
   );
@@ -657,18 +725,26 @@ 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 = react.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 = react.useCallback(
     (name, options) => {
       if (state.mainIndicators.includes(name)) return;
@@ -710,12 +786,24 @@ function useIndicators() {
         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", yAxisId }
       });
     },
-    [state.chart, state.mainIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
+    [
+      state.chart,
+      state.mainIndicators,
+      state.indicatorAxes,
+      state.indicatorVisibility,
+      dispatch,
+      undoRedoListenerRef
+    ]
   );
   const addSubIndicator = react.useCallback(
     (name, options) => {
@@ -753,12 +841,24 @@ function useIndicators() {
         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, yAxisId }
       });
     },
-    [state.chart, state.subIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
+    [
+      state.chart,
+      state.subIndicators,
+      state.indicatorAxes,
+      state.indicatorVisibility,
+      dispatch,
+      undoRedoListenerRef
+    ]
   );
   const toggleMainIndicator = react.useCallback(
     (name) => {
@@ -784,8 +884,16 @@ 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 = react.useCallback(
+    (name, isMain) => state.indicatorVisibility[isMain ? `main_${name}` : `sub_${name}`] ?? true,
+    [state.indicatorVisibility]
   );
   const updateIndicatorParams = react.useCallback(
     // `paneId` is kept in the signature for API stability; klinecharts v10
@@ -868,9 +976,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 = react.useCallback(
     (name) => {
@@ -882,9 +995,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 = react.useCallback(
     (name) => {
@@ -993,6 +1110,7 @@ function useIndicators() {
     moveToMain,
     moveToSub,
     setIndicatorVisible,
+    isIndicatorVisible,
     updateIndicatorParams,
     getIndicatorParams,
     isMainIndicatorActive,
@@ -1003,6 +1121,7 @@ function useIndicators() {
     reorderSubIndicator,
     indicatorAxes: state.indicatorAxes,
     getIndicatorAxis,
+    indicatorVisibility: state.indicatorVisibility,
     bindIndicatorToNewAxis
   };
 }
@@ -1559,6 +1678,53 @@ function useScreenshot() {
     clear
   };
 }
+function useHotkeys() {
+  const { state } = useKlinechartsUI();
+  const registerHotkey = react.useCallback((template) => {
+    reactKlinecharts.registerHotkey(template);
+  }, []);
+  const getHotkey = react.useCallback(
+    (name) => reactKlinecharts.getHotkey(name) ?? null,
+    []
+  );
+  const setHotkeysEnabled = react.useCallback(
+    (enabled, exclude) => {
+      state.chart?.setHotkey(
+        exclude ? { enabled, exclude } : { enabled }
+      );
+    },
+    [state.chart]
+  );
+  const getHotkeysConfig = react.useCallback(
+    () => state.chart?.getHotkey() ?? null,
+    [state.chart]
+  );
+  return {
+    registerHotkey,
+    getHotkey,
+    supportedHotkeys: reactKlinecharts.getSupportedHotkeys(),
+    setHotkeysEnabled,
+    getHotkeysConfig
+  };
+}
+function useChartAxes() {
+  const { state } = useKlinechartsUI();
+  const overrideXAxis = react.useCallback(
+    (override) => {
+      if (!state.chart) return;
+      state.chart.overrideXAxis(override);
+    },
+    [state.chart]
+  );
+  const overrideYAxis = react.useCallback(
+    (override) => {
+      if (!state.chart) return;
+      state.chart.overrideYAxis(override);
+    },
+    [state.chart]
+  );
+  return { overrideXAxis, overrideYAxis };
+}
 function useFullscreen() {
   const { fullscreenContainerRef } = useKlinechartsUIDispatch();
   const [isFullscreen, setIsFullscreen] = react.useState(false);
@@ -2123,6 +2289,7 @@ 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";
@@ -2150,6 +2317,9 @@ function useLayoutManager() {
           if (ind.yAxisId) {
             restoredAxes[id2] = ind.yAxisId;
           }
+          if (ind.visible === false) {
+            restoredVisibility[id2] = false;
+          }
           if (isMain) {
             newMainIndicators.push(ind.name);
           } else {
@@ -2169,6 +2339,10 @@ function useLayoutManager() {
         type: "SET_INDICATOR_AXES",
         axes: restoredAxes
       });
+      dispatch({
+        type: "SET_INDICATOR_VISIBILITY",
+        visibility: restoredVisibility
+      });
       if (chartState.drawings) {
         for (const drawing of chartState.drawings) {
           chart.createOverlay({
@@ -2352,7 +2526,7 @@ ${code}`
       ];
       const fn = new Function(...allArgs);
       const shadowValues = SHADOW_KEYS.map(() => void 0);
-      const result = fn(...shadowValues, chunkPIFLJKYF_cjs.TA_default, dataList, parsedParams);
+      const result = fn(...shadowValues, chunkFSHI2ZDB_cjs.TA_default, dataList, parsedParams);
       if (!Array.isArray(result)) {
         throw new Error("Script must return an Array.");
       }
@@ -2535,100 +2709,63 @@ function useCrosshair() {
 }
 var alertCounter = 0;
 function useAlerts() {
-  const { state } = useKlinechartsUI();
-  const [alerts, setAlerts] = react.useState([]);
-  const callbackRef = react.useRef(null);
-  const prevCloseRef = react.useRef(null);
+  const { state, dispatch } = useKlinechartsUI();
+  const { alertTriggeredListenerRef } = useKlinechartsUIDispatch();
+  const alerts = state.alerts;
   const addAlert = react.useCallback(
-    (price, condition, message) => {
+    (price, condition, message, extendData) => {
       const id = `alert_${++alertCounter}`;
+      const precision = state.chart?.getSymbol()?.pricePrecision ?? 2;
+      const resolvedExtendData = {
+        ...extendData,
+        text: extendData?.text ?? message ?? price.toFixed(precision)
+      };
       const alert = {
         id,
         price,
         condition,
         message,
-        triggered: false
+        triggered: false,
+        extendData: resolvedExtendData
       };
-      setAlerts((prev) => [...prev, alert]);
+      dispatch({ type: "SET_ALERTS", alerts: [...state.alerts, alert] });
       if (state.chart) {
+        chunkFSHI2ZDB_cjs.ensureAlertLineRegistered();
         state.chart.createOverlay({
-          name: "horizontalStraightLine",
+          name: "alertLine",
           id,
           groupId: "price_alerts",
           points: [{ value: price }],
-          styles: {
-            line: {
-              style: "dashed",
-              color: "#ff9800",
-              size: 1
-            }
-          },
+          extendData: resolvedExtendData,
           lock: true
         });
       }
       return id;
     },
-    [state.chart]
+    [state.chart, state.alerts, dispatch]
   );
   const removeAlert = react.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 = react.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 = react.useCallback(
     (callback) => {
-      callbackRef.current = callback;
+      alertTriggeredListenerRef.current = callback;
     },
-    []
+    [alertTriggeredListenerRef]
   );
-  react.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,
@@ -2774,128 +2911,124 @@ function useWatchlist() {
   };
 }
 function useReplay() {
-  const { state } = useKlinechartsUI();
-  const [isReplaying, setIsReplaying] = react.useState(false);
-  const [isPaused, setIsPaused] = react.useState(false);
-  const [speed, setSpeedState] = react.useState(1);
-  const [barIndex, setBarIndex] = react.useState(0);
-  const [totalBars, setTotalBars] = react.useState(0);
-  const intervalRef = react.useRef(null);
-  const savedDataRef = react.useRef([]);
-  const currentIndexRef = react.useRef(0);
+  const { state, dispatch } = useKlinechartsUI();
+  const { replayIntervalRef, replaySavedDataRef, replayIndexRef } = useKlinechartsUIDispatch();
+  const { isReplaying, isPaused, speed, barIndex, totalBars } = state.replay;
   const clearInterval_ = react.useCallback(() => {
-    if (intervalRef.current !== null) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
+    if (replayIntervalRef.current !== null) {
+      clearInterval(replayIntervalRef.current);
+      replayIntervalRef.current = null;
     }
-  }, []);
+  }, [replayIntervalRef]);
   const addNextBar = react.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 = react.useCallback(
     (currentSpeed) => {
       clearInterval_();
-      intervalRef.current = setInterval(addNextBar, 1e3 / currentSpeed);
+      replayIntervalRef.current = setInterval(addNextBar, 1e3 / currentSpeed);
     },
-    [addNextBar, clearInterval_]
+    [addNextBar, clearInterval_, replayIntervalRef]
   );
   const startReplay = react.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 = react.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 = react.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 = react.useCallback(() => {
     if (!isReplaying || !isPaused) return;
     addNextBar();
   }, [isReplaying, isPaused, addNextBar]);
   const stepBackward = react.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 = react.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 = react.useCallback(
     (newSpeed) => {
-      setSpeedState(newSpeed);
+      dispatch({ type: "SET_REPLAY", replay: { speed: newSpeed } });
       if (isReplaying && !isPaused) {
         startInterval(newSpeed);
       }
     },
-    [isReplaying, isPaused, startInterval]
+    [isReplaying, isPaused, startInterval, dispatch]
   );
-  react.useEffect(() => {
-    return () => {
-      clearInterval_();
-    };
-  }, [clearInterval_]);
   return {
     isReplaying,
     isPaused,
@@ -3052,31 +3185,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] = react.useState(false);
-  const [fromPoint, setFromPoint] = react.useState(null);
-  const [result, setResult] = react.useState(null);
-  const clickCountRef = react.useRef(0);
-  const computeResult = react.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 = react.useCallback(() => {
     state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });
   }, [state.chart]);
   const startMeasure = react.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",
@@ -3112,23 +3239,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 = react.useCallback(() => {
     cleanup();
-    setIsActive(false);
-    setFromPoint(null);
-    clickCountRef.current = 0;
-  }, [cleanup]);
+    dispatch({ type: "SET_MEASURE", measure: { isActive: false, fromPoint: null } });
+  }, [cleanup, dispatch]);
   const clearResult = react.useCallback(() => {
     cleanup();
-    setResult(null);
-    setFromPoint(null);
-  }, [cleanup]);
+    dispatch({ type: "SET_MEASURE", measure: { result: null, fromPoint: null } });
+  }, [cleanup, dispatch]);
   react.useEffect(() => {
     return () => {
       state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });
@@ -3294,175 +3423,179 @@ function createDataLoader(datafeed, dispatch) {
 
 Object.defineProperty(exports, "TA", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.TA_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.TA_default; }
 });
 Object.defineProperty(exports, "abcd", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.abcd_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.abcd_default; }
+});
+Object.defineProperty(exports, "alertLine", {
+  enumerable: true,
+  get: function () { return chunkFSHI2ZDB_cjs.alertLine_default; }
 });
 Object.defineProperty(exports, "anyWaves", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.anyWaves_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.anyWaves_default; }
 });
 Object.defineProperty(exports, "arrow", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.arrow_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.arrow_default; }
 });
 Object.defineProperty(exports, "bollTv", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.bollTv_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.bollTv_default; }
 });
 Object.defineProperty(exports, "brush", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.brush_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.brush_default; }
 });
 Object.defineProperty(exports, "cci", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.cci_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.cci_default; }
 });
 Object.defineProperty(exports, "circle", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.circle_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.circle_default; }
 });
 Object.defineProperty(exports, "depthOverlay", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.depthOverlay_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.depthOverlay_default; }
 });
 Object.defineProperty(exports, "eightWaves", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.eightWaves_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.eightWaves_default; }
 });
 Object.defineProperty(exports, "elliottWave", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.elliottWave_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.elliottWave_default; }
 });
 Object.defineProperty(exports, "fibRetracement", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fibRetracement_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fibRetracement_default; }
 });
 Object.defineProperty(exports, "fibonacciCircle", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fibonacciCircle_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fibonacciCircle_default; }
 });
 Object.defineProperty(exports, "fibonacciExtension", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fibonacciExtension_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fibonacciExtension_default; }
 });
 Object.defineProperty(exports, "fibonacciSegment", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fibonacciSegment_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fibonacciSegment_default; }
 });
 Object.defineProperty(exports, "fibonacciSpeedResistanceFan", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fibonacciSpeedResistanceFan_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fibonacciSpeedResistanceFan_default; }
 });
 Object.defineProperty(exports, "fibonacciSpiral", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fibonacciSpiral_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fibonacciSpiral_default; }
 });
 Object.defineProperty(exports, "fiveWaves", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.fiveWaves_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.fiveWaves_default; }
 });
 Object.defineProperty(exports, "gannBox", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.gannBox_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.gannBox_default; }
 });
 Object.defineProperty(exports, "gannFan", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.gannFan_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.gannFan_default; }
 });
 Object.defineProperty(exports, "hma", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.hma_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.hma_default; }
 });
 Object.defineProperty(exports, "ichimoku", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.ichimoku_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.ichimoku_default; }
 });
 Object.defineProperty(exports, "indicators", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.indicators; }
+  get: function () { return chunkFSHI2ZDB_cjs.indicators; }
 });
 Object.defineProperty(exports, "longPosition", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.longPosition_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.longPosition_default; }
 });
 Object.defineProperty(exports, "maRibbon", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.maRibbon_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.maRibbon_default; }
 });
 Object.defineProperty(exports, "macdTv", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.macdTv_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.macdTv_default; }
 });
 Object.defineProperty(exports, "measure", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.measure_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.measure_default; }
 });
 Object.defineProperty(exports, "orderLine", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.orderLine_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.orderLine_default; }
 });
 Object.defineProperty(exports, "overlays", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.overlays; }
+  get: function () { return chunkFSHI2ZDB_cjs.overlays; }
 });
 Object.defineProperty(exports, "parallelChannel", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.parallelChannel_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.parallelChannel_default; }
 });
 Object.defineProperty(exports, "parallelogram", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.parallelogram_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.parallelogram_default; }
 });
 Object.defineProperty(exports, "pivotPoints", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.pivotPoints_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.pivotPoints_default; }
 });
 Object.defineProperty(exports, "ray", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.ray_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.ray_default; }
 });
 Object.defineProperty(exports, "rect", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.rect_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.rect_default; }
 });
 Object.defineProperty(exports, "registerExtensions", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.registerExtensions; }
+  get: function () { return chunkFSHI2ZDB_cjs.registerExtensions; }
 });
 Object.defineProperty(exports, "rsiTv", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.rsiTv_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.rsiTv_default; }
 });
 Object.defineProperty(exports, "shortPosition", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.shortPosition_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.shortPosition_default; }
 });
 Object.defineProperty(exports, "stochastic", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.stochastic_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.stochastic_default; }
 });
 Object.defineProperty(exports, "superTrend", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.superTrend_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.superTrend_default; }
 });
 Object.defineProperty(exports, "threeWaves", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.threeWaves_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.threeWaves_default; }
 });
 Object.defineProperty(exports, "triangle", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.triangle_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.triangle_default; }
 });
 Object.defineProperty(exports, "vwap", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.vwap_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.vwap_default; }
 });
 Object.defineProperty(exports, "xabcd", {
   enumerable: true,
-  get: function () { return chunkPIFLJKYF_cjs.xabcd_default; }
+  get: function () { return chunkFSHI2ZDB_cjs.xabcd_default; }
 });
 exports.CANDLE_TYPES = CANDLE_TYPES;
 exports.COMPARE_RULES = COMPARE_RULES;
@@ -3481,11 +3614,13 @@ exports.YAXIS_POSITIONS = YAXIS_POSITIONS;
 exports.createDataLoader = createDataLoader;
 exports.useAlerts = useAlerts;
 exports.useAnnotations = useAnnotations;
+exports.useChartAxes = useChartAxes;
 exports.useCompare = useCompare;
 exports.useCrosshair = useCrosshair;
 exports.useDataExport = useDataExport;
 exports.useDrawingTools = useDrawingTools;
 exports.useFullscreen = useFullscreen;
+exports.useHotkeys = useHotkeys;
 exports.useIndicators = useIndicators;
 exports.useKlinechartsUI = useKlinechartsUI;
 exports.useKlinechartsUILoading = useKlinechartsUILoading;