shadcn.io is not affiliated with official shadcn/ui
Investment Portfolio Timeline Block for Solid
Eight trades across three invented funds on a rail, with the three positions as a lens in the first cell: pick one to see its trades, the shares held after each and the realised gain on every sale.
Installation
Overview
See a portfolio one trade at a time with this investment timeline for Solid with Ark UI. It is written for Lotbook, a fictional portfolio logbook, and shows eight trades in three invented funds. A hairline frame with a plus mark on each corner holds two cells. The first lists the three positions as a group of radio rows (shares held, average cost and cost held, all derived from the trades) plus "All funds"; on a phone it becomes a row you scroll sideways. The second is a rail of trades, newest first: each row says Bought or Sold, the shares and the price, the fund, the shares held after it and, on a sale, the realised gain or loss against the average cost with a sign and a word. A "Sells only" checkbox can narrow any choice down to nothing, which shows an empty state in the same height, because the full list is drawn unseen underneath. It is built from Empty, Button and Guides with native radios and CSS for the rail. Example figures, not advice.
FAQ
How do I change the trades?
Edit FUNDS and TRADES at the top of the file. A trade has a fund, an ISO day on, a price per share in integer cents and shares, positive for a buy and negative for a sale. buildLedger() derives the shares held, the cost held and the realised gain after every trade.
How is the gain worked out?
By the average-cost method. The cost held in a fund is the sum of what its buys cost; a sale removes that cost in proportion to the shares sold, and the gain is the proceeds minus the cost removed, in integer cents. The result is shown with a sign and the word gain, loss or break-even.
What stays in the page?
Only the chosen position and the "Sells only" box. Nothing is saved or sent, and nothing here is advice: the funds and prices are invented. To make it real, build TRADES from your broker's export.
Is it accessible?
The positions are native radio buttons in a fieldset labelled "Positions", so arrow keys move between them. Buys and sales are written as words as well as drawn as a dot and a diamond, and gains carry a sign and a word. The foot is a polite status line that says how many trades are shown.