@nabeeltahirdeveloper/chart-sdk 1.2.2 → 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.
Files changed (4) hide show
  1. package/README.md +149 -139
  2. package/package.json +50 -46
  3. package/dist/chart-sdk.es.js +0 -13706
  4. package/dist/chart-sdk.umd.js +0 -6
package/README.md CHANGED
@@ -20,12 +20,12 @@ npm install react react-dom
20
20
  import { TradingProvider, Chart, TradingToolbar } from '@nabeeltahirdeveloper/chart-sdk'
21
21
 
22
22
  function App() {
23
- return (
24
- <TradingProvider baseUrl="https://your-api-url.com">
25
- <TradingToolbar />
26
- <Chart />
27
- </TradingProvider>
28
- )
23
+ return (
24
+ <TradingProvider baseUrl='https://your-api-url.com'>
25
+ <TradingToolbar />
26
+ <Chart />
27
+ </TradingProvider>
28
+ )
29
29
  }
30
30
  ```
31
31
 
@@ -38,15 +38,29 @@ All components must be rendered inside a `<TradingProvider>`.
38
38
  Wraps your app and provides trading state (symbols, prices, orders, drawing tools, etc).
39
39
 
40
40
  ```jsx
41
- <TradingProvider baseUrl="https://your-api-url.com">
42
- {children}
43
- </TradingProvider>
41
+ <TradingProvider baseUrl='https://your-api-url.com'>{children}</TradingProvider>
44
42
  ```
45
43
 
46
- | Prop | Type | Description |
47
- |------|------|-------------|
48
- | `baseUrl` | `string` | API server URL |
49
- | `children` | `ReactNode` | Child components |
44
+ | Prop | Type | Description |
45
+ | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
46
+ | `baseUrl` | `string` | **Your project's backend API URL.** All SDK API calls (trades, candles, symbols, account) go to this URL. If omitted, uses `VITE_BASE_URL` env or `http://localhost:8000`. |
47
+ | `endpoints` | `object` | **Optional:** Custom endpoint paths. If your backend uses different paths, override them here. Default: `{ candles: '/api/chart/candles', symbols: '/api/symbols', trades: '/api/trades', account: '/api/user/account' }` |
48
+ | `children` | `ReactNode` | Child components |
49
+
50
+ **Example with custom endpoints:**
51
+
52
+ ```jsx
53
+ <TradingProvider
54
+ baseUrl='https://api-mt5-project.com'
55
+ endpoints={{
56
+ candles: '/api/v1/chart/candles', // MT5 backend path
57
+ symbols: '/api/v1/symbols',
58
+ trades: '/api/v1/trades',
59
+ account: '/api/v1/user/account',
60
+ }}>
61
+ <Chart />
62
+ </TradingProvider>
63
+ ```
50
64
 
51
65
  ### Chart
52
66
 
@@ -64,31 +78,31 @@ Unified toolbar that combines all trading controls in a single row. This is the
64
78
  <TradingToolbar />
