react-klinecharts-ui 0.6.0 → 1.1.0

package/dist/chunk-O7E57I66.js

@@ -0,0 +1,92 @@
+import { createContext, useContext } from 'react';
+
+// src/provider/ChartTerminalContext.ts
+var KlinechartsUIStateContext = createContext(null);
+var KlinechartsUIDispatchContext = createContext(null);
+function useKlinechartsUIDispatch() {
+  const ctx = useContext(KlinechartsUIDispatchContext);
+  if (!ctx) {
+    throw new Error(
+      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
+    );
+  }
+  return ctx;
+}
+function useKlinechartsUI() {
+  const state = useContext(KlinechartsUIStateContext);
+  const dispatch = useContext(KlinechartsUIDispatchContext);
+  if (!state || !dispatch) {
+    throw new Error(
+      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
+    );
+  }
+  return { state, ...dispatch };
+}
+
+// src/utils/createDataLoader.ts
+function createDataLoader(datafeed, dispatch) {
+  let oldestTimestamp = null;
+  let currentGen = 0;
+  return {
+    getBars: async (params) => {
+      try {
+        dispatch({ type: "SET_LOADING", isLoading: true });
+        if (params.type === "init") {
+          oldestTimestamp = null;
+          const gen = ++currentGen;
+          const data = await datafeed.getHistoryKLineData(
+            params.symbol,
+            { ...params.period, label: "" },
+            0,
+            Date.now()
+          );
+          if (gen !== currentGen) return;
+          if (data.length > 0) {
+            oldestTimestamp = data[0].timestamp;
+          }
+          params.callback(data, {
+            forward: data.length > 0,
+            backward: false
+          });
+        } else if (params.type === "forward" && oldestTimestamp !== null) {
+          const gen = currentGen;
+          const data = await datafeed.getHistoryKLineData(
+            params.symbol,
+            { ...params.period, label: "" },
+            0,
+            oldestTimestamp - 1
+          );
+          if (gen !== currentGen) return;
+          if (data.length > 0) {
+            oldestTimestamp = data[0].timestamp;
+          }
+          params.callback(data, {
+            forward: data.length > 0,
+            backward: false
+          });
+        } else if (params.type === "backward") {
+          params.callback([], { forward: false, backward: false });
+        }
+      } catch (error) {
+        console.error("Failed to load chart data:", error);
+        params.callback([], { forward: false, backward: false });
+      } finally {
+        dispatch({ type: "SET_LOADING", isLoading: false });
+      }
+    },
+    subscribeBar: (params) => {
+      datafeed.subscribe(
+        params.symbol,
+        { ...params.period, label: "" },
+        (klineData) => params.callback(klineData)
+      );
+    },
+    unsubscribeBar: (params) => {
+      datafeed.unsubscribe(params.symbol, { ...params.period, label: "" });
+    }
+  };
+}
+
+export { KlinechartsUIDispatchContext, KlinechartsUIStateContext, createDataLoader, useKlinechartsUI, useKlinechartsUIDispatch };
+//# sourceMappingURL=chunk-O7E57I66.js.map
+//# sourceMappingURL=chunk-O7E57I66.js.map

