candleview 1.1.1 â 1.1.2
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 +507 -507
- package/package.json +82 -83
package/README.md
CHANGED
|
@@ -1,507 +1,507 @@
|
|
|
1
|
-
<h1 align="center">
|
|
2
|
-
đ CandleView
|
|
3
|
-
</h1>
|
|
4
|
-
<h4 align="center">
|
|
5
|
-
A data visualization charts and draw graph engine for the financial industry.
|
|
6
|
-
</h4>
|
|
7
|
-
<p align="center">
|
|
8
|
-
<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>
|
|
9
|
-
</p>
|
|
10
|
-
<p align="center">
|
|
11
|
-
<a href="./README_zh-CN.md">įŽäŊä¸æ</a> | <a href="./README.md">English</a>
|
|
12
|
-
</p>
|
|
13
|
-
|
|
14
|
-
# âī¸ Install
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
npm i candleview
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
yarn add candleview
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
# đ Quick Start
|
|
25
|
-
|
|
26
|
-
```typescript
|
|
27
|
-
import { CandleView } from "./CandleView";
|
|
28
|
-
|
|
29
|
-
const App = () => {
|
|
30
|
-
return (
|
|
31
|
-
<CandleView
|
|
32
|
-
title="BTC/USDT"
|
|
33
|
-
height={600}
|
|
34
|
-
theme="dark"
|
|
35
|
-
i18n="en"
|
|
36
|
-
showToolbar={true}
|
|
37
|
-
showLeftPanel={true}
|
|
38
|
-
showTopPanel={true}
|
|
39
|
-
timeframe="1d"
|
|
40
|
-
timezone="America/New_York"
|
|
41
|
-
data={klineData}
|
|
42
|
-
/>
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
# Preview
|
|
48
|
-
|
|
49
|
-
## Draw Graphics
|
|
50
|
-
|
|
51
|
-
### Fibonacci
|
|
52
|
-
|
|
53
|
-
<table>
|
|
54
|
-
<tr>
|
|
55
|
-
<td align="left">
|
|
56
|
-
<h4>Arc</h4>
|
|
57
|
-
</td>
|
|
58
|
-
<td align="left">
|
|
59
|
-
<h4>Channel</h4>
|
|
60
|
-
</td>
|
|
61
|
-
<td align="left">
|
|
62
|
-
<h4>Circle</h4>
|
|
63
|
-
</td>
|
|
64
|
-
</tr>
|
|
65
|
-
<tr>
|
|
66
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-arc.png" width="400"></td>
|
|
67
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-channel.png" width="400"></td>
|
|
68
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-circle.png" width="400"></td>
|
|
69
|
-
</tr>
|
|
70
|
-
<tr>
|
|
71
|
-
<td align="left">
|
|
72
|
-
<h4>Fan</h4>
|
|
73
|
-
</td>
|
|
74
|
-
<td align="left">
|
|
75
|
-
<h4>Price Extension</h4>
|
|
76
|
-
</td>
|
|
77
|
-
<td align="left">
|
|
78
|
-
<h4>Retracement</h4>
|
|
79
|
-
</td>
|
|
80
|
-
</tr>
|
|
81
|
-
<tr>
|
|
82
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-fan.png" width="400"></td>
|
|
83
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-price-extension.png" width="400"></td>
|
|
84
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-retracement.png" width="400"></td>
|
|
85
|
-
</tr>
|
|
86
|
-
<tr>
|
|
87
|
-
<td align="left">
|
|
88
|
-
<h4>Spiral</h4>
|
|
89
|
-
</td>
|
|
90
|
-
<td align="left">
|
|
91
|
-
<h4>Time Expansion</h4>
|
|
92
|
-
</td>
|
|
93
|
-
<td align="left">
|
|
94
|
-
<h4>Time Zoon</h4>
|
|
95
|
-
</td>
|
|
96
|
-
</tr>
|
|
97
|
-
<tr>
|
|
98
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-spiral.png" width="400"></td>
|
|
99
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-time-expansion.png" width="400"></td>
|
|
100
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-time-zoon.png" width="400"></td>
|
|
101
|
-
</tr>
|
|
102
|
-
<tr>
|
|
103
|
-
<td align="left">
|
|
104
|
-
<h4>Wedge</h4>
|
|
105
|
-
</td>
|
|
106
|
-
<td align="left">
|
|
107
|
-
</td>
|
|
108
|
-
<td align="left">
|
|
109
|
-
</td>
|
|
110
|
-
</tr>
|
|
111
|
-
<tr>
|
|
112
|
-
<td align="center"><img src="./assets/fibonacci/fibonacci-wedge.png" width="400"></td>
|
|
113
|
-
</tr>
|
|
114
|
-
</table>
|
|
115
|
-
|
|
116
|
-
### Gann
|
|
117
|
-
|
|
118
|
-
<table>
|
|
119
|
-
<tr>
|
|
120
|
-
<td align="left">
|
|
121
|
-
<h4>Box</h4>
|
|
122
|
-
</td>
|
|
123
|
-
<td align="left">
|
|
124
|
-
<h4>Fan</h4>
|
|
125
|
-
</td>
|
|
126
|
-
<td align="left">
|
|
127
|
-
<h4>Rectangle</h4>
|
|
128
|
-
</td>
|
|
129
|
-
</tr>
|
|
130
|
-
<tr>
|
|
131
|
-
<td align="center"><img src="./assets/gann/gann-box.png" width="400"></td>
|
|
132
|
-
<td align="center"><img src="./assets/gann/gann-fan.png" width="400"></td>
|
|
133
|
-
<td align="center"><img src="./assets/gann//gann-rectangle.png" width="400"></td>
|
|
134
|
-
</tr>
|
|
135
|
-
</table>
|
|
136
|
-
|
|
137
|
-
### Mark
|
|
138
|
-
|
|
139
|
-
<table>
|
|
140
|
-
<tr>
|
|
141
|
-
<td align="left">
|
|
142
|
-
<h4>Mark</h4>
|
|
143
|
-
</td>
|
|
144
|
-
</tr>
|
|
145
|
-
<tr>
|
|
146
|
-
<td align="center"><img src="./assets/mark.png" width="400"></td>
|
|
147
|
-
</tr>
|
|
148
|
-
</table>
|
|
149
|
-
|
|
150
|
-
## Theme
|
|
151
|
-
|
|
152
|
-
<table>
|
|
153
|
-
<tr>
|
|
154
|
-
<td align="left">
|
|
155
|
-
<h4>Dark</h4>
|
|
156
|
-
</td>
|
|
157
|
-
<td align="left">
|
|
158
|
-
<h4>Light</h4>
|
|
159
|
-
</td>
|
|
160
|
-
</tr>
|
|
161
|
-
<tr>
|
|
162
|
-
<td align="center"><img src="./assets/preview_theme_dark.png" width="400"></td>
|
|
163
|
-
<td align="center"><img src="./assets/preview_theme_light.png" width="400"></td>
|
|
164
|
-
</tr>
|
|
165
|
-
</table>
|
|
166
|
-
|
|
167
|
-
## I18n
|
|
168
|
-
|
|
169
|
-
<table>
|
|
170
|
-
<tr>
|
|
171
|
-
<td align="left">
|
|
172
|
-
<h4>En</h4>
|
|
173
|
-
</td>
|
|
174
|
-
<td align="left">
|
|
175
|
-
<h4>zh-CN</h4>
|
|
176
|
-
</td>
|
|
177
|
-
</tr>
|
|
178
|
-
<tr>
|
|
179
|
-
<td align="center"><img src="./assets/preview_i18n_en.png" width="400"></td>
|
|
180
|
-
<td align="center"><img src="./assets/preview_i18n_zh-CN.png" width="400"></td>
|
|
181
|
-
</tr>
|
|
182
|
-
</table>
|
|
183
|
-
|
|
184
|
-
# đ§ Configuration Options
|
|
185
|
-
|
|
186
|
-
## Props
|
|
187
|
-
|
|
188
|
-
| Parameter | Type | Default | Description | Required |
|
|
189
|
-
| ------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------- | ---------------------------------------- | -------- |
|
|
190
|
-
| `theme` | `'dark' \| 'light'` | `'dark'` | Theme mode | No |
|
|
191
|
-
| `i18n` | `'en' \| 'zh-cn'` | `'zh-cn'` | Language setting | No |
|
|
192
|
-
| `height` | `number \| string` | `500` | Chart height (px or percentage) | No |
|
|
193
|
-
| `title` | `string` | `''` | Chart title displayed on the chart | Yes |
|
|
194
|
-
| `showToolbar` | `boolean` | `true` | Show top toolbar | No |
|
|
195
|
-
| `showLeftPanel` | `boolean` | `true` | Show left drawing tools panel | No |
|
|
196
|
-
| `showTopPanel` | `boolean` | `true` | Show top settings panel | No |
|
|
197
|
-
| `showIndicators` | `boolean` | `true` | Show indicators panel | No |
|
|
198
|
-
| `timeframe` | `string` | `'1d'` | Chart timeframe (e.g., '1m', '1h', '1d') | No |
|
|
199
|
-
| `timezone` | `string` | `'Asia/Shanghai'` | Timezone for data display | No |
|
|
200
|
-
| `data` | `ICandleViewDataPoint[]` | `[]` | K-line data array | No |
|
|
201
|
-
| `url` | `string` | `''` | URL to fetch data from | No |
|
|
202
|
-
| `markData` | `IStaticMarkData[]` | `[]` | Pre-drawn marks data | No |
|
|
203
|
-
| `handleScreenshotCapture` | `(imageData: { dataUrl: string; blob: Blob; width: number; height: number; timestamp: number }) => void` | `undefined` | Callback for screenshot capture | No |
|
|
204
|
-
|
|
205
|
-
## â° Supported Timeframes
|
|
206
|
-
|
|
207
|
-
### Second-based Timeframes
|
|
208
|
-
|
|
209
|
-
| Value | Display Name | Description |
|
|
210
|
-
| ------- | ------------------ | ----------- |
|
|
211
|
-
| `'1S'` | 1 į§ / 1 Second | 1 second |
|
|
212
|
-
| `'5S'` | 5 į§ / 5 Seconds | 5 seconds |
|
|
213
|
-
| `'15S'` | 15 į§ / 15 Seconds | 15 seconds |
|
|
214
|
-
| `'30S'` | 30 į§ / 30 Seconds | 30 seconds |
|
|
215
|
-
|
|
216
|
-
### Minute-based Timeframes
|
|
217
|
-
|
|
218
|
-
| Value | Display Name | Description |
|
|
219
|
-
| ------- | ------------------ | ----------- |
|
|
220
|
-
| `'1M'` | 1 å / 1 Minute | 1 minute |
|
|
221
|
-
| `'3M'` | 3 å / 3 Minutes | 3 minutes |
|
|
222
|
-
| `'5M'` | 5 å / 5 Minutes | 5 minutes |
|
|
223
|
-
| `'15M'` | 15 å / 15 Minutes | 15 minutes |
|
|
224
|
-
| `'30M'` | 30 å / 30 Minutes | 30 minutes |
|
|
225
|
-
| `'45M'` | 45 å / 45 Minutes | 45 minutes |
|
|
226
|
-
|
|
227
|
-
### Hour-based Timeframes
|
|
228
|
-
|
|
229
|
-
| Value | Display Name | Description |
|
|
230
|
-
| ------- | ------------------ | ----------- |
|
|
231
|
-
| `'1H'` | 1 å°æļ / 1 Hour | 1 hour |
|
|
232
|
-
| `'2H'` | 2 å°æļ / 2 Hours | 2 hours |
|
|
233
|
-
| `'3H'` | 3 å°æļ / 3 Hours | 3 hours |
|
|
234
|
-
| `'4H'` | 4 å°æļ / 4 Hours | 4 hours |
|
|
235
|
-
| `'6H'` | 6 å°æļ / 6 Hours | 6 hours |
|
|
236
|
-
| `'8H'` | 8 å°æļ / 8 Hours | 8 hours |
|
|
237
|
-
| `'12H'` | 12 å°æļ / 12 Hours | 12 hours |
|
|
238
|
-
|
|
239
|
-
### Day-based Timeframes
|
|
240
|
-
|
|
241
|
-
| Value | Display Name | Description |
|
|
242
|
-
| ------ | ------------- | ----------- |
|
|
243
|
-
| `'1D'` | 1 æĨ / 1 Day | 1 day |
|
|
244
|
-
| `'3D'` | 3 æĨ / 3 Days | 3 days |
|
|
245
|
-
|
|
246
|
-
### Week-based Timeframes
|
|
247
|
-
|
|
248
|
-
| Value | Display Name | Description |
|
|
249
|
-
| ------ | -------------- | ----------- |
|
|
250
|
-
| `'1W'` | 1 å¨ / 1 Week | 1 week |
|
|
251
|
-
| `'2W'` | 2 å¨ / 2 Weeks | 2 weeks |
|
|
252
|
-
|
|
253
|
-
### Month-based Timeframes
|
|
254
|
-
|
|
255
|
-
| Value | Display Name | Description |
|
|
256
|
-
| -------- | --------------- | ----------- |
|
|
257
|
-
| `'1MON'` | 1 æ / 1 Month | 1 month |
|
|
258
|
-
| `'3MON'` | 3 æ / 3 Months | 3 months |
|
|
259
|
-
| `'6MON'` | 6 æ / 6 Months | 6 months |
|
|
260
|
-
|
|
261
|
-
## đ Supported Timezones
|
|
262
|
-
|
|
263
|
-
### Americas
|
|
264
|
-
|
|
265
|
-
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
266
|
-
| ----------------------- | -------------------- | ----------- | -------------------------- |
|
|
267
|
-
| `'America/New_York'` | įēŊįēĻ / New York | UTC-5/UTC-4 | New York, Washington DC |
|
|
268
|
-
| `'America/Chicago'` | čå åĨ / Chicago | UTC-6/UTC-5 | Chicago, Dallas |
|
|
269
|
-
| `'America/Denver'` | 业äŊ / Denver | UTC-7/UTC-6 | Denver, Phoenix |
|
|
270
|
-
| `'America/Los_Angeles'` | æ´æįļ / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
|
|
271
|
-
| `'America/Toronto'` | å¤äŧĻå¤ / Toronto | UTC-5/UTC-4 | Toronto, Montreal |
|
|
272
|
-
|
|
273
|
-
### Europe
|
|
274
|
-
|
|
275
|
-
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
276
|
-
| ----------------- | -------------------- | ----------- | -------------------- |
|
|
277
|
-
| `'Europe/London'` | äŧĻæĻ / London | UTC+0/UTC+1 | London, Dublin |
|
|
278
|
-
| `'Europe/Paris'` | åˇ´éģ / Paris | UTC+1/UTC+2 | Paris, Berlin |
|
|
279
|
-
| `'Europe/Berlin'` | æŗå
°å
įĻ / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
|
|
280
|
-
| `'Europe/Zurich'` | čéģä¸ / Zurich | UTC+1/UTC+2 | Zurich, Vienna |
|
|
281
|
-
| `'Europe/Moscow'` | čĢæ¯į§ / Moscow | UTC+3 | Moscow, Istanbul |
|
|
282
|
-
|
|
283
|
-
### Asia
|
|
284
|
-
|
|
285
|
-
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
286
|
-
| ------------------ | ------------------ | ---------- | ----------------------- |
|
|
287
|
-
| `'Asia/Dubai'` | čŋĒæ / Dubai | UTC+4 | Dubai, Abu Dhabi |
|
|
288
|
-
| `'Asia/Karachi'` | åĄæåĨ / Karachi | UTC+5 | Karachi, Lahore |
|
|
289
|
-
| `'Asia/Kolkata'` | å å°åį / Kolkata | UTC+5:30 | Kolkata, Mumbai |
|
|
290
|
-
| `'Asia/Shanghai'` | ä¸æĩˇ / Shanghai | UTC+8 | Shanghai, Beijing |
|
|
291
|
-
| `'Asia/Hong_Kong'` | éĻ港 / Hong Kong | UTC+8 | Hong Kong, Macau |
|
|
292
|
-
| `'Asia/Singapore'` | æ°å åĄ / Singapore | UTC+8 | Singapore, Kuala Lumpur |
|
|
293
|
-
| `'Asia/Tokyo'` | ä¸äēŦ / Tokyo | UTC+9 | Tokyo, Seoul |
|
|
294
|
-
| `'Asia/Seoul'` | éĻå° / Seoul | UTC+9 | Seoul, Pyongyang |
|
|
295
|
-
|
|
296
|
-
### Pacific
|
|
297
|
-
|
|
298
|
-
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
299
|
-
| -------------------- | ----------------- | ------------- | -------------------- |
|
|
300
|
-
| `'Australia/Sydney'` | æå°ŧ / Sydney | UTC+10/UTC+11 | Sydney, Melbourne |
|
|
301
|
-
| `'Pacific/Auckland'` | åĨĨå
å
° / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
|
|
302
|
-
|
|
303
|
-
### Global
|
|
304
|
-
|
|
305
|
-
| Timezone ID | Display Name | UTC Offset | Description |
|
|
306
|
-
| ----------- | ------------ | ---------- | -------------------------- |
|
|
307
|
-
| `'UTC'` | UTC / UTC | UTC+0 | Coordinated Universal Time |
|
|
308
|
-
|
|
309
|
-
## đ Data structure
|
|
310
|
-
|
|
311
|
-
```typescript
|
|
312
|
-
interface ICandleViewDataPoint {
|
|
313
|
-
time: number; // timestamp in seconds
|
|
314
|
-
open: number;
|
|
315
|
-
high: number;
|
|
316
|
-
low: number;
|
|
317
|
-
close: number;
|
|
318
|
-
volume?: number;
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
export interface IStaticMarkData {
|
|
322
|
-
time: number;
|
|
323
|
-
type: string;
|
|
324
|
-
data: {
|
|
325
|
-
direction: string;
|
|
326
|
-
text: string;
|
|
327
|
-
fontSize?: number;
|
|
328
|
-
textColor?: string;
|
|
329
|
-
backgroundColor?: string;
|
|
330
|
-
isCircular?: boolean;
|
|
331
|
-
padding?: number;
|
|
332
|
-
}[];
|
|
333
|
-
}
|
|
334
|
-
```
|
|
335
|
-
|
|
336
|
-
# đ Core Features
|
|
337
|
-
|
|
338
|
-
## đ Supported Technical Indicators
|
|
339
|
-
|
|
340
|
-
### Main Chart Indicators
|
|
341
|
-
|
|
342
|
-
- Moving Average (MA)
|
|
343
|
-
- Exponential Moving Average (EMA)
|
|
344
|
-
- Bollinger Bands
|
|
345
|
-
- Ichimoku Cloud
|
|
346
|
-
- Donchian Channel
|
|
347
|
-
- Envelope
|
|
348
|
-
- Volume Weighted Average Price (VWAP)
|
|
349
|
-
- Heat Map
|
|
350
|
-
- Market Profile
|
|
351
|
-
|
|
352
|
-
### Sub Chart Indicators
|
|
353
|
-
|
|
354
|
-
- Relative Strength Index (RSI)
|
|
355
|
-
- Moving Average Convergence Divergence (MACD)
|
|
356
|
-
- Volume
|
|
357
|
-
- Parabolic SAR
|
|
358
|
-
- KDJ Indicator
|
|
359
|
-
- Average True Range (ATR)
|
|
360
|
-
- Stochastic Oscillator
|
|
361
|
-
- Commodity Channel Index (CCI)
|
|
362
|
-
- Bollinger Bands Width
|
|
363
|
-
- Average Directional Index (ADX)
|
|
364
|
-
- On Balance Volume (OBV)
|
|
365
|
-
|
|
366
|
-
## đ¨ Supported Drawing Tools
|
|
367
|
-
|
|
368
|
-
### Basic Tools
|
|
369
|
-
|
|
370
|
-
- Pencil, Pen, Brush, Marker Pen, Eraser
|
|
371
|
-
- Line Segment, Horizontal Line, Vertical Line
|
|
372
|
-
- Arrow Line, Thick Arrow Line
|
|
373
|
-
|
|
374
|
-
### Channel Tools
|
|
375
|
-
|
|
376
|
-
- Parallel Channel
|
|
377
|
-
- Linear Regression Channel
|
|
378
|
-
- Equidistant Channel
|
|
379
|
-
- Disjoint Channel
|
|
380
|
-
|
|
381
|
-
### Fibonacci Tools
|
|
382
|
-
|
|
383
|
-
- Fibonacci Retracement
|
|
384
|
-
- Fibonacci Time Zones
|
|
385
|
-
- Fibonacci Arc
|
|
386
|
-
- Fibonacci Circle
|
|
387
|
-
- Fibonacci Spiral
|
|
388
|
-
- Fibonacci Fan
|
|
389
|
-
- Fibonacci Channel
|
|
390
|
-
- Fibonacci Price Extension
|
|
391
|
-
- Fibonacci Time Extension
|
|
392
|
-
|
|
393
|
-
### Gann Tools
|
|
394
|
-
|
|
395
|
-
- Gann Fan
|
|
396
|
-
- Gann Box
|
|
397
|
-
- Gann Rectangle
|
|
398
|
-
|
|
399
|
-
### Pattern Tools
|
|
400
|
-
|
|
401
|
-
- Andrew Pitchfork
|
|
402
|
-
- Enhanced Andrew Pitchfork
|
|
403
|
-
- Schiff Pitchfork
|
|
404
|
-
- XABCD Pattern
|
|
405
|
-
- Head and Shoulders
|
|
406
|
-
- ABCD Pattern
|
|
407
|
-
- Triangle ABCD Pattern
|
|
408
|
-
|
|
409
|
-
### Elliott Wave
|
|
410
|
-
|
|
411
|
-
- Elliott Impulse Wave
|
|
412
|
-
- Elliott Corrective Wave
|
|
413
|
-
- Elliott Triangle
|
|
414
|
-
- Elliott Double Combination
|
|
415
|
-
- Elliott Triple Combination
|
|
416
|
-
|
|
417
|
-
### Geometric Shapes
|
|
418
|
-
|
|
419
|
-
- Rectangle, Circle, Ellipse, Triangle
|
|
420
|
-
- Sector, Curve, Double Curve
|
|
421
|
-
|
|
422
|
-
### Annotation Tools
|
|
423
|
-
|
|
424
|
-
- Text Annotation, Price Note
|
|
425
|
-
- Bubble Box, Pin, Signpost
|
|
426
|
-
- Price Label, Flag Mark
|
|
427
|
-
- Image Insertion
|
|
428
|
-
|
|
429
|
-
### Range Tools
|
|
430
|
-
|
|
431
|
-
- Time Range, Price Range
|
|
432
|
-
- Time-Price Range
|
|
433
|
-
- Heat Map
|
|
434
|
-
|
|
435
|
-
### Trading Tools
|
|
436
|
-
|
|
437
|
-
- Long Position, Short Position
|
|
438
|
-
- Mock K-line
|
|
439
|
-
|
|
440
|
-
## â° Supported Timeframes
|
|
441
|
-
|
|
442
|
-
### Second-based
|
|
443
|
-
|
|
444
|
-
- 1s, 5s, 15s, 30s
|
|
445
|
-
|
|
446
|
-
### Minute-based
|
|
447
|
-
|
|
448
|
-
- 1m, 3m, 5m, 15m
|
|
449
|
-
- 30m, 45m
|
|
450
|
-
|
|
451
|
-
### Hour-based
|
|
452
|
-
|
|
453
|
-
- 1h, 2h, 3h, 4h
|
|
454
|
-
- 6h, 8h, 12h
|
|
455
|
-
|
|
456
|
-
### Day-based
|
|
457
|
-
|
|
458
|
-
- 1d, 3d
|
|
459
|
-
|
|
460
|
-
### Week-based
|
|
461
|
-
|
|
462
|
-
- 1w, 2w
|
|
463
|
-
|
|
464
|
-
### Month-based
|
|
465
|
-
|
|
466
|
-
- 1M, 3M, 6M
|
|
467
|
-
|
|
468
|
-
## đ Supported Timezones
|
|
469
|
-
|
|
470
|
-
- New York (America/New_York)
|
|
471
|
-
- Chicago (America/Chicago)
|
|
472
|
-
- Denver (America/Denver)
|
|
473
|
-
- Los Angeles (America/Los_Angeles)
|
|
474
|
-
- Toronto (America/Toronto)
|
|
475
|
-
- London (Europe/London)
|
|
476
|
-
- Paris (Europe/Paris)
|
|
477
|
-
- Frankfurt (Europe/Berlin)
|
|
478
|
-
- Zurich (Europe/Zurich)
|
|
479
|
-
- Moscow (Europe/Moscow)
|
|
480
|
-
- Dubai (Asia/Dubai)
|
|
481
|
-
- Karachi (Asia/Karachi)
|
|
482
|
-
- Kolkata (Asia/Kolkata)
|
|
483
|
-
- Shanghai (Asia/Shanghai)
|
|
484
|
-
- Hong Kong (Asia/Hong_Kong)
|
|
485
|
-
- Singapore (Asia/Singapore)
|
|
486
|
-
- Tokyo (Asia/Tokyo)
|
|
487
|
-
- Seoul (Asia/Seoul)
|
|
488
|
-
- Sydney (Australia/Sydney)
|
|
489
|
-
- Auckland (Pacific/Auckland)
|
|
490
|
-
- UTC
|
|
491
|
-
|
|
492
|
-
## đ¯ Supported Chart Types
|
|
493
|
-
|
|
494
|
-
- Candlestick Chart
|
|
495
|
-
- Hollow Candlestick Chart
|
|
496
|
-
- Bar Chart (OHLC)
|
|
497
|
-
- BaseLine Chart
|
|
498
|
-
- Line Chart
|
|
499
|
-
- Area Chart
|
|
500
|
-
- Step Line Chart
|
|
501
|
-
- Heikin Ashi Chart
|
|
502
|
-
- Histogram Chart
|
|
503
|
-
- Line Break Chart
|
|
504
|
-
- Mountain Chart
|
|
505
|
-
- Baseline Area Chart
|
|
506
|
-
- High Low Chart
|
|
507
|
-
- HLCArea Chart
|
|
1
|
+
<h1 align="center">
|
|
2
|
+
đ CandleView
|
|
3
|
+
</h1>
|
|
4
|
+
<h4 align="center">
|
|
5
|
+
A data visualization charts and draw graph engine for the financial industry.
|
|
6
|
+
</h4>
|
|
7
|
+
<p align="center">
|
|
8
|
+
<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>
|
|
9
|
+
</p>
|
|
10
|
+
<p align="center">
|
|
11
|
+
<a href="./README_zh-CN.md">įŽäŊä¸æ</a> | <a href="./README.md">English</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
# âī¸ Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm i candleview
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
yarn add candleview
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
# đ Quick Start
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { CandleView } from "./CandleView";
|
|
28
|
+
|
|
29
|
+
const App = () => {
|
|
30
|
+
return (
|
|
31
|
+
<CandleView
|
|
32
|
+
title="BTC/USDT"
|
|
33
|
+
height={600}
|
|
34
|
+
theme="dark"
|
|
35
|
+
i18n="en"
|
|
36
|
+
showToolbar={true}
|
|
37
|
+
showLeftPanel={true}
|
|
38
|
+
showTopPanel={true}
|
|
39
|
+
timeframe="1d"
|
|
40
|
+
timezone="America/New_York"
|
|
41
|
+
data={klineData}
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
# Preview
|
|
48
|
+
|
|
49
|
+
## Draw Graphics
|
|
50
|
+
|
|
51
|
+
### Fibonacci
|
|
52
|
+
|
|
53
|
+
<table>
|
|
54
|
+
<tr>
|
|
55
|
+
<td align="left">
|
|
56
|
+
<h4>Arc</h4>
|
|
57
|
+
</td>
|
|
58
|
+
<td align="left">
|
|
59
|
+
<h4>Channel</h4>
|
|
60
|
+
</td>
|
|
61
|
+
<td align="left">
|
|
62
|
+
<h4>Circle</h4>
|
|
63
|
+
</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-arc.png" width="400"></td>
|
|
67
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-channel.png" width="400"></td>
|
|
68
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-circle.png" width="400"></td>
|
|
69
|
+
</tr>
|
|
70
|
+
<tr>
|
|
71
|
+
<td align="left">
|
|
72
|
+
<h4>Fan</h4>
|
|
73
|
+
</td>
|
|
74
|
+
<td align="left">
|
|
75
|
+
<h4>Price Extension</h4>
|
|
76
|
+
</td>
|
|
77
|
+
<td align="left">
|
|
78
|
+
<h4>Retracement</h4>
|
|
79
|
+
</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr>
|
|
82
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-fan.png" width="400"></td>
|
|
83
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-price-extension.png" width="400"></td>
|
|
84
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-retracement.png" width="400"></td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td align="left">
|
|
88
|
+
<h4>Spiral</h4>
|
|
89
|
+
</td>
|
|
90
|
+
<td align="left">
|
|
91
|
+
<h4>Time Expansion</h4>
|
|
92
|
+
</td>
|
|
93
|
+
<td align="left">
|
|
94
|
+
<h4>Time Zoon</h4>
|
|
95
|
+
</td>
|
|
96
|
+
</tr>
|
|
97
|
+
<tr>
|
|
98
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-spiral.png" width="400"></td>
|
|
99
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-time-expansion.png" width="400"></td>
|
|
100
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-time-zoon.png" width="400"></td>
|
|
101
|
+
</tr>
|
|
102
|
+
<tr>
|
|
103
|
+
<td align="left">
|
|
104
|
+
<h4>Wedge</h4>
|
|
105
|
+
</td>
|
|
106
|
+
<td align="left">
|
|
107
|
+
</td>
|
|
108
|
+
<td align="left">
|
|
109
|
+
</td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<td align="center"><img src="./assets/fibonacci/fibonacci-wedge.png" width="400"></td>
|
|
113
|
+
</tr>
|
|
114
|
+
</table>
|
|
115
|
+
|
|
116
|
+
### Gann
|
|
117
|
+
|
|
118
|
+
<table>
|
|
119
|
+
<tr>
|
|
120
|
+
<td align="left">
|
|
121
|
+
<h4>Box</h4>
|
|
122
|
+
</td>
|
|
123
|
+
<td align="left">
|
|
124
|
+
<h4>Fan</h4>
|
|
125
|
+
</td>
|
|
126
|
+
<td align="left">
|
|
127
|
+
<h4>Rectangle</h4>
|
|
128
|
+
</td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr>
|
|
131
|
+
<td align="center"><img src="./assets/gann/gann-box.png" width="400"></td>
|
|
132
|
+
<td align="center"><img src="./assets/gann/gann-fan.png" width="400"></td>
|
|
133
|
+
<td align="center"><img src="./assets/gann//gann-rectangle.png" width="400"></td>
|
|
134
|
+
</tr>
|
|
135
|
+
</table>
|
|
136
|
+
|
|
137
|
+
### Mark
|
|
138
|
+
|
|
139
|
+
<table>
|
|
140
|
+
<tr>
|
|
141
|
+
<td align="left">
|
|
142
|
+
<h4>Mark</h4>
|
|
143
|
+
</td>
|
|
144
|
+
</tr>
|
|
145
|
+
<tr>
|
|
146
|
+
<td align="center"><img src="./assets/mark.png" width="400"></td>
|
|
147
|
+
</tr>
|
|
148
|
+
</table>
|
|
149
|
+
|
|
150
|
+
## Theme
|
|
151
|
+
|
|
152
|
+
<table>
|
|
153
|
+
<tr>
|
|
154
|
+
<td align="left">
|
|
155
|
+
<h4>Dark</h4>
|
|
156
|
+
</td>
|
|
157
|
+
<td align="left">
|
|
158
|
+
<h4>Light</h4>
|
|
159
|
+
</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td align="center"><img src="./assets/preview_theme_dark.png" width="400"></td>
|
|
163
|
+
<td align="center"><img src="./assets/preview_theme_light.png" width="400"></td>
|
|
164
|
+
</tr>
|
|
165
|
+
</table>
|
|
166
|
+
|
|
167
|
+
## I18n
|
|
168
|
+
|
|
169
|
+
<table>
|
|
170
|
+
<tr>
|
|
171
|
+
<td align="left">
|
|
172
|
+
<h4>En</h4>
|
|
173
|
+
</td>
|
|
174
|
+
<td align="left">
|
|
175
|
+
<h4>zh-CN</h4>
|
|
176
|
+
</td>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td align="center"><img src="./assets/preview_i18n_en.png" width="400"></td>
|
|
180
|
+
<td align="center"><img src="./assets/preview_i18n_zh-CN.png" width="400"></td>
|
|
181
|
+
</tr>
|
|
182
|
+
</table>
|
|
183
|
+
|
|
184
|
+
# đ§ Configuration Options
|
|
185
|
+
|
|
186
|
+
## Props
|
|
187
|
+
|
|
188
|
+
| Parameter | Type | Default | Description | Required |
|
|
189
|
+
| ------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------- | ---------------------------------------- | -------- |
|
|
190
|
+
| `theme` | `'dark' \| 'light'` | `'dark'` | Theme mode | No |
|
|
191
|
+
| `i18n` | `'en' \| 'zh-cn'` | `'zh-cn'` | Language setting | No |
|
|
192
|
+
| `height` | `number \| string` | `500` | Chart height (px or percentage) | No |
|
|
193
|
+
| `title` | `string` | `''` | Chart title displayed on the chart | Yes |
|
|
194
|
+
| `showToolbar` | `boolean` | `true` | Show top toolbar | No |
|
|
195
|
+
| `showLeftPanel` | `boolean` | `true` | Show left drawing tools panel | No |
|
|
196
|
+
| `showTopPanel` | `boolean` | `true` | Show top settings panel | No |
|
|
197
|
+
| `showIndicators` | `boolean` | `true` | Show indicators panel | No |
|
|
198
|
+
| `timeframe` | `string` | `'1d'` | Chart timeframe (e.g., '1m', '1h', '1d') | No |
|
|
199
|
+
| `timezone` | `string` | `'Asia/Shanghai'` | Timezone for data display | No |
|
|
200
|
+
| `data` | `ICandleViewDataPoint[]` | `[]` | K-line data array | No |
|
|
201
|
+
| `url` | `string` | `''` | URL to fetch data from | No |
|
|
202
|
+
| `markData` | `IStaticMarkData[]` | `[]` | Pre-drawn marks data | No |
|
|
203
|
+
| `handleScreenshotCapture` | `(imageData: { dataUrl: string; blob: Blob; width: number; height: number; timestamp: number }) => void` | `undefined` | Callback for screenshot capture | No |
|
|
204
|
+
|
|
205
|
+
## â° Supported Timeframes
|
|
206
|
+
|
|
207
|
+
### Second-based Timeframes
|
|
208
|
+
|
|
209
|
+
| Value | Display Name | Description |
|
|
210
|
+
| ------- | ------------------ | ----------- |
|
|
211
|
+
| `'1S'` | 1 į§ / 1 Second | 1 second |
|
|
212
|
+
| `'5S'` | 5 į§ / 5 Seconds | 5 seconds |
|
|
213
|
+
| `'15S'` | 15 į§ / 15 Seconds | 15 seconds |
|
|
214
|
+
| `'30S'` | 30 į§ / 30 Seconds | 30 seconds |
|
|
215
|
+
|
|
216
|
+
### Minute-based Timeframes
|
|
217
|
+
|
|
218
|
+
| Value | Display Name | Description |
|
|
219
|
+
| ------- | ------------------ | ----------- |
|
|
220
|
+
| `'1M'` | 1 å / 1 Minute | 1 minute |
|
|
221
|
+
| `'3M'` | 3 å / 3 Minutes | 3 minutes |
|
|
222
|
+
| `'5M'` | 5 å / 5 Minutes | 5 minutes |
|
|
223
|
+
| `'15M'` | 15 å / 15 Minutes | 15 minutes |
|
|
224
|
+
| `'30M'` | 30 å / 30 Minutes | 30 minutes |
|
|
225
|
+
| `'45M'` | 45 å / 45 Minutes | 45 minutes |
|
|
226
|
+
|
|
227
|
+
### Hour-based Timeframes
|
|
228
|
+
|
|
229
|
+
| Value | Display Name | Description |
|
|
230
|
+
| ------- | ------------------ | ----------- |
|
|
231
|
+
| `'1H'` | 1 å°æļ / 1 Hour | 1 hour |
|
|
232
|
+
| `'2H'` | 2 å°æļ / 2 Hours | 2 hours |
|
|
233
|
+
| `'3H'` | 3 å°æļ / 3 Hours | 3 hours |
|
|
234
|
+
| `'4H'` | 4 å°æļ / 4 Hours | 4 hours |
|
|
235
|
+
| `'6H'` | 6 å°æļ / 6 Hours | 6 hours |
|
|
236
|
+
| `'8H'` | 8 å°æļ / 8 Hours | 8 hours |
|
|
237
|
+
| `'12H'` | 12 å°æļ / 12 Hours | 12 hours |
|
|
238
|
+
|
|
239
|
+
### Day-based Timeframes
|
|
240
|
+
|
|
241
|
+
| Value | Display Name | Description |
|
|
242
|
+
| ------ | ------------- | ----------- |
|
|
243
|
+
| `'1D'` | 1 æĨ / 1 Day | 1 day |
|
|
244
|
+
| `'3D'` | 3 æĨ / 3 Days | 3 days |
|
|
245
|
+
|
|
246
|
+
### Week-based Timeframes
|
|
247
|
+
|
|
248
|
+
| Value | Display Name | Description |
|
|
249
|
+
| ------ | -------------- | ----------- |
|
|
250
|
+
| `'1W'` | 1 å¨ / 1 Week | 1 week |
|
|
251
|
+
| `'2W'` | 2 å¨ / 2 Weeks | 2 weeks |
|
|
252
|
+
|
|
253
|
+
### Month-based Timeframes
|
|
254
|
+
|
|
255
|
+
| Value | Display Name | Description |
|
|
256
|
+
| -------- | --------------- | ----------- |
|
|
257
|
+
| `'1MON'` | 1 æ / 1 Month | 1 month |
|
|
258
|
+
| `'3MON'` | 3 æ / 3 Months | 3 months |
|
|
259
|
+
| `'6MON'` | 6 æ / 6 Months | 6 months |
|
|
260
|
+
|
|
261
|
+
## đ Supported Timezones
|
|
262
|
+
|
|
263
|
+
### Americas
|
|
264
|
+
|
|
265
|
+
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
266
|
+
| ----------------------- | -------------------- | ----------- | -------------------------- |
|
|
267
|
+
| `'America/New_York'` | įēŊįēĻ / New York | UTC-5/UTC-4 | New York, Washington DC |
|
|
268
|
+
| `'America/Chicago'` | čå åĨ / Chicago | UTC-6/UTC-5 | Chicago, Dallas |
|
|
269
|
+
| `'America/Denver'` | 业äŊ / Denver | UTC-7/UTC-6 | Denver, Phoenix |
|
|
270
|
+
| `'America/Los_Angeles'` | æ´æįļ / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
|
|
271
|
+
| `'America/Toronto'` | å¤äŧĻå¤ / Toronto | UTC-5/UTC-4 | Toronto, Montreal |
|
|
272
|
+
|
|
273
|
+
### Europe
|
|
274
|
+
|
|
275
|
+
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
276
|
+
| ----------------- | -------------------- | ----------- | -------------------- |
|
|
277
|
+
| `'Europe/London'` | äŧĻæĻ / London | UTC+0/UTC+1 | London, Dublin |
|
|
278
|
+
| `'Europe/Paris'` | åˇ´éģ / Paris | UTC+1/UTC+2 | Paris, Berlin |
|
|
279
|
+
| `'Europe/Berlin'` | æŗå
°å
įĻ / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
|
|
280
|
+
| `'Europe/Zurich'` | čéģä¸ / Zurich | UTC+1/UTC+2 | Zurich, Vienna |
|
|
281
|
+
| `'Europe/Moscow'` | čĢæ¯į§ / Moscow | UTC+3 | Moscow, Istanbul |
|
|
282
|
+
|
|
283
|
+
### Asia
|
|
284
|
+
|
|
285
|
+
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
286
|
+
| ------------------ | ------------------ | ---------- | ----------------------- |
|
|
287
|
+
| `'Asia/Dubai'` | čŋĒæ / Dubai | UTC+4 | Dubai, Abu Dhabi |
|
|
288
|
+
| `'Asia/Karachi'` | åĄæåĨ / Karachi | UTC+5 | Karachi, Lahore |
|
|
289
|
+
| `'Asia/Kolkata'` | å å°åį / Kolkata | UTC+5:30 | Kolkata, Mumbai |
|
|
290
|
+
| `'Asia/Shanghai'` | ä¸æĩˇ / Shanghai | UTC+8 | Shanghai, Beijing |
|
|
291
|
+
| `'Asia/Hong_Kong'` | éĻ港 / Hong Kong | UTC+8 | Hong Kong, Macau |
|
|
292
|
+
| `'Asia/Singapore'` | æ°å åĄ / Singapore | UTC+8 | Singapore, Kuala Lumpur |
|
|
293
|
+
| `'Asia/Tokyo'` | ä¸äēŦ / Tokyo | UTC+9 | Tokyo, Seoul |
|
|
294
|
+
| `'Asia/Seoul'` | éĻå° / Seoul | UTC+9 | Seoul, Pyongyang |
|
|
295
|
+
|
|
296
|
+
### Pacific
|
|
297
|
+
|
|
298
|
+
| Timezone ID | Display Name | UTC Offset | Major Cities |
|
|
299
|
+
| -------------------- | ----------------- | ------------- | -------------------- |
|
|
300
|
+
| `'Australia/Sydney'` | æå°ŧ / Sydney | UTC+10/UTC+11 | Sydney, Melbourne |
|
|
301
|
+
| `'Pacific/Auckland'` | åĨĨå
å
° / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
|
|
302
|
+
|
|
303
|
+
### Global
|
|
304
|
+
|
|
305
|
+
| Timezone ID | Display Name | UTC Offset | Description |
|
|
306
|
+
| ----------- | ------------ | ---------- | -------------------------- |
|
|
307
|
+
| `'UTC'` | UTC / UTC | UTC+0 | Coordinated Universal Time |
|
|
308
|
+
|
|
309
|
+
## đ Data structure
|
|
310
|
+
|
|
311
|
+
```typescript
|
|
312
|
+
interface ICandleViewDataPoint {
|
|
313
|
+
time: number; // timestamp in seconds
|
|
314
|
+
open: number;
|
|
315
|
+
high: number;
|
|
316
|
+
low: number;
|
|
317
|
+
close: number;
|
|
318
|
+
volume?: number;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
export interface IStaticMarkData {
|
|
322
|
+
time: number;
|
|
323
|
+
type: string;
|
|
324
|
+
data: {
|
|
325
|
+
direction: string;
|
|
326
|
+
text: string;
|
|
327
|
+
fontSize?: number;
|
|
328
|
+
textColor?: string;
|
|
329
|
+
backgroundColor?: string;
|
|
330
|
+
isCircular?: boolean;
|
|
331
|
+
padding?: number;
|
|
332
|
+
}[];
|
|
333
|
+
}
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
# đ Core Features
|
|
337
|
+
|
|
338
|
+
## đ Supported Technical Indicators
|
|
339
|
+
|
|
340
|
+
### Main Chart Indicators
|
|
341
|
+
|
|
342
|
+
- Moving Average (MA)
|
|
343
|
+
- Exponential Moving Average (EMA)
|
|
344
|
+
- Bollinger Bands
|
|
345
|
+
- Ichimoku Cloud
|
|
346
|
+
- Donchian Channel
|
|
347
|
+
- Envelope
|
|
348
|
+
- Volume Weighted Average Price (VWAP)
|
|
349
|
+
- Heat Map
|
|
350
|
+
- Market Profile
|
|
351
|
+
|
|
352
|
+
### Sub Chart Indicators
|
|
353
|
+
|
|
354
|
+
- Relative Strength Index (RSI)
|
|
355
|
+
- Moving Average Convergence Divergence (MACD)
|
|
356
|
+
- Volume
|
|
357
|
+
- Parabolic SAR
|
|
358
|
+
- KDJ Indicator
|
|
359
|
+
- Average True Range (ATR)
|
|
360
|
+
- Stochastic Oscillator
|
|
361
|
+
- Commodity Channel Index (CCI)
|
|
362
|
+
- Bollinger Bands Width
|
|
363
|
+
- Average Directional Index (ADX)
|
|
364
|
+
- On Balance Volume (OBV)
|
|
365
|
+
|
|
366
|
+
## đ¨ Supported Drawing Tools
|
|
367
|
+
|
|
368
|
+
### Basic Tools
|
|
369
|
+
|
|
370
|
+
- Pencil, Pen, Brush, Marker Pen, Eraser
|
|
371
|
+
- Line Segment, Horizontal Line, Vertical Line
|
|
372
|
+
- Arrow Line, Thick Arrow Line
|
|
373
|
+
|
|
374
|
+
### Channel Tools
|
|
375
|
+
|
|
376
|
+
- Parallel Channel
|
|
377
|
+
- Linear Regression Channel
|
|
378
|
+
- Equidistant Channel
|
|
379
|
+
- Disjoint Channel
|
|
380
|
+
|
|
381
|
+
### Fibonacci Tools
|
|
382
|
+
|
|
383
|
+
- Fibonacci Retracement
|
|
384
|
+
- Fibonacci Time Zones
|
|
385
|
+
- Fibonacci Arc
|
|
386
|
+
- Fibonacci Circle
|
|
387
|
+
- Fibonacci Spiral
|
|
388
|
+
- Fibonacci Fan
|
|
389
|
+
- Fibonacci Channel
|
|
390
|
+
- Fibonacci Price Extension
|
|
391
|
+
- Fibonacci Time Extension
|
|
392
|
+
|
|
393
|
+
### Gann Tools
|
|
394
|
+
|
|
395
|
+
- Gann Fan
|
|
396
|
+
- Gann Box
|
|
397
|
+
- Gann Rectangle
|
|
398
|
+
|
|
399
|
+
### Pattern Tools
|
|
400
|
+
|
|
401
|
+
- Andrew Pitchfork
|
|
402
|
+
- Enhanced Andrew Pitchfork
|
|
403
|
+
- Schiff Pitchfork
|
|
404
|
+
- XABCD Pattern
|
|
405
|
+
- Head and Shoulders
|
|
406
|
+
- ABCD Pattern
|
|
407
|
+
- Triangle ABCD Pattern
|
|
408
|
+
|
|
409
|
+
### Elliott Wave
|
|
410
|
+
|
|
411
|
+
- Elliott Impulse Wave
|
|
412
|
+
- Elliott Corrective Wave
|
|
413
|
+
- Elliott Triangle
|
|
414
|
+
- Elliott Double Combination
|
|
415
|
+
- Elliott Triple Combination
|
|
416
|
+
|
|
417
|
+
### Geometric Shapes
|
|
418
|
+
|
|
419
|
+
- Rectangle, Circle, Ellipse, Triangle
|
|
420
|
+
- Sector, Curve, Double Curve
|
|
421
|
+
|
|
422
|
+
### Annotation Tools
|
|
423
|
+
|
|
424
|
+
- Text Annotation, Price Note
|
|
425
|
+
- Bubble Box, Pin, Signpost
|
|
426
|
+
- Price Label, Flag Mark
|
|
427
|
+
- Image Insertion
|
|
428
|
+
|
|
429
|
+
### Range Tools
|
|
430
|
+
|
|
431
|
+
- Time Range, Price Range
|
|
432
|
+
- Time-Price Range
|
|
433
|
+
- Heat Map
|
|
434
|
+
|
|
435
|
+
### Trading Tools
|
|
436
|
+
|
|
437
|
+
- Long Position, Short Position
|
|
438
|
+
- Mock K-line
|
|
439
|
+
|
|
440
|
+
## â° Supported Timeframes
|
|
441
|
+
|
|
442
|
+
### Second-based
|
|
443
|
+
|
|
444
|
+
- 1s, 5s, 15s, 30s
|
|
445
|
+
|
|
446
|
+
### Minute-based
|
|
447
|
+
|
|
448
|
+
- 1m, 3m, 5m, 15m
|
|
449
|
+
- 30m, 45m
|
|
450
|
+
|
|
451
|
+
### Hour-based
|
|
452
|
+
|
|
453
|
+
- 1h, 2h, 3h, 4h
|
|
454
|
+
- 6h, 8h, 12h
|
|
455
|
+
|
|
456
|
+
### Day-based
|
|
457
|
+
|
|
458
|
+
- 1d, 3d
|
|
459
|
+
|
|
460
|
+
### Week-based
|
|
461
|
+
|
|
462
|
+
- 1w, 2w
|
|
463
|
+
|
|
464
|
+
### Month-based
|
|
465
|
+
|
|
466
|
+
- 1M, 3M, 6M
|
|
467
|
+
|
|
468
|
+
## đ Supported Timezones
|
|
469
|
+
|
|
470
|
+
- New York (America/New_York)
|
|
471
|
+
- Chicago (America/Chicago)
|
|
472
|
+
- Denver (America/Denver)
|
|
473
|
+
- Los Angeles (America/Los_Angeles)
|
|
474
|
+
- Toronto (America/Toronto)
|
|
475
|
+
- London (Europe/London)
|
|
476
|
+
- Paris (Europe/Paris)
|
|
477
|
+
- Frankfurt (Europe/Berlin)
|
|
478
|
+
- Zurich (Europe/Zurich)
|
|
479
|
+
- Moscow (Europe/Moscow)
|
|
480
|
+
- Dubai (Asia/Dubai)
|
|
481
|
+
- Karachi (Asia/Karachi)
|
|
482
|
+
- Kolkata (Asia/Kolkata)
|
|
483
|
+
- Shanghai (Asia/Shanghai)
|
|
484
|
+
- Hong Kong (Asia/Hong_Kong)
|
|
485
|
+
- Singapore (Asia/Singapore)
|
|
486
|
+
- Tokyo (Asia/Tokyo)
|
|
487
|
+
- Seoul (Asia/Seoul)
|
|
488
|
+
- Sydney (Australia/Sydney)
|
|
489
|
+
- Auckland (Pacific/Auckland)
|
|
490
|
+
- UTC
|
|
491
|
+
|
|
492
|
+
## đ¯ Supported Chart Types
|
|
493
|
+
|
|
494
|
+
- Candlestick Chart
|
|
495
|
+
- Hollow Candlestick Chart
|
|
496
|
+
- Bar Chart (OHLC)
|
|
497
|
+
- BaseLine Chart
|
|
498
|
+
- Line Chart
|
|
499
|
+
- Area Chart
|
|
500
|
+
- Step Line Chart
|
|
501
|
+
- Heikin Ashi Chart
|
|
502
|
+
- Histogram Chart
|
|
503
|
+
- Line Break Chart
|
|
504
|
+
- Mountain Chart
|
|
505
|
+
- Baseline Area Chart
|
|
506
|
+
- High Low Chart
|
|
507
|
+
- HLCArea Chart
|
package/package.json
CHANGED
|
@@ -1,83 +1,82 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "candleview",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "A data visualization charts and draw graph engine for the financial industry.",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"Finance",
|
|
7
|
-
"Financial Analysis",
|
|
8
|
-
"Financial Charts",
|
|
9
|
-
"Finance Trading",
|
|
10
|
-
"Trading",
|
|
11
|
-
"Chart",
|
|
12
|
-
"Charts",
|
|
13
|
-
"K-Line",
|
|
14
|
-
"KLine"
|
|
15
|
-
],
|
|
16
|
-
"author": "happyboy",
|
|
17
|
-
"license": "AGPL-3.0-only",
|
|
18
|
-
"repository": "https://github.com/0xhappyboy/candleview",
|
|
19
|
-
"bugs": {
|
|
20
|
-
"url": "https://github.com/0xhappyboy/candleview/issues"
|
|
21
|
-
},
|
|
22
|
-
"homepage": "https://github.com/0xhappyboy/candleview#readme",
|
|
23
|
-
"main": "dist/index.js",
|
|
24
|
-
"module": "dist/index.mjs",
|
|
25
|
-
"types": "dist/index.d.ts",
|
|
26
|
-
"source": "src/index.tsx",
|
|
27
|
-
"exports": {
|
|
28
|
-
".": {
|
|
29
|
-
"import": "./dist/index.mjs",
|
|
30
|
-
"require": "./dist/index.js",
|
|
31
|
-
"types": "./dist/index.d.ts"
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
"engines": {
|
|
35
|
-
"node": ">=16"
|
|
36
|
-
},
|
|
37
|
-
"scripts": {
|
|
38
|
-
"clean": "rm -rf dist node_modules/.cache .tsbuildinfo",
|
|
39
|
-
"build": "vite build",
|
|
40
|
-
"build:fast": "vite build --mode development",
|
|
41
|
-
"build:types": "tsc --emitDeclarationOnly --outDir dist",
|
|
42
|
-
"start": "vite build --watch",
|
|
43
|
-
"dev": "vite",
|
|
44
|
-
"prepare": "npm run build",
|
|
45
|
-
"test": "run-s test:unit test:lint",
|
|
46
|
-
"test:build": "vite build",
|
|
47
|
-
"test:lint": "eslint .",
|
|
48
|
-
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
|
|
49
|
-
"test:watch": "react-scripts test --env=jsdom",
|
|
50
|
-
"predeploy": "cd example && yarn install && yarn run build",
|
|
51
|
-
"deploy": "gh-pages -d example/build"
|
|
52
|
-
},
|
|
53
|
-
"peerDependencies": {
|
|
54
|
-
"
|
|
55
|
-
"react": "^18.0.0 || ^19.0.0"
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"@types/react": "^19.2.0",
|
|
64
|
-
"@
|
|
65
|
-
"@typescript-eslint/
|
|
66
|
-
"@
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"eslint": "^
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"react": "^19.2.0",
|
|
74
|
-
"react-
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"vite": "^
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "candleview",
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "A data visualization charts and draw graph engine for the financial industry.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"Finance",
|
|
7
|
+
"Financial Analysis",
|
|
8
|
+
"Financial Charts",
|
|
9
|
+
"Finance Trading",
|
|
10
|
+
"Trading",
|
|
11
|
+
"Chart",
|
|
12
|
+
"Charts",
|
|
13
|
+
"K-Line",
|
|
14
|
+
"KLine"
|
|
15
|
+
],
|
|
16
|
+
"author": "happyboy",
|
|
17
|
+
"license": "AGPL-3.0-only",
|
|
18
|
+
"repository": "https://github.com/0xhappyboy/candleview",
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/0xhappyboy/candleview/issues"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/0xhappyboy/candleview#readme",
|
|
23
|
+
"main": "dist/index.js",
|
|
24
|
+
"module": "dist/index.mjs",
|
|
25
|
+
"types": "dist/index.d.ts",
|
|
26
|
+
"source": "src/index.tsx",
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"import": "./dist/index.mjs",
|
|
30
|
+
"require": "./dist/index.js",
|
|
31
|
+
"types": "./dist/index.d.ts"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"engines": {
|
|
35
|
+
"node": ">=16"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"clean": "rm -rf dist node_modules/.cache .tsbuildinfo",
|
|
39
|
+
"build": "vite build",
|
|
40
|
+
"build:fast": "vite build --mode development",
|
|
41
|
+
"build:types": "tsc --emitDeclarationOnly --outDir dist",
|
|
42
|
+
"start": "vite build --watch",
|
|
43
|
+
"dev": "vite",
|
|
44
|
+
"prepare": "npm run build",
|
|
45
|
+
"test": "run-s test:unit test:lint",
|
|
46
|
+
"test:build": "vite build",
|
|
47
|
+
"test:lint": "eslint .",
|
|
48
|
+
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
|
|
49
|
+
"test:watch": "react-scripts test --env=jsdom",
|
|
50
|
+
"predeploy": "cd example && yarn install && yarn run build",
|
|
51
|
+
"deploy": "gh-pages -d example/build"
|
|
52
|
+
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
55
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
56
|
+
},
|
|
57
|
+
"dependencies": {
|
|
58
|
+
"lightweight-charts": "^5.0.9",
|
|
59
|
+
"resize-observer-polyfill": "^1.5.1"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"@types/react": "^19.2.0",
|
|
63
|
+
"@types/react-dom": "^19.2.0",
|
|
64
|
+
"@typescript-eslint/eslint-plugin": "^8.26.1",
|
|
65
|
+
"@typescript-eslint/parser": "^8.26.1",
|
|
66
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
67
|
+
"cross-env": "^7.0.3",
|
|
68
|
+
"eslint": "^9.17.0",
|
|
69
|
+
"eslint-plugin-react": "^7.37.4",
|
|
70
|
+
"gh-pages": "^6.3.0",
|
|
71
|
+
"npm-run-all": "^4.1.5",
|
|
72
|
+
"react": "^19.2.0",
|
|
73
|
+
"react-dom": "^19.2.0",
|
|
74
|
+
"react-scripts": "^5.0.1",
|
|
75
|
+
"typescript": "^5.7.3",
|
|
76
|
+
"vite": "^7.2.6",
|
|
77
|
+
"vite-plugin-dts": "^4.5.4"
|
|
78
|
+
},
|
|
79
|
+
"files": [
|
|
80
|
+
"dist"
|
|
81
|
+
]
|
|
82
|
+
}
|