npm install romaco-charts

yarn add romaco-charts

pnpm add romaco-charts

<script type="module">
  import { createChart } from 'https://unpkg.com/romaco-charts@latest/dist/index.js';
  const chart = createChart('#chart', { preset: 'dark', data: yourData });
</script>

import { createChart } from 'romaco-charts'
import { Chart, MinimalChart, TradingTerminal, ChartGrid, useRomacoChart } from 'romaco-charts/react'
import { ChartAgentController } from 'romaco-charts/agent'
import type { IDatafeed } from 'romaco-charts/datafeed'
import { FootprintRenderer } from 'romaco-charts/renderers'
import type { PersistableChartState } from 'romaco-charts/profile'
import type { ReplayStatus } from 'romaco-charts/replay'

<div id="chart" style="width: 800px; height: 400px;"></div>

import { createChart } from 'romaco-charts';

const chart = createChart('#chart', {
  preset: 'dark',
  data: [
    { time: 1672531200000, open: 100, high: 105, low: 98, close: 103, volume: 1000 },
    { time: 1672617600000, open: 103, high: 110, low: 101, close: 108, volume: 1500 },
  ]
});

const chart = createChart('#chart', {
  preset: 'dark',
  data: candleData,
  indicators: ['EMA', 'RSI', 'MACD']
});

import { allTemplates } from 'romaco-charts/drawings';

const chart = createChart('#chart', {
  preset: 'dark',
  data: candleData,
  drawings: {
    templates: allTemplates,
    showToolbar: true,
    toolbarVisibility: 'edge-hover',
  }
});

const chart = createChart('#chart', {
  preset: 'dark',
  data: largeDataset,    // 100,000 candles
  dataConflation: true   // Automatic LTTB downsampling
});

import {
  createChart,
  allTemplates,
  registerIndicators,
  EMAIndicator,
  RSIIndicator,
  MACDIndicator,
} from 'romaco-charts';

registerIndicators(EMAIndicator, RSIIndicator, MACDIndicator);

const chart = createChart('#chart', {
  preset: 'professional',
  data: candleData,
  dataConflation: true,
  indicators: [
    { name: 'EMA', params: [12, 26] },
    { name: 'RSI', params: [14] },
    'MACD'
  ],
  drawings: {
    templates: allTemplates,
    position: 'left'
  },
  onCandleClick: (candle, index) => {
    console.log('Clicked candle:', candle);
  }
});

import {
  RomacoChart,
  CandleRenderer,
  HeikinAshiRenderer,
  LineRenderer,
} from 'romaco-charts';

const chart = RomacoChart.create('#chart', { data: candleData });
const canvas = document.querySelector('#chart canvas');
const ctx = canvas?.getContext('2d');

if (ctx) {
  chart.setRenderer(new HeikinAshiRenderer(ctx));
  chart.setRenderer(new LineRenderer(ctx, { lineColor: '#0f766e' }));
}

import { RomacoChart } from 'romaco-charts';
import { EMAIndicator, RSIIndicator, MACDIndicator } from 'romaco-charts/indicators';

RomacoChart.registerIndicators(EMAIndicator, RSIIndicator, MACDIndicator);

const macdId = chart.addIndicator('MACD', { params: [12, 26, 9] });
chart.setIndicatorVisible(macdId, false);
chart.toggleIndicatorVisible(macdId);

chart.updateIndicator(macdId, {
  params: [10, 24, 8],
  styles: {
    macd: { color: '#0ea5e9', lineWidth: 2 },
    signal: { color: '#f97316', lineWidth: 2 },
  },
});

chart.removeIndicator(macdId);

const chart = RomacoChart.create('#chart', {
  data: candleData,
  indicators: [
    { name: 'EMA', params: [12, 26] },
    { name: 'RSI', params: [14] },
    'MACD'
  ]
});

import { RomacoChart } from 'romaco-charts';
import { allTemplates } from 'romaco-charts/drawings';

const chart = RomacoChart.create('#chart', {
  data: candleData,
  drawings: {
    templates: allTemplates,
    showToolbar: true,
    toolbarVisibility: 'edge-hover',
  },
});

const drawingManager = chart.getDrawingManager();
const toolbar = chart.getDrawingToolbar();

chart.setDrawingToolbarVisibilityMode(mode);
chart.setDrawingLineColor(color);
chart.setDrawingLineWidth(width);
chart.setDrawingStyles(styles);
chart.updateDrawingStyle(drawingId, styles);

const json = drawingManager?.exportDrawings();
if (json) {
  localStorage.setItem('romaco:drawings', json);
}

const saved = localStorage.getItem('romaco:drawings');
if (saved) {
  drawingManager?.importDrawings(saved);
}

const chart = RomacoChart.create('#chart', {
  preset: 'romaco',
  data: candleData
});

