Component library

Dashboard

• <FinanceOverviewCard>

  financeStatsChartDashboard

  Two-column financial headline: left block (title, date range, total revenue with optional delta and footnote), right block (product condition headline, optional trend pill, year selector, multi-series monotone area chart), plus a three-column footer row for supporting metrics.

  When to use: Use for executive-style revenue or adoption snapshots in report readouts. Pass `chartMonths` and aligned `chartSeries[].values`; include at least one series (empty shows a muted placeholder). Keep series count to 2–4 for clarity. Footer `stats` should contain exactly three items.

  Preview

  Financial income

  1 Aug 2025 – 1 Nov 2025

  Total revenue+9.78%

  £8,240.00

  Increased 15% from last month

  Product condition

  75%2.8%

  Year202420252026

  Selling product

  £335,000

  Followers

  1,500

  Campaign

  560

  Prop	Type	Notes
  dateRange	string	Required. Human-readable range under the income title.Example: 1 Aug 2025 – 1 Nov 2025
  totalRevenueValue	string	Required. Large headline currency string.Example: £8,240.00
  incomeTitle	string	Optional. Default: "Financial income". Left column title.
  totalRevenueLabel	string	Optional. Default: "Total revenue". Label above the headline figure.
  totalRevenueDelta	string	Optional. Optional percentage chip; leading + uses success colour, leading − uses error.
  totalRevenueFootnote	string	Optional. Muted line under the revenue figure.
  conditionValue	string	Required. Large headline next to the chart header.Example: 75%
  conditionTitle	string	Optional. Default: "Product condition". Muted label above the condition value.
  conditionBadgeText	string	Optional. Pill text beside the condition value.Example: 2.8%
  conditionBadgeTrend	"up" | "down"	Optional. Default: down. Arrow direction inside the pill.Values: up, down
  years	string[]	Optional. Default: ["2025"]. Year `<select>` options.
  chartMonths	string[]	Required. X-axis labels in order (e.g. Jan … Jul).
  chartSeries	{ name: string; values: number[]; colorKey: "brand"|"sky"|"slate" }[]	Required. One or more series; each `values` array must match `chartMonths` length. If empty, a muted placeholder is shown instead of the chart.
  stats	{ label: string; value: string; labelTone?: "brand"|"sky"|"emerald" }[]	Required. Exactly three footer metrics.

  Examples

  <FinanceOverviewCard
      dateRange="1 Aug 2025 – 1 Nov 2025"
      totalRevenueDelta="+9.78%"
      totalRevenueValue="£8,240.00"
      totalRevenueFootnote="Increased 15% from last month"
      conditionValue="75%"
      conditionBadgeText="2.8%"
      years={["2024", "2025", "2026"]}
      chartMonths={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
      chartSeries={[
          { name: "Series A", values: [1200, 1800, 2200, 2600, 3000, 3400, 3800], colorKey: "sky" },
          { name: "Series B", values: [800, 1100, 1400, 1700, 2100, 2500, 2900], colorKey: "brand" },
          { name: "Series C", values: [400, 500, 600, 700, 800, 900, 1000], colorKey: "slate" }
      ]}
      stats={[
          { label: "Selling product", value: "£335,000", labelTone: "sky" },
          { label: "Followers", value: "1,500", labelTone: "sky" },
          { label: "Campaign", value: "560", labelTone: "emerald" }
      ]}
  />

• <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 }
    ]}
  />