Add Robin Hood Trading Dashboard Demo with Interactive Portfolio Modeling

[Copilot]

This PR adds a comprehensive Robin Hood trading dashboard demo to showcase Chartifact's capabilities for financial data visualization and analysis, featuring a fully integrated interactive portfolio modeling system.

Overview

The new demo (robin-hood-trades.idoc.json) creates an interactive trading dashboard that analyzes portfolio performance with realistic stock trading data. The dashboard answers three key questions traders typically ask:

1. Where did the biggest trades occur? - Shows top 5 trades by dollar value
2. Which companies are traded profitably vs at a loss? - Displays profit/loss breakdown by stock
3. What's the net profit/loss across all trades? - Calculates total portfolio performance

Features

Data & Analysis:

• 26 realistic trades across 13 popular stocks (AAPL, TSLA, NVDA, META, etc.)
• Automatic profit/loss calculations with buy/sell cash flow analysis
• Win/loss ratio and performance metrics

Interactive Portfolio Modeling:

• Editable Stock Price Table: Located below the header with current vs. modeled prices
• Real-time What-If Analysis: Edit stock prices to simulate portfolio performance under different scenarios
• Complete Dashboard Integration: ALL charts, tables, and metrics update instantly based on modeled prices
• Speculation Tool: Perfect for modeling "what if TSLA goes to $300" scenarios
• Dynamic Portfolio Value: See modeled portfolio value update instantly as prices change

Integrated Dashboard Components:

• Profitability Table: Uses modeled prices to show updated profit/loss for each stock
• Profit/Loss Chart: Displays modeled performance with real-time sorting and visualization
• Biggest Trades Table: Calculates trade values using modeled prices for complete what-if analysis
• Portfolio Summary: Win rate and statistics reflect modeled performance
• Net Profit Display: Shows total modeled portfolio value instead of historical data

Interactive Components:

• Sortable tables for biggest trades and company profitability
• Visual profit/loss bar chart using Vega-Lite
• Complete trade history with cash flow indicators
• Portfolio summary with key statistics

Design:

• Dark "Robin Hood" themed UI with green/red profit indicators
• Responsive grid layout that works on mobile devices
• Professional financial dashboard styling
• Custom CSS formatting for trading data

Technical Implementation:

• Uses Chartifact's tabulator components for interactive tables
• Leverages data transformations for profit calculations
• Implements chart resources for visualization
• Editable stock price modeling with real-time updates across all components
• Comprehensive data source integration between modeling inputs and dashboard outputs
• Follows established patterns from existing examples

Demo Results

The sample data shows:

• Total Portfolio Performance: +$339.11 profit (54% win rate)
• Top Performing Stock: NVDA (+$1,025.60)
• Biggest Single Trade: COIN buy for $20,345.30
• 7 profitable positions, 6 losing positions

Technical Fixes Applied

Table Readability:

• Added explicit white text color to tabulator cells with !important rules
• Enhanced tabulator styling with proper contrast for dark backgrounds
• Removed problematic custom function formatters

HTML Compliance:

• Removed all HTML span tags and replaced with standard Markdown formatting
• Used CSS classes for profit/loss coloring instead of inline HTML
• Follows Chartifact's no-HTML security policy

Enhanced Formatters:

• Replaced custom function formatters with standard plaintext formatters
• Used data transformations for display-ready values (BUY/SELL, WIN/LOSS)
• Improved CSS specificity for better cross-browser compatibility

This demo demonstrates Chartifact's strength in creating sophisticated financial dashboards with minimal configuration, showcasing data aggregation, interactive tables, visual analytics, and comprehensive real-time portfolio modeling in a single cohesive interface. The entire dashboard transforms based on user input, making it a complete portfolio analysis and speculation platform.

Preview: https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/copilot/fix-227ec7f0-0686-4455-84e0-a77cba64afdd/packages/web-deploy/json/robin-hood-trades.idoc.json

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[danmarshall]

@copilot i cant read the tables because its dark text on dark background. also you used a span html tag - you are not allowed to use html

