# P&L calendar

A React component in [Beamline](https://beamline.io/)'s [Trading](https://beamline.io/components/trading) category. Live demo: https://beamline.io/components/pnl-calendar

A trader's month at a glance: every trading day's profit or loss in its cell, shaded deeper the bigger it was in the gain or loss colour and marked ▲ or ▼, week totals down the side, and the month's total, win days and best and worst day on top; days the account did not trade stay plain and days that were never recorded are hatched.

## Use it for

- A trading journal or account page: how each day of a month went, in money, with week and month totals.
- Any signed daily figure a person reviews by month (net revenue per day, net deposits).

## Not for

- Counts over a year ([activity-heatmap](https://beamline.io/components/activity-heatmap)).
- Picking a date (calendar, [date-picker](https://beamline.io/components/date-picker)).
- Profit over time as a line ([area-chart](https://beamline.io/components/area-chart), [line-chart](https://beamline.io/components/line-chart)).

## Anatomy

- root: a size container
- header: the month with previous and next, the month's total (signed, ▲/▼), win days of trading days, the best and the worst day
- weekday row, then one row per week: seven day cells and the week's total at the end
- day cell: the date, the signed amount (compact), the number of trades; its fill is the gain or loss colour mixed into the card in five steps of size, and the glyph says which way
- today: a ring; a weekend or holiday with no trading: plain; a day never recorded (null): hatched and said as Not recorded
- selected day: the cell ringed and a line under the grid with its full figures (amount, trades, win rate)

## Variants

- **size**: sm, md

## States

- profit day
- loss day
- flat day
- no trading
- not recorded (hatched)
- today
- selected
- empty month

## Keyboard

- The grid is one tab stop: ← → ↑ ↓ move by day and week, Home/End to the week's ends
- Page Up / Page Down change the month (the focused day follows)
- Enter or Space selects the focused day and reads its figures out

## Motion

A new month slides in from the side it was asked for while the old one leaves the other way (a short, critically damped slide), and the month's total rolls to its new value. The selected ring glides from day to day. Cells never pulse on their own. Reduced motion: the month cross-fades and the total changes at once.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `days` (required) | `PnlDay[]` | — | { date: "YYYY-MM-DD", pnl: number \| null, trades?: number, wins?: number }. A missing date is a day without trading; pnl null is a day never recorded. |
| `month / defaultMonth / onMonthChange` | `string ("YYYY-MM")` | — | Defaults to the month of the latest day. |
| `selected / defaultSelected / onSelectedChange` | `string \| null ("YYYY-MM-DD")` | — |  |
| `format` | `(value: number) => string` | — | Money formatting; default signed with two decimals. |
| `currency` | `string` | — | A symbol before amounts ("$"). Ignored when format is given. |
| `weekStartsOn` | `0 \| 1` | — | Sunday or Monday. Default 1. |
| `weekends` | `boolean` | — | Show Saturday and Sunday (crypto trades every day). Default true. |
| `size` | `"sm" \| "md"` | — |  |
| `className / classNames / style / ref` | `root` | — |  |

## Built from

- button

## Dependencies

`lucide-react`

## Import

```tsx
import { PnlCalendar } from "@/components/pnl-calendar/pnl-calendar";
```

## Get it

P&L calendar is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Trading

- [Price chart](https://beamline.io/components/price-chart): Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
- [Market heatmap](https://beamline.io/components/market-heatmap): Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- [Order book](https://beamline.io/components/order-book): Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
- [Options chain](https://beamline.io/components/options-chain): Calls and puts for one expiry around a centre column of strikes: bid, ask, implied volatility, delta, volume and open interest, the money shaded in, a…
- [Depth chart](https://beamline.io/components/depth-chart): Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
- [Ticker tape](https://beamline.io/components/ticker-tape): A continuously scrolling row of symbols with price, change and mini trend; anyone can hold it: hover, keyboard focus or a tap.
- [Watchlist](https://beamline.io/components/watchlist): A selectable, sortable list of markets with mini trends, prices, changes and stars.
- [Trades tape](https://beamline.io/components/trades-tape): Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- [Order ticket](https://beamline.io/components/order-ticket): Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- [Swap form](https://beamline.io/components/swap-form): Exchange one token for another: type what you pay (or Max), pick each token from a searchable list with balances, and the form quotes what you receive…
- [Positions table](https://beamline.io/components/positions-table): Open positions with live unrealised PnL, liquidation warnings and close actions.
- [Price ticker](https://beamline.io/components/price-ticker): Symbol, last price with a directional flash, 24h change and stats.
- [Funding countdown](https://beamline.io/components/funding-countdown): Perpetual funding rate with who pays, and a live countdown ring to the next funding.