const chart = RomacoChart.create('#chart', {
  preset: 'dark',
  bullishColor: '#00ff88',
  bearishColor: '#ff4466',
  background: '#0a0a1a'
});

const chart = new RomacoChart(container, {
  theme: {
    background: '#050505',
    textColor: '#d4c5a0',
    fontFamily: 'JetBrains Mono, monospace',
    fontSize: 12,
    crosshair: {
      color: '#b8954f',
      lineStyle: 'dashed'
    },
    border: {
      color: 'rgba(42,42,42,0.6)',
      width: 1,
      radius: 0
    },
    xAxis: {
      gridColor: 'rgba(42, 42, 42, 0.6)',
      labelColor: '#888888'
    },
    yAxis: {
      gridColor: 'rgba(42, 42, 42, 0.6)',
      labelColor: '#888888'
    }
  }
});

chart.setTheme({
  background: '#000000',
  textColor: '#ffffff'
});

chart.applyPreset('romaco');

chart.addIndicator('EMA', { params: [20] });   // main pane
chart.addIndicator('MACD', { params: [12, 26, 9] }); // subpanel
chart.addIndicator('RSI', { params: [14] });       // subpanel
chart.addIndicator('VOL', { params: [5, 10] });    // subpanel

const panels = chart.getPanels();

panels.forEach((panel) => {
  console.log(panel.id, panel.indicatorIds);
});

// Resize a panel to 30% of chart height
if (panels[0]) {
  chart.setPanelHeight(panels[0].id, 0.3);
}

const chart = RomacoChart.create('#chart', {
  data: largeDataset,
  dataConflation: true // Uses LTTB, threshold 2x
});

const chart = RomacoChart.create('#chart', {
  data: largeDataset,
  dataConflation: {
    enabled: true,
    algorithm: 'lttb',    // 'lttb' (accurate) or 'decimation' (fast)
    threshold: 2          // Downsample when points > (canvas width × threshold)
  }
});

import { optimizeDataLTTB, optimizeData } from 'romaco-charts';

const optimized = optimizeDataLTTB(largeData, 1000);
const decimated = optimizeData(largeData, 1000);

chart.setData(optimized);

import { createChart } from 'romaco-charts'

import {
  trendlineTemplate,
  horizontalLineTemplate,
  rectangleTemplate,
} from 'romaco-charts/drawings'

createChart('#chart', {
  data: candleData,
  drawings: {
    templates: [trendlineTemplate, horizontalLineTemplate, rectangleTemplate],
  },
})

import { RomacoChart, EMAIndicator, RSIIndicator } from 'romaco-charts'

RomacoChart.registerIndicators(EMAIndicator, RSIIndicator)

createChart('#chart', {
  data: candleData,
  dataConflation: true,
  renderBackend: 'auto',
  quality: 'high',
})

createChart('#chart', {
  developerMode: true,
  performanceMonitoring: true,
  performanceDebug: {
    enabled: true,
    position: 'top-right',
    updateIntervalMs: 500,
  },
})

interface ChartPlugin extends ChartPluginHooks {
  name: string;
  version?: string;
  description?: string;
}

interface ChartPluginContext {
  getData(): CandleData[];
  getZoomLevel(): number;
  getPan(): { x: number; y: number };
  getDimensions(): { width: number; height: number };
  priceToY(price: number): number;
  yToPrice(y: number): number;
  timestampToX(timestamp: number): number;
  xToTimestamp(x: number): number;
  requestRender(): void;
  on(event: string, callback: Function): void;
  off(event: string, callback: Function): void;
}

interface PluginRenderState {
  visibleData: CandleData[];
  startIndex: number;
  priceRange: { min: number; max: number };
  scaleY: number;
  candleWidth: number;
  panX: number;
  panY: number;
  zoomLevel: number;
  width: number;
  height: number;
}

const crosshairPlugin: ChartPlugin = {
  name: 'crosshair-overlay',
  onAfterRender(ctx, state) {
    const { width, height } = state;
    ctx.strokeStyle = 'rgba(184, 149, 79, 0.4)';
    ctx.lineWidth = 1;
    ctx.setLineDash([4, 4]);

    // Draw vertical line at mouse X
    ctx.beginPath();
    ctx.moveTo(mouseX, 0);
    ctx.lineTo(mouseX, height);
    ctx.stroke();

    // Draw horizontal line at mouse Y
    ctx.beginPath();
    ctx.moveTo(0, mouseY);
    ctx.lineTo(width, mouseY);
    ctx.stroke();
  },
};

chart.installPlugin(crosshairPlugin);

import { MinimalChart, registerDefaultReactIndicators } from 'romaco-charts/react'

registerDefaultReactIndicators()

export function ChartView({ candles }: { candles: Array<any> }) {
  return <MinimalChart data={candles} preset="romaco" style={{ height: 360 }} />
}

