MetricsCard
visual통계 카드 + Sparkline 조합. 주요 지표와 추세를 함께 표시합니다.
컴포넌트 의존 관계
깊이
100%
Basic Usage
Total Revenue$45,231↑ +12.5%
Expenses$12,345↓ -8.2%
Active Users1,234 +0.5%
Without Sparkline
Total Orders1,234↑ +23 today
Pending Tasks12↓ -3 from yesterday
Team Members8
Trend Variants
All Trends
Up Trend$10,000↑ +15%
Down Trend$5,000↓ -10%
Neutral$7,500 +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 | "up" | "down" | "neutral" | "neutral" | 트렌드 방향 |
sparklineData | number[] | — | Sparkline 데이터 배열 |
sparklineProps | Omit<SparklineProps, 'data'> | — | Sparkline 추가 props |
Import
tsx
import { MetricsCard } from "@reopt-ai/opt-ui";