Chart card

The minimal chart card. Just a title + chart body, no KPI value on top. Choose this when the metric is time-series with ONE series and there is no big current value worth highlighting (e.g. discrete latency percentiles). If the reader should see the current KPI, use the KPI header recipe instead.

Adds the big value + suffix + optional subtitle metadata line. The most common Dashboard shape: 'Daily total sales volume · $90.52B USD · Maximum ticket: USD 65,121'. Pass `viewPaymentsFilter` (even as `{}`) to make the chart clickable and jump to /payments filtered by the clicked day.

Production mirror: the Insights time-series card as it ships today, Bar/Line toggle included. Use it only to rebuild that card. In a new flow the measure picks the form, no toggle: a rate is a line, a count or an amount is columns. The Yuno Insights time-series card. KPI header on the left; Bar/Line toggle + eye-hide on the right (both inside Main via <ChartCardControls />). Use for any single-series metric where the reader benefits from swapping bar and line (sales volume, approved payments, average ticket). Do NOT add View more — trend cards are direct visualisations, not drilldowns.

Production mirror: the payments and conversion rate card as it ships today, two scales in one plot. Use it only to rebuild that card. In a new flow, the rate sits on its declared band (the Rate and volume recipe on /components/chart), not on 0 to 100. Two related metrics share the X axis but use different Y scales (e.g. payments count + conversion rate). One chart, two Y axes, one dual legend row above. The chart type is fixed — omit variantSwitcher. Use `viewPaymentsFilter` if you want click-to-drilldown on the primary series.

Comparing two or three time-series on a shared Y axis, with a legend above the chart that names what it draws: each series with its latest value. Avoid the Bar/Line toggle. Past three series the lines tangle and a colour stops identifying anything: more than three is a table. Rates sit on their ten-point band (rateBand), as 2px straight lines.

Production mirror: the Insights provider charts as they ship today, eight providers on one chart with production's colours. Use it only to rebuild those cards. In a new flow a line chart carries up to three series; more providers is a table. 6+ series where each carries a visible current value (%, ms). The scrollable legend row at the top frees the chart from a dense bottom legend and lets the user filter to a single provider by tapping a chip. Pass `viewPaymentsFilter` if you want click-to-drilldown; if the user has filtered the chart to one provider, that provider is added to the query params automatically.

Production mirror: the Insights status stack as it ships today, with production's colours. Use it only to rebuild that card. In a new flow each state keeps its StatusBadge colour, icon and word: see the Payment states recipe on /components/chart. Internal composition matters AND the total matters (e.g. total payments = succeeded + declined + fraud). Each bar sums to a total that is comparable across categories. No toggle. Only eye-hide inside Main. Prod does NOT show View more on these — do not add it.

Production mirror: the Volume tab's six status lines as they ship today. Use it only to rebuild that card. In a new flow, payment states are stacked columns on their StatusBadge colours (the Payment states recipe on /components/chart), and a line chart carries up to three series. The Volume-tab hero pattern: 6 payment statuses (Succeeded / Declined / Refunded / Error / Pending / Created) rendered as separate lines with the full legend chip row above. Bar variant would be unreadable — no toggle. Only eye-hide sits top-right inside Main.

The metric IS configured but no data in the current range (e.g. APM conversion rate with no APM payments that week). Ghost bars keep the chart shape recognizable, with no scale, because they are not data; the centered tag names the window and the cut ("No APM payments in the last 7 days"), never a zero. Do NOT use this when the metric was never configured — that's the No-insight empty state (comes with a CTA to the guides).

You know the value is 0% and want to render the 0-100 axis empty as a confirmation (e.g. chargebacks rate 0% = everything under control). The KPI header shows `value="0" suffix="%"` and the chart body has no series. Use only for this specific "healthy zero" case; if there is genuinely no data, use the Empty chart recipe.

The metric supports configuring alerts (thresholds, ping to Slack/email). Put a Bell / BellSlash icon button in the `actions` slot so the user can mute/unmute from the card without changing screens. Compatible with `viewPaymentsFilter` — the bell toggle is independent of the click-through.

The metric changes based on how attempts are filtered (e.g. approval rate with or without retries). Put <AttemptsSelector /> in the `actions` slot so the user chooses the subset. Use only when retry logic changes the interpretation of the metric — do NOT bolt this onto latency or chargebacks, where it would suggest a capability that does not exist.

Production mirror: the Top X donuts as Insights ships them today. Use it only to rebuild those cards. In a new flow a share is ShareBar: one horizontal bar that adds up to the whole, with the same row list under it. The three donut cards that have a real drilldown in prod (Top issuers, Top providers, Top card brands) show a View more link top-right of the Header via the `actions` slot. Pass a shadcn <Button variant="link" size="sm">View more</Button>. Do NOT add View more to any other card just because it looks tidy — prod is intentional about this.

Two cards on one page do not always count the same thing: one counts payments, the next counts each attempt at a provider, and their totals do not add up. Pass `info` a ChartDefinition instead of a string and the Info icon opens a Popover on click with the sentence, the unit and what is left out. Set `showPer` only on the cards that differ from the rest of the page, so the Badge marks the exception. A string keeps the hover tooltip.