import { useState } from 'react'
import { Chart } from 'romaco-charts/react'
import type { RomacoChart } from 'romaco-charts'

export function TradingView({ candles }: { candles: Array<any> }) {
  const [chart, setChart] = useState<RomacoChart | null>(null)

  return (
    <div style={{ height: 520 }}>
      <Chart
        data={candles}
        preset="dark"
        indicators={['EMA', 'RSI']}
        drawings={true}
        onReady={setChart}
      />
      <button onClick={() => chart?.downloadAsPNG('snapshot.png')}>
        Export PNG
      </button>
    </div>
  )
}

import { useRef } from 'react'
import { Chart } from 'romaco-charts/react'
import type { RomacoChartRef } from 'romaco-charts/react'

function ExportableChart({ data }: { data: Array<any> }) {
  const chartRef = useRef<RomacoChartRef>(null)

  return (
    <>
      <button onClick={() => chartRef.current?.api?.resetZoom()}>
        Reset view
      </button>
      <Chart ref={chartRef} data={data} preset="dark" />
    </>
  )
}

import { useMemo, useRef } from 'react';
import { TradingTerminal } from 'romaco-charts/react';
import type { TradingTerminalRef, IDatafeed } from 'romaco-charts/react';
import { createNoopRealtimeSubscription } from 'romaco-charts/datafeed';

export function Desk() {
  const terminalRef = useRef<TradingTerminalRef>(null);
  const datafeed: IDatafeed = useMemo(() => ({
    async searchSymbols(query) {
      const res = await fetch(`/api/symbols?q=${query}`);
      return res.json();
    },
    async resolveSymbol(symbol) {
      return { symbol, supportedResolutions: ['1m','5m','1h','1d'] };
    },
    async getHistory({ symbol, resolution }) {
      const res = await fetch(`/api/history?symbol=${symbol}&tf=${resolution}`);
      return { bars: await res.json() };
    },
    subscribeBars() {
      return createNoopRealtimeSubscription();
    },
  }), []);

  return (
    <div style={{ height: '100vh' }}>
      <TradingTerminal
        ref={terminalRef}
        symbol="AAPL"
        datafeed={datafeed}
        preset="romaco"
        onReady={(chart) => console.log('chart ready', chart)}
        onTimeframeChange={(tf) => console.log('tf', tf)}
        onSymbolChange={(sym) => console.log('sym', sym)}
        onError={(err, ctx) => console.error(ctx, err)}
      />
    </div>
  );
}

import { useEffect, useRef } from 'react'
import { useRomacoChart } from 'romaco-charts/react'

function RealtimeChart({ stream }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const { chart, isReady, error, resize } = useRomacoChart(containerRef, {
    preset: 'dark',
    indicators: ['VOL'],
    autoResize: true,
    registerCommonIndicators: true,
  })

  useEffect(() => {
    if (!chart || !isReady) return
    return stream.onCandle((bar) => chart.appendData([bar]))
  }, [chart, isReady, stream])

  return <div ref={containerRef} style={{ height: 500 }} />
}

import { ChartGrid } from 'romaco-charts/react'

const cells = [
  { id: 'btc-1m', symbol: 'BTC/USDT', timeframe: '1m', data: candles1m },
  { id: 'btc-15m', symbol: 'BTC/USDT', timeframe: '15m', data: candles15m },
]

<ChartGrid
  cells={cells}
  layout="2x1"
  preset="dark"
  showHeaders={true}
  onCellTimeframeChange={(cellId, tf) => console.log(cellId, tf)}
  syncOptions={{ symbol: true, timeRange: true }}
/>

import { registerIndicators } from 'romaco-charts/react'
import { DMIIndicator, WRIndicator } from 'romaco-charts/indicators'

registerIndicators(DMIIndicator, WRIndicator)

const [chart, setChart] = useState<RomacoChart | null>(null)

const agent = useChartAgent({
  chart,
  websocketUrl: 'wss://example.com/ws/chat',
  sessionId: 'desk-01',
})

const { positions, balance, equity, stats, openLong, openShort, closePosition }
  = usePaperTrading(chart, {
    autoEnable: true,
    config: { initialBalance: 10_000 },
  })

import type {
  IDatafeed,
  HistoryRequest,
  HistoryResponse,
  IRealtimeSubscription,
  RealtimeConnectionState,
  ResolvedSymbol,
  SymbolSearchResult,
} from 'romaco-charts/react'; // or 'romaco-charts/datafeed'

