react-klinecharts-ui 0.4.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';
@@ -59,6 +59,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":
@@ -122,12 +130,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 = 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({
@@ -188,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]
   );
@@ -656,18 +724,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 = 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, options) => {
       if (state.mainIndicators.includes(name)) return;
@@ -709,12 +785,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 = useCallback(
     (name, options) => {
@@ -752,12 +840,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 = useCallback(
     (name) => {
@@ -783,8 +883,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 = useCallback(
+    (name, isMain) => state.indicatorVisibility[isMain ? `main_${name}` : `sub_${name}`] ?? true,
+    [state.indicatorVisibility]
   );
   const updateIndicatorParams = useCallback(
     // `paneId` is kept in the signature for API stability; klinecharts v10
@@ -867,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) => {
@@ -881,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) => {
@@ -992,6 +1109,7 @@ function useIndicators() {
     moveToMain,
     moveToSub,
     setIndicatorVisible,
+    isIndicatorVisible,
     updateIndicatorParams,
     getIndicatorParams,
     isMainIndicatorActive,
@@ -1002,6 +1120,7 @@ function useIndicators() {
     reorderSubIndicator,
     indicatorAxes: state.indicatorAxes,
     getIndicatorAxis,
+    indicatorVisibility: state.indicatorVisibility,
     bindIndicatorToNewAxis
   };
 }
@@ -2122,6 +2241,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";
@@ -2149,6 +2269,9 @@ function useLayoutManager() {
           if (ind.yAxisId) {
             restoredAxes[id2] = ind.yAxisId;
           }
+          if (ind.visible === false) {
+            restoredVisibility[id2] = false;
+          }
           if (isMain) {
             newMainIndicators.push(ind.name);
           } else {
@@ -2168,6 +2291,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({
@@ -2534,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}`;
@@ -2548,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",
@@ -2567,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,
@@ -2773,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,
@@ -3051,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",
@@ -3111,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 });