@pradeepjadhav/trading-reload-chart 1.0.0

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

@@ -0,0 +1,261 @@
+import { MissingTradeProtectionHandleRectConfig, PastTradeIndicatorArrowConfig, TemporaryTradeProtectionHandleRectConfig, TradeHandleLineConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
+import { ChartViewport } from '../../../models/ChartViewport.types';
+import { OpenTrade, TradeType } from '../../../models/Trade.types';
+/**
+ * Type of existing trade handle shown on open positions.
+ *
+ * @example `"stopLoss"`
+ */
+export type TradeHandleType = "startPrice" | "stopLoss" | "takeProfit";
+/**
+ * Type of protection handle used when a trade is missing SL or TP.
+ *
+ * @example `"takeProfit"`
+ */
+export type TradeProtectionHandleType = "stopLoss" | "takeProfit";
+export type TradeHitboxKind = "existingHandle" | "missingProtectionHandle";
+export type TradeHandleArea = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type BaseTradeHandleHitbox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    trade: OpenTrade;
+    type: TradeHandleType;
+    price: number;
+    viewport: ChartViewport;
+    kind?: TradeHitboxKind;
+};
+export type ExistingTradeHandleHitbox = BaseTradeHandleHitbox & {
+    kind?: "existingHandle";
+    labelArea: TradeHandleArea;
+    closeButtonArea: TradeHandleArea;
+};
+export type MissingTradeProtectionHandleHitbox = BaseTradeHandleHitbox & {
+    kind: "missingProtectionHandle";
+    type: TradeProtectionHandleType;
+    labelArea: TradeHandleArea;
+    closeButtonArea: TradeHandleArea;
+};
+export type TradeHandleHitbox = ExistingTradeHandleHitbox | MissingTradeProtectionHandleHitbox;
+export type TemporaryTradeProtectionDrag = {
+    visible: boolean;
+    trade: OpenTrade;
+    type: TradeProtectionHandleType;
+    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[];
+    /**
+     * Returns the current market price (latest candle close / live candle close).
+     * Used to enforce TP/SL constraints during drag.
+     */
+    getCurrentPrice?: () => number;
+    onDrag?: (payload: {
+        trade: OpenTrade;
+        type: TradeHandleType;
+        price: number;
+    }) => void;
+    onMissingProtectionDrag?: (payload: {
+        trade: OpenTrade;
+        type: TradeProtectionHandleType;
+        price: number;
+    }) => void;
+    onMissingProtectionDragEnd?: (payload: {
+        trade: OpenTrade;
+        type: TradeProtectionHandleType;
+        price: number;
+    }) => void;
+    onMissingProtectionDragCancel?: () => void;
+    onTradeModified?: (payload: {
+        ticket: number;
+        tp?: number | null;
+        sl?: number | null;
+    }) => void;
+    onTradeCloseClicked?: (payload: {
+        ticket: number;
+        volume?: number;
+    }) => void;
+};
+export type TradeLayerOptions = {
+    canvas: HTMLCanvasElement;
+};
+export type TradeHandleRenderState = {
+    price: number;
+    type: TradeHandleType;
+    trade: OpenTrade;
+    viewport: ChartViewport;
+    y: number;
+    handleStyleConfig: TradeHandleStyleConfig;
+    handleConfig: TradeHandleRectConfig;
+    lineConfig: TradeHandleLineConfig;
+    handleX: number;
+    handleY: number;
+    handleWidth: number;
+    handleHeight: number;
+};
+export type MissingProtectionHandleRenderState = {
+    price: number;
+    type: TradeProtectionHandleType;
+    trade: OpenTrade;
+    viewport: ChartViewport;
+    y: number;
+    config: MissingTradeProtectionHandleRectConfig;
+    handleX: number;
+    handleY: number;
+    handleWidth: number;
+    handleHeight: number;
+};
+export type TemporaryProtectionRenderState = {
+    price: number;
+    type: TradeProtectionHandleType;
+    trade: OpenTrade;
+    viewport: ChartViewport;
+    y: number;
+    handleConfig: TemporaryTradeProtectionHandleRectConfig;
+    lineConfig: TradeHandleLineConfig;
+    handleX: number;
+    handleY: number;
+    handleWidth: number;
+    handleHeight: number;
+};
+export type PastTradeIndicatorPoint = {
+    x: number;
+    y: number;
+    price: number;
+    time: number;
+};
+export type PastTradeIndicatorRenderState = {
+    trade: PastTrade;
+    start: PastTradeIndicatorPoint;
+    close: PastTradeIndicatorPoint;
+    arrowWidth: number;
+    arrowHeight: number;
+};
+export type DrawTradeHandleOptions = {
+    price: number;
+    type: TradeHandleType;
+    trade: OpenTrade;
+};
+export type CreateHitBoxOptions = {
+    price: number;
+    trade: OpenTrade;
+    type: TradeHandleType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    viewport: ChartViewport;
+};
+export type CreateMissingProtectionHitBoxOptions = {
+    price: number;
+    trade: OpenTrade;
+    type: TradeProtectionHandleType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    viewport: ChartViewport;
+};
+export type DrawHandleLineOptions = {
+    x1: number;
+    x2: number;
+    y: number;
+    config: TradeHandleLineConfig;
+};
+export type DrawConnectorLineOptions = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    config: TradeHandleLineConfig;
+};
+export type DrawHandleRectOptions = {
+    x: number;
+    y: number;
+    width: number;
+    config: TradeHandleRectConfig;
+};
+export type DrawMissingProtectionHandleRectOptions = {
+    x: number;
+    y: number;
+    width: number;
+    config: MissingTradeProtectionHandleRectConfig;
+};
+export type DrawTemporaryProtectionHandleRectOptions = {
+    x: number;
+    y: number;
+    width: number;
+    config: TemporaryTradeProtectionHandleRectConfig;
+};
+export type DrawHandleSectionsOptions = {
+    handleType: TradeHandleType;
+    handleX: number;
+    handleY: number;
+    handleWidth: number;
+    handleHeight: number;
+    handleConfig: TradeHandleRectConfig;
+    trade: OpenTrade;
+    y: number;
+};
+export type DrawPastTradeArrowOptions = {
+    x: number;
+    y: number;
+    type: TradeType;
+    width: number;
+    height: number;
+    config: PastTradeIndicatorArrowConfig;
+};
+export type HandleSection = {
+    label: string;
+    width: number;
+    visible: boolean;
+    color?: string;
+};
+export type LineBlockedRange = {
+    x1: number;
+    x2: number;
+};
+export {};

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

