프레임워크 래퍼

React, Vue, Svelte에 맞게 만든 래퍼입니다. 세 래퍼 모두 같은 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에서는 같은 배열에 추가한 봉이나 마지막 봉의 변경이 실시간 틱으로 들어가고 보는 위치는 그대로입니다. 새 배열은 새 시리즈입니다.
`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를 사용할 수 있습니다.