hyperprop-charting-library 0.1.2 → 0.1.3
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 +1 -0
- package/docs/AI_CONTEXT.md +2 -1
- package/docs/BRACKETS.md +132 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,6 +37,7 @@ chart.setData(data);
|
|
|
37
37
|
- API reference: `docs/API.md`
|
|
38
38
|
- Event contracts: `docs/EVENTS.md`
|
|
39
39
|
- Integration recipes: `docs/RECIPES.md`
|
|
40
|
+
- Bracket orders (TP/SL lifecycle): `docs/BRACKETS.md`
|
|
40
41
|
- AI integration context: `docs/AI_CONTEXT.md`
|
|
41
42
|
|
|
42
43
|
## Core API Surface
|
package/docs/AI_CONTEXT.md
CHANGED
|
@@ -54,6 +54,7 @@ When using this library in another repo, include:
|
|
|
54
54
|
|
|
55
55
|
1. `docs/API.md`
|
|
56
56
|
2. `docs/EVENTS.md`
|
|
57
|
-
3.
|
|
57
|
+
3. `docs/BRACKETS.md` (if trading/order workflows)
|
|
58
|
+
4. this file (`AI_CONTEXT.md`)
|
|
58
59
|
|
|
59
60
|
That gives enough context for most integration tasks without reading source.
|
package/docs/BRACKETS.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Bracket Orders (TP/SL) Integration
|
|
2
|
+
|
|
3
|
+
This library provides chart primitives and interaction events.
|
|
4
|
+
Bracket behavior (preview, pending, activation, OCO) is implemented in app state.
|
|
5
|
+
|
|
6
|
+
Use this guide as the canonical flow.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Conceptual Model
|
|
11
|
+
|
|
12
|
+
Keep 3 layers in your app:
|
|
13
|
+
|
|
14
|
+
1. **Preview layer** (before placement)
|
|
15
|
+
- `previewLimitPrice`
|
|
16
|
+
- `previewTpPrice`
|
|
17
|
+
- `previewSlPrice`
|
|
18
|
+
2. **Pending bracket layer** (entry not filled yet)
|
|
19
|
+
- keyed by `entryOrderId`
|
|
20
|
+
- stores pending TP/SL values
|
|
21
|
+
3. **Active order layer** (entry filled)
|
|
22
|
+
- active `market` position line
|
|
23
|
+
- active TP/SL exit lines
|
|
24
|
+
|
|
25
|
+
The chart only renders what you feed via `setOrderLines(...)`.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Recommended Flow
|
|
30
|
+
|
|
31
|
+
### 1) Create preview limit
|
|
32
|
+
|
|
33
|
+
- From click/double-click in plot, set `previewLimitPrice`.
|
|
34
|
+
- Render preview order line with custom buttons:
|
|
35
|
+
- `Buy/Sell` (`action: "execute"`)
|
|
36
|
+
- `TP` (`action: "previewTp"`, `draggable: true`)
|
|
37
|
+
- `SL` (`action: "previewSl"`, `draggable: true`)
|
|
38
|
+
|
|
39
|
+
### 2) Set preview TP/SL
|
|
40
|
+
|
|
41
|
+
- On `onOrderAction`:
|
|
42
|
+
- `action === "previewTp"` -> set/update `previewTpPrice`
|
|
43
|
+
- `action === "previewSl"` -> set/update `previewSlPrice`
|
|
44
|
+
- Use `event.dragging`:
|
|
45
|
+
- `true`: live drag updates
|
|
46
|
+
- `false`: drag end
|
|
47
|
+
|
|
48
|
+
### 3) Validate side rules before execute
|
|
49
|
+
|
|
50
|
+
- Buy entry:
|
|
51
|
+
- TP must be `>` limit
|
|
52
|
+
- SL must be `<` limit
|
|
53
|
+
- Sell entry:
|
|
54
|
+
- TP must be `<` limit
|
|
55
|
+
- SL must be `>` limit
|
|
56
|
+
|
|
57
|
+
If invalid, disable execute action in your state/UI.
|
|
58
|
+
|
|
59
|
+
### 4) Execute preview
|
|
60
|
+
|
|
61
|
+
On `action === "execute"`:
|
|
62
|
+
|
|
63
|
+
- Create entry limit order.
|
|
64
|
+
- If TP/SL exists, store them as **pending brackets** tied to `entryOrderId`.
|
|
65
|
+
- Clear preview state.
|
|
66
|
+
|
|
67
|
+
### 5) Convert pending to active on fill
|
|
68
|
+
|
|
69
|
+
When your fill logic marks entry as filled:
|
|
70
|
+
|
|
71
|
+
- Transition entry line to active position line (for example `market` + `follow` behavior).
|
|
72
|
+
- Create active TP/SL lines from pending bracket values.
|
|
73
|
+
- Remove pending bracket object.
|
|
74
|
+
|
|
75
|
+
### 6) OCO behavior
|
|
76
|
+
|
|
77
|
+
If active TP or SL fills:
|
|
78
|
+
|
|
79
|
+
- Close/transition position as needed.
|
|
80
|
+
- Remove the sibling exit leg (OCO cleanup).
|
|
81
|
+
|
|
82
|
+
### 7) Position close behavior
|
|
83
|
+
|
|
84
|
+
If user closes active position manually:
|
|
85
|
+
|
|
86
|
+
- Remove linked active TP/SL lines too.
|
|
87
|
+
- Remove any pending bracket bound to that entry id.
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## Useful `OrderLineOptions` for Brackets
|
|
92
|
+
|
|
93
|
+
- `actionButtons` (custom Buy/TP/SL controls)
|
|
94
|
+
- `draggable` (line dragging)
|
|
95
|
+
- `connectorToPrice` + `connectorStyle` + `connectorAnchorPaddingRight`
|
|
96
|
+
- `fillToPrice` + `fillColor` (drag preview zone)
|
|
97
|
+
- `widgetPosition`
|
|
98
|
+
- `label`, `qty`, `pnl`
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## Event Contract Essentials
|
|
103
|
+
|
|
104
|
+
From `onOrderAction(event)`:
|
|
105
|
+
|
|
106
|
+
- `event.action`: open string for app-defined workflows
|
|
107
|
+
- `event.price`: provided for move/drag contexts
|
|
108
|
+
- `event.dragging`: streaming drag state (`true` while dragging, `false` on release)
|
|
109
|
+
- `event.orderId`: line identity to map back to app state
|
|
110
|
+
|
|
111
|
+
Use ids as your state join key.
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## Minimal State Skeleton
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
type PreviewState = {
|
|
119
|
+
side: "buy" | "sell";
|
|
120
|
+
limit: number | null;
|
|
121
|
+
tp: number | null;
|
|
122
|
+
sl: number | null;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
type PendingBracket = {
|
|
126
|
+
entryOrderId: string;
|
|
127
|
+
tpPrice: number | null;
|
|
128
|
+
slPrice: number | null;
|
|
129
|
+
};
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Keep this state in your app and regenerate chart lines from it each render/update tick.
|