Skip to content

feat(core): add all-in-one MetricCard component - #3326

Open
FrancescoCastaldi wants to merge 2 commits into
evidence-dev:nextfrom
FrancescoCastaldi:feat/metric-card-component
Open

feat(core): add all-in-one MetricCard component#3326
FrancescoCastaldi wants to merge 2 commits into
evidence-dev:nextfrom
FrancescoCastaldi:feat/metric-card-component

Conversation

@FrancescoCastaldi

Copy link
Copy Markdown

Description

This PR introduces the <MetricCard> (metric_card) all-in-one KPI card component.

Modern dashboards frequently need compact, highly readable summary cards that unify the primary metric figure, comparison/trend badges, and sparkline history in a clean card container.

Features

  1. Primary KPI Value:
    • Formats values using Evidence format strings (value_fmt="usd", value_fmt="pct").
    • Shows spinner during query loading.
  2. Integrated Sparkline:
    • sparkline_date="date_col", sparkline_value="val_col", sparkline_type="line|area|bar".
    • Embeds interactive micro-charts directly on the bottom right of the card.
  3. Comparison & Delta Badges:
    • Automatic delta calculation (comparison="prior_col" or explicit delta/values).
    • Renders trend pill badges (badge=true) or plain deltas with down_is_good awareness.
  4. Interactive Navigation:
    • Optional link="/details" turns the entire card into an interactive card button with hover elevation.
  5. Unit Tests:
    • Added MetricCard.test.ts.

- add <MetricCard> / metric_card tag combining BigValue, Sparkline trend, and Delta badge
- support automatic delta calculation and comparison period labeling
- support interactive sparkline rendering (line, area, bar)
- support optional clickable card links and info tooltip
- add unit test suite
@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Evidence Team on Vercel.

A member of the Team first needs to authorize it.

@FrancescoCastaldi

Copy link
Copy Markdown
Author

Hi @archiewood @hughess! 👋 This PR introduces the all-in-one KPI component combining BigValue, Sparkline trend, and Delta badge. Whenever you get a chance, we would love your review!

@hughess

hughess commented Aug 27, 2026

Copy link
Copy Markdown
Member

Hi @FrancescoCastaldi - why not use (or adjust) big_value for this use case?

@FrancescoCastaldi

Copy link
Copy Markdown
Author

Good point @hughess! Refactored to build directly on top of �ig_value instead of introducing a separate tag.

We have removed the standalone metric_card and extended �ig_value to support:

  1. subtitle (and subtitle_class): secondary context label beneath the title.
  2. comparison.chip: render delta comparisons as styled pill badges (chip=true).
  3. card: optional standalone card styling (card=true) with rounded borders, shadow, and background padding.

All tests updated and passing! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants