@nabeeltahirdeveloper/chart-sdk 2.0.0 → 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 +144 -150
  2. package/package.json +50 -48
  3. package/dist/chart-sdk.es.js +0 -20354
  4. package/dist/chart-sdk.umd.js +0 -43
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,29 +38,27 @@ 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` | **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`. |
49
- | `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' }` |
50
- | `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 |
51
49
 
52
50
  **Example with custom endpoints:**
51
+
53
52
  ```jsx
54
- <TradingProvider
55
- baseUrl="https://api-mt5-project.com"
56
- endpoints={{
57
- candles: '/api/v1/chart/candles', // MT5 backend path
58
- symbols: '/api/v1/symbols',
59
- trades: '/api/v1/trades',
60
- account: '/api/v1/user/account'
61
- }}
62
- >
63
- <Chart />
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 />
64
62
  </TradingProvider>
65
63
  ```
66
64
 
@@ -80,31 +78,31 @@ Unified toolbar that combines all trading controls in a single row. This is the
80
78
  <TradingToolbar />
81
79
  ```
82
80
 
83
- | Prop | Type | Default | Description |
84
- |------|------|---------|-------------|
85
- | `showCoinSelector` | `boolean` | `true` | Show/hide coin selector |
86
- | `showVolumeControl` | `boolean` | `true` | Show/hide volume control |
87
- | `showStopLoss` | `boolean` | `true` | Show/hide stop loss |
88
- | `showTakeProfit` | `boolean` | `true` | Show/hide take profit |
89
- | `showDrawingTools` | `boolean` | `true` | Show/hide drawing tools |
90
- | `showDividers` | `boolean` | `true` | Show dividers between sections |
91
- | `volume` | `number` | - | Controlled volume value |
92
- | `onVolumeChange` | `function` | - | Volume change callback |
93
- | `stopLoss` | `string` | - | Controlled stop loss value |
94
- | `onStopLossChange` | `function` | - | Stop loss change callback |
95
- | `stopLossEnabled` | `boolean` | - | Controlled SL toggle state |
96
- | `onStopLossEnabledChange` | `function` | - | SL toggle callback |
97
- | `takeProfit` | `string` | - | Controlled take profit value |
98
- | `onTakeProfitChange` | `function` | - | Take profit change callback |
99
- | `takeProfitEnabled` | `boolean` | - | Controlled TP toggle state |
100
- | `onTakeProfitEnabledChange` | `function` | - | TP toggle callback |
101
- | `coinSelectorProps` | `object` | `{}` | Props passed to CoinSelector |
102
- | `volumeControlProps` | `object` | `{}` | Props passed to VolumeControl |
103
- | `stopLossProps` | `object` | `{}` | Props passed to StopLoss |
104
- | `takeProfitProps` | `object` | `{}` | Props passed to TakeProfit |
105
- | `drawingToolsProps` | `object` | `{}` | Props passed to DrawingTools |
106
- | `style` | `object` | - | Custom inline styles |
107
- | `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 |
108
106
 
109
107
  ### CoinSelector
110
108
 
@@ -113,13 +111,13 @@ Searchable dropdown to select trading symbols. Symbols are categorized into Fore
113
111
  ```jsx
114
112
  import { CoinSelector } from '@nabeeltahirdeveloper/chart-sdk'
115
113
 
116
- <CoinSelector />
114
+ ;<CoinSelector />
117
115
  ```
118
116
 
119
- | Prop | Type | Description |
120
- |------|------|-------------|
121
- | `style` | `object` | Custom inline styles |
122
- | `className` | `string` | Custom CSS class |
117
+ | Prop | Type | Description |
118
+ | ----------- | -------- | -------------------- |
119
+ | `style` | `object` | Custom inline styles |
120
+ | `className` | `string` | Custom CSS class |
123
121
 
124
122
  ### VolumeControl
125
123
 
@@ -136,19 +134,19 @@ const [volume, setVolume] = useState(0.1)
136
134
  <VolumeControl value={volume} onChange={setVolume} />
137
135
  ```
138
136
 
139
- | Prop | Type | Default | Description |
140
- |------|------|---------|-------------|
141
- | `value` | `number` | - | Controlled value |
142
- | `onChange` | `function` | - | Change callback `(value: number) => void` |
143
- | `min` | `number` | `0.01` | Minimum value |
144
- | `max` | `number` | `100` | Maximum value |
145
- | `step` | `number` | `0.01` | Step increment |
146
- | `presets` | `number[]` | `[0.01, 0.05, 0.1, 0.5, 1.0]` | Preset buttons |
147
- | `showPresets` | `boolean` | `true` | Show preset buttons |
148
- | `showLabel` | `boolean` | `true` | Show "Vol" label |
149
- | `label` | `string` | `"Vol"` | Custom label text |
150
- | `style` | `object` | - | Custom inline styles |
151
- | `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 |
152
150
 
153
151
  ### StopLoss
154
152
 
@@ -166,20 +164,20 @@ const [slEnabled, setSlEnabled] = useState(false)
166
164
  <StopLoss value={sl} onChange={setSl} enabled={slEnabled} onEnabledChange={setSlEnabled} />
167
165
  ```
168
166
 
