VWRA Visualizer

A React dashboard for the Vanguard FTSE All-World UCITS ETF (VWRA):

• Country composition — top 20 markets by weight (hardcoded from the latest factsheet) plus a "Rest of World" bucket.
• 1-year contribution — for any past trading day, shows each country's contribution to VWRA's 1-year return. Toggle between weighted and raw views.

Setup

npm install
npm run dev

Open the URL printed by Vite (default http://localhost:5173).

No API key needed — all data comes from Yahoo Finance (proxied through Vite to avoid CORS).

Scripts

• npm run dev — start the Vite dev server
• npm run build — type-check and build for production
• npm test — run the unit test suite (Vitest)

How it works

For a selected past date D:

1. Fetch adjusted daily close prices for D-370 through D from Yahoo Finance for VWRA and each top-20 country ETF (VTI, EWJ, EWU, …).
2. Find the nearest trading day P to D-365.
3. For each country: rawReturn = adjclose[D] / adjclose[P] - 1, weightedContribution = weight × rawReturn.
4. RoW = vwraReturn - sum(weightedContributions) — absorbs the ~3.6% of VWRA in countries 21+ plus proxy/timing mismatches.

Adjusted close handles dividends and splits, so the 1-year returns reflect total return.

Project structure

src/
├── App.tsx
├── main.tsx
├── styles.css
├── data/composition.ts          # hardcoded VWRA top-20 + ETF symbols
├── api/yahooFinance.ts          # Yahoo Finance chart client (adjclose)
├── hooks/useDailyReturns.ts     # date → returns state machine
├── lib/
│   ├── computeReturns.ts        # pure return math
│   ├── cache.ts                 # localStorage (symbol, date) → close
│   └── dates.ts                 # date helpers
└── components/
    ├── Header.tsx
    ├── CompositionChart.tsx
    └── ContributionChart.tsx