@pradeepjadhav/trading-reload-chart 1.0.0

package/LICENSE

@@ -0,0 +1,87 @@
+Trading Reload Chart Commercial License
+
+Copyright (c) 2026 Pradeep Jadhav. All rights reserved.
+
+This software, including all source code, compiled code, assets, documentation,
+and related materials (collectively, the "Software"), is proprietary and is
+owned exclusively by Pradeep Jadhav.
+
+1. No open source grant
+
+No rights are granted under any open source license. Access to, download of,
+installation of, or possession of the Software does not grant any right to use,
+copy, modify, create derivative works of, distribute, sublicense, resell,
+lease, rent, assign, transfer, disclose, or make the Software available to any
+third party, except as expressly authorized in a separate written commercial
+agreement issued by Pradeep Jadhav.
+
+2. Commercial use only with a paid license
+
+Any use of the Software requires a valid paid commercial license, subscription,
+or other written authorization from Pradeep Jadhav. License scope, permitted
+features, deployment limits, seat limits, environments, and subscription plan
+restrictions may vary by purchased plan or written agreement.
+
+3. Feature tiers and restrictions
+
+Pradeep Jadhav may offer the Software under different commercial plans, tiers,
+or feature sets. Your rights are limited to the plan you purchased. Use of
+features outside your purchased plan is prohibited unless separately authorized
+in writing.
+
+4. Ownership
+
+Pradeep Jadhav retains all worldwide right, title, and interest, including all
+copyrights, trade secrets, trademarks, and all other intellectual property
+rights, in and to the Software and all modifications, updates, enhancements,
+and derivative works, to the maximum extent permitted by law. No ownership is
+transferred to you.
+
+5. Restrictions
+
+Unless expressly authorized in a separate written agreement, you may not:
+
+- use the Software in production or for internal business purposes;
+- copy or redistribute the Software;
+- modify, adapt, translate, or create derivative works;
+- reverse engineer, decompile, disassemble, or attempt to extract non-public
+  logic, except to the limited extent such restriction is prohibited by
+  applicable law;
+- remove or alter proprietary notices;
+- use the Software to build a competing product or service;
+- publish benchmarks or security analysis without prior written permission.
+
+6. Termination
+
+Any unauthorized use automatically terminates any rights you may have to the
+Software. Upon termination, you must immediately cease use of the Software and
+delete all copies in your possession or control, unless a separate written
+agreement states otherwise.
+
+7. Warranty disclaimer
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE SOFTWARE IS PROVIDED "AS IS" AND
+"AS AVAILABLE", WITHOUT WARRANTIES OF ANY KIND, WHETHER EXPRESS, IMPLIED,
+STATUTORY, OR OTHERWISE, INCLUDING IMPLIED WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, TITLE, AND NON-INFRINGEMENT.
+
+8. Limitation of liability
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, PRADEEP JADHAV SHALL NOT BE LIABLE FOR
+ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE
+DAMAGES, OR FOR ANY LOSS OF DATA, PROFITS, REVENUE, BUSINESS, GOODWILL, OR
+BUSINESS INTERRUPTION, ARISING OUT OF OR RELATED TO THE SOFTWARE OR THIS
+LICENSE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. TO THE MAXIMUM
+EXTENT PERMITTED BY LAW, THE TOTAL LIABILITY OF PRADEEP JADHAV FOR ANY CLAIM
+RELATING TO THE SOFTWARE SHALL NOT EXCEED THE AMOUNT PAID BY YOU FOR THE
+APPLICABLE LICENSE DURING THE TWELVE (12) MONTHS PRECEDING THE CLAIM.
+
+9. Reservation of rights
+
+All rights not expressly granted in a separate written commercial agreement are
+reserved by Pradeep Jadhav.
+
+10. Contact
+
+For commercial licensing, subscriptions, or enterprise terms, contact Pradeep
+Jadhav through the project repository or your negotiated business channel.

package/README.md

