@363045841yyt/klinechart 0.5.3 → 0.5.5-alpha.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.
Files changed (8) hide show
  1. package/README.md +140 -140
  2. package/dist/index.cjs +9 -9
  3. package/dist/index.js +1109 -1035
  4. package/dist/klinechart.css +1 -1
  5. package/dist/mock-stock-data.json +1 -0
  6. package/dist/src/components/KLineChart.vue.d.ts +2 -0
  7. package/dist/src/plugin/types.d.ts +12 -0
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,140 +1,140 @@
1
- A lightweight financial charting library with first-class AI Agent support, crisp ResizeObserver-driven rendering, and plugin-based architecture.
2
- <div align="center">
3
-
4
- English | [简体中文](README_CN.md)
5
-
6
- # 📈 KLineChartQuant
7
-
8
- **Crisp Rendering · High Performance · Optimized Interaction**
9
-
10
- [![npm version](https://img.shields.io/npm/v/@363045841yyt/klinechart.svg?style=flat&color=blue)](https://www.npmjs.com/package/@363045841yyt/klinechart) [![npm downloads](https://img.shields.io/npm/dm/@363045841yyt/klinechart.svg?style=flat&color=green)](https://www.npmjs.com/package/@363045841yyt/klinechart) [![license](https://img.shields.io/npm/l/@363045841yyt/klinechart.svg?style=flat&color=orange)](https://github.com/363045841/klinechart/blob/main/LICENSE) [![demo](https://img.shields.io/badge/Demo-Online-purple?style=flat)](http://8.130.98.164/)
11
-
12
- [![qq](https://img.shields.io/badge/QQ群-672011965-blue?style=flat)](https://qm.qq.com/q/672011965) [![tg](https://img.shields.io/badge/Telegram-Join-26A5E4?style=flat&logo=telegram)](https://t.me/+1o-6B-wVRTU2MjQ9)
13
-
14
- </div>
15
-
16
- ---
17
-
18
- A lightweight financial K-line charting library focused on quantitative trading scenarios. **Agent is a first-class citizen** — supports AI Agent direct control of chart operations, providing TradingView-level interaction experience.
19
-
20
- <div align="center">
21
- <img src="https://files.seeusercontent.com/2026/05/13/vF8x/pasted-image-1778672929115.webp" width="400" style="border-radius: 12px; margin: 8px;" />
22
- <img src="https://files.seeusercontent.com/2026/05/13/J8xd/pasted-image-1778672926979.webp" width="400" style="border-radius: 12px; margin: 8px;" />
23
- <br/>
24
- <img src="https://files.seeusercontent.com/2026/05/13/vV4u/pasted-image-1778672925611.webp" width="400" style="border-radius: 12px; margin: 8px;" />
25
- <img src="https://files.seeusercontent.com/2026/05/13/Vyy8/pasted-image-1778672923956.webp" width="400" style="border-radius: 12px; margin: 8px;" />
26
- </div>
27
-
28
- ## ✨ Core Features
29
-
30
- - **Agent First** - Supports AI Agent direct control of charts, zoom, pan, and draw operations can all be called programmatically
31
- - **Crisp Rendering** - Full-chain ResizeObserver driven, physical pixel alignment, K-lines, wicks, and lines are sharp and clear on all DPR screens
32
- - **Plugin Architecture** - Renderer plugin-based design, supporting dynamic registration, configuration, and lifecycle management
33
- - **Custom Markers** - Supports semantic configuration of custom markers and custom information
34
- - **High Performance** - Smoothly handles tens of thousands of data points, no lag during zoom or pan
35
- - **Optimized Interaction** - Stable zoom anchor, precise crosshair cursor, smooth drag
36
-
37
- ## 🚀 Quick Start
38
-
39
- ### Prerequisites
40
-
41
- KLineChart requires a stock data backend. Please ensure `kmap` and `stockbao` are in the same directory:
42
-
43
- ```
44
- workspace/
45
- ├── kmap/ # This repository
46
- └── stockbao/ # Data backend repository
47
- ```
48
-
49
- ### 1. Clone Repositories
50
-
51
- ```bash
52
- git clone https://github.com/363045841/kmap.git
53
- git clone https://github.com/363045841/stockbao.git
54
- ```
55
-
56
- ### 2. Start Data Backend
57
-
58
- ```bash
59
- cd kmap
60
- npm run stockbao
61
- ```
62
-
63
- After startup, the API is available at `http://localhost:8000`
64
-
65
- ### 3. Install and Use
66
-
67
- ```bash
68
- npm install @363045841yyt/klinechart
69
- ```
70
-
71
- ```vue
72
- <script setup lang="ts">
73
- import KLineChart from '@363045841yyt/klinechart';
74
- import type { SemanticChartConfig } from '@363045841yyt/klinechart';
75
-
76
- const config: SemanticChartConfig = {
77
- version: '1.0.0',
78
- data: {
79
- source: 'baostock',
80
- code: 'sh.000001',
81
- startDate: '2024-01-01',
82
- endDate: '2024-12-31',
83
- frequency: 'day'
84
- },
85
- indicators: {
86
- main: [{ type: 'MA', params: [5, 10, 20] }],
87
- sub: [{ type: 'MACD' }]
88
- }
89
- };
90
- </script>
91
-
92
- <template>
93
- <KLineChart
94
- :semanticConfig="config"
95
- :yPaddingPx="24"
96
- />
97
- </template>
98
- ```
99
-
100
- ## 📖 More Documentation
101
-
102
- - [Rendering Engine Architecture](./docs/rendering-engine-architecture.md) - Core rendering pipeline and physical pixel alignment mechanism
103
- - [Plugin System](./docs/PLUGIN_SYSTEM.md) - Extension mechanism and custom development
104
- - [Renderer Development Guide](./docs/renderer-development-guide.md) - Custom renderer development
105
-
106
- ## 📋 Component Props
107
-
108
- | Prop | Type | Default | Description |
109
- |------|------|---------|-------------|
110
- | semanticConfig | `SemanticChartConfig` | **required** | Semantic configuration, the only control source for chart data and indicators |
111
- | yPaddingPx | `number` | 0 | Y-axis padding in pixels |
112
- | minKWidth | `number` | 2 | Minimum K-line width (logical pixels) |
113
- | maxKWidth | `number` | 50 | Maximum K-line width (logical pixels) |
114
- | rightAxisWidth | `number` | 0 | Right price axis width |
115
- | bottomAxisHeight | `number` | 24 | Bottom time axis height |
116
- | priceLabelWidth | `number` | 60 | Price label extra width for showing change percentage |
117
- | zoomLevels | `number` | 20 | Total number of zoom levels |
118
- | initialZoomLevel | `number` | 3 | Initial zoom level (1 ~ zoomLevels) |
119
-
120
- ## 🗺️ Roadmap
121
-
122
- - [x] K-line zoom anchor stability, improved zoom feel
123
- - [x] Right axis detached from scroll container, completely solving clipping issues
124
- - [x] Blank area drawing support
125
- - [x] Limit vertical pan range to prevent viewport from leaving data
126
- - [x] Drawing system
127
- - [x] Right axis zoom
128
- - [x] Latest price line and right axis label style optimization
129
- - [x] Area primitive tools and rendering
130
- - [ ] More advanced drawing tools
131
-
132
- ## 🚀 What's New
133
-
134
- - **v0.5.2** Advanced drawing tools: parallel channel, regression channel, smooth top/bottom, and non-intersecting channel
135
- - **v0.5.0** Complete drawing tool system, supporting line, rectangle, text drawing and style editing
136
- - **v0.4** Modern UI, left toolbar, right axis optimization, TradingView-style zoom feel
137
-
138
- ## 📄 License
139
-
140
- [MIT](LICENSE)
1
+ A lightweight financial charting library with first-class AI Agent support, crisp ResizeObserver-driven rendering, and plugin-based architecture.
2
+ <div align="center">
3
+
4
+ English | [简体中文](README_CN.md)
5
+
6
+ # 📈 KLineChartQuant
7
+
8
+ **Crisp Rendering · High Performance · Optimized Interaction**
9
+
10
+ [![npm version](https://img.shields.io/npm/v/@363045841yyt/klinechart.svg?style=flat&color=blue)](https://www.npmjs.com/package/@363045841yyt/klinechart) [![npm downloads](https://img.shields.io/npm/dm/@363045841yyt/klinechart.svg?style=flat&color=green)](https://www.npmjs.com/package/@363045841yyt/klinechart) [![license](https://img.shields.io/npm/l/@363045841yyt/klinechart.svg?style=flat&color=orange)](https://github.com/363045841/klinechart/blob/main/LICENSE) [![demo](https://img.shields.io/badge/Demo-Online-purple?style=flat)](https://363045841.github.io/KLineChartQuant/)
11
+
12
+ [![qq](https://img.shields.io/badge/QQ-672011965-blue?style=flat)](https://qm.qq.com/q/672011965) [![tg](https://img.shields.io/badge/Telegram-Join-26A5E4?style=flat&logo=telegram)](https://t.me/+1o-6B-wVRTU2MjQ9)
13
+
14
+ </div>
15
+
16
+ ---
17
+
18
+ A lightweight financial K-line charting library focused on quantitative trading scenarios. **Agent is a first-class citizen** — supports AI Agent direct control of chart operations, providing TradingView-level interaction experience.
19
+
20
+ <div align="center">
21
+ <img src="https://files.seeusercontent.com/2026/05/13/vF8x/pasted-image-1778672929115.webp" width="400" style="border-radius: 12px; margin: 8px;" />
22
+ <img src="https://files.seeusercontent.com/2026/05/13/J8xd/pasted-image-1778672926979.webp" width="400" style="border-radius: 12px; margin: 8px;" />
23
+ <br/>
24
+ <img src="https://files.seeusercontent.com/2026/05/13/vV4u/pasted-image-1778672925611.webp" width="400" style="border-radius: 12px; margin: 8px;" />
25
+ <img src="https://files.seeusercontent.com/2026/05/13/Vyy8/pasted-image-1778672923956.webp" width="400" style="border-radius: 12px; margin: 8px;" />
26
+ </div>
27
+
28
+ ## ✨ Core Features
29
+
30
+ - **Agent First** - Supports AI Agent direct control of charts, zoom, pan, and draw operations can all be called programmatically
31
+ - **Crisp Rendering** - Full-chain ResizeObserver driven, physical pixel alignment, K-lines, wicks, and lines are sharp and clear on all DPR screens
32
+ - **Plugin Architecture** - Renderer plugin-based design, supporting dynamic registration, configuration, and lifecycle management
33
+ - **Custom Markers** - Supports semantic configuration of custom markers and custom information
34
+ - **High Performance** - Smoothly handles tens of thousands of data points, no lag during zoom or pan
35
+ - **Optimized Interaction** - Stable zoom anchor, precise crosshair cursor, smooth drag
36
+
37
+ ## 🚀 Quick Start
38
+
39
+ ### Prerequisites
40
+
41
+ KLineChart requires a stock data backend. Please ensure `kmap` and `stockbao` are in the same directory:
42
+
43
+ ```
44
+ workspace/
45
+ ├── kmap/ # This repository
46
+ └── stockbao/ # Data backend repository
47
+ ```
48
+
49
+ ### 1. Clone Repositories
50
+
51
+ ```bash
52
+ git clone https://github.com/363045841/kmap.git
53
+ git clone https://github.com/363045841/stockbao.git
54
+ ```
55
+
56
+ ### 2. Start Data Backend
57
+
58
+ ```bash
59
+ cd kmap
60
+ npm run stockbao
61
+ ```
62
+
63
+ After startup, the API is available at `http://localhost:8000`
64
+
65
+ ### 3. Install and Use
66
+
67
+ ```bash
68
+ npm install @363045841yyt/klinechart
69
+ ```
70
+
71
+ ```vue
72
+ <script setup lang="ts">
73
+ import KLineChart from '@363045841yyt/klinechart';
74
+ import type { SemanticChartConfig } from '@363045841yyt/klinechart';
75
+
76
+ const config: SemanticChartConfig = {
77
+ version: '1.0.0',
78
+ data: {
79
+ source: 'baostock',
80
+ code: 'sh.000001',
81
+ startDate: '2024-01-01',
82
+ endDate: '2024-12-31',
83
+ frequency: 'day'
84
+ },
85
+ indicators: {
86
+ main: [{ type: 'MA', params: [5, 10, 20] }],
87
+ sub: [{ type: 'MACD' }]
88
+ }
89
+ };
90
+ </script>
91
+
92
+ <template>
93
+ <KLineChart
94
+ :semanticConfig="config"
95
+ :yPaddingPx="24"
96
+ />
97
+ </template>
98
+ ```
99
+
100
+ ## 📖 More Documentation
101
+
102
+ - [Rendering Engine Architecture](./docs/rendering-engine-architecture.md) - Core rendering pipeline and physical pixel alignment mechanism
103
+ - [Plugin System](./docs/PLUGIN_SYSTEM.md) - Extension mechanism and custom development
104
+ - [Renderer Development Guide](./docs/renderer-development-guide.md) - Custom renderer development
105
+
106
+ ## 📋 Component Props
107
+
108
+ | Prop | Type | Default | Description |
109
+ |------|------|---------|-------------|
110
+ | semanticConfig | `SemanticChartConfig` | **required** | Semantic configuration, the only control source for chart data and indicators |
111
+ | yPaddingPx | `number` | 0 | Y-axis padding in pixels |
112
+ | minKWidth | `number` | 2 | Minimum K-line width (logical pixels) |
113
+ | maxKWidth | `number` | 50 | Maximum K-line width (logical pixels) |
114
+ | rightAxisWidth | `number` | 0 | Right price axis width |
115
+ | bottomAxisHeight | `number` | 24 | Bottom time axis height |
116
+ | priceLabelWidth | `number` | 60 | Price label extra width for showing change percentage |
117
+ | zoomLevels | `number` | 20 | Total number of zoom levels |
118
+ | initialZoomLevel | `number` | 3 | Initial zoom level (1 ~ zoomLevels) |
119
+
120
+ ## 🗺️ Roadmap
121
+
122
+ - [x] K-line zoom anchor stability, improved zoom feel
123
+ - [x] Right axis detached from scroll container, completely solving clipping issues
124
+ - [x] Blank area drawing support
125
+ - [x] Limit vertical pan range to prevent viewport from leaving data
126
+ - [x] Drawing system
127
+ - [x] Right axis zoom
128
+ - [x] Latest price line and right axis label style optimization
129
+ - [x] Area primitive tools and rendering
130
+ - [ ] More advanced drawing tools
131
+
132
+ ## 🚀 What's New
133
+
134
+ - **v0.5.2** Advanced drawing tools: parallel channel, regression channel, smooth top/bottom, and non-intersecting channel
135
+ - **v0.5.0** Complete drawing tool system, supporting line, rectangle, text drawing and style editing
136
+ - **v0.4** Modern UI, left toolbar, right axis optimization, TradingView-style zoom feel
137
+
138
+ ## 📄 License
139
+
140
+ [MIT](LICENSE)