金融チャート

メインのローソク足チャートと並べて使う、金融ダッシュボード向けの専用レンダラーです。

利用できるレンダラー

レンダラー	用途
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 は金融レンダラーを組み合わせ、テーマに沿った 1 つの戦略レポートにまとめます。 主要な統計の帯、エクイティカーブ、ドローダウンを示すアンダーウォーターパネル、月次リターンのカレンダー ヒートマップで構成され、バックテストの結果から直接作成されます。

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

独自のレイアウトを作りたい場合のために、純粋な計算関数もエクスポートされています： computeMonthlyReturns、computeDrawdownCurve、 toEquityPoints、selectKeyStats。

ヒートマップのレイアウト

HeatmapLayout は、任意の指標の行列に対して、正方形のグリッドとカラースケールを計算するのに役立ちます。