root = Card([pageHeader, controls, metricsRow, chartsRow, positionsCard, moversCard, watchedCard, ordersCard, headlinesCard, economyCard, riskCard, actionsRow], "card", "column", "l")
pageHeader = CardHeader("Trading Desk", "Morning workspace — Fri, Jan 24, 2025")
controls = Card([timeframeText, timeframeButtons], "sunk", "row", "s", "center")
timeframeText = TextContent("Timeframe:", "small")
timeframeButtons = Buttons([tf1dBtn, tf1wBtn, tf1mBtn, tf3mBtn, tf1yBtn, tfytdBtn], "row")
tf1dBtn = Button("1D")
tf1wBtn = Button("1W")
tf1mBtn = Button("1M")
tf3mBtn = Button("3M")
tf1yBtn = Button("1Y")
tfytdBtn = Button("YTD")
metricsRow = Card([portfolioCard, pnlCard, varCard, marginCard], "clear", "row", "m", "stretch", "between", true)
portfolioCard = Card([portfolioLabel, portfolioValue], "sunk", "column", "xs")
portfolioLabel = TextContent("Portfolio Value", "small")
portfolioValue = TextContent("$12.48M", "large")
pnlCard = Card([pnlLabel, pnlValueTag], "sunk", "column", "xs")
pnlLabel = TextContent("P&L Today", "small")
pnlValueTag = Tag("+$245,300", null, null, "success")
varCard = Card([varLabel, varValue], "sunk", "column", "xs")
varLabel = TextContent("Value at Risk (95%)", "small")
varValue = TextContent("$1.24M (1.9%)", "large")
marginCard = Card([marginLabel, marginProgress], "sunk", "column", "xs")
marginLabel = TextContent("Margin in Use", "small")
marginProgress = Progress(68, "68% of $18M")
chartsRow = Card([exposureCard, strategyCard, drawdownCard], "clear", "row", "l", "stretch", "start", true)
exposureCard = Card([exposureHeader, exposureChart], "sunk", "column", "m")
exposureHeader = CardHeader("Exposure by Sector")
exposureChart = PieChart(["Tech", "Financials", "Healthcare", "Energy", "Consumer"], [42, 18, 14, 12, 10], "donut")
strategyCard = Card([strategyHeader, strategyChart], "sunk", "column", "m")
strategyHeader = CardHeader("Strategy Returns YTD")
strategyChart = BarChart(["Momentum", "Value", "Arbitrage", "Macro", "Quant"], [strategySeries])
strategySeries = Series("Return %", [18.2, 12.4, -3.1, 8.7, 15.9])
drawdownCard = Card([drawdownHeader, drawdownChart], "sunk", "column", "m")
drawdownHeader = CardHeader("Drawdown — Past Year")
drawdownChart = AreaChart(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], [drawdownSeries])
drawdownSeries = Series("Drawdown %", [0, -2.1, -4.5, -3.2, -5.8, -4.1, -6.3, -5.2, -3.8, -4.6, -2.9, -1.8])
positionsCard = Card([positionsHeader, positionsTable], "sunk", "column", "m")
positionsHeader = CardHeader("Positions")
positionsTable = Table([posTicker, posSize, posEntry, posCurrent])
posTicker = Col("Ticker", ["AAPL", "MSFT", "NVDA", "TSLA", "AMZN"])
posSize = Col("Size", [15000, 8000, 12000, 5000, 9000])
posEntry = Col("Entry", ["$150.20", "$280.50", "$420.10", "$250.30", "$130.75"])
posCurrent = Col("Current", ["$155.40", "$295.20", "$480.60", "$245.70", "$134.20"])
moversCard = Card([moversHeader, moversTable], "sunk", "column", "m")
moversHeader = CardHeader("Biggest Gainers & Losers")
moversTable = Table([moverTicker, moverChg, moverSide])
moverTicker = Col("Ticker", ["NVDA", "META", "AMZN", "TSLA", "JPM"])
moverChg = Col("Change", ["+8.2%", "+5.1%", "+3.4%", "-4.2%", "-2.8%"])
moverSide = Col("Type", ["Gainer", "Gainer", "Gainer", "Loser", "Loser"])
watchedCard = Card([watchedHeader, watchedTable], "sunk", "column", "m")
watchedHeader = CardHeader("Watchlist")
watchedTable = Table([watchTicker, watchPrice, watchChg])
watchTicker = Col("Ticker", ["SPY", "QQQ", "BTC-USD", "EUR/USD", "CL=F"])
watchPrice = Col("Price", ["$592.30", "$512.10", "$98,450", "1.0482", "$78.35"])
watchChg = Col("Chg", ["+0.4%", "-0.2%", "+2.1%", "+0.1%", "-1.2%"])
ordersCard = Card([ordersHeader, ordersTable], "sunk", "column", "m")
ordersHeader = CardHeader("Working Orders")
ordersTable = Table([orderId, orderTicker, orderSide, orderQty, orderPrice, orderStatus])
orderId = Col("Order ID", ["#10421", "#10422", "#10423"])
orderTicker = Col("Ticker", ["AAPL", "MSFT", "NVDA"])
orderSide = Col("Side", ["Buy", "Sell", "Buy"])
orderQty = Col("Qty", [5000, 2000, 3000])
orderPrice = Col("Price", ["Limit $154.20", "Market", "Limit $475.00"])
orderStatus = Col("Status", ["Working", "Working", "Working"])
headlinesCard = Card([headlinesHeader, headlinesList], "sunk", "column", "m")
headlinesHeader = CardHeader("Market Headlines")
headlinesList = Card([headline1, headline2, headline3, headline4], "clear", "column", "s")
headline1 = Card([headline1Text, headline1Tag], "sunk", "row", "m", "baseline")
headline1Text = TextContent("Fed signals rate cut in March", "default")
headline1Tag = Tag("Bullish", null, null, "success")
headline2 = Card([headline2Text, headline2Tag], "sunk", "row", "m", "baseline")
headline2Text = TextContent("Hawkish ECB comment pushes euro higher", "default")
headline2Tag = Tag("Neutral", null, null, "info")
headline3 = Card([headline3Text, headline3Tag], "sunk", "row", "m", "baseline")
headline3Text = TextContent("Earnings beat drives tech rally", "default")
headline3Tag = Tag("Bullish", null, null, "success")
headline4 = Card([headline4Text, headline4Tag], "sunk", "row", "m", "baseline")
headline4Text = TextContent("Inflation data surprises to the upside", "default")
headline4Tag = Tag("Bearish", null, null, "warning")
economyCard = Card([economyHeader, economyTable], "sunk", "column", "m")
economyHeader = CardHeader("Economic Releases This Week")
economyTable = Table([ecoDate, ecoEvent, ecoImpact, ecoForecast])
ecoDate = Col("Date", ["Mon", "Tue", "Wed", "Thu", "Fri"])
ecoEvent = Col("Event", ["CPI", "PPI", "Retail Sales", "Jobless Claims", "PMI"])
ecoImpact = Col("Impact", ["High", "High", "Medium", "Medium", "High"])
ecoForecast = Col("Forecast", ["3.1%", "2.4%", "0.3%", "220K", "52.1"])
riskCard = Card([riskHeader, riskAlert, riskTable], "sunk", "column", "m")
riskHeader = CardHeader("Risk Limits")
riskAlert = Callout("warning", "Close to breach", "Gross exposure at 92% and VaR at 86% of limit.")
riskTable = Table([riskLimit, riskCurrent, riskUtil])
riskLimit = Col("Limit", ["VaR", "Gross Exposure", "Concentration", "Leverage"])
riskCurrent = Col("Current", ["$1.24M", "$8.4B", "8.2%", "4.5x"])
riskUtil = Col("Utilization", ["86%", "92%", "82%", "71%"])
actionsRow = Card([rebalanceCard, orderCard], "clear", "row", "l", "stretch", "start", true)
rebalanceCard = Card([rebalanceHeader, rebalanceDesc, rebalanceBtn], "sunk", "column", "m")
rebalanceHeader = CardHeader("Rebalance")
rebalanceDesc = TextContent("Re-run optimizer to target weights.", "small")
rebalanceBtn = Button("Rebalance Portfolio")
orderCard = Card([orderHeader, orderForm], "sunk", "column", "m")
orderHeader = CardHeader("Place Order")
orderForm = Form("place-order", orderButtons, [tickerField, sideField, qtyField])
tickerField = FormControl("Ticker", tickerInput, "e.g. AAPL")
tickerInput = Input("ticker", "AAPL")
sideField = FormControl("Side", sideSelect)
sideSelect = Select("side", [sideBuy, sideSell], null, null, "buy")
sideBuy = SelectItem("buy", "Buy")
sideSell = SelectItem("sell", "Sell")
qtyField = FormControl("Quantity", qtyInput)
qtyInput = Input("quantity", "1000", "number")
orderButtons = Buttons([submitOrderBtn, cancelOrderBtn])
submitOrderBtn = Button("Submit Order", null, "primary")
cancelOrderBtn = Button("Cancel", null, "tertiary")