65
79
  ```
66
80
 
67
- | Prop | Type | Default | Description |
68
- |------|------|---------|-------------|
69
- | `showCoinSelector` | `boolean` | `true` | Show/hide coin selector |
70
- | `showVolumeControl` | `boolean` | `true` | Show/hide volume control |
71
- | `showStopLoss` | `boolean` | `true` | Show/hide stop loss |
72
- | `showTakeProfit` | `boolean` | `true` | Show/hide take profit |
73
- | `showDrawingTools` | `boolean` | `true` | Show/hide drawing tools |
74
- | `showDividers` | `boolean` | `true` | Show dividers between sections |
75
- | `volume` | `number` | - | Controlled volume value |
76
- | `onVolumeChange` | `function` | - | Volume change callback |
77
- | `stopLoss` | `string` | - | Controlled stop loss value |
78
- | `onStopLossChange` | `function` | - | Stop loss change callback |
79
- | `stopLossEnabled` | `boolean` | - | Controlled SL toggle state |
80
- | `onStopLossEnabledChange` | `function` | - | SL toggle callback |
81
- | `takeProfit` | `string` | - | Controlled take profit value |
82
- | `onTakeProfitChange` | `function` | - | Take profit change callback |
83
- | `takeProfitEnabled` | `boolean` | - | Controlled TP toggle state |
84
- | `onTakeProfitEnabledChange` | `function` | - | TP toggle callback |
85
- | `coinSelectorProps` | `object` | `{}` | Props passed to CoinSelector |
86
- | `volumeControlProps` | `object` | `{}` | Props passed to VolumeControl |
87
- | `stopLossProps` | `object` | `{}` | Props passed to StopLoss |
88
- | `takeProfitProps` | `object` | `{}` | Props passed to TakeProfit |
89
- | `drawingToolsProps` | `object` | `{}` | Props passed to DrawingTools |
90
- | `style` | `object` | - | Custom inline styles |
91
- | `className` | `string` | - | Custom CSS class |
81
+ | Prop | Type | Default | Description |
82
+ | --------------------------- | ---------- | ------- | ------------------------------ |
83
+ | `showCoinSelector` | `boolean` | `true` | Show/hide coin selector |
84
+ | `showVolumeControl` | `boolean` | `true` | Show/hide volume control |
85
+ | `showStopLoss` | `boolean` | `true` | Show/hide stop loss |
86
+ | `showTakeProfit` | `boolean` | `true` | Show/hide take profit |
87
+ | `showDrawingTools` | `boolean` | `true` | Show/hide drawing tools |
88
+ | `showDividers` | `boolean` | `true` | Show dividers between sections |
89
+ | `volume` | `number` | - | Controlled volume value |
90
+ | `onVolumeChange` | `function` | - | Volume change callback |
91
+ | `stopLoss` | `string` | - | Controlled stop loss value |
92
+ | `onStopLossChange` | `function` | - | Stop loss change callback |
93
+ | `stopLossEnabled` | `boolean` | - | Controlled SL toggle state |
94
+ | `onStopLossEnabledChange` | `function` | - | SL toggle callback |
95
+ | `takeProfit` | `string` | - | Controlled take profit value |
96
+ | `onTakeProfitChange` | `function` | - | Take profit change callback |
97
+ | `takeProfitEnabled` | `boolean` | - | Controlled TP toggle state |
98
+ | `onTakeProfitEnabledChange` | `function` | - | TP toggle callback |
99
+ | `coinSelectorProps` | `object` | `{}` | Props passed to CoinSelector |
100
+ | `volumeControlProps` | `object` | `{}` | Props passed to VolumeControl |
101
+ | `stopLossProps` | `object` | `{}` | Props passed to StopLoss |
102
+ | `takeProfitProps` | `object` | `{}` | Props passed to TakeProfit |
103
+ | `drawingToolsProps` | `object` | `{}` | Props passed to DrawingTools |
104
+ | `style` | `object` | - | Custom inline styles |
105
+ | `className` | `string` | - | Custom CSS class |
92
106
 
93
107
  ### CoinSelector
94
108
 
@@ -97,13 +111,13 @@ Searchable dropdown to select trading symbols. Symbols are categorized into Fore
97
111
  ```jsx
98
112
  import { CoinSelector } from '@nabeeltahirdeveloper/chart-sdk'
99
113
 
100
- <CoinSelector />
114
+ ;<CoinSelector />
101
115
  ```
102
116
 
103
- | Prop | Type | Description |
104
- |------|------|-------------|
105
- | `style` | `object` | Custom inline styles |
106
- | `className` | `string` | Custom CSS class |
117
+ | Prop | Type | Description |
118
+ | ----------- | -------- | -------------------- |
119
+ | `style` | `object` | Custom inline styles |
120
+ | `className` | `string` | Custom CSS class |
107
121
 
108
122
  ### VolumeControl
109
123
 
@@ -120,19 +134,19 @@ const [volume, setVolume] = useState(0.1)
120
134
  <VolumeControl value={volume} onChange={setVolume} />
121
135
  ```
122
136
 
123
- | Prop | Type | Default | Description |
124
- |------|------|---------|-------------|
125
- | `value` | `number` | - | Controlled value |
126
- | `onChange` | `function` | - | Change callback `(value: number) => void` |
127
- | `min` | `number` | `0.01` | Minimum value |
128
- | `max` | `number` | `100` | Maximum value |
129
- | `step` | `number` | `0.01` | Step increment |
130
- | `presets` | `number[]` | `[0.01, 0.05, 0.1, 0.5, 1.0]` | Preset buttons |
131
- | `showPresets` | `boolean` | `true` | Show preset buttons |
132
- | `showLabel` | `boolean` | `true` | Show "Vol" label |
133
- | `label` | `string` | `"Vol"` | Custom label text |
134
- | `style` | `object` | - | Custom inline styles |
135
- | `className` | `string` | - | Custom CSS class |
137
+ | Prop | Type | Default | Description |
138
+ | ------------- | ---------- | ----------------------------- | ----------------------------------------- |
139
+ | `value` | `number` | - | Controlled value |
140
+ | `onChange` | `function` | - | Change callback `(value: number) => void` |
141
+ | `min` | `number` | `0.01` | Minimum value |
142
+ | `max` | `number` | `100` | Maximum value |
143
+ | `step` | `number` | `0.01` | Step increment |
144
+ | `presets` | `number[]` | `[0.01, 0.05, 0.1, 0.5, 1.0]` | Preset buttons |
145
+ | `showPresets` | `boolean` | `true` | Show preset buttons |
146
+ | `showLabel` | `boolean` | `true` | Show "Vol" label |
147
+ | `label` | `string` | `"Vol"` | Custom label text |
148
+ | `style` | `object` | - | Custom inline styles |
149
+ | `className` | `string` | - | Custom CSS class |
136
150
 
