diff --git a/README.md b/README.md index cca8c5bb..0ed80d63 100644 --- a/README.md +++ b/README.md @@ -21,23 +21,14 @@ English | [简体中文](README_CN.md) 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.
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
@@ -133,6 +124,51 @@ flowchart TB See [docs/architecture.md](docs/architecture.md) for the full architecture document. +## ⚡ Performance + +KLineChartQuant ships a self-developed rendering engine that submits drawing primitives directly to Canvas, WebGL, or WebGPU, so a single codebase can switch rendering backends seamlessly. The numbers below come from the reproducible benchmark in [`bench/`](bench/README.md) (`node bench/run.mjs`). Default setup: headless Chrome, 1180 × 640 viewport, DPR 2, 4× MSAA, 120 warm-up frames + 600 sampled frames. FPS is `requestAnimationFrame`-observed and capped by the display refresh rate (200 Hz here); Canvas2D has no page-level GPU timer, so its GPU time is empty. + +### WebGPU Command Submission + +Seven command buffers submitted as one batched `queue.submit` versus seven separate submissions: + +| Submission | P50 (ms) | +| --- | --- | +| One `queue.submit` (batched) | 0.002 | +| Seven `queue.submit` (split) | 0.011 | +| Speedup | **5.50×** | + +### MA5 / MA20 / MA60 (Simple Indicator) + +| Visible K-lines | Backend | Prepare P50 (ms) | CPU Submit P50 (ms) | GPU P50 (ms) | FPS | 1% Low | Frame P99 (ms) | Jank | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.200 | 0.300 | N/A | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGL2 | 0.400 | 0.700 | 0.338 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 0.400 | 1.300 | 0.009 | 199.7 | 192.3 | 5.20 | 0.17% | +| 5,000 | Canvas2D | 0.600 | 1.100 | N/A | 106.9 | 65.8 | 15.20 | 24.50% | +| 5,000 | WebGL2 | 1.200 | 1.700 | 0.178 | 200.0 | 192.3 | 5.20 | 0.00% | +| 5,000 | WebGPU | 1.000 | 1.800 | 0.040 | 200.0 | 192.3 | 5.20 | 0.00% | +| 10,000 | Canvas2D | 1.100 | 1.900 | N/A | 97.2 | 65.8 | 15.20 | 30.67% | +| 10,000 | WebGL2 | 1.400 | 1.700 | 0.252 | 198.0 | 190.6 | 5.25 | 0.17% | +| 10,000 | WebGPU | 1.200 | 1.900 | 0.041 | 199.3 | 192.3 | 5.20 | 0.00% | + +### Ichimoku (Complex Rendering Workload) + +| Visible K-lines | Backend | Prepare P50 (ms) | CPU Submit P50 (ms) | GPU P50 (ms) | FPS | 1% Low | Frame P99 (ms) | Jank | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.700 | 0.400 | N/A | 163.3 | 98.0 | 10.20 | 5.67% | +| 1,000 | WebGL2 | 1.900 | 0.700 | 0.339 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 1.500 | 0.900 | 0.014 | 199.3 | 192.3 | 5.20 | 0.00% | +| 5,000 | Canvas2D | 3.400 | 1.700 | N/A | 67.8 | 49.5 | 20.20 | 94.17% | +| 5,000 | WebGL2 | 3.500 | 1.400 | 0.227 | 188.4 | 99.0 | 10.10 | 2.17% | +| 5,000 | WebGPU | 3.500 | 1.500 | 0.054 | 178.6 | 99.0 | 10.10 | 2.50% | +| 10,000 | Canvas2D | 6.700 | 2.900 | N/A | 60.4 | 48.8 | 20.50 | 100.00% | +| 10,000 | WebGL2 | 6.500 | 2.400 | 0.885 | 101.4 | 66.2 | 15.10 | 30.33% | +| 10,000 | WebGPU | 6.800 | 2.700 | 0.158 | 94.9 | 66.2 | 15.10 | 36.17% | + +> **Note**: The frame drops (jank) in the Ichimoku case are not caused by the rendering engine — they stem from a CPU-side bottleneck, which will be optimized in a future release. + + ## 📡 Data Sources KLineChart requires a market data backend. Supported data sources: @@ -414,8 +450,8 @@ Connect via MCP Inspector and call `chart.zoomToLevel`, `indicators.add`, etc. - [x] Right axis zoom - [x] Latest price line and right axis label style optimization - [x] Area primitive tools and rendering -- [ ] More advanced drawing tools -- [ ] Support for minute, multi-day, monthly, and yearly K-line display +- [x] More advanced drawing tools +- [x] Support for minute, multi-day, monthly, and yearly K-line display - [ ] Support convert the drawing to quant code @@ -432,6 +468,8 @@ Connect via MCP Inspector and call `chart.zoomToLevel`, `indicators.add`, etc. ## 🚀 What's New +- **v0.11** Introduced the AI Agent runtime (agent-runtime and AI runtime with OpenAI protocol support and a shared web/Electron Agent workspace) plus `@tool` registration and drawing Agent tools. Drawing gained sub-pane and timeshare support with workspace isolation, multi-select and batch editing, blank-area anchors, inline text editing, marquee group drag, and configurable labels; five-day timeshare, native timeshare indicators, and persistent view workspaces landed alongside WebGL-on-visible-canvas rendering. +- **v0.10** Reworked the data layer around a unified MarketDataProvider, added multi-day timeshare, a unified indicator query pipeline shared by charts and Agents, Fibonacci/rectangle/arrow annotation tools, and promoted comparison to a first-class chart mode. Aligned the Vue/React/Angular bindings with the unified provider contract and shipped multiple rendering and state-consistency fixes. - **v0.9.0** Self-developed Core-layer reactive state model migration, timing issues eliminated - **v0.9.0** Single-path Scene renderer + WebGPU backend (hybrid DOM canvas, no compositeTo), FrameTransaction reactivity, device-lost recovery, auto-fallback WebGPU → WebGL → Canvas2D - **v0.8** Symbol comparison, multi-source data aggregation diff --git a/README_CN.md b/README_CN.md index 9ecac8d1..4f082a96 100644 --- a/README_CN.md +++ b/README_CN.md @@ -21,23 +21,14 @@ 轻量级金融 K 线图表库，专注量化交易场景。**Agent 是一等公民** — 支持 AI Agent 直接控制图表操作，提供 TradingView 级别的交互体验。
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
@@ -133,6 +124,51 @@ flowchart TB 完整架构文档见 [docs/architecture.md](docs/architecture.md)。 +## ⚡ 性能 + +本项目自研了一套渲染引擎，可将渲染原语直接提交到 Canvas、WebGL 或 WebGPU 渲染，一套代码即可无缝切换渲染引擎。以下数据来自 [`bench/`](bench/README.md) 的可复现基准（`node bench/run.mjs`）。默认配置：无头 Chrome，1180 × 640 视口，DPR 2，4× MSAA，预热 120 帧、采集 600 帧。帧率由 `requestAnimationFrame` 观测，受显示器刷新率上限约束（此处 200 Hz）；Canvas2D 无页面级 GPU 计时接口，GPU 时间保留为空。 + +### WebGPU 命令提交 + +7 个命令缓冲通过一次 `queue.submit` 集中提交与 7 次拆分提交对比： + +| 提交方式 | P50 (ms) | +| --- | --- | +| 一次 `queue.submit`（合并） | 0.002 | +| 七次 `queue.submit`（拆分） | 0.011 | +| 加速比 | **5.50×** | + +### MA5 / MA20 / MA60（简单指标） + +| 可见 K 线 | 后端 | 准备 P50 (ms) | CPU 提交 P50 (ms) | GPU P50 (ms) | 帧率 | 1% Low | 帧间隔 P99 (ms) | 卡顿率 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.200 | 0.300 | N/A | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGL2 | 0.400 | 0.700 | 0.338 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 0.400 | 1.300 | 0.009 | 199.7 | 192.3 | 5.20 | 0.17% | +| 5,000 | Canvas2D | 0.600 | 1.100 | N/A | 106.9 | 65.8 | 15.20 | 24.50% | +| 5,000 | WebGL2 | 1.200 | 1.700 | 0.178 | 200.0 | 192.3 | 5.20 | 0.00% | +| 5,000 | WebGPU | 1.000 | 1.800 | 0.040 | 200.0 | 192.3 | 5.20 | 0.00% | +| 10,000 | Canvas2D | 1.100 | 1.900 | N/A | 97.2 | 65.8 | 15.20 | 30.67% | +| 10,000 | WebGL2 | 1.400 | 1.700 | 0.252 | 198.0 | 190.6 | 5.25 | 0.17% | +| 10,000 | WebGPU | 1.200 | 1.900 | 0.041 | 199.3 | 192.3 | 5.20 | 0.00% | + +### Ichimoku（复杂渲染工况） + +| 可见 K 线 | 后端 | 准备 P50 (ms) | CPU 提交 P50 (ms) | GPU P50 (ms) | 帧率 | 1% Low | 帧间隔 P99 (ms) | 卡顿率 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.700 | 0.400 | N/A | 163.3 | 98.0 | 10.20 | 5.67% | +| 1,000 | WebGL2 | 1.900 | 0.700 | 0.339 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 1.500 | 0.900 | 0.014 | 199.3 | 192.3 | 5.20 | 0.00% | +| 5,000 | Canvas2D | 3.400 | 1.700 | N/A | 67.8 | 49.5 | 20.20 | 94.17% | +| 5,000 | WebGL2 | 3.500 | 1.400 | 0.227 | 188.4 | 99.0 | 10.10 | 2.17% | +| 5,000 | WebGPU | 3.500 | 1.500 | 0.054 | 178.6 | 99.0 | 10.10 | 2.50% | +| 10,000 | Canvas2D | 6.700 | 2.900 | N/A | 60.4 | 48.8 | 20.50 | 100.00% | +| 10,000 | WebGL2 | 6.500 | 2.400 | 0.885 | 101.4 | 66.2 | 15.10 | 30.33% | +| 10,000 | WebGPU | 6.800 | 2.700 | 0.158 | 94.9 | 66.2 | 15.10 | 36.17% | + +> **说明**：Ichimoku 场景下的掉帧（jank）并非渲染引擎导致，瓶颈在 CPU 层，后续会进行优化。 + + ## 📡 数据源 KLineChart 需要行情数据后端支持。支持的数据源如下： @@ -414,8 +450,8 @@ pnpm inspect - [x] 右轴缩放 - [x] 最新价线与右轴标签样式优化 - [x] 面图元工具及渲染 -- [ ] 更多高级绘图工具 -- [ ] 支持分钟、多日、月、年 K 线显示 +- [x] 更多高级绘图工具 +- [x] 支持分钟、多日、月、年 K 线显示 - [ ] 支持将绘制的图形转换为量化代码 @@ -432,6 +468,8 @@ pnpm inspect ## 🚀 What's New +- **v0.11** 引入 AI Agent 运行时（agent-runtime 与 AI runtime，支持 OpenAI 协议与浏览器内对话，Web/Electron 共享 Agent 工作区）及 @tool 注册基础设施与绘图 Agent 工具。绘图工具支持子图与分时绘制、workspace 隔离、多选批量编辑、空白区域锚点、单行内联文本编辑、框选成组拖拽与标签位置配置；同时新增五日分时、分时指标原生支持与持久化视图工作区，并完成 WebGL 可见画布直绘等性能优化。 +- **v0.10** 以统一 MarketDataProvider 重构数据层，新增多日分时、图表与 Agent 共享的统一指标查询管线、Fibonacci/矩形/箭头标注工具，并将对比模式升格为独立图表模式。Vue/React/Angular 绑定对齐统一 Provider 契约，同时修复多项渲染与状态一致性问题。 - **v0.9.0** 自研 Core 层响应式模型迁移，时序问题消除 - **v0.9.0** 单路径 Scene 渲染器 + WebGPU 后端（混合 DOM Canvas，无 compositeTo）、FrameTransaction 响应式、设备丢失恢复、自动降级 WebGPU → WebGL → Canvas2D - **v0.8** 支持商品比较，支持多数据源聚合 diff --git a/docs/fragments/_hero.md b/docs/fragments/_hero.md index 71b5f98e..633eebe0 100644 --- a/docs/fragments/_hero.md +++ b/docs/fragments/_hero.md @@ -1,21 +1,12 @@ 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.
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
diff --git a/docs/fragments/_hero.zh-CN.md b/docs/fragments/_hero.zh-CN.md index afd94a1a..c38d79ce 100644 --- a/docs/fragments/_hero.zh-CN.md +++ b/docs/fragments/_hero.zh-CN.md @@ -1,21 +1,12 @@ 轻量级金融 K 线图表库，专注量化交易场景。**Agent 是一等公民** — 支持 AI Agent 直接控制图表操作，提供 TradingView 级别的交互体验。
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
diff --git a/docs/fragments/_performance.md b/docs/fragments/_performance.md new file mode 100644 index 00000000..888d5e0d --- /dev/null +++ b/docs/fragments/_performance.md @@ -0,0 +1,43 @@ +## ⚡ Performance + +KLineChartQuant ships a self-developed rendering engine that submits drawing primitives directly to Canvas, WebGL, or WebGPU, so a single codebase can switch rendering backends seamlessly. The numbers below come from the reproducible benchmark in [`bench/`]({{root}}bench/README.md) (`node bench/run.mjs`). Default setup: headless Chrome, 1180 × 640 viewport, DPR 2, 4× MSAA, 120 warm-up frames + 600 sampled frames. FPS is `requestAnimationFrame`-observed and capped by the display refresh rate (200 Hz here); Canvas2D has no page-level GPU timer, so its GPU time is empty. + +### WebGPU Command Submission + +Seven command buffers submitted as one batched `queue.submit` versus seven separate submissions: + +| Submission | P50 (ms) | +| --- | --- | +| One `queue.submit` (batched) | 0.002 | +| Seven `queue.submit` (split) | 0.011 | +| Speedup | **5.50×** | + +### MA5 / MA20 / MA60 (Simple Indicator) + +| Visible K-lines | Backend | Prepare P50 (ms) | CPU Submit P50 (ms) | GPU P50 (ms) | FPS | 1% Low | Frame P99 (ms) | Jank | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.200 | 0.300 | N/A | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGL2 | 0.400 | 0.700 | 0.338 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 0.400 | 1.300 | 0.009 | 199.7 | 192.3 | 5.20 | 0.17% | +| 5,000 | Canvas2D | 0.600 | 1.100 | N/A | 106.9 | 65.8 | 15.20 | 24.50% | +| 5,000 | WebGL2 | 1.200 | 1.700 | 0.178 | 200.0 | 192.3 | 5.20 | 0.00% | +| 5,000 | WebGPU | 1.000 | 1.800 | 0.040 | 200.0 | 192.3 | 5.20 | 0.00% | +| 10,000 | Canvas2D | 1.100 | 1.900 | N/A | 97.2 | 65.8 | 15.20 | 30.67% | +| 10,000 | WebGL2 | 1.400 | 1.700 | 0.252 | 198.0 | 190.6 | 5.25 | 0.17% | +| 10,000 | WebGPU | 1.200 | 1.900 | 0.041 | 199.3 | 192.3 | 5.20 | 0.00% | + +### Ichimoku (Complex Rendering Workload) + +| Visible K-lines | Backend | Prepare P50 (ms) | CPU Submit P50 (ms) | GPU P50 (ms) | FPS | 1% Low | Frame P99 (ms) | Jank | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.700 | 0.400 | N/A | 163.3 | 98.0 | 10.20 | 5.67% | +| 1,000 | WebGL2 | 1.900 | 0.700 | 0.339 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 1.500 | 0.900 | 0.014 | 199.3 | 192.3 | 5.20 | 0.00% | +| 5,000 | Canvas2D | 3.400 | 1.700 | N/A | 67.8 | 49.5 | 20.20 | 94.17% | +| 5,000 | WebGL2 | 3.500 | 1.400 | 0.227 | 188.4 | 99.0 | 10.10 | 2.17% | +| 5,000 | WebGPU | 3.500 | 1.500 | 0.054 | 178.6 | 99.0 | 10.10 | 2.50% | +| 10,000 | Canvas2D | 6.700 | 2.900 | N/A | 60.4 | 48.8 | 20.50 | 100.00% | +| 10,000 | WebGL2 | 6.500 | 2.400 | 0.885 | 101.4 | 66.2 | 15.10 | 30.33% | +| 10,000 | WebGPU | 6.800 | 2.700 | 0.158 | 94.9 | 66.2 | 15.10 | 36.17% | + +> **Note**: The frame drops (jank) in the Ichimoku case are not caused by the rendering engine — they stem from a CPU-side bottleneck, which will be optimized in a future release. diff --git a/docs/fragments/_performance.zh-CN.md b/docs/fragments/_performance.zh-CN.md new file mode 100644 index 00000000..119a3be0 --- /dev/null +++ b/docs/fragments/_performance.zh-CN.md @@ -0,0 +1,43 @@ +## ⚡ 性能 + +本项目自研了一套渲染引擎，可将渲染原语直接提交到 Canvas、WebGL 或 WebGPU 渲染，一套代码即可无缝切换渲染引擎。以下数据来自 [`bench/`]({{root}}bench/README.md) 的可复现基准（`node bench/run.mjs`）。默认配置：无头 Chrome，1180 × 640 视口，DPR 2，4× MSAA，预热 120 帧、采集 600 帧。帧率由 `requestAnimationFrame` 观测，受显示器刷新率上限约束（此处 200 Hz）；Canvas2D 无页面级 GPU 计时接口，GPU 时间保留为空。 + +### WebGPU 命令提交 + +7 个命令缓冲通过一次 `queue.submit` 集中提交与 7 次拆分提交对比： + +| 提交方式 | P50 (ms) | +| --- | --- | +| 一次 `queue.submit`（合并） | 0.002 | +| 七次 `queue.submit`（拆分） | 0.011 | +| 加速比 | **5.50×** | + +### MA5 / MA20 / MA60（简单指标） + +| 可见 K 线 | 后端 | 准备 P50 (ms) | CPU 提交 P50 (ms) | GPU P50 (ms) | 帧率 | 1% Low | 帧间隔 P99 (ms) | 卡顿率 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.200 | 0.300 | N/A | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGL2 | 0.400 | 0.700 | 0.338 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 0.400 | 1.300 | 0.009 | 199.7 | 192.3 | 5.20 | 0.17% | +| 5,000 | Canvas2D | 0.600 | 1.100 | N/A | 106.9 | 65.8 | 15.20 | 24.50% | +| 5,000 | WebGL2 | 1.200 | 1.700 | 0.178 | 200.0 | 192.3 | 5.20 | 0.00% | +| 5,000 | WebGPU | 1.000 | 1.800 | 0.040 | 200.0 | 192.3 | 5.20 | 0.00% | +| 10,000 | Canvas2D | 1.100 | 1.900 | N/A | 97.2 | 65.8 | 15.20 | 30.67% | +| 10,000 | WebGL2 | 1.400 | 1.700 | 0.252 | 198.0 | 190.6 | 5.25 | 0.17% | +| 10,000 | WebGPU | 1.200 | 1.900 | 0.041 | 199.3 | 192.3 | 5.20 | 0.00% | + +### Ichimoku（复杂渲染工况） + +| 可见 K 线 | 后端 | 准备 P50 (ms) | CPU 提交 P50 (ms) | GPU P50 (ms) | 帧率 | 1% Low | 帧间隔 P99 (ms) | 卡顿率 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.700 | 0.400 | N/A | 163.3 | 98.0 | 10.20 | 5.67% | +| 1,000 | WebGL2 | 1.900 | 0.700 | 0.339 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 1.500 | 0.900 | 0.014 | 199.3 | 192.3 | 5.20 | 0.00% | +| 5,000 | Canvas2D | 3.400 | 1.700 | N/A | 67.8 | 49.5 | 20.20 | 94.17% | +| 5,000 | WebGL2 | 3.500 | 1.400 | 0.227 | 188.4 | 99.0 | 10.10 | 2.17% | +| 5,000 | WebGPU | 3.500 | 1.500 | 0.054 | 178.6 | 99.0 | 10.10 | 2.50% | +| 10,000 | Canvas2D | 6.700 | 2.900 | N/A | 60.4 | 48.8 | 20.50 | 100.00% | +| 10,000 | WebGL2 | 6.500 | 2.400 | 0.885 | 101.4 | 66.2 | 15.10 | 30.33% | +| 10,000 | WebGPU | 6.800 | 2.700 | 0.158 | 94.9 | 66.2 | 15.10 | 36.17% | + +> **说明**：Ichimoku 场景下的掉帧（jank）并非渲染引擎导致，瓶颈在 CPU 层，后续会进行优化。 diff --git a/docs/fragments/_roadmap.md b/docs/fragments/_roadmap.md index 2a7fbc28..3cbd8b78 100644 --- a/docs/fragments/_roadmap.md +++ b/docs/fragments/_roadmap.md @@ -9,6 +9,6 @@ - [x] Right axis zoom - [x] Latest price line and right axis label style optimization - [x] Area primitive tools and rendering -- [ ] More advanced drawing tools -- [ ] Support for minute, multi-day, monthly, and yearly K-line display +- [x] More advanced drawing tools +- [x] Support for minute, multi-day, monthly, and yearly K-line display - [ ] Support convert the drawing to quant code diff --git a/docs/fragments/_roadmap.zh-CN.md b/docs/fragments/_roadmap.zh-CN.md index fda1d4db..0b0d1608 100644 --- a/docs/fragments/_roadmap.zh-CN.md +++ b/docs/fragments/_roadmap.zh-CN.md @@ -9,6 +9,6 @@ - [x] 右轴缩放 - [x] 最新价线与右轴标签样式优化 - [x] 面图元工具及渲染 -- [ ] 更多高级绘图工具 -- [ ] 支持分钟、多日、月、年 K 线显示 +- [x] 更多高级绘图工具 +- [x] 支持分钟、多日、月、年 K 线显示 - [ ] 支持将绘制的图形转换为量化代码 diff --git a/docs/fragments/_whatsnew.md b/docs/fragments/_whatsnew.md index 44d51d6a..6a4f2208 100644 --- a/docs/fragments/_whatsnew.md +++ b/docs/fragments/_whatsnew.md @@ -1,5 +1,7 @@ ## 🚀 What's New +- **v0.11** Introduced the AI Agent runtime (agent-runtime and AI runtime with OpenAI protocol support and a shared web/Electron Agent workspace) plus `@tool` registration and drawing Agent tools. Drawing gained sub-pane and timeshare support with workspace isolation, multi-select and batch editing, blank-area anchors, inline text editing, marquee group drag, and configurable labels; five-day timeshare, native timeshare indicators, and persistent view workspaces landed alongside WebGL-on-visible-canvas rendering. +- **v0.10** Reworked the data layer around a unified MarketDataProvider, added multi-day timeshare, a unified indicator query pipeline shared by charts and Agents, Fibonacci/rectangle/arrow annotation tools, and promoted comparison to a first-class chart mode. Aligned the Vue/React/Angular bindings with the unified provider contract and shipped multiple rendering and state-consistency fixes. - **v0.9.0** Self-developed Core-layer reactive state model migration, timing issues eliminated - **v0.9.0** Single-path Scene renderer + WebGPU backend (hybrid DOM canvas, no compositeTo), FrameTransaction reactivity, device-lost recovery, auto-fallback WebGPU → WebGL → Canvas2D - **v0.8** Symbol comparison, multi-source data aggregation diff --git a/docs/fragments/_whatsnew.zh-CN.md b/docs/fragments/_whatsnew.zh-CN.md index 93c419f3..9fea7b60 100644 --- a/docs/fragments/_whatsnew.zh-CN.md +++ b/docs/fragments/_whatsnew.zh-CN.md @@ -1,5 +1,7 @@ ## 🚀 What's New +- **v0.11** 引入 AI Agent 运行时（agent-runtime 与 AI runtime，支持 OpenAI 协议与浏览器内对话，Web/Electron 共享 Agent 工作区）及 @tool 注册基础设施与绘图 Agent 工具。绘图工具支持子图与分时绘制、workspace 隔离、多选批量编辑、空白区域锚点、单行内联文本编辑、框选成组拖拽与标签位置配置；同时新增五日分时、分时指标原生支持与持久化视图工作区，并完成 WebGL 可见画布直绘等性能优化。 +- **v0.10** 以统一 MarketDataProvider 重构数据层，新增多日分时、图表与 Agent 共享的统一指标查询管线、Fibonacci/矩形/箭头标注工具，并将对比模式升格为独立图表模式。Vue/React/Angular 绑定对齐统一 Provider 契约，同时修复多项渲染与状态一致性问题。 - **v0.9.0** 自研 Core 层响应式模型迁移，时序问题消除 - **v0.9.0** 单路径 Scene 渲染器 + WebGPU 后端（混合 DOM Canvas，无 compositeTo）、FrameTransaction 响应式、设备丢失恢复、自动降级 WebGPU → WebGL → Canvas2D - **v0.8** 支持商品比较，支持多数据源聚合 diff --git a/docs/templates/root.md b/docs/templates/root.md index f1223596..0f9f2397 100644 --- a/docs/templates/root.md +++ b/docs/templates/root.md @@ -8,6 +8,8 @@ {{include:_architecture.md}} +{{include:_performance.md}} + {{include:_data-sources.md}} ## 🚀 Quick Start diff --git a/docs/templates/root.zh-CN.md b/docs/templates/root.zh-CN.md index 191aedd1..fc063a75 100644 --- a/docs/templates/root.zh-CN.md +++ b/docs/templates/root.zh-CN.md @@ -8,6 +8,8 @@ {{include:_architecture.zh-CN.md}} +{{include:_performance.zh-CN.md}} + {{include:_data-sources.zh-CN.md}} ## 🚀 快速开始 diff --git a/docs/templates/vue.md b/docs/templates/vue.md index 8488a9b2..d67debb3 100644 --- a/docs/templates/vue.md +++ b/docs/templates/vue.md @@ -6,6 +6,8 @@ {{include:_features.md}} +{{include:_performance.md}} + {{include:_data-sources.md}} ## 🚀 Quick Start diff --git a/docs/templates/vue.zh-CN.md b/docs/templates/vue.zh-CN.md index fb6b423e..e4ea5d13 100644 --- a/docs/templates/vue.zh-CN.md +++ b/docs/templates/vue.zh-CN.md @@ -6,6 +6,8 @@ {{include:_features.zh-CN.md}} +{{include:_performance.zh-CN.md}} + {{include:_data-sources.zh-CN.md}} ## 🚀 快速开始 diff --git a/packages/angular/README.md b/packages/angular/README.md index 20304801..8c7987c9 100644 --- a/packages/angular/README.md +++ b/packages/angular/README.md @@ -21,23 +21,14 @@ English | [简体中文](README_CN.md) 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.
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
@@ -102,8 +93,8 @@ For full setup including the data backend, see the [root README]../../README.md) - [x] Right axis zoom - [x] Latest price line and right axis label style optimization - [x] Area primitive tools and rendering -- [ ] More advanced drawing tools -- [ ] Support for minute, multi-day, monthly, and yearly K-line display +- [x] More advanced drawing tools +- [x] Support for minute, multi-day, monthly, and yearly K-line display - [ ] Support convert the drawing to quant code diff --git a/packages/react/README.md b/packages/react/README.md index e44206e6..75ebd1fe 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -21,23 +21,14 @@ English | [简体中文](README_CN.md) 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.
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
@@ -96,8 +87,8 @@ For full setup including the data backend, see the [root README]../../README.md) - [x] Right axis zoom - [x] Latest price line and right axis label style optimization - [x] Area primitive tools and rendering -- [ ] More advanced drawing tools -- [ ] Support for minute, multi-day, monthly, and yearly K-line display +- [x] More advanced drawing tools +- [x] Support for minute, multi-day, monthly, and yearly K-line display - [ ] Support convert the drawing to quant code diff --git a/packages/vue/README.md b/packages/vue/README.md index e7544023..bc6a4127 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -21,23 +21,14 @@ English | [简体中文](README_CN.md) 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.
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
@@ -57,6 +48,51 @@ A lightweight financial K-line charting library focused on quantitative trading - **Custom Tooltip** - Fully customizable tooltip via named slots (`#kline-tooltip`, `#marker-tooltip`), with engine-provided hover data, position, and styling +## ⚡ Performance + +KLineChartQuant ships a self-developed rendering engine that submits drawing primitives directly to Canvas, WebGL, or WebGPU, so a single codebase can switch rendering backends seamlessly. The numbers below come from the reproducible benchmark in [`bench/`](../../bench/README.md) (`node bench/run.mjs`). Default setup: headless Chrome, 1180 × 640 viewport, DPR 2, 4× MSAA, 120 warm-up frames + 600 sampled frames. FPS is `requestAnimationFrame`-observed and capped by the display refresh rate (200 Hz here); Canvas2D has no page-level GPU timer, so its GPU time is empty. + +### WebGPU Command Submission + +Seven command buffers submitted as one batched `queue.submit` versus seven separate submissions: + +| Submission | P50 (ms) | +| --- | --- | +| One `queue.submit` (batched) | 0.002 | +| Seven `queue.submit` (split) | 0.011 | +| Speedup | **5.50×** | + +### MA5 / MA20 / MA60 (Simple Indicator) + +| Visible K-lines | Backend | Prepare P50 (ms) | CPU Submit P50 (ms) | GPU P50 (ms) | FPS | 1% Low | Frame P99 (ms) | Jank | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.200 | 0.300 | N/A | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGL2 | 0.400 | 0.700 | 0.338 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 0.400 | 1.300 | 0.009 | 199.7 | 192.3 | 5.20 | 0.17% | +| 5,000 | Canvas2D | 0.600 | 1.100 | N/A | 106.9 | 65.8 | 15.20 | 24.50% | +| 5,000 | WebGL2 | 1.200 | 1.700 | 0.178 | 200.0 | 192.3 | 5.20 | 0.00% | +| 5,000 | WebGPU | 1.000 | 1.800 | 0.040 | 200.0 | 192.3 | 5.20 | 0.00% | +| 10,000 | Canvas2D | 1.100 | 1.900 | N/A | 97.2 | 65.8 | 15.20 | 30.67% | +| 10,000 | WebGL2 | 1.400 | 1.700 | 0.252 | 198.0 | 190.6 | 5.25 | 0.17% | +| 10,000 | WebGPU | 1.200 | 1.900 | 0.041 | 199.3 | 192.3 | 5.20 | 0.00% | + +### Ichimoku (Complex Rendering Workload) + +| Visible K-lines | Backend | Prepare P50 (ms) | CPU Submit P50 (ms) | GPU P50 (ms) | FPS | 1% Low | Frame P99 (ms) | Jank | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.700 | 0.400 | N/A | 163.3 | 98.0 | 10.20 | 5.67% | +| 1,000 | WebGL2 | 1.900 | 0.700 | 0.339 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 1.500 | 0.900 | 0.014 | 199.3 | 192.3 | 5.20 | 0.00% | +| 5,000 | Canvas2D | 3.400 | 1.700 | N/A | 67.8 | 49.5 | 20.20 | 94.17% | +| 5,000 | WebGL2 | 3.500 | 1.400 | 0.227 | 188.4 | 99.0 | 10.10 | 2.17% | +| 5,000 | WebGPU | 3.500 | 1.500 | 0.054 | 178.6 | 99.0 | 10.10 | 2.50% | +| 10,000 | Canvas2D | 6.700 | 2.900 | N/A | 60.4 | 48.8 | 20.50 | 100.00% | +| 10,000 | WebGL2 | 6.500 | 2.400 | 0.885 | 101.4 | 66.2 | 15.10 | 30.33% | +| 10,000 | WebGPU | 6.800 | 2.700 | 0.158 | 94.9 | 66.2 | 15.10 | 36.17% | + +> **Note**: The frame drops (jank) in the Ichimoku case are not caused by the rendering engine — they stem from a CPU-side bottleneck, which will be optimized in a future release. + + ## 📡 Data Sources KLineChart requires a market data backend. Supported data sources: @@ -357,13 +393,15 @@ Positioning and drag stay owned by the chart: with `tooltipPosition === 'adaptiv - [x] Right axis zoom - [x] Latest price line and right axis label style optimization - [x] Area primitive tools and rendering -- [ ] More advanced drawing tools -- [ ] Support for minute, multi-day, monthly, and yearly K-line display +- [x] More advanced drawing tools +- [x] Support for minute, multi-day, monthly, and yearly K-line display - [ ] Support convert the drawing to quant code ## 🚀 What's New +- **v0.11** Introduced the AI Agent runtime (agent-runtime and AI runtime with OpenAI protocol support and a shared web/Electron Agent workspace) plus `@tool` registration and drawing Agent tools. Drawing gained sub-pane and timeshare support with workspace isolation, multi-select and batch editing, blank-area anchors, inline text editing, marquee group drag, and configurable labels; five-day timeshare, native timeshare indicators, and persistent view workspaces landed alongside WebGL-on-visible-canvas rendering. +- **v0.10** Reworked the data layer around a unified MarketDataProvider, added multi-day timeshare, a unified indicator query pipeline shared by charts and Agents, Fibonacci/rectangle/arrow annotation tools, and promoted comparison to a first-class chart mode. Aligned the Vue/React/Angular bindings with the unified provider contract and shipped multiple rendering and state-consistency fixes. - **v0.9.0** Self-developed Core-layer reactive state model migration, timing issues eliminated - **v0.9.0** Single-path Scene renderer + WebGPU backend (hybrid DOM canvas, no compositeTo), FrameTransaction reactivity, device-lost recovery, auto-fallback WebGPU → WebGL → Canvas2D - **v0.8** Symbol comparison, multi-source data aggregation diff --git a/packages/vue/README_CN.md b/packages/vue/README_CN.md index d8b3d07d..b35bea09 100644 --- a/packages/vue/README_CN.md +++ b/packages/vue/README_CN.md @@ -21,23 +21,14 @@ 轻量级金融 K 线图表库，专注量化交易场景。**Agent 是一等公民** — 支持 AI Agent 直接控制图表操作，提供 TradingView 级别的交互体验。
- - + +
- - + +
-
-
- - -
-
-
- - -
- + +
@@ -57,6 +48,51 @@ - **自定义 Tooltip** - 通过命名插槽（`#kline-tooltip`、`#marker-tooltip`）完全自定义 tooltip，引擎提供悬停数据、位置和样式 +## ⚡ 性能 + +本项目自研了一套渲染引擎，可将渲染原语直接提交到 Canvas、WebGL 或 WebGPU 渲染，一套代码即可无缝切换渲染引擎。以下数据来自 [`bench/`](../../bench/README.md) 的可复现基准（`node bench/run.mjs`）。默认配置：无头 Chrome，1180 × 640 视口，DPR 2，4× MSAA，预热 120 帧、采集 600 帧。帧率由 `requestAnimationFrame` 观测，受显示器刷新率上限约束（此处 200 Hz）；Canvas2D 无页面级 GPU 计时接口，GPU 时间保留为空。 + +### WebGPU 命令提交 + +7 个命令缓冲通过一次 `queue.submit` 集中提交与 7 次拆分提交对比： + +| 提交方式 | P50 (ms) | +| --- | --- | +| 一次 `queue.submit`（合并） | 0.002 | +| 七次 `queue.submit`（拆分） | 0.011 | +| 加速比 | **5.50×** | + +### MA5 / MA20 / MA60（简单指标） + +| 可见 K 线 | 后端 | 准备 P50 (ms) | CPU 提交 P50 (ms) | GPU P50 (ms) | 帧率 | 1% Low | 帧间隔 P99 (ms) | 卡顿率 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.200 | 0.300 | N/A | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGL2 | 0.400 | 0.700 | 0.338 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 0.400 | 1.300 | 0.009 | 199.7 | 192.3 | 5.20 | 0.17% | +| 5,000 | Canvas2D | 0.600 | 1.100 | N/A | 106.9 | 65.8 | 15.20 | 24.50% | +| 5,000 | WebGL2 | 1.200 | 1.700 | 0.178 | 200.0 | 192.3 | 5.20 | 0.00% | +| 5,000 | WebGPU | 1.000 | 1.800 | 0.040 | 200.0 | 192.3 | 5.20 | 0.00% | +| 10,000 | Canvas2D | 1.100 | 1.900 | N/A | 97.2 | 65.8 | 15.20 | 30.67% | +| 10,000 | WebGL2 | 1.400 | 1.700 | 0.252 | 198.0 | 190.6 | 5.25 | 0.17% | +| 10,000 | WebGPU | 1.200 | 1.900 | 0.041 | 199.3 | 192.3 | 5.20 | 0.00% | + +### Ichimoku（复杂渲染工况） + +| 可见 K 线 | 后端 | 准备 P50 (ms) | CPU 提交 P50 (ms) | GPU P50 (ms) | 帧率 | 1% Low | 帧间隔 P99 (ms) | 卡顿率 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | +| 1,000 | Canvas2D | 0.700 | 0.400 | N/A | 163.3 | 98.0 | 10.20 | 5.67% | +| 1,000 | WebGL2 | 1.900 | 0.700 | 0.339 | 200.0 | 192.3 | 5.20 | 0.00% | +| 1,000 | WebGPU | 1.500 | 0.900 | 0.014 | 199.3 | 192.3 | 5.20 | 0.00% | +| 5,000 | Canvas2D | 3.400 | 1.700 | N/A | 67.8 | 49.5 | 20.20 | 94.17% | +| 5,000 | WebGL2 | 3.500 | 1.400 | 0.227 | 188.4 | 99.0 | 10.10 | 2.17% | +| 5,000 | WebGPU | 3.500 | 1.500 | 0.054 | 178.6 | 99.0 | 10.10 | 2.50% | +| 10,000 | Canvas2D | 6.700 | 2.900 | N/A | 60.4 | 48.8 | 20.50 | 100.00% | +| 10,000 | WebGL2 | 6.500 | 2.400 | 0.885 | 101.4 | 66.2 | 15.10 | 30.33% | +| 10,000 | WebGPU | 6.800 | 2.700 | 0.158 | 94.9 | 66.2 | 15.10 | 36.17% | + +> **说明**：Ichimoku 场景下的掉帧（jank）并非渲染引擎导致，瓶颈在 CPU 层，后续会进行优化。 + + ## 📡 数据源 KLineChart 需要行情数据后端支持。支持的数据源如下： @@ -357,13 +393,15 @@ createApp(App).mount('#app') - [x] 右轴缩放 - [x] 最新价线与右轴标签样式优化 - [x] 面图元工具及渲染 -- [ ] 更多高级绘图工具 -- [ ] 支持分钟、多日、月、年 K 线显示 +- [x] 更多高级绘图工具 +- [x] 支持分钟、多日、月、年 K 线显示 - [ ] 支持将绘制的图形转换为量化代码 ## 🚀 What's New +- **v0.11** 引入 AI Agent 运行时（agent-runtime 与 AI runtime，支持 OpenAI 协议与浏览器内对话，Web/Electron 共享 Agent 工作区）及 @tool 注册基础设施与绘图 Agent 工具。绘图工具支持子图与分时绘制、workspace 隔离、多选批量编辑、空白区域锚点、单行内联文本编辑、框选成组拖拽与标签位置配置；同时新增五日分时、分时指标原生支持与持久化视图工作区，并完成 WebGL 可见画布直绘等性能优化。 +- **v0.10** 以统一 MarketDataProvider 重构数据层，新增多日分时、图表与 Agent 共享的统一指标查询管线、Fibonacci/矩形/箭头标注工具，并将对比模式升格为独立图表模式。Vue/React/Angular 绑定对齐统一 Provider 契约，同时修复多项渲染与状态一致性问题。 - **v0.9.0** 自研 Core 层响应式模型迁移，时序问题消除 - **v0.9.0** 单路径 Scene 渲染器 + WebGPU 后端（混合 DOM Canvas，无 compositeTo）、FrameTransaction 响应式、设备丢失恢复、自动降级 WebGPU → WebGL → Canvas2D - **v0.8** 支持商品比较，支持多数据源聚合