react-klinecharts-ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -57,6 +57,8 @@ 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_STYLES":
       return { ...state, styles: action.styles };
     case "SET_LOCALE":
@@ -119,6 +121,7 @@ function KlinechartsUIProvider({
         (acc, name) => ({ ...acc, [name]: "" }),
         {}
       ),
+      indicatorAxes: {},
       styles: opts.styles,
       screenshotUrl: null
     })
@@ -666,62 +669,95 @@ function useIndicators() {
     ];
   }, [state.subIndicators]);
   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 });
+      }
       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, 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 });
+      }
       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, dispatch, undoRedoListenerRef]
   );
   const toggleMainIndicator = useCallback(
     (name) => {
@@ -751,8 +787,10 @@ function useIndicators() {
     [state.chart]
   );
   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 +811,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];
@@ -893,7 +929,7 @@ function useIndicators() {
         if (sub.styles) {
           state.chart.overrideIndicator({
             name: sub.name,
-            paneId,
+            id,
             styles: sub.styles
           });
         }
@@ -902,6 +938,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,
@@ -925,7 +999,10 @@ function useIndicators() {
     collapseSubIndicator,
     expandSubIndicator,
     isSubIndicatorCollapsed,
-    reorderSubIndicator
+    reorderSubIndicator,
+    indicatorAxes: state.indicatorAxes,
+    getIndicatorAxis,
+    bindIndicatorToNewAxis
   };
 }
 
@@ -1235,20 +1312,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 +1351,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 +1498,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 +1756,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 +1786,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 +1802,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1726,6 +1809,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 +1823,8 @@ function useUndoRedo() {
                 name,
                 wasActive: !wasActive,
                 isMain,
-                paneId
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1745,7 +1834,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 +1886,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 +1916,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 +1932,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1838,6 +1939,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 +1952,9 @@ function useUndoRedo() {
               data: {
                 name,
                 wasActive: !wasActive,
-                isMain
+                isMain,
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1856,7 +1964,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 +2038,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 +2073,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 +2121,35 @@ function useLayoutManager() {
       }
       const newMainIndicators = [];
       const newSubIndicators = {};
+      const restoredAxes = {};
       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 (isMain) {
             newMainIndicators.push(ind.name);
           } else {
             newSubIndicators[ind.name] = ind.paneId;
@@ -2044,6 +2164,10 @@ function useLayoutManager() {
         type: "SET_SUB_INDICATORS",
         indicators: newSubIndicators
       });
+      dispatch({
+        type: "SET_INDICATOR_AXES",
+        axes: restoredAxes
+      });
       if (chartState.drawings) {
         for (const drawing of chartState.drawings) {
           chart.createOverlay({
@@ -2269,8 +2393,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 });
@@ -2855,8 +2978,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,