interface IDatafeed<TBar = CandleDataInput> {
  searchSymbols(query: string, signal?: AbortSignal): Promise<SymbolSearchResult[]>
  resolveSymbol(symbol: string, signal?: AbortSignal): Promise<ResolvedSymbol>
  getHistory(request: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse<TBar>>
  subscribeBars(
    symbol: string,
    resolution: string,
    onBar: (bar: TBar) => void,
    onStatusChange?: (state: RealtimeConnectionState) => void
  ): IRealtimeSubscription
}

type RealtimeConnectionState = 'connected' | 'disconnected' | 'stale'

interface SymbolSearchResult {
  symbol: string
  name: string
  exchange?: string
  type?: 'crypto' | 'stock' | 'forex' | 'futures' | 'index'
}

interface ResolvedSymbol {
  symbol: string
  priceScale?: number
  timezone?: string
  session?: string
  sessionMetadata?: {
    timezone?: string
    sessions?: Array<{
      id: string
      label?: string
      start: string
      end: string
      days?: number[]
      color?: string
    }>
  }
  supportedResolutions: string[]
}

interface HistoryRequest {
  symbol: string
  resolution: string
  from: number
  to: number
  cursor?: string
  limit?: number
}

interface HistoryResponse<TBar = CandleDataInput> {
  bars: TBar[]
  nextCursor?: string
  partial?: boolean
}

interface IRealtimeSubscription {
  unsubscribe(): void
  readonly closed?: boolean
}

import type { IDatafeed } from 'romaco-charts/react';
import { createNoopRealtimeSubscription } from 'romaco-charts/datafeed';

export const datafeed: IDatafeed = {
  async searchSymbols(query) {
    const res = await fetch(`/api/symbols?q=${encodeURIComponent(query)}`);
    return res.json();
  },

  async resolveSymbol(symbol) {
    const res = await fetch(`/api/symbols/${encodeURIComponent(symbol)}`);
    return res.json();
  },

  async getHistory(request) {
    const res = await fetch('/api/history', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(request),
    });
    return res.json();
  },

  subscribeBars(symbol, resolution, onBar, onStatusChange) {
    const ws = new WebSocket(`wss://example.com/stream?symbol=${symbol}&resolution=${resolution}`);

    ws.onopen = () => onStatusChange?.('connected');
    ws.onclose = () => onStatusChange?.('disconnected');
    ws.onerror = () => onStatusChange?.('stale');
    ws.onmessage = (event) => onBar(JSON.parse(event.data));

    return {
      unsubscribe() {
        ws.close();
      },
      get closed() {
        return ws.readyState === WebSocket.CLOSED;
      },
    };
  },
};

import { createChart } from 'romaco-charts'

const chart = createChart('#chart', { preset: 'dark' })
chart.setDatafeed(datafeed)

const symbol = await datafeed.resolveSymbol('BTCUSDT')
chart.setSymbol(symbol.symbol)

const history = await datafeed.getHistory({
  symbol: symbol.symbol,
  resolution: '1h',
  from: 1717000000,
  to: 1717600000,
})

chart.setData(history.bars)

const sub = datafeed.subscribeBars(symbol.symbol, '1h', (bar) => {
  chart.updateData(bar)
})

window.addEventListener('beforeunload', () => sub.unsubscribe(), { once: true })

import { createNoopRealtimeSubscription } from 'romaco-charts/datafeed';

subscribeBars() {
  return createNoopRealtimeSubscription();
}

import { ChartAgentController } from 'romaco-charts/agent';

const controller = new ChartAgentController(chart);

controller.getChartContext();        // snapshot of runtime state
controller.getChartCapabilities();   // available actions and flags
controller.executeAction({ action: 'addIndicator', indicatorType: 'EMA', params: [20] });
controller.executeActions([{ action: 'setRenderQuality', quality: 'high' }]);
controller.exportSnapshot({ includeSubpanels: true, format: 'png' });
controller.saveChartState();
controller.loadChartState(savedState);

interface AgentRequest {
  requestId?: string
  protocolVersion?: number
  dryRun?: boolean
  type: 'chat_message' | 'context_update' | 'snapshot'
  sessionId: string
  message?: string
  chartContext?: ChartContext
  snapshot?: string
}

interface AgentResponse {
  requestId?: string
  protocolVersion?: number
  dryRun?: boolean
  type: 'chat_response' | 'action_batch' | 'error'
  sessionId: string
  textResponse?: string
  chartActions?: ChartAction[]
  actionResults?: ActionResult[]
  executedChartActions?: ChartAction[]
  pendingChartActions?: ChartAction[]
  capabilities?: ChartCapabilities
  error?: string
}

import { useState } from 'react'
import { Chart, useChartAgent } from 'romaco-charts/react'
import type { RomacoChart } from 'romaco-charts'

function AgentTerminal({ data }: { data: Array<any> }) {
  const [chart, setChart] = useState<RomacoChart | null>(null)

  const {
    sendMessage,
    sendSnapshot,
    executeActions,
    isConnected,
    isLoading,
    lastResponse,
  } = useChartAgent({
    chart,
    websocketUrl: 'wss://example.com/ws/chat',
    sessionId: 'desk-01',
    autoExecuteActions: false,
  })

  return (
    <>
      <Chart data={data} preset="dark" onReady={setChart} />
      <button disabled={!isConnected || isLoading} onClick={() => sendMessage('Add RSI and a trendline')}>
        Ask AI
      </button>
      <button onClick={() => executeActions(lastResponse?.pendingChartActions)}>
        Apply pending actions
      </button>
    </>
  )
}