package/dist/chunk-O7E57I66.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/ChartTerminalContext.ts","../src/utils/createDataLoader.ts"],"names":[],"mappings":"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","file":"chunk-O7E57I66.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type {\n  KlinechartsUIState,\n  KlinechartsUIContextValue,\n  KlinechartsUIDispatchValue,\n} from \"./types\";\n\nexport const KlinechartsUIStateContext =\n  createContext<KlinechartsUIState | null>(null);\n\nexport const KlinechartsUIDispatchContext =\n  createContext<KlinechartsUIDispatchValue | null>(null);\n\n/**\n * @internal\n * Reads only the stable dispatch slice. Hooks that use this won't re-render\n * when chart state changes (e.g. symbol, period, isLoading).\n */\nexport function useKlinechartsUIDispatch(): KlinechartsUIDispatchValue {\n  const ctx = useContext(KlinechartsUIDispatchContext);\n  if (!ctx) {\n    throw new Error(\n      \"useKlinechartsUI must be used within a <KlinechartsUIProvider>\"\n    );\n  }\n  return ctx;\n}\n\n/**\n * Primary hook — returns the full combined context value.\n * For performance-sensitive cases, prefer the two split hooks internally.\n */\nexport function useKlinechartsUI(): KlinechartsUIContextValue {\n  const state = useContext(KlinechartsUIStateContext);\n  const dispatch = useContext(KlinechartsUIDispatchContext);\n  if (!state || !dispatch) {\n    throw new Error(\n      \"useKlinechartsUI must be used within a <KlinechartsUIProvider>\"\n    );\n  }\n  return { state, ...dispatch };\n}\n","import type { Dispatch } from \"react\";\nimport type { DataLoader, KLineData } from \"klinecharts\";\nimport type { Datafeed, KlinechartsUIAction } from \"../provider/types\";\n\n/**\n * Creates a klinecharts DataLoader from a Datafeed instance.\n * This bridges the react-klinecharts-ui Datafeed interface to the\n * klinecharts native DataLoader format used by KLineChart component.\n *\n * In klinecharts terminology:\n * - \"init\" = initial data load\n * - \"forward\" = load older data (user scrolled left into history)\n * - \"backward\" = load newer data (user scrolled right)\n */\nexport function createDataLoader(\n  datafeed: Datafeed,\n  dispatch: Dispatch<KlinechartsUIAction>,\n): DataLoader {\n  let oldestTimestamp: number | null = null;\n  // Incremented on every \"init\" request. Forward requests capture the value at\n  // their start and bail out if a newer init has begun while they were in-flight.\n  let currentGen = 0;\n\n  return {\n    getBars: async (params) => {\n      try {\n        dispatch({ type: \"SET_LOADING\", isLoading: true });\n\n        if (params.type === \"init\") {\n          oldestTimestamp = null;\n          const gen = ++currentGen;\n          const data = await datafeed.getHistoryKLineData(\n            params.symbol,\n            { ...params.period, label: \"\" },\n            0,\n            Date.now(),\n          );\n          if (gen !== currentGen) return; // newer init started — discard stale result\n          if (data.length > 0) {\n            oldestTimestamp = data[0].timestamp;\n          }\n          params.callback(data as KLineData[], {\n            forward: data.length > 0,\n            backward: false,\n          });\n        } else if (params.type === \"forward\" && oldestTimestamp !== null) {\n          const gen = currentGen;\n          const data = await datafeed.getHistoryKLineData(\n            params.symbol,\n            { ...params.period, label: \"\" },\n            0,\n            oldestTimestamp - 1,\n          );\n          if (gen !== currentGen) return; // init for new period started — discard\n          if (data.length > 0) {\n            oldestTimestamp = data[0].timestamp;\n          }\n          params.callback(data as KLineData[], {\n            forward: data.length > 0,\n            backward: false,\n          });\n        } else if (params.type === \"backward\") {\n          // Backward pagination (loading data newer than what we have) is generally\n          // not needed in typical terminal usage because we subscribe via ws for real-time.\n          params.callback([], { forward: false, backward: false });\n        }\n      } catch (error) {\n        console.error(\"Failed to load chart data:\", error);\n        params.callback([], { forward: false, backward: false });\n      } finally {\n        dispatch({ type: \"SET_LOADING\", isLoading: false });\n      }\n    },\n    subscribeBar: (params) => {\n      datafeed.subscribe(\n        params.symbol,\n        { ...params.period, label: \"\" },\n        (klineData) => params.callback(klineData as KLineData),\n      );\n    },\n    unsubscribeBar: (params) => {\n      datafeed.unsubscribe(params.symbol, { ...params.period, label: \"\" });\n    },\n  };\n}\n"]}

package/dist/chunk-PZ5AY32C.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export { __export };
+//# sourceMappingURL=chunk-PZ5AY32C.js.map
+//# sourceMappingURL=chunk-PZ5AY32C.js.map

package/dist/chunk-PZ5AY32C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-PZ5AY32C.js"}

package/dist/chunk-Q7SFCCGT.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+exports.__export = __export;
+//# sourceMappingURL=chunk-Q7SFCCGT.cjs.map
+//# sourceMappingURL=chunk-Q7SFCCGT.cjs.map

package/dist/chunk-Q7SFCCGT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-Q7SFCCGT.cjs"}

package/dist/{chunk-MVD3ILJT.js → chunk-RIT2LJQT.js}

@@ -1,10 +1,5 @@
-import { registerFigure, utils, registerOverlay, registerIndicator } from 'react-klinecharts';
-
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
+import { __export } from './chunk-PZ5AY32C.js';
+import { utils, registerFigure, registerOverlay, registerIndicator } from 'klinecharts';
 
 // src/overlays/index.ts
 var overlays_exports = {};
