@pradeepjadhav/trading-reload-chart 1.0.1 → 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

@@ -1,13 +1,13 @@
 import { TemporaryTradeProtectionHandleRectConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
 import { Candle } from '../../../models/Candle.types';
 import { ChartViewport } from '../../../models/ChartViewport.types';
-import { OpenTrade } from '../../../models/Trade.types';
-import { CreateHitBoxOptions, CreateMissingProtectionHitBoxOptions, DrawConnectorLineOptions, DrawHandleLineOptions, DrawHandleRectOptions, DrawHandleSectionsOptions, DrawTradeHandleOptions, LineBlockedRange, PastTrade, TemporaryTradeProtectionDrag, TradeHandleHitbox, TradeHandleRenderState, TradeHandleType, TradeLayerOptions, TradeProtectionHandleType } from './TradeLayer.types';
+import { ClosedTrade, OpenTrade } from '../../../models/Trade.types';
+import { CreateHitBoxOptions, CreateMissingProtectionHitBoxOptions, DrawConnectorLineOptions, DrawHandleLineOptions, DrawHandleRectOptions, DrawHandleSectionsOptions, DrawTradeHandleOptions, LineBlockedRange, TemporaryTradeProtectionDrag, TradeHandleHitbox, TradeHandleRenderState, TradeHandleType, TradeLayerOptions, TradeProtectionHandleType } from './TradeLayer.types';
 export declare class TradeLayer {
     #private;
     isDragging: boolean;
     trades: OpenTrade[];
-    pastTrades: PastTrade[];
+    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: PastTrade[]): 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.helpers.d.ts

@@ -1,3 +1,3 @@
-import { TradeType } from '../../../models/Trade.types';
+import { TradeDirection } from '../../../models/Trade.types';
 export declare const getPipSize: (symbol: string) => number;
-export declare const calculatePotentialPnlUsd: (type: TradeType, entryPrice: number, targetPrice: number, volume: number, symbol: string) => number;
+export declare const calculatePotentialPnlUsd: (type: TradeDirection, entryPrice: number, targetPrice: number, volume: number, symbol: string) => number;

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

@@ -1,6 +1,6 @@
-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 { OpenTrade, TradeType } from '../../../models/Trade.types';
+import { ClosedTrade, OpenTrade, TradeDirection } from '../../../models/Trade.types';
 /**
  * Type of existing trade handle shown on open positions.
  *
@@ -50,41 +50,6 @@ export type TemporaryTradeProtectionDrag = {
     price: number;
     viewport: ChartViewport;
 };
-/**
- * Historical trade marker rendered on the chart after a position is closed.
- *
- * @example
- * ```ts
- * const trade: PastTrade = {
- *   symbol: "EURUSD",
- *   type: "sell",
- *   startTime: 1716796800000,
- *   closeTime: 1716800400000,
- *   openPrice: 1.089,
- *   closePrice: 1.086,
- *   volume: 1,
- *   sl: 1.091,
- *   tp: 1.086,
- *   commission: 0,
- *   swap: 0,
- *   pnl: 30,
- * };
- * ```
- */
-export type PastTrade = {
-    symbol: string;
-    type: TradeType;
-    startTime: number;
-    closeTime: number;
-    openPrice: number;
-    closePrice: number;
-    volume: number;
-    sl: number | null;
-    tp: number | null;
-    commission: number;
-    swap: number;
-    pnl: number;
-};
 export type TradeLayerEventsOptions = {
     canvas: HTMLCanvasElement;
     getHandleHitboxes: () => TradeHandleHitbox[];
@@ -161,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 = {
-    trade: PastTrade;
-    start: PastTradeIndicatorPoint;
-    close: PastTradeIndicatorPoint;
+export type ClosedTradeIndicatorRenderState = {
+    trade: ClosedTrade;
+    start: ClosedTradeIndicatorPoint;
+    close: ClosedTradeIndicatorPoint;
     arrowWidth: number;
     arrowHeight: number;
 };
@@ -240,13 +205,13 @@ export type DrawHandleSectionsOptions = {
     trade: OpenTrade;
     y: number;
 };
-export type DrawPastTradeArrowOptions = {
+export type DrawClosedTradeArrowOptions = {
     x: number;
     y: number;
-    type: TradeType;
+    type: TradeDirection;
     width: number;
     height: number;
-    config: PastTradeIndicatorArrowConfig;
+    config: ClosedTradeIndicatorArrowConfig;
 };
 export type HandleSection = {
     label: string;

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

@@ -1,8 +1,7 @@
 import { Shape, ShapeAddedPayload, ShapeModifiedPayload, ShapeSelectedPayload, ShapeToolType } from '../canvas/layers/ShapesLayer/ShapesLayer.types';
-import { PastTrade } from '../canvas/layers/TradeLayer/TradeLayer.types';
 import { ChartConfig } from '../config/chartConfig.types';
 import { Candle } from '../models/Candle.types';
-import { OpenTrade } from '../models/Trade.types';
+import { ClosedTrade, OpenTrade } from '../models/Trade.types';
 import { DeepPartial } from './utils/deepPartial.types';
 /**
  * Payload emitted when the user commits a stop-loss or take-profit change.
@@ -45,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`
@@ -67,7 +72,7 @@ export type PreviousDay = {
  *   candles,
  *   liveCandle,
  *   openTrades,
- *   pastTrades,
+ *   closedTrades,
  *   shapes,
  *   activeShapeTool,
  *   onShapeAdded: ({ shape }) => setShapes((prev) => [...prev, shape]),
@@ -117,10 +122,10 @@ export type ChartControllerProps = {
      *
      * @example
      * ```ts
-     * pastTrades: [{ symbol: "EURUSD", type: "sell", startTime: 1716796800000, closeTime: 1716800400000, openPrice: 1.089, closePrice: 1.086, volume: 1, sl: 1.091, tp: 1.086, commission: 0, swap: 0, pnl: 30 }]
+     * 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: PastTrade[];
+    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/index.d.ts

@@ -1,5 +1,5 @@
 export type { PartialShapeConfig, Shape, ShapeAddedPayload, ShapeId, ShapeModifiedPayload, ShapeSelectedPayload, ShapeToolType, ShapeType, ShapeVertex, } from './canvas/layers/ShapesLayer/ShapesLayer.types';
-export type { PastTrade, TradeHandleType, TradeProtectionHandleType, } from './canvas/layers/TradeLayer/TradeLayer.types';
+export type { TradeHandleType, TradeProtectionHandleType, } from './canvas/layers/TradeLayer/TradeLayer.types';
 export type { ChartControllerProps, PreviousDay, TradeModifyPayload, } from './chart/ChartController.types';
 export type { DeepPartial } from './chart/utils/deepPartial.types';
 export type { CanvasPoint } from './chart/utils/getCanvasPoint.types';
@@ -8,7 +8,7 @@ export type { ChartConfig, PreviousDayHighLowConfig } from './config/chartConfig
 export type { Candle } from './models/Candle.types';
 export type { ChartViewport } from './models/ChartViewport.types';
 export type { Point2D } from './models/Point.types';
-export type { BaseTrade, ClosedTrade, OpenTrade, TradeType } from './models/Trade.types';
+export type { BaseTrade, ClosedTrade, OpenTrade, TradeDirection } from './models/Trade.types';
 export type { VisibleRange } from './models/VisibleRange.types';
 export { TradingReload } from './react/TradingReload';
 export type { TradingReloadHandle, TradingReloadProps } from './react/TradingReload.types';

package/dist/models/Trade.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @example `"buy"`
  */
-export type TradeType = "buy" | "sell";
+export type TradeDirection = "buy" | "sell";
 /**
  * Shared trade fields used by open and closed trade records.
  *
@@ -54,7 +54,7 @@ export type BaseTrade = {
      *
      * @example `"buy"`
      */
-    type: TradeType;
+    type: TradeDirection;
     /** Trade open time in milliseconds UTC.
      *
      * @example `1716883200000`

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])}