henry
2e22fd5635
- Add /api/alpaca/orders endpoint for order history - Add TradingView chart component for candlestick visualization - Add /analyze/:ticker route with position and orders display - Make ticker cells in analyze page clickable for navigation
35 lines
997 B
TypeScript
35 lines
997 B
TypeScript
import { useEffect, useRef } from "react";
|
|
import * as LightweightCharts from "lightweight-charts";
|
|
|
|
interface TradingViewChartProps {
|
|
ticker: string;
|
|
data?: Array<{ time: string; open: number; high: number; low: number; close: number }>;
|
|
}
|
|
|
|
export default function TradingViewChart({ ticker, data }: TradingViewChartProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
|
|
const chart = LightweightCharts.createChart(containerRef.current, {
|
|
width: containerRef.current.clientWidth,
|
|
height: 400,
|
|
});
|
|
|
|
const candlestickSeries = chart.addSeries(LightweightCharts.CandlestickSeries);
|
|
|
|
if (data && data.length > 0) {
|
|
candlestickSeries.setData(data);
|
|
}
|
|
|
|
return () => chart.remove();
|
|
}, [data]);
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4">
|
|
<h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
|
|
<div ref={containerRef} />
|
|
</div>
|
|
);
|
|
} |