Analytics & Risk

Last updated on 2026-05-31

The analytics module provides three screens for portfolio performance analysis, risk assessment, and strategy backtesting. These screens use Recharts charts wrapped in shadcn/ui ChartContainer for consistent theming. All screens are in the (app) route group.

P&L Analysis

Route: /analytics/pnl

Comprehensive profit and loss analysis with daily, cumulative, and sector-level breakdowns.

P&L summary cards -- stat cards showing Realized P&L, Unrealized P&L, Total Fees, Net P&L, Win Rate, and Profit Factor; each color-coded by positive/negative value
Daily P&L chart -- PnlChart component rendering a Recharts BarChart with daily P&L values; green bars for profitable days, red bars for losing days
Cumulative P&L chart -- Recharts AreaChart showing the running cumulative P&L over time with a teal gradient fill
Win/loss statistics -- WinLossStats component displaying:
- Win count and loss count with percentage bars
- Average win amount and average loss amount
- Largest win (ticker, amount, date) and largest loss
- Win rate percentage with a circular progress indicator
- Profit factor (gross profit / gross loss)
P&L by sector -- PnlBySector component showing a horizontal Recharts BarChart breaking down P&L by sector (Technology, Healthcare, Financials, etc.) with color-coded bars

import { PnlChart } from "@/components/analytics/pnl-chart"
import { WinLossStats } from "@/components/analytics/win-loss-stats"
import { PnlBySector } from "@/components/analytics/pnl-by-sector"

P&L Analysis Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Realized │ Unreal.  │ Fees     │ Net P&L  │
│ P&L      │ P&L      │          │          │
├──────────┴──────────┴──────────┴──────────┤
│ Daily P&L (bar chart, green/red bars)     │
├──────────────────────┬────────────────────┤
│ Cumulative P&L       │ Win/Loss Stats    │
│ (area chart)         │ (metrics grid)    │
├──────────────────────┴────────────────────┤
│ P&L by Sector (horizontal bar chart)     │
└───────────────────────────────────────────┘

Key Metrics

Metric	Calculation	Description
Win Rate	Wins / Total Trades	Percentage of profitable trades
Profit Factor	Gross Profit / Gross Loss	Values above 1.0 indicate profitability
Average Win	Total Wins / Win Count	Average profit on winning trades
Average Loss	Total Losses / Loss Count	Average loss on losing trades
Net P&L	Realized + Unrealized - Fees	Total portfolio profit/loss

Data Sources

Data	Source	Location
P&L data	`pnlAnalysis`	`data/seed.ts`
Sector P&L	`pnlAnalysis.pnlBySector`	`data/seed.ts`

Risk Metrics

Route: /analytics/risk

A comprehensive risk assessment dashboard showing portfolio risk exposure and key risk-adjusted metrics.

Risk metrics grid -- RiskMetricsGrid component displaying key risk metrics as stat cards:
- Value at Risk (VaR) -- 95% confidence daily, weekly, and monthly VaR showing the maximum expected loss at each time horizon
- Max Drawdown -- deepest peak-to-trough decline with duration in days
- Sharpe Ratio -- risk-adjusted return (excess return per unit of volatility)
- Sortino Ratio -- like Sharpe but only considers downside deviation
- Beta -- portfolio sensitivity to market movements (1.0 = market neutral)
- Alpha -- excess return over the expected risk-adjusted benchmark return
- Treynor Ratio -- excess return per unit of systematic risk
- Calmar Ratio -- annualized return divided by max drawdown
- R-Squared -- how much portfolio movement is explained by the benchmark
- Tracking Error -- standard deviation of excess returns vs benchmark
- Information Ratio -- excess return per unit of tracking error
- Volatility -- daily and annualized volatility percentages
Drawdown chart -- DrawdownChart component showing the drawdown curve as a red-filled area chart, plotting the percentage decline from peak portfolio value over time
Concentration card -- ConcentrationCard showing portfolio concentration risk:
- Top holding name and weight percentage
- Top 5 holdings combined weight
- Herfindahl-Hirschman Index (HHI) for diversification measurement

import { RiskMetricsGrid } from "@/components/analytics/risk-metrics-grid"
import { DrawdownChart } from "@/components/analytics/drawdown-chart"
import { ConcentrationCard } from "@/components/analytics/concentration-card"

Risk Metrics Interpretation

Metric	Good Range	Concern
Sharpe Ratio	> 1.0	< 0.5
Sortino Ratio	> 1.5	< 0.5
Beta	0.8 - 1.2	> 1.5 or < 0.5
Max Drawdown	< 15%	> 25%
Alpha	> 0	< -2%
R-Squared	> 0.7	< 0.3

Backtesting

Route: /analytics/backtesting

A strategy backtesting engine with equity curves, trade logs, and performance comparison.

