shadcn.io is not affiliated with official shadcn/ui
Trader Equity Curve Profile Block for Solid
A trader profile that draws the running result of twelve trades as a line, with a token filter, a trades table you can step through, win rate, drawdown and a CSV download.
Installation
Overview
Show a trading record as it happened, with this trader profile for Solid with Ark UI. Inside a hairline frame with a plus mark on each corner, the first band names the trader and says it is a sample journal. The main cell starts with a Toggle Group that narrows twelve trades to one of three invented tokens, then three figures worked out from what is shown: the net result, the win rate and the deepest drawdown. A drawn line follows the running total trade by trade, with a dashed zero line and a dot on the trade you have chosen. Under it a table lists the trades, each date a button, and the end cell fills with the chosen trade: its result, pair and side, entry and exit prices, size and days held. The foot, ruled by Guides, holds a status line beside a Shine Button that downloads the shown trades as a CSV file. It's built from Toggle Group, Data List, Badge, Avatar, Shine Button and Guides, with an inline SVG line and a CSS entrance only. The tokens and prices are invented: not market data, not advice. For a trading journal, a strategy page or any record of results over time.
FAQ
How do I use my own trades?
Replace TRADES at the top: each has an opening and closing day, a token, a side, a size and the entry and exit prices. The result is the move times the size, reversed for a short, so you never type a profit by hand. The curve, the figures, the table and the detail all come from the same list, and TOKENS names the filter chips.
How are the win rate and drawdown worked out?
The win rate is the share of shown trades with a positive result, rounded to a whole percent. The drawdown is the largest fall from a running high, with the start at zero counting as a high, so a record that never goes up shows its deepest dip below zero. Both follow the token filter.
Why is the curve drawn by hand?
It is a single line, so an SVG path with a non-scaling stroke does the job without a charting library. The marker is a positioned dot, and the table under it carries every number, so nothing is only in the picture. The picture is hidden from assistive technology and the caption states where the curve ends.
What does Download CSV do?
It builds a file in the browser from the trades you are showing and hands it to the download: closing day, token, side, size, entry, exit and the result. Nothing is sent anywhere. The status line says how many trades were saved.
Is it accessible?
The filter is a named group, the trades table has column headers and a scroll region the keyboard can reach, and each date is a button that reports whether it is pressed. The result column pairs a sign with an arrow so a loss never reads only as a colour. The status line is a polite live region present from the start.
How does it look on a phone?
The chips scroll sideways, the three figures stay in a row, the curve is 14rem tall and the table keeps a fixed height and scrolls inside it, with the side column dropped beneath it. The side column's lines keep their order in a right-to-left layout, and the curve is always drawn left to right.