Gráficos financieros

Renderizadores especializados para paneles financieros, que acompañan al gráfico de velas principal.

Renderizadores disponibles

Renderizador	Caso de uso
SparklineRenderer	Cotizaciones compactas, listas de seguimiento, celdas de KPI.
GaugeRenderer	Indicadores de aguja de un solo valor: sentimiento, riesgo, exposición.
HeatmapRenderer	Matrices de correlación entre sectores / activos.
DepthChartRenderer	Profundidad del libro de órdenes L2, compra/venta acumuladas.
WaterfallRenderer	Atribución de ganancias y pérdidas, flujos aditivos.
EquityCurveRenderer	Curva de capital de un backtest con sombreado del drawdown.
FinanceCrosshair	Cruz multieje para gráficos financieros.

Ejemplo de curva de capital

Combínalo con el backtester de análisis:

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)

Panel de rendimiento

PerformanceDashboard combina los renderizadores financieros en un único informe de estrategia con tema: una franja de estadísticas principales, una curva de capital, un panel de drawdown («bajo el agua») y un mapa de calor de rentabilidades mensuales en forma de calendario, todo construido directamente a partir del resultado de un 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()

Las derivaciones puras también se exportan, por si quieres un diseño propio: computeMonthlyReturns, computeDrawdownCurve, toEquityPoints y selectKeyStats.

Disposición del mapa de calor

HeatmapLayout ayuda a calcular cuadrículas cuadradas y escalas de color para matrices de métricas arbitrarias.