@@ -0,0 +1,68 @@
+import { TradeLayerEventsOptions } from './TradeLayer.types';
+export declare class TradeLayerEvents {
+    #private;
+    constructor(options: TradeLayerEventsOptions);
+    cancelActiveInteraction(): void;
+    handlePointerEvent(event: PointerEvent | WheelEvent | MouseEvent): boolean;
+    private isSupportedEventType;
+    /**
+     * Converts a pointer event's client coordinates into canvas-pixel space.
+     *
+     * The canvas backing-store dimensions (canvas.width / canvas.height) may differ
+     * from the CSS-rendered size reported by getBoundingClientRect when the browser
+     * zoom level is not 100 %, when the container has sub-pixel fractional dimensions,
+     * or when DPR scaling is applied. Without the explicit scale factors the hit-test
+     * geometry (built in canvas-pixel space via priceToY) and the mouse position
+     * would live in different coordinate spaces, causing the handle to appear to
+     * lag or lead the cursor.
+     */
+    private getCanvasMousePoint;
+    private handleActiveDrag;
+    private handleActiveMissingProtectionDrag;
+    /**
+     * Converts the current absolute canvas-pixel Y position to a price using the
+     * viewport captured at drag-start, then applies TP/SL constraints.
+     *
+     * Using an absolute calculation (startPrice − totalDeltaY × pricePerPixel)
+     * instead of an incremental one (price_{n-1} − deltaY_{n} × pricePerPixel)
+     * avoids the accumulated normalizePrice quantization errors that cause the
+     * handle to lag the cursor when moving slowly or when heavily zoomed in.
+     */
+    private getNextDragPrice;
+    private getNextMissingProtectionPrice;
+    private handleDragEnd;
+    private handleMissingProtectionDragEnd;
+    private modifyActiveDragTrade;
+    private getHoveredHitbox;
+    private handleHoveredHitbox;
+    private handleMissingProtectionHandleHover;
+    private handleCloseButtonHover;
+    private handleCloseButtonClick;
+    private updateHandleCursor;
+    private startDrag;
+    private startMissingProtectionDrag;
+    private resetCursorIfIdle;
+    private isPointInsideArea;
+    private isProtectionHandleType;
+    /**
+     * Constrains a dragged existing TP/SL price to valid levels.
+     *
+     * TP rules:
+     *   - Buy:  price must be ≥ max(openPrice, currentMarketPrice)
+     *   - Sell: price must be ≤ min(openPrice, currentMarketPrice)
+     *
+     * SL rules (trailing SL is permitted — SL may cross the open price):
+     *   - Buy:  price must be ≤ currentMarketPrice  (cannot reach the profit side)
+     *   - Sell: price must be ≥ currentMarketPrice
+     */
+    private constrainExistingProtectionPrice;
+    /**
+     * Constrains a missing-protection handle drag price.
+     *
+     * TP: same side-of-market rules as constrainExistingProtectionPrice.
+     * SL: must not cross currentMarketPrice (trailing SL allowed — no openPrice floor).
+     */
+    private constrainProtectionPrice;
+    private isBuyTrade;
+    private consumeEvent;
+}

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

