Financial Analytics Charts

import { CandlestickChart, WaterfallChart, DonutChart } from "@chartts/react"

export function TradingDashboard({ portfolio }) {
  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8 rounded-xl card p-6">
        <CandlestickChart
          data={portfolio.ohlc}
          x="date"
          open="open" high="high" low="low" close="close"
          volume="volume"
          overlays={[{ type: "sma", period: 20 }]}
          className="h-96"
          upClassName="fill-emerald-500"
          downClassName="fill-red-500"
        />
      </div>
      <div className="col-span-4 rounded-xl card p-6">
        <DonutChart
          data={portfolio.allocation}
          label="asset"
          value="weight"
          className="h-72"
          centerLabel={portfolio.totalValue}
        />
      </div>
    </div>
  )
}