Sparkline

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

계열의 모양을 카드나 표 셀 안에서, 그것이 설명하는 수치 옆에 보여 주세요. 축, 범례, 툴팁이 없으니 label에 무엇을 보여 주고 어떻게 움직였는지 쓰세요. baseline에는 전일 종가 같은 기준값을 줍니다. 모양이 메시지를 전하는 자리, 예를 들어 추이 카드에서는 fill을 켜세요. 얼룩은 선의 색을 그대로 쓰니, 두 번째 색 없이 무게만 더해집니다.

• 값을 읽어야 하는 곳에는 Sparkline을 쓰지 마세요. 축, 읽기 영역, 표가 있는 LineChart를 쓰세요.
• label을 빼지 마세요. 선은 이미지라서, 스크린 리더가 듣는 것은 label뿐입니다.
• 색이 있는 수치 아래에 fill을 깔아 그 색과 다투게 하지 마세요. fill은 모양에 무게를 더할 뿐, 상태 신호가 아닙니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

svg(role=img, aria-label) → gradient + fade under the line + baseline + line + end marker

키보드와 접근성

Sparkline은 접근 가능한 이름이 있는 이미지입니다. 포커스를 받지 않고 상호작용도 없습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Sparkline } from '@surflane/ui'

<Sparkline
  data={closes}
  baseline={previousClose}
  label='KOSPI, last 30 days, up 2.3%'
/>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