137
151
  ### StopLoss
138
152
 
@@ -150,20 +164,20 @@ const [slEnabled, setSlEnabled] = useState(false)
150
164
  <StopLoss value={sl} onChange={setSl} enabled={slEnabled} onEnabledChange={setSlEnabled} />
151
165
  ```
152
166
 
153
- | Prop | Type | Default | Description |
154
- |------|------|---------|-------------|
155
- | `value` | `string` | - | Controlled price/pips value |
156
- | `onChange` | `function` | - | Value change callback |
157
- | `enabled` | `boolean` | - | Controlled toggle state |
158
- | `onEnabledChange` | `function` | - | Toggle callback |
159
- | `mode` | `string` | - | Controlled mode: `"price"` or `"pips"` |
160
- | `onModeChange` | `function` | - | Mode change callback |
161
- | `showToggle` | `boolean` | `true` | Show on/off toggle |
162
- | `showModeSwitch` | `boolean` | `true` | Show Price/Pips toggle |
163
- | `showLabel` | `boolean` | `true` | Show "SL" label |
164
- | `label` | `string` | `"SL"` | Custom label text |
165
- | `style` | `object` | - | Custom inline styles |
166
- | `className` | `string` | - | Custom CSS class |
167
+ | Prop | Type | Default | Description |
168
+ | ----------------- | ---------- | ------- | -------------------------------------- |
169
+ | `value` | `string` | - | Controlled price/pips value |
170
+ | `onChange` | `function` | - | Value change callback |
171
+ | `enabled` | `boolean` | - | Controlled toggle state |
172
+ | `onEnabledChange` | `function` | - | Toggle callback |
173
+ | `mode` | `string` | - | Controlled mode: `"price"` or `"pips"` |
174
+ | `onModeChange` | `function` | - | Mode change callback |
175
+ | `showToggle` | `boolean` | `true` | Show on/off toggle |
176
+ | `showModeSwitch` | `boolean` | `true` | Show Price/Pips toggle |
177
+ | `showLabel` | `boolean` | `true` | Show "SL" label |
178
+ | `label` | `string` | `"SL"` | Custom label text |
179
+ | `style` | `object` | - | Custom inline styles |
180
+ | `className` | `string` | - | Custom CSS class |
167
181
 
168
182
  ### TakeProfit
169
183
 
@@ -181,20 +195,20 @@ const [tpEnabled, setTpEnabled] = useState(false)
181
195
  <TakeProfit value={tp} onChange={setTp} enabled={tpEnabled} onEnabledChange={setTpEnabled} />
182
196
  ```
183
197
 
184
- | Prop | Type | Default | Description |
185
- |------|------|---------|-------------|
186
- | `value` | `string` | - | Controlled price/pips value |
187
- | `onChange` | `function` | - | Value change callback |
188
- | `enabled` | `boolean` | - | Controlled toggle state |
189
- | `onEnabledChange` | `function` | - | Toggle callback |
190
- | `mode` | `string` | - | Controlled mode: `"price"` or `"pips"` |
191
- | `onModeChange` | `function` | - | Mode change callback |
192
- | `showToggle` | `boolean` | `true` | Show on/off toggle |
193
- | `showModeSwitch` | `boolean` | `true` | Show Price/Pips toggle |
194
- | `showLabel` | `boolean` | `true` | Show "TP" label |
195
- | `label` | `string` | `"TP"` | Custom label text |
196
- | `style` | `object` | - | Custom inline styles |
197
- | `className` | `string` | - | Custom CSS class |
198
+ | Prop | Type | Default | Description |
199
+ | ----------------- | ---------- | ------- | -------------------------------------- |
200
+ | `value` | `string` | - | Controlled price/pips value |
201
+ | `onChange` | `function` | - | Value change callback |
202
+ | `enabled` | `boolean` | - | Controlled toggle state |
203
+ | `onEnabledChange` | `function` | - | Toggle callback |
204
+ | `mode` | `string` | - | Controlled mode: `"price"` or `"pips"` |
205
+ | `onModeChange` | `function` | - | Mode change callback |
206
+ | `showToggle` | `boolean` | `true` | Show on/off toggle |
207
+ | `showModeSwitch` | `boolean` | `true` | Show Price/Pips toggle |
208
+ | `showLabel` | `boolean` | `true` | Show "TP" label |
209
+ | `label` | `string` | `"TP"` | Custom label text |
210
+ | `style` | `object` | - | Custom inline styles |
211
+ | `className` | `string` | - | Custom CSS class |
198
212
 
