candleview 1.1.5 → 2.0.1

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 CHANGED
@@ -1,512 +1,750 @@
1
- <p align="center">
2
- <table align="center" border="0" cellpadding="0" cellspacing="0" style="border: none !important; border-collapse: collapse !important;">
3
- <tr style="border: none !important;">
4
- <td style="border: none !important; padding: 0;"><img src="./assets/logo/logo_50x50.jpeg" alt="CandleView Logo" width="50" height="50" style="border-radius:5px"></td>
5
- <td style="border: none !important; padding: 0 0 0 10px;"><h1 style="margin: 0;">CandleView</h1></td>
6
- </tr>
7
- </table>
8
- </p>
9
- <h4 align="center">
10
- A data visualization charts and draw graph engine for the financial industry.
11
- </h4>
12
- <p align="center">
13
- <a href="https://https://github.com/0xhappyboy/candleview/LICENSE"><img src="https://img.shields.io/badge/License-AGPL3.0-d1d1f6.svg?style=flat&labelColor=1C2C2E&color=BEC5C9&logo=googledocs&label=license&logoColor=BEC5C9" alt="License"></a>
14
- </p>
15
- <p align="center">
16
- <a href="./README_zh-CN.md">简体中文</a> | <a href="./README.md">English</a>
17
- </p>
18
-
19
- # ⚙️ Install
20
-
21
- ```bash
22
- npm i candleview
23
- ```
24
-
25
- ```bash
26
- yarn add candleview
27
- ```
28
-
29
- # 🚀 Quick Start
30
-
31
- ```typescript
32
- import { CandleView } from "./CandleView";
33
-
34
- const App = () => {
35
- return (
36
- <CandleView
37
- title="BTC/USDT"
38
- height={600}
39
- theme="dark"
40
- i18n="en"
41
- showToolbar={true}
42
- showLeftPanel={true}
43
- showTopPanel={true}
44
- timeframe="1d"
45
- timezone="America/New_York"
46
- data={klineData}
47
- />
48
- );
49
- };
50
- ```
51
-
52
- # Preview
53
-
54
- ## Draw Graphics
55
-
56
- ### Fibonacci
57
-
58
- <table>
59
- <tr>
60
- <td align="left">
61
- <h4>Arc</h4>
62
- </td>
63
- <td align="left">
64
- <h4>Channel</h4>
65
- </td>
66
- <td align="left">
67
- <h4>Circle</h4>
68
- </td>
69
- </tr>
70
- <tr>
71
- <td align="center"><img src="./assets/fibonacci/fibonacci-arc.png" width="400"></td>
72
- <td align="center"><img src="./assets/fibonacci/fibonacci-channel.png" width="400"></td>
73
- <td align="center"><img src="./assets/fibonacci/fibonacci-circle.png" width="400"></td>
74
- </tr>
75
- <tr>
76
- <td align="left">
77
- <h4>Fan</h4>
78
- </td>
79
- <td align="left">
80
- <h4>Price Extension</h4>
81
- </td>
82
- <td align="left">
83
- <h4>Retracement</h4>
84
- </td>
85
- </tr>
86
- <tr>
87
- <td align="center"><img src="./assets/fibonacci/fibonacci-fan.png" width="400"></td>
88
- <td align="center"><img src="./assets/fibonacci/fibonacci-price-extension.png" width="400"></td>
89
- <td align="center"><img src="./assets/fibonacci/fibonacci-retracement.png" width="400"></td>
90
- </tr>
91
- <tr>
92
- <td align="left">
93
- <h4>Spiral</h4>
94
- </td>
95
- <td align="left">
96
- <h4>Time Expansion</h4>
97
- </td>
98
- <td align="left">
99
- <h4>Time Zoon</h4>
100
- </td>
101
- </tr>
102
- <tr>
103
- <td align="center"><img src="./assets/fibonacci/fibonacci-spiral.png" width="400"></td>
104
- <td align="center"><img src="./assets/fibonacci/fibonacci-time-expansion.png" width="400"></td>
105
- <td align="center"><img src="./assets/fibonacci/fibonacci-time-zoon.png" width="400"></td>
106
- </tr>
107
- <tr>
108
- <td align="left">
109
- <h4>Wedge</h4>
110
- </td>
111
- <td align="left">
112
- </td>
113
- <td align="left">
114
- </td>
115
- </tr>
116
- <tr>
117
- <td align="center"><img src="./assets/fibonacci/fibonacci-wedge.png" width="400"></td>
118
- </tr>
119
- </table>
120
-
121
- ### Gann
122
-
123
- <table>
124
- <tr>
125
- <td align="left">
126
- <h4>Box</h4>
127
- </td>
128
- <td align="left">
129
- <h4>Fan</h4>
130
- </td>
131
- <td align="left">
132
- <h4>Rectangle</h4>
133
- </td>
134
- </tr>
135
- <tr>
136
- <td align="center"><img src="./assets/gann/gann-box.png" width="400"></td>
137
- <td align="center"><img src="./assets/gann/gann-fan.png" width="400"></td>
138
- <td align="center"><img src="./assets/gann//gann-rectangle.png" width="400"></td>
139
- </tr>
140
- </table>
141
-
142
- ### Mark
143
-
144
- <table>
145
- <tr>
146
- <td align="left">
147
- <h4>Mark</h4>
148
- </td>
149
- </tr>
150
- <tr>
151
- <td align="center"><img src="./assets/mark.png" width="400"></td>
152
- </tr>
153
- </table>
154
-
155
- ## Theme
156
-
157
- <table>
158
- <tr>
159
- <td align="left">
160
- <h4>Dark</h4>
161
- </td>
162
- <td align="left">
163
- <h4>Light</h4>
164
- </td>
165
- </tr>
166
- <tr>
167
- <td align="center"><img src="./assets/preview_theme_dark.png" width="400"></td>
168
- <td align="center"><img src="./assets/preview_theme_light.png" width="400"></td>
169
- </tr>
170
- </table>
171
-
172
- ## I18n
173
-
174
- <table>
175
- <tr>
176
- <td align="left">
177
- <h4>En</h4>
178
- </td>
179
- <td align="left">
180
- <h4>zh-CN</h4>
181
- </td>
182
- </tr>
183
- <tr>
184
- <td align="center"><img src="./assets/preview_i18n_en.png" width="400"></td>
185
- <td align="center"><img src="./assets/preview_i18n_zh-CN.png" width="400"></td>
186
- </tr>
187
- </table>
188
-
189
- # 🔧 Configuration Options
190
-
191
- ## Props
192
-
193
- | Parameter | Type | Default | Description | Required |
194
- | ------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------- | ---------------------------------------- | -------- |
195
- | `theme` | `'dark' \| 'light'` | `'dark'` | Theme mode | No |
196
- | `i18n` | `'en' \| 'zh-cn'` | `'zh-cn'` | Language setting | No |
197
- | `height` | `number \| string` | `500` | Chart height (px or percentage) | No |
198
- | `title` | `string` | `''` | Chart title displayed on the chart | Yes |
199
- | `showToolbar` | `boolean` | `true` | Show top toolbar | No |
200
- | `showLeftPanel` | `boolean` | `true` | Show left drawing tools panel | No |
201
- | `showTopPanel` | `boolean` | `true` | Show top settings panel | No |
202
- | `showIndicators` | `boolean` | `true` | Show indicators panel | No |
203
- | `timeframe` | `string` | `'1d'` | Chart timeframe (e.g., '1m', '1h', '1d') | No |
204
- | `timezone` | `string` | `'Asia/Shanghai'` | Timezone for data display | No |
205
- | `data` | `ICandleViewDataPoint[]` | `[]` | K-line data array | No |
206
- | `url` | `string` | `''` | URL to fetch data from | No |
207
- | `markData` | `IStaticMarkData[]` | `[]` | Pre-drawn marks data | No |
208
- | `handleScreenshotCapture` | `(imageData: { dataUrl: string; blob: Blob; width: number; height: number; timestamp: number }) => void` | `undefined` | Callback for screenshot capture | No |
209
-
210
- ## ⏰ Supported Timeframes
211
-
212
- ### Second-based Timeframes
213
-
214
- | Value | Display Name | Description |
215
- | ------- | ------------------ | ----------- |
216
- | `'1S'` | 1 秒 / 1 Second | 1 second |
217
- | `'5S'` | 5 秒 / 5 Seconds | 5 seconds |
218
- | `'15S'` | 15 秒 / 15 Seconds | 15 seconds |
219
- | `'30S'` | 30 秒 / 30 Seconds | 30 seconds |
220
-
221
- ### Minute-based Timeframes
222
-
223
- | Value | Display Name | Description |
224
- | ------- | ------------------ | ----------- |
225
- | `'1M'` | 1 分 / 1 Minute | 1 minute |
226
- | `'3M'` | 3 分 / 3 Minutes | 3 minutes |
227
- | `'5M'` | 5 分 / 5 Minutes | 5 minutes |
228
- | `'15M'` | 15 分 / 15 Minutes | 15 minutes |
229
- | `'30M'` | 30 分 / 30 Minutes | 30 minutes |
230
- | `'45M'` | 45 分 / 45 Minutes | 45 minutes |
231
-
232
- ### Hour-based Timeframes
233
-
234
- | Value | Display Name | Description |
235
- | ------- | ------------------ | ----------- |
236
- | `'1H'` | 1 小时 / 1 Hour | 1 hour |
237
- | `'2H'` | 2 小时 / 2 Hours | 2 hours |
238
- | `'3H'` | 3 小时 / 3 Hours | 3 hours |
239
- | `'4H'` | 4 小时 / 4 Hours | 4 hours |
240
- | `'6H'` | 6 小时 / 6 Hours | 6 hours |
241
- | `'8H'` | 8 小时 / 8 Hours | 8 hours |
242
- | `'12H'` | 12 小时 / 12 Hours | 12 hours |
243
-
244
- ### Day-based Timeframes
245
-
246
- | Value | Display Name | Description |
247
- | ------ | ------------- | ----------- |
248
- | `'1D'` | 1 日 / 1 Day | 1 day |
249
- | `'3D'` | 3 日 / 3 Days | 3 days |
250
-
251
- ### Week-based Timeframes
252
-
253
- | Value | Display Name | Description |
254
- | ------ | -------------- | ----------- |
255
- | `'1W'` | 1 周 / 1 Week | 1 week |
256
- | `'2W'` | 2 / 2 Weeks | 2 weeks |
257
-
258
- ### Month-based Timeframes
259
-
260
- | Value | Display Name | Description |
261
- | -------- | --------------- | ----------- |
262
- | `'1MON'` | 1 月 / 1 Month | 1 month |
263
- | `'3MON'` | 3 月 / 3 Months | 3 months |
264
- | `'6MON'` | 6 月 / 6 Months | 6 months |
265
-
266
- ## 🌍 Supported Timezones
267
-
268
- ### Americas
269
-
270
- | Timezone ID | Display Name | UTC Offset | Major Cities |
271
- | ----------------------- | -------------------- | ----------- | -------------------------- |
272
- | `'America/New_York'` | 纽约 / New York | UTC-5/UTC-4 | New York, Washington DC |
273
- | `'America/Chicago'` | 芝加哥 / Chicago | UTC-6/UTC-5 | Chicago, Dallas |
274
- | `'America/Denver'` | 丹佛 / Denver | UTC-7/UTC-6 | Denver, Phoenix |
275
- | `'America/Los_Angeles'` | 洛杉矶 / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
276
- | `'America/Toronto'` | 多伦多 / Toronto | UTC-5/UTC-4 | Toronto, Montreal |
277
-
278
- ### Europe
279
-
280
- | Timezone ID | Display Name | UTC Offset | Major Cities |
281
- | ----------------- | -------------------- | ----------- | -------------------- |
282
- | `'Europe/London'` | 伦敦 / London | UTC+0/UTC+1 | London, Dublin |
283
- | `'Europe/Paris'` | 巴黎 / Paris | UTC+1/UTC+2 | Paris, Berlin |
284
- | `'Europe/Berlin'` | 法兰克福 / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
285
- | `'Europe/Zurich'` | 苏黎世 / Zurich | UTC+1/UTC+2 | Zurich, Vienna |
286
- | `'Europe/Moscow'` | 莫斯科 / Moscow | UTC+3 | Moscow, Istanbul |
287
-
288
- ### Asia
289
-
290
- | Timezone ID | Display Name | UTC Offset | Major Cities |
291
- | ------------------ | ------------------ | ---------- | ----------------------- |
292
- | `'Asia/Dubai'` | 迪拜 / Dubai | UTC+4 | Dubai, Abu Dhabi |
293
- | `'Asia/Karachi'` | 卡拉奇 / Karachi | UTC+5 | Karachi, Lahore |
294
- | `'Asia/Kolkata'` | 加尔各答 / Kolkata | UTC+5:30 | Kolkata, Mumbai |
295
- | `'Asia/Shanghai'` | 上海 / Shanghai | UTC+8 | Shanghai, Beijing |
296
- | `'Asia/Hong_Kong'` | 香港 / Hong Kong | UTC+8 | Hong Kong, Macau |
297
- | `'Asia/Singapore'` | 新加坡 / Singapore | UTC+8 | Singapore, Kuala Lumpur |
298
- | `'Asia/Tokyo'` | 东京 / Tokyo | UTC+9 | Tokyo, Seoul |
299
- | `'Asia/Seoul'` | 首尔 / Seoul | UTC+9 | Seoul, Pyongyang |
300
-
301
- ### Pacific
302
-
303
- | Timezone ID | Display Name | UTC Offset | Major Cities |
304
- | -------------------- | ----------------- | ------------- | -------------------- |
305
- | `'Australia/Sydney'` | 悉尼 / Sydney | UTC+10/UTC+11 | Sydney, Melbourne |
306
- | `'Pacific/Auckland'` | 奥克兰 / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
307
-
308
- ### Global
309
-
310
- | Timezone ID | Display Name | UTC Offset | Description |
311
- | ----------- | ------------ | ---------- | -------------------------- |
312
- | `'UTC'` | UTC / UTC | UTC+0 | Coordinated Universal Time |
313
-
314
- ## 📄 Data structure
315
-
316
- ```typescript
317
- interface ICandleViewDataPoint {
318
- time: number; // timestamp in seconds
319
- open: number;
320
- high: number;
321
- low: number;
322
- close: number;
323
- volume?: number;
324
- }
325
-
326
- export interface IStaticMarkData {
327
- time: number;
328
- type: string;
329
- data: {
330
- direction: string;
331
- text: string;
332
- fontSize?: number;
333
- textColor?: string;
334
- backgroundColor?: string;
335
- isCircular?: boolean;
336
- padding?: number;
337
- }[];
338
- }
339
- ```
340
-
341
- # 🌟 Core Features
342
-
343
- ## 📈 Supported Technical Indicators
344
-
345
- ### Main Chart Indicators
346
-
347
- - Moving Average (MA)
348
- - Exponential Moving Average (EMA)
349
- - Bollinger Bands
350
- - Ichimoku Cloud
351
- - Donchian Channel
352
- - Envelope
353
- - Volume Weighted Average Price (VWAP)
354
- - Heat Map
355
- - Market Profile
356
-
357
- ### Sub Chart Indicators
358
-
359
- - Relative Strength Index (RSI)
360
- - Moving Average Convergence Divergence (MACD)
361
- - Volume
362
- - Parabolic SAR
363
- - KDJ Indicator
364
- - Average True Range (ATR)
365
- - Stochastic Oscillator
366
- - Commodity Channel Index (CCI)
367
- - Bollinger Bands Width
368
- - Average Directional Index (ADX)
369
- - On Balance Volume (OBV)
370
-
371
- ## 🎨 Supported Drawing Tools
372
-
373
- ### Basic Tools
374
-
375
- - Pencil, Pen, Brush, Marker Pen, Eraser
376
- - Line Segment, Horizontal Line, Vertical Line
377
- - Arrow Line, Thick Arrow Line
378
-
379
- ### Channel Tools
380
-
381
- - Parallel Channel
382
- - Linear Regression Channel
383
- - Equidistant Channel
384
- - Disjoint Channel
385
-
386
- ### Fibonacci Tools
387
-
388
- - Fibonacci Retracement
389
- - Fibonacci Time Zones
390
- - Fibonacci Arc
391
- - Fibonacci Circle
392
- - Fibonacci Spiral
393
- - Fibonacci Fan
394
- - Fibonacci Channel
395
- - Fibonacci Price Extension
396
- - Fibonacci Time Extension
397
-
398
- ### Gann Tools
399
-
400
- - Gann Fan
401
- - Gann Box
402
- - Gann Rectangle
403
-
404
- ### Pattern Tools
405
-
406
- - Andrew Pitchfork
407
- - Enhanced Andrew Pitchfork
408
- - Schiff Pitchfork
409
- - XABCD Pattern
410
- - Head and Shoulders
411
- - ABCD Pattern
412
- - Triangle ABCD Pattern
413
-
414
- ### Elliott Wave
415
-
416
- - Elliott Impulse Wave
417
- - Elliott Corrective Wave
418
- - Elliott Triangle
419
- - Elliott Double Combination
420
- - Elliott Triple Combination
421
-
422
- ### Geometric Shapes
423
-
424
- - Rectangle, Circle, Ellipse, Triangle
425
- - Sector, Curve, Double Curve
426
-
427
- ### Annotation Tools
428
-
429
- - Text Annotation, Price Note
430
- - Bubble Box, Pin, Signpost
431
- - Price Label, Flag Mark
432
- - Image Insertion
433
-
434
- ### Range Tools
435
-
436
- - Time Range, Price Range
437
- - Time-Price Range
438
- - Heat Map
439
-
440
- ### Trading Tools
441
-
442
- - Long Position, Short Position
443
- - Mock K-line
444
-
445
- ## Supported Timeframes
446
-
447
- ### Second-based
448
-
449
- - 1s, 5s, 15s, 30s
450
-
451
- ### Minute-based
452
-
453
- - 1m, 3m, 5m, 15m
454
- - 30m, 45m
455
-
456
- ### Hour-based
457
-
458
- - 1h, 2h, 3h, 4h
459
- - 6h, 8h, 12h
460
-
461
- ### Day-based
462
-
463
- - 1d, 3d
464
-
465
- ### Week-based
466
-
467
- - 1w, 2w
468
-
469
- ### Month-based
470
-
471
- - 1M, 3M, 6M
472
-
473
- ## 🌍 Supported Timezones
474
-
475
- - New York (America/New_York)
476
- - Chicago (America/Chicago)
477
- - Denver (America/Denver)
478
- - Los Angeles (America/Los_Angeles)
479
- - Toronto (America/Toronto)
480
- - London (Europe/London)
481
- - Paris (Europe/Paris)
482
- - Frankfurt (Europe/Berlin)
483
- - Zurich (Europe/Zurich)
484
- - Moscow (Europe/Moscow)
485
- - Dubai (Asia/Dubai)
486
- - Karachi (Asia/Karachi)
487
- - Kolkata (Asia/Kolkata)
488
- - Shanghai (Asia/Shanghai)
489
- - Hong Kong (Asia/Hong_Kong)
490
- - Singapore (Asia/Singapore)
491
- - Tokyo (Asia/Tokyo)
492
- - Seoul (Asia/Seoul)
493
- - Sydney (Australia/Sydney)
494
- - Auckland (Pacific/Auckland)
495
- - UTC
496
-
497
- ## 🎯 Supported Chart Types
498
-
499
- - Candlestick Chart
500
- - Hollow Candlestick Chart
501
- - Bar Chart (OHLC)
502
- - BaseLine Chart
503
- - Line Chart
504
- - Area Chart
505
- - Step Line Chart
506
- - Heikin Ashi Chart
507
- - Histogram Chart
508
- - Line Break Chart
509
- - Mountain Chart
510
- - Baseline Area Chart
511
- - High Low Chart
512
- - HLCArea Chart
1
+ <p align="center">
2
+ <table align="center" border="0" cellpadding="0" cellspacing="0" style="border: none !important; border-collapse: collapse !important;">
3
+ <tr style="border: none !important;">
4
+ <td style="border: none !important; padding: 0;"><img src="./assets/logo/logo_50x50.jpeg" alt="CandleView Logo" width="50" height="50" style="border-radius:5px"></td>
5
+ <td style="border: none !important; padding: 0 0 0 10px;"><h1 style="margin: 0;">CandleView</h1></td>
6
+ </tr>
7
+ </table>
8
+ </p>
9
+ <h4 align="center">
10
+ An AI-powered data visualization and charting engine designed for the financial industry.
11
+ </h4>
12
+ <p align="center">
13
+ <a href="https://https://github.com/0xhappyboy/candleview/LICENSE"><img src="https://img.shields.io/badge/License-AGPL3.0-d1d1f6.svg?style=flat&labelColor=1C2C2E&color=BEC5C9&logo=googledocs&label=license&logoColor=BEC5C9" alt="License"></a>
14
+ </p>
15
+ <p align="center">
16
+ <a href="./README_zh-CN.md">简体中文</a> | <a href="./README.md">English</a>
17
+ </p>
18
+
19
+ # ⚙️ Install
20
+
21
+ ```bash
22
+ npm i candleview
23
+ ```
24
+
25
+ ```bash
26
+ yarn add candleview
27
+ ```
28
+
29
+ # 🚀 Quick Start
30
+
31
+ ```typescript
32
+ import { CandleView } from "./CandleView";
33
+
34
+ const App = () => {
35
+ return (
36
+ <CandleView
37
+ data={candleData}
38
+ title="Test"
39
+ theme={theme}
40
+ i18n={i18n}
41
+ markData={markData}
42
+ height={800}
43
+ leftpanel={true}
44
+ toppanel={true}
45
+ terminal={true}
46
+ />
47
+ );
48
+ };
49
+ ```
50
+
51
+ # AI Features
52
+
53
+ <img src="./assets/ai/ai-data-analysis.png" alt="CandleView AI" width="100%">
54
+
55
+ ## Supported Brands
56
+
57
+ - **OpenAI**: GPT series models
58
+ - **Aliyun (Alibaba Cloud)**: Tongyi Qianwen and other models
59
+ - **DeepSeek**: DeepSeek series models
60
+ - **Claude**: Anthropic models
61
+ - **Gemini**: Google models
62
+
63
+ ## Function Types
64
+
65
+ - **Chart Analysis**: AI analyzes current chart data, providing technical analysis, trend judgments, etc.
66
+ - **Predictive Analysis**: AI performs price predictions and risk assessments based on historical data
67
+
68
+ ## How to Use
69
+
70
+ 1. **Enable AI Panel**: Select the desired AI function from the left panel (e.g., "OpenAI Chart Analysis")
71
+ 2. **Select Model**: Choose an appropriate model from the available list in the AI chat box
72
+ 3. **Configure API Key**: Pre-configure API keys and models for respective brands in the `aiconfigs` property
73
+ 4. **Start Conversation**: Input questions or analysis requests to receive professional financial analysis from AI
74
+
75
+ ## Support Model
76
+
77
+ ### Aliyun
78
+
79
+ ```
80
+ qwen-turbo
81
+ qwen-plus
82
+ qwen-max
83
+ qwen-max-longcontext
84
+ qwen2.5-0.5b
85
+ qwen2.5-0.5b-instruct
86
+ qwen2.5-7b
87
+ qwen2.5-7b-instruct
88
+ qwen2.5-14b
89
+ qwen2.5-14b-instruct
90
+ qwen2.5-32b
91
+ qwen2.5-32b-instruct
92
+ qwen2.5-72b
93
+ qwen2.5-72b-instruct
94
+ qwen2.5-coder
95
+ qwen2.5-coder-7b
96
+ qwen2.5-coder-14b
97
+ qwen2.5-coder-32b
98
+ qwen-vl-lite
99
+ qwen-vl-plus
100
+ qwen-vl-max
101
+ qwen-audio-turbo
102
+ qwen-audio-chat
103
+ qwen-math-7b
104
+ llama2-7b-chat-v2
105
+ baichuan2-7b-chat-v1
106
+ qwen-financial
107
+ qwen-financial-14b
108
+ qwen-financial-32b
109
+ qwen-medical
110
+ qwen-medical-14b
111
+ qwen-medical-32b
112
+ qwen-omni
113
+ qwen-omni-pro'
114
+ ```
115
+
116
+ ### DeepSeek
117
+
118
+ ```
119
+ deepseek-chat
120
+ deepseek-chat-lite
121
+ deepseek-chat-pro
122
+ deepseek-chat-max
123
+ deepseek-coder
124
+ deepseek-coder-lite
125
+ deepseek-coder-pro
126
+ deepseek-math
127
+ deepseek-math-pro
128
+ deepseek-reasoner
129
+ deepseek-reasoner-pro
130
+ deepseek-vision
131
+ deepseek-vision-pro
132
+ deepseek-finance
133
+ deepseek-law
134
+ deepseek-medical
135
+ deepseek-research
136
+ deepseek-omni
137
+ deepseek-omni-pro
138
+ deepseek-llm
139
+ deepseek-llm-67b
140
+ deepseek-llm-131b'
141
+ ```
142
+
143
+ ### OpenAI
144
+
145
+ ```
146
+ gpt-4
147
+ gpt-4-0314
148
+ gpt-4-0613
149
+ gpt-4-32k
150
+ gpt-4-32k-0314
151
+ gpt-4-32k-0613
152
+ gpt-4-turbo
153
+ gpt-4-turbo-preview
154
+ gpt-4-turbo-2024-04-09
155
+ gpt-4o
156
+ gpt-4o-2024-05-13
157
+ gpt-4o-mini
158
+ gpt-4o-mini-2024-07-18
159
+ gpt-3.5-turbo
160
+ gpt-3.5-turbo-0125
161
+ gpt-3.5-turbo-1106
162
+ gpt-3.5-turbo-instruct
163
+ gpt-3.5-turbo-16k
164
+ gpt-3.5-turbo-16k-0613
165
+ davinci-002
166
+ babbage-002
167
+ text-davinci-003
168
+ text-davinci-002
169
+ text-davinci-001
170
+ text-curie-001
171
+ text-babbage-001
172
+ text-ada-001
173
+ text-embedding-ada-002
174
+ text-embedding-3-small
175
+ text-embedding-3-large
176
+ dall-e-2
177
+ dall-e-3
178
+ whisper-1
179
+ tts-1
180
+ tts-1-hd
181
+ text-moderation-latest
182
+ text-moderation-stable
183
+ ```
184
+
185
+ ## API Integration
186
+
187
+ The system integrates the following SDKs:
188
+
189
+ - `ohlcv-ai` library provides official API calls for OpenAI, Aliyun, DeepSeek, and others.
190
+
191
+ ## Configuration Example
192
+
193
+ ```javascript
194
+ <CandleView
195
+ data={candleData}
196
+ title="Test"
197
+ theme={theme}
198
+ i18n={i18n}
199
+ markData={a}
200
+ height={800}
201
+ leftpanel={true}
202
+ toppanel={true}
203
+ terminal={true}
204
+ ai={true}
205
+ aiconfigs={[
206
+ // Simultaneously configure different models from multiple AI brands.
207
+ {
208
+ apiKey: "Your API key.....",
209
+ brand: AIBrandType.Aliyun,
210
+ model: "qwen-turbo",
211
+ },
212
+ {
213
+ apiKey: "Your API key.....",
214
+ brand: AIBrandType.Aliyun,
215
+ model: "qwen-omni",
216
+ },
217
+ {
218
+ apiKey: "Your API key.....",
219
+ brand: AIBrandType.OpenAI,
220
+ model: "gpt-4",
221
+ },
222
+ {
223
+ apiKey: "Your API key.....",
224
+ brand: AIBrandType.OpenAI,
225
+ model: "gpt-3.5-turbo",
226
+ },
227
+ ]}
228
+ />
229
+ ```
230
+
231
+ # 💻 Command System
232
+
233
+ <img src="./assets/command-system.png" width="100%">
234
+
235
+ ## Supported Commands
236
+
237
+ ### Basic Commands
238
+
239
+ | Command | Description | Example |
240
+ | -------------------- | ------------------------------------------ | ------------ |
241
+ | `clear` / `cls` | Clear terminal output | `clear` |
242
+ | `help` | Show all available commands and indicators | `help` |
243
+ | `theme [light dark]` | Switch theme | `theme dark` |
244
+ | `history` | Show recently executed command history | `history` |
245
+
246
+ ### Indicator Operations
247
+
248
+ | Command | Description | Example |
249
+ | ------------------- | ------------------------------------------- | ----------- |
250
+ | `open [indicator]` | Open specified main or sub chart indicator | `open ma` |
251
+ | `close [indicator]` | Close specified main or sub chart indicator | `close rsi` |
252
+
253
+ ### Main Chart Indicators
254
+
255
+ - **ma** - Moving Average
256
+ - **ema** - Exponential Moving Average
257
+ - **bollinger** - Bollinger Bands
258
+ - **ichimoku** - Ichimoku Cloud
259
+ - **donchian** - Donchian Channel
260
+ - **envelope** - Envelope
261
+ - **vwap** - Volume Weighted Average Price
262
+ - **heatmap** - Heatmap
263
+ - **marketprofile** - Market Profile
264
+
265
+ ### Sub Chart Indicators
266
+
267
+ - **rsi** - Relative Strength Index
268
+ - **macd** - Moving Average Convergence Divergence
269
+ - **volume** - Volume
270
+ - **sar** - Parabolic SAR
271
+ - **kdj** - KDJ (Stochastic Oscillator)
272
+ - **atr** - Average True Range
273
+ - **stochastic** - Stochastic Oscillator
274
+ - **cci** - Commodity Channel Index
275
+ - **bbwidth** - Bollinger Bands Width
276
+ - **adx** - Average Directional Index
277
+ - **obv** - On Balance Volume
278
+
279
+ ### Keyboard Shortcuts
280
+
281
+ | Shortcut | Function |
282
+ | ---------- | -------------------------------------- |
283
+ | `↑` / `↓` | Navigate command history |
284
+ | `Tab` | Auto-complete current suggestion |
285
+ | `Enter` | Execute command or confirm completion |
286
+ | `Ctrl + L` | Clear input field |
287
+ | `Ctrl + C` | Cancel current operation |
288
+ | `Esc` | Clear input field and hide suggestions |
289
+
290
+ ### Usage Examples
291
+
292
+ ```bash
293
+ $ open ma # Open Moving Average indicator
294
+ $ close bollinger # Close Bollinger Bands indicator
295
+ $ theme light # Switch to light theme
296
+ $ history # View recent command history
297
+ ```
298
+
299
+ # Preview
300
+
301
+ ## Draw Graphics
302
+
303
+ ### Fibonacci
304
+
305
+ <table>
306
+ <tr>
307
+ <td align="left">
308
+ <h4>Arc</h4>
309
+ </td>
310
+ <td align="left">
311
+ <h4>Channel</h4>
312
+ </td>
313
+ <td align="left">
314
+ <h4>Circle</h4>
315
+ </td>
316
+ </tr>
317
+ <tr>
318
+ <td align="center"><img src="./assets/fibonacci/fibonacci-arc.png" width="400"></td>
319
+ <td align="center"><img src="./assets/fibonacci/fibonacci-channel.png" width="400"></td>
320
+ <td align="center"><img src="./assets/fibonacci/fibonacci-circle.png" width="400"></td>
321
+ </tr>
322
+ <tr>
323
+ <td align="left">
324
+ <h4>Fan</h4>
325
+ </td>
326
+ <td align="left">
327
+ <h4>Price Extension</h4>
328
+ </td>
329
+ <td align="left">
330
+ <h4>Retracement</h4>
331
+ </td>
332
+ </tr>
333
+ <tr>
334
+ <td align="center"><img src="./assets/fibonacci/fibonacci-fan.png" width="400"></td>
335
+ <td align="center"><img src="./assets/fibonacci/fibonacci-price-extension.png" width="400"></td>
336
+ <td align="center"><img src="./assets/fibonacci/fibonacci-retracement.png" width="400"></td>
337
+ </tr>
338
+ <tr>
339
+ <td align="left">
340
+ <h4>Spiral</h4>
341
+ </td>
342
+ <td align="left">
343
+ <h4>Time Expansion</h4>
344
+ </td>
345
+ <td align="left">
346
+ <h4>Time Zoon</h4>
347
+ </td>
348
+ </tr>
349
+ <tr>
350
+ <td align="center"><img src="./assets/fibonacci/fibonacci-spiral.png" width="400"></td>
351
+ <td align="center"><img src="./assets/fibonacci/fibonacci-time-expansion.png" width="400"></td>
352
+ <td align="center"><img src="./assets/fibonacci/fibonacci-time-zoon.png" width="400"></td>
353
+ </tr>
354
+ <tr>
355
+ <td align="left">
356
+ <h4>Wedge</h4>
357
+ </td>
358
+ <td align="left">
359
+ </td>
360
+ <td align="left">
361
+ </td>
362
+ </tr>
363
+ <tr>
364
+ <td align="center"><img src="./assets/fibonacci/fibonacci-wedge.png" width="400"></td>
365
+ </tr>
366
+ </table>
367
+
368
+ ### Gann
369
+
370
+ <table>
371
+ <tr>
372
+ <td align="left">
373
+ <h4>Box</h4>
374
+ </td>
375
+ <td align="left">
376
+ <h4>Fan</h4>
377
+ </td>
378
+ <td align="left">
379
+ <h4>Rectangle</h4>
380
+ </td>
381
+ </tr>
382
+ <tr>
383
+ <td align="center"><img src="./assets/gann/gann-box.png" width="400"></td>
384
+ <td align="center"><img src="./assets/gann/gann-fan.png" width="400"></td>
385
+ <td align="center"><img src="./assets/gann//gann-rectangle.png" width="400"></td>
386
+ </tr>
387
+ </table>
388
+
389
+ ### Mark
390
+
391
+ <img src="./assets/mark.png" width="100%">
392
+
393
+ ## Theme
394
+
395
+ <table>
396
+ <tr>
397
+ <td align="left">
398
+ <h4>Dark</h4>
399
+ </td>
400
+ <td align="left">
401
+ <h4>Light</h4>
402
+ </td>
403
+ </tr>
404
+ <tr>
405
+ <td align="center"><img src="./assets/preview_theme_dark.png" width="400"></td>
406
+ <td align="center"><img src="./assets/preview_theme_light.png" width="400"></td>
407
+ </tr>
408
+ </table>
409
+
410
+ ## I18n
411
+
412
+ <table>
413
+ <tr>
414
+ <td align="left">
415
+ <h4>En</h4>
416
+ </td>
417
+ <td align="left">
418
+ <h4>zh-CN</h4>
419
+ </td>
420
+ </tr>
421
+ <tr>
422
+ <td align="center"><img src="./assets/preview_i18n_en.png" width="400"></td>
423
+ <td align="center"><img src="./assets/preview_i18n_zh-CN.png" width="400"></td>
424
+ </tr>
425
+ </table>
426
+
427
+ # 🔧 Configuration Options
428
+
429
+ ## Props
430
+
431
+ | Parameter | Type | Default | Description | Required |
432
+ | ------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------- | ---------------------------------------- | -------- |
433
+ | `theme` | `'dark' \| 'light'` | `'dark'` | Theme mode | No |
434
+ | `i18n` | `'en' \| 'zh-cn'` | `'zh-cn'` | Language setting | No |
435
+ | `height` | `number \| string` | `500` | Chart height (px or percentage) | No |
436
+ | `title` | `string` | `''` | Chart title displayed on the chart | Yes |
437
+ | `showToolbar` | `boolean` | `true` | Show top toolbar | No |
438
+ | `showLeftPanel` | `boolean` | `true` | Show left drawing tools panel | No |
439
+ | `showTopPanel` | `boolean` | `true` | Show top settings panel | No |
440
+ | `showIndicators` | `boolean` | `true` | Show indicators panel | No |
441
+ | `timeframe` | `string` | `'1d'` | Chart timeframe (e.g., '1m', '1h', '1d') | No |
442
+ | `timezone` | `string` | `'Asia/Shanghai'` | Timezone for data display | No |
443
+ | `data` | `ICandleViewDataPoint[]` | `[]` | K-line data array | No |
444
+ | `url` | `string` | `''` | URL to fetch data from | No |
445
+ | `markData` | `IStaticMarkData[]` | `[]` | Pre-drawn marks data | No |
446
+ | `handleScreenshotCapture` | `(imageData: { dataUrl: string; blob: Blob; width: number; height: number; timestamp: number }) => void` | `undefined` | Callback for screenshot capture | No |
447
+
448
+ ## ⏰ Supported Timeframes
449
+
450
+ ### Second-based Timeframes
451
+
452
+ | Value | Display Name | Description |
453
+ | ------- | ------------------ | ----------- |
454
+ | `'1S'` | 1 秒 / 1 Second | 1 second |
455
+ | `'5S'` | 5 秒 / 5 Seconds | 5 seconds |
456
+ | `'15S'` | 15 秒 / 15 Seconds | 15 seconds |
457
+ | `'30S'` | 30 秒 / 30 Seconds | 30 seconds |
458
+
459
+ ### Minute-based Timeframes
460
+
461
+ | Value | Display Name | Description |
462
+ | ------- | ------------------ | ----------- |
463
+ | `'1M'` | 1 分 / 1 Minute | 1 minute |
464
+ | `'3M'` | 3 分 / 3 Minutes | 3 minutes |
465
+ | `'5M'` | 5 分 / 5 Minutes | 5 minutes |
466
+ | `'15M'` | 15 分 / 15 Minutes | 15 minutes |
467
+ | `'30M'` | 30 分 / 30 Minutes | 30 minutes |
468
+ | `'45M'` | 45 分 / 45 Minutes | 45 minutes |
469
+
470
+ ### Hour-based Timeframes
471
+
472
+ | Value | Display Name | Description |
473
+ | ------- | ------------------ | ----------- |
474
+ | `'1H'` | 1 小时 / 1 Hour | 1 hour |
475
+ | `'2H'` | 2 小时 / 2 Hours | 2 hours |
476
+ | `'3H'` | 3 小时 / 3 Hours | 3 hours |
477
+ | `'4H'` | 4 小时 / 4 Hours | 4 hours |
478
+ | `'6H'` | 6 小时 / 6 Hours | 6 hours |
479
+ | `'8H'` | 8 小时 / 8 Hours | 8 hours |
480
+ | `'12H'` | 12 小时 / 12 Hours | 12 hours |
481
+
482
+ ### Day-based Timeframes
483
+
484
+ | Value | Display Name | Description |
485
+ | ------ | ------------- | ----------- |
486
+ | `'1D'` | 1 日 / 1 Day | 1 day |
487
+ | `'3D'` | 3 日 / 3 Days | 3 days |
488
+
489
+ ### Week-based Timeframes
490
+
491
+ | Value | Display Name | Description |
492
+ | ------ | -------------- | ----------- |
493
+ | `'1W'` | 1 周 / 1 Week | 1 week |
494
+ | `'2W'` | 2 周 / 2 Weeks | 2 weeks |
495
+
496
+ ### Month-based Timeframes
497
+
498
+ | Value | Display Name | Description |
499
+ | -------- | --------------- | ----------- |
500
+ | `'1MON'` | 1 月 / 1 Month | 1 month |
501
+ | `'3MON'` | 3 月 / 3 Months | 3 months |
502
+ | `'6MON'` | 6 月 / 6 Months | 6 months |
503
+
504
+ ## 🌍 Supported Timezones
505
+
506
+ ### Americas
507
+
508
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
509
+ | ----------------------- | -------------------- | ----------- | -------------------------- |
510
+ | `'America/New_York'` | 纽约 / New York | UTC-5/UTC-4 | New York, Washington DC |
511
+ | `'America/Chicago'` | 芝加哥 / Chicago | UTC-6/UTC-5 | Chicago, Dallas |
512
+ | `'America/Denver'` | 丹佛 / Denver | UTC-7/UTC-6 | Denver, Phoenix |
513
+ | `'America/Los_Angeles'` | 洛杉矶 / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
514
+ | `'America/Toronto'` | 多伦多 / Toronto | UTC-5/UTC-4 | Toronto, Montreal |
515
+
516
+ ### Europe
517
+
518
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
519
+ | ----------------- | -------------------- | ----------- | -------------------- |
520
+ | `'Europe/London'` | 伦敦 / London | UTC+0/UTC+1 | London, Dublin |
521
+ | `'Europe/Paris'` | 巴黎 / Paris | UTC+1/UTC+2 | Paris, Berlin |
522
+ | `'Europe/Berlin'` | 法兰克福 / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
523
+ | `'Europe/Zurich'` | 苏黎世 / Zurich | UTC+1/UTC+2 | Zurich, Vienna |
524
+ | `'Europe/Moscow'` | 莫斯科 / Moscow | UTC+3 | Moscow, Istanbul |
525
+
526
+ ### Asia
527
+
528
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
529
+ | ------------------ | ------------------ | ---------- | ----------------------- |
530
+ | `'Asia/Dubai'` | 迪拜 / Dubai | UTC+4 | Dubai, Abu Dhabi |
531
+ | `'Asia/Karachi'` | 卡拉奇 / Karachi | UTC+5 | Karachi, Lahore |
532
+ | `'Asia/Kolkata'` | 加尔各答 / Kolkata | UTC+5:30 | Kolkata, Mumbai |
533
+ | `'Asia/Shanghai'` | 上海 / Shanghai | UTC+8 | Shanghai, Beijing |
534
+ | `'Asia/Hong_Kong'` | 香港 / Hong Kong | UTC+8 | Hong Kong, Macau |
535
+ | `'Asia/Singapore'` | 新加坡 / Singapore | UTC+8 | Singapore, Kuala Lumpur |
536
+ | `'Asia/Tokyo'` | 东京 / Tokyo | UTC+9 | Tokyo, Seoul |
537
+ | `'Asia/Seoul'` | 首尔 / Seoul | UTC+9 | Seoul, Pyongyang |
538
+
539
+ ### Pacific
540
+
541
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
542
+ | -------------------- | ----------------- | ------------- | -------------------- |
543
+ | `'Australia/Sydney'` | 悉尼 / Sydney | UTC+10/UTC+11 | Sydney, Melbourne |
544
+ | `'Pacific/Auckland'` | 奥克兰 / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
545
+
546
+ ### Global
547
+
548
+ | Timezone ID | Display Name | UTC Offset | Description |
549
+ | ----------- | ------------ | ---------- | -------------------------- |
550
+ | `'UTC'` | UTC / UTC | UTC+0 | Coordinated Universal Time |
551
+
552
+ ## 📄 Data structure
553
+
554
+ ```typescript
555
+ interface ICandleViewDataPoint {
556
+ time: number; // timestamp in seconds
557
+ open: number;
558
+ high: number;
559
+ low: number;
560
+ close: number;
561
+ volume?: number;
562
+ }
563
+
564
+ export interface IStaticMarkData {
565
+ time: number;
566
+ type: string;
567
+ data: {
568
+ direction: string;
569
+ text: string;
570
+ fontSize?: number;
571
+ textColor?: string;
572
+ backgroundColor?: string;
573
+ isCircular?: boolean;
574
+ padding?: number;
575
+ }[];
576
+ }
577
+ ```
578
+
579
+ # 🌟 Core Features
580
+
581
+ ## 📈 Supported Technical Indicators
582
+
583
+ ### Main Chart Indicators
584
+
585
+ - Moving Average (MA)
586
+ - Exponential Moving Average (EMA)
587
+ - Bollinger Bands
588
+ - Ichimoku Cloud
589
+ - Donchian Channel
590
+ - Envelope
591
+ - Volume Weighted Average Price (VWAP)
592
+ - Heat Map
593
+ - Market Profile
594
+
595
+ ### Sub Chart Indicators
596
+
597
+ - Relative Strength Index (RSI)
598
+ - Moving Average Convergence Divergence (MACD)
599
+ - Volume
600
+ - Parabolic SAR
601
+ - KDJ Indicator
602
+ - Average True Range (ATR)
603
+ - Stochastic Oscillator
604
+ - Commodity Channel Index (CCI)
605
+ - Bollinger Bands Width
606
+ - Average Directional Index (ADX)
607
+ - On Balance Volume (OBV)
608
+
609
+ ## 🎨 Supported Drawing Tools
610
+
611
+ ### Basic Tools
612
+
613
+ - Pencil, Pen, Brush, Marker Pen, Eraser
614
+ - Line Segment, Horizontal Line, Vertical Line
615
+ - Arrow Line, Thick Arrow Line
616
+
617
+ ### Channel Tools
618
+
619
+ - Parallel Channel
620
+ - Linear Regression Channel
621
+ - Equidistant Channel
622
+ - Disjoint Channel
623
+
624
+ ### Fibonacci Tools
625
+
626
+ - Fibonacci Retracement
627
+ - Fibonacci Time Zones
628
+ - Fibonacci Arc
629
+ - Fibonacci Circle
630
+ - Fibonacci Spiral
631
+ - Fibonacci Fan
632
+ - Fibonacci Channel
633
+ - Fibonacci Price Extension
634
+ - Fibonacci Time Extension
635
+
636
+ ### Gann Tools
637
+
638
+ - Gann Fan
639
+ - Gann Box
640
+ - Gann Rectangle
641
+
642
+ ### Pattern Tools
643
+
644
+ - Andrew Pitchfork
645
+ - Enhanced Andrew Pitchfork
646
+ - Schiff Pitchfork
647
+ - XABCD Pattern
648
+ - Head and Shoulders
649
+ - ABCD Pattern
650
+ - Triangle ABCD Pattern
651
+
652
+ ### Elliott Wave
653
+
654
+ - Elliott Impulse Wave
655
+ - Elliott Corrective Wave
656
+ - Elliott Triangle
657
+ - Elliott Double Combination
658
+ - Elliott Triple Combination
659
+
660
+ ### Geometric Shapes
661
+
662
+ - Rectangle, Circle, Ellipse, Triangle
663
+ - Sector, Curve, Double Curve
664
+
665
+ ### Annotation Tools
666
+
667
+ - Text Annotation, Price Note
668
+ - Bubble Box, Pin, Signpost
669
+ - Price Label, Flag Mark
670
+ - Image Insertion
671
+
672
+ ### Range Tools
673
+
674
+ - Time Range, Price Range
675
+ - Time-Price Range
676
+ - Heat Map
677
+
678
+ ### Trading Tools
679
+
680
+ - Long Position, Short Position
681
+ - Mock K-line
682
+
683
+ ## ⏰ Supported Timeframes
684
+
685
+ ### Second-based
686
+
687
+ - 1s, 5s, 15s, 30s
688
+
689
+ ### Minute-based
690
+
691
+ - 1m, 3m, 5m, 15m
692
+ - 30m, 45m
693
+
694
+ ### Hour-based
695
+
696
+ - 1h, 2h, 3h, 4h
697
+ - 6h, 8h, 12h
698
+
699
+ ### Day-based
700
+
701
+ - 1d, 3d
702
+
703
+ ### Week-based
704
+
705
+ - 1w, 2w
706
+
707
+ ### Month-based
708
+
709
+ - 1M, 3M, 6M
710
+
711
+ ## 🌍 Supported Timezones
712
+
713
+ - New York (America/New_York)
714
+ - Chicago (America/Chicago)
715
+ - Denver (America/Denver)
716
+ - Los Angeles (America/Los_Angeles)
717
+ - Toronto (America/Toronto)
718
+ - London (Europe/London)
719
+ - Paris (Europe/Paris)
720
+ - Frankfurt (Europe/Berlin)
721
+ - Zurich (Europe/Zurich)
722
+ - Moscow (Europe/Moscow)
723
+ - Dubai (Asia/Dubai)
724
+ - Karachi (Asia/Karachi)
725
+ - Kolkata (Asia/Kolkata)
726
+ - Shanghai (Asia/Shanghai)
727
+ - Hong Kong (Asia/Hong_Kong)
728
+ - Singapore (Asia/Singapore)
729
+ - Tokyo (Asia/Tokyo)
730
+ - Seoul (Asia/Seoul)
731
+ - Sydney (Australia/Sydney)
732
+ - Auckland (Pacific/Auckland)
733
+ - UTC
734
+
735
+ ## 🎯 Supported Chart Types
736
+
737
+ - Candlestick Chart
738
+ - Hollow Candlestick Chart
739
+ - Bar Chart (OHLC)
740
+ - BaseLine Chart
741
+ - Line Chart
742
+ - Area Chart
743
+ - Step Line Chart
744
+ - Heikin Ashi Chart
745
+ - Histogram Chart
746
+ - Line Break Chart
747
+ - Mountain Chart
748
+ - Baseline Area Chart
749
+ - High Low Chart
750
+ - HLCArea Chart