169
- | Prop | Type | Default | Description |
170
- |------|------|---------|-------------|
171
- | `value` | `string` | - | Controlled price/pips value |
172
- | `onChange` | `function` | - | Value change callback |
173
- | `enabled` | `boolean` | - | Controlled toggle state |
174
- | `onEnabledChange` | `function` | - | Toggle callback |
175
- | `mode` | `string` | - | Controlled mode: `"price"` or `"pips"` |
176
- | `onModeChange` | `function` | - | Mode change callback |
177
- | `showToggle` | `boolean` | `true` | Show on/off toggle |
178
- | `showModeSwitch` | `boolean` | `true` | Show Price/Pips toggle |
179
- | `showLabel` | `boolean` | `true` | Show "SL" label |
180
- | `label` | `string` | `"SL"` | Custom label text |
181
- | `style` | `object` | - | Custom inline styles |
182
- | `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 |
183
181
 
184
182
  ### TakeProfit
185
183
 
@@ -197,20 +195,20 @@ const [tpEnabled, setTpEnabled] = useState(false)
197
195
  <TakeProfit value={tp} onChange={setTp} enabled={tpEnabled} onEnabledChange={setTpEnabled} />
198
196
  ```
199
197
 
200
- | Prop | Type | Default | Description |
201
- |------|------|---------|-------------|
202
- | `value` | `string` | - | Controlled price/pips value |
203
- | `onChange` | `function` | - | Value change callback |
204
- | `enabled` | `boolean` | - | Controlled toggle state |
205
- | `onEnabledChange` | `function` | - | Toggle callback |
206
- | `mode` | `string` | - | Controlled mode: `"price"` or `"pips"` |
207
- | `onModeChange` | `function` | - | Mode change callback |
208
- | `showToggle` | `boolean` | `true` | Show on/off toggle |
209
- | `showModeSwitch` | `boolean` | `true` | Show Price/Pips toggle |
210
- | `showLabel` | `boolean` | `true` | Show "TP" label |
211
- | `label` | `string` | `"TP"` | Custom label text |
212
- | `style` | `object` | - | Custom inline styles |
213
- | `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 |
214
212
 
215
213
  ### DrawingTools
216
214
 
@@ -221,17 +219,17 @@ Available tools: Crosshair, Trend Line, Parallel Channel, Fibonacci, Rectangle,
221
219
  ```jsx
222
220
  import { DrawingTools } from '@nabeeltahirdeveloper/chart-sdk'
223
221
 
224
- <DrawingTools />
222
+ ;<DrawingTools />
225
223
  ```
226
224
 
227
- | Prop | Type | Default | Description |
228
- |------|------|---------|-------------|
229
- | `showLabel` | `boolean` | `true` | Show "Draw" label |
230
- | `showDelete` | `boolean` | `true` | Show delete all button |
231
- | `showVisibility` | `boolean` | `true` | Show visibility toggle |
232
- | `label` | `string` | `"Draw"` | Custom label text |
233
- | `style` | `object` | - | Custom inline styles |
234
- | `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 |
235
233
 
236
234
  ## Using Components Individually
237
235
 
@@ -239,41 +237,37 @@ Import and compose components however you like:
239
237
 
240
238
  ```jsx
241
239
  import {
242
- TradingProvider,
243
- Chart,
244
- CoinSelector,
245
- VolumeControl,
246
- StopLoss,
247
- TakeProfit,
248
- DrawingTools,
240
+ TradingProvider,
241
+ Chart,
242
+ CoinSelector,
243
+ VolumeControl,
244
+ StopLoss,
245
+ TakeProfit,
246
+ DrawingTools,
249
247
  } from '@nabeeltahirdeveloper/chart-sdk'
250
248
 
251
249
  function App() {
252
- const [volume, setVolume] = useState(0.1)
253
-
254
- return (
255
- <TradingProvider baseUrl="https://your-api-url.com">
256
- <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
257
- <CoinSelector />
258
- <VolumeControl value={volume} onChange={setVolume} />
259
- <StopLoss />
260
- <TakeProfit />
261
- <DrawingTools />
262
- </div>
263
- <Chart />
264
- </TradingProvider>
265
- )
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
+ )
266
264
  }
267
265
  ```
268
266
 
269
267
  ## Utilities
270
268
 
271
269
  ```jsx
272
- import {
273
- useTrading,
274
- setChartBaseUrl,
275
- setSocketBaseUrl,
276
- } from '@nabeeltahirdeveloper/chart-sdk'
270
+ import { useTrading, setChartBaseUrl, setSocketBaseUrl } from '@nabeeltahirdeveloper/chart-sdk'
277
271
  ```
278
272
 
279
273
  ### useTrading()
@@ -282,26 +276,26 @@ React hook that returns the full trading context:
282
276
 
283
277
  ```jsx
284
278
  const {
285
- selectedSymbol,
286
- setSelectedSymbol,
287
- selectedTimeframe,
288
- setSelectedTimeframe,
289
- symbols,
290
- symbolsLoading,
291
- orders,
292
- userBalance,
293
- activeTool,
294
- setActiveTool,
295
- chartObjects,
296
- setChartObjects,
297
- drawingsVisible,
298
- setDrawingsVisible,
299
- showGrid,
300
- setShowGrid,
301
- chartType,
302
- setChartType,
303
- currentSymbolData,
304
- 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,
305
299
  } = useTrading()
306
300
  ```
307
301
 
package/package.json CHANGED
@@ -1,50 +1,52 @@
1
1
  {
2
- "name": "@nabeeltahirdeveloper/chart-sdk",
3
- "version": "2.0.0",
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
- "html2canvas": "^1.4.1",
42
- "lightweight-charts": "^4.1.0",
43
- "react-icons": "^5.5.0",
44
- "socket.io-client": "^4.8.3"
45
- },
46
- "peerDependencies": {
47
- "react": ">=17.0.0",
48
- "react-dom": ">=17.0.0"
49
- }
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
+ }
50
52
  }