199
213
  ### DrawingTools
200
214
 
@@ -205,17 +219,17 @@ Available tools: Crosshair, Trend Line, Parallel Channel, Fibonacci, Rectangle,
205
219
  ```jsx
206
220
  import { DrawingTools } from '@nabeeltahirdeveloper/chart-sdk'
207
221
 
208
- <DrawingTools />
222
+ ;<DrawingTools />
209
223
  ```
210
224
 
211
- | Prop | Type | Default | Description |
212
- |------|------|---------|-------------|
213
- | `showLabel` | `boolean` | `true` | Show "Draw" label |
214
- | `showDelete` | `boolean` | `true` | Show delete all button |
215
- | `showVisibility` | `boolean` | `true` | Show visibility toggle |
216
- | `label` | `string` | `"Draw"` | Custom label text |
217
- | `style` | `object` | - | Custom inline styles |
218
- | `className` | `string` | - | Custom CSS class |
225
+ | Prop | Type | Default | Description |
226
+ | ---------------- | --------- | -------- | ---------------------- |
227
+ | `showLabel` | `boolean` | `true` | Show "Draw" label |
228
+ | `showDelete` | `boolean` | `true` | Show delete all button |
229
+ | `showVisibility` | `boolean` | `true` | Show visibility toggle |
230
+ | `label` | `string` | `"Draw"` | Custom label text |
231
+ | `style` | `object` | - | Custom inline styles |
232
+ | `className` | `string` | - | Custom CSS class |
219
233
 
220
234
  ## Using Components Individually
221
235
 
@@ -223,41 +237,37 @@ Import and compose components however you like:
223
237
 
224
238
  ```jsx
225
239
  import {
226
- TradingProvider,
227
- Chart,
228
- CoinSelector,
229
- VolumeControl,
230
- StopLoss,
231
- TakeProfit,
232
- DrawingTools,
240
+ TradingProvider,
241
+ Chart,
242
+ CoinSelector,
243
+ VolumeControl,
244
+ StopLoss,
245
+ TakeProfit,
246
+ DrawingTools,
233
247
  } from '@nabeeltahirdeveloper/chart-sdk'
234
248
 
235
249
  function App() {
236
- const [volume, setVolume] = useState(0.1)
237
-
238
- return (
239
- <TradingProvider baseUrl="https://your-api-url.com">
240
- <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
241
- <CoinSelector />
242
- <VolumeControl value={volume} onChange={setVolume} />
243
- <StopLoss />
244
- <TakeProfit />
245
- <DrawingTools />
246
- </div>
247
- <Chart />
248
- </TradingProvider>
249
- )
250
+ const [volume, setVolume] = useState(0.1)
251
+
252
+ return (
253
+ <TradingProvider baseUrl='https://your-api-url.com'>
254
+ <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
255
+ <CoinSelector />
256
+ <VolumeControl value={volume} onChange={setVolume} />
257
+ <StopLoss />
258
+ <TakeProfit />
259
+ <DrawingTools />
260
+ </div>
261
+ <Chart />
262
+ </TradingProvider>
263
+ )
250
264
  }
251
265
  ```
252
266
 
253
267
  ## Utilities
254
268
 
255
269
  ```jsx
256
- import {
257
- useTrading,
258
- setChartBaseUrl,
259
- setSocketBaseUrl,
260
- } from '@nabeeltahirdeveloper/chart-sdk'
270
+ import { useTrading, setChartBaseUrl, setSocketBaseUrl } from '@nabeeltahirdeveloper/chart-sdk'
261
271
  ```
262
272
 
263
273
  ### useTrading()
@@ -266,26 +276,26 @@ React hook that returns the full trading context:
266
276
 
