acttrader-charts 1.0.0
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 +676 -0
- package/dist/MACD-BmvUIYwI.d.cts +1128 -0
- package/dist/MACD-BmvUIYwI.d.ts +1128 -0
- package/dist/chunk-X6OSI4P2.js +2523 -0
- package/dist/chunk-X6OSI4P2.js.map +1 -0
- package/dist/index.cjs +20264 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1351 -0
- package/dist/index.d.ts +1351 -0
- package/dist/index.js +17651 -0
- package/dist/index.js.map +1 -0
- package/dist/indicators/index.cjs +2555 -0
- package/dist/indicators/index.cjs.map +1 -0
- package/dist/indicators/index.d.cts +288 -0
- package/dist/indicators/index.d.ts +288 -0
- package/dist/indicators/index.js +3 -0
- package/dist/indicators/index.js.map +1 -0
- package/package.json +54 -0
|
@@ -0,0 +1,1128 @@
|
|
|
1
|
+
declare class ScaleManager {
|
|
2
|
+
private static readonly VERTICAL_PADDING_PX;
|
|
3
|
+
xToPixel(index: number, viewport: Viewport, chartWidth: number): number;
|
|
4
|
+
pixelToBarIndex(x: number, viewport: Viewport, chartWidth: number): number;
|
|
5
|
+
candleBodyWidth(viewport: Viewport, chartWidth: number): number;
|
|
6
|
+
yToPixel(price: number, range: PriceRange, chartHeight: number): number;
|
|
7
|
+
pixelToPrice(y: number, range: PriceRange, chartHeight: number): number;
|
|
8
|
+
volumeToPixel(volume: number, maxVolume: number, volumePanelHeight: number): number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface DrawingToolbarUiConfig {
|
|
12
|
+
/** Icon button size (width = height) in px */
|
|
13
|
+
iconBtnSize: number;
|
|
14
|
+
/** Font size for unicode icons inside category buttons */
|
|
15
|
+
iconFontSize: string;
|
|
16
|
+
/** Font family for icon buttons */
|
|
17
|
+
iconFontFamily: string;
|
|
18
|
+
/** Font size for tool-name labels inside the category flyout */
|
|
19
|
+
flyoutLabelFontSize: string;
|
|
20
|
+
/** Font family for flyout tool labels */
|
|
21
|
+
flyoutLabelFontFamily: string;
|
|
22
|
+
/** Font size for keyboard shortcut hints in flyout rows */
|
|
23
|
+
shortcutFontSize: string;
|
|
24
|
+
/** Font size for "soon" badges in flyout rows */
|
|
25
|
+
soonBadgeFontSize: string;
|
|
26
|
+
/** Font size for the category-group header inside flyouts */
|
|
27
|
+
flyoutHeadingFontSize: string;
|
|
28
|
+
/** Letter-spacing for flyout group headings */
|
|
29
|
+
flyoutHeadingLetterSpacing: string;
|
|
30
|
+
/** Height of the scroll-up / scroll-down indicator buttons in px */
|
|
31
|
+
scrollBtnHeight: number;
|
|
32
|
+
/** Font size for scroll indicator arrow glyphs */
|
|
33
|
+
scrollBtnFontSize: string;
|
|
34
|
+
/** Horizontal padding inside the sidebar bar in px */
|
|
35
|
+
barPadding: number;
|
|
36
|
+
/** Gap between icon buttons in the grid in px */
|
|
37
|
+
btnGap: number;
|
|
38
|
+
/** Container width (px) below which LeftBar switches to mobile layout */
|
|
39
|
+
mobileBreakpoint: number;
|
|
40
|
+
}
|
|
41
|
+
interface TopBarUiConfig {
|
|
42
|
+
/** Height of the top bar strip */
|
|
43
|
+
height: string;
|
|
44
|
+
/** Font size for series / timeframe / indicator dropdown buttons */
|
|
45
|
+
dropBtnFontSize: string;
|
|
46
|
+
/** Font family for dropdown buttons */
|
|
47
|
+
dropBtnFontFamily: string;
|
|
48
|
+
/** Size (width = height) of the drawing-mode toggle button */
|
|
49
|
+
drawBtnSize: string;
|
|
50
|
+
/** Font size for the icon inside the drawing toggle button */
|
|
51
|
+
drawBtnIconFontSize: string;
|
|
52
|
+
/** Font size for flyout list rows */
|
|
53
|
+
flyoutRowFontSize: string;
|
|
54
|
+
/** Font family for flyout list rows */
|
|
55
|
+
flyoutRowFontFamily: string;
|
|
56
|
+
/** Font size for flyout group-category headers */
|
|
57
|
+
flyoutCategoryFontSize: string;
|
|
58
|
+
/** Letter-spacing for flyout category headers */
|
|
59
|
+
flyoutCategoryLetterSpacing: string;
|
|
60
|
+
/** Checkmark icon font size inside flyout active rows */
|
|
61
|
+
flyoutCheckFontSize: string;
|
|
62
|
+
/** Diameter of the stream-status dot indicator */
|
|
63
|
+
streamDotSize: string;
|
|
64
|
+
}
|
|
65
|
+
interface BottomBarUiConfig {
|
|
66
|
+
/** Height of the bottom bar strip */
|
|
67
|
+
height: string;
|
|
68
|
+
/** Font size for duration selector buttons (1D, 5D, 1M …) */
|
|
69
|
+
btnFontSize: string;
|
|
70
|
+
/** Font family for duration buttons */
|
|
71
|
+
btnFontFamily: string;
|
|
72
|
+
}
|
|
73
|
+
interface PriceAxisUiConfig {
|
|
74
|
+
/** Font size for price tick labels */
|
|
75
|
+
fontSize: string;
|
|
76
|
+
/** Font family for price tick labels */
|
|
77
|
+
fontFamily: string;
|
|
78
|
+
}
|
|
79
|
+
interface TimeAxisUiConfig {
|
|
80
|
+
/** Font size for time tick labels */
|
|
81
|
+
fontSize: string;
|
|
82
|
+
/** Font family for time tick labels */
|
|
83
|
+
fontFamily: string;
|
|
84
|
+
}
|
|
85
|
+
interface CrosshairUiConfig {
|
|
86
|
+
/** Height of the price-tag label drawn on the Y-axis in px */
|
|
87
|
+
labelHeight: number;
|
|
88
|
+
/** Horizontal padding inside the price-tag label in px */
|
|
89
|
+
labelPaddingX: number;
|
|
90
|
+
/** Font size for price and time labels */
|
|
91
|
+
fontSize: string;
|
|
92
|
+
/** Font family for price and time labels */
|
|
93
|
+
fontFamily: string;
|
|
94
|
+
}
|
|
95
|
+
interface IndicatorOverlayUiConfig {
|
|
96
|
+
/** Font size for inline indicator pill labels */
|
|
97
|
+
pillFontSize: string;
|
|
98
|
+
/** Font family for inline indicator pills */
|
|
99
|
+
pillFontFamily: string;
|
|
100
|
+
/** Font size for the colour-dot glyph inside pills */
|
|
101
|
+
dotFontSize: string;
|
|
102
|
+
/** Font size for gear ⚙ and remove ✕ icons inside inline pills */
|
|
103
|
+
pillIconFontSize: string;
|
|
104
|
+
/** Font size for the "N indicators" collapse toggle button */
|
|
105
|
+
collapseBtnFontSize: string;
|
|
106
|
+
/** Font family for the collapse toggle button */
|
|
107
|
+
collapseBtnFontFamily: string;
|
|
108
|
+
/** Font size for rows inside the collapsed dropdown panel */
|
|
109
|
+
dropdownRowFontSize: string;
|
|
110
|
+
/** Font family for dropdown rows */
|
|
111
|
+
dropdownRowFontFamily: string;
|
|
112
|
+
/** Font size for gear ⚙ and remove ✕ icons inside dropdown rows */
|
|
113
|
+
dropdownIconFontSize: string;
|
|
114
|
+
}
|
|
115
|
+
interface UiConfig {
|
|
116
|
+
drawingToolbar: DrawingToolbarUiConfig;
|
|
117
|
+
topBar: TopBarUiConfig;
|
|
118
|
+
bottomBar: BottomBarUiConfig;
|
|
119
|
+
priceAxis: PriceAxisUiConfig;
|
|
120
|
+
timeAxis: TimeAxisUiConfig;
|
|
121
|
+
crosshair: CrosshairUiConfig;
|
|
122
|
+
indicatorOverlay: IndicatorOverlayUiConfig;
|
|
123
|
+
}
|
|
124
|
+
declare const DEFAULT_DRAWING_TOOLBAR_CONFIG: DrawingToolbarUiConfig;
|
|
125
|
+
declare const DEFAULT_TOP_BAR_CONFIG: TopBarUiConfig;
|
|
126
|
+
declare const DEFAULT_BOTTOM_BAR_CONFIG: BottomBarUiConfig;
|
|
127
|
+
declare const DEFAULT_PRICE_AXIS_CONFIG: PriceAxisUiConfig;
|
|
128
|
+
declare const DEFAULT_TIME_AXIS_CONFIG: TimeAxisUiConfig;
|
|
129
|
+
declare const DEFAULT_CROSSHAIR_CONFIG: CrosshairUiConfig;
|
|
130
|
+
declare const DEFAULT_INDICATOR_OVERLAY_CONFIG: IndicatorOverlayUiConfig;
|
|
131
|
+
declare const DEFAULT_UI_CONFIG: UiConfig;
|
|
132
|
+
type DeepPartial$1<T> = {
|
|
133
|
+
[K in keyof T]?: T[K] extends object ? DeepPartial$1<T[K]> : T[K];
|
|
134
|
+
};
|
|
135
|
+
/**
|
|
136
|
+
* Merge a deep-partial user override on top of a full default config.
|
|
137
|
+
* Only the top-level keys of `UiConfig` are merged — component configs
|
|
138
|
+
* are replaced as a whole unit if provided (shallow merge per component).
|
|
139
|
+
*/
|
|
140
|
+
declare function resolveUiConfig(override?: DeepPartial$1<UiConfig>): UiConfig;
|
|
141
|
+
|
|
142
|
+
interface TopBarLabels {
|
|
143
|
+
/** Dropdown label for each series (chart) type. */
|
|
144
|
+
series: {
|
|
145
|
+
candlestick: string;
|
|
146
|
+
hollow: string;
|
|
147
|
+
ohlc: string;
|
|
148
|
+
line: string;
|
|
149
|
+
area: string;
|
|
150
|
+
heikinashi: string;
|
|
151
|
+
volumecandles: string;
|
|
152
|
+
linemarkers: string;
|
|
153
|
+
step: string;
|
|
154
|
+
hlcarea: string;
|
|
155
|
+
baseline: string;
|
|
156
|
+
columns: string;
|
|
157
|
+
highlow: string;
|
|
158
|
+
};
|
|
159
|
+
/** Timeframe dropdown button labels. */
|
|
160
|
+
timeframes: Record<Timeframe, string>;
|
|
161
|
+
/** Indicators button text when no indicators are active. */
|
|
162
|
+
indicatorsBtn: string;
|
|
163
|
+
/** Indicators button text when one or more indicators are active.
|
|
164
|
+
* Use `{count}` as a placeholder for the active count. */
|
|
165
|
+
indicatorsBtnActive: string;
|
|
166
|
+
/** Tooltip on the drawing-toolbar toggle button. */
|
|
167
|
+
toggleDrawingTitle: string;
|
|
168
|
+
/** Tooltip on the fullscreen button when in normal mode. */
|
|
169
|
+
toggleFullscreenTitle: string;
|
|
170
|
+
/** Tooltip on the fullscreen button when already in fullscreen. */
|
|
171
|
+
exitFullscreenTitle: string;
|
|
172
|
+
/** Tooltip on the chart-settings button. */
|
|
173
|
+
settingsTitle: string;
|
|
174
|
+
}
|
|
175
|
+
interface BottomBarLabels {
|
|
176
|
+
/** Duration selector button labels. */
|
|
177
|
+
durations: Record<Duration, string>;
|
|
178
|
+
}
|
|
179
|
+
interface DrawingToolbarLabels {
|
|
180
|
+
/** Category flyout heading labels. */
|
|
181
|
+
categories: {
|
|
182
|
+
trendLines: string;
|
|
183
|
+
fibonacci: string;
|
|
184
|
+
shapes: string;
|
|
185
|
+
measurements: string;
|
|
186
|
+
pitchforks: string;
|
|
187
|
+
volume: string;
|
|
188
|
+
annotations: string;
|
|
189
|
+
patterns: string;
|
|
190
|
+
elliott: string;
|
|
191
|
+
brushes: string;
|
|
192
|
+
advanced: string;
|
|
193
|
+
priceProjection: string;
|
|
194
|
+
};
|
|
195
|
+
/** Individual drawing tool names (used in flyout rows). */
|
|
196
|
+
tools: Record<DrawingToolType, string>;
|
|
197
|
+
/** Action button tooltips at the bottom of the toolbar. */
|
|
198
|
+
actions: {
|
|
199
|
+
undo: string;
|
|
200
|
+
redo: string;
|
|
201
|
+
deleteSelected: string;
|
|
202
|
+
clearAll: string;
|
|
203
|
+
showAll: string;
|
|
204
|
+
hideAll: string;
|
|
205
|
+
lockAll: string;
|
|
206
|
+
unlockAll: string;
|
|
207
|
+
/** Tooltip for the combined actions button in mobile layout. */
|
|
208
|
+
moreActions: string;
|
|
209
|
+
};
|
|
210
|
+
/** Badge text shown on drawing tools that are not yet implemented. */
|
|
211
|
+
soonBadge: string;
|
|
212
|
+
/** Tooltip for the scroll-up indicator button. */
|
|
213
|
+
scrollUp: string;
|
|
214
|
+
/** Tooltip for the scroll-down indicator button. */
|
|
215
|
+
scrollDown: string;
|
|
216
|
+
}
|
|
217
|
+
interface OhlcLabels {
|
|
218
|
+
/** Label shown before the open price. */
|
|
219
|
+
open: string;
|
|
220
|
+
/** Label shown before the high price. */
|
|
221
|
+
high: string;
|
|
222
|
+
/** Label shown before the low price. */
|
|
223
|
+
low: string;
|
|
224
|
+
/** Label shown before the close price. */
|
|
225
|
+
close: string;
|
|
226
|
+
/** Label shown before the volume value. */
|
|
227
|
+
volume: string;
|
|
228
|
+
}
|
|
229
|
+
interface TradeLabels {
|
|
230
|
+
/** Buy side label (trade button, order popover). */
|
|
231
|
+
buy: string;
|
|
232
|
+
/** Sell side label. */
|
|
233
|
+
sell: string;
|
|
234
|
+
/** Limit order type label. */
|
|
235
|
+
limit: string;
|
|
236
|
+
/** Stop order type label. */
|
|
237
|
+
stop: string;
|
|
238
|
+
/** Market order type label. */
|
|
239
|
+
market: string;
|
|
240
|
+
/** Quantity input label in the draft-order input. */
|
|
241
|
+
qty: string;
|
|
242
|
+
/** Tooltip on the floating trade button (⊕). */
|
|
243
|
+
placeOrderTitle: string;
|
|
244
|
+
}
|
|
245
|
+
interface DialogLabels {
|
|
246
|
+
/** Chart Settings dialog. */
|
|
247
|
+
settings: {
|
|
248
|
+
/** Dialog title bar text. */
|
|
249
|
+
title: string;
|
|
250
|
+
/** Section header for Trade from Charts settings. */
|
|
251
|
+
tfcSection: string;
|
|
252
|
+
/** Label for the trade-display-filter radio group. */
|
|
253
|
+
showLabel: string;
|
|
254
|
+
/** Label for the position render-style radio group. */
|
|
255
|
+
positionStyleLabel: string;
|
|
256
|
+
/** Radio option — show all levels. */
|
|
257
|
+
showAll: string;
|
|
258
|
+
/** Radio option — show positions only. */
|
|
259
|
+
showPositions: string;
|
|
260
|
+
/** Radio option — show pending orders only. */
|
|
261
|
+
showOrders: string;
|
|
262
|
+
/** Radio option — hide all trade levels. */
|
|
263
|
+
showNone: string;
|
|
264
|
+
/** Radio option — render positions as full horizontal lines. */
|
|
265
|
+
styleLine: string;
|
|
266
|
+
/** Radio option — render positions as dots on the price axis. */
|
|
267
|
+
styleDot: string;
|
|
268
|
+
/** Reset-to-defaults button label. */
|
|
269
|
+
resetBtn: string;
|
|
270
|
+
};
|
|
271
|
+
/** Indicator Settings dialog. */
|
|
272
|
+
indicator: {
|
|
273
|
+
/** Appended to the indicator name in the dialog title bar.
|
|
274
|
+
* Rendered as "{indicator name} {titleSuffix}". */
|
|
275
|
+
titleSuffix: string;
|
|
276
|
+
/** Message shown when an indicator has no configurable parameters. */
|
|
277
|
+
noParams: string;
|
|
278
|
+
};
|
|
279
|
+
}
|
|
280
|
+
interface ChartMiscLabels {
|
|
281
|
+
/** Overlay text shown while data is being fetched. */
|
|
282
|
+
loading: string;
|
|
283
|
+
/** Tooltip on the "jump to live edge" button. */
|
|
284
|
+
scrollToLatest: string;
|
|
285
|
+
/** Collapse button text in the indicator overlay when more than 2 indicators
|
|
286
|
+
* are active. Use `{count}` as a placeholder for the count. */
|
|
287
|
+
nIndicators: string;
|
|
288
|
+
}
|
|
289
|
+
interface ChartLabels {
|
|
290
|
+
topBar: TopBarLabels;
|
|
291
|
+
bottomBar: BottomBarLabels;
|
|
292
|
+
drawingToolbar: DrawingToolbarLabels;
|
|
293
|
+
ohlc: OhlcLabels;
|
|
294
|
+
trade: TradeLabels;
|
|
295
|
+
dialogs: DialogLabels;
|
|
296
|
+
chart: ChartMiscLabels;
|
|
297
|
+
}
|
|
298
|
+
declare const DEFAULT_LABELS: ChartLabels;
|
|
299
|
+
/**
|
|
300
|
+
* Deep-merges a partial labels override on top of `DEFAULT_LABELS`.
|
|
301
|
+
* Only keys you provide are overridden; all others fall back to the defaults.
|
|
302
|
+
*
|
|
303
|
+
* @example
|
|
304
|
+
* const labels = resolveLabels({
|
|
305
|
+
* trade: { buy: 'Acheter', sell: 'Vendre' },
|
|
306
|
+
* });
|
|
307
|
+
*/
|
|
308
|
+
declare function resolveLabels(override?: DeepPartial$1<ChartLabels>): ChartLabels;
|
|
309
|
+
|
|
310
|
+
type DeepPartial<T> = {
|
|
311
|
+
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
|
|
312
|
+
};
|
|
313
|
+
/** Accent and interactive-state colors shared across all UI components. */
|
|
314
|
+
interface ChartThemeUi {
|
|
315
|
+
/** Primary accent color — active borders, highlights (e.g. #2196f3 blue) */
|
|
316
|
+
accent: string;
|
|
317
|
+
/** Text color on accented (active) elements */
|
|
318
|
+
accentText: string;
|
|
319
|
+
/** Light semi-transparent fill for active list rows / buttons */
|
|
320
|
+
accentBg: string;
|
|
321
|
+
/** Slightly stronger semi-transparent fill (drawing-toolbar active icons) */
|
|
322
|
+
accentBgStrong: string;
|
|
323
|
+
/** Text color for unimplemented / disabled tool entries */
|
|
324
|
+
disabledText: string;
|
|
325
|
+
/** Text color for "coming soon" badges */
|
|
326
|
+
soonBadgeText: string;
|
|
327
|
+
/** Stream-status indicator dot colors */
|
|
328
|
+
stream: {
|
|
329
|
+
connected: string;
|
|
330
|
+
reconnecting: string;
|
|
331
|
+
disconnected: string;
|
|
332
|
+
};
|
|
333
|
+
}
|
|
334
|
+
/** Colors specific to the drawing toolbar (LeftBar). */
|
|
335
|
+
interface DrawingToolbarColors {
|
|
336
|
+
/** Default icon color (category buttons, action buttons) */
|
|
337
|
+
iconColor: string;
|
|
338
|
+
/** Active/selected icon color */
|
|
339
|
+
activeIconColor: string;
|
|
340
|
+
/** Flyout row text for implemented tools */
|
|
341
|
+
flyoutLabelColor: string;
|
|
342
|
+
/** Flyout group-heading color */
|
|
343
|
+
flyoutHeadingColor: string;
|
|
344
|
+
}
|
|
345
|
+
/** Colors specific to the top bar and its flyout dropdowns. */
|
|
346
|
+
interface TopBarColors {
|
|
347
|
+
/** Default button text color */
|
|
348
|
+
btnColor: string;
|
|
349
|
+
/** Active button text color */
|
|
350
|
+
activeBtnColor: string;
|
|
351
|
+
/** Flyout row text color */
|
|
352
|
+
flyoutRowColor: string;
|
|
353
|
+
/** Flyout group-header text color */
|
|
354
|
+
flyoutCategoryColor: string;
|
|
355
|
+
}
|
|
356
|
+
/** Colors specific to the bottom bar duration buttons. */
|
|
357
|
+
interface BottomBarColors {
|
|
358
|
+
/** Inactive duration button text */
|
|
359
|
+
btnColor: string;
|
|
360
|
+
/** Active duration button background */
|
|
361
|
+
activeBtnBg: string;
|
|
362
|
+
/** Active duration button text */
|
|
363
|
+
activeBtnText: string;
|
|
364
|
+
/** Active duration button border */
|
|
365
|
+
activeBtnBorder: string;
|
|
366
|
+
}
|
|
367
|
+
/** Colors specific to the indicator overlay pills. */
|
|
368
|
+
interface IndicatorOverlayColors {
|
|
369
|
+
/** Pill background (semi-transparent) */
|
|
370
|
+
pillBg: string;
|
|
371
|
+
/** Gear and remove icon color */
|
|
372
|
+
iconColor: string;
|
|
373
|
+
/** Dropdown row hover background */
|
|
374
|
+
dropdownHoverBg: string;
|
|
375
|
+
}
|
|
376
|
+
/** Colors for trade/position horizontal level lines. */
|
|
377
|
+
interface TradeLevelColors {
|
|
378
|
+
/** Line + box border color for open executed trades. */
|
|
379
|
+
tradeLine: string;
|
|
380
|
+
/** Line + box border color for open positions. */
|
|
381
|
+
positionLine: string;
|
|
382
|
+
/** Dashed line color for pending buy orders (limit/stop). */
|
|
383
|
+
pendingBuyLine: string;
|
|
384
|
+
/** Dashed line color for pending sell orders (limit/stop). */
|
|
385
|
+
pendingSellLine: string;
|
|
386
|
+
/** Primary text color inside the info box. */
|
|
387
|
+
labelText: string;
|
|
388
|
+
/** Background fill of the × close button. */
|
|
389
|
+
closeBtn: string;
|
|
390
|
+
/** Icon color of the × inside the close button. */
|
|
391
|
+
closeBtnText: string;
|
|
392
|
+
/** Background of the floating info box (semi-transparent). */
|
|
393
|
+
boxBg: string;
|
|
394
|
+
/** Background of the floating info box when hovered. */
|
|
395
|
+
boxBgHover: string;
|
|
396
|
+
/** Color of the 6-dot drag grip icon. */
|
|
397
|
+
dragHandle: string;
|
|
398
|
+
/** Color of the drag grip icon when hovered. */
|
|
399
|
+
dragHandleHover: string;
|
|
400
|
+
}
|
|
401
|
+
/** Colors for the Trade Panel side drawer. */
|
|
402
|
+
interface TradePanelColors {
|
|
403
|
+
background: string;
|
|
404
|
+
border: string;
|
|
405
|
+
headerBg: string;
|
|
406
|
+
tabActive: string;
|
|
407
|
+
tabInactive: string;
|
|
408
|
+
rowHoverBg: string;
|
|
409
|
+
rowText: string;
|
|
410
|
+
rowSubText: string;
|
|
411
|
+
}
|
|
412
|
+
interface ChartTheme {
|
|
413
|
+
background: string;
|
|
414
|
+
grid: string;
|
|
415
|
+
axisText: string;
|
|
416
|
+
axisBorder: string;
|
|
417
|
+
crosshair: string;
|
|
418
|
+
tooltip: {
|
|
419
|
+
background: string;
|
|
420
|
+
text: string;
|
|
421
|
+
border: string;
|
|
422
|
+
};
|
|
423
|
+
candle: {
|
|
424
|
+
up: string;
|
|
425
|
+
down: string;
|
|
426
|
+
wickUp: string;
|
|
427
|
+
wickDown: string;
|
|
428
|
+
/** Border/outline color for up candle bodies. Defaults to `up` if omitted. */
|
|
429
|
+
borderUp?: string;
|
|
430
|
+
/** Border/outline color for down candle bodies. Defaults to `down` if omitted. */
|
|
431
|
+
borderDown?: string;
|
|
432
|
+
};
|
|
433
|
+
volume: {
|
|
434
|
+
up: string;
|
|
435
|
+
down: string;
|
|
436
|
+
};
|
|
437
|
+
/** Shared accent / interactive-state colors */
|
|
438
|
+
ui: ChartThemeUi;
|
|
439
|
+
/** Drawing toolbar (LeftBar) specific colors */
|
|
440
|
+
drawingToolbar: DrawingToolbarColors;
|
|
441
|
+
/** Top bar specific colors */
|
|
442
|
+
topBar: TopBarColors;
|
|
443
|
+
/** Bottom bar specific colors */
|
|
444
|
+
bottomBar: BottomBarColors;
|
|
445
|
+
/** Indicator overlay (pills) specific colors */
|
|
446
|
+
indicatorOverlay: IndicatorOverlayColors;
|
|
447
|
+
/** Trade and position level line colors */
|
|
448
|
+
tradeLevels: TradeLevelColors;
|
|
449
|
+
/** Trade Panel side drawer colors */
|
|
450
|
+
tradePanel: TradePanelColors;
|
|
451
|
+
}
|
|
452
|
+
/** A deep-partial version of ChartTheme for use in `themeOverrides`. */
|
|
453
|
+
type DeepPartialChartTheme = DeepPartial<ChartTheme>;
|
|
454
|
+
/**
|
|
455
|
+
* Deep-merge a partial theme override on top of a full base theme.
|
|
456
|
+
* Only the keys you supply are replaced; everything else falls back to `base`.
|
|
457
|
+
*/
|
|
458
|
+
declare function deepMergeTheme(base: ChartTheme, override: DeepPartial<ChartTheme> | undefined): ChartTheme;
|
|
459
|
+
/**
|
|
460
|
+
* Walk every color string in `theme` and resolve any `var(--…)` CSS custom
|
|
461
|
+
* properties to a concrete color value using the provided container element.
|
|
462
|
+
* Non-variable strings are returned unchanged.
|
|
463
|
+
*
|
|
464
|
+
* Must be called after the container is appended to the live DOM so that the
|
|
465
|
+
* browser can look up the custom property inheritance chain.
|
|
466
|
+
*/
|
|
467
|
+
declare function resolveCssVarsInTheme(theme: ChartTheme, container: HTMLElement): ChartTheme;
|
|
468
|
+
declare const DARK_THEME: ChartTheme;
|
|
469
|
+
declare const LIGHT_THEME: ChartTheme;
|
|
470
|
+
|
|
471
|
+
interface OHLCVBar {
|
|
472
|
+
time: number;
|
|
473
|
+
open: number;
|
|
474
|
+
high: number;
|
|
475
|
+
low: number;
|
|
476
|
+
close: number;
|
|
477
|
+
volume?: number;
|
|
478
|
+
}
|
|
479
|
+
interface Viewport {
|
|
480
|
+
startIndex: number;
|
|
481
|
+
endIndex: number;
|
|
482
|
+
candleWidth: number;
|
|
483
|
+
candleGap: number;
|
|
484
|
+
}
|
|
485
|
+
interface PriceRange {
|
|
486
|
+
min: number;
|
|
487
|
+
max: number;
|
|
488
|
+
}
|
|
489
|
+
type SeriesType = "candlestick" | "hollow" | "line" | "area" | "ohlc" | "heikinashi" | "volumecandles" | "linemarkers" | "step" | "hlcarea" | "baseline" | "columns" | "highlow";
|
|
490
|
+
type Theme = "dark" | "light";
|
|
491
|
+
type Timeframe = "1m" | "5m" | "15m" | "30m" | "1h" | "4h" | "1D" | "1W" | "1M" | "1Y";
|
|
492
|
+
type Duration = "1D" | "5D" | "1M" | "3M" | "6M" | "1Y" | "5Y" | "All";
|
|
493
|
+
interface Padding {
|
|
494
|
+
top: number;
|
|
495
|
+
right: number;
|
|
496
|
+
bottom: number;
|
|
497
|
+
left: number;
|
|
498
|
+
}
|
|
499
|
+
interface OrderSubmit {
|
|
500
|
+
price: number;
|
|
501
|
+
lots: number;
|
|
502
|
+
side: 'buy' | 'sell';
|
|
503
|
+
/** 'market' for immediate execution; 'limit'/'stop' for pending orders. Default: 'market'. */
|
|
504
|
+
orderType?: 'market' | 'limit' | 'stop';
|
|
505
|
+
stopLoss?: number;
|
|
506
|
+
takeProfit?: number;
|
|
507
|
+
}
|
|
508
|
+
interface DataLoaderParams {
|
|
509
|
+
start: Date;
|
|
510
|
+
end: Date;
|
|
511
|
+
interval: string;
|
|
512
|
+
}
|
|
513
|
+
interface ChartConfig {
|
|
514
|
+
container: HTMLElement;
|
|
515
|
+
theme?: Theme;
|
|
516
|
+
series?: SeriesType;
|
|
517
|
+
showVolume?: boolean;
|
|
518
|
+
showUI?: boolean;
|
|
519
|
+
/** If false, the drawing tools toolbar and pencil button are hidden entirely. Default: true */
|
|
520
|
+
showDrawingTools?: boolean;
|
|
521
|
+
timeframe?: Timeframe;
|
|
522
|
+
duration?: Duration;
|
|
523
|
+
symbol?: string;
|
|
524
|
+
/** List of symbols/ISINs the user can switch between via the symbol picker modal. */
|
|
525
|
+
isins?: string[];
|
|
526
|
+
/** Called when the user picks a symbol from the picker modal. Parent should call setSymbol() + setData(). */
|
|
527
|
+
onIsinSelect?: (isin: string) => void;
|
|
528
|
+
padding?: Partial<Padding>;
|
|
529
|
+
/** Minimum (and default) lot size shown in the trade popover and pre-filled in the draft order qty input (default: 1) */
|
|
530
|
+
minLots?: number;
|
|
531
|
+
/** Called when user submits an order via the floating trade button */
|
|
532
|
+
onOrderSubmit?: (order: OrderSubmit) => void;
|
|
533
|
+
/** Called when the user changes the qty input on a draft order. Use to sync external order panels. */
|
|
534
|
+
onLotsChange?: (lots: number) => void;
|
|
535
|
+
/** @deprecated Use onLevelEdit which delivers all changes in one event. */
|
|
536
|
+
onLevelDragEnd?: (payload: {
|
|
537
|
+
label: string;
|
|
538
|
+
type: TradeLevelType;
|
|
539
|
+
newPrice: number;
|
|
540
|
+
data: unknown;
|
|
541
|
+
}) => void;
|
|
542
|
+
/** Called when the user confirms edits to a level. All changes (main price, SL, TP) arrive together in one event. */
|
|
543
|
+
onLevelEdit?: (payload: {
|
|
544
|
+
label: string;
|
|
545
|
+
type: TradeLevelType;
|
|
546
|
+
data: unknown;
|
|
547
|
+
changes: Array<{
|
|
548
|
+
field: 'MAIN' | 'SL' | 'TP' | 'ADD_SL' | 'ADD_TP' | 'REMOVE_SL' | 'REMOVE_TP';
|
|
549
|
+
newPrice: number;
|
|
550
|
+
data: unknown;
|
|
551
|
+
bracketOrderLabel?: string;
|
|
552
|
+
}>;
|
|
553
|
+
}) => void;
|
|
554
|
+
/**
|
|
555
|
+
* Override the default duration → timeframe pairing used by the bottom bar.
|
|
556
|
+
* Can be supplied as a plain JSON object. Only entries provided are overridden;
|
|
557
|
+
* the rest fall back to the built-in defaults.
|
|
558
|
+
* Example: { "1Y": "1D", "5Y": "1W", "All": "1M" }
|
|
559
|
+
*/
|
|
560
|
+
durationTimeframeMap?: Partial<Record<Duration, Timeframe>>;
|
|
561
|
+
/**
|
|
562
|
+
* Optional data loader. When provided, ChartEngine calls this for initial
|
|
563
|
+
* load, timeframe/duration changes, and scroll-back historical fetches.
|
|
564
|
+
* The consumer owns URL building, auth, and response parsing.
|
|
565
|
+
*/
|
|
566
|
+
dataLoader?: (params: DataLoaderParams) => Promise<OHLCVBar[]>;
|
|
567
|
+
/**
|
|
568
|
+
* Optional color overrides for the built-in dark and/or light themes.
|
|
569
|
+
* Only the keys you provide are replaced; everything else falls back to
|
|
570
|
+
* DARK_THEME / LIGHT_THEME. Accepts any CSS color string including CSS
|
|
571
|
+
* custom properties (e.g. `"var(--my-bg)"`).
|
|
572
|
+
*
|
|
573
|
+
* @example
|
|
574
|
+
* themeOverrides: {
|
|
575
|
+
* dark: { background: 'var(--sidebar-bg-dark)', axisText: '#ccc' },
|
|
576
|
+
* light: { background: 'var(--sidebar-bg-light)' },
|
|
577
|
+
* }
|
|
578
|
+
*/
|
|
579
|
+
themeOverrides?: {
|
|
580
|
+
dark?: DeepPartialChartTheme;
|
|
581
|
+
light?: DeepPartialChartTheme;
|
|
582
|
+
};
|
|
583
|
+
/**
|
|
584
|
+
* Optional per-component UI configuration overrides (font sizes, icon
|
|
585
|
+
* sizes, spacing). Only the keys you provide are overridden; all others
|
|
586
|
+
* fall back to DEFAULT_UI_CONFIG. Colors are controlled via the theme.
|
|
587
|
+
*/
|
|
588
|
+
uiConfig?: DeepPartial$1<UiConfig>;
|
|
589
|
+
/**
|
|
590
|
+
* Optional user-visible string overrides for translation / localisation.
|
|
591
|
+
* Only the keys you provide are overridden; all others fall back to
|
|
592
|
+
* DEFAULT_LABELS (English).
|
|
593
|
+
*
|
|
594
|
+
* @example
|
|
595
|
+
* labels: {
|
|
596
|
+
* trade: { buy: 'Acheter', sell: 'Vendre' },
|
|
597
|
+
* ohlc: { open: 'O', high: 'H', low: 'L', close: 'C', volume: 'V' },
|
|
598
|
+
* }
|
|
599
|
+
*/
|
|
600
|
+
labels?: DeepPartial$1<ChartLabels>;
|
|
601
|
+
/**
|
|
602
|
+
* How long (ms) the tick-activity indicator stays green after the last
|
|
603
|
+
* received tick before reverting to the stream-connection colour.
|
|
604
|
+
* Default: 30 000 (30 s).
|
|
605
|
+
*/
|
|
606
|
+
tickActivityMs?: number;
|
|
607
|
+
/**
|
|
608
|
+
* Maximum number of candles to request per data load.
|
|
609
|
+
* Caps the start-date window so a fine-grained timeframe (e.g. 1m)
|
|
610
|
+
* with a long duration (e.g. 1Y) doesn't request hundreds of thousands
|
|
611
|
+
* of bars. Default: 200.
|
|
612
|
+
*/
|
|
613
|
+
maxCandles?: number;
|
|
614
|
+
/**
|
|
615
|
+
* On touch/mobile devices, the initial visible bar count is
|
|
616
|
+
* `DEFAULT_VISIBLE_BARS / mobileBarDivisor`. Accepted values: 2, 3, 4.
|
|
617
|
+
* Default: `2`.
|
|
618
|
+
*/
|
|
619
|
+
mobileBarDivisor?: 2 | 3 | 4;
|
|
620
|
+
/**
|
|
621
|
+
* Which side of the quote to use for candle close/high/low during live
|
|
622
|
+
* tick updates. Defaults to `'bid'` (forex convention). Set to `'ask'`
|
|
623
|
+
* if your broker streams ask-based OHLCV bars.
|
|
624
|
+
*/
|
|
625
|
+
tickClosePriceSource?: 'bid' | 'ask';
|
|
626
|
+
/**
|
|
627
|
+
* When the combined count of open positions and pending orders exceeds this
|
|
628
|
+
* number, the position render style auto-defaults to `'dot'` (compact).
|
|
629
|
+
* Below or equal to the threshold it defaults to `'line'` (full line).
|
|
630
|
+
* Users can still override this at any time from the Settings dialog.
|
|
631
|
+
* When omitted, defaults to `2`.
|
|
632
|
+
*/
|
|
633
|
+
tradesThresholdForHorizontalLine?: number;
|
|
634
|
+
/**
|
|
635
|
+
* Initial position render style. When provided, overrides the auto-threshold
|
|
636
|
+
* logic and localStorage. Restored from persisted state by the host app.
|
|
637
|
+
*/
|
|
638
|
+
positionRenderStyle?: PositionRenderStyle;
|
|
639
|
+
/**
|
|
640
|
+
* Initial trade display filter. Controls which level types are visible.
|
|
641
|
+
* Restored from persisted state by the host app.
|
|
642
|
+
*/
|
|
643
|
+
tradeDisplayFilter?: TradeDisplayFilter;
|
|
644
|
+
/**
|
|
645
|
+
* Initial per-theme canvas color overrides (set via the Settings dialog).
|
|
646
|
+
* Restored from persisted state by the host app.
|
|
647
|
+
*/
|
|
648
|
+
canvasColors?: {
|
|
649
|
+
dark?: Partial<CanvasColorSettings>;
|
|
650
|
+
light?: Partial<CanvasColorSettings>;
|
|
651
|
+
};
|
|
652
|
+
/**
|
|
653
|
+
* Show both Bid and Ask price lines as dashed horizontal lines on the chart.
|
|
654
|
+
* When `false` (default), only the `tickClosePriceSource` side is shown.
|
|
655
|
+
* Only relevant when a live tick stream is active.
|
|
656
|
+
* Default: `false`.
|
|
657
|
+
*/
|
|
658
|
+
showBidAskLines?: boolean;
|
|
659
|
+
/**
|
|
660
|
+
* Show the ACT logo watermark in the bottom-left corner of the price pane.
|
|
661
|
+
* Default: `false`.
|
|
662
|
+
*/
|
|
663
|
+
showActLogo?: boolean;
|
|
664
|
+
/**
|
|
665
|
+
* Maximum number of sub-pane indicators (oscillators) that can be active
|
|
666
|
+
* simultaneously. Prevents layout collapse when too many panes are stacked.
|
|
667
|
+
* Default: 3.
|
|
668
|
+
*/
|
|
669
|
+
maxSubPanes?: number;
|
|
670
|
+
/**
|
|
671
|
+
* Show the candle countdown timer on the time axis beneath the last (live) candle.
|
|
672
|
+
* Default: `true`.
|
|
673
|
+
*/
|
|
674
|
+
showCandleCountdown?: boolean;
|
|
675
|
+
/**
|
|
676
|
+
* Timeframes on which the candle countdown is shown.
|
|
677
|
+
* - `undefined` (default): intraday only (`1m`–`4h`)
|
|
678
|
+
* - `'all'`: every timeframe
|
|
679
|
+
* - `Timeframe[]`: explicit allowlist (e.g. `['1D', '1W']`)
|
|
680
|
+
* Requires `showCandleCountdown: true` (default).
|
|
681
|
+
*/
|
|
682
|
+
candleCountdownTimeframes?: Timeframe[] | 'all';
|
|
683
|
+
/**
|
|
684
|
+
* Per-timeframe base interval map. For each timeframe key, specifies which
|
|
685
|
+
* interval the `dataLoader` will be called with. The library then aggregates
|
|
686
|
+
* the returned bars up to the target timeframe before rendering.
|
|
687
|
+
*
|
|
688
|
+
* Defaults to the timeframe itself when a key is not present (no aggregation).
|
|
689
|
+
* Only entries where the mapped base interval is finer than the target timeframe
|
|
690
|
+
* result in aggregation; equal or coarser values are ignored.
|
|
691
|
+
*
|
|
692
|
+
* @example
|
|
693
|
+
* // API natively supports only 30m and 1D — higher TFs are built client-side:
|
|
694
|
+
* aggregateFrom: {
|
|
695
|
+
* '1h': '30m', // fetch 30-min bars → aggregate to 1H
|
|
696
|
+
* '4h': '30m', // fetch 30-min bars → aggregate to 4H
|
|
697
|
+
* '1W': '1D', // fetch daily bars → aggregate to 1W
|
|
698
|
+
* '1M': '1D', // fetch daily bars → aggregate to 1M
|
|
699
|
+
* }
|
|
700
|
+
*/
|
|
701
|
+
aggregateFrom?: Partial<Record<Timeframe, Timeframe>>;
|
|
702
|
+
}
|
|
703
|
+
interface IndicatorResult {
|
|
704
|
+
index: number;
|
|
705
|
+
value: number | null;
|
|
706
|
+
upper?: number | null;
|
|
707
|
+
lower?: number | null;
|
|
708
|
+
signal?: number | null;
|
|
709
|
+
histogram?: number | null;
|
|
710
|
+
}
|
|
711
|
+
interface IIndicator {
|
|
712
|
+
readonly name: string;
|
|
713
|
+
readonly color: string;
|
|
714
|
+
readonly pane?: "main" | "sub";
|
|
715
|
+
readonly paneHeight?: number;
|
|
716
|
+
compute(data: OHLCVBar[]): IndicatorResult[];
|
|
717
|
+
/**
|
|
718
|
+
* Returns the natural value range for the given results.
|
|
719
|
+
* Used to render a price axis on the right side of sub-panes and to support draggable Y-scale.
|
|
720
|
+
* Only required for sub-pane indicators.
|
|
721
|
+
*/
|
|
722
|
+
getValueRange?(results: IndicatorResult[]): PriceRange;
|
|
723
|
+
render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scaleManager: ScaleManager, viewport: Viewport, chartHeight: number, rangeOverride?: PriceRange): void;
|
|
724
|
+
}
|
|
725
|
+
type DrawingToolType = "horizontalLine" | "verticalLine" | "trendLine" | "rectangle" | "ellipse" | "circle" | "triangle" | "fibRetracement" | "fibExtension" | "fibChannel" | "fibProjection" | "fibFan" | "fibCircles" | "fibSpiral" | "fibTimezone" | "flatChannel" | "parallelChannel" | "disjointChannel" | "pitchfork" | "schiffPitchfork" | "modifiedSchiff" | "insidePitchfork" | "crossLine" | "trendAngle" | "arc" | "sineLine" | "rotatedRectangle" | "path" | "polyline" | "brush" | "highlighter" | "text" | "callout" | "priceLabel" | "priceNote" | "anchoredNote" | "arrowUp" | "arrowDown" | "arrowMarker" | "flag" | "volumeProfile" | "anchoredVP" | "fixedRangeVP" | "abcdPattern" | "gartleyPattern" | "batPattern" | "butterflyPattern" | "crabPattern" | "sharkPattern" | "cypherPattern" | "headShoulders" | "trianglePattern" | "threeDrives" | "elliottImpulse" | "elliottCorrective" | "elliottTriangle" | "elliottWxy" | "elliottCombination" | "gannFan" | "gannSquare" | "gannBox" | "priceRange" | "dateRange" | "datePriceRange" | "ruler" | "regressionTrend" | "projection" | "cyclicLines" | "timeCycles" | "priceProjection" | "ghostFeed";
|
|
726
|
+
interface DrawingPoint {
|
|
727
|
+
barIndex: number;
|
|
728
|
+
price: number;
|
|
729
|
+
}
|
|
730
|
+
/** A resize handle on a drawing — identifies which point can be dragged */
|
|
731
|
+
interface DrawingHandle {
|
|
732
|
+
pointIndex: number;
|
|
733
|
+
cursor: string;
|
|
734
|
+
}
|
|
735
|
+
interface IDrawing {
|
|
736
|
+
id: string;
|
|
737
|
+
type: DrawingToolType;
|
|
738
|
+
points: DrawingPoint[];
|
|
739
|
+
complete: boolean;
|
|
740
|
+
visible?: boolean;
|
|
741
|
+
locked?: boolean;
|
|
742
|
+
text?: string;
|
|
743
|
+
render(ctx: CanvasRenderingContext2D, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number, isSelected: boolean, pricePrecision?: number): void;
|
|
744
|
+
hitTest(x: number, y: number, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number): boolean;
|
|
745
|
+
/** Returns the handle under (x, y), or null if none */
|
|
746
|
+
getHandle(x: number, y: number, scale: ScaleManager, viewport: Viewport, priceRange: PriceRange, chartW: number, chartH: number): DrawingHandle | null;
|
|
747
|
+
}
|
|
748
|
+
type StreamStatus = "connected" | "disconnected" | "reconnecting";
|
|
749
|
+
interface Tick {
|
|
750
|
+
time: number;
|
|
751
|
+
bid: number;
|
|
752
|
+
ask: number;
|
|
753
|
+
volume: number;
|
|
754
|
+
}
|
|
755
|
+
interface IWebSocketAdapter {
|
|
756
|
+
connect(): void;
|
|
757
|
+
disconnect(): void;
|
|
758
|
+
onTick(callback: (tick: Tick) => void): void;
|
|
759
|
+
onStatus(callback: (status: StreamStatus) => void): void;
|
|
760
|
+
}
|
|
761
|
+
type IndicatorParams = Record<string, number | string>;
|
|
762
|
+
interface ActiveIndicatorState {
|
|
763
|
+
indicator: IIndicator;
|
|
764
|
+
shortName: string;
|
|
765
|
+
currentParams: IndicatorParams;
|
|
766
|
+
visible: boolean;
|
|
767
|
+
}
|
|
768
|
+
/** Serializable snapshot of a drawing — contains only data fields, no methods. */
|
|
769
|
+
interface SerializedDrawing {
|
|
770
|
+
id: string;
|
|
771
|
+
type: DrawingToolType;
|
|
772
|
+
points: DrawingPoint[];
|
|
773
|
+
complete: boolean;
|
|
774
|
+
visible?: boolean;
|
|
775
|
+
text?: string;
|
|
776
|
+
locked?: boolean;
|
|
777
|
+
}
|
|
778
|
+
/** Serializable per-symbol chart state emitted via the `stateChange` event. */
|
|
779
|
+
interface IndicatorStateEntry {
|
|
780
|
+
shortName: string;
|
|
781
|
+
params: IndicatorParams;
|
|
782
|
+
visible?: boolean;
|
|
783
|
+
}
|
|
784
|
+
/** Color overrides for the chart canvas elements (background, grid, candles, etc.). */
|
|
785
|
+
interface CanvasColorSettings {
|
|
786
|
+
background: string;
|
|
787
|
+
grid: string;
|
|
788
|
+
axisText: string;
|
|
789
|
+
axisBorder: string;
|
|
790
|
+
crosshair: string;
|
|
791
|
+
candleUp: string;
|
|
792
|
+
candleDown: string;
|
|
793
|
+
wickUp: string;
|
|
794
|
+
wickDown: string;
|
|
795
|
+
borderUp: string;
|
|
796
|
+
borderDown: string;
|
|
797
|
+
volumeUp: string;
|
|
798
|
+
volumeDown: string;
|
|
799
|
+
}
|
|
800
|
+
/** Full serializable snapshot of user-configured chart state per symbol. */
|
|
801
|
+
interface ChartState {
|
|
802
|
+
symbol: string;
|
|
803
|
+
timeframe: Timeframe;
|
|
804
|
+
duration?: Duration;
|
|
805
|
+
series: SeriesType;
|
|
806
|
+
showVolume: boolean;
|
|
807
|
+
theme: 'dark' | 'light';
|
|
808
|
+
indicators: IndicatorStateEntry[];
|
|
809
|
+
drawings: SerializedDrawing[];
|
|
810
|
+
/** User-selected position render style (line / dot). */
|
|
811
|
+
positionRenderStyle?: PositionRenderStyle;
|
|
812
|
+
/** Which trade level types are visible on the chart. */
|
|
813
|
+
tradeDisplayFilter?: TradeDisplayFilter;
|
|
814
|
+
/** Per-theme canvas color overrides set via the Settings dialog. */
|
|
815
|
+
canvasColors?: {
|
|
816
|
+
dark?: Partial<CanvasColorSettings>;
|
|
817
|
+
light?: Partial<CanvasColorSettings>;
|
|
818
|
+
};
|
|
819
|
+
}
|
|
820
|
+
interface CrosshairPosition {
|
|
821
|
+
x: number;
|
|
822
|
+
y: number;
|
|
823
|
+
barIndex: number;
|
|
824
|
+
price: number;
|
|
825
|
+
bar: OHLCVBar | null;
|
|
826
|
+
}
|
|
827
|
+
type ChartEventMap = {
|
|
828
|
+
crosshair: CrosshairPosition;
|
|
829
|
+
click: CrosshairPosition;
|
|
830
|
+
zoom: {
|
|
831
|
+
viewport: Viewport;
|
|
832
|
+
};
|
|
833
|
+
pan: {
|
|
834
|
+
viewport: Viewport;
|
|
835
|
+
};
|
|
836
|
+
timeframeChange: {
|
|
837
|
+
timeframe: Timeframe;
|
|
838
|
+
};
|
|
839
|
+
durationChange: {
|
|
840
|
+
duration: Duration;
|
|
841
|
+
timeframe: Timeframe;
|
|
842
|
+
};
|
|
843
|
+
seriesChange: {
|
|
844
|
+
series: SeriesType;
|
|
845
|
+
};
|
|
846
|
+
streamStatus: {
|
|
847
|
+
status: StreamStatus;
|
|
848
|
+
};
|
|
849
|
+
/** Emitted after a full data reload (initial load or timeframe/duration change).
|
|
850
|
+
* Consumers can use this to reconnect a live stream with the new params. */
|
|
851
|
+
dataLoaded: {
|
|
852
|
+
timeframe: Timeframe;
|
|
853
|
+
interval: string;
|
|
854
|
+
start: Date;
|
|
855
|
+
end: Date;
|
|
856
|
+
};
|
|
857
|
+
/** Emitted when the user clicks the × button on a trade, position, or bracket (SL/TP) level. */
|
|
858
|
+
tradeLevelClose: {
|
|
859
|
+
label: string;
|
|
860
|
+
type: TradeLevelType;
|
|
861
|
+
/** CLOSED = position closed; CANCELLED = order cancelled; REMOVE_SL / REMOVE_TP = bracket removed. */
|
|
862
|
+
action: 'CLOSED' | 'CANCELLED' | 'REMOVE_SL' | 'REMOVE_TP';
|
|
863
|
+
/** The specific level/order being closed — bracket order's data when closing an SL/TP, parent's data otherwise. */
|
|
864
|
+
data: unknown;
|
|
865
|
+
/** Present only when closing an SL or TP bracket line (not the main level). */
|
|
866
|
+
bracketType?: 'SL' | 'TP';
|
|
867
|
+
};
|
|
868
|
+
/** Emitted when user finishes dragging a pending/position level line to a new price. */
|
|
869
|
+
tradeLevelDragEnd: {
|
|
870
|
+
label: string;
|
|
871
|
+
type: TradeLevelType;
|
|
872
|
+
newPrice: number;
|
|
873
|
+
data: unknown;
|
|
874
|
+
};
|
|
875
|
+
/** Emitted when user finishes dragging a bracket (SL/TP) line of a pending order. */
|
|
876
|
+
tradeLevelBracketDrag: {
|
|
877
|
+
label: string;
|
|
878
|
+
bracketType: 'stopLoss' | 'takeProfit';
|
|
879
|
+
newPrice: number;
|
|
880
|
+
data: unknown;
|
|
881
|
+
};
|
|
882
|
+
/** Emitted when user clicks the Edit (pencil) button on a level. Use to open/pre-fill an external order panel. */
|
|
883
|
+
tradeLevelEditOpen: {
|
|
884
|
+
label: string;
|
|
885
|
+
type: TradeLevelType;
|
|
886
|
+
data: unknown;
|
|
887
|
+
price: number;
|
|
888
|
+
side?: 'buy' | 'sell';
|
|
889
|
+
stopLossPrice?: number;
|
|
890
|
+
takeProfitPrice?: number;
|
|
891
|
+
};
|
|
892
|
+
/** Emitted on every mouse-move while dragging a trade level line (before confirm).
|
|
893
|
+
* `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag. */
|
|
894
|
+
tradeLevelDrag: {
|
|
895
|
+
label: string;
|
|
896
|
+
newPrice: number;
|
|
897
|
+
data: unknown;
|
|
898
|
+
bracketType?: 'stopLoss' | 'takeProfit';
|
|
899
|
+
};
|
|
900
|
+
/** Emitted when chart's ✓ button confirms an edit (including draft orders). External panel listens to reset/close itself. */
|
|
901
|
+
tradeLevelConfirmed: {
|
|
902
|
+
label: string;
|
|
903
|
+
type: TradeLevelType | 'draft';
|
|
904
|
+
};
|
|
905
|
+
/** Emitted after any user-driven change to chart configuration (timeframe, series, indicators, drawings, etc.).
|
|
906
|
+
* The payload is a full serializable snapshot — consumers can persist it keyed by symbol. */
|
|
907
|
+
stateChange: {
|
|
908
|
+
symbol: string;
|
|
909
|
+
state: ChartState;
|
|
910
|
+
};
|
|
911
|
+
/** Emitted when a candle period closes and a new one opens (detected via tick timestamp).
|
|
912
|
+
* `completedBar` is the tick-reconstructed closed candle — may diverge from exchange OHLCV.
|
|
913
|
+
* `openingBar` is the newly appended candle.
|
|
914
|
+
* `intervalMs` is the candle duration — use it to build the re-fetch window.
|
|
915
|
+
* The library automatically re-fetches via `dataLoader` if one is configured; this event
|
|
916
|
+
* is emitted regardless so consumers can react (e.g. update external state). */
|
|
917
|
+
newBar: {
|
|
918
|
+
completedBar: OHLCVBar;
|
|
919
|
+
openingBar: OHLCVBar;
|
|
920
|
+
intervalMs: number;
|
|
921
|
+
};
|
|
922
|
+
/** Emitted when the user confirms all edits to a level — replaces separate tradeLevelDragEnd / tradeLevelBracketDrag events. */
|
|
923
|
+
tradeLevelEdit: {
|
|
924
|
+
label: string;
|
|
925
|
+
type: TradeLevelType;
|
|
926
|
+
/** Parent level's data. */
|
|
927
|
+
data: unknown;
|
|
928
|
+
changes: Array<{
|
|
929
|
+
/** MAIN = entry price edit; SL/TP = bracket edit; ADD_SL/ADD_TP = new bracket placed; REMOVE_SL/REMOVE_TP = bracket removed. */
|
|
930
|
+
field: 'MAIN' | 'SL' | 'TP' | 'ADD_SL' | 'ADD_TP' | 'REMOVE_SL' | 'REMOVE_TP';
|
|
931
|
+
newPrice: number;
|
|
932
|
+
/** Bracket order's data when the bracket is a ToClose order; parent's data for inline brackets. */
|
|
933
|
+
data: unknown;
|
|
934
|
+
bracketOrderLabel?: string;
|
|
935
|
+
}>;
|
|
936
|
+
};
|
|
937
|
+
};
|
|
938
|
+
/** Distinguishes level types: historical trade, open position, or pending order. */
|
|
939
|
+
type TradeLevelType = 'trade' | 'position' | 'pending';
|
|
940
|
+
/** Controls which level types are visible on the chart. */
|
|
941
|
+
type TradeDisplayFilter = 'all' | 'positions' | 'orders' | 'none';
|
|
942
|
+
/** Controls the visual rendering style for position levels. */
|
|
943
|
+
type PositionRenderStyle = 'line' | 'dot';
|
|
944
|
+
/**
|
|
945
|
+
* A horizontal price level for a historical/closed trade.
|
|
946
|
+
* Rendered as a line with a compact info box — no PnL display.
|
|
947
|
+
*/
|
|
948
|
+
interface TradeLevel {
|
|
949
|
+
/** Unique identifier for this level — used for hit testing and events. */
|
|
950
|
+
label: string;
|
|
951
|
+
/**
|
|
952
|
+
* Text displayed in the info box. Falls back to `label` when omitted.
|
|
953
|
+
* Use this to send consumer-formatted strings like "Buy 0.01 lot".
|
|
954
|
+
*/
|
|
955
|
+
text?: string;
|
|
956
|
+
/** Price at which the line is drawn. */
|
|
957
|
+
price: number;
|
|
958
|
+
type: 'trade';
|
|
959
|
+
/**
|
|
960
|
+
* Your original trade object. Returned as-is in the `tradeLevelClose` event.
|
|
961
|
+
* The library never inspects this value.
|
|
962
|
+
*/
|
|
963
|
+
data?: unknown;
|
|
964
|
+
}
|
|
965
|
+
/**
|
|
966
|
+
* A horizontal price level for an open position with optional live PnL display.
|
|
967
|
+
* Rendered as a line with a compact info box; PnL row shown when `pnlText` is provided.
|
|
968
|
+
*/
|
|
969
|
+
interface PositionLevel {
|
|
970
|
+
/** Unique identifier for this level — used for hit testing and events. */
|
|
971
|
+
label: string;
|
|
972
|
+
/**
|
|
973
|
+
* Text displayed in the info box. Falls back to `label` when omitted.
|
|
974
|
+
* Use this to send consumer-formatted strings like "Buy 0.01 lot".
|
|
975
|
+
*/
|
|
976
|
+
text?: string;
|
|
977
|
+
/** Entry price at which the line is drawn. */
|
|
978
|
+
price: number;
|
|
979
|
+
type: 'position';
|
|
980
|
+
/**
|
|
981
|
+
* Pre-computed PnL value (sign determines badge color: positive=green, negative=red).
|
|
982
|
+
* The library does not calculate this — compute it in your consumer using your own
|
|
983
|
+
* price feed, currency, and fee logic.
|
|
984
|
+
*/
|
|
985
|
+
pnl?: number;
|
|
986
|
+
/**
|
|
987
|
+
* Pre-formatted PnL string rendered verbatim in the box (e.g. "+$42.10 (+0.8%)").
|
|
988
|
+
* Only displayed when present. Format and currency are owned by the consumer.
|
|
989
|
+
*/
|
|
990
|
+
pnlText?: string;
|
|
991
|
+
/** Side of the position — 'buy' for long, 'sell' for short. Required to color and constrain SL/TP bracket lines. */
|
|
992
|
+
side?: 'buy' | 'sell';
|
|
993
|
+
/** Stop-loss price. Renders as a secondary dashed line below entry (buy) or above (sell). Draggable — emits `tradeLevelBracketDrag`. */
|
|
994
|
+
stopLossPrice?: number;
|
|
995
|
+
/** Data object for the SL bracket — returned in SL-related events instead of the parent's `data`. */
|
|
996
|
+
stopLossData?: unknown;
|
|
997
|
+
/** Take-profit price. Renders as a secondary dashed line above entry (buy) or below (sell). Draggable — emits `tradeLevelBracketDrag`. */
|
|
998
|
+
takeProfitPrice?: number;
|
|
999
|
+
/** Data object for the TP bracket — returned in TP-related events instead of the parent's `data`. */
|
|
1000
|
+
takeProfitData?: unknown;
|
|
1001
|
+
/**
|
|
1002
|
+
* When true, the entry price line becomes draggable — renders a grip handle and emits
|
|
1003
|
+
* `tradeLevelEdit` with `field: 'main'` on confirm. Use this for pending entry orders
|
|
1004
|
+
* (e.g. Entry Limit / Entry Stop) that should display like open positions but still allow
|
|
1005
|
+
* the entry price to be modified.
|
|
1006
|
+
*/
|
|
1007
|
+
entryPriceEditable?: boolean;
|
|
1008
|
+
/**
|
|
1009
|
+
* For entry orders rendered as position levels (e.g. Entry Limit / Entry Stop):
|
|
1010
|
+
* 'limit' → entry must stay on the limit side of market price (buy below, sell above).
|
|
1011
|
+
* 'stop' → entry must stay on the stop side (buy above, sell below).
|
|
1012
|
+
* Omit for regular open positions — no market-side constraint is applied.
|
|
1013
|
+
*/
|
|
1014
|
+
orderType?: 'limit' | 'stop';
|
|
1015
|
+
/** Lot size for Entry Limit / Entry Stop orders — shown in the info box label. */
|
|
1016
|
+
lots?: number;
|
|
1017
|
+
/**
|
|
1018
|
+
* Your original position object. Returned as-is in the `tradeLevelClose` event.
|
|
1019
|
+
* The library never inspects this value.
|
|
1020
|
+
*/
|
|
1021
|
+
data?: unknown;
|
|
1022
|
+
}
|
|
1023
|
+
/**
|
|
1024
|
+
* A horizontal price level for a pending (open) order — limit or stop.
|
|
1025
|
+
* Rendered as a dashed line with side-colored info box and optional SL/TP sub-lines.
|
|
1026
|
+
* The grip handle on the left allows dragging to modify the order price.
|
|
1027
|
+
*/
|
|
1028
|
+
interface PendingOrderLevel {
|
|
1029
|
+
/** Unique identifier — used for hit testing, events, and drag. */
|
|
1030
|
+
label: string;
|
|
1031
|
+
/** Text in the info box. Falls back to `label` when omitted. */
|
|
1032
|
+
text?: string;
|
|
1033
|
+
/** Order price — the main draggable line. */
|
|
1034
|
+
price: number;
|
|
1035
|
+
type: 'pending';
|
|
1036
|
+
side: 'buy' | 'sell';
|
|
1037
|
+
orderType: 'limit' | 'stop' | 'market';
|
|
1038
|
+
/** Lot size — displayed in the info box when present. */
|
|
1039
|
+
lots?: number;
|
|
1040
|
+
/**
|
|
1041
|
+
* Stop-loss price. Renders as a secondary dashed line below the order price
|
|
1042
|
+
* (for buy orders) or above (for sell orders). Draggable — emits `tradeLevelBracketDrag`.
|
|
1043
|
+
*/
|
|
1044
|
+
stopLossPrice?: number;
|
|
1045
|
+
/** Data object for the SL bracket — returned in SL-related events instead of the parent's `data`. */
|
|
1046
|
+
stopLossData?: unknown;
|
|
1047
|
+
/**
|
|
1048
|
+
* Take-profit price. Renders as a secondary dashed line above the order price
|
|
1049
|
+
* (for buy orders) or below (for sell orders). Draggable — emits `tradeLevelBracketDrag`.
|
|
1050
|
+
*/
|
|
1051
|
+
takeProfitPrice?: number;
|
|
1052
|
+
/** Data object for the TP bracket — returned in TP-related events instead of the parent's `data`. */
|
|
1053
|
+
takeProfitData?: unknown;
|
|
1054
|
+
/**
|
|
1055
|
+
* If set, this order is an SL/TP bracket for the level whose label equals this value.
|
|
1056
|
+
* It will NOT render as a standalone line — instead it populates `stopLossPrice` or
|
|
1057
|
+
* `takeProfitPrice` on the parent level. Bracket type is inferred by price vs parent price
|
|
1058
|
+
* using the parent's `side` field (buy: price below parent → SL, above → TP; sell: reversed).
|
|
1059
|
+
*/
|
|
1060
|
+
ToClose?: string;
|
|
1061
|
+
/** Your original order object. Returned as-is in events. The library never inspects this. */
|
|
1062
|
+
data?: unknown;
|
|
1063
|
+
}
|
|
1064
|
+
/** Union of all level types — use this wherever a level is accepted or stored. */
|
|
1065
|
+
type AnyLevel = TradeLevel | PositionLevel | PendingOrderLevel;
|
|
1066
|
+
|
|
1067
|
+
type PriceSource = 'open' | 'high' | 'low' | 'close';
|
|
1068
|
+
|
|
1069
|
+
declare class SMA implements IIndicator {
|
|
1070
|
+
private readonly period;
|
|
1071
|
+
private readonly source;
|
|
1072
|
+
readonly name: string;
|
|
1073
|
+
readonly color: string;
|
|
1074
|
+
constructor(period: number, color?: string, name?: string, source?: PriceSource);
|
|
1075
|
+
compute(data: OHLCVBar[]): IndicatorResult[];
|
|
1076
|
+
render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, chartHeight: number): void;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
declare class EMA implements IIndicator {
|
|
1080
|
+
private readonly period;
|
|
1081
|
+
private readonly source;
|
|
1082
|
+
readonly name: string;
|
|
1083
|
+
readonly color: string;
|
|
1084
|
+
constructor(period: number, color?: string, name?: string, source?: PriceSource);
|
|
1085
|
+
compute(data: OHLCVBar[]): IndicatorResult[];
|
|
1086
|
+
render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, chartHeight: number): void;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
declare class BollingerBands implements IIndicator {
|
|
1090
|
+
private readonly period;
|
|
1091
|
+
private readonly stdDevMultiplier;
|
|
1092
|
+
private readonly source;
|
|
1093
|
+
readonly name: string;
|
|
1094
|
+
readonly color: string;
|
|
1095
|
+
constructor(period?: number, stdDevMultiplier?: number, color?: string, name?: string, source?: PriceSource);
|
|
1096
|
+
compute(data: OHLCVBar[]): IndicatorResult[];
|
|
1097
|
+
render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, chartHeight: number): void;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
declare class RSI implements IIndicator {
|
|
1101
|
+
private readonly period;
|
|
1102
|
+
private readonly source;
|
|
1103
|
+
readonly name: string;
|
|
1104
|
+
readonly color: string;
|
|
1105
|
+
readonly pane: "sub";
|
|
1106
|
+
readonly paneHeight = 80;
|
|
1107
|
+
constructor(period?: number, color?: string, name?: string, source?: PriceSource);
|
|
1108
|
+
compute(data: OHLCVBar[]): IndicatorResult[];
|
|
1109
|
+
getValueRange(_results: IndicatorResult[]): PriceRange;
|
|
1110
|
+
render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, paneHeight: number, rangeOverride?: PriceRange): void;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
declare class MACD implements IIndicator {
|
|
1114
|
+
private readonly fast;
|
|
1115
|
+
private readonly slow;
|
|
1116
|
+
private readonly signal;
|
|
1117
|
+
private readonly source;
|
|
1118
|
+
readonly name: string;
|
|
1119
|
+
readonly color: string;
|
|
1120
|
+
readonly pane: "sub";
|
|
1121
|
+
readonly paneHeight = 80;
|
|
1122
|
+
constructor(fast?: number, slow?: number, signal?: number, color?: string, name?: string, source?: PriceSource);
|
|
1123
|
+
compute(data: OHLCVBar[]): IndicatorResult[];
|
|
1124
|
+
getValueRange(results: IndicatorResult[]): PriceRange;
|
|
1125
|
+
render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, paneHeight: number, rangeOverride?: PriceRange): void;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
export { type IndicatorResult as $, type AnyLevel as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_LABELS as E, DEFAULT_PRICE_AXIS_CONFIG as F, DEFAULT_TIME_AXIS_CONFIG as G, DEFAULT_TOP_BAR_CONFIG as H, type IIndicator as I, DEFAULT_UI_CONFIG as J, type DataLoaderParams as K, type DeepPartial$1 as L, type DeepPartialChartTheme as M, type DialogLabels as N, type OHLCVBar as O, type PriceRange as P, type DrawingToolbarColors as Q, type DrawingToolbarLabels as R, type SeriesType as S, type TradeLevelType as T, type DrawingToolbarUiConfig as U, type Viewport as V, type Duration as W, EMA as X, type IndicatorOverlayColors as Y, type IndicatorOverlayUiConfig as Z, type IndicatorParams as _, type ChartEventMap as a, type IndicatorStateEntry as a0, LIGHT_THEME as a1, MACD as a2, type OhlcLabels as a3, type OrderSubmit as a4, type Padding as a5, type PendingOrderLevel as a6, type PositionLevel as a7, type PositionRenderStyle as a8, type PriceAxisUiConfig as a9, RSI as aa, SMA as ab, type Theme as ac, type TimeAxisUiConfig as ad, type Timeframe as ae, type TopBarColors as af, type TopBarLabels as ag, type TopBarUiConfig as ah, type TradeDisplayFilter as ai, type TradeLabels as aj, type TradeLevel as ak, type TradeLevelColors as al, type TradePanelColors as am, type UiConfig as an, deepMergeTheme as ao, resolveCssVarsInTheme as ap, resolveLabels as aq, resolveUiConfig as ar, type PriceSource as as, type ChartState as b, type IDrawing as c, type IWebSocketAdapter as d, type DrawingPoint as e, ScaleManager as f, type DrawingHandle as g, type SerializedDrawing as h, type Tick as i, type StreamStatus as j, type ActiveIndicatorState as k, type BottomBarColors as l, type BottomBarLabels as m, type BottomBarUiConfig as n, type CanvasColorSettings as o, type ChartLabels as p, type ChartMiscLabels as q, type ChartTheme as r, type ChartThemeUi as s, type CrosshairPosition as t, type CrosshairUiConfig as u, DARK_THEME as v, DEFAULT_BOTTOM_BAR_CONFIG as w, DEFAULT_CROSSHAIR_CONFIG as x, DEFAULT_DRAWING_TOOLBAR_CONFIG as y, DEFAULT_INDICATOR_OVERLAY_CONFIG as z };
|