@@ -992,7 +987,10 @@ var parallelChannel_default = parallelChannel;
 // src/overlays/longPosition.ts
 var longPosition = {
   name: "longPosition",
-  totalStep: 3,
+  // totalStep 4 → the user places 3 points interactively (entry, target, stop).
+  // With the previous value of 3, only 2 points were captured and the stop was
+  // always a hardcoded 40px offset, so R/R was meaningless.
+  totalStep: 4,
   needDefaultPointFigure: true,
   needDefaultXAxisFigure: true,
   needDefaultYAxisFigure: true,
@@ -1101,7 +1099,10 @@ var longPosition_default = longPosition;
 // src/overlays/shortPosition.ts
 var shortPosition = {
   name: "shortPosition",
-  totalStep: 3,
+  // totalStep 4 → the user places 3 points interactively (entry, target, stop).
+  // With the previous value of 3, only 2 points were captured and the stop was
+  // always a hardcoded 40px offset, so R/R was meaningless.
+  totalStep: 4,
   needDefaultPointFigure: true,
   needDefaultXAxisFigure: true,
   needDefaultYAxisFigure: true,
@@ -1230,8 +1231,10 @@ var measure = {
     const endPoint = overlay.points[1];
     const startCoord = coordinates[0];
     const endCoord = coordinates[1];
-    const diff = endPoint.value - startPoint.value;
-    const percent = (diff / startPoint.value * 100).toFixed(2);
+    const startValue = startPoint.value ?? 0;
+    const endValue = endPoint.value ?? 0;
+    const diff = endValue - startValue;
+    const percent = startValue !== 0 ? (diff / startValue * 100).toFixed(2) : "0.00";
     const bars = Math.abs(
       (endPoint.dataIndex ?? 0) - (startPoint.dataIndex ?? 0)
     );
@@ -1284,7 +1287,7 @@ var measure = {
       {
         type: "line",
         attrs: { coordinates: [startCoord, endCoord] },
-        styles: { color: strokeColor, style: "dash" }
+        styles: { color: strokeColor, style: "dashed" }
       },
       ...textFigures
     ];
@@ -1860,8 +1863,9 @@ var ichimoku = {
       if (index >= kijunPeriod - 1) {
         item.kijun = highLowAvg(dataList, index - kijunPeriod + 1, index);
       }
-      if (index + offset < dataList.length) {
-        item.chikou = dataList[index + offset].close;
+      const chikouIndex = index - offset;
+      if (chikouIndex >= 0) {
+        item.chikou = dataList[chikouIndex].close;
       }
       const prevIndex = index - offset;
       if (prevIndex >= 0) {
@@ -2001,7 +2005,7 @@ var pivotPoints = {
     let dayLow = Infinity;
     let dayClose = 0;
     return dataList.map((kLineData) => {
-      const date = new Date(kLineData.timestamp).toLocaleDateString();
+      const date = new Date(kLineData.timestamp).toISOString().slice(0, 10);
       if (date !== lastDate) {
         if (lastDate !== "") {
           lastP = (dayHigh + dayLow + dayClose) / 3;
@@ -2055,11 +2059,20 @@ var rsiTv = {
     const maPeriod = indicator.calcParams[1];
     const closes = dataList.map((d) => d.close);
     const rsiValues = TA_default.rsi(closes, rsiPeriod);
-    const nonNullRsi = rsiValues.map((v) => v ?? 0);
-    const maValues = TA_default.sma(nonNullRsi, maPeriod);
+    const rsiMa = new Array(rsiValues.length).fill(null);
+    for (let i = 0; i < rsiValues.length; i++) {
+      if (rsiValues[i] === null) continue;
+      const valid = [];
+      for (let j = i; j >= 0 && valid.length < maPeriod; j--) {
+        if (rsiValues[j] !== null) valid.push(rsiValues[j]);
+      }
+      if (valid.length === maPeriod) {
+        rsiMa[i] = valid.reduce((a, b) => a + b, 0) / maPeriod;
+      }
+    }
     return dataList.map((_, i) => {
       const rsi = rsiValues[i];
-      const rsi_ma = rsi !== null && maValues[i] !== null ? maValues[i] : null;
+      const rsi_ma = rsi !== null ? rsiMa[i] : null;
       return { rsi, rsi_ma };
     });
   },
@@ -2281,7 +2294,7 @@ var vwap = {
     let cumulativePriceVolume = 0;
     let lastDate = "";
     return dataList.map((kLineData) => {
-      const date = new Date(kLineData.timestamp).toLocaleDateString();
+      const date = new Date(kLineData.timestamp).toISOString().slice(0, 10);
       if (date !== lastDate) {
         cumulativeVolume = 0;
         cumulativePriceVolume = 0;
@@ -2414,7 +2427,7 @@ var depthOverlay = {
     const maxBarPx = bounding.width * maxBarFraction;
     const askColor = d.askColor ?? "rgba(239,83,80,0.25)";
     const bidColor = d.bidColor ?? "rgba(38,166,154,0.25)";
-    const maxQty = d.maxQty || 1;
+    const maxQty = d.maxQty ?? 1;
     const figures = [];
     for (const row of d.rows) {
       const y = yAxis.convertToPixel(row.price);
@@ -2567,5 +2580,5 @@ function ensureAlertLineRegistered() {
 }
 
 export { TA_default, abcd_default, alertLine_default, anyWaves_default, arrow_default, bollTv_default, brush_default, cci_default, circle_default, depthOverlay_default, eightWaves_default, elliottWave_default, ensureAlertLineRegistered, featureOverlays, fibRetracement_default, fibonacciCircle_default, fibonacciExtension_default, fibonacciSegment_default, fibonacciSpeedResistanceFan_default, fibonacciSpiral_default, fiveWaves_default, gannBox_default, gannFan_default, hma_default, ichimoku_default, indicators, longPosition_default, maRibbon_default, macdTv_default, measure_default, orderLine_default, overlays, parallelChannel_default, parallelogram_default, pivotPoints_default, ray_default, rect_default, registerExtensions, rsiTv_default, shortPosition_default, stochastic_default, superTrend_default, threeWaves_default, triangle_default, vwap_default, xabcd_default };
-//# sourceMappingURL=chunk-MVD3ILJT.js.map
-//# sourceMappingURL=chunk-MVD3ILJT.js.map
+//# sourceMappingURL=chunk-RIT2LJQT.js.map
+//# sourceMappingURL=chunk-RIT2LJQT.js.map