Metric trend

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

The page writes the card and its header; the block is the tabs and the chart. Put it straight in the Card, after the CardHeader and not in CardContent, so the tabs run to the card's edges. A CardAction in the header holds a control of the page's own, like a period picker.

The tab shows value, the period's summary as the app knows it. The block never adds up the points. Each point measures what value measures, at that time: a snapshot (open pipeline that week) or a running total (closed won to date). previous on a point draws the comparison period as a dashed line, and previousLabel names its date in the tooltip. A point with value: null leaves a gap, as the Support health example shows for the days still to come.

Tab goes from the selected tab straight into the chart. In Radix projects the arrow keys select each tab they reach. In Base UI projects they only move focus, and Enter or Space selects.

• aria-labelledby names the tab list: point it at the card's title, or pass aria-label when there is none. Each tab's name is its metric's whole text ("Closed won $3.41M −4.2% vs Last quarter"), so keep labels short.
• Direction is in the signed text. Whether a change is good shows in color only.
• The chart's points are reachable from the keyboard but announce nothing. The same points sit in a visually hidden table, one row per bucket with the comparison's value and date, so the trend is readable without the chart.

• The chart draws at once, with no entrance animation, so switching tabs doesn't shimmer.

• The tabs share the card's width, at least 9rem each, and the list scrolls sideways when they don't fit. A long label truncates; the value doesn't shrink.
• The chart is 16rem tall at any width. The axis thins its date labels as the card narrows.

• Only the selected metric's chart is mounted. Switching tabs mounts the next one, and the chart library loads with the block. Keep to one such card per page.

• Pass numbers to value, previous and every point, never formatted strings, and null for a point you don't have yet, never 0.
• For a quarter-to-date total, pass running totals as points, not weekly amounts.
• Pass a percent as a fraction (0.318) with a percent format, so its change reads in points.
• Set isIncreasePositive: false on every metric where a fall is good, like open cases, handle time or churn. Never flip the sign to get a color.
• Give every point a previousLabel when it has a previous, so the tooltip names both dates.
• Pass amounts in one currency and set currency to match, or give the metric its own currency format. Without either, a metric reads as a plain number. Mixed currencies are unavailable (value: null), not added up.
• Name the tabs with aria-labelledby (the card title's id) or aria-label.
• Put the block directly in the Card, never in CardContent.
• Never pass asChild or render.