Biểu đồ tài chính

Các bộ render chuyên dụng cho dashboard tài chính, đặt cạnh biểu đồ nến chính.

Các bộ render có sẵn

Bộ render	Trường hợp dùng
SparklineRenderer	Ô giá thu gọn, danh mục theo dõi, ô KPI.
GaugeRenderer	Đồng hồ đo một giá trị — tâm lý thị trường, rủi ro, mức phơi nhiễm.
HeatmapRenderer	Ma trận tương quan theo ngành / tài sản.
DepthChartRenderer	Độ sâu sổ lệnh L2, bid/ask luỹ kế.
WaterfallRenderer	Phân bổ lãi/lỗ (P&L), các dòng tiền cộng dồn.
EquityCurveRenderer	Đường vốn của backtest, có tô vùng sụt giảm (drawdown).
FinanceCrosshair	Con trỏ chữ thập nhiều trục cho biểu đồ tài chính.

Ví dụ đường vốn

Kết hợp với bộ backtest trong phần phân tích:

import { Backtester } from '@tradecanvas/analytics'
import { EquityCurveRenderer } from '@tradecanvas/chart'

const result = new Backtester({ initialCash: 10_000 }).run(bars, myStrategy)

const renderer = new EquityCurveRenderer(canvas.getContext('2d')!)
renderer.render(result.equityCurve)

Dashboard hiệu suất

PerformanceDashboard ghép các bộ render tài chính thành một báo cáo chiến lược duy nhất, theo giao diện đang dùng — dải chỉ số chính, đường vốn, bảng sụt giảm vốn (underwater) và bản đồ nhiệt lợi nhuận theo tháng dạng lịch — dựng trực tiếp từ kết quả backtest.

import { Backtester } from '@tradecanvas/analytics'
import { PerformanceDashboard } from '@tradecanvas/chart'

const result = new Backtester({ initialCash: 10_000 }).run(bars, myStrategy)

const dash = new PerformanceDashboard(document.getElementById('report')!, {
  result,            // any { equityCurve, metrics } — Backtester output fits
  theme: 'dark',
  title: 'SMA Crossover',
  subtitle: 'BTC/USDT · 1h · 2023',
})

// later: dash.update(newResult) · dash.setTheme('light') · dash.destroy()

Các hàm tính toán thuần cũng được export, nếu bạn muốn tự làm bố cục: computeMonthlyReturns, computeDrawdownCurve, toEquityPoints và selectKeyStats.

Bố cục bản đồ nhiệt

HeatmapLayout giúp tính lưới ô vuông và thang màu cho ma trận chỉ số bất kỳ.