금융 차트

메인 캔들 차트와 함께 쓰는 금융 대시보드용 전용 렌더러입니다.

제공되는 렌더러

렌더러	사용 사례
SparklineRenderer	간결한 시세 표시, 관심 종목, KPI 셀.
GaugeRenderer	단일 값 게이지 — 시장 심리, 리스크, 익스포저.
HeatmapRenderer	섹터 / 자산 상관관계 행렬.
DepthChartRenderer	L2 호가 심도, 누적 매수/매도 잔량.
WaterfallRenderer	손익 기여도 분석, 누적 흐름.
EquityCurveRenderer	낙폭 구간을 음영으로 표시하는 백테스트 자산 곡선.
FinanceCrosshair	금융 차트용 다중 축 십자선.

자산 곡선 예제

분석 백테스터와 함께 사용합니다.

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)

성과 대시보드

PerformanceDashboard는 금융 렌더러를 조합해 테마가 적용된 하나의 전략 보고서를 만듭니다. 주요 통계 띠, 자산 곡선, 언더워터 낙폭 패널, 월별 수익률 달력 히트맵으로 구성되며, 백테스트 결과에서 바로 만들어집니다.

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()

레이아웃을 직접 구성하고 싶다면 순수 계산 함수도 export되어 있습니다: computeMonthlyReturns, computeDrawdownCurve, toEquityPoints, selectKeyStats.

히트맵 레이아웃

HeatmapLayout은 임의의 수치 행렬에 맞는 정사각형 격자와 색상 척도를 계산하도록 도와줍니다.