@pradeepjadhav/trading-reload-chart 1.0.2 → 1.0.3

package/README.md

@@ -1,6 +1,6 @@
 # Trading Chart Library by Pradeep
 
-A **React chart library** (HTML Canvas) for trading UIs: candlesticks, volume, axes, crosshair, drawing tools, and open/past trade overlays. Data and state are **controlled by the parent** via props and callbacks.
+A **React chart library** (HTML Canvas) for trading UIs: candlesticks, volume, axes, crosshair, drawing tools, and open/closed trade overlays. Data and state are **controlled by the parent** via props and callbacks.
 
 The repo includes a **demo app** under `demo/` (Vite dev server) that loads live/historical data from an API. That harness is not published in the npm package.
 
@@ -81,22 +81,22 @@ The chart is **client-only** (canvas + DOM). It does **not** support SSR.
 
 ### 1. Install the package
 
-**From npm** (after publish):
-
-```bash
-npm install trading-reload-chart react react-dom
-```
-
-**Directly from GitHub**:
-
-```bash
-npm install git+https://github.com/Pradeep17Jadhav/trading-reload-chart.git#main
-```
-
-**From this repo** (local path or `npm pack`):
-
-```bash
-# In trading-reload-chart repo
+**From npm** (after publish):
+
+```bash
+npm install trading-reload-chart react react-dom
+```
+
+**Directly from GitHub**:
+
+```bash
+npm install git+https://github.com/Pradeep17Jadhav/trading-reload-chart.git#main
+```
+
+**From this repo** (local path or `npm pack`):
+
+```bash
+# In trading-reload-chart repo
 npm run build
 npm pack
 # In your app
@@ -186,9 +186,9 @@ Import from the package root:
 | `Candle`, `OpenTrade`, `ClosedTrade`, …      | Domain types         |
 | `Shape`, `ShapeToolType`, shape payloads     | Drawing types        |
 | `ChartConfig`, `CHART_CONFIG`, `DeepPartial` | Configuration        |
-| `PastTradeIndicator`, trade handle types     | Trade overlay types  |
+| `ClosedTradeIndicator`, trade handle types   | Trade overlay types  |
 
-Controlled props (parent owns state): `candles`, `liveCandle`, `openTrades`, `pastTrades`, `shapes`, `activeShapeTool`, `config`, `activeSymbol`.
+Controlled props (parent owns state): `candles`, `liveCandle`, `openTrades`, `closedTrades`, `shapes`, `activeShapeTool`, `config`, `activeSymbol`.
 
 Callbacks: `onShapeAdded`, `onShapeModified`, `onActiveShapeToolChange`, `onTradeModify`.
 
