Beta
Returns Calendar
Monthly-returns heat grid — years × months diverging up/down by magnitude, a compounded year-total column, and a hover read-out that dims everything unrelated.
Returns Calendar
Monthly-returns heat grid — years × months diverging up/down by magnitude, a compounded year-total column, and a hover read-out that dims everything unrelated.
When to use it
The diverging version, for values that can be positive or negative against a meaningful zero. The compounded year column is what makes it a summary rather than only a grid.
Install
Adds Returns Calendar and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/returns-calendar.jsonProps · ReturnsCalendar
| Prop | Type | Default |
|---|---|---|
| title? | stringHeading above the grid. | "Monthly returns" |
| hint? | stringCaption shown while nothing is hovered. | "hover a month · year = compounded" |
| years? | number[]Row labels — one per row of `returns`. | DEFAULT_YEARS |
| returns? | number[][]`returns[year][month]` in percent (12 months per row). | DEFAULT_RETURNS |
Generated from the component source. Run npm run props:extract after changing a signature.