267
277
  ```jsx
268
278
  const {
269
- selectedSymbol,
270
- setSelectedSymbol,
271
- selectedTimeframe,
272
- setSelectedTimeframe,
273
- symbols,
274
- symbolsLoading,
275
- orders,
276
- userBalance,
277
- activeTool,
278
- setActiveTool,
279
- chartObjects,
280
- setChartObjects,
281
- drawingsVisible,
282
- setDrawingsVisible,
283
- showGrid,
284
- setShowGrid,
285
- chartType,
286
- setChartType,
287
- currentSymbolData,
288
- accountSummary,
279
+ selectedSymbol,
280
+ setSelectedSymbol,
281
+ selectedTimeframe,
282
+ setSelectedTimeframe,
283
+ symbols,
284
+ symbolsLoading,
285
+ orders,
286
+ userBalance,
287
+ activeTool,
288
+ setActiveTool,
289
+ chartObjects,
290
+ setChartObjects,
291
+ drawingsVisible,
292
+ setDrawingsVisible,
293
+ showGrid,
294
+ setShowGrid,
295
+ chartType,
296
+ setChartType,
297
+ currentSymbolData,
298
+ accountSummary,
289
299
  } = useTrading()
290
300
  ```
291
301
 
package/package.json CHANGED
@@ -1,48 +1,52 @@
1
1
  {
2
- "name": "@nabeeltahirdeveloper/chart-sdk",
3
- "version": "1.2.2",
4
- "main": "dist/chart-sdk.umd.js",
5
- "module": "dist/chart-sdk.es.js",
6
- "exports": {
7
- ".": {
8
- "import": "./dist/chart-sdk.es.js",
9
- "require": "./dist/chart-sdk.umd.js"
10
- }
11
- },
12
- "scripts": {
13
- "test": "echo \"Error: no test specified\" && exit 1",
14
- "build": "vite build"
15
- },
16
- "keywords": [
17
- "chart",
18
- "trading",
19
- "candlestick",
20
- "sdk",
21
- "lightweight-charts",
22
- "react"
23
- ],
24
- "author": "nabeeltahirdeveloper",
25
- "license": "ISC",
26
- "description": "Chart SDK - TradingView-style chart component with real-time Binance data",
27
- "repository": {
28
- "type": "git",
29
- "url": "https://github.com/nabeeltahirdeveloper/chart-sdk"
30
- },
31
- "files": [
32
- "dist",
33
- "README.md"
34
- ],
35
- "devDependencies": {
36
- "@vitejs/plugin-react": "^5.1.2",
37
- "vite": "^7.3.1"
38
- },
39
- "dependencies": {
40
- "axios": "^1.13.4",
41
- "lightweight-charts": "^4.1.0",
42
- "socket.io-client": "^4.8.3"
43
- },
44
- "peerDependencies": {
45
- "react": ">=17.0.0",
46
- "react-dom": ">=17.0.0"
47
- }
2
+ "name": "@nabeeltahirdeveloper/chart-sdk",
3
+ "version": "2.0.1",
4
+ "main": "dist/chart-sdk.umd.js",
5
+ "module": "dist/chart-sdk.es.js",
6
+ "exports": {
7
+ ".": {
8
+ "import": "./dist/chart-sdk.es.js",
9
+ "require": "./dist/chart-sdk.umd.js"
10
+ }
11
+ },
12
+ "scripts": {
13
+ "test": "echo \"Error: no test specified\" && exit 1",
14
+ "build": "vite build",
15
+ "format": "prettier --write ."
16
+ },
17
+ "keywords": [
18
+ "chart",
19
+ "trading",
20
+ "candlestick",
21
+ "sdk",
22
+ "lightweight-charts",
23
+ "react"
24
+ ],
25
+ "author": "nabeeltahirdeveloper",
26
+ "license": "ISC",
27
+ "description": "Chart SDK - TradingView-style chart component with real-time Binance data",
28
+ "repository": {
29
+ "type": "git",
30
+ "url": "https://github.com/nabeeltahirdeveloper/chart-sdk"
31
+ },
32
+ "files": [
33
+ "dist",
34
+ "README.md"
35
+ ],
36
+ "devDependencies": {
37
+ "@vitejs/plugin-react": "^5.1.2",
38
+ "prettier": "^3.8.1",
39
+ "vite": "^7.3.1"
40
+ },
41
+ "dependencies": {
42
+ "axios": "^1.13.4",
43
+ "html2canvas": "^1.4.1",
44
+ "lightweight-charts": "^4.1.0",
45
+ "react-icons": "^5.5.0",
46
+ "socket.io-client": "^4.8.3"
47
+ },
48
+ "peerDependencies": {
49
+ "react": ">=17.0.0",
50
+ "react-dom": ">=17.0.0"
51
+ }
48
52
  }