@@ -0,0 +1,12 @@
+export declare const TRADE_LAYER_EVENT_TYPES_TO_HANDLE: readonly ["pointerdown", "pointermove", "pointerup"];
+export type SupportedPointerEventType = (typeof TRADE_LAYER_EVENT_TYPES_TO_HANDLE)[number];
+export type CanvasMousePoint = {
+    x: number;
+    y: number;
+};
+export type HitboxArea = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,28 @@
+import { Candle } from '../../../models/Candle.types';
+import { ChartViewport } from '../../../models/ChartViewport.types';
+import { VolumeLayerOptions } from './VolumeLayer.types';
+export declare class VolumeLayer {
+    #private;
+    candles: Candle[];
+    viewport: ChartViewport | null;
+    bullishColor: string;
+    bearishColor: string;
+    opacity: number;
+    height: number;
+    bottomOffset: number;
+    minBarHeight: number;
+    constructor(options: VolumeLayerOptions);
+    setCandles(candles: Candle[]): void;
+    setLiveCandle(_candle: Candle | null | undefined): void;
+    setViewport(viewport: ChartViewport): void;
+    render(): void;
+    private drawVolumeBars;
+    private drawSingleVolumeBar;
+    private getVisibleRange;
+    private getCandleX;
+    private getMaxVolume;
+    private getVolumeAreaHeight;
+    private getVolumeBarColor;
+    private clampOpacity;
+    private clearCanvas;
+}

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

@@ -0,0 +1,25 @@
+import { Candle } from '../../../models/Candle.types';
+export type VolumeLayerOptions = {
+    canvas: HTMLCanvasElement;
+    candles: Candle[];
+    bullishColor?: string;
+    bearishColor?: string;
+    opacity?: number;
+    height?: number;
+    bottomOffset?: number;
+    minBarHeight?: number;
+};
+export type DrawVolumeBarsOptions = {
+    ctx: CanvasRenderingContext2D;
+    candles: Candle[];
+    startIndex: number;
+    maxVolume: number;
+    chartHeight: number;
+};
+export type DrawSingleVolumeBarOptions = {
+    ctx: CanvasRenderingContext2D;
+    candle: Candle;
+    candleX: number;
+    maxVolume: number;
+    chartHeight: number;
+};

package/dist/canvas/layers/helpers/LayerHelpers.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Converts a market price value
+ * into canvas Y coordinate.
+ *
+ * Shared helper used by multiple layers
+ * such as:
+ *
+ * - ExistingCandlesLayer
+ * - TradeLayer
+ * - AxisLayerY
+ */
+export declare const priceToY: ({ price, minPrice, priceRange, chartHeight, }: {
+    price: number;
+    minPrice: number;
+    priceRange: number;
+    chartHeight: number;
+}) => number;
+/**
+ * Converts a canvas Y coordinate
+ * into a market price value.
+ *
+ * Used by the crosshair labels.
+ */
+export declare const yToPrice: ({ y, minPrice, priceRange, chartHeight, }: {
+    y: number;
+    minPrice: number;
+    priceRange: number;
+    chartHeight: number;
+}) => number;

