@pradeepjadhav/trading-reload-chart 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -20
- package/dist/canvas/layers/ShapesLayer/FibRetracementShape.d.ts +1 -1
- package/dist/canvas/layers/ShapesLayer/LineShape.d.ts +1 -1
- package/dist/canvas/layers/ShapesLayer/PathShape.d.ts +1 -1
- package/dist/canvas/layers/ShapesLayer/RectangleShape.d.ts +1 -1
- package/dist/canvas/layers/ShapesLayer/ShapesLayer.constants.d.ts +10 -0
- package/dist/canvas/layers/ShapesLayer/ShapesLayer.d.ts +11 -0
- package/dist/canvas/layers/ShapesLayer/ShapesLayer.types.d.ts +7 -28
- package/dist/canvas/layers/ShapesLayer/ShortLongPosition.d.ts +2 -3
- package/dist/canvas/layers/TradeLayer/TradeLayer.d.ts +7 -7
- package/dist/canvas/layers/TradeLayer/TradeLayer.types.d.ts +7 -7
- package/dist/chart/ChartController.types.d.ts +21 -3
- package/dist/config/chartConfig.types.d.ts +8 -8
- package/dist/react/TradingReload.d.ts +1 -1
- package/dist/react/TradingReload.types.d.ts +1 -1
- package/dist/trading-reload-chart.js +566 -569
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Trading Chart Library by Pradeep
|
|
2
2
|
|
|
3
|
-
A **React chart library** (HTML Canvas) for trading UIs: candlesticks, volume, axes, crosshair, drawing tools, and open/
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
5
|
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.
|
|
6
6
|
|
|
@@ -81,22 +81,22 @@ The chart is **client-only** (canvas + DOM). It does **not** support SSR.
|
|
|
81
81
|
|
|
82
82
|
### 1. Install the package
|
|
83
83
|
|
|
84
|
-
**From npm** (after publish):
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
npm install trading-reload-chart react react-dom
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
**Directly from GitHub**:
|
|
91
|
-
|
|
92
|
-
```bash
|
|
93
|
-
npm install git+https://github.com/Pradeep17Jadhav/trading-reload-chart.git#main
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
**From this repo** (local path or `npm pack`):
|
|
97
|
-
|
|
98
|
-
```bash
|
|
99
|
-
# In trading-reload-chart repo
|
|
84
|
+
**From npm** (after publish):
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
npm install trading-reload-chart react react-dom
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
**Directly from GitHub**:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm install git+https://github.com/Pradeep17Jadhav/trading-reload-chart.git#main
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**From this repo** (local path or `npm pack`):
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
# In trading-reload-chart repo
|
|
100
100
|
npm run build
|
|
101
101
|
npm pack
|
|
102
102
|
# In your app
|
|
@@ -186,9 +186,9 @@ Import from the package root:
|
|
|
186
186
|
| `Candle`, `OpenTrade`, `ClosedTrade`, … | Domain types |
|
|
187
187
|
| `Shape`, `ShapeToolType`, shape payloads | Drawing types |
|
|
188
188
|
| `ChartConfig`, `CHART_CONFIG`, `DeepPartial` | Configuration |
|
|
189
|
-
| `
|
|
189
|
+
| `ClosedTradeIndicator`, trade handle types | Trade overlay types |
|
|
190
190
|
|
|
191
|
-
Controlled props (parent owns state): `candles`, `liveCandle`, `openTrades`, `
|
|
191
|
+
Controlled props (parent owns state): `candles`, `liveCandle`, `openTrades`, `closedTrades`, `shapes`, `activeShapeTool`, `config`, `activeSymbol`.
|
|
192
192
|
|
|
193
193
|
Callbacks: `onShapeAdded`, `onShapeModified`, `onActiveShapeToolChange`, `onTradeModify`.
|
|
194
194
|
|
|
@@ -226,7 +226,7 @@ Type declarations live in **`*.types.ts`** files next to implementation code (se
|
|
|
226
226
|
- Pan, horizontal wheel zoom, Ctrl+wheel vertical zoom
|
|
227
227
|
- Drawing tools (trendline, rectangle, path, fib, long/short position)
|
|
228
228
|
- Open trade SL/TP drag with `onTradeModify` on release
|
|
229
|
-
-
|
|
229
|
+
- Closed trade markers
|
|
230
230
|
- Deep-merge chart `config` over defaults
|
|
231
231
|
|
|
232
232
|
---
|
|
@@ -15,7 +15,7 @@ export declare class FibRetracementShape {
|
|
|
15
15
|
converter: ShapeCoordinateConverter;
|
|
16
16
|
config?: FibRetracementConfig;
|
|
17
17
|
}): void;
|
|
18
|
-
static getHandles(shape: FibRetracementShapeData, converter: ShapeCoordinateConverter
|
|
18
|
+
static getHandles(shape: FibRetracementShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
|
|
19
19
|
static hitTest({ point, shape, converter, tolerance, config, }: {
|
|
20
20
|
point: ShapePoint;
|
|
21
21
|
shape: FibRetracementShapeData;
|
|
@@ -15,7 +15,7 @@ export declare class LineShape {
|
|
|
15
15
|
converter: ShapeCoordinateConverter;
|
|
16
16
|
config?: CommonShapeConfig;
|
|
17
17
|
}): void;
|
|
18
|
-
static getHandles(shape: TrendlineShape, converter: ShapeCoordinateConverter
|
|
18
|
+
static getHandles(shape: TrendlineShape, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
|
|
19
19
|
static hitTest({ point, shape, converter, tolerance, }: {
|
|
20
20
|
point: ShapePoint;
|
|
21
21
|
shape: TrendlineShape;
|
|
@@ -16,7 +16,7 @@ export declare class PathShape {
|
|
|
16
16
|
converter: ShapeCoordinateConverter;
|
|
17
17
|
config?: CommonShapeConfig;
|
|
18
18
|
}): void;
|
|
19
|
-
static getHandles(shape: PathShapeData, converter: ShapeCoordinateConverter
|
|
19
|
+
static getHandles(shape: PathShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
|
|
20
20
|
static hitTest({ point, shape, converter, tolerance, }: {
|
|
21
21
|
point: ShapePoint;
|
|
22
22
|
shape: PathShapeData;
|
|
@@ -15,7 +15,7 @@ export declare class RectangleShape {
|
|
|
15
15
|
converter: ShapeCoordinateConverter;
|
|
16
16
|
config?: RectangleShapeConfig;
|
|
17
17
|
}): void;
|
|
18
|
-
static getHandles(shape: RectangleShapeData, converter: ShapeCoordinateConverter
|
|
18
|
+
static getHandles(shape: RectangleShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
|
|
19
19
|
static hitTest({ point, shape, converter, tolerance, }: {
|
|
20
20
|
point: ShapePoint;
|
|
21
21
|
shape: RectangleShapeData;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fixed visual constants for shape drag handles.
|
|
3
|
+
* These are chart-internal rendering properties and are not user-configurable.
|
|
4
|
+
*/
|
|
5
|
+
export declare const SHAPE_HANDLE_CONFIG: {
|
|
6
|
+
readonly handleColor: "#0F0F0F";
|
|
7
|
+
readonly handleBorderColor: "#2962FF";
|
|
8
|
+
readonly handleBorderThickness: 1.5;
|
|
9
|
+
readonly handleRadius: 5;
|
|
10
|
+
};
|
|
@@ -15,9 +15,12 @@ export declare class ShapesLayer {
|
|
|
15
15
|
handleHitboxes: ShapeHandleHitbox[];
|
|
16
16
|
private draft;
|
|
17
17
|
private dragState;
|
|
18
|
+
private lastTapTime;
|
|
19
|
+
private lastTapShapeId;
|
|
18
20
|
private onShapeAdded?;
|
|
19
21
|
private onShapeModified?;
|
|
20
22
|
private onShapeSelected?;
|
|
23
|
+
private onShapeDoubleClicked?;
|
|
21
24
|
private onToolChange?;
|
|
22
25
|
constructor(options: ShapesLayerOptions);
|
|
23
26
|
setCandles(candles: Candle[]): void;
|
|
@@ -29,9 +32,17 @@ export declare class ShapesLayer {
|
|
|
29
32
|
render(): void;
|
|
30
33
|
handlePointerEvent(event: PointerEvent | MouseEvent): boolean;
|
|
31
34
|
handleKeyboardEvent(event: KeyboardEvent): boolean;
|
|
35
|
+
private getArrowKeyDelta;
|
|
32
36
|
private handlePointerDown;
|
|
33
37
|
private handlePointerMove;
|
|
34
38
|
private handlePointerUp;
|
|
39
|
+
private handleDoubleClick;
|
|
40
|
+
/**
|
|
41
|
+
* Tracks touch taps and fires `onShapeDoubleClicked` on a double-tap.
|
|
42
|
+
* Only runs for touch pointer events; mouse/stylus use the `dblclick` DOM
|
|
43
|
+
* event path instead to avoid firing twice.
|
|
44
|
+
*/
|
|
45
|
+
private checkTouchDoubleTap;
|
|
35
46
|
private handleContextMenu;
|
|
36
47
|
private handleToolPointerDown;
|
|
37
48
|
private handleTwoPointDraft;
|
|
@@ -72,10 +72,6 @@ export type ShapeLineStyle = "solid" | "dashed" | "dotted";
|
|
|
72
72
|
* lineColor: "#4ade80",
|
|
73
73
|
* lineOpacity: 1,
|
|
74
74
|
* lineStyle: "solid",
|
|
75
|
-
* handleColor: "#ffffff",
|
|
76
|
-
* handleBorderColor: "#111827",
|
|
77
|
-
* handleBorderThickness: 1,
|
|
78
|
-
* handleRadius: 4,
|
|
79
75
|
* };
|
|
80
76
|
* ```
|
|
81
77
|
*/
|
|
@@ -86,12 +82,6 @@ export type CommonShapeConfig = {
|
|
|
86
82
|
lineStyle: ShapeLineStyle;
|
|
87
83
|
fillColor?: string;
|
|
88
84
|
fillOpacity?: number;
|
|
89
|
-
handleColor: string;
|
|
90
|
-
handleBorderColor: string;
|
|
91
|
-
handleBorderThickness: number;
|
|
92
|
-
handleRadius: number;
|
|
93
|
-
hoverLineWidth?: number;
|
|
94
|
-
selectedLineWidth?: number;
|
|
95
85
|
};
|
|
96
86
|
export type RectangleShapeConfig = CommonShapeConfig & {
|
|
97
87
|
textColor: string;
|
|
@@ -112,12 +102,6 @@ export type FibRetracementConfig = {
|
|
|
112
102
|
levels: FibLevelConfig[];
|
|
113
103
|
fillColor?: string;
|
|
114
104
|
fillOpacity?: number;
|
|
115
|
-
handleColor: string;
|
|
116
|
-
handleBorderColor: string;
|
|
117
|
-
handleBorderThickness: number;
|
|
118
|
-
handleRadius: number;
|
|
119
|
-
hoverLineWidth: number;
|
|
120
|
-
selectedLineWidth: number;
|
|
121
105
|
};
|
|
122
106
|
export type PositionShapeConfig = {
|
|
123
107
|
defaultWidthCandles: number;
|
|
@@ -135,12 +119,6 @@ export type PositionShapeConfig = {
|
|
|
135
119
|
midLineOpacity: number;
|
|
136
120
|
midLineWidth: number;
|
|
137
121
|
midLineStyle: ShapeLineStyle;
|
|
138
|
-
handleColor: string;
|
|
139
|
-
handleBorderColor: string;
|
|
140
|
-
handleBorderThickness: number;
|
|
141
|
-
handleRadius: number;
|
|
142
|
-
hoverLineWidth: number;
|
|
143
|
-
selectedLineWidth: number;
|
|
144
122
|
};
|
|
145
123
|
/**
|
|
146
124
|
* Trendline shape defined by two vertices.
|
|
@@ -293,12 +271,12 @@ export type Shape = TrendlineShape | RectangleShapeData | PathShapeData | FibRet
|
|
|
293
271
|
* @example
|
|
294
272
|
* ```ts
|
|
295
273
|
* const config: ShapeConfig = {
|
|
296
|
-
* trendline: { lineWidth: 2, lineColor: "#4ade80", lineOpacity: 1, lineStyle: "solid"
|
|
297
|
-
* rectangle: { lineWidth: 2, lineColor: "#60a5fa", lineOpacity: 1, lineStyle: "solid",
|
|
298
|
-
* path: { lineWidth: 2, lineColor: "#f59e0b", lineOpacity: 1, lineStyle: "solid"
|
|
299
|
-
* fibRetracement: { levels: []
|
|
300
|
-
* shortPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed"
|
|
301
|
-
* longPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed"
|
|
274
|
+
* trendline: { lineWidth: 2, lineColor: "#4ade80", lineOpacity: 1, lineStyle: "solid" },
|
|
275
|
+
* rectangle: { lineWidth: 2, lineColor: "#60a5fa", lineOpacity: 1, lineStyle: "solid", textColor: "#fff", textOpacity: 1, textFontFamily: "Arial", textFontSize: 12 },
|
|
276
|
+
* path: { lineWidth: 2, lineColor: "#f59e0b", lineOpacity: 1, lineStyle: "solid" },
|
|
277
|
+
* fibRetracement: { levels: [] },
|
|
278
|
+
* shortPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed" },
|
|
279
|
+
* longPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed" },
|
|
302
280
|
* };
|
|
303
281
|
* ```
|
|
304
282
|
*/
|
|
@@ -462,6 +440,7 @@ export type ShapesLayerOptions = {
|
|
|
462
440
|
onShapeAdded?: (payload: ShapeAddedPayload) => void;
|
|
463
441
|
onShapeModified?: (payload: ShapeModifiedPayload) => void;
|
|
464
442
|
onShapeSelected?: (payload: ShapeSelectedPayload | null) => void;
|
|
443
|
+
onShapeDoubleClicked?: (payload: ShapeSelectedPayload) => void;
|
|
465
444
|
onToolChange?: (tool: ShapeToolType | null) => void;
|
|
466
445
|
};
|
|
467
446
|
export type InternalDragState = {
|
|
@@ -20,12 +20,11 @@ export declare class ShortLongPosition {
|
|
|
20
20
|
config?: PositionShapeConfig;
|
|
21
21
|
}): PositionShapeData;
|
|
22
22
|
static getGeometry(shape: PositionShapeData, converter: ShapeCoordinateConverter): PositionGeometry;
|
|
23
|
-
static getHandles(shape: PositionShapeData, converter: ShapeCoordinateConverter
|
|
24
|
-
static hitTest({ point, shape, converter,
|
|
23
|
+
static getHandles(shape: PositionShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
|
|
24
|
+
static hitTest({ point, shape, converter, }: {
|
|
25
25
|
point: ShapePoint;
|
|
26
26
|
shape: PositionShapeData;
|
|
27
27
|
converter: ShapeCoordinateConverter;
|
|
28
|
-
config?: PositionShapeConfig;
|
|
29
28
|
}): boolean;
|
|
30
29
|
static move(shape: PositionShapeData, delta: ShapeVertex): PositionShapeData;
|
|
31
30
|
static resize({ shape, handleType, vertex, converter, }: {
|
|
@@ -7,7 +7,7 @@ export declare class TradeLayer {
|
|
|
7
7
|
#private;
|
|
8
8
|
isDragging: boolean;
|
|
9
9
|
trades: OpenTrade[];
|
|
10
|
-
|
|
10
|
+
closedTrades: ClosedTrade[];
|
|
11
11
|
candles: Candle[];
|
|
12
12
|
viewport: ChartViewport | null;
|
|
13
13
|
liveCandle: Candle | null;
|
|
@@ -15,7 +15,7 @@ export declare class TradeLayer {
|
|
|
15
15
|
temporaryProtectionDrag: TemporaryTradeProtectionDrag | null;
|
|
16
16
|
constructor(options: TradeLayerOptions);
|
|
17
17
|
setTrades(trades: OpenTrade[]): void;
|
|
18
|
-
|
|
18
|
+
setClosedTrades(closedTrades: ClosedTrade[]): void;
|
|
19
19
|
setCandles(candles: Candle[]): void;
|
|
20
20
|
setViewport(viewport: ChartViewport): void;
|
|
21
21
|
setLiveCandle(candle: Candle): void;
|
|
@@ -107,11 +107,11 @@ export declare class TradeLayer {
|
|
|
107
107
|
}): number;
|
|
108
108
|
private clearCanvas;
|
|
109
109
|
private resetHitboxes;
|
|
110
|
-
private
|
|
111
|
-
private
|
|
112
|
-
private
|
|
113
|
-
private
|
|
114
|
-
private
|
|
110
|
+
private drawClosedTradeIndicators;
|
|
111
|
+
private getClosedTradeIndicatorRenderState;
|
|
112
|
+
private drawClosedTradeConnector;
|
|
113
|
+
private drawClosedTradeArrows;
|
|
114
|
+
private drawClosedTradeArrow;
|
|
115
115
|
private getTimeX;
|
|
116
116
|
private normalizeTimestamp;
|
|
117
117
|
private getFirstCandleIndexAtOrAfterTime;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MissingTradeProtectionHandleRectConfig,
|
|
1
|
+
import { MissingTradeProtectionHandleRectConfig, ClosedTradeIndicatorArrowConfig as ClosedTradeIndicatorArrowConfig, TemporaryTradeProtectionHandleRectConfig, TradeHandleLineConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
|
|
2
2
|
import { ChartViewport } from '../../../models/ChartViewport.types';
|
|
3
3
|
import { ClosedTrade, OpenTrade, TradeDirection } from '../../../models/Trade.types';
|
|
4
4
|
/**
|
|
@@ -126,16 +126,16 @@ export type TemporaryProtectionRenderState = {
|
|
|
126
126
|
handleWidth: number;
|
|
127
127
|
handleHeight: number;
|
|
128
128
|
};
|
|
129
|
-
export type
|
|
129
|
+
export type ClosedTradeIndicatorPoint = {
|
|
130
130
|
x: number;
|
|
131
131
|
y: number;
|
|
132
132
|
price: number;
|
|
133
133
|
time: number;
|
|
134
134
|
};
|
|
135
|
-
export type
|
|
135
|
+
export type ClosedTradeIndicatorRenderState = {
|
|
136
136
|
trade: ClosedTrade;
|
|
137
|
-
start:
|
|
138
|
-
close:
|
|
137
|
+
start: ClosedTradeIndicatorPoint;
|
|
138
|
+
close: ClosedTradeIndicatorPoint;
|
|
139
139
|
arrowWidth: number;
|
|
140
140
|
arrowHeight: number;
|
|
141
141
|
};
|
|
@@ -205,13 +205,13 @@ export type DrawHandleSectionsOptions = {
|
|
|
205
205
|
trade: OpenTrade;
|
|
206
206
|
y: number;
|
|
207
207
|
};
|
|
208
|
-
export type
|
|
208
|
+
export type DrawClosedTradeArrowOptions = {
|
|
209
209
|
x: number;
|
|
210
210
|
y: number;
|
|
211
211
|
type: TradeDirection;
|
|
212
212
|
width: number;
|
|
213
213
|
height: number;
|
|
214
|
-
config:
|
|
214
|
+
config: ClosedTradeIndicatorArrowConfig;
|
|
215
215
|
};
|
|
216
216
|
export type HandleSection = {
|
|
217
217
|
label: string;
|
|
@@ -44,6 +44,12 @@ export type TradeModifyPayload = {
|
|
|
44
44
|
* ```
|
|
45
45
|
*/
|
|
46
46
|
export type PreviousDay = {
|
|
47
|
+
/**
|
|
48
|
+
* Trading symbol for the previous day data.
|
|
49
|
+
*
|
|
50
|
+
* @example `"EURUSD"`
|
|
51
|
+
*/
|
|
52
|
+
symbol: string;
|
|
47
53
|
/** Previous day high price.
|
|
48
54
|
*
|
|
49
55
|
* @example `1.0924`
|
|
@@ -66,7 +72,7 @@ export type PreviousDay = {
|
|
|
66
72
|
* candles,
|
|
67
73
|
* liveCandle,
|
|
68
74
|
* openTrades,
|
|
69
|
-
*
|
|
75
|
+
* closedTrades,
|
|
70
76
|
* shapes,
|
|
71
77
|
* activeShapeTool,
|
|
72
78
|
* onShapeAdded: ({ shape }) => setShapes((prev) => [...prev, shape]),
|
|
@@ -116,10 +122,10 @@ export type ChartControllerProps = {
|
|
|
116
122
|
*
|
|
117
123
|
* @example
|
|
118
124
|
* ```ts
|
|
119
|
-
*
|
|
125
|
+
* 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" }]
|
|
120
126
|
* ```
|
|
121
127
|
*/
|
|
122
|
-
|
|
128
|
+
closedTrades: ClosedTrade[];
|
|
123
129
|
/**
|
|
124
130
|
* Parent-owned shapes rendered and edited by the chart.
|
|
125
131
|
*
|
|
@@ -187,6 +193,18 @@ export type ChartControllerProps = {
|
|
|
187
193
|
* ```
|
|
188
194
|
*/
|
|
189
195
|
onShapeSelected?: (payload: ShapeSelectedPayload | null) => void;
|
|
196
|
+
/**
|
|
197
|
+
* Called when the user double-clicks on a shape.
|
|
198
|
+
*
|
|
199
|
+
* Fires with the same payload as {@link onShapeSelected} but only on a
|
|
200
|
+
* double-click gesture. Does not affect shape selection state.
|
|
201
|
+
*
|
|
202
|
+
* @example
|
|
203
|
+
* ```ts
|
|
204
|
+
* onShapeDoubleClicked: (payload) => openShapeEditor(payload.shapeId)
|
|
205
|
+
* ```
|
|
206
|
+
*/
|
|
207
|
+
onShapeDoubleClicked?: (payload: ShapeSelectedPayload) => void;
|
|
190
208
|
/**
|
|
191
209
|
* Called when the chart wants the parent to change the active drawing tool.
|
|
192
210
|
*
|
|
@@ -375,11 +375,11 @@ export type TradeHandlesConfig = {
|
|
|
375
375
|
missingProtectionHandles: MissingTradeProtectionConfig;
|
|
376
376
|
};
|
|
377
377
|
/**
|
|
378
|
-
* Arrow appearance for
|
|
378
|
+
* Arrow appearance for closed trade markers.
|
|
379
379
|
*
|
|
380
380
|
* @example
|
|
381
381
|
* ```ts
|
|
382
|
-
* const arrow:
|
|
382
|
+
* const arrow: ClosedTradeIndicatorArrowConfig = {
|
|
383
383
|
* visible: true,
|
|
384
384
|
* width: 60,
|
|
385
385
|
* height: 30,
|
|
@@ -394,7 +394,7 @@ export type TradeHandlesConfig = {
|
|
|
394
394
|
* };
|
|
395
395
|
* ```
|
|
396
396
|
*/
|
|
397
|
-
export type
|
|
397
|
+
export type ClosedTradeIndicatorArrowConfig = {
|
|
398
398
|
visible: boolean;
|
|
399
399
|
width: number;
|
|
400
400
|
height: number;
|
|
@@ -412,16 +412,16 @@ export type PastTradeIndicatorArrowConfig = {
|
|
|
412
412
|
*
|
|
413
413
|
* @example
|
|
414
414
|
* ```ts
|
|
415
|
-
* const
|
|
415
|
+
* const closedTrades: ClosedTradeIndicatorsConfig = {
|
|
416
416
|
* visible: true,
|
|
417
417
|
* arrow: { visible: true, width: 60, height: 30, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 },
|
|
418
418
|
* connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] },
|
|
419
419
|
* };
|
|
420
420
|
* ```
|
|
421
421
|
*/
|
|
422
|
-
export type
|
|
422
|
+
export type ClosedTradeIndicatorsConfig = {
|
|
423
423
|
visible: boolean;
|
|
424
|
-
arrow:
|
|
424
|
+
arrow: ClosedTradeIndicatorArrowConfig;
|
|
425
425
|
connectorLine: TradeHandleLineConfig;
|
|
426
426
|
};
|
|
427
427
|
/**
|
|
@@ -622,7 +622,7 @@ export type PreviousDayHighLowConfig = {
|
|
|
622
622
|
* volume: { visible: true, bullishColor: "#22c55e", bearishColor: "#ef4444", opacity: 0.35, height: 200, bottomOffset: 0, minBarHeight: 1 },
|
|
623
623
|
* crosshair: { color: "rgba(255,255,255,0.35)", thickness: 1, style: "dashed" },
|
|
624
624
|
* tradeHandles: {} as TradeHandlesConfig,
|
|
625
|
-
*
|
|
625
|
+
* 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] } },
|
|
626
626
|
* colors: { bullish: "#22c55e", bearish: "#ef4444", background: "#0b1220" },
|
|
627
627
|
* 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 } } },
|
|
628
628
|
* shapes: { trendline: { lineColor: "#22c55e" } },
|
|
@@ -635,7 +635,7 @@ export type ChartConfig = {
|
|
|
635
635
|
volume: VolumeConfig;
|
|
636
636
|
crosshair: CrosshairConfig;
|
|
637
637
|
tradeHandles: TradeHandlesConfig;
|
|
638
|
-
|
|
638
|
+
closedTradeIndicators: ClosedTradeIndicatorsConfig;
|
|
639
639
|
colors: ColorsConfig;
|
|
640
640
|
axis: AxisConfig;
|
|
641
641
|
shapes: PartialShapeConfig;
|
|
@@ -13,7 +13,7 @@ import { TradingReloadHandle } from './TradingReload.types';
|
|
|
13
13
|
* candles={candles}
|
|
14
14
|
* liveCandle={liveCandle}
|
|
15
15
|
* openTrades={openTrades}
|
|
16
|
-
*
|
|
16
|
+
* closedTrades={closedTrades}
|
|
17
17
|
* shapes={shapes}
|
|
18
18
|
* activeShapeTool={activeShapeTool}
|
|
19
19
|
* onShapeAdded={({ shape }) => setShapes((prev) => [...prev, shape])}
|
|
@@ -38,7 +38,7 @@ export type TradingReloadHandle = {
|
|
|
38
38
|
* candles={candles}
|
|
39
39
|
* liveCandle={liveCandle}
|
|
40
40
|
* openTrades={openTrades}
|
|
41
|
-
*
|
|
41
|
+
* closedTrades={closedTrades}
|
|
42
42
|
* shapes={shapes}
|
|
43
43
|
* activeShapeTool={activeShapeTool}
|
|
44
44
|
* onShapeAdded={({ shape }) => setShapes((prev) => [...prev, shape])}
|