@simahfud/klinecharts-pro 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -14
- package/dist/index.d.ts +566 -0
- package/dist/klinecharts-pro.css +1 -1
- package/dist/klinecharts-pro.js +3944 -3513
- package/dist/klinecharts-pro.js.map +1 -1
- package/dist/klinecharts-pro.umd.js +1 -1
- package/dist/klinecharts-pro.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -73,7 +73,7 @@ A professional-grade, TradingView-inspired charting component built on [KLineCha
|
|
|
73
73
|
### Using npm
|
|
74
74
|
|
|
75
75
|
```bash
|
|
76
|
-
npm install klinecharts @klinecharts
|
|
76
|
+
npm install klinecharts @simahfud/klinecharts-pro
|
|
77
77
|
```
|
|
78
78
|
|
|
79
79
|
### Using unpkg or jsDelivr (CDN)
|
|
@@ -86,12 +86,12 @@ The library is published as a UMD bundle, so you can load it directly via `<scri
|
|
|
86
86
|
|
|
87
87
|
<!-- KLineChart Pro -->
|
|
88
88
|
<!-- using unpkg -->
|
|
89
|
-
<script src="https://unpkg.com/@klinecharts
|
|
89
|
+
<script src="https://unpkg.com/@simahfud/klinecharts-pro/dist/klinecharts-pro.umd.js"></script>
|
|
90
90
|
<!-- OR using jsDelivr -->
|
|
91
|
-
<script src="https://cdn.jsdelivr.net/npm/@klinecharts
|
|
91
|
+
<script src="https://cdn.jsdelivr.net/npm/@simahfud/klinecharts-pro/dist/klinecharts-pro.umd.js"></script>
|
|
92
92
|
|
|
93
93
|
<!-- CSS styles (required) -->
|
|
94
|
-
<link rel="stylesheet" href="https://unpkg.com/@klinecharts
|
|
94
|
+
<link rel="stylesheet" href="https://unpkg.com/@simahfud/klinecharts-pro/dist/klinecharts-pro.css" />
|
|
95
95
|
```
|
|
96
96
|
|
|
97
97
|
After loading, the global variable `klinechartspro` is available:
|
|
@@ -100,13 +100,13 @@ After loading, the global variable `klinechartspro` is available:
|
|
|
100
100
|
<!DOCTYPE html>
|
|
101
101
|
<html>
|
|
102
102
|
<head>
|
|
103
|
-
<link rel="stylesheet" href="https://unpkg.com/@klinecharts
|
|
103
|
+
<link rel="stylesheet" href="https://unpkg.com/@simahfud/klinecharts-pro/dist/klinecharts-pro.css" />
|
|
104
104
|
</head>
|
|
105
105
|
<body>
|
|
106
106
|
<div id="chart-container" style="width:100%;height:600px;"></div>
|
|
107
107
|
|
|
108
108
|
<script src="https://unpkg.com/klinecharts/dist/klinecharts.min.js"></script>
|
|
109
|
-
<script src="https://unpkg.com/@klinecharts
|
|
109
|
+
<script src="https://unpkg.com/@simahfud/klinecharts-pro/dist/klinecharts-pro.umd.js"></script>
|
|
110
110
|
<script>
|
|
111
111
|
// Access via global: klinechartspro
|
|
112
112
|
const { KLineChartPro, DefaultDatafeed } = klinechartspro
|
|
@@ -140,7 +140,7 @@ npm run build-core # → dist/klinecharts-pro.umd.js + klinecharts-pro.js + kl
|
|
|
140
140
|
## 🚀 Quick Start
|
|
141
141
|
|
|
142
142
|
```typescript
|
|
143
|
-
import { KLineChartPro, DefaultDatafeed } from 'klinecharts-pro'
|
|
143
|
+
import { KLineChartPro, DefaultDatafeed } from '@simahfud/klinecharts-pro'
|
|
144
144
|
|
|
145
145
|
const chart = new KLineChartPro({
|
|
146
146
|
container: 'chart-container',
|
|
@@ -210,7 +210,7 @@ chart.stopReplay()
|
|
|
210
210
|
**Programmatic control via `BarReplayManager`:**
|
|
211
211
|
|
|
212
212
|
```typescript
|
|
213
|
-
import { BarReplayManager } from 'klinecharts-pro'
|
|
213
|
+
import { BarReplayManager } from '@simahfud/klinecharts-pro'
|
|
214
214
|
|
|
215
215
|
const replay = new BarReplayManager(chartWidget, datafeed)
|
|
216
216
|
|
|
@@ -255,7 +255,7 @@ chart.showStyleEditor('overlay_id_123')
|
|
|
255
255
|
### Keyboard Shortcuts
|
|
256
256
|
|
|
257
257
|
```typescript
|
|
258
|
-
import { KeyboardShortcutManager } from 'klinecharts-pro'
|
|
258
|
+
import { KeyboardShortcutManager } from '@simahfud/klinecharts-pro'
|
|
259
259
|
|
|
260
260
|
const shortcuts = new KeyboardShortcutManager(containerElement)
|
|
261
261
|
|
|
@@ -274,7 +274,7 @@ shortcuts.destroy()
|
|
|
274
274
|
### Chart Templates
|
|
275
275
|
|
|
276
276
|
```typescript
|
|
277
|
-
import { ChartTemplateManager } from 'klinecharts-pro'
|
|
277
|
+
import { ChartTemplateManager } from '@simahfud/klinecharts-pro'
|
|
278
278
|
|
|
279
279
|
const templates = new ChartTemplateManager(chartStore)
|
|
280
280
|
|
|
@@ -299,7 +299,7 @@ templates.deleteTemplate('My Scalping Setup')
|
|
|
299
299
|
### Crosshair Sync
|
|
300
300
|
|
|
301
301
|
```typescript
|
|
302
|
-
import { CrosshairSyncManager } from 'klinecharts-pro'
|
|
302
|
+
import { CrosshairSyncManager } from '@simahfud/klinecharts-pro'
|
|
303
303
|
|
|
304
304
|
const sync = new CrosshairSyncManager()
|
|
305
305
|
|
|
@@ -314,7 +314,7 @@ sync.destroy()
|
|
|
314
314
|
### Custom Indicators & Overlays
|
|
315
315
|
|
|
316
316
|
```typescript
|
|
317
|
-
import { registerCustomIndicator, registerCustomOverlay } from 'klinecharts-pro'
|
|
317
|
+
import { registerCustomIndicator, registerCustomOverlay } from '@simahfud/klinecharts-pro'
|
|
318
318
|
|
|
319
319
|
// Register a custom indicator (auto-appears in Indicator menu)
|
|
320
320
|
registerCustomIndicator({
|
|
@@ -341,7 +341,7 @@ chart.removeAlert('alert1')
|
|
|
341
341
|
### Multi-Symbol Comparison
|
|
342
342
|
|
|
343
343
|
```typescript
|
|
344
|
-
import { ComparisonManager } from 'klinecharts-pro'
|
|
344
|
+
import { ComparisonManager } from '@simahfud/klinecharts-pro'
|
|
345
345
|
|
|
346
346
|
const comparison = new ComparisonManager(chartWidget, datafeed)
|
|
347
347
|
await comparison.addSymbol({ ticker: 'MSFT' }, period, from, to)
|
|
@@ -353,10 +353,56 @@ comparison.destroy()
|
|
|
353
353
|
|
|
354
354
|
---
|
|
355
355
|
|
|
356
|
+
## 💾 Settings Save & Database Sync
|
|
357
|
+
|
|
358
|
+
The library provides robust API callbacks to help you synchronize the user's chart configuration and drawings directly to your backend database (e.g., MySQL, MongoDB) in real-time.
|
|
359
|
+
|
|
360
|
+
```typescript
|
|
361
|
+
const chart = new KLineChartPro({
|
|
362
|
+
// ...other options
|
|
363
|
+
onSettingsChange: (settings) => {
|
|
364
|
+
// Fired when theme, timezone, period, or indicators change
|
|
365
|
+
console.log('Settings changed:', settings)
|
|
366
|
+
// Example: api.post('/save-settings', { settings })
|
|
367
|
+
},
|
|
368
|
+
onDrawingsChange: (ticker, drawings) => {
|
|
369
|
+
// Fired when a user adds, modifies, or deletes a drawing/overlay
|
|
370
|
+
console.log(`Drawings updated for ${ticker}:`, drawings)
|
|
371
|
+
// Example: api.post(`/save-drawings/${ticker}`, { drawings })
|
|
372
|
+
}
|
|
373
|
+
})
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
### Applying Data from your Database
|
|
377
|
+
When the user reloads the page or logs in from another device, you can fetch their saved data from your database and inject it into the chart:
|
|
378
|
+
|
|
379
|
+
```typescript
|
|
380
|
+
// 1. Fetch from your DB
|
|
381
|
+
const savedSettings = await api.get('/user/chart-settings')
|
|
382
|
+
const savedDrawings = await api.get(`/user/drawings/${ticker}`)
|
|
383
|
+
|
|
384
|
+
// 2. Wait for chart to be ready
|
|
385
|
+
await chart.ready()
|
|
386
|
+
|
|
387
|
+
// 3. Inject into the chart
|
|
388
|
+
if (savedSettings) {
|
|
389
|
+
chart.setSettings(savedSettings)
|
|
390
|
+
}
|
|
391
|
+
if (savedDrawings) {
|
|
392
|
+
chart.setDrawings(ticker, savedDrawings)
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
// You can also retrieve current state imperatively:
|
|
396
|
+
const currentDrawings = chart.getDrawings(ticker)
|
|
397
|
+
const currentSettings = chart.getSettings()
|
|
398
|
+
```
|
|
399
|
+
|
|
400
|
+
---
|
|
401
|
+
|
|
356
402
|
## 📊 DefaultDatafeed
|
|
357
403
|
|
|
358
404
|
```typescript
|
|
359
|
-
import { DefaultDatafeed } from 'klinecharts-pro'
|
|
405
|
+
import { DefaultDatafeed } from '@simahfud/klinecharts-pro'
|
|
360
406
|
|
|
361
407
|
// Uses Polygon.io API
|
|
362
408
|
const datafeed = new DefaultDatafeed('YOUR_API_KEY')
|