package/dist/chart/ChartController.d.ts

@@ -0,0 +1,8 @@
+import { ChartControllerProps } from './ChartController.types';
+export declare class ChartController {
+    #private;
+    constructor(container: HTMLElement, props: ChartControllerProps);
+    updateProps(props: ChartControllerProps): void;
+    resetChartView(): void;
+    destroy(): void;
+}

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

@@ -0,0 +1,224 @@
+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 { DeepPartial } from './utils/deepPartial.types';
+/**
+ * Payload emitted when the user commits a stop-loss or take-profit change.
+ *
+ * @example
+ * ```ts
+ * const payload: TradeModifyPayload = {
+ *   ticket: 101245,
+ *   sl: 1.0835,
+ *   tp: 1.091,
+ * };
+ * ```
+ */
+export type TradeModifyPayload = {
+    /** Trade ticket identifier.
+     *
+     * @example `101245`
+     */
+    ticket: number;
+    /** New stop-loss value, or `null` to clear it.
+     *
+     * @example `1.0835`
+     */
+    sl?: number | null;
+    /** New take-profit value, or `null` to clear it.
+     *
+     * @example `1.091`
+     */
+    tp?: number | null;
+};
+/**
+ * Previous day high and low values used by overlays or external tooling.
+ *
+ * @example
+ * ```ts
+ * const previousDay: PreviousDay = {
+ *   high: 1.0924,
+ *   low: 1.0811,
+ * };
+ * ```
+ */
+export type PreviousDay = {
+    /** Previous day high price.
+     *
+     * @example `1.0924`
+     */
+    high: number;
+    /** Previous day low price.
+     *
+     * @example `1.0811`
+     */
+    low: number;
+};
+/**
+ * Controlled props consumed by the internal chart controller and by
+ * {@link TradingReload}.
+ *
+ * @example
+ * ```ts
+ * const props: ChartControllerProps = {
+ *   activeSymbol: "EURUSD",
+ *   candles,
+ *   liveCandle,
+ *   openTrades,
+ *   pastTrades,
+ *   shapes,
+ *   activeShapeTool,
+ *   onShapeAdded: ({ shape }) => setShapes((prev) => [...prev, shape]),
+ *   onActiveShapeToolChange: setActiveShapeTool,
+ * };
+ * ```
+ */
+export type ChartControllerProps = {
+    /**
+     * Trading symbol for the current chart.
+     *
+     * @example `"EURUSD"`
+     */
+    activeSymbol: string;
+    /**
+     * Historical candles shown by the chart.
+     *
+     * `time` values are expected in UTC milliseconds unless you also pass
+     * `brokerTimezoneOffsetMs`.
+     *
+     * @example
+     * ```ts
+     * candles: [{ time: 1716883200000, open: 1.084, high: 1.086, low: 1.083, close: 1.085, volume: 1200, ask: 1.0851, isClosed: true }]
+     * ```
+     */
+    candles: Candle[];
+    /**
+     * Forming realtime candle. Pass `null` when there is no live update.
+     *
+     * @example
+     * ```ts
+     * liveCandle: { time: 1716884100000, open: 1.085, high: 1.0862, low: 1.0848, close: 1.086, volume: 320, ask: 1.0861, isClosed: false }
+     * ```
+     */
+    liveCandle: Candle | null;
+    /**
+     * Parent-owned list of currently open trades rendered on the chart.
+     *
+     * @example
+     * ```ts
+     * openTrades: [{ ticket: 101245, symbol: "EURUSD", volume: 0.5, sl: 1.0835, tp: 1.091, type: "buy", openTime: 1716883200000, openPrice: 1.085, commission: 0, swap: 0, pnl: 12.5, status: "open" }]
+     * ```
+     */
+    openTrades: OpenTrade[];
+    /**
+     * Completed trades rendered as historical markers.
+     *
+     * @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 }]
+     * ```
+     */
+    pastTrades: PastTrade[];
+    /**
+     * Parent-owned shapes rendered and edited by the chart.
+     *
+     * @example
+     * ```ts
+     * shapes: [{ id: "shape-1", type: "trendline", vertices: [{ time: 1716883200000, price: 1.084 }, { time: 1716886800000, price: 1.088 }] }]
+     * ```
+     */
+    shapes: Shape[];
+    /**
+     * Currently active drawing tool, or `null` when shape creation is disabled.
+     *
+     * @example `"rectangle"`
+     */
+    activeShapeTool: ShapeToolType | null;
+    /**
+     * Partial chart config merged on top of the library defaults.
+     *
+     * @example
+     * ```ts
+     * config: { colors: { background: "#0d1117" }, candles: { defaultWidth: 10 } }
+     * ```
+     */
+    config?: DeepPartial<ChartConfig>;
+    /**
+     * Optional broker timezone offset used to normalize broker-encoded candle
+     * timestamps.
+     *
+     * @example `19800000`
+     */
+    brokerTimezoneOffsetMs?: number;
+    /**
+     * Optional previous day high/low values for related overlays.
+     *
+     * @example
+     * ```ts
+     * previousDay: { high: 1.0924, low: 1.0811 }
+     * ```
+     */
+    previousDay?: PreviousDay | null;
+    /**
+     * Called after the user completes a brand-new shape.
+     *
+     * @example
+     * ```ts
+     * onShapeAdded: ({ shape }) => setShapes((prev) => [...prev, shape])
+     * ```
+     */
+    onShapeAdded?: (payload: ShapeAddedPayload) => void;
+    /**
+     * Called after the user edits an existing shape.
+     *
+     * @example
+     * ```ts
+     * onShapeModified: ({ id, shape }) => updateShape(id, shape)
+     * ```
+     */
+    onShapeModified?: (payload: ShapeModifiedPayload) => void;
+    /**
+     * Called when the selected shape changes, or `null` when selection clears.
+     *
+     * @example
+     * ```ts
+     * onShapeSelected: (payload) => setSelectedShape(payload?.shapeId ?? null)
+     * ```
+     */
+    onShapeSelected?: (payload: ShapeSelectedPayload | null) => void;
+    /**
+     * Called when the chart wants the parent to change the active drawing tool.
+     *
+     * The chart sends `null` after a completed draw or Escape/cancel path.
+     *
+     * @example
+     * ```ts
+     * onActiveShapeToolChange: setActiveShapeTool
+     * ```
+     */
+    onActiveShapeToolChange?: (tool: ShapeToolType | null) => void;
+    /**
+     * Called when the user commits an SL/TP modification on pointer release.
+     *
+     * @example
+     * ```ts
+     * onTradeModify: async ({ ticket, sl, tp }) => {
+     *   await api.modifyTrade({ ticket, sl, tp });
+     * }
+     * ```
+     */
+    onTradeModify?: (payload: TradeModifyPayload) => void;
+    /**
+     * Called when the user clicks the close button on a trade handle.
+     *
+     * @example
+     * ```ts
+     * onTradeClose: ({ ticket }) => api.closeTrade(ticket)
+     * ```
+     */
+    onTradeClose?: (payload: {
+        ticket: number;
+    }) => void;
+};

