import { TrendingUpIcon, TrendingDownIcon, DollarSignIcon, BarChartIcon, PieChartIcon, ActivityIcon, } from "lucide-react"; import React, { useState } from "react"; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Area, CartesianGrid, } from "recharts"; import { render } from "react-dom"; export default function TradingDashboard() { const [selectedTimeRange, setSelectedTimeRange] = useState("1M"); const timeRangeData = { "1D": [ { date: "9:30", price: 4000, }, { date: "10:30", price: 4200, }, { date: "11:30", price: 4100, }, { date: "12:30", price: 4300, }, { date: "13:30", price: 4200, }, { date: "14:30", price: 4400, }, { date: "15:30", price: 4500, }, { date: "16:00", price: 4600, }, ], "1M": [ { date: "Jan 1", price: 4000, }, { date: "Jan 7", price: 3000, }, { date: "Jan 14", price: 5000, }, { date: "Jan 21", price: 4800, }, { date: "Jan 28", price: 5200, }, ], YTD: [ { date: "Jan", price: 4000, }, { date: "Feb", price: 3000, }, { date: "Mar", price: 5000, }, { date: "Apr", price: 4500, }, { date: "May", price: 6000, }, { date: "Jun", price: 5500, }, ], "5Y": [ { date: "2019", price: 2000, }, { date: "2020", price: 3000, }, { date: "2021", price: 4000, }, { date: "2022", price: 4500, }, { date: "2023", price: 5500, }, ], }; const positions = [ { symbol: "AAPL", price: 150.23, change: +2.5, shares: 50, sparklineData: [142, 144, 146, 147, 148, 150.23], }, { symbol: "GOOGL", price: 2750.12, change: -1.2, shares: 10, sparklineData: [2850, 2820, 2790, 2770, 2745, 2750.12], }, { symbol: "MSFT", price: 310.45, change: +1.8, shares: 25, sparklineData: [305, 308, 311, 309, 308, 310.45], }, { symbol: "AMZN", price: 3300.75, change: -0.5, shares: 5, sparklineData: [3310, 3290, 3315, 3305, 3320, 3300.75], }, ]; const SparklineChart = ({ data, isPositive }) => ( ({ value, index, }))} > ); const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (

{label}

${payload[0].value.toLocaleString()}

); } return null; }; const TimeRangeSelector = ({ range, selected, onClick }) => ( ); return (

Portfolio Performance

`$${value}`} /> } />

{["1D", "1M", "YTD", "5Y"].map((range) => ( ))}

Your Positions

{positions.map((stock) => (

{stock.symbol}

{stock.shares} shares

= 0} />

${stock.price}

= 0 ? "text-green-500" : "text-red-500"} flex items-center justify-end`} > {stock.change >= 0 ? ( ) : ( )} {stock.change}%

))}

); } render(, document.getElementById("root"));

Using recharts

Using `recharts`