Components
Sparkline
Stat Card 안에 들어가는 한 줄 추세선입니다. 축·눈금 없이 방향만 말합니다. 인라인 SVG 실물입니다.
파랑 — 강조 지표
검정 — 보조 지표
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<svg class="tn-spark" width="140" height="36" viewBox="0 0 140 36" fill="none">
<polyline points="0,28 18,24 ... 140,9" stroke="currentColor" stroke-width="2"/>
</svg>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 파랑 | 화면의 주인공 지표 1개만 | |
| 검정(mono) | 보조 지표 — 파랑과 병렬로 | |
| 끝점 도트 | 마지막 값 위치를 원으로 표시 |
Guidelines
✓ Do
- stroke는 currentColor — 색은 클래스가 결정
- 끝점 도트로 '지금'을 표시
- Stat Card의 수치 아래 배치
✕ Don't
- 축·눈금·그리드 금지 (그 순간 Bar Chart가 맞다)
- 한 카드에 스파크라인 2개 이상 금지
- 면 채우기(area fill)로 무게 주지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
크기 | 140×36 (카드 내 80~100px) | |
stroke | 2px · round cap/join | |
색 | currentColor | tn-spark=파랑 · .mono=검정 |
비교
Insight Stat Card 추이 실물에서 추출. Sparkline vs Bar — 값 판독 불필요·방향만 암시가 스파크라인의 존재 이유.