@@ -226,7 +226,7 @@ Type declarations live in **`*.types.ts`** files next to implementation code (se
 - Pan, horizontal wheel zoom, Ctrl+wheel vertical zoom
 - Drawing tools (trendline, rectangle, path, fib, long/short position)
 - Open trade SL/TP drag with `onTradeModify` on release
-- Past trade markers
+- Closed trade markers
 - Deep-merge chart `config` over defaults
 
 ---

package/dist/canvas/layers/TradeLayer/TradeLayer.d.ts

@@ -7,7 +7,7 @@ export declare class TradeLayer {
     #private;
     isDragging: boolean;
     trades: OpenTrade[];
-    pastTrades: ClosedTrade[];
+    closedTrades: ClosedTrade[];
     candles: Candle[];
     viewport: ChartViewport | null;
     liveCandle: Candle | null;
@@ -15,7 +15,7 @@ export declare class TradeLayer {
     temporaryProtectionDrag: TemporaryTradeProtectionDrag | null;
     constructor(options: TradeLayerOptions);
     setTrades(trades: OpenTrade[]): void;
-    setPastTrades(pastTrades: ClosedTrade[]): void;
+    setClosedTrades(closedTrades: ClosedTrade[]): void;
     setCandles(candles: Candle[]): void;
     setViewport(viewport: ChartViewport): void;
     setLiveCandle(candle: Candle): void;
@@ -107,11 +107,11 @@ export declare class TradeLayer {
     }): number;
     private clearCanvas;
     private resetHitboxes;
-    private drawPastTradeIndicators;
-    private getPastTradeIndicatorRenderState;
-    private drawPastTradeConnector;
-    private drawPastTradeArrows;
-    private drawPastTradeArrow;
+    private drawClosedTradeIndicators;
+    private getClosedTradeIndicatorRenderState;
+    private drawClosedTradeConnector;
+    private drawClosedTradeArrows;
+    private drawClosedTradeArrow;
     private getTimeX;
     private normalizeTimestamp;
     private getFirstCandleIndexAtOrAfterTime;

package/dist/canvas/layers/TradeLayer/TradeLayer.types.d.ts

@@ -1,4 +1,4 @@
-import { MissingTradeProtectionHandleRectConfig, PastTradeIndicatorArrowConfig, TemporaryTradeProtectionHandleRectConfig, TradeHandleLineConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
+import { MissingTradeProtectionHandleRectConfig, ClosedTradeIndicatorArrowConfig as ClosedTradeIndicatorArrowConfig, TemporaryTradeProtectionHandleRectConfig, TradeHandleLineConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
 import { ChartViewport } from '../../../models/ChartViewport.types';
 import { ClosedTrade, OpenTrade, TradeDirection } from '../../../models/Trade.types';
 /**
@@ -126,16 +126,16 @@ export type TemporaryProtectionRenderState = {
     handleWidth: number;
     handleHeight: number;
 };
-export type PastTradeIndicatorPoint = {
+export type ClosedTradeIndicatorPoint = {
     x: number;
     y: number;
     price: number;
     time: number;
 };
-export type PastTradeIndicatorRenderState = {
+export type ClosedTradeIndicatorRenderState = {
     trade: ClosedTrade;
-    start: PastTradeIndicatorPoint;
-    close: PastTradeIndicatorPoint;
+    start: ClosedTradeIndicatorPoint;
+    close: ClosedTradeIndicatorPoint;
     arrowWidth: number;
     arrowHeight: number;
 };
@@ -205,13 +205,13 @@ export type DrawHandleSectionsOptions = {
     trade: OpenTrade;
     y: number;
 };
-export type DrawPastTradeArrowOptions = {
+export type DrawClosedTradeArrowOptions = {
     x: number;
     y: number;
     type: TradeDirection;
     width: number;
     height: number;
-    config: PastTradeIndicatorArrowConfig;
+    config: ClosedTradeIndicatorArrowConfig;
 };
 export type HandleSection = {
     label: string;

package/dist/chart/ChartController.types.d.ts

@@ -44,6 +44,12 @@ export type TradeModifyPayload = {
  * ```
  */
 export type PreviousDay = {
+    /**
+     * Trading symbol for the previous day data.
+     *
+     * @example `"EURUSD"`
+     */
+    symbol: string;
     /** Previous day high price.
      *
      * @example `1.0924`
@@ -66,7 +72,7 @@ export type PreviousDay = {
  *   candles,
  *   liveCandle,
  *   openTrades,
- *   pastTrades,
+ *   closedTrades,
  *   shapes,
  *   activeShapeTool,
  *   onShapeAdded: ({ shape }) => setShapes((prev) => [...prev, shape]),
@@ -116,10 +122,10 @@ export type ChartControllerProps = {
      *
      * @example
      * ```ts
-     * pastTrades: [{ ticket: 101245, symbol: "EURUSD", type: "sell", openTime: 1716796800000, openPrice: 1.089, closeTime: 1716800400000, closePrice: 1.086, volume: 1, sl: 1.091, tp: 1.086, commission: 0, swap: 0, pnl: 30, status: "closed" }]
+     * closedTrades: [{ ticket: 101245, symbol: "EURUSD", type: "sell", openTime: 1716796800000, openPrice: 1.089, closeTime: 1716800400000, closePrice: 1.086, volume: 1, sl: 1.091, tp: 1.086, commission: 0, swap: 0, pnl: 30, status: "closed" }]
      * ```
      */
-    pastTrades: ClosedTrade[];
+    closedTrades: ClosedTrade[];
     /**
      * Parent-owned shapes rendered and edited by the chart.
      *

package/dist/config/chartConfig.types.d.ts

@@ -375,11 +375,11 @@ export type TradeHandlesConfig = {
     missingProtectionHandles: MissingTradeProtectionConfig;
 };
 /**
- * Arrow appearance for past trade markers.
+ * Arrow appearance for closed trade markers.
  *
  * @example
  * ```ts
- * const arrow: PastTradeIndicatorArrowConfig = {
+ * const arrow: ClosedTradeIndicatorArrowConfig = {
  *   visible: true,
  *   width: 60,
  *   height: 30,
@@ -394,7 +394,7 @@ export type TradeHandlesConfig = {
  * };
  * ```
  */
-export type PastTradeIndicatorArrowConfig = {
+export type ClosedTradeIndicatorArrowConfig = {
     visible: boolean;
     width: number;
     height: number;
@@ -412,16 +412,16 @@ export type PastTradeIndicatorArrowConfig = {
  *
  * @example
  * ```ts
- * const pastTrades: PastTradeIndicatorsConfig = {
+ * const closedTrades: ClosedTradeIndicatorsConfig = {
  *   visible: true,
  *   arrow: { visible: true, width: 60, height: 30, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 },
  *   connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] },
  * };
  * ```
  */
-export type PastTradeIndicatorsConfig = {
+export type ClosedTradeIndicatorsConfig = {
     visible: boolean;
-    arrow: PastTradeIndicatorArrowConfig;
+    arrow: ClosedTradeIndicatorArrowConfig;
     connectorLine: TradeHandleLineConfig;
 };
 /**
@@ -622,7 +622,7 @@ export type PreviousDayHighLowConfig = {
  *   volume: { visible: true, bullishColor: "#22c55e", bearishColor: "#ef4444", opacity: 0.35, height: 200, bottomOffset: 0, minBarHeight: 1 },
  *   crosshair: { color: "rgba(255,255,255,0.35)", thickness: 1, style: "dashed" },
  *   tradeHandles: {} as TradeHandlesConfig,
- *   pastTradeIndicators: { visible: true, arrow: { visible: true, width: 60, height: 30, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 }, connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] } },
+ *   closedTradeIndicators: { visible: true, arrow: { visible: true, width: 60, height: 30, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 }, connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] } },
  *   colors: { bullish: "#22c55e", bearish: "#ef4444", background: "#0b1220" },
  *   axis: { axisX: { height: 30, backgroundColor: "#0b1220", borderColor: "#1f2937", borderWidth: 1, textColor: "#cbd5e1", font: "12px Arial", textAlign: "center", tickColor: "#334155", tickWidth: 1, tickLength: 4, labelOffsetY: 16, minLabelGap: 16, crosshairLabel: { backgroundColor: "#111827", borderColor: "#111827", borderWidth: 1, textColor: "#ffffff", font: "12px Arial", paddingX: 8, height: 26 } }, axisY: { width: 80, backgroundColor: "#0b1220", borderColor: "#1f2937", borderWidth: 1, textColor: "#cbd5e1", font: "12px Arial", textAlign: "left", tickCount: 12, tickColor: "#334155", tickWidth: 1, tickLength: 4, tickGap: 64, labelOffsetX: 8, crosshairLabel: { backgroundColor: "#111827", borderColor: "#111827", borderWidth: 1, textColor: "#ffffff", font: "12px Arial", paddingX: 8, height: 20 } } },
  *   shapes: { trendline: { lineColor: "#22c55e" } },
@@ -635,7 +635,7 @@ export type ChartConfig = {
     volume: VolumeConfig;
     crosshair: CrosshairConfig;
     tradeHandles: TradeHandlesConfig;
-    pastTradeIndicators: PastTradeIndicatorsConfig;
+    closedTradeIndicators: ClosedTradeIndicatorsConfig;
     colors: ColorsConfig;
     axis: AxisConfig;
     shapes: PartialShapeConfig;

package/dist/react/TradingReload.d.ts

@@ -13,7 +13,7 @@ import { TradingReloadHandle } from './TradingReload.types';
  *     candles={candles}
  *     liveCandle={liveCandle}
  *     openTrades={openTrades}
- *     pastTrades={pastTrades}
+ *     closedTrades={closedTrades}
  *     shapes={shapes}
  *     activeShapeTool={activeShapeTool}
  *     onShapeAdded={({ shape }) => setShapes((prev) => [...prev, shape])}

package/dist/react/TradingReload.types.d.ts

@@ -38,7 +38,7 @@ export type TradingReloadHandle = {
  *   candles={candles}
  *   liveCandle={liveCandle}
  *   openTrades={openTrades}
- *   pastTrades={pastTrades}
+ *   closedTrades={closedTrades}
  *   shapes={shapes}
  *   activeShapeTool={activeShapeTool}
  *   onShapeAdded={({ shape }) => setShapes((prev) => [...prev, shape])}