Envoltorios para frameworks

Envoltorios idiomáticos para React, Vue y Svelte. Los tres exponen las mismas props y te dan acceso a la instancia de Chart subyacente.

Instalación

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 comunes

Velas propias, indicadores con sus parámetros y un gráfico que nunca abre un flujo por su cuenta:

<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	Tipo	Notas
symbol	string	El símbolo del flujo. Por defecto 'BTCUSDT'.
timeframe	TimeFrame	La temporalidad del flujo. Por defecto '5m'.
theme	'dark' | 'light' | Theme	Por defecto 'dark'.
chartType	ChartType	Por defecto 'candlestick'.
data	OHLCBar[]	Velas propias, tal cual. Si están al montar, no se abre ningún flujo; si llegan después, un flujo ya abierto sigue (stream=false lo cierra). En Vue y Svelte, una vela añadida al mismo array, o un cambio en la última, entra como un tick en vivo y la vista se queda donde está; un array nuevo es una serie nueva.
adapter	DataAdapter	El origen del flujo; Binance si no se da.
stream	boolean	false: ningún flujo, el gráfico espera a data. Por defecto true.
historyLimit	number	Velas que el flujo carga primero. Por defecto 500.
indicators	IndicatorSpec[]	'rsi', o { id, params, position }; uno cuyos parámetros cambian se vuelve a poner con ellos.
features	FeaturesConfig	Lo que el usuario puede hacer en el gráfico; los cambios tras montarlo también se aplican.
signalMarkers / tradeZones	arrays	Marcas de compra y venta y operaciones; una repetición las muestra al llegar a ellas.
signalMarkerStyle / tradeZoneStyle	estilos	Sus colores y etiquetas.
overrides	ChartStyleOverrides	El aspecto del gráfico por clave (ver Estilos).
autoScale	boolean	Por defecto true.
watermarkText	string	Texto detrás de las velas.
options	Partial<ChartOptions>	Opciones del gráfico que las props no cubren (maxBarSpacing, rightMargin, renderer…), combinadas sobre los valores por defecto del componente al montarlo. Los cambios posteriores no se aplican; chartType, theme y autoScale siempre salen de sus props.
onReady	(chart) => void	Tras montar el gráfico (Vue: el evento ready).

¿Necesitas algo más allá de las props? Accede al Chart subyacente mediante onReady, una ref (React / Vue) o bind:chart (Svelte) para usar la API completa: dibujos, trading, adaptadores de ejecución, plugins, paneles redimensionables y más.