Line chart

미리보기

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

사용법

시간이나 그 밖의 순서를 따라 변하는 값을 온도, 지연, 가격, 벤치마크와 견주는 포트폴리오처럼 선으로 그리세요. 선은 기울기를 말하므로 0에서 먼 값도 읽힙니다. includeZero={false}를 주면 선이 높이를 채웁니다. 항상 제목, 사실 요약, 단위가 있는 축 이름을 제공하세요. 시리즈는 기본적으로 브랜드와 중립 색상의 선을 쓰고, 대시와 마커로 구분합니다. 버킷처럼 색으로 나눠야 하는 범주에는 palette="categorical"을 주세요. 시리즈가 열둘을 넘는 곳에는 palette="extended"가 같은 열두 색조를 한 단계 다른 열둘을 더하고, dashes={false}는 모든 선을 실선으로 긋고 시리즈는 마커로 구분하게 둡니다. 모니터링에서는 xScale="time"이 data[].time으로 행을 놓고 둥근 시각에 눈금을 두며 수집이 멈춘 곳이나 breakAfter보다 긴 공백에서 선을 끊습니다(영업일 종가라면 4일). references는 임계선과 목표 띠와 x 축의 사건과 기간을, comparison 시리즈는 벤치마크처럼 조용한 비교선을, difference는 두 선 사이의 차이를, curve="step"은 바뀔 때만 잰 값을, yScale="log"는 자릿수가 다른 값을 보여 줍니다. 대시보드 카드 안에서는 density="compact"가 플롯, 범례, 떠 있는 값만 남기고, 카드 위 추세에는 minimal이 표시만 남기며 extremes가 기간의 고점과 저점에 라벨을 붙입니다. 호출하는 쪽이 소유한 불변 배열로 data를 전달하세요.

• 한 축에 단위를 섞지 마세요. 대신 별도 차트를 사용하세요.
• 종류별 토큰처럼 전체의 일부를 선으로 그리지 마세요. 합계를 보여주는 AreaChart나 BarChart에 stacked를 쓰세요.
• 한 측정값을 다른 측정값에 대어 놓을 때는 여기 말고 ScatterChart를 쓰세요. 항목마다 점 하나입니다.
• 고를 수 있다면 한 차트에 시리즈를 일곱 개 넘게 넣지 마세요. 큰 것만 남기고 나머지는 기타로 합치거나 차트를 나누세요. 프로젝트별 토큰처럼 더 많이 비교해야 하는 모니터링 화면은 선을 모두 플롯에 두고, 범주형 12색을 쓰고, 시리즈가 열둘을 넘으면 스물넷을 쓰는 palette="extended"를 쓰고, legendLimit으로 범례를 접습니다.
• 화면을 덜 어수선하게 하려고 대시를 끄지 마세요. 40포인트 이상에서는 이미 마커를 지워 그렇게 하고 있고, 실선으로 긋는 차트는 오히려 마커를 남겨 잉크가 늘어납니다. 실선은 선의 모양 때문에 고르는 것이고, 플롯이 답답하면 차트를 나누세요.
• 누락 값을 0으로 대체하지 마세요. 대신 null을 전달하세요. 차트는 null, undefined, NaN, Infinity를 누락으로 처리하며 그 사이에 선을 연결하지 않습니다.
• 두 번째 값 축을 기대하지 마세요. 다른 단위는 다른 차트에, 자릿수가 크게 다른 값은 yScale="log"에 두세요.
• 부드러운 곡선을 기대하지 마세요. 선은 직선이나 계단이므로 차트가 측정되지 않은 극단값을 만들지 않습니다.
• 차트가 로딩, 오류, 재시도 상태를 보여주기를 기대하지 마세요. 제품 화면에서 직접 만드세요.
• description prop이 자동 추론된 분석이기를 기대하지 마세요. 호출하는 쪽의 사실 요약을 담습니다.

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

구성

figure → figcaption(title + summary) + legend toggle buttons + named axes + responsive Recharts ComposedChart + persistent inline value readout + details → Table.Container → full data table

키보드와 접근성

• Tab은 범례 버튼, 차트, 데이터 테이블 토글에 도달합니다.
• 차트에 포커스가 있으면 Left와 Right로 데이터 포인트 사이를 이동합니다.
• 범례 버튼의 Enter나 Space는 시리즈를 표시하거나 숨기며, aria-pressed가 표시 여부를 알립니다. 숨겨진 시리즈는 데이터 테이블에 유지됩니다.
• View data table은 Enter나 Space로 펼쳐지는 네이티브 details 요소입니다. 긴 테이블은 양축으로 스크롤됩니다. 단위는 시리즈 헤더에 한 번만 쓰고, 셀에는 전체 값을 끝에 맞춰 둡니다.
• Escape는 상세를 지우고, 화살표 키는 다시 표시합니다.
• 포인터, 터치, 화살표 키로 고른 지점의 값이 그 옆 상자에 뜹니다. 상자는 공간이 넓은 쪽으로 열리고 플롯 밖으로 나가지 않습니다. 같은 값이 플롯 아래 상세 영역에도 채워지는데, 이 영역은 마크를 가리지 않는 polite live region입니다. 상자 자체는 접근성 트리에서 빠집니다.
• 원, 사각형, 삼각형 마커와 선 패턴이 색 외에 시리즈를 구분합니다. 고대비 모드에서도 유지됩니다.
• 대시를 끄면 마커가 그 구분을 혼자 담당하므로, 대시를 둔 차트가 40포인트 이상에서 마커를 지울 때도 실선으로 긋는 차트는 마커를 남깁니다.
• 40포인트를 넘으면 플롯이 겹침을 줄이기 위해 마커를 생략합니다. 범례 마커, 선 패턴, 상세, 테이블은 유지됩니다.
• 애니메이션은 기본적으로 꺼져 있습니다.
• 사이드바가 움직이거나 창 가장자리를 끄는 동안처럼 차트의 자리가 계속 바뀌면, 플롯은 마지막으로 그린 폭을 지키고 차트 밖으로 넘치는 부분은 잘라 둔 채 자리가 멈추면 다시 그립니다. 자리가 한 번만 바뀌면 바로 그립니다.
• 제품 통합 후 실제 보조 기술 사용성을 별도로 테스트하세요.

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

예시 코드

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

// Needs recharts: npm install recharts
import { LineChart, type ChartDatum } from '@surflane/ui/chart'

const data: ChartDatum[] = [
  { id: 'day-1', label: 'October 1', values: { workspace: 12, inventory: 8 } },
  {
    id: 'day-2',
    label: 'October 2',
    values: { workspace: 18, inventory: null },
  },
  { id: 'day-3', label: 'October 3', values: { workspace: 14, inventory: 10 } },
]
<LineChart
  title='Pipeline activity'
  description='Workspace records 12, 18 and 14 runs; Inventory has no report on October 2.'
  xLabel='Reporting day'
  yLabel='Pipeline run count'
  unit='runs'
  data={data}
  series={[
    { key: 'workspace', label: 'Workspace' },
    { key: 'inventory', label: 'Inventory' },
  ]}
/>

// Controlled selection: update only when the owner accepts the change.
// hiddenSeries={hidden} onHiddenSeriesChange={setHidden}
// Render loading/error/retry in the owning product before the chart.

주요 API

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

관련 토큰