import { createChart } from 'romaco-charts'

const chart = createChart('#chart', { preset: 'dark' })

const manager = chart.enablePaperTrading({
  initialBalance: 10_000,
  defaultSymbol: 'BTC/USDT',
  commissionRate: 0.001,
})

chart.openLong(0.1, 40_000, 45_000);
chart.openShort(0.2, 44_000, 39_500);

chart.openPosition({
  side: 'long',
  quantity: 1,
  stopLoss: 41_000,
  takeProfit: 47_000,
});

chart.closePosition(positionId);

manager.on('positionOpened', (p) => console.log(p.id));
manager.on('positionClosed', (p) => console.log(p.realizedPnL));
manager.on('stopLossHit',    (p) => console.log(p.symbol));
manager.on('takeProfitHit',  (p) => console.log(p.symbol));

// Recover later
chart.getPaperTradingManager();
chart.isPaperTradingEnabled();

chart.enablePaperTrading({
  initialBalance: 10_000,
  renderOverlay: false,
});

import { usePaperTrading } from 'romaco-charts/react'

function TradingPanel({ chart }) {
  const {
    positions,
    balance,
    equity,
    stats,        // winRate, avgWin, avgLoss, profitFactor, drawdown
    openLong,
    openShort,
    closePosition,
  } = usePaperTrading(chart, {
    autoEnable: true,
    config: { initialBalance: 10_000 },
  })

  return (
    <div>
      <p>Balance: ${balance} · Equity: ${equity}</p>
      <p>Win rate: {stats.winRate}%</p>
      <button onClick={() => openLong(0.1)}>Long</button>
      <button onClick={() => openShort(0.1)}>Short</button>
      {positions.map((p) => (
        <button key={p.id} onClick={() => closePosition(p.id)}>
          Close {p.id}
        </button>
      ))}
    </div>
  )
}

React component
  └─ TradingTerminal (datafeed={datafeed})
        └─ createDatafeed() — IDatafeed adapter
              ├─ REST SDK (/history)
              └─ WebSocket layer (ws://.../prices)

import type { IDatafeed } from 'romaco-charts/react'

const SUPPORTED_RESOLUTIONS = ['1m', '5m', '15m', '30m', '1h', '4h', '1d', '1w', '1mo']

function isAbortError(error: unknown): boolean {
  return Boolean(error && typeof error === 'object' && 'name' in error && error.name === 'AbortError')
}

function normalizeError(error: unknown, fallback: string): Error {
  if (error instanceof Error) return error
  if (typeof error === 'string' && error.trim()) return new Error(error)
  return new Error(fallback)
}

export function createDatafeed(): IDatafeed {
  return {
    async searchSymbols(query, signal) {
      if (!query || query.length < 2) return []
      try {
        const res = await fetch(`/api/symbols?q=${query}`, { signal })
        const results = await res.json()
        return (results ?? []).map((r: any) => ({
          symbol: r.symbol,
          name: r.name ?? r.symbol,
          type: r.type ?? 'stock',
        }))
      } catch (error) {
        if (isAbortError(error)) throw error
        return []
      }
    },

    async resolveSymbol(symbol) {
      return { symbol, supportedResolutions: SUPPORTED_RESOLUTIONS }
    },

    async getHistory(request, signal) {
      const { symbol, resolution, from, to, cursor, limit } = request

      const toMs = (t: number) => (t > 1e12 ? t : t * 1000)
      const startDate = from ? new Date(toMs(from)).toISOString() : undefined
      const endDate = to ? new Date(toMs(to)).toISOString() : undefined

      try {
        const res = await fetch('/api/history', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({ symbol, resolution, startDate, endDate, cursor, limit }),
          signal,
        })
        const raw = await res.json()

        if (!raw || !Array.isArray(raw.bars)) {
          throw new Error(`Invalid history response for ${symbol} (${resolution})`)
        }

        const bars = raw.bars.map((d: any) => ({
          time: new Date(d.date).getTime(),
          open: Number(d.open),
          high: Number(d.high),
          low: Number(d.low),
          close: Number(d.close),
          volume: Number(d.volume ?? 0),
        }))

        return {
          bars,
          nextCursor: raw.nextCursor,
          partial: Boolean(raw.partial),
        }
      } catch (error) {
        if (isAbortError(error)) throw error
        throw normalizeError(error, `Failed to load history for ${symbol} (${resolution})`)
      }
    },

    subscribeBars(symbol, resolution, onBar, onStatusChange) {
      const normalizedSymbol = symbol.trim().toUpperCase()
      let closed = false

      const ws = new WebSocket(`wss://example.com/stream?symbol=${symbol}&resolution=${resolution}`)

      ws.onopen = () => { if (!closed) onStatusChange?.('connected') }
      ws.onclose = () => { if (!closed) onStatusChange?.('disconnected') }
      ws.onerror = () => { if (!closed) onStatusChange?.('stale') }
      ws.onmessage = (event) => {
        if (closed) return
        onBar(JSON.parse(event.data))
      }

      return {
        get closed() { return closed },
        unsubscribe() {
          if (closed) return
          closed = true
          ws.close()
        },
      }
    },
  }
}

