react-klinecharts-ui 0.6.0 → 1.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { registerExtensions, TA_default, ensureAlertLineRegistered } from './chunk-MVD3ILJT.js';
-export { TA_default as TA, abcd_default as abcd, alertLine_default as alertLine, 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-MVD3ILJT.js';
-import { createContext, useContext, useReducer, useRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { registerOverlay, registerHotkey, getHotkey, getSupportedHotkeys, registerIndicator } from 'react-klinecharts';
+import { registerExtensions, TA_default, ensureAlertLineRegistered } from './chunk-JD4NBJ5F.js';
+export { TA_default as TA, abcd_default as abcd, alertLine_default as alertLine, 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-JD4NBJ5F.js';
+import { createContext, useContext, useReducer, useRef, useEffect, useCallback, useMemo, useState, useId } from 'react';
+import { registerOverlay, registerHotkey, getHotkey, getSupportedHotkeys, registerIndicator } from 'klinecharts';
 import { jsx } from 'react/jsx-runtime';
 
 var KlinechartsUIStateContext = createContext(null);
@@ -63,6 +63,25 @@ function reducer(state, action) {
       return { ...state, indicatorVisibility: action.visibility };
     case "SET_ALERTS":
       return { ...state, alerts: action.alerts };
+    case "ADD_ALERT":
+      return { ...state, alerts: [...state.alerts, action.alert] };
+    case "REMOVE_ALERT":
+      return {
+        ...state,
+        alerts: state.alerts.filter((a) => a.id !== action.id)
+      };
+    case "CLEAR_ALERTS":
+      return { ...state, alerts: [] };
+    case "MARK_ALERT_TRIGGERED": {
+      if (action.ids.length === 0) return state;
+      const triggered = new Set(action.ids);
+      return {
+        ...state,
+        alerts: state.alerts.map(
+          (a) => triggered.has(a.id) ? { ...a, triggered: true } : a
+        )
+      };
+    }
     case "SET_MEASURE":
       return { ...state, measure: { ...state.measure, ...action.measure } };
     case "SET_REPLAY":
@@ -152,7 +171,6 @@ function KlinechartsUIProvider({
   const replayIndexRef = useRef(0);
   const alertPrevCloseRef = useRef(null);
   const stateRef = useRef(state);
-  stateRef.current = state;
   const callbacksRef = useRef({
     onStateChange,
     onSymbolChange,
@@ -162,15 +180,18 @@ function KlinechartsUIProvider({
     onMainIndicatorsChange,
     onSubIndicatorsChange
   });
-  callbacksRef.current = {
-    onStateChange,
-    onSymbolChange,
-    onPeriodChange,
-    onThemeChange,
-    onTimezoneChange,
-    onMainIndicatorsChange,
-    onSubIndicatorsChange
-  };
+  useEffect(() => {
+    stateRef.current = state;
+    callbacksRef.current = {
+      onStateChange,
+      onSymbolChange,
+      onPeriodChange,
+      onThemeChange,
+      onTimezoneChange,
+      onMainIndicatorsChange,
+      onSubIndicatorsChange
+    };
+  });
   const enhancedDispatch = useCallback((action) => {
     const prevState = stateRef.current;
     const newState = reducer(prevState, action);
@@ -200,6 +221,12 @@ function KlinechartsUIProvider({
     }
   }, []);
   const extraOverlaysRef = useRef(extraOverlays);
+  const datafeedRef = useRef(datafeed);
+  const onSettingsChangeRef = useRef(onSettingsChange);
+  useEffect(() => {
+    datafeedRef.current = datafeed;
+    onSettingsChangeRef.current = onSettingsChange;
+  });
   useEffect(() => {
     if (shouldRegister) {
       registerExtensions();
@@ -224,26 +251,29 @@ function KlinechartsUIProvider({
       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 triggeredIds = [];
+      for (const alert of alerts) {
+        if (alert.triggered) continue;
         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;
+          triggeredIds.push(alert.id);
+          alertTriggeredListenerRef.current?.({ ...alert, triggered: true });
         }
-        return alert;
-      });
-      if (changed) {
-        enhancedDispatch({ type: "SET_ALERTS", alerts: next });
+      }
+      if (triggeredIds.length > 0) {
+        enhancedDispatch({
+          type: "MARK_ALERT_TRIGGERED",
+          ids: triggeredIds
+        });
       }
     }, 1e3);
     return () => clearInterval(interval);
   }, [state.chart, hasAlerts, enhancedDispatch]);
+  useEffect(() => {
+    alertPrevCloseRef.current = null;
+  }, [state.symbol, state.period]);
   useEffect(() => {
     return () => {
       if (replayIntervalRef.current !== null) {
@@ -255,8 +285,8 @@ function KlinechartsUIProvider({
   const dispatchValue = useMemo(
     () => ({
       dispatch: enhancedDispatch,
-      datafeed,
-      onSettingsChange,
+      datafeed: datafeedRef.current,
+      onSettingsChange: onSettingsChangeRef.current,
       fullscreenContainerRef,
       undoRedoListenerRef,
       alertTriggeredListenerRef,
@@ -264,7 +294,8 @@ function KlinechartsUIProvider({
       replaySavedDataRef,
       replayIndexRef
     }),
-    [enhancedDispatch, datafeed, onSettingsChange]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [enhancedDispatch]
   );
   return /* @__PURE__ */ jsx(KlinechartsUIStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(KlinechartsUIDispatchContext.Provider, { value: dispatchValue, children }) });
 }
@@ -1222,15 +1253,17 @@ function useDrawingTools() {
   const [isVisible, setIsVisible] = useState(true);
   const [autoRetrigger, setAutoRetrigger] = useState(true);
   const activeToolRef = useRef(activeTool);
-  activeToolRef.current = activeTool;
   const autoRetriggerRef = useRef(autoRetrigger);
-  autoRetriggerRef.current = autoRetrigger;
   const isLockedRef = useRef(isLocked);
-  isLockedRef.current = isLocked;
   const isVisibleRef = useRef(isVisible);
-  isVisibleRef.current = isVisible;
   const magnetModeRef = useRef(magnetMode);
-  magnetModeRef.current = magnetMode;
+  useEffect(() => {
+    activeToolRef.current = activeTool;
+    autoRetriggerRef.current = autoRetrigger;
+    isLockedRef.current = isLocked;
+    isVisibleRef.current = isVisible;
+    magnetModeRef.current = magnetMode;
+  });
   const categories = useMemo(
     () => DRAWING_CATEGORIES.map((cat) => ({
       key: cat.key,
@@ -1241,6 +1274,8 @@ function useDrawingTools() {
     })),
     []
   );
+  const createOverlayForToolRef = useRef(() => {
+  });
   const createOverlayForTool = useCallback(
     (name) => {
       const mode = magnetModeRef.current === "strong" ? "strong_magnet" : magnetModeRef.current === "weak" ? "weak_magnet" : "normal";
@@ -1266,7 +1301,7 @@ function useDrawingTools() {
           });
           if (autoRetriggerRef.current && activeToolRef.current === name) {
             requestAnimationFrame(() => {
-              createOverlayForTool(name);
+              createOverlayForToolRef.current(name);
             });
           }
         }
@@ -1274,6 +1309,9 @@ function useDrawingTools() {
     },
     [state.chart, undoRedoListenerRef]
   );
+  useEffect(() => {
+    createOverlayForToolRef.current = createOverlayForTool;
+  });
   const selectTool = useCallback(
     (name) => {
       setActiveTool(name);
@@ -1730,22 +1768,28 @@ function useFullscreen() {
   const enter = useCallback(() => {
     const el = fullscreenContainerRef.current;
     if (!el) return;
+    let result;
     if (el.requestFullscreen) {
-      el.requestFullscreen();
+      result = el.requestFullscreen();
     } else if ("webkitRequestFullscreen" in el) {
       el.webkitRequestFullscreen();
     } else if ("msRequestFullscreen" in el) {
       el.msRequestFullscreen();
     }
+    result?.catch(() => {
+    });
   }, [fullscreenContainerRef]);
   const exit = useCallback(() => {
+    let result;
     if (document.exitFullscreen) {
-      document.exitFullscreen();
+      result = document.exitFullscreen();
     } else if ("webkitExitFullscreen" in document) {
       document.webkitExitFullscreen();
     } else if ("msExitFullscreen" in document) {
       document.msExitFullscreen();
     }
+    result?.catch(() => {
+    });
   }, []);
   const toggle = useCallback(() => {
     if (isFullscreen) {
@@ -1776,6 +1820,7 @@ function useFullscreen() {
 function useOrderLines() {
   const { state } = useKlinechartsUI();
   const callbacksRef = useRef(/* @__PURE__ */ new Map());
+  const ownedIdsRef = useRef(/* @__PURE__ */ new Set());
   const createOrderLine = useCallback(
     (options) => {
       if (!state.chart) return null;
@@ -1806,6 +1851,7 @@ function useOrderLines() {
           }
         }
       });
+      ownedIdsRef.current.add(id);
       return id;
     },
     [state.chart]
@@ -1837,12 +1883,28 @@ function useOrderLines() {
     (id) => {
       state.chart?.removeOverlay({ id });
       callbacksRef.current.delete(id);
+      ownedIdsRef.current.delete(id);
     },
     [state.chart]
   );
   const removeAllOrderLines = useCallback(() => {
     state.chart?.removeOverlay({ name: "orderLine" });
     callbacksRef.current.clear();
+    ownedIdsRef.current.clear();
+  }, [state.chart]);
+  useEffect(() => {
+    const chart = state.chart;
+    const owned = ownedIdsRef.current;
+    return () => {
+      owned.forEach((id) => {
+        try {
+          chart?.removeOverlay({ id });
+        } catch {
+        }
+      });
+      owned.clear();
+      callbacksRef.current.clear();
+    };
   }, [state.chart]);
   return {
     createOrderLine,
@@ -1860,6 +1922,14 @@ function useUndoRedo() {
   const isProcessingRef = useRef(false);
   const canUndo = undoStack.length > 0;
   const canRedo = redoStack.length > 0;
+  const undoStackRef = useRef([]);
+  const redoStackRef = useRef([]);
+  useEffect(() => {
+    undoStackRef.current = undoStack;
+  }, [undoStack]);
+  useEffect(() => {
+    redoStackRef.current = redoStack;
+  }, [redoStack]);
   const pushAction = useCallback((action) => {
     if (isProcessingRef.current) return;
     setUndoStack((prev) => [...prev, action]);
@@ -1876,10 +1946,11 @@ function useUndoRedo() {
     setRedoStack([]);
   }, []);
   const undo = useCallback(() => {
-    if (undoStack.length === 0 || !state.chart || isProcessingRef.current)
+    const stack = undoStackRef.current;
+    if (stack.length === 0 || !state.chart || isProcessingRef.current)
       return;
     isProcessingRef.current = true;
-    const action = undoStack[undoStack.length - 1];
+    const action = stack[stack.length - 1];
     setUndoStack((prev) => prev.slice(0, -1));
     try {
       switch (action.type) {
@@ -2000,12 +2071,13 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
+  }, [state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   const redo = useCallback(() => {
-    if (redoStack.length === 0 || !state.chart || isProcessingRef.current)
+    const stack = redoStackRef.current;
+    if (stack.length === 0 || !state.chart || isProcessingRef.current)
       return;
     isProcessingRef.current = true;
-    const action = redoStack[redoStack.length - 1];
+    const action = stack[stack.length - 1];
     setRedoStack((prev) => prev.slice(0, -1));
     try {
       switch (action.type) {
@@ -2130,7 +2202,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
+  }, [state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   useEffect(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrMeta = e.ctrlKey || e.metaKey;
@@ -2168,6 +2240,7 @@ function generateId() {
   );
 }
 function getLayoutIds() {
+  if (typeof localStorage === "undefined") return [];
   try {
     const raw = localStorage.getItem(INDEX_KEY);
     return raw ? JSON.parse(raw) : [];
@@ -2176,6 +2249,7 @@ function getLayoutIds() {
   }
 }
 function getEntry(id) {
+  if (typeof localStorage === "undefined") return null;
   try {
     const raw = localStorage.getItem(STORAGE_KEY_PREFIX + id);
     return raw ? JSON.parse(raw) : null;
@@ -2185,35 +2259,31 @@ function getEntry(id) {
 }
 function useLayoutManager() {
   const { state, dispatch } = useKlinechartsUI();
-  const [layouts, setLayouts] = useState([]);
+  const [layouts, setLayouts] = useState(
+    () => getLayoutIds().map((id) => getEntry(id)).filter((e) => e !== null)
+  );
   const [autoSaveEnabled, setAutoSaveEnabled] = useState(false);
   const autoSaveTimerRef = useRef(null);
   const autoSaveIdRef = useRef(null);
   const refreshLayouts = useCallback(() => {
-    const entries = getLayoutIds().map((id) => getEntry(id)).filter((e) => e !== null);
-    setLayouts(entries);
+    setLayouts(
+      getLayoutIds().map((id) => getEntry(id)).filter((e) => e !== null)
+    );
   }, []);
-  useEffect(() => {
-    refreshLayouts();
-  }, [refreshLayouts]);
   const serializeState = useCallback(() => {
     const chart = state.chart;
     if (!chart) return null;
     const indicators2 = [];
-    const indicatorMap = chart.getIndicatorByPaneId?.();
-    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 } : {},
-            ...yAxisId ? { yAxisId } : {}
-          });
-        });
+    const allIndicators = chart.getIndicators();
+    for (const indicator of allIndicators) {
+      const yAxisId = state.indicatorAxes[indicator.id];
+      indicators2.push({
+        paneId: indicator.paneId,
+        name: indicator.name,
+        calcParams: indicator.calcParams,
+        visible: indicator.visible,
+        ...indicator.styles ? { styles: indicator.styles } : {},
+        ...yAxisId ? { yAxisId } : {}
       });
     }
     const drawings = [];
@@ -2277,13 +2347,8 @@ function useLayoutManager() {
       if (chartState.version !== STATE_VERSION) return false;
       const chart = state.chart;
       chart.removeOverlay();
-      const indicatorMap = chart.getIndicatorByPaneId?.();
-      if (indicatorMap) {
-        indicatorMap.forEach((_paneIndicators, paneId) => {
-          _paneIndicators.forEach((_, indicatorName) => {
-            chart.removeIndicator({ paneId, name: indicatorName });
-          });
-        });
+      for (const indicator of chart.getIndicators()) {
+        chart.removeIndicator({ id: indicator.id });
       }
       const newMainIndicators = [];
       const newSubIndicators = {};
@@ -2301,7 +2366,12 @@ function useLayoutManager() {
               visible: ind.visible
             },
             {
-              isStack: ind.paneId !== "candle_pane",
+              // Main indicators stack OVER the candle series on the candle
+              // pane (isStack: true), exactly as useIndicators does on the
+              // add path. The previous `ind.paneId !== "candle_pane"` inverted
+              // this, so loading a layout with main indicators replaced the
+              // candles instead of overlaying them.
+              isStack: isMain,
               pane: { id: ind.paneId },
               ...ind.yAxisId ? { yAxis: { id: ind.yAxisId } } : {}
             }
@@ -2501,8 +2571,10 @@ function useScriptEditor() {
   const [status, setStatus] = useState("");
   const [isRunning, setIsRunning] = useState(false);
   const activeIdRef = useRef(null);
+  const [activeName, setActiveName] = useState(null);
   const activeNameRef = useRef(null);
-  const hasActiveScript = activeNameRef.current !== null;
+  activeNameRef.current = activeName;
+  const hasActiveScript = activeName !== null;
   const runScript = useCallback(() => {
     const chart = state.chart;
     if (!chart) {
@@ -2523,19 +2595,26 @@ function useScriptEditor() {
         `"use strict";
 ${code}`
       ];
-      const fn = new Function(...allArgs);
+      const compiledFn = new Function(...allArgs);
       const shadowValues = SHADOW_KEYS.map(() => void 0);
-      const result = fn(...shadowValues, TA_default, dataList, parsedParams);
-      if (!Array.isArray(result)) {
+      const sampleResult = compiledFn(
+        ...shadowValues,
+        TA_default,
+        dataList,
+        parsedParams
+      );
+      if (!Array.isArray(sampleResult)) {
         throw new Error("Script must return an Array.");
       }
-      const sample = result.find((v) => v !== null && v !== void 0);
+      const sample = sampleResult.find(
+        (v) => v !== null && v !== void 0
+      );
       const seriesKeys = sample ? Object.keys(sample) : ["value"];
       if (seriesKeys.length === 0) {
         throw new Error("Returned objects have no keys.");
       }
       scriptCounter++;
-      const indicatorName = `_custom_script_${scriptCounter}`;
+      const indicatorName = `_custom_script_active`;
       const figures = seriesKeys.map((key, i) => ({
         key,
         title: `${key}: `,
@@ -2547,7 +2626,7 @@ ${code}`
         shortName: (scriptName.trim() || `Script #${scriptCounter}`) + (placement === "main" ? " (Main)" : " (Sub)"),
         calcParams: parsedParams,
         figures,
-        calc: () => result,
+        calc: (liveDataList) => compiledFn(...shadowValues, TA_default, liveDataList, parsedParams),
         extendData: {
           isCustomScript: true,
           code,
@@ -2573,7 +2652,7 @@ ${code}`
         paneId = chart.createIndicator({ name: indicatorName });
       }
       activeIdRef.current = typeof paneId === "string" ? paneId : null;
-      activeNameRef.current = indicatorName;
+      setActiveName(indicatorName);
       const title = scriptName.trim() || `Script #${scriptCounter}`;
       setStatus(
         `${title} applied to ${placement === "main" ? "Main Chart" : "Sub Pane"} \u2014 ${seriesKeys.length} series: ${seriesKeys.join(", ")}`
@@ -2595,7 +2674,7 @@ ${code}`
       } catch {
       }
       activeIdRef.current = null;
-      activeNameRef.current = null;
+      setActiveName(null);
       setStatus("Indicator removed.");
     }
   }, [state.chart]);
@@ -2727,7 +2806,7 @@ function useAlerts() {
         triggered: false,
         extendData: resolvedExtendData
       };
-      dispatch({ type: "SET_ALERTS", alerts: [...state.alerts, alert] });
+      dispatch({ type: "ADD_ALERT", alert });
       if (state.chart) {
         ensureAlertLineRegistered();
         state.chart.createOverlay({
@@ -2741,24 +2820,19 @@ function useAlerts() {
       }
       return id;
     },
-    [state.chart, state.alerts, dispatch]
+    [state.chart, dispatch]
   );
   const removeAlert = useCallback(
     (id) => {
-      dispatch({
-        type: "SET_ALERTS",
-        alerts: state.alerts.filter((a) => a.id !== id)
-      });
+      dispatch({ type: "REMOVE_ALERT", id });
       state.chart?.removeOverlay({ id });
     },
-    [state.chart, state.alerts, dispatch]
+    [state.chart, dispatch]
   );
   const clearAlerts = useCallback(() => {
-    for (const alert of state.alerts) {
-      state.chart?.removeOverlay({ id: alert.id });
-    }
-    dispatch({ type: "SET_ALERTS", alerts: [] });
-  }, [state.chart, state.alerts, dispatch]);
+    state.chart?.removeOverlay({ groupId: "price_alerts" });
+    dispatch({ type: "CLEAR_ALERTS" });
+  }, [state.chart, dispatch]);
   const onAlertTriggered = useCallback(
     (callback) => {
       alertTriggeredListenerRef.current = callback;
@@ -2942,6 +3016,7 @@ function useReplay() {
   );
   const startReplay = useCallback(() => {
     if (!state.chart) return;
+    if (isReplaying) return;
     const dataList = state.chart.getDataList();
     if (!dataList || dataList.length === 0) return;
     replaySavedDataRef.current = [...dataList];
@@ -2957,7 +3032,12 @@ function useReplay() {
     });
     state.chart.clearData?.();
     startInterval(speed);
-  }, [state.chart, speed, startInterval, replaySavedDataRef, replayIndexRef, dispatch]);
+  }, [state.chart, state.symbol, state.period, speed, startInterval, isReplaying, replaySavedDataRef, replayIndexRef, dispatch]);
+  useEffect(() => {
+    if (isReplaying) {
+      stopReplay();
+    }
+  }, [state.symbol, state.period]);
   const stopReplay = useCallback(() => {
     if (!state.chart) return;
     clearInterval_();
@@ -3053,24 +3133,29 @@ var DEFAULT_COLORS = [
   "#ff5722",
   "#8bc34a"
 ];
-var colorIndex = 0;
-var compareCounter = 0;
 function useCompare() {
   const { state, datafeed } = useKlinechartsUI();
   const [symbols, setSymbols] = useState([]);
   const indicatorsRef = useRef(/* @__PURE__ */ new Map());
+  const instanceSalt = useId().replace(/[^a-zA-Z0-9]/g, "");
   const addSymbol = useCallback(
     async (ticker, color) => {
       if (!state.chart || !datafeed) return;
       if (indicatorsRef.current.has(ticker)) return;
-      const assignedColor = color ?? DEFAULT_COLORS[colorIndex++ % DEFAULT_COLORS.length];
+      const assignedColor = color ?? DEFAULT_COLORS[symbols.length % DEFAULT_COLORS.length];
       const mainDataList = state.chart.getDataList();
       if (!mainDataList || mainDataList.length === 0) return;
       const from = mainDataList[0].timestamp;
       const to = mainDataList[mainDataList.length - 1].timestamp;
+      const mainSymbol = state.symbol;
+      const symbol = {
+        ticker,
+        pricePrecision: mainSymbol?.pricePrecision ?? 2,
+        volumePrecision: mainSymbol?.volumePrecision ?? 8
+      };
       const compareData = await datafeed.getHistoryKLineData(
-        { ticker },
-        { ...state.period, label: "" },
+        symbol,
+        state.period,
         from,
         to
       );
@@ -3089,13 +3174,7 @@ function useCompare() {
       }
       if (basePrice === null || basePrice === 0) return;
       const bp = basePrice;
-      const normalizedData = mainDataList.map((mainBar) => {
-        const close = compareMap.get(mainBar.timestamp);
-        return {
-          pct: close != null ? (close - bp) / bp * 100 : NaN
-        };
-      });
-      const indicatorName = `__cmp_${++compareCounter}_${ticker}`;
+      const indicatorName = `__cmp_${instanceSalt}_${ticker}`;
       registerIndicator({
         name: indicatorName,
         shortName: ticker,
@@ -3107,7 +3186,16 @@ function useCompare() {
             styles: () => ({ color: assignedColor })
           }
         ],
-        calc: () => normalizedData
+        calc: (dataList) => {
+          let lastPct = null;
+          return dataList.map((bar) => {
+            const close = compareMap.get(bar.timestamp);
+            if (close != null) {
+              lastPct = (close - bp) / bp * 100;
+            }
+            return { pct: lastPct };
+          });
+        }
       });
       const paneId = state.chart.createIndicator(
         { name: indicatorName },
@@ -3125,7 +3213,7 @@ function useCompare() {
         ];
       });
     },
-    [state.chart, state.period, datafeed]
+    [state.chart, state.symbol, state.period, datafeed, symbols.length, instanceSalt]
   );
   const removeSymbol = useCallback(
     (ticker) => {
@@ -3335,13 +3423,11 @@ function useAnnotations() {
     [state.chart]
   );
   const clearAnnotations = useCallback(() => {
-    setAnnotations((prev) => {
-      for (const annotation of prev) {
-        state.chart?.removeOverlay({ id: annotation.id });
-      }
-      return [];
-    });
-  }, [state.chart]);
+    for (const annotation of annotations) {
+      state.chart?.removeOverlay({ id: annotation.id });
+    }
+    setAnnotations([]);
+  }, [state.chart, annotations]);
   useEffect(() => {
     return () => {
       state.chart?.removeOverlay({ groupId: "annotations" });