package/dist/chart/createChartDom.d.ts

@@ -0,0 +1,2 @@
+import { ChartDomElements } from './createChartDom.types';
+export declare const createChartDom: (container: HTMLElement, backgroundColor: string) => ChartDomElements;

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

@@ -0,0 +1,13 @@
+export type ChartDomElements = {
+    root: HTMLDivElement;
+    layout: HTMLDivElement;
+    stack: HTMLDivElement;
+    volumeCanvas: HTMLCanvasElement;
+    candleCanvas: HTMLCanvasElement;
+    shapesCanvas: HTMLCanvasElement;
+    tradesCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
+    axisXCanvas: HTMLCanvasElement;
+    axisYCanvas: HTMLCanvasElement;
+    interactionTarget: HTMLDivElement;
+};

package/dist/chart/utils/deepPartial.types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Recursive partial type used for config overrides.
+ *
+ * @example
+ * ```ts
+ * const config: DeepPartial<ChartConfig> = {
+ *   colors: { background: "#0d1117" },
+ *   candles: { defaultWidth: 10 },
+ * };
+ * ```
+ */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};

package/dist/chart/utils/getCanvasPoint.d.ts

@@ -0,0 +1,2 @@
+import { CanvasPoint } from './getCanvasPoint.types';
+export declare const getCanvasPoint: (canvas: HTMLCanvasElement, event: PointerEvent | MouseEvent) => CanvasPoint;