Cost explorerPro
Spend by model, user or feature over days, with a breakdown table.
On this page
ProTwo weeks of spend by model, user or feature, smallest models folded into Other.
Installation
Usage
import { CostExplorer } from "@/components/ui/chatcn/pro/cost-explorer"
<CostExplorer records={records} currency="USD" />Built on the kit's chart, so the legend, tooltip, table view and every state come with it. The biggest groups keep their own color in a fixed order; the rest fold into Other, so colors never cycle and a group keeps its color when you switch breakdowns.
Examples
States
ProBy feature in euros, and loading.
Props
| Prop | Type | Notes |
|---|---|---|
records | CostRecord[] | { day, model, user, feature, cost, requests } |
defaultDimension | "model" | "user" | "feature" | Default model |
maxSeries | number | Groups before Other. Default 5 |
currency, locale | string | Money formatting |
loading | boolean | Skeleton at the final size |
Accessibility
- The breakdown switch is a radio group.
- The chart has a table view; the breakdown table repeats the totals in text.