'use client'

import { useMemo, useRef } from 'react'
import { TradingTerminal } from 'romaco-charts/react'
import type { TradingTerminalRef } from 'romaco-charts/react'
import { createDatafeed } from '../lib/chartDatafeed'

interface ChartWidgetProps {
  symbol: string
  onSymbolChange?: (symbol: string) => void
  onTimeframeChange?: (timeframe: string) => void
  className?: string
}

export function ChartWidget({ symbol, onSymbolChange, onTimeframeChange, className = '' }: ChartWidgetProps) {
  const terminalRef = useRef<TradingTerminalRef>(null)
  const datafeed = useMemo(() => createDatafeed(), [])

  return (
    <div className={`w-full h-full flex flex-col overflow-hidden ${className}`}>
      <TradingTerminal
        ref={terminalRef}
        symbol={symbol}
        datafeed={datafeed}
        preset="romaco"
        onSymbolChange={onSymbolChange}
        onTimeframeChange={onTimeframeChange}
        onError={(error, context) => {
          console.error(`[chart:${context}]`, error.message)
        }}
        historyBackfillTrigger="pan"
        // maxBars={5000}
      />
    </div>
  )
}

import { useState } from 'react'
import { ChartWidget } from './components/ChartWidget'

export function Dashboard() {
  const [symbol, setSymbol] = useState('AAPL')

  return (
    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <header style={{ padding: 12 }}>
        <h1>Active: {symbol}</h1>
      </header>
      <main style={{ flex: 1, minHeight: 0 }}>
        <ChartWidget symbol={symbol} onSymbolChange={setSymbol} />
      </main>
    </div>
  )
}

'use client' // Required — TradingTerminal touches document, window, and DOM canvas

import dynamic from 'next/dynamic'

const ChartWidget = dynamic(
  () => import('./ChartWidget').then((m) => m.ChartWidget),
  { ssr: false, loading: () => <div style={{ height: '100%' }}>Loading chart…</div> }
)

function handleChartError(error: Error, context: 'history' | 'realtime' | 'search') {
  switch (context) {
    case 'history':
      toast.error(`Could not load chart history: ${error.message}`)
      break
    case 'realtime':
      toast.warn('Realtime feed disconnected, retrying…')
      break
    case 'search':
      console.debug('[chart:search]', error)
      break
  }
}

async function fetchPriceHistory(symbol, resolution, opts) {
  const token = await getAccessToken()
  const res = await fetch(`/api/history?symbol=${symbol}&resolution=${resolution}`, {
    headers: { Authorization: `Bearer ${token}` },
    signal: opts.signal,
  })
  if (!res.ok) throw new Error(`History request failed: ${res.status}`)
  return res.json()
}

async getHistory(request, signal) {
  const response = await fetch('/api/history', {
    method: 'POST',
    body: JSON.stringify(request),
    signal,
  })
  const data = await response.json()
  return {
    bars: data.bars,
    nextCursor: data.next_cursor,  // chart passes this back on next backfill request
  }
}

interface SimpleChartConfig {
  preset?: 'dark' | 'light' | 'bloomberg' | 'neon' | 'professional' | 'classic' | 'romaco'
  data?: CandleDataInput[]
  width?: number
  height?: number

  background?: string
  bullishColor?: string
  bearishColor?: string
  wickColor?: string
  gridColor?: string
  textColor?: string

  enableZoom?: boolean
  enablePanning?: boolean
  autoFit?: boolean
  touchpadOptions?: {
    naturalScrolling?: boolean
    pinchZoomSensitivity?: number
    enableHorizontalScroll?: boolean
    scrollSensitivity?: number
  }

  drawings?: boolean | DrawingsConfig
  indicators?: Array<string | IndicatorConfig>

  renderBackend?: 'auto' | 'canvas2d' | 'webgpu'
  quality?: 'low' | 'high' | 'magnifique'
  developerMode?: boolean
  performanceMonitoring?: boolean
  performanceDebug?: boolean | PerformanceDebugOptions
  dataConflation?: boolean
  locale?: string
  host?: ChartHostContracts