@@ -0,0 +1,256 @@
+# 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.
+
+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.
+
+For architecture, conventions, and agent guidelines, see [AGENTS.md](./AGENTS.md).
+
+---
+
+## Requirements
+
+- Node.js 18+
+- npm (or compatible package manager)
+- React **18.3+** or **19** (peer dependency when consuming the library)
+
+---
+
+## Quick start (local development)
+
+1. **Clone and install**
+
+```bash
+git clone <repository-url>
+cd trading-reload-chart
+npm install
+```
+
+2. **Run the demo** (hot reload, port **8999** by default)
+
+```bash
+npm run dev
+```
+
+Open the URL Vite prints (typically `http://localhost:8999`). The demo mounts `TradingReload` with sample API/WebSocket wiring in `demo/`.
+
+3. **Optional checks**
+
+```bash
+npm run typecheck   # TypeScript
+npm run lint        # Biome
+npm run format      # Biome format
+```
+
+---
+
+## Build commands
+
+| Script               | Purpose                                     |
+| -------------------- | ------------------------------------------- |
+| `npm run dev`        | Demo app from source (`demo/main.tsx`)      |
+| `npm run build`      | **Library** build → `dist/` (ESM + `.d.ts`) |
+| `npm run build:demo` | Static **demo** site build                  |
+| `npm run preview`    | Preview last Vite build                     |
+
+### Production library build
+
+```bash
+npm run build
+```
+
+Output (gitignored):
+
+- `dist/trading-reload-chart.js` — ESM bundle (React externalized)
+- `dist/index.d.ts` — public TypeScript declarations
+
+`package.json` exposes the library via `"exports"`, `"main"`, `"module"`, and `"types"`. Only `dist/` is included in `"files"` for publishing.
+
+### Demo production build
+
+```bash
+npm run build:demo
+npm run preview
+```
+
+---
+
+## Using the library in React / Next.js
+
+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
+npm run build
+npm pack
+# In your app
+npm install /path/to/trading-reload-chart/trading-reload-chart-1.0.0.tgz
+```
+
+Or link during development:
+
+```bash
+cd trading-reload-chart && npm run build && npm link
+cd your-app && npm link trading-reload-chart
+```
+
+### 2. Next.js App Router
+
+Use a client boundary. The component already includes `"use client"`.
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import {
+  TradingReload,
+  type Candle,
+  type Shape,
+  type ShapeToolType,
+  type OpenTrade,
+} from "trading-reload-chart";
+
+export function ChartPanel() {
+  const [candles, setCandles] = useState<Candle[]>([]);
+  const [shapes, setShapes] = useState<Shape[]>([]);
+  const [activeShapeTool, setActiveShapeTool] = useState<ShapeToolType | null>(
+    null,
+  );
+
+  return (
+    <div className="h-full w-full min-h-[400px]">
+      <TradingReload
+        activeSymbol="EURUSD"
+        candles={candles}
+        shapes={shapes}
+        activeShapeTool={activeShapeTool}
+        onShapeAdded={(payload) => {
+          setShapes((prev) => [...prev, payload.shape]);
+          setActiveShapeTool(null);
+        }}
+        onActiveShapeToolChange={setActiveShapeTool}
+      />
+    </div>
+  );
+}
+```
+
+- Give the parent a **defined height** (flex child, `h-full`, or fixed `min-height`). `TradingReload` fills **100%** of that container.
+- Do **not** import chart CSS manually; styles ship with the component (`src/styles/chart.css`).
+
+### 3. Vite / Create React App
+
+Same import; wrap the chart in a sized container:
+
+```tsx
+import { TradingReload, type Candle } from "trading-reload-chart";
+
+export function App() {
+  return (
+    <div style={{ width: "100%", height: "100vh" }}>
+      <TradingReload
+        activeSymbol="EURUSD"
+        candles={candles}
+        shapes={[]}
+        activeShapeTool={null}
+      />
+    </div>
+  );
+}
+```
+
+### 4. Public API surface
+
+Import from the package root:
+
+| Export                                       | Description          |
+| -------------------------------------------- | -------------------- |
+| `TradingReload`                              | Main React component |
+| `TradingReloadProps`                         | Component props      |
+| `Candle`, `OpenTrade`, `ClosedTrade`, …      | Domain types         |
+| `Shape`, `ShapeToolType`, shape payloads     | Drawing types        |
+| `ChartConfig`, `CHART_CONFIG`, `DeepPartial` | Configuration        |
+| `PastTradeIndicator`, trade handle types     | Trade overlay types  |
+
+Controlled props (parent owns state): `candles`, `liveCandle`, `openTrades`, `pastTrades`, `shapes`, `activeShapeTool`, `config`, `activeSymbol`.
+
+Callbacks: `onShapeAdded`, `onShapeModified`, `onActiveShapeToolChange`, `onTradeModify`.
+
+See [AGENTS.md](./AGENTS.md) for the full props contract.
+
+---
+
+## Project layout
+
+```txt
+trading-reload-chart/
+├── demo/                 # Dev harness (API/WebSocket); not published
+├── src/
+│   ├── index.ts          # Public exports
+│   ├── react/            # TradingReload component
+│   ├── chart/            # ChartController, DOM, utils
+│   ├── canvas/layers/    # Canvas layers (candles, shapes, trades, …)
+│   ├── config/           # CHART_CONFIG and types
+│   ├── models/           # Candle, Trade, ChartViewport, … (*.types.ts)
+│   ├── helpers/          # Shared pure utilities
+│   ├── core/             # Coordinate math
+│   └── styles/           # chart.css
+├── dist/                 # Library build output
+├── AGENTS.md
+└── vite.config.ts        # `dev` = demo; `build --mode library` = package
+```
+
+Type declarations live in **`*.types.ts`** files next to implementation code (see AGENTS.md).
+
+---
+
+## Features
+
+- Layered canvas rendering (volume, candles, shapes, trades, axes, crosshair)
+- 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
+- Deep-merge chart `config` over defaults
+
+---
+
+## Interaction
+
+| Action                 | Result                                        |
+| ---------------------- | --------------------------------------------- |
+| Drag                   | Pan chart                                     |
+| Mouse wheel            | Horizontal zoom                               |
+| Ctrl + wheel           | Vertical zoom                                 |
+| Move pointer           | Crosshair + axis labels                       |
+| Escape (while drawing) | Cancel tool (`onActiveShapeToolChange(null)`) |
+
+---
+
+## Browser support
+
+Modern evergreen browsers with Canvas 2D (Chrome, Edge, Firefox, Safari).
+
+---
+
+## License
+
+Commercial, proprietary license. Use of this library requires a paid license,
+subscription, or other written authorization from Pradeep Jadhav. See
+[LICENSE](./LICENSE).

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

