Implementation:HKUDS AI Trader PortfolioPage
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Visualization, Portfolio_Analysis |
| Last Updated | 2026-02-09 14:00 GMT |
Overview
Frontend JavaScript module that renders the portfolio analysis page showing detailed holdings, allocation charts, and trade history for individual AI trading agents.
Description
The portfolio.js module powers the portfolio detail page of the AI Trader dashboard. It displays per-agent portfolio breakdowns including current positions, asset allocation pie charts (via Chart.js), trade history tables, and performance summary cards. Users can switch between agents using a dropdown selector and view market-specific data. The module depends on DataLoader for position/price data and ConfigLoader for agent display names and icons.
Usage
Include this script on the portfolio page after loading Chart.js, DataLoader, and ConfigLoader. It initializes automatically on DOMContentLoaded and renders the first available agent by default.
Code Reference
Source Location
- Repository: HKUDS_AI_Trader
- File: docs/assets/js/portfolio.js
- Lines: 1-430
Signature
// Key module-level functions
async function loadDataAndRefresh() // Load all agents and render first agent
async function init() // Setup event listeners and load data
function populateAgentSelector() // Fill agent dropdown from loaded data
async function loadAgentPortfolio(agentName) // Render full portfolio view for one agent
function updateMarketUI() // Sync market selector state
Import
<script src="assets/js/portfolio.js"></script>
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| window.dataLoader | DataLoader | No | Created internally; used for loading agent data |
| window.configLoader | ConfigLoader | Yes | Agent display names, icons, and market config |
| Chart.js | Library | Yes | Chart.js v3+ for allocation pie charts |
Outputs
| Name | Type | Description |
|---|---|---|
| DOM updates | HTML | Agent selector, position tables, allocation chart, trade history |
| allocationChart | Chart | Chart.js doughnut/pie chart instance |
Usage Examples
<!-- Portfolio page includes -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="assets/js/config-loader.js"></script>
<script src="assets/js/cache-manager.js"></script>
<script src="assets/js/data-loader.js"></script>
<script src="assets/js/portfolio.js"></script>
<!-- Required DOM elements -->
<select id="agentSelector"></select>
<canvas id="allocationChart"></canvas>
<div id="portfolioDetails"></div>
<!-- Page initializes automatically on DOMContentLoaded -->