@tradecanvas/chart 0.5.0 → 0.6.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.
Files changed (46) hide show
  1. package/README.md +109 -6
  2. package/dist/Chart-CrrTKx3r.js +1027 -0
  3. package/dist/Chart-CrrTKx3r.js.map +1 -0
  4. package/dist/Chart-DoR8L8Uk.cjs +2 -0
  5. package/dist/Chart-DoR8L8Uk.cjs.map +1 -0
  6. package/dist/Chart.d.ts +1 -4
  7. package/dist/Chart.d.ts.map +1 -1
  8. package/dist/charts/ChartTypeStrategy.d.ts +18 -0
  9. package/dist/charts/ChartTypeStrategy.d.ts.map +1 -0
  10. package/dist/charts/IndicatorPriceRange.d.ts +16 -0
  11. package/dist/charts/IndicatorPriceRange.d.ts.map +1 -0
  12. package/dist/index.cjs +1 -1
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/index.d.ts +1 -1
  15. package/dist/index.d.ts.map +1 -1
  16. package/dist/index.js +31 -1024
  17. package/dist/index.js.map +1 -1
  18. package/dist/state/AutoSaveScheduler.d.ts +26 -0
  19. package/dist/state/AutoSaveScheduler.d.ts.map +1 -0
  20. package/dist/widget/ChartWidget.d.ts +43 -0
  21. package/dist/widget/ChartWidget.d.ts.map +1 -0
  22. package/dist/widget/WidgetDrawingSidebar.d.ts +19 -0
  23. package/dist/widget/WidgetDrawingSidebar.d.ts.map +1 -0
  24. package/dist/widget/WidgetDropdown.d.ts +18 -0
  25. package/dist/widget/WidgetDropdown.d.ts.map +1 -0
  26. package/dist/widget/WidgetSettings.d.ts +25 -0
  27. package/dist/widget/WidgetSettings.d.ts.map +1 -0
  28. package/dist/widget/WidgetStatusBar.d.ts +15 -0
  29. package/dist/widget/WidgetStatusBar.d.ts.map +1 -0
  30. package/dist/widget/WidgetStyles.d.ts +9 -0
  31. package/dist/widget/WidgetStyles.d.ts.map +1 -0
  32. package/dist/widget/WidgetToolbar.d.ts +22 -0
  33. package/dist/widget/WidgetToolbar.d.ts.map +1 -0
  34. package/dist/widget/icons.d.ts +2 -0
  35. package/dist/widget/icons.d.ts.map +1 -0
  36. package/dist/widget/index.cjs +740 -0
  37. package/dist/widget/index.cjs.map +1 -0
  38. package/dist/widget/index.d.ts +3 -0
  39. package/dist/widget/index.d.ts.map +1 -0
  40. package/dist/widget/index.js +1058 -0
  41. package/dist/widget/index.js.map +1 -0
  42. package/dist/widget/types.d.ts +105 -0
  43. package/dist/widget/types.d.ts.map +1 -0
  44. package/dist/widget/widgetConfig.d.ts +16 -0
  45. package/dist/widget/widgetConfig.d.ts.map +1 -0
  46. package/package.json +14 -4
