Trading Platform Charts

import { CandlestickChart, VolumeChart, LineChart } from "@chartts/react"
import { sma, bollingerBands } from "@chartts/finance"
import { useWebSocket } from "@chartts/websocket"

export function TradingTerminal({ symbol }) {
  const { data, status } = useWebSocket(`wss://feed.example.com/${symbol}`)
  const sma20 = sma(data, { period: 20, field: "close" })
  const bands = bollingerBands(data, { period: 20, stdDev: 2 })

  return (
    <div className="grid grid-rows-[3fr_1fr] gap-1 h-[600px]">
      <div className="rounded-xl card p-4">
        <CandlestickChart
          data={data}
          x="timestamp"
          open="open" high="high" low="low" close="close"
          overlays={[
            { data: sma20, className: "stroke-amber-400" },
            { data: bands.upper, className: "stroke-zinc-500" },
            { data: bands.lower, className: "stroke-zinc-500" },
          ]}
          className="h-full"
          upClassName="fill-emerald-500"
          downClassName="fill-red-500"
          crosshair
          zoomPan
        />
      </div>
      <div className="rounded-xl card p-4">
        <VolumeChart
          data={data}
          x="timestamp"
          y="volume"
          direction="close"
          className="h-full"
          upClassName="fill-emerald-500/60"
          downClassName="fill-red-500/60"
        />
      </div>
    </div>
  )
}