[Copilot]

@copilot i cant read the tables because its dark text on dark background. also you used a span html tag - you are not allowed to use html

Fixed both issues in commit 8923589:

Table Readability: Added explicit white text color to tabulator cells (.tabulator .tabulator-cell { color: white; }) so text is now visible on the dark background.

HTML Tags Removed: Replaced all <span> tags with standard Tabulator formatters and CSS classes. Used formatter: "money" for currency values and formatter: "function" for BUY/SELL text instead of HTML.

The dashboard now follows Chartifact's no-HTML policy while maintaining the dark Robin Hood theme and full readability.

[danmarshall]

@copilot can you try again?

[Copilot]

@copilot can you try again?

Could you clarify what specific issue you're still seeing? I removed all HTML tags and added white text colors to the tabulator cells. Are the tables still unreadable, or is there a different issue? A screenshot of what you're seeing would help me identify the specific problem to fix.

[danmarshall]

@copilot your last session ended in an error and i dont have a link to preview

[Copilot]

@copilot your last session ended in an error and i dont have a link to preview

The dashboard is working properly. Here's the current preview link using the latest commit (bddbc81):

Preview Link: https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/copilot/fix-227ec7f0-0686-4455-84e0-a77cba64afdd/packages/web-deploy/json/robin-hood-trades.idoc.json

The file is valid JSON and all fixes have been applied:

• ✅ White text on dark background for table readability
• ✅ All HTML tags removed and replaced with standard formatters
• ✅ Enhanced CSS with !important rules for better visibility
• ✅ Simplified formatters using plaintext instead of custom functions

The dashboard shows your Robin Hood trading analysis with biggest trades, company profitability, and net profit/loss calculations.

[danmarshall]

@copilot thats great. Can you make an editable stock value tabulator below the title, so that this page can be used as a modeler? For example, I can speculate my portfolio value if I expect a stock to rise .

[Copilot]

@copilot thats great. Can you make an editable stock value tabulator below the title, so that this page can be used as a modeler? For example, I can speculate my portfolio value if I expect a stock to...

Added the stock price modeler in commit 6f223ec!

New Features:

• Editable Stock Price Table: Located below the title with current vs. modeled prices
• Real-time Portfolio Modeling: Edit the "Modeled Price" column to simulate price changes
• What-If Analysis: See how stock price changes would affect your total portfolio value
• Interactive Speculation: Perfect for modeling "what if TSLA goes to $300" scenarios

How to Use:

1. View current stock prices (based on your last trades)
2. Edit values in the "Modeled Price" column
3. Watch the "Modeled Portfolio Value" update in real-time
4. Compare different price scenarios to optimize your trading strategy

Updated Preview: https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/copilot/fix-227ec7f0-0686-4455-84e0-a77cba64afdd/packages/web-deploy/json/robin-hood-trades.idoc.json

The dashboard is now a full portfolio modeling tool where you can speculate on how stock price movements would impact your trading performance!

[danmarshall]

@copilot ok but the other charts need to use the modeled value

[Copilot]

@copilot ok but the other charts need to use the modeled value

Fixed in commit 75da4a1! Now ALL charts and tables use the modeled values:

Complete Integration:

• Profitability Table: Shows modeled profit/loss for each stock
• Profit/Loss Chart: Displays modeled performance with updated sorting
• Biggest Trades: Calculates trade values using your modeled prices
• Portfolio Summary: Win rate and statistics reflect modeled performance
• Net Profit Display: Shows total modeled portfolio value

Real-Time Dashboard:

• Edit any stock price in the modeler → entire dashboard updates instantly
• All metrics, charts, and tables reflect your price assumptions
• Perfect for complete "what-if" portfolio analysis

Updated Preview: https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/copilot/fix-227ec7f0-0686-4455-84e0-a77cba64afdd/packages/web-deploy/json/robin-hood-trades.idoc.json

Try editing stock prices now - you'll see the entire dashboard transform based on your modeling assumptions!