@@ -0,0 +1,27 @@
+import { Candle } from '../../../models/Candle.types';
+import { ChartViewport } from '../../../models/ChartViewport.types';
+import { AxisLayerXCrosshair, AxisLayerXOptions } from './AxisLayerX.types';
+export declare class AxisLayerX {
+    #private;
+    candles: Candle[];
+    viewport: ChartViewport | null;
+    crosshair: AxisLayerXCrosshair;
+    constructor(options: AxisLayerXOptions);
+    setCandles(candles: Candle[]): void;
+    setViewport(viewport: ChartViewport): void;
+    setCrosshair(crosshair: AxisLayerXCrosshair): void;
+    hideCrosshair(): void;
+    render(): void;
+    drawCrosshairTimeLabel(): void;
+    private clearCanvas;
+    private drawBackground;
+    private drawTopBorder;
+    private drawAxisLabels;
+    private getVisibleCandleIndexRange;
+    private getSlotTime;
+    private getCandleCenterX;
+    private isLabelOutsideCanvas;
+    private drawTick;
+    private drawLabel;
+    private getCrosshairLabelX;
+}

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

@@ -0,0 +1,32 @@
+import { Candle } from '../../../models/Candle.types';
+/**
+ * Detect candle timeframe from the data.
+ * Uses median of the first few inter-candle gaps to be robust against gaps.
+ */
+export declare const detectCandleTimeframeMs: (candles: Candle[]) => number;
+/**
+ * Pick the smallest nice interval (in ms) that keeps labels from overlapping.
+ */
+export declare const getXAxisNiceIntervalMs: ({ candleSpacing, candleTimeframeMs, labelWidth, minLabelGap, }: {
+    candleSpacing: number;
+    candleTimeframeMs: number;
+    labelWidth: number;
+    minLabelGap: number;
+}) => number;
+/**
+ * Returns true when a timestamp is aligned to the given interval boundary
+ * using local (browser) time values, so labels display at round local times.
+ */
+export declare const isAlignedToInterval: (timestamp: number, intervalMs: number) => boolean;
+/**
+ * Format a timestamp for the X axis.
+ * At midnight (00:00 local) shows the day-of-month number (e.g. "15")
+ * so the viewer knows a new day started.
+ * All other times show HH:MM.
+ */
+export declare const formatXAxisLabel: (timestamp: number) => string;
+/**
+ * Full date + time format for the crosshair tooltip.
+ * Example: "Wed 15 May 10.35"
+ */
+export declare const formatTimeDayDateHHMM: (timestamp: number) => string;

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

@@ -0,0 +1,10 @@
+import { Candle } from '../../../models/Candle.types';
+export type AxisLayerXOptions = {
+    canvas: HTMLCanvasElement;
+    candles: Candle[];
+};
+export type AxisLayerXCrosshair = {
+    visible: boolean;
+    x: number;
+    candle: Candle | null;
+};

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