  onCandleClick?: (candle: CandleData, index: number) => void
  onZoom?: (zoomLevel: number) => void
  onPan?: (panX: number, panY: number) => void
  onCrosshairMove?: (candle: CandleData | null, x: number, y: number) => void
}

interface ChartOptions {
  width?: number
  height?: number
  theme?: ChartTheme
  candleStyle?: CandleStyle

  enableZoom?: boolean
  enablePanning?: boolean
  touchpadOptions?: { /* same as SimpleChartConfig */ }

  candleRenderer?: CandleRendererInterface
  minCandleWidth?: number
  maxCandleWidth?: number
  priceScaleWidth?: number
  timeScaleHeight?: number
  resizablePriceScale?: boolean
  resizableTimeScale?: boolean
  margins?: [number, number, number, number]
  watermark?: Watermark
  showPriceScale?: boolean
  showTimeScale?: boolean

  autoFitEnabled?: boolean
  autoFitPadding?: number

  onCandleClick?: (candle: CandleData, index: number) => void
  onZoom?: (zoomLevel: number) => void
  onPan?: (panX: number, panY: number) => void
  onCrosshairMove?: (candle: CandleData | null, x: number, y: number) => void

  renderQuality?: 'low' | 'high' | 'magnifique'
  developerMode?: boolean
  performanceMonitoring?: boolean
  performanceDebug?: boolean | PerformanceDebugOptions
  dataConflation?: boolean | DataConflationConfig
  renderBackend?: 'auto' | 'canvas2d' | 'webgpu'
}

interface CandleData {
  time: number
  timestamp: number
  open: number
  high: number
  low: number
  close: number
  volume?: number
}

type CandleDataInput =
  | { time: number; timestamp?: number; open: number; high: number; low: number; close: number; volume?: number }
  | { timestamp: number; time?: number; open: number; high: number; low: number; close: number; volume?: number }

interface ChartTheme {
  background?: string | string[]
  textColor?: string
  fontFamily?: string
  fontSize?: number
  crosshair?: CrosshairOptions
  border?: { color?: string; width?: number; radius?: number }
  xAxis?: AxisOptions
  yAxis?: AxisOptions
}

interface CandleStyle {
  bullishColor?: string
  bearishColor?: string
  borderColor?: string
  borderWidth?: number
  wickColor?: string
  opacity?: number
}

interface DrawingsConfig {
  enabled?: boolean
  position?: 'left' | 'right'
  templates?: DrawingTemplate[]
}

interface IndicatorConfig {
  name: string
  params?: number[]
  styles?: Record<string, unknown>
}

new RomacoChart(container: HTMLElement, options?: ChartOptions)

interface ChartContext {
  visibleRange: VisibleRange
  visibleCandles: CandleData[]
  existingDrawings: DrawingSummary[]
  existingIndicators: IndicatorSummary[]
  chartDimensions: { width: number; height: number }
  currentPrice?: number
  currentTheme?: string
  pan?: { x: number; y: number }
  locale?: string
  timezone?: string
  renderBackend?: 'canvas2d' | 'webgpu'
  renderQuality?: RenderQuality
  availableDrawingTypes?: string[]
  availableIndicatorTypes?: string[]
  activePlugins?: string[]
  panels?: PanelSummary[]
  capabilities?: ChartCapabilities
  paperTrading?: PaperTradingSummary | null
  alerts?: AlertSummary[]
  performance?: PerformanceSummary
  totalCandles: number
  zoomLevel: number
}

type ChartAction =
  | { action: 'addDrawing'; drawingType: string; points: Point[]; styles?: Record<string, unknown> }
  | { action: 'removeDrawing'; drawingId: string }
  | { action: 'clearDrawings' }
  | { action: 'addIndicator'; indicatorType: string; params?: number[]; styles?: Record<string, unknown> }
  | { action: 'removeIndicator'; indicatorId: string }
  | { action: 'setIndicatorVisibility'; indicatorId: string; visible: boolean }
  | { action: 'setTheme'; theme: string }
  | { action: 'setCandleStyle'; style: Partial<CandleStyle> }
  | { action: 'setZoom'; zoomLevel: number }
  | { action: 'zoomIn'; factor?: number }
  | { action: 'zoomOut'; factor?: number }
  | { action: 'resetView' }
  | { action: 'scrollTo'; timestamp: number }
  | { action: 'setAutoFit'; enabled: boolean }
  | { action: 'setRenderQuality'; quality: 'low' | 'high' | 'magnifique' }
  | { action: 'highlightCandles'; timestamps: number[] }
  | { action: 'enablePaperTrading'; config?: PaperTradingConfig }
  | { action: 'disablePaperTrading' }
  | { action: 'openPaperPosition'; params: OpenPositionParams }
  | { action: 'openPaperLong'; quantity: number; stopLoss?: number; takeProfit?: number }
  | { action: 'openPaperShort'; quantity: number; stopLoss?: number; takeProfit?: number }
  | { action: 'closePaperPosition'; positionId: string }
  | { action: 'closeAllPaperPositions' }
  | { action: 'loadChartState'; state: PersistableChartState }
  | { action: 'addAlert'; price: number; options?: CreateAlertOptions }
  | { action: 'updateAlert'; alertId: string; options?: Partial<CreateAlertOptions> }
  | { action: 'removeAlert'; alertId: string }
  | { action: 'clearAlerts' }

