사용법
KPI 카드 안에 작은 추세선을 넣을 때 써요. 포인터를 따라가며 시점별 값을 확인할 수 있어요.
-6일 $1.2. -5일 $1.8. -4일 $1.5. -3일 $2.1. -2일 $1.9. -1일 $2.4. 오늘 $2
채우기 없음
fill={false}로 선만 표시할 수 있어요.
1번째 1.2. 2번째 1.8. 3번째 1.5. 4번째 2.1. 5번째 1.9. 6번째 2.4. 7번째 2
스타일 커스터마이징
Sparkline는 className과 style prop으로 루트 스타일을 덮어쓸 수 있어요.
<Sparkline className="rounded-full px-4" style={{ opacity: 0.9 }} />인터페이스
SparklineProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| series* | number[] | — | 시계열 값 |
| labels | string[] | — | 포인트 라벨 |
| color | string | var(--gtd-primary) | 선·채우기 색 |
| fill | boolean | true | 영역 채우기 |
| strokeWidth | number | 1.4 | 선 두께 |
| valuePrefix | string | "" | 값 접두사 |
| emptyMessage | string | — | 빈 상태 메시지 |
| formatValue | (value: number) => string | — | 값 포맷터 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Sparkline 컴포넌트 Props 표
가져오기
import { Sparkline } from "@/components/ui/Sparkline";