@@ -0,0 +1,23 @@
+import { ChartViewport } from '../../../models/ChartViewport.types';
+import { AxisLayerYCrosshair, AxisLayerYOptions } from './AxisLayerY.types';
+export declare class AxisLayerY {
+    #private;
+    viewport: ChartViewport | null;
+    crosshair: AxisLayerYCrosshair;
+    constructor(options: AxisLayerYOptions);
+    setViewport(viewport: ChartViewport): void;
+    setCrosshair(crosshair: AxisLayerYCrosshair): void;
+    hideCrosshair(): void;
+    render(): void;
+    drawCrosshairPriceLabel(): void;
+    private clearCanvas;
+    private drawBackground;
+    private drawLeftBorder;
+    private drawPriceLabels;
+    private getVisiblePriceRange;
+    private getPriceY;
+    private isPriceOutsideCanvas;
+    private drawTick;
+    private drawPriceLabel;
+    private getCrosshairLabelY;
+}

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

@@ -0,0 +1,4 @@
+export declare const getPriceStep: ({ priceRange, canvasHeight }: {
+    priceRange: number;
+    canvasHeight: number;
+}) => number;

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

@@ -0,0 +1,8 @@
+export type AxisLayerYOptions = {
+    canvas: HTMLCanvasElement;
+};
+export type AxisLayerYCrosshair = {
+    visible: boolean;
+    y: number;
+    price: number;
+};

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

@@ -0,0 +1,23 @@
+import { CrosshairLayerOptions, CrosshairStyle, UpdateMousePositionOptions } from './CrosshairLayer.types';
+export declare class CrosshairLayer {
+    #private;
+    mouseX: number;
+    mouseY: number;
+    visible: boolean;
+    crosshairColor: string;
+    crosshairThickness: number;
+    crosshairStyle: CrosshairStyle;
+    constructor(options: CrosshairLayerOptions);
+    updateMousePosition(x: number, y: number, options?: UpdateMousePositionOptions): void;
+    hide(): void;
+    applyCrosshairStyle(): void;
+    drawVerticalCrosshairLine(ctx: CanvasRenderingContext2D, height: number): void;
+    drawHorizontalCrosshairLine(ctx: CanvasRenderingContext2D, width: number): void;
+    render(): void;
+    private getLocalCanvasPoint;
+    private clampX;
+    private clampY;
+    private clamp;
+    private getLineDash;
+    private drawLine;
+}

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

@@ -0,0 +1,10 @@
+export type CrosshairStyle = "solid" | "dashed" | "dotted";
+export type CrosshairLayerOptions = {
+    canvas: HTMLCanvasElement;
+    crosshairColor?: string;
+    crosshairThickness?: number;
+    crosshairStyle?: CrosshairStyle;
+};
+export type UpdateMousePositionOptions = {
+    snapX?: number;
+};

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

@@ -0,0 +1,107 @@
+import { Candle } from '../../models/Candle.types';
+import { ChartViewport } from '../../models/ChartViewport.types';
+import { VisibleRange } from '../../models/VisibleRange.types';
+import { DrawCandlesOptions, DrawPriceLineOptions, DrawSingleCandleOptions, ExistingCandlesLayerOptions } from './ExistingCandlesLayer.types';
+export declare class ExistingCandlesLayer {
+    #private;
+    candles: Candle[];
+    baseCandleWidth: number;
+    baseCandleGap: number;
+    bullishColor: string;
+    bearishColor: string;
+    /**
+     * Camera horizontal offset
+     */
+    offsetX: number;
+    /**
+     * Horizontal zoom level
+     */
+    zoomX: number;
+    /**
+     * Camera vertical range
+     */
+    priceRange: number;
+    /**
+     * Camera vertical center
+     */
+    priceCenter: number;
+    /**
+     * Baseline range used to calculate
+     * percentage-based vertical zoom limits.
+     */
+    initialPriceRange: number;
+    /**
+     * Auto-follow feature enabled
+     */
+    autoFollowLatestCandle: boolean;
+    /**
+     * Runtime follow state
+     */
+    isFollowingLatest: boolean;
+    /**
+     * Threshold from right edge
+     * where auto-follow activates
+     */
+    autoFollowThresholdCandles: number;
+    /**
+     * Empty candle spacing
+     * on right side
+     */
+    rightOffsetCandles: number;
+    constructor(options: ExistingCandlesLayerOptions);
+    initializeViewport(): void;
+    isWithinAutoFollowThreshold(): boolean;
+    updateLiveCandle(candle: Candle): void;
+    get candleWidth(): number;
+    get candleGap(): number;
+    get candleSpacing(): number;
+    get minPrice(): number;
+    get maxPrice(): number;
+    get liveCandle(): Candle;
+    get viewport(): ChartViewport;
+    getVisibleRange(chartWidth: number): VisibleRange;
+    getCandleX(candleIndex: number): number;
+    getCandleCenterX(candleIndex: number): number;
+    getNearestCandleIndexByX(x: number): number | null;
+    /**
+     * Returns the grid-snapped canvas X for any position,
+     * including positions beyond the last candle (unclamped).
+     */
+    getRawCandleSnapX(x: number): number;
+    getPriceAtY(y: number): number;
+    panHorizontally(deltaX: number): void;
+    panVertically(deltaY: number): void;
+    zoomHorizontally(delta: number): void;
+    zoomVertically(delta: number): void;
+    resetView(): void;
+    render(): void;
+    drawCandles({ ctx, candles, startIndex, chartHeight }: DrawCandlesOptions): void;
+    drawSingleCandle({ ctx, candleX, openY, closeY, highY, lowY, candleColor }: DrawSingleCandleOptions): void;
+    private drawPriceLine;
+    drawBidPriceLine({ ctx, chartWidth, chartHeight }: DrawPriceLineOptions): void;
+    drawAskPriceLine({ ctx, chartWidth, chartHeight }: DrawPriceLineOptions): void;
+    private getDefaultOffsetX;
+    private getTotalChartWidth;
+    private getRightOffsetPixels;
+    private getRightGap;
+    private setFallbackViewport;
+    private getInitialVisibleCandles;
+    private getCandlesPriceBounds;
+    private getInitialPriceRange;
+    private getInitialFallbackPercent;
+    private detectCandleTimeframeMs;
+    private applyManualViewportOverrides;
+    private closeLastCandle;
+    private appendLiveCandle;
+    private updateAutoFollowAfterAppend;
+    private clampCandleIndex;
+    private getRightEdgeCandleIndex;
+    private getNextHorizontalZoom;
+    private getNextVerticalPriceRange;
+    private clearCanvas;
+    private getCandleColor;
+    private getCandleYCoordinates;
+    private getPriceY;
+    private getBidPriceLineColor;
+    private getAskPriceLineColor;
+}

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

