Component library

Dashboard

• <AllocationDriftChart>

  financeChartDataDashboard

  Current vs target allocation table with drift, tolerance band status (in band / overweight / underweight), and inline weight bars.

  When to use: Use in portfolio monitoring or rebalancing reports to show how each sleeve drifts from strategic targets. Pass weights as numbers (typically percent). Set `tolerance` per row when bands differ by asset class.

  Often with: ComparisonBarUsageDonutCardSimpleDataTable

  Preview

  Strategic allocation drift

  Tolerance band ±1% unless noted

  Asset class	Current	Target	Drift	Status	Weight
  Global equities	42.3%	40.0%	+2.3%	Overweight
  Investment grade credit	24.1%	25.0%	-0.9%	In band
  Private markets	18.6%	20.0%	-1.4%	In band
  Cash	8.2%	10.0%	-1.8%	Underweight
  Alternatives	6.8%	5.0%	+1.8%	Overweight

  Prop	Type	Notes
  title	string	Optional. Chart heading.
  description	string	Optional. Muted subheading.
  rows	{ label: string; current: number; target: number; tolerance?: number }[]	Required. One row per asset class or sleeve. `tolerance` defaults to 1 (same unit as weights).
  unit	string	Optional. Default: "%". Suffix for weight and drift columns.

  Examples

  <AllocationDriftChart
    title="Strategic allocation drift"
    description="Tolerance band ±1% unless noted"
    rows={[
      { label: "Global equities", current: 42.3, target: 40, tolerance: 1 },
      { label: "Investment grade credit", current: 24.1, target: 25, tolerance: 1 },
      { label: "Private markets", current: 18.6, target: 20, tolerance: 2 },
      { label: "Cash", current: 8.2, target: 10, tolerance: 1 },
      { label: "Alternatives", current: 6.8, target: 5, tolerance: 1 }
    ]}
  />

• <RebalanceTradeList>

  financeDataListDashboard

  Ordered list of proposed rebalance trades with buy/sell/hold chips, formatted amounts, optional weight before/after, and optional turnover footer.

  When to use: Use after an allocation drift review to show the concrete trades required to return to target. Keep amounts pre-formatted strings (currency or % of NAV).

  Often with: AllocationDriftChartSimpleDataTableDataTable

  Preview

  Proposed rebalance trades

  To restore policy weights as of 31 May 2026

  • Sell

    MSCI World ETF

    Trim overweight global equity sleeve

    £420,000

    22.1% → 20.0%

  • Buy

    Sterling IG credit fund

    £280,000

    23.4% → 25.0%

  • Hold

    Private equity co-invest

    Within tolerance; no trade required

    —

  Estimated turnover3.2% of NAV

  Prop	Type	Notes
  title	string	Optional. Section heading.
  description	string	Optional. Muted subheading.
  trades	{ asset: string; action: "buy" | "sell" | "hold"; amount: string; weightBefore?: string; weightAfter?: string; note?: string }[]	Required. Proposed trades in execution order.
  turnoverLabel	string	Optional. Footer label, e.g. "Estimated turnover".
  turnoverValue	string	Optional. Footer value; shown only when both turnover props are set.

  Examples

  <RebalanceTradeList
    title="Proposed rebalance trades"
    description="To restore policy weights as of 31 May 2026"
    trades={[
      { asset: "MSCI World ETF", action: "sell", amount: "£420,000", weightBefore: "22.1%", weightAfter: "20.0%", note: "Trim overweight global equity sleeve" },
      { asset: "Sterling IG credit fund", action: "buy", amount: "£280,000", weightBefore: "23.4%", weightAfter: "25.0%" },
      { asset: "Private equity co-invest", action: "hold", amount: "—", note: "Within tolerance; no trade required" }
    ]}
    turnoverLabel="Estimated turnover"
    turnoverValue="3.2% of NAV"
  />

• <PortfolioSummaryCard>

  financeStatsDataDashboard

  Headline portfolio card: NAV or AUM with optional delta pill and a grid of supporting metrics (returns, volatility, tracking error, cash, etc.).

  When to use: Use at the top of a portfolio or rebalancing report for the headline snapshot. Pair with `<AllocationDriftChart>` and `<RebalanceTradeList>` in the sections below.

  Often with: KPIKPIGridFinanceOverviewCardAnalyticsCard

  Preview

  Balanced growth portfolio

  As of 31 May 2026

  NAV

  £24.6m

  +1.8% MTD

  YTD return

  +4.2%

  Volatility (1y)

  9.1%

  Tracking error

  42 bps

  Cash

  8.2%

  Prop	Type	Notes
  title	string	Optional. Default: "Portfolio summary". Card heading.
  asOf	string	Optional. Valuation date label.
  navLabel	string	Optional. Default: "NAV". Label above the headline figure.
  navValue	string	Required. Headline NAV or AUM (include currency).
  navDelta	string	Optional. Optional change pill, e.g. "+1.8% MTD".
  navDeltaTone	"up" | "down" | "flat"	Optional. Default: up. Colours the delta pill.Values: up, down, flat
  metrics	{ label: string; value: string; tone?: "up" | "down" | "flat" }[]	Optional. Supporting metrics in a responsive grid (typically 3–4 items).

  Examples

  <PortfolioSummaryCard
    title="Balanced growth portfolio"
    asOf="31 May 2026"
    navValue="£24.6m"
    navDelta="+1.8% MTD"
    navDeltaTone="up"
    metrics={[
      { label: "YTD return", value: "+4.2%", tone: "up" },
      { label: "Volatility (1y)", value: "9.1%" },
      { label: "Tracking error", value: "42 bps" },
      { label: "Cash", value: "8.2%" }
    ]}
  />