shadcn.io is not affiliated with official shadcn/ui
Memory Usage Breakdown Monitoring Block for Svelte
A stacked area of used, cache and free memory on a 16 GB host over the last hour with swap as a line, a pin that jumps to the minute the kernel ended a worker, a System or Process heap switch and a cursor that reads the stack.
Installation
Overview
See where the memory went, and when a leak ended, with this stacked chart for Svelte with Ark UI. It is Bytebarn, a memory profiler, and the header is worked out from its series: "at 13:53 UTC the kernel ended worker-3 at 4.1 GB, and used memory fell from 11.4 GB to 7.9 GB". In a hairline frame with a plus mark on each corner, three bands (used, cache and buffers, free) stack to the host's 16 GB over the last 60 minutes, with swap in use as a thin line over them. A pin above the chart is a button: it marks the minute of the out-of-memory kill and moves the cursor there. Two radios switch the stack from the whole host to that worker's own memory, split into heap in use, heap spare and off-heap. A native range scrubs a cursor through the hour and the side list reads the stack at that minute, with the share of the host. Guides draw the frame and its bands; the entrance is CSS only. For hosts and containers where a slow leak ends in a kill.
FAQ
How do I load my own series?
USED, FREE and SWAP are sixty values in gigabytes, one per minute; CACHE is worked out as the 16 GB total minus the other two, so the stack always fills the axis. The process view comes from RESIDENT, split into heap, spare and off-heap shares. Set KILL to the minute of your out-of-memory event and AS_OF_MINUTES to the time of the last sample; the header, the pin, the captions and the side list follow.
What does the pin do?
It is a real button. Pressing it moves the cursor to the minute the kernel ended the worker and the status line reads out what happened. It is placed from the same minute as the dashed line down the chart, so the two cannot drift apart.
Is anything measured here?
No. The series are typed formulas with fixed numbers; nothing reads memory, /proc/meminfo or the kernel log, and the foot says it is a typed example. In your app read the values from your agent and the kill time from the kernel log.
What does a screen reader get?
The drawing is hidden from assistive technology and a caption says what it shows for the chosen view: where used memory started, peaked and fell, and the swap peak. The side list gives the exact figures at the cursor minute, and the range announces the time as its value text.