@@ -0,0 +1,56 @@
+import { Candle } from '../../models/Candle.types';
+export type ExistingCandlesLayerOptions = {
+    canvas: HTMLCanvasElement;
+    candles: Candle[];
+    baseCandleWidth?: number;
+    baseCandleGap?: number;
+    bullishColor?: string;
+    bearishColor?: string;
+    offsetX?: number;
+    zoomX?: number;
+    priceRange?: number;
+    priceCenter?: number;
+    /**
+     * Enable automatic scrolling
+     * when latest candle moves
+     */
+    autoFollowLatestCandle?: boolean;
+    /**
+     * Number of candles from right edge
+     * where auto-follow becomes active.
+     *
+     * 0 = only when latest candle reaches right edge
+     *
+     * Example:
+     * 10 = auto-follow activates when
+     * latest candle reaches 10th position
+     * from right edge
+     */
+    autoFollowThresholdCandles?: number;
+    /**
+     * Empty candle space on right side
+     */
+    rightOffsetCandles?: number;
+};
+export type CandleYCoordinates = {
+    openY: number;
+    closeY: number;
+    highY: number;
+    lowY: number;
+};
+export type DrawCandlesOptions = {
+    ctx: CanvasRenderingContext2D;
+    candles: Candle[];
+    startIndex: number;
+    chartHeight: number;
+};
+export type DrawSingleCandleOptions = CandleYCoordinates & {
+    ctx: CanvasRenderingContext2D;
+    candleX: number;
+    candleColor: string;
+};
+export type DrawPriceLineOptions = {
+    ctx: CanvasRenderingContext2D;
+    chartWidth: number;
+    chartHeight: number;
+};

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

@@ -0,0 +1,24 @@
+import { PreviousDayHighLowConfig } from '../../config/chartConfig.types';
+import { ChartViewport } from '../../models/ChartViewport.types';
+export type PreviousDay = {
+    high: number;
+    low: number;
+};
+type PdhPdlLayerOptions = {
+    ctx: CanvasRenderingContext2D;
+    config: PreviousDayHighLowConfig | null;
+};
+export declare class PdhPdlLayer {
+    #private;
+    constructor({ ctx, config }: PdhPdlLayerOptions);
+    setViewport(viewport: ChartViewport): void;
+    setConfig(config: PreviousDayHighLowConfig | null): void;
+    setPreviousDay(data: PreviousDay | null | undefined): void;
+    /**
+     * Draws PDH/PDL lines onto the shared canvas.
+     * The caller is responsible for clearing the canvas before rendering;
+     * this layer only appends on top of whatever is already drawn.
+     */
+    render(): void;
+}
+export {};