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년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

MetricsCard 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

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";