MetricsCard
visualPair a key metric with a Sparkline to show its value and trend together.
컴포넌트 의존 관계
깊이
100%
Basic Usage
Total Revenue$45,231up +12.5%
Expenses$12,345down -8.2%
Active Users1,234unchanged +0.5%
Without Sparkline
Total Orders1,234up +23 today
Pending Tasks12down -3 from yesterday
Team Members8
Trend Variants
All Trends
Up Trend$10,000up +15%
Down Trend$5,000down -10%
Neutral$7,500unchanged +0.1%
테스트 커버리지
2026년 7월 9일3/3 통과
3성공
0실패
3전체
- 제목과 값을 렌더링한다
- change와 trend를 표시한다
- article role과 aria-label을 가진다
MetricsCard Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title* | string | — | 지표 제목 |
value* | string | number | — | 지표 값 |
change | string | — | 변화량 텍스트 (예: '+12.5%') |
trend | TrendDirection | "neutral" | 트렌드 방향. 델타 배지에 상태색 + 화살표 + 숨김 텍스트(up/down)로 표시된다 |
invertTrend | boolean | false | 내려가는 게 좋은 지표(에러율·이탈·지연). 화살표는 그대로, 색의 판정만 뒤집는다 |
sparklineData | number[] | — | Sparkline 데이터 배열. 스파크라인은 트렌드와 무관하게 1번 슬롯의 선으로 그린다 |
sparklineProps | Omit<SparklineProps, 'data'> | — | Sparkline 추가 props |
labels | MetricsCardLabels | — | 방향 낱말(up/down/neutral)과 스파크라인 접근성 이름. 지역화 지점 |
className | string | — | 루트 요소에 붙는 CSS 클래스 |
valueClassName | string | — | 지표 값 요소에만 붙는 CSS 클래스 |
aria-label | string | — | 스크린 리더용 레이블 |
Import
tsx
import { MetricsCard } from "@reopt-ai/opt-ui";