package/dist/index.js CHANGED
@@ -1,1010 +1,14 @@
1
- import { DARK_TERMINAL as e, DARK_THEME as t, DARK_THEME as n, DEFAULT_DRAWING_STYLE as r, DEFAULT_PANEL_HEIGHT as i, DEFAULT_RECONNECT as a, DEFAULT_STREAM_CONFIG as o, DEFAULT_TIMEFRAME_FAVORITES as s, DEFAULT_TRADING_CONFIG as c, LIGHT_THEME as l, LIGHT_THEME as u, LayerType as d, MARKET_CRYPTO as f, MARKET_HNX as ee, MARKET_HOSE as p, MARKET_NYSE as m, MARKET_UPCOM as h, MIN_PANEL_HEIGHT as g, PRICE_AXIS_WIDTH as _, TIMEFRAMES_CRYPTO as te, TIMEFRAMES_FOREX as ne, TIMEFRAMES_STOCK as re, TIME_AXIS_HEIGHT as v, VN_COLORS as ie, computePriceLimits as ae, computePriceLimits as y, createVNTheme as oe, formatNumber as se, formatVND as ce, formatVolumeLoc as le, getCurrentSession as ue, getLocale as de, mergeBar as fe, normalizeBar as pe, normalizeBarTime as me, registerLocale as b, setLocale as x, setLocale as S, t as C } from "@tradecanvas/commons";
2
- import { AlertManager as w, AlertManager as T, Animator as E, Animator as D, AreaRenderer as O, BarCountdown as k, BarCountdown as A, BarRenderer as j, BaseFinanceChart as M, BaselineRenderer as N, BinanceAdapter as P, CandlestickRenderer as F, ChartLegend as I, ChartLegend as L, ChartStateManager as R, ChartStateManager as z, CompareRenderer as he, CompareRenderer as ge, CrosshairHandler as _e, CrosshairTooltip as ve, CrosshairTooltip as ye, CurrentPriceLine as be, CurrentPriceLine as xe, DEFAULT_LEGEND_CONFIG as Se, DataExporter as Ce, DataExporter as B, DrawingBase as we, DrawingManager as Te, DrawingRenderer as Ee, Easing as De, EventBus as Oe, FinanceCrosshair as V, GridRenderer as ke, HollowCandleRenderer as Ae, IndicatorBase as je, IndicatorEngine as H, InteractionManager as Me, KagiRenderer as Ne, KeyboardHandler as Pe, KeyboardHandler as Fe, LineRenderer as Ie, MockAdapter as Le, PanHandler as Re, PointAndFigureRenderer as ze, PriceAxis as Be, RenderEngine as Ve, RenkoRenderer as He, ReplayManager as Ue, ReplayManager as U, Screenshot as We, Screenshot as W, SessionBreaks as Ge, SessionBreaks as Ke, StreamManager as qe, StreamManager as Je, TickAggregator as Ye, TimeAxis as Xe, TradingManager as Ze, TradingRenderer as Qe, UndoRedoManager as $e, UndoRedoManager as et, Viewport as tt, VolumeRenderer as nt, VolumeRenderer as rt, Watermark as it, Watermark as at, ZoomHandler as ot, layoutSquarifiedTreemap as st, layoutUniformGrid as ct, registerBuiltInDrawingTools as lt, registerBuiltInIndicators as G, renderDepthChart as ut, renderEquityCurve as dt, renderGauge as ft, renderHeatmap as pt, renderSparkline as mt, renderWaterfall as ht, toHeikinAshi as gt, toHeikinAshi as _t, toKagi as vt, toKagi as yt, toLineBreak as bt, toLineBreak as xt, toPointAndFigure as St, toPointAndFigure as Ct, toRenko as wt, toRenko as Tt } from "@tradecanvas/core";
3
- //#region src/DataManager.ts
4
- function K(e) {
5
- if (!e || typeof e.time != "number") return !1;
6
- let { open: t, high: n, low: r, close: i } = e;
7
- return !(!isFinite(t) || !isFinite(n) || !isFinite(r) || !isFinite(i) || t < 0 || n < 0 || r < 0 || i < 0 || n < r || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0));
8
- }
9
- function q(e) {
10
- return {
11
- ...e,
12
- high: Math.max(e.open, e.high, e.low, e.close),
13
- low: Math.min(e.open, e.high, e.low, e.close),
14
- volume: e.volume === void 0 ? 0 : Math.max(0, e.volume)
15
- };
16
- }
17
- var J = class {
18
- data = [];
19
- getData() {
20
- return this.data;
21
- }
22
- setData(e) {
23
- this.data = e.filter(K).map(q);
24
- }
25
- appendBar(e) {
26
- K(e) && this.data.push(q(e));
27
- }
28
- updateLastBar(e) {
29
- if (!K(e)) return;
30
- let t = q(e);
31
- if (this.data.length === 0) {
32
- this.data.push(t);
33
- return;
34
- }
35
- this.data[this.data.length - 1] = t;
36
- }
37
- updateLastBarFromTick(e) {
38
- this.data.length !== 0 && (!isFinite(e.price) || e.price < 0 || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0) || (this.data[this.data.length - 1] = fe(this.data[this.data.length - 1], e)));
39
- }
40
- getLength() {
41
- return this.data.length;
42
- }
43
- clear() {
44
- this.data = [];
45
- }
46
- }, Y = class {
47
- theme;
48
- constructor(e) {
49
- !e || e === "dark" ? this.theme = { ...n } : e === "light" ? this.theme = { ...u } : this.theme = { ...e };
50
- }
51
- getTheme() {
52
- return this.theme;
53
- }
54
- setTheme(e) {
55
- e === "dark" ? this.theme = { ...n } : e === "light" ? this.theme = { ...u } : this.theme = { ...e };
56
- }
57
- }, X = 200, Z = 80, Q = class {
58
- panels = [];
59
- containerWidth = 0;
60
- containerHeight = 0;
61
- resize(e, t) {
62
- this.containerWidth = e, this.containerHeight = t;
63
- }
64
- addPanel(e, t = "bottom", n) {
65
- let r = t === "left" || t === "right";
66
- this.panels.push({
67
- id: e,
68
- position: t,
69
- size: n ?? (r ? X : i),
70
- minSize: r ? Z : g,
71
- content: {
72
- type: "indicator",
73
- indicatorInstanceId: e
74
- }
75
- });
76
- }
77
- removePanel(e) {
78
- this.panels = this.panels.filter((t) => t.id !== e);
79
- }
80
- setPanelPosition(e, t) {
81
- let n = this.panels.find((t) => t.id === e);
82
- if (n) {
83
- let e = n.position === "left" || n.position === "right", r = t === "left" || t === "right";
84
- n.position = t, e !== r && (n.size = r ? X : i, n.minSize = r ? Z : g);
85
- }
86
- }
87
- setPanelSize(e, t) {
88
- let n = this.panels.find((t) => t.id === e);
89
- n && (n.size = Math.max(n.minSize, t));
90
- }
91
- getPanels() {
92
- return this.panels;
93
- }
94
- resolve() {
95
- let e = this.panels.filter((e) => e.position === "left"), t = this.panels.filter((e) => e.position === "right"), n = this.panels.filter((e) => e.position === "top"), r = this.panels.filter((e) => e.position === "bottom"), i = e.reduce((e, t) => e + t.size, 0), a = t.reduce((e, t) => e + t.size, 0), o = n.reduce((e, t) => e + t.size, 0), s = r.reduce((e, t) => e + t.size, 0), c = {
96
- x: i,
97
- y: o,
98
- width: Math.max(0, this.containerWidth - i - a - _),
99
- height: Math.max(0, this.containerHeight - o - s - v)
100
- }, l = [], u = [], d = 0;
101
- for (let t of e) l.push({
102
- config: t,
103
- rect: {
104
- x: d,
105
- y: 0,
106
- width: t.size,
107
- height: this.containerHeight - v
108
- }
109
- }), u.push({
110
- panelId: t.id,
111
- rect: {
112
- x: d + t.size - 2,
113
- y: 0,
114
- width: 4,
115
- height: this.containerHeight
116
- },
117
- orientation: "vertical"
118
- }), d += t.size;
119
- let f = 0;
120
- for (let e of n) l.push({
121
- config: e,
122
- rect: {
123
- x: i,
124
- y: f,
125
- width: c.width,
126
- height: e.size
127
- }
128
- }), u.push({
129
- panelId: e.id,
130
- rect: {
131
- x: i,
132
- y: f + e.size - 2,
133
- width: c.width,
134
- height: 4
135
- },
136
- orientation: "horizontal"
137
- }), f += e.size;
138
- f = c.y + c.height;
139
- for (let e of r) l.push({
140
- config: e,
141
- rect: {
142
- x: i,
143
- y: f,
144
- width: c.width,
145
- height: e.size
146
- }
147
- }), u.push({
148
- panelId: e.id,
149
- rect: {
150
- x: i,
151
- y: f - 2,
152
- width: c.width,
153
- height: 4
154
- },
155
- orientation: "horizontal"
156
- }), f += e.size;
157
- d = i + c.width + _;
158
- for (let e of t) l.push({
159
- config: e,
160
- rect: {
161
- x: d,
162
- y: 0,
163
- width: e.size,
164
- height: this.containerHeight - v
165
- }
166
- }), u.push({
167
- panelId: e.id,
168
- rect: {
169
- x: d - 2,
170
- y: 0,
171
- width: 4,
172
- height: this.containerHeight
173
- },
174
- orientation: "vertical"
175
- }), d += e.size;
176
- return {
177
- mainChartRect: c,
178
- panels: l,
179
- dividers: u
180
- };
181
- }
182
- getMainChartRect() {
183
- return this.resolve().mainChartRect;
184
- }
185
- }, $ = class {
186
- constructor(e) {
187
- this.indicatorEngine = e;
188
- }
189
- registerIndicator(e) {
190
- this.indicatorEngine.register(e);
191
- }
192
- }, Et = class {
193
- static version = "0.3.0";
194
- engine;
195
- viewport;
196
- dataManager;
197
- themeManager;
198
- layoutManager;
199
- pluginManager;
200
- indicatorEngine;
201
- drawingManager;
202
- drawingRenderer;
203
- tradingManager;
204
- tradingRenderer;
205
- eventBus;
206
- streamManager = null;
207
- autoScrollOnNewBar = !0;
208
- displayDataCache = null;
209
- resolvedLayoutCache = null;
210
- panelInfoCache = null;
211
- renderScheduled = !1;
212
- containerSizeCache = null;
213
- containerSizeCacheTime = 0;
214
- chartLegend;
215
- watermark;
216
- barCountdown;
217
- sessionBreaks;
218
- compareRenderer;
219
- countdownInterval = null;
220
- volumeRenderer;
221
- alertManager;
222
- replayManager;
223
- undoRedoManager;
224
- autoSaveTimer = null;
225
- autoSaveDelay = 0;
226
- autoSaveKey = null;
227
- animator;
228
- crosshairTooltip;
229
- interactionManager;
230
- crosshairHandler;
231
- chartRenderer;
232
- gridRenderer;
233
- priceAxis;
234
- timeAxis;
235
- options;
236
- features;
237
- marketConfig = null;
238
- container;
239
- currentPriceLine;
240
- numberLocale;
241
- keyboardHandler = null;
242
- onWindowKeyDown = null;
243
- currentSymbol = "";
244
- constructor(e, t) {
245
- this.container = e, this.options = t, this.numberLocale = t.numberLocale ?? "en-US";
246
- let n = t.features ?? {};
247
- this.features = {
248
- drawings: n.drawings ?? !0,
249
- drawingTools: n.drawingTools ?? [],
250
- drawingMagnet: n.drawingMagnet ?? !0,
251
- drawingUndoRedo: n.drawingUndoRedo ?? !0,
252
- trading: n.trading ?? !0,
253
- tradingContextMenu: n.tradingContextMenu ?? !0,
254
- indicators: n.indicators ?? !0,
255
- indicatorIds: n.indicatorIds ?? [],
256
- panning: n.panning ?? !0,
257
- zooming: n.zooming ?? !0,
258
- crosshair: n.crosshair ?? !0,
259
- keyboard: n.keyboard ?? !0,
260
- priceAxis: n.priceAxis ?? !0,
261
- timeAxis: n.timeAxis ?? !0,
262
- grid: n.grid ?? t.grid?.visible ?? !0,
263
- legend: n.legend ?? !0,
264
- volume: n.volume ?? !0,
265
- watermark: n.watermark ?? !0,
266
- saveLoad: n.saveLoad ?? !0,
267
- screenshot: n.screenshot ?? !0,
268
- alerts: n.alerts ?? !0,
269
- replay: n.replay ?? !0,
270
- sessionBreaks: n.sessionBreaks ?? !0,
271
- barCountdown: n.barCountdown ?? !0,
272
- compareSymbols: n.compareSymbols ?? !0,
273
- dataExport: n.dataExport ?? !0,
274
- logScale: n.logScale ?? !0,
275
- timeframes: n.timeframes ?? [],
276
- defaultTimeframeFavorites: n.defaultTimeframeFavorites ?? []
277
- }, e.style.position = "relative", e.style.overflow = "hidden", e.tabIndex = 0, e.style.outline = "none", this.dataManager = new J(), this.themeManager = new Y(t.theme), this.layoutManager = new Q(), this.indicatorEngine = new H(), this.pluginManager = new $(this.indicatorEngine), this.eventBus = new Oe(), G(this.indicatorEngine), this.drawingManager = new Te(), lt(this.drawingManager), this.drawingRenderer = new Ee(this.drawingManager), this.drawingManager.setRequestRender(() => {
278
- this.syncRenderContext(), this.engine.requestRender(d.Overlay), this.scheduleAutoSave();
279
- }), this.drawingManager.setEventCallback((e, t) => {
280
- this.eventBus.emit(e, t);
281
- }), this.undoRedoManager = new et(), this.drawingManager.setUndoRedoManager(this.undoRedoManager), this.drawingManager.setDataGetter(() => this.dataManager.getData()), this.drawingManager.setDisplayDataGetter(() => this.getDisplayData()), t.crosshair?.mode === "magnet" && this.drawingManager.setMagnetMode("magnet"), this.tradingManager = new Ze(), this.tradingRenderer = new Qe(this.tradingManager), this.tradingManager.setContainer(e), this.tradingManager.setRequestRender(() => this.engine.requestRender(d.Overlay)), this.tradingManager.setEventCallback((e, t) => {
282
- this.eventBus.emit(e, t);
283
- }), this.engine = new Ve(e);
284
- let r = this.engine.dprManager.getContainerSize();
285
- this.viewport = new tt(r.width, r.height, t.minBarSpacing ?? 2, t.maxBarSpacing ?? 30, t.rightMargin ?? 5), this.layoutManager.resize(r.width, r.height), this.engine.onContainerResize = (e) => {
286
- if (e.width <= 0 || e.height <= 0) return;
287
- let t = this.viewport.isAtEnd();
288
- this.viewport.resize(e.width, e.height), this.layoutManager.resize(e.width, e.height), this.updateViewportAndRender(t);
289
- }, this.chartRenderer = this.createChartRenderer(t.chartType), this.gridRenderer = new ke(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new Be(), this.priceAxis.setLocale(this.numberLocale), this.timeAxis = new Xe(), this.crosshairHandler = new _e(), this.crosshairHandler.setLocale(this.numberLocale), t.crosshair?.mode && this.crosshairHandler.setMode(t.crosshair.mode), this.crosshairHandler.setCallback((e, t) => {
290
- if (e !== null && t) {
291
- let n = this.dataManager.getData(), r = e < n.length ? n[e] : void 0;
292
- this.chartLegend.setHoverBar(r ?? null), r && this.crosshairTooltip.show(t, r, this.themeManager.getTheme(), this.cachedContainerSize()), this.eventBus.emit("crosshairMove", {
293
- point: t,
294
- bar: r,
295
- barIndex: e
296
- });
297
- } else this.crosshairTooltip.hide(), this.chartLegend.setHoverBar(null);
298
- }), this.chartLegend = new L(), this.chartLegend.setChartType(t.chartType), this.watermark = new at(), t.watermark && this.watermark.setConfig(t.watermark), this.volumeRenderer = new rt(), this.barCountdown = new A(), this.sessionBreaks = new Ke(), this.compareRenderer = new ge(), t.sessionBreaks ? this.sessionBreaks.setConfig({
299
- visible: t.sessionBreaks.visible ?? !0,
300
- color: t.sessionBreaks.color,
301
- lineStyle: t.sessionBreaks.lineStyle,
302
- lineWidth: t.sessionBreaks.lineWidth
303
- }) : t.features?.sessionBreaks !== !1 && this.sessionBreaks.setVisible(!0), t.logScale && this.viewport.setLogScale(!0), this.animator = new D(), this.crosshairTooltip = new ye(), this.crosshairTooltip.create(e), this.keyboardHandler = new Fe({
304
- scrollBars: (e) => {
305
- let t = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
306
- this.viewport.scrollBy(e * t), this.updateViewportAndRender();
307
- },
308
- zoom: (e) => {
309
- let t = this.viewport.getState().chartRect.width;
310
- this.viewport.zoom(e, t / 2), this.updateViewportAndRender();
311
- },
312
- goToStart: () => {
313
- this.viewport.scrollBy(-Infinity), this.updateViewportAndRender();
314
- },
315
- goToEnd: () => {
316
- this.viewport.scrollToEnd(), this.updateViewportAndRender();
317
- },
318
- fitContent: () => this.fitContent()
319
- }), this.keyboardHandler.setEnabled(this.features.keyboard), this.onWindowKeyDown = (e) => {
320
- if (!this.keyboardHandler) return;
321
- let t = document.activeElement;
322
- t && t !== this.container && !this.container.contains(t) || t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) || this.keyboardHandler.handleKey(e) && e.preventDefault();
323
- }, window.addEventListener("keydown", this.onWindowKeyDown), this.currentPriceLine = new xe(), this.alertManager = new T(), this.alertManager.setRequestRender(() => this.engine.requestRender(d.Overlay)), this.alertManager.on("triggered", (e) => {
324
- this.eventBus.emit("dataUpdate", {
325
- alert: "triggered",
326
- alertId: e.id,
327
- price: e.price,
328
- message: e.message
329
- });
330
- }), this.replayManager = new U(), this.interactionManager = new Me(e), this.features.panning && this.interactionManager.setPanHandler(new Re((e) => {
331
- this.viewport.scrollBy(e), this.updateViewportAndRender();
332
- })), this.features.zooming && this.interactionManager.setZoomHandler(new ot((e, t) => {
333
- this.viewport.zoom(e, t), this.updateViewportAndRender();
334
- })), this.features.crosshair && this.interactionManager.setCrosshairHandler(this.crosshairHandler), this.features.drawings && this.interactionManager.setDrawingManager(this.drawingManager, () => this.viewport.getState()), this.features.trading && this.interactionManager.setTradingManager(this.tradingManager, () => this.viewport.getState()), this.interactionManager.setOverlayDirtyCallback(() => {
335
- this.engine.requestRender(d.Overlay), this.layoutManager.getPanels().length > 0 && this.engine.requestRender(d.UI);
336
- }), this.interactionManager.attach(), this.syncRenderContext(), this.engine.start();
337
- }
338
- setData(e) {
339
- this.dataManager.setData(e), this.crosshairHandler.setData(this.dataManager.getData()), this.displayDataCache = null, this.sessionBreaks.invalidateCache(), this.indicatorEngine.recalculateAll(this.dataManager.getData()), e.length > 0 && this.currentPriceLine.setPrice(e[e.length - 1].close), this.updateViewportAndRender(!0), this.eventBus.emit("dataUpdate", { length: e.length });
340
- }
341
- appendBar(e) {
342
- this.dataManager.appendBar(e), this.crosshairHandler.setData(this.dataManager.getData()), this.displayDataCache = null, this.autoScrollOnNewBar && this.viewport.scrollToEnd(), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.updateViewportAndRender();
343
- }
344
- appendBars(e) {
345
- if (e.length !== 0) {
346
- for (let t of e) this.dataManager.appendBar(t);
347
- this.displayDataCache = null, this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.crosshairHandler.setData(this.dataManager.getData()), this.updateViewportAndRender(this.viewport.isAtEnd());
348
- }
349
- }
350
- updateLastBar(e) {
351
- this.dataManager.updateLastBar(e), this.currentPriceLine.setPrice(e.close), this.options.chartType !== "candlestick" && this.options.chartType !== "line" && this.options.chartType !== "area" && this.options.chartType !== "bar" && this.options.chartType !== "hollowCandle" && (this.displayDataCache = null), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.scheduleRender();
352
- }
353
- updateLastBarFromTick(e) {
354
- this.dataManager.updateLastBarFromTick(e), this.currentPriceLine.setPrice(e.price), this.options.chartType !== "candlestick" && this.options.chartType !== "line" && this.options.chartType !== "area" && this.options.chartType !== "bar" && this.options.chartType !== "hollowCandle" && (this.displayDataCache = null), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.scheduleRender();
355
- }
356
- setChartType(e) {
357
- this.options.chartType = e, this.chartRenderer = this.createChartRenderer(e), this.chartLegend.setChartType(e), this.displayDataCache = null, this.updateViewportAndRender(!0);
358
- }
359
- addIndicator(e, t = {}, n = "bottom") {
360
- if (!this.features.indicators || this.features.indicatorIds.length > 0 && !this.features.indicatorIds.includes(e)) return null;
361
- let r = this.indicatorEngine.addIndicator(e, t, this.dataManager.getData());
362
- return this.indicatorEngine.getAvailableIndicators().find((t) => t.id === e)?.placement === "panel" ? (this.layoutManager.addPanel(r, n), this.updateViewportAndRender()) : this.engine.requestRender(), this.eventBus.emit("indicatorAdd", {
363
- instanceId: r,
364
- id: e
365
- }), r;
366
- }
367
- updateIndicator(e, t) {
368
- this.indicatorEngine.updateIndicator(e, t, this.dataManager.getData()), this.engine.requestRender();
369
- }
370
- removeIndicator(e) {
371
- let t = this.layoutManager.getPanels().some((t) => t.id === e);
372
- this.indicatorEngine.removeIndicator(e), this.layoutManager.removePanel(e), this.eventBus.emit("indicatorRemove", { instanceId: e }), t ? this.updateViewportAndRender() : this.engine.requestRender();
373
- }
374
- getIndicatorOutput(e) {
375
- return this.indicatorEngine.getOutput(e);
376
- }
377
- registerIndicator(e) {
378
- this.pluginManager.registerIndicator(e);
379
- }
380
- static indicators() {
381
- let e = new H();
382
- return G(e), e.getAvailableIndicators();
383
- }
384
- setPanelPosition(e, t) {
385
- this.layoutManager.setPanelPosition(e, t), this.engine.requestRender();
386
- }
387
- setPanelSize(e, t) {
388
- this.layoutManager.setPanelSize(e, t), this.engine.requestRender();
389
- }
390
- setDrawingTool(e) {
391
- this.features.drawings && (e && this.features.drawingTools.length > 0 && !this.features.drawingTools.includes(e) || this.drawingManager.setActiveTool(e));
392
- }
393
- getDrawingTool() {
394
- return this.drawingManager.getActiveTool();
395
- }
396
- setDrawingStyle(e) {
397
- this.drawingManager.setStyle(e);
398
- }
399
- getDrawings() {
400
- return this.drawingManager.getDrawings();
401
- }
402
- setDrawings(e) {
403
- this.drawingManager.setDrawings(e);
404
- }
405
- removeDrawing(e) {
406
- this.drawingManager.removeDrawing(e);
407
- }
408
- clearDrawings() {
409
- this.drawingManager.clearDrawings();
410
- }
411
- registerDrawingTool(e) {
412
- this.drawingManager.register(e);
413
- }
414
- undo() {
415
- return this.features.drawingUndoRedo ? this.drawingManager.undo() : !1;
416
- }
417
- redo() {
418
- return this.features.drawingUndoRedo ? this.drawingManager.redo() : !1;
419
- }
420
- getUndoRedoState() {
421
- return this.undoRedoManager.getState();
422
- }
423
- setDrawingMagnet(e) {
424
- this.drawingManager.setMagnetMode(e ? "magnet" : "none");
425
- }
426
- getDrawingMagnet() {
427
- return this.drawingManager.getMagnetMode() === "magnet";
428
- }
429
- lockAllDrawings() {
430
- this.drawingManager.lockAllDrawings();
431
- }
432
- unlockAllDrawings() {
433
- this.drawingManager.unlockAllDrawings();
434
- }
435
- hideAllDrawings() {
436
- this.drawingManager.hideAllDrawings();
437
- }
438
- showAllDrawings() {
439
- this.drawingManager.showAllDrawings();
440
- }
441
- duplicateDrawing(e) {
442
- let t = e ?? this.drawingManager.getSelectedDrawingId();
443
- return t ? this.drawingManager.duplicateDrawing(t) : null;
444
- }
445
- exportVisibleData(e = "csv", t) {
446
- let n = this.viewport.getState(), r = this.dataManager.getData(), i = Math.max(0, n.visibleRange.from), a = Math.min(r.length - 1, n.visibleRange.to), o = r.slice(i, a + 1);
447
- if (e === "json") {
448
- let e = B.toJSON(o);
449
- B.download(e, t ?? "chart-data.json", "application/json");
450
- } else {
451
- let e = B.toCSV(o);
452
- B.download(e, t ?? "chart-data.csv", "text/csv");
453
- }
454
- }
455
- exportAllData(e = "csv", t) {
456
- let n = this.dataManager.getData();
457
- if (e === "json") {
458
- let e = B.toJSON(n);
459
- B.download(e, t ?? "chart-data.json", "application/json");
460
- } else {
461
- let e = B.toCSV(n);
462
- B.download(e, t ?? "chart-data.csv", "text/csv");
463
- }
464
- }
465
- setAutoSave(e, t = 5e3) {
466
- this.autoSaveKey = e, this.autoSaveDelay = t;
467
- }
468
- disableAutoSave() {
469
- this.autoSaveDelay = 0, this.autoSaveKey = null, this.autoSaveTimer &&= (clearTimeout(this.autoSaveTimer), null);
470
- }
471
- scheduleAutoSave() {
472
- this.autoSaveDelay <= 0 || !this.autoSaveKey || (this.autoSaveTimer && clearTimeout(this.autoSaveTimer), this.autoSaveTimer = setTimeout(() => {
473
- this.autoSaveTimer = null, this.autoSaveKey && this.saveState(this.autoSaveKey);
474
- }, this.autoSaveDelay));
475
- }
476
- getAvailableIndicators() {
477
- return this.indicatorEngine.getAvailableIndicators();
478
- }
479
- getIndicatorInputs(e) {
480
- let t = this.indicatorEngine.getAvailableIndicators().find((t) => t.id === e);
481
- return t ? {
482
- id: t.id,
483
- params: t.defaultConfig
484
- } : null;
485
- }
486
- getActiveIndicators() {
487
- return this.indicatorEngine.getActiveIndicators();
488
- }
489
- getIndicatorConfig(e) {
490
- let t = this.indicatorEngine.getIndicatorConfig(e);
491
- return t ? {
492
- id: t.id,
493
- params: { ...t.params }
494
- } : null;
495
- }
496
- updateIndicatorStyle(e, t) {
497
- this.indicatorEngine.updateIndicatorStyle(e, t), this.engine.requestRender();
498
- }
499
- setOrders(e) {
500
- this.features.trading && this.tradingManager.setOrders(e);
501
- }
502
- setPositions(e) {
503
- this.features.trading && this.tradingManager.setPositions(e);
504
- }
505
- setDepthData(e) {
506
- this.features.trading && this.tradingManager.setDepthData(e);
507
- }
508
- setCurrentPrice(e, t) {
509
- this.tradingManager.setCurrentPrice(e), this.currentPriceLine.setPrice(e), this.scheduleRender(), this.features.alerts && this.alertManager.checkPrice(e);
510
- }
511
- setTradingConfig(e) {
512
- this.features.trading && this.tradingManager.setConfig(e);
513
- }
514
- async connect(e) {
515
- this.disconnectStream(), this.streamManager = new Je(), this.streamManager.on("snapshot", (e) => {
516
- this.setData(e);
517
- }), this.streamManager.on("barClose", (e) => {
518
- this.dataManager.appendBar(e), this.crosshairHandler.setData(this.dataManager.getData()), this.autoScrollOnNewBar && this.viewport.scrollToEnd(), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.updateViewportAndRender();
519
- }), this.streamManager.on("barUpdate", (e) => {
520
- this.dataManager.updateLastBar(e), this.currentPriceLine.setPrice(e.close), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.scheduleRender();
521
- }), this.streamManager.on("priceChange", ({ price: e }) => {
522
- this.tradingManager.setCurrentPrice(e), this.currentPriceLine.setPrice(e), this.engine.requestRender(d.Overlay), this.engine.requestRender(d.UI);
523
- }), this.streamManager.on("connectionChange", (e) => {
524
- this.eventBus.emit("dataUpdate", { connection: e });
525
- }), this.streamManager.on("error", (e) => {
526
- this.eventBus.emit("dataUpdate", { error: e.message });
527
- }), this.autoScrollOnNewBar = e.autoScroll !== !1, this.currentSymbol = e.symbol, await this.streamManager.connect(e);
528
- let t = this.timeframeToMs(e.timeframe);
529
- this.barCountdown.setTimeframeMs(t), this.countdownInterval && clearInterval(this.countdownInterval), this.countdownInterval = setInterval(() => {
530
- this.barCountdown.isVisible() && this.engine.requestRender(d.UI);
531
- }, 1e3);
532
- }
533
- async switchStream(e, t) {
534
- this.streamManager && (this.currentSymbol = e, await this.streamManager.switchTo(e, t));
535
- }
536
- async setTimeframe(e) {
537
- if (!this.streamManager) throw Error("No active stream. Call connect() first.");
538
- await this.switchStream(this.currentSymbol, e);
539
- }
540
- disconnectStream() {
541
- this.streamManager &&= (this.streamManager.dispose(), null);
542
- }
543
- setBarCountdownVisible(e) {
544
- this.barCountdown.setVisible(e), this.engine.requestRender(d.UI);
545
- }
546
- setSessionBreaksVisible(e) {
547
- this.sessionBreaks.setVisible(e), this.engine.requestRender(d.Background);
548
- }
549
- addCompareSymbol(e, t, n, r) {
550
- this.compareRenderer.addSymbol({
551
- id: e,
552
- label: t,
553
- data: n,
554
- color: r,
555
- visible: !0
556
- }), this.engine.requestRender(d.Main);
557
- }
558
- removeCompareSymbol(e) {
559
- this.compareRenderer.removeSymbol(e), this.engine.requestRender(d.Main);
560
- }
561
- updateCompareData(e, t) {
562
- this.compareRenderer.setSymbolData(e, t), this.engine.requestRender(d.Main);
563
- }
564
- setCompareMode(e) {
565
- this.compareRenderer.setMode(e), this.engine.requestRender(d.Main);
566
- }
567
- clearCompareSymbols() {
568
- this.compareRenderer.clear(), this.engine.requestRender(d.Main);
569
- }
570
- setLogScale(e) {
571
- this.viewport.setLogScale(e), this.updateViewportAndRender();
572
- }
573
- isLogScale() {
574
- return this.viewport.isLogScale();
575
- }
576
- setSessionBreaksConfig(e) {
577
- this.sessionBreaks.setConfig(e), this.engine.requestRender(d.Background);
578
- }
579
- getConnectionState() {
580
- return this.streamManager?.getConnectionState() ?? "disconnected";
581
- }
582
- getConnectionInfo() {
583
- return this.streamManager?.getConnectionInfo() ?? { state: "disconnected" };
584
- }
585
- setAutoScroll(e) {
586
- this.autoScrollOnNewBar = e;
587
- }
588
- scrollTo(e) {
589
- let t = this.dataManager.getData();
590
- for (let n = 0; n < t.length; n++) if (t[n].time >= e) {
591
- let e = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
592
- this.viewport.scrollBy(n * e - this.viewport.getState().offset), this.updateViewportAndRender();
593
- return;
594
- }
595
- }
596
- scrollToEnd() {
597
- this.viewport.scrollToEnd(), this.updateViewportAndRender();
598
- }
599
- setVisibleRange(e, t) {
600
- let n = this.dataManager.getData(), r = 0, i = n.length - 1;
601
- for (let t = 0; t < n.length; t++) if (n[t].time >= e) {
602
- r = t;
603
- break;
604
- }
605
- for (let e = n.length - 1; e >= 0; e--) if (n[e].time <= t) {
606
- i = e;
607
- break;
608
- }
609
- let a = i - r + 1;
610
- if (a > 0) {
611
- let e = this.viewport.getState().chartRect.width, t = e / a, n = Math.max(2, t - this.viewport.getState().barSpacing);
612
- this.viewport.zoom((n - this.viewport.getState().barWidth) / this.viewport.getState().barWidth, e / 2);
613
- }
614
- this.updateViewportAndRender();
615
- }
616
- zoomIn() {
617
- let e = this.viewport.getState().chartRect.width;
618
- this.viewport.zoom(.2, e / 2), this.updateViewportAndRender();
619
- }
620
- zoomOut() {
621
- let e = this.viewport.getState().chartRect.width;
622
- this.viewport.zoom(-.2, e / 2), this.updateViewportAndRender();
623
- }
624
- fitContent() {
625
- let e = this.dataManager.getData();
626
- e.length !== 0 && this.setVisibleRange(e[0].time, e[e.length - 1].time);
627
- }
628
- on(e, t) {
629
- this.eventBus.on(e, t);
630
- }
631
- off(e, t) {
632
- this.eventBus.off(e, t);
633
- }
634
- enableTauriBridge(e) {
635
- this.eventBus.enableTauriBridge({
636
- enabled: !0,
637
- ...e
638
- });
639
- }
640
- disableTauriBridge() {
641
- this.eventBus.disableTauriBridge();
642
- }
643
- setTheme(e) {
644
- this.themeManager.setTheme(e), this.syncRenderContext(), this.container.style.backgroundColor = this.themeManager.getTheme().background, this.engine.requestRender(), this.eventBus.emit("themeChange", { theme: e });
645
- }
646
- getTheme() {
647
- return this.themeManager.getTheme();
648
- }
649
- setWatermark(e, t) {
650
- this.watermark.setConfig({
651
- text: e,
652
- ...t
653
- }), this.engine.requestRender(d.Background);
654
- }
655
- setAutoScale(e) {
656
- this.options.autoScale = e, this.updateViewportAndRender();
657
- }
658
- isAutoScale() {
659
- return this.options.autoScale !== !1;
660
- }
661
- setCrosshairMode(e) {
662
- this.crosshairHandler.setMode(e), this.engine.requestRender(d.Overlay);
663
- }
664
- getCrosshairMode() {
665
- return this.crosshairHandler.getMode();
666
- }
667
- setGridVisible(e) {
668
- this.gridRenderer.setVisible(e), this.engine.requestRender(d.Background);
669
- }
670
- isGridVisible() {
671
- return this.gridRenderer.isVisible();
672
- }
673
- setVolumeVisible(e) {
674
- this.volumeRenderer.setVisible(e), this.engine.requestRender(d.Main);
675
- }
676
- setTooltipVisible(e) {
677
- e || this.crosshairTooltip.hide();
678
- }
679
- setLegend(e) {
680
- this.chartLegend.setConfig(e), this.engine.requestRender(d.UI);
681
- }
682
- setSymbolName(e) {
683
- this.chartLegend.setSymbol(e), this.engine.requestRender(d.UI);
684
- }
685
- setStatusText(e) {
686
- this.chartLegend.setStatusText(e), this.engine.requestRender(d.UI);
687
- }
688
- screenshot(e) {
689
- this.features.screenshot && W.download(this.container, e, this.themeManager.getTheme().background);
690
- }
691
- screenshotDataURL() {
692
- return this.features.screenshot ? W.toDataURL(this.container, this.themeManager.getTheme().background) : null;
693
- }
694
- async screenshotBlob() {
695
- return this.features.screenshot ? W.toBlob(this.container, this.themeManager.getTheme().background) : null;
696
- }
697
- addAlert(e, t = "crossing", n) {
698
- if (!this.features.alerts) return null;
699
- let r = this.alertManager.addAlert(e, t, n);
700
- return this.scheduleAutoSave(), r;
701
- }
702
- removeAlert(e) {
703
- this.alertManager.removeAlert(e), this.scheduleAutoSave();
704
- }
705
- getAlerts() {
706
- return this.alertManager.getAlerts();
707
- }
708
- clearAlerts() {
709
- this.alertManager.clearAlerts(), this.scheduleAutoSave();
710
- }
711
- saveAlerts(e) {
712
- this.alertManager.saveToStorage(e);
713
- }
714
- loadAlerts(e) {
715
- this.alertManager.loadFromStorage(e), this.engine.requestRender(d.Overlay);
716
- }
717
- replay(e) {
718
- if (!this.features.replay) return;
719
- let t = this.dataManager.getData();
720
- this.replayManager.load(t), this.replayManager.on("bar", ({ bar: e, index: n }) => {
721
- let r = t.slice(0, n + 1);
722
- this.dataManager.setData(r), this.crosshairHandler.setData(r), this.indicatorEngine.recalculateAll(r), this.updateViewportAndRender();
723
- }), this.replayManager.play(e);
724
- }
725
- replayPause() {
726
- this.replayManager.pause();
727
- }
728
- replayResume() {
729
- this.replayManager.resume();
730
- }
731
- replayStop() {
732
- this.replayManager.stop();
733
- }
734
- replaySeek(e) {
735
- this.replayManager.seekTo(e);
736
- }
737
- setReplaySpeed(e) {
738
- this.replayManager.setSpeed(e);
739
- }
740
- getReplayState() {
741
- return this.replayManager.getState();
742
- }
743
- getReplayProgress() {
744
- return this.replayManager.getProgress();
745
- }
746
- saveState(e) {
747
- if (!this.features.saveLoad) return null;
748
- let t = z.capture({
749
- getDrawings: () => this.getDrawings(),
750
- getTheme: () => this.getTheme(),
751
- getAlerts: () => this.getAlerts()
752
- }, { chartType: this.options.chartType }), n = z.serialize(t);
753
- return e && z.saveToStorage(e, t), n;
754
- }
755
- loadState(e) {
756
- if (!this.features.saveLoad) return;
757
- let t = z.deserialize(e);
758
- if (t.chartType && this.setChartType(t.chartType), t.drawings && this.setDrawings(t.drawings), t.theme && this.setTheme(t.theme), t.alerts) {
759
- this.clearAlerts();
760
- for (let e of t.alerts) this.addAlert(e.price, e.condition, e.message);
761
- }
762
- }
763
- loadStateFromStorage(e) {
764
- if (!this.features.saveLoad) return !1;
765
- let t = z.loadFromStorage(e);
766
- return t ? (this.loadState(z.serialize(t)), !0) : !1;
767
- }
768
- downloadState(e) {
769
- if (!this.features.saveLoad) return;
770
- let t = z.capture({
771
- getDrawings: () => this.getDrawings(),
772
- getTheme: () => this.getTheme(),
773
- getAlerts: () => this.getAlerts()
774
- }, { chartType: this.options.chartType });
775
- z.downloadFile(t, e);
776
- }
777
- async loadStateFromFile() {
778
- if (!this.features.saveLoad) return;
779
- let e = await z.loadFromFile();
780
- this.loadState(z.serialize(e));
781
- }
782
- setLocale(e) {
783
- S(e), this.engine.requestRender();
784
- }
785
- setNumberLocale(e) {
786
- this.numberLocale = e, this.priceAxis.setLocale(e), this.crosshairHandler.setLocale(e), this.syncRenderContext(), this.engine.requestRender();
787
- }
788
- getNumberLocale() {
789
- return this.numberLocale;
790
- }
791
- setMarket(e) {
792
- if (this.marketConfig = e, e.colorScheme) {
793
- let t = {
794
- ...this.themeManager.getTheme(),
795
- candleUp: e.colorScheme.up,
796
- candleDown: e.colorScheme.down,
797
- candleUpWick: e.colorScheme.up,
798
- candleDownWick: e.colorScheme.down,
799
- volumeUp: e.colorScheme.up.replace(")", ", 0.3)").replace("rgb(", "rgba(") || `${e.colorScheme.up}4D`,
800
- volumeDown: e.colorScheme.down.replace(")", ", 0.3)").replace("rgb(", "rgba(") || `${e.colorScheme.down}4D`
801
- };
802
- this.themeManager.setTheme(t);
803
- }
804
- e.pricePrecision !== void 0 && (this.tradingManager.setConfig({ pricePrecision: e.pricePrecision }), this.alertManager.setPricePrecision(e.pricePrecision), this.streamManager?.priceLine.setPricePrecision(e.pricePrecision), this.crosshairHandler.setPricePrecision(e.pricePrecision)), this.syncRenderContext(), this.engine.requestRender();
805
- }
806
- getMarket() {
807
- return this.marketConfig;
808
- }
809
- setPriceLimits(e) {
810
- this.marketConfig && (y(e, this.marketConfig) && (this.marketConfig.priceLimits = {
811
- ...this.marketConfig.priceLimits,
812
- referencePrice: e
813
- }), this.engine.requestRender());
814
- }
815
- getFeatures() {
816
- return this.features;
817
- }
818
- setFeatures(e) {
819
- Object.assign(this.features, e), e.crosshair === !1 && this.crosshairTooltip.hide(), e.grid !== void 0 && this.engine.requestRender(d.Background), e.volume !== void 0 && (this.volumeRenderer.setVisible(e.volume), this.engine.requestRender(d.Main)), e.drawings === !1 && this.drawingManager.setActiveTool(null), e.trading === !1 && (this.tradingManager.setOrders([]), this.tradingManager.setPositions([])), e.keyboard !== void 0 && this.keyboardHandler?.setEnabled(e.keyboard), this.engine.requestRender();
820
- }
821
- resize() {
822
- let e = this.engine.dprManager.readContainerSize();
823
- if (e.width <= 0 || e.height <= 0) return;
824
- this.containerSizeCache = e, this.containerSizeCacheTime = Date.now();
825
- let t = this.engine.dprManager.getDpr();
826
- this.engine.layerManager.resize(e, t);
827
- let n = this.viewport.isAtEnd();
828
- this.viewport.resize(e.width, e.height), this.layoutManager.resize(e.width, e.height), this.updateViewportAndRender(n), this.eventBus.emit("resize", e);
829
- }
830
- destroy() {
831
- this.countdownInterval && clearInterval(this.countdownInterval), this.disableAutoSave(), this.disconnectStream(), this.onWindowKeyDown &&= (window.removeEventListener("keydown", this.onWindowKeyDown), null), this.keyboardHandler = null, this.interactionManager.detach(), this.tradingManager.destroy(), this.animator.dispose(), this.crosshairTooltip.destroy(), this.replayManager.dispose(), this.undoRedoManager.clear(), this.engine.destroy(), this.eventBus.destroy(), this.container.innerHTML = "";
832
- }
833
- createChartRenderer(e) {
834
- switch (e) {
835
- case "candlestick": return new F();
836
- case "heikinAshi": return new F();
837
- case "line": return new Ie();
838
- case "area": return new O();
839
- case "bar": return new j();
840
- case "hollowCandle": return new Ae();
841
- case "baseline": return new N();
842
- case "renko": return new He();
843
- case "lineBreak": return new F();
844
- case "kagi": return new Ne();
845
- case "pointAndFigure": return new ze();
846
- default: return new F();
847
- }
848
- }
849
- getDisplayData() {
850
- if (this.displayDataCache) return this.displayDataCache;
851
- let e = this.dataManager.getData();
852
- if (e.length === 0) return e;
853
- let t;
854
- switch (this.options.chartType) {
855
- case "heikinAshi":
856
- t = _t(e);
857
- break;
858
- case "renko":
859
- t = Tt(e, {
860
- brickSize: 0,
861
- useATR: !0,
862
- atrPeriod: 14
863
- });
864
- break;
865
- case "lineBreak":
866
- t = xt(e, 3);
867
- break;
868
- case "kagi":
869
- t = yt(e, 4);
870
- break;
871
- case "pointAndFigure":
872
- t = Ct(e, e.reduce((e, t) => e + t.close, 0) / e.length * .01, 3);
873
- break;
874
- default: t = e;
875
- }
876
- return this.displayDataCache = t, t;
877
- }
878
- scheduleRender() {
879
- this.renderScheduled || (this.renderScheduled = !0, requestAnimationFrame(() => {
880
- this.renderScheduled = !1;
881
- let e = this.getDisplayData();
882
- this.viewport.updateData(e, this.options.autoScale !== !1), this.syncRenderContext(), this.engine.requestRender();
883
- }));
884
- }
885
- updateViewportAndRender(e = !1) {
886
- this.resolvedLayoutCache = null, this.panelInfoCache = null;
887
- let t = this.getResolvedLayout();
888
- this.viewport.setChartRect(t.mainChartRect);
889
- let n = this.getDisplayData();
890
- if (this.viewport.updateData(n, this.options.autoScale !== !1), this.options.autoScale !== !1) {
891
- let e = this.viewport.getState(), t = this.indicatorEngine.getOverlayPriceRange(e.visibleRange.from, Math.min(e.visibleRange.to, n.length - 1));
892
- if (t) {
893
- let n = e.priceRange, r = Math.min(n.min, t.min), i = Math.max(n.max, t.max);
894
- if (r < n.min || i > n.max) {
895
- let e = i - r || 1;
896
- this.viewport.setPriceRange(r - e * .02, i + e * .02);
897
- }
898
- }
899
- }
900
- e && this.viewport.scrollToEnd(), this.syncRenderContext(), this.engine.requestRender();
901
- }
902
- getResolvedLayout() {
903
- return this.resolvedLayoutCache ||= this.layoutManager.resolve(), this.resolvedLayoutCache;
904
- }
905
- cachedContainerSize() {
906
- let e = Date.now();
907
- return (!this.containerSizeCache || e - this.containerSizeCacheTime > 500) && (this.containerSizeCache = this.engine.dprManager.getContainerSize(), this.containerSizeCacheTime = e), this.containerSizeCache;
908
- }
909
- buildPanelRenderInfos() {
910
- if (this.panelInfoCache) return this.panelInfoCache;
911
- let e = this.getResolvedLayout(), t = this.viewport.getState(), n = e.panels.map((e) => {
912
- let n = this.indicatorEngine.getOutput(e.config.id), r = 0, i = 100;
913
- if (n) {
914
- let e = Infinity, a = -Infinity, { from: o, to: s } = t.visibleRange, c = 0;
915
- for (let [, t] of n.values) {
916
- if (c >= o && c <= s) for (let n in t) {
917
- let r = t[n];
918
- r !== void 0 && (r < e && (e = r), r > a && (a = r));
919
- }
920
- c++;
921
- }
922
- if (e !== Infinity) {
923
- let t = a - e || 1;
924
- r = e - t * .1, i = a + t * .1;
925
- }
926
- }
927
- let a = {
928
- x: e.rect.x,
929
- y: e.rect.y + 20,
930
- width: e.rect.width,
931
- height: Math.max(0, e.rect.height - 20)
932
- };
933
- return {
934
- instanceId: e.config.id,
935
- rect: e.rect,
936
- viewport: {
937
- ...t,
938
- chartRect: a,
939
- priceRange: {
940
- min: r,
941
- max: i
942
- }
943
- }
944
- };
945
- });
946
- return this.panelInfoCache = n, n;
947
- }
948
- syncRenderContext() {
949
- let e = this.getResolvedLayout(), t = this.features.indicators ? this.buildPanelRenderInfos() : [], n = e.panels.filter((e) => e.config.position === "bottom").reduce((e, t) => e + t.rect.height, 0), r = e.mainChartRect.y + e.mainChartRect.height + n;
950
- this.engine.setRenderContext({
951
- chartRenderer: this.chartRenderer,
952
- gridRenderer: this.features.grid ? this.gridRenderer : null,
953
- priceAxis: this.features.priceAxis ? this.priceAxis : null,
954
- timeAxis: this.features.timeAxis ? this.timeAxis : null,
955
- crosshairHandler: this.features.crosshair ? this.crosshairHandler : null,
956
- indicatorEngine: this.features.indicators ? this.indicatorEngine : null,
957
- drawingRenderer: this.features.drawings ? this.drawingRenderer : null,
958
- tradingRenderer: this.features.trading ? this.tradingRenderer : null,
959
- currentPriceLine: this.streamManager?.priceLine ?? this.currentPriceLine,
960
- chartLegend: this.features.legend ? this.chartLegend : null,
961
- volumeRenderer: this.features.volume ? this.volumeRenderer : null,
962
- watermark: this.features.watermark ? this.watermark : null,
963
- barCountdown: this.barCountdown,
964
- sessionBreaks: this.sessionBreaks,
965
- compareRenderer: this.compareRenderer,
966
- panels: t,
967
- priceLimits: this.buildPriceLimits(),
968
- timeAxisY: r,
969
- viewport: this.viewport.getState(),
970
- theme: this.themeManager.getTheme(),
971
- data: this.getDisplayData(),
972
- numberLocale: this.numberLocale
973
- });
974
- }
975
- timeframeToMs(e) {
976
- let t = e.match(/^(\d+)([smhdwMy])$/);
977
- if (!t) return 0;
978
- let n = parseInt(t[1], 10);
979
- switch (t[2]) {
980
- case "s": return n * 1e3;
981
- case "m": return n * 6e4;
982
- case "h": return n * 36e5;
983
- case "d": return n * 864e5;
984
- case "w": return n * 6048e5;
985
- case "M": return n * 2592e6;
986
- default: return 0;
987
- }
988
- }
989
- buildPriceLimits() {
990
- if (!this.marketConfig?.priceLimits?.enabled || !this.marketConfig.priceLimits.referencePrice) return null;
991
- let e = y(this.marketConfig.priceLimits.referencePrice, this.marketConfig);
992
- return e ? {
993
- ...e,
994
- colors: this.marketConfig.colorScheme ? {
995
- ceiling: this.marketConfig.colorScheme.ceiling,
996
- floor: this.marketConfig.colorScheme.floor,
997
- reference: this.marketConfig.colorScheme.reference
998
- } : void 0
999
- } : null;
1000
- }
1001
- }, Dt = class extends M {
1
+ import { a as e, i as t, n, r, t as i } from "./Chart-CrrTKx3r.js";
2
+ import { DARK_TERMINAL as a, DARK_THEME as ee, DEFAULT_DRAWING_STYLE as te, DEFAULT_RECONNECT as o, DEFAULT_STREAM_CONFIG as s, DEFAULT_TIMEFRAME_FAVORITES as c, DEFAULT_TRADING_CONFIG as l, LIGHT_THEME as u, MARKET_CRYPTO as d, MARKET_HNX as f, MARKET_HOSE as p, MARKET_NYSE as m, MARKET_UPCOM as h, TIMEFRAMES_CRYPTO as g, TIMEFRAMES_FOREX as _, TIMEFRAMES_STOCK as v, VN_COLORS as y, computePriceLimits as b, createVNTheme as x, formatNumber as S, formatVND as C, formatVolumeLoc as w, getCurrentSession as T, getLocale as E, normalizeBar as D, normalizeBarTime as O, registerLocale as k, setLocale as A, t as j } from "@tradecanvas/commons";
3
+ import { AlertManager as M, Animator as N, BarCountdown as P, BaseFinanceChart as F, BinanceAdapter as I, ChartLegend as L, ChartStateManager as R, CompareRenderer as z, CrosshairTooltip as B, CurrentPriceLine as V, DEFAULT_LEGEND_CONFIG as H, DataExporter as U, DrawingBase as W, Easing as G, FinanceCrosshair as K, IndicatorBase as q, KeyboardHandler as J, MockAdapter as Y, ReplayManager as X, Screenshot as Z, SessionBreaks as Q, StreamManager as ne, TickAggregator as re, UndoRedoManager as ie, VolumeRenderer as ae, Watermark as oe, layoutSquarifiedTreemap as se, layoutUniformGrid as ce, renderDepthChart as le, renderEquityCurve as ue, renderGauge as de, renderHeatmap as fe, renderSparkline as pe, renderWaterfall as me, toHeikinAshi as he, toKagi as ge, toLineBreak as _e, toPointAndFigure as ve, toRangeBars as ye, toRenko as be } from "@tradecanvas/core";
4
+ //#region src/finance/SparklineChart.ts
5
+ var $ = class extends F {
1002
6
  options;
1003
7
  constructor(e, t) {
1004
8
  super(e, t.theme), this.options = t, this.requestRender();
1005
9
  }
1006
10
  renderChart(e, t, n, r) {
1007
- mt(e, t, n, this.options, r);
11
+ pe(e, t, n, this.options, r);
1008
12
  }
1009
13
  update(e) {
1010
14
  this.options = {
@@ -1018,15 +22,15 @@ var J = class {
1018
22
  ...e
1019
23
  }, this.requestRender();
1020
24
  }
1021
- }, Ot = class extends M {
25
+ }, xe = class extends F {
1022
26
  options;
1023
27
  crosshair = null;
1024
28
  constructor(e, t) {
1025
- super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), this.requestRender();
29
+ super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new K(this.canvas, () => this.requestRender())), this.requestRender();
1026
30
  }
1027
31
  renderChart(e, t, n, r) {
1028
32
  let i = this.crosshair?.getPosition() ?? null;
1029
- ut(e, t, n, this.options, r, i);
33
+ le(e, t, n, this.options, r, i);
1030
34
  }
1031
35
  update(e) {
1032
36
  this.options = {
@@ -1043,15 +47,15 @@ var J = class {
1043
47
  destroy() {
1044
48
  this.crosshair?.destroy(), super.destroy();
1045
49
  }
1046
- }, kt = class extends M {
50
+ }, Se = class extends F {
1047
51
  options;
1048
52
  crosshair = null;
1049
53
  constructor(e, t) {
1050
- super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), this.requestRender();
54
+ super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new K(this.canvas, () => this.requestRender())), this.requestRender();
1051
55
  }
1052
56
  renderChart(e, t, n, r) {
1053
57
  let i = this.crosshair?.getPosition() ?? null;
1054
- dt(e, t, n, this.options, r, i);
58
+ ue(e, t, n, this.options, r, i);
1055
59
  }
1056
60
  update(e, t) {
1057
61
  this.options = {
@@ -1071,7 +75,7 @@ var J = class {
1071
75
  destroy() {
1072
76
  this.crosshair?.destroy(), super.destroy();
1073
77
  }
1074
- }, At = class extends M {
78
+ }, Ce = class extends F {
1075
79
  options;
1076
80
  crosshair = null;
1077
81
  cachedRects = [];
@@ -1080,7 +84,7 @@ var J = class {
1080
84
  lastLayoutHeight = 0;
1081
85
  handleClick = null;
1082
86
  constructor(e, t) {
1083
- super(e, t.theme), this.options = t, this.currentData = t.data ?? [], t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), t.onCellClick && (this.handleClick = (e) => {
87
+ super(e, t.theme), this.options = t, this.currentData = t.data ?? [], t.crosshair !== !1 && (this.crosshair = new K(this.canvas, () => this.requestRender())), t.onCellClick && (this.handleClick = (e) => {
1084
88
  let t = this.canvas.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top;
1085
89
  this.onCanvasClick(n, r);
1086
90
  }, this.canvas.addEventListener("click", this.handleClick)), this.recomputeLayout(), this.requestRender();
@@ -1092,10 +96,13 @@ var J = class {
1092
96
  width: this.width,
1093
97
  height: this.height
1094
98
  }, t = this.options.cellPadding ?? 2;
1095
- this.lastLayoutWidth = this.width, this.lastLayoutHeight = this.height, this.options.weighted ? this.cachedRects = st(this.currentData.map((e) => ({
1096
- id: e.id,
1097
- weight: e.weight ?? (Math.abs(e.value) || 1)
1098
- })), e, t) : this.cachedRects = ct(this.currentData.map((e) => ({ id: e.id })), e, t);
99
+ if (this.lastLayoutWidth = this.width, this.lastLayoutHeight = this.height, this.options.weighted) {
100
+ let n = this.currentData.map((e) => ({
101
+ id: e.id,
102
+ weight: e.weight ?? (Math.abs(e.value) || 1)
103
+ }));
104
+ this.cachedRects = se(n, e, t);
105
+ } else this.cachedRects = ce(this.currentData.map((e) => ({ id: e.id })), e, t);
1099
106
  }
1100
107
  onCanvasClick(e, t) {
1101
108
  if (this.options.onCellClick) for (let n of this.cachedRects) {
@@ -1110,7 +117,7 @@ var J = class {
1110
117
  renderChart(e, t, n, r) {
1111
118
  (t !== this.lastLayoutWidth || n !== this.lastLayoutHeight) && this.recomputeLayout();
1112
119
  let i = this.crosshair?.getPosition() ?? null;
1113
- pt(e, t, n, this.currentData, this.cachedRects, this.options, r, i);
120
+ fe(e, t, n, this.currentData, this.cachedRects, this.options, r, i);
1114
121
  }
1115
122
  update(e) {
1116
123
  this.currentData = e, this.options = {
@@ -1127,15 +134,15 @@ var J = class {
1127
134
  destroy() {
1128
135
  this.crosshair?.destroy(), this.handleClick && this.canvas.removeEventListener("click", this.handleClick), super.destroy();
1129
136
  }
1130
- }, jt = class extends M {
137
+ }, we = class extends F {
1131
138
  options;
1132
139
  crosshair = null;
1133
140
  constructor(e, t) {
1134
- super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), this.requestRender();
141
+ super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new K(this.canvas, () => this.requestRender())), this.requestRender();
1135
142
  }
1136
143
  renderChart(e, t, n, r) {
1137
144
  let i = this.crosshair?.getPosition() ?? null;
1138
- ht(e, t, n, this.options, r, i);
145
+ me(e, t, n, this.options, r, i);
1139
146
  }
1140
147
  update(e) {
1141
148
  this.options = {
@@ -1152,12 +159,12 @@ var J = class {
1152
159
  destroy() {
1153
160
  this.crosshair?.destroy(), super.destroy();
1154
161
  }
1155
- }, Mt = 500;
1156
- function Nt(e) {
162
+ }, Te = 500;
163
+ function Ee(e) {
1157
164
  let t = 1 - e;
1158
165
  return 1 - t * t * t;
1159
166
  }
1160
- var Pt = class extends M {
167
+ var De = class extends F {
1161
168
  options;
1162
169
  currentValue;
1163
170
  targetValue;
@@ -1168,7 +175,7 @@ var Pt = class extends M {
1168
175
  super(e, t.theme), this.options = t, this.currentValue = t.value, this.targetValue = t.value, this.requestRender();
1169
176
  }
1170
177
  renderChart(e, t, n, r) {
1171
- ft(e, t, n, this.options, r, this.currentValue);
178
+ de(e, t, n, this.options, r, this.currentValue);
1172
179
  }
1173
180
  setValue(e) {
1174
181
  if (this.options.animate === !1) {
@@ -1198,7 +205,7 @@ var Pt = class extends M {
1198
205
  if (this.animationFrameId !== null) return;
1199
206
  let e = () => {
1200
207
  if (this.animationFrameId = null, this.animationStart === null) return;
1201
- let t = this.options.animationDuration ?? Mt, n = performance.now() - this.animationStart, r = Math.min(1, n / Math.max(1, t)), i = Nt(r);
208
+ let t = this.options.animationDuration ?? Te, n = performance.now() - this.animationStart, r = Math.min(1, n / Math.max(1, t)), i = Ee(r);
1202
209
  this.currentValue = this.animationFrom + (this.targetValue - this.animationFrom) * i, this.requestRender(), r < 1 ? this.animationFrameId = requestAnimationFrame(e) : (this.currentValue = this.targetValue, this.animationStart = null);
1203
210
  };
1204
211
  this.animationFrameId = requestAnimationFrame(e);
@@ -1211,6 +218,6 @@ var Pt = class extends M {
1211
218
  }
1212
219
  };
1213
220
  //#endregion
1214
- export { w as AlertManager, E as Animator, k as BarCountdown, P as BinanceAdapter, Et as Chart, I as ChartLegend, R as ChartStateManager, he as CompareRenderer, ve as CrosshairTooltip, be as CurrentPriceLine, e as DARK_TERMINAL, t as DARK_THEME, r as DEFAULT_DRAWING_STYLE, Se as DEFAULT_LEGEND_CONFIG, a as DEFAULT_RECONNECT, o as DEFAULT_STREAM_CONFIG, s as DEFAULT_TIMEFRAME_FAVORITES, c as DEFAULT_TRADING_CONFIG, Ce as DataExporter, J as DataManager, Ot as DepthChart, we as DrawingBase, De as Easing, kt as EquityCurveChart, Pt as GaugeChart, At as HeatmapChart, je as IndicatorBase, Pe as KeyboardHandler, l as LIGHT_THEME, Q as LayoutManager, f as MARKET_CRYPTO, ee as MARKET_HNX, p as MARKET_HOSE, m as MARKET_NYSE, h as MARKET_UPCOM, Le as MockAdapter, $ as PluginManager, Ue as ReplayManager, We as Screenshot, Ge as SessionBreaks, Dt as SparklineChart, qe as StreamManager, te as TIMEFRAMES_CRYPTO, ne as TIMEFRAMES_FOREX, re as TIMEFRAMES_STOCK, Y as ThemeManager, Ye as TickAggregator, $e as UndoRedoManager, ie as VN_COLORS, nt as VolumeRenderer, jt as WaterfallChart, it as Watermark, ae as computePriceLimits, oe as createVNTheme, se as formatNumber, ce as formatVND, le as formatVolumeLoc, ue as getCurrentSession, de as getLocale, pe as normalizeBar, me as normalizeBarTime, b as registerLocale, x as setLocale, C as t, gt as toHeikinAshi, vt as toKagi, bt as toLineBreak, St as toPointAndFigure, wt as toRenko };
221
+ export { M as AlertManager, N as Animator, P as BarCountdown, I as BinanceAdapter, i as Chart, L as ChartLegend, R as ChartStateManager, z as CompareRenderer, B as CrosshairTooltip, V as CurrentPriceLine, a as DARK_TERMINAL, ee as DARK_THEME, te as DEFAULT_DRAWING_STYLE, H as DEFAULT_LEGEND_CONFIG, o as DEFAULT_RECONNECT, s as DEFAULT_STREAM_CONFIG, c as DEFAULT_TIMEFRAME_FAVORITES, l as DEFAULT_TRADING_CONFIG, U as DataExporter, e as DataManager, xe as DepthChart, W as DrawingBase, G as Easing, Se as EquityCurveChart, De as GaugeChart, Ce as HeatmapChart, q as IndicatorBase, J as KeyboardHandler, u as LIGHT_THEME, r as LayoutManager, d as MARKET_CRYPTO, f as MARKET_HNX, p as MARKET_HOSE, m as MARKET_NYSE, h as MARKET_UPCOM, Y as MockAdapter, n as PluginManager, X as ReplayManager, Z as Screenshot, Q as SessionBreaks, $ as SparklineChart, ne as StreamManager, g as TIMEFRAMES_CRYPTO, _ as TIMEFRAMES_FOREX, v as TIMEFRAMES_STOCK, t as ThemeManager, re as TickAggregator, ie as UndoRedoManager, y as VN_COLORS, ae as VolumeRenderer, we as WaterfallChart, oe as Watermark, b as computePriceLimits, x as createVNTheme, S as formatNumber, C as formatVND, w as formatVolumeLoc, T as getCurrentSession, E as getLocale, D as normalizeBar, O as normalizeBarTime, k as registerLocale, A as setLocale, j as t, he as toHeikinAshi, ge as toKagi, _e as toLineBreak, ve as toPointAndFigure, ye as toRangeBars, be as toRenko };
1215
222
 
1216
223
  //# sourceMappingURL=index.js.map