Trading Journal Dashboard

A client-side trading journal that turns a raw Notion CSV export into a full performance dashboard — R-multiple charts, calendar view, drawdown tracking, and more. Drop in your export, get an instant, multi-view breakdown of your trading performance. Nothing leaves the browser.

Live demo:[https://tradingdashboard-leopold.vercel.app/]

What it does

You export your trade log from Notion (the app auto-detects either of two Notion export formats), drop it into the upload zone, and the dashboard builds out 8 views from that data.

Don't have an export handy? The empty state includes a "Try sample data" option that loads a bundled, anonymized dataset (js/sampleData.js) — 64 synthetic trades across 5 months — so the app is fully demo-able with zero setup. A banner appears while sample data is active, with a one-click "Use my own data" button that clears it and returns to the upload screen.

The upload zone accepts multiple files at once for convenience — you can drag in your whole export folder without hunting for the right one — but only one file is actually parsed: whichever filename contains _all, or the first file selected if none match. Any other files you drop in are read but not used.

View	What it shows
Ledger	Per-month trade log with a good / bad / all filter
Monthly	Aggregated stats by calendar month
Calendar	Daily P&L heatmap across the month
Chart	Cumulative R-multiple curve, with a draggable range selector to inspect stats over any custom date window
Analysis	Win rate, streaks, and a live drawdown tracker
Performance	Grouped stats (by day-of-week, by hour, etc.)
Projection	Funded-account pass projection — set a profit target and buffer, see the math
Trades	Flat, filterable list of every individual trade

Why it exists

I trade to fund my CS degree, and I wanted a way to actually see patterns in my own trading — not just log trades, but understand when and why I win or lose. Notion is great for logging trades as they happen, but terrible for analysis. This closes that gap.

Architecture

This started as a single ~2,000-line HTML file and has since been split into ES modules along the app's natural feature boundaries — no build step, no framework, just plain <script type="module">:

index.html
css/
  styles.css
js/
  state.js        — shared application state
  parser.js       — Notion CSV parser (auto-detects two export formats)
  sampleData.js   — bundled anonymized demo dataset
  utils.js        — formatting/math helpers used across views
  nav.js          — sidebar navigation + page switching
  ledger.js
  monthly.js
  calendar.js
  chart.js
  analysis.js
  projection.js
  trades.js
  performance.js
  main.js         — entry point, wires modules together

Each view owns its own render logic and only imports what it needs from state.js and utils.js. State lives in one shared object (AppState) rather than scattered globals, so it's traceable across modules.

The CSV parser

The trickiest part of this project. It:

• Auto-detects which of two Notion export formats it's looking at (the schema changed between exports)
• Infers month/year from partial date strings, handling year rollover correctly (e.g. a trade dated "Dec 28" followed by one dated "Jan 3" is correctly inferred as crossing into the next year)
• Parses times as written, with no timezone conversion — trade times are meaningful in the session they occurred, not shifted to a arbitrary reference zone

Data & privacy

Everything runs client-side. Your CSVs are parsed in the browser and held in memory for the session — nothing is uploaded, stored, or sent to any server. Refreshing the page clears the data.

Running locally

This is a static site with ES modules, so it needs to be served over HTTP (not opened directly as a file:// URL):

python3 -m http.server 8000
# or: npx serve

Then open http://localhost:8000.

Stack

Vanilla JavaScript (ES modules), no framework, no build step, no dependencies.