interface AgentRequest {
  requestId?: string
  protocolVersion?: number
  dryRun?: boolean
  type: 'chat_message' | 'context_update' | 'snapshot'
  sessionId: string
  message?: string
  chartContext?: ChartContext
  snapshot?: string
}

interface AgentResponse {
  requestId?: string
  protocolVersion?: number
  dryRun?: boolean
  type: 'chat_response' | 'action_batch' | 'error'
  sessionId: string
  textResponse?: string
  chartActions?: ChartAction[]
  actionResults?: ActionResult[]
  executedChartActions?: ChartAction[]
  pendingChartActions?: ChartAction[]
  capabilities?: ChartCapabilities
  error?: string
}

type RealtimeConnectionState = 'connected' | 'disconnected' | 'stale'

interface SymbolSearchResult {
  symbol: string
  name: string
  exchange?: string
  type?: 'crypto' | 'stock' | 'forex' | 'futures' | 'index'
}

interface ResolvedSymbol {
  symbol: string
  priceScale?: number
  timezone?: string
  session?: string
  sessionMetadata?: ResolvedSessionMetadata
  supportedResolutions: string[]
}

interface HistoryRequest {
  symbol: string
  resolution: string
  from: number
  to: number
  cursor?: string
  limit?: number
}

interface HistoryResponse<TBar = CandleDataInput> {
  bars: TBar[]
  nextCursor?: string
  partial?: boolean
}

interface IRealtimeSubscription {
  unsubscribe(): void
  readonly closed?: boolean
}

interface IDatafeed<TBar = CandleDataInput> {
  searchSymbols(query: string, signal?: AbortSignal): Promise<SymbolSearchResult[]>
  resolveSymbol(symbol: string, signal?: AbortSignal): Promise<ResolvedSymbol>
  getHistory(request: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse<TBar>>
  subscribeBars(
    symbol: string,
    resolution: string,
    onBar: (bar: TBar) => void,
    onStatusChange?: (state: RealtimeConnectionState) => void
  ): IRealtimeSubscription
}

type ReplayMode = 'idle' | 'playing' | 'paused' | 'ended'

interface ReplayStatus {
  mode: ReplayMode
  cursor: number
  speed: number
  totalBars: number
}

interface IReplayController<TBar = CandleDataInput> {
  loadBars(bars: TBar[]): void
  play(speed?: number): void
  pause(): void
  reset(): void
  stepForward(count?: number): void
  seek(index: number): void
  getStatus(): ReplayStatus
  onStatusChange(listener: (status: ReplayStatus) => void): () => void
  onTick(listener: (tick: ReplayTick<TBar>, status: ReplayStatus) => void): () => void
  exportState(): ReplaySessionState<TBar> | null
  restoreState(state: ReplaySessionState<TBar> | null): void
  destroy(): void
}

type VisualStateKind =
  | 'empty'
  | 'loading'
  | 'ready'
  | 'partial-history'
  | 'disconnected'
  | 'error'
  | 'replay'

interface ChartStateLoadOptions {
  restorePreferences?: boolean
  restoreIndicators?: boolean
  restoreDrawings?: boolean
  restoreTheme?: boolean
  restoreViewport?: boolean
  restoreMetadata?: boolean
  restorePanels?: boolean
  restoreVisualState?: boolean
  restoreReplay?: boolean
}

interface IChartStateApi {
  saveState(): PersistableChartState
  loadState(state: PersistableChartState, options?: ChartStateLoadOptions): void
}

import { RomacoChart } from 'romaco-charts';

const chart = RomacoChart.create('#chart', {
  preset: 'dark',
  data: candleData
});

import { RomacoChart, EMAIndicator, RSIIndicator } from 'romaco-charts';

RomacoChart.registerIndicators(EMAIndicator, RSIIndicator);

const chart = RomacoChart.create('#chart', {
  preset: 'dark',
  data: candleData,
  indicators: ['EMA', 'RSI']
});

import { RomacoChart, allTemplates } from 'romaco-charts';

const chart = RomacoChart.create('#chart', {
  preset: 'dark',
  data: candleData,
  drawings: {
    templates: allTemplates
  }
});

import { TradingTerminal } from 'romaco-charts/react';

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <TradingTerminal
        data={candles}
        symbol="BTC/USDT"
        preset="romaco"
      />
    </div>
  );
}