스파크라인

축·라벨 없는 미니 추이선: StatCard 의 chart 슬롯 등 좁은 공간에 값의 흐름만 압축해 보여준다. 고정 크기 SVG 라 왜곡이 없고, 마지막 값은 서페이스 링을 두른 끝점으로 강조된다. 서버 컴포넌트에서 렌더 가능(2개 미만이면 '데이터 없음').

상태

primary

success

danger

넓게 (width)

활용 방법

StatCard 차트 슬롯

가장 흔한 쓰임: StatCard 의 chart prop 에 넘겨 지표 카드 우하단에 추이를 얹는다.

Preview

Productive Time / Day

+23%

12.4 hr

tsx

<StatCard
  label="Productive Time / Day"
  value="12.4"
  valueSuffix=" hr"
  trend={{ direction: "up", label: "+23%" }}
  chart={<Sparkline points={[8, 12, 9, 15, 13, 20, 18, 24]} />}
/>

속성

이름	타입	기본값	설명
points	number[]	-	값(오래된→최신). 2개 미만이면 '데이터 없음'
tone	ChartTone	"primary"	선·영역·끝점 색
width	number	80	SVG 너비(px)
height	number	28	SVG 높이(px)