Backtest configuration summary -- card showing the backtest parameters: strategy name, time period, initial capital, commission rate, benchmark, and ticker universe
Performance summary cards -- stat cards showing Total Return (dollar and percent), Annualized Return, Sharpe Ratio, Max Drawdown, Win Rate, Profit Factor, and Total Trades
Equity curve -- EquityCurve component showing two Recharts LineChart series: the strategy equity curve (teal) and the benchmark (gray dashed), plotted from start date to end date
Drawdown curve -- DrawdownChart showing the strategy's drawdown over the backtest period as a red area chart
Monthly returns heatmap -- MonthlyReturns component displaying a calendar-style grid of monthly return percentages, color-coded from red (losses) through white (flat) to green (gains)
Win/loss statistics -- WinLossStats showing win count, loss count, average win, average loss, win rate, and profit factor
Trade log table -- BacktestTrades data table showing each backtest trade with columns for entry date, exit date, ticker, side (Buy/Sell), entry price, exit price, quantity, P&L (dollar and percent), holding period (days), and exit reason (Signal, Stop Loss, Take Profit, End of Test)

import { EquityCurve } from "@/components/analytics/equity-curve"
import { DrawdownChart } from "@/components/analytics/drawdown-chart"
import { MonthlyReturns } from "@/components/analytics/monthly-returns"
import { WinLossStats } from "@/components/analytics/win-loss-stats"
import { BacktestTrades } from "@/components/analytics/backtest-trades"

Backtesting Layout

┌───────────────────────────────────────────┐
│ Backtest Config: Momentum Strategy       │
│ Jan 2024 - Dec 2025 | $100,000 initial   │
├──────────┬──────────┬──────────┬──────────┤
│ Total    │ Annual   │ Sharpe   │ Max DD   │
│ Return   │ Return   │ Ratio    │          │
├──────────┴──────────┴──────────┴──────────┤
│ Equity Curve (strategy vs benchmark)     │
├──────────────────────┬────────────────────┤
│ Drawdown Curve       │ Monthly Returns   │
│ (area chart)         │ (heatmap grid)    │
├──────────────────────┴────────────────────┤
│ Win/Loss Stats                           │
├───────────────────────────────────────────┤
│ Trade Log Table                          │
└───────────────────────────────────────────┘

Exit Reason Badges

Reason	Badge Color	Description
Signal	blue	Strategy signal triggered exit
Stop Loss	red	Stop loss level reached
Take Profit	green	Take profit target reached
End of Test	gray	Backtest period ended

Data Sources

Data	Source	Location
Backtest results	`backtestResult`	`data/seed.ts`
Risk metrics	`riskMetrics`	`data/seed.ts`
P&L analysis	`pnlAnalysis`	`data/seed.ts`

Charts Architecture

All analytics charts follow a consistent pattern using Recharts wrapped in the shadcn/ui ChartContainer component. This ensures unified theming, responsive sizing, and dark mode support across all visualizations.

How It Works

Each chart component receives its data as props and defines a ChartConfig object that maps data keys to oklch color tokens. The ChartContainer handles responsive width, applies theme-aware colors, and provides the Recharts ResponsiveContainer wrapper.

import { ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { AreaChart, Area, XAxis, YAxis } from "recharts"

const chartConfig: ChartConfig = {
  equity: {
    label: "Portfolio",
    color: "oklch(0.55 0.2 160)",  // teal-500
  },
  benchmark: {
    label: "S&P 500",
    color: "oklch(0.6 0.03 160)",  // muted gray-green
  },
}

function EquityCurve({ data, benchmark }: EquityCurveProps) {
  return (
    <ChartContainer config={chartConfig}>
      <AreaChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Area
          type="monotone"
          dataKey="equity"
          fill="var(--color-equity)"
          stroke="var(--color-equity)"
          fillOpacity={0.2}
        />
      </AreaChart>
    </ChartContainer>
  )
}

Chart Components

Component	Chart Type	Used On
`pnl-chart.tsx`	`BarChart` (green/red)	P&L Analysis
`equity-curve.tsx`	`AreaChart` (dual series)	Backtesting
`drawdown-chart.tsx`	`AreaChart` (red fill)	Backtesting, Risk
`monthly-returns.tsx`	Custom grid (heatmap)	Backtesting
`win-loss-stats.tsx`	Custom (progress bars)	P&L, Backtesting
`pnl-by-sector.tsx`	`BarChart` (horizontal)	P&L Analysis
`risk-metrics-grid.tsx`	Custom (stat cards)	Risk
`concentration-card.tsx`	Custom (progress bars)	Risk
`portfolio-chart.tsx`	`AreaChart` (teal gradient)	Dashboard
`performance-chart.tsx`	`LineChart` (dual series)	Portfolio
`allocation-chart.tsx`	`PieChart` (donut)	Portfolio
`depth-chart.tsx`	`AreaChart` (bid/ask)	Market Depth

Next Steps

Settings & Auth -- profile, security, billing, auth, and utility pages
Portfolio -- holdings and performance tracking
Social Trading -- leaderboard and copy trading

Social Trading

Settings & Auth