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

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

プロパティ	型	備考
symbol	string	必須。
timeframe	TimeFrame	'1m' | '5m' | '15m' | '1h' | '4h' | '1d'
theme	ThemeName	'dark' | 'light' | 'darkTerminal'
adapter	DataAdapter	ライブストリームのデータソース。
historyLimit	number	最初に読み込むバーの本数。
trading	boolean	トレーディングオーバーレイを有効にします。
onReady	(chart) => void	チャートのマウント後に呼ばれます。

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