フレームワーク用ラッパー

React、Vue、Svelte のそれぞれの流儀に沿ったラッパーです。3 つとも同じ props を公開し、内部の Chart インスタンスを受け取れます。

インストール

npm install @tradecanvas/react   # or @tradecanvas/vue · @tradecanvas/svelte
npm install @tradecanvas/chart   # the core (peer of each wrapper)

React

import { TradeCanvas, type TradeCanvasRef } from '@tradecanvas/react'
import { BinanceAdapter } from '@tradecanvas/chart'
import { useRef } from 'react'

function App() {
  const chartRef = useRef<TradeCanvasRef>(null)

  return (
    <TradeCanvas
      ref={chartRef}
      symbol="BTCUSDT"
      timeframe="5m"
      theme="dark"
      adapter={new BinanceAdapter()}
      onReady={(chart) => {
        chart.on('orderPlace', e => console.log(e.payload))
      }}
    />
  )
}

Vue

<script setup lang="ts">
import { TradeCanvas } from '@tradecanvas/vue'
import { BinanceAdapter } from '@tradecanvas/chart'

const adapter = new BinanceAdapter()
</script>

<template>
  <TradeCanvas
    symbol="BTCUSDT"
    timeframe="5m"
    theme="dark"
    :adapter="adapter"
    @ready="(chart) => console.log('ready', chart)"
  />
</template>

Svelte

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import { BinanceAdapter } from '@tradecanvas/chart'

  const adapter = new BinanceAdapter()
</script>

<TradeCanvas
  symbol="BTCUSDT"
  timeframe="5m"
  theme="dark"
  {adapter}
  onReady={(chart) => console.log('ready', chart)}
/>

共通の props

自前の足、入力つきのインジケーター、そして自分からストリームを開かないチャート：

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import type { Chart } from '@tradecanvas/chart'

  let { bars } = $props()
  let chart = $state<Chart | null>(null)
</script>

<TradeCanvas
  data={bars}
  stream={false}
  indicators={['rsi', { id: 'ema', params: { period: 50 } }]}
  features={{ replay: true }}
  bind:chart
/>

Prop	型	説明
`symbol`	`string`	ストリームの銘柄。既定は `'BTCUSDT'`。
`timeframe`	`TimeFrame`	ストリームの時間足。既定は `'5m'`。
`theme`	`'dark' \| 'light' \| Theme`	既定は `'dark'`。
`chartType`	`ChartType`	既定は `'candlestick'`。
`data`	`OHLCBar[]`	自前の足をそのまま表示します。マウント時にあればストリームは開きません。あとから渡した場合、開いているストリームはそのままです（`stream=false` で閉じます）。Vue と Svelte では、同じ配列に追加した足や最後の足の変更はライブの tick として入り、表示位置はそのままです。新しい配列は新しい系列になります。
`adapter`	`DataAdapter`	ストリームの取得元。なければ Binance。
`stream`	`boolean`	`false`：ストリームを一切開かず、`data` を待ちます。既定は `true`。
`historyLimit`	`number`	ストリームが最初に読み込む足の数。既定は 500。
`indicators`	`IndicatorSpec[]`	`'rsi'`、または `{ id, params, position }`。入力が変わったものは新しい入力で付け直します。
`features`	`FeaturesConfig`	チャート上でユーザーができること。マウント後の変更も反映されます。
`signalMarkers / tradeZones`	`配列`	売買のマークと取引。リプレイは届いた時点で表示します。
`signalMarkerStyle / tradeZoneStyle`	`スタイル`	色とラベル。
`overrides`	`ChartStyleOverrides`	キーで指定するチャートの見た目（スタイル設定を参照）。
`autoScale`	`boolean`	既定は `true`。
`watermarkText`	`string`	足の背後に出す透かし文字。
`options`	`Partial<ChartOptions>`	props でカバーされないチャートのオプション（`maxBarSpacing`、`rightMargin`、`renderer`…）。マウント時にコンポーネントの既定値に重ねてマージされます。マウント後の変更は反映されません。`chartType`、`theme`、`autoScale` は常にそれぞれの props から取られます。
`onReady`	`(chart) => void`	チャートのマウント後（Vue は `ready` イベント）。

props だけでは足りない場合は、onReady、ref（React / Vue）、または bind:chart（Svelte）で内部の Chart にアクセスしてください。描画、トレーディング、執行アダプター、プラグイン、サイズ変更できるペインなど、 API のすべてを使えます。