Area chart

미리보기

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

사용법

디스크 사용량이나 프로젝트별 토큰처럼 시간을 따라 흐르는 양을 에어리어로 채워 그리고, 쌓아서 맨 위가 합계가 되게 하세요. 채움은 양이므로 에어리어는 선형 축에서 항상 0에서 올라옵니다. 항상 제목, 사실 요약, 단위가 있는 축 이름을 제공하세요. 시리즈는 기본적으로 브랜드와 중립 색상의 채움을 쓰고, 채움 패턴과 대시, 마커로 구분합니다. 프로젝트처럼 색으로 나눠야 하는 범주에는 palette="categorical"을 주세요. 시리즈가 열둘을 넘는 곳에는 palette="extended"를 주세요. dashes={false}는 모든 윗선을 실선으로 긋습니다. stacked는 시리즈를 합계에 더하고 값 영역이 그 합계를 적습니다. 비교나 plan 시리즈는 목표처럼 점선만 따로 그리고 합계에 넣지 않습니다. xScale="time"에서는 행이 data[].time에 놓이고 에어리어가 수집이 멈춘 곳이나 breakAfter보다 긴 공백에서 끊깁니다. curve="step"은 디스크 사용량처럼 바뀔 때만 잰 값을 유지합니다. references는 임계선과 목표 띠, x 축의 사건과 기간을 그려 줍니다. 대시보드 카드 안에서는 density="compact"가 플롯, 범례, 떠 있는 값만 남기고, minimal이 표시만 남깁니다. 호출하는 쪽이 소유한 불변 배열로 data를 전달하세요.

• 가격처럼 0에서 먼 값이나 자릿수가 크게 다른 값은 채우지 마세요. 없는 양을 있는 것처럼 주장합니다. LineChart를 쓰되 includeZero={false}나 yScale="log"를 주세요.
• 노드별 온도처럼 합해지지 않는 시리즈는 쌓지 마세요. 전체의 일부만 쌓고 나머지는 LineChart로 그리세요.
• 고를 수 있다면 많은 시리즈를 쌓지 마세요. 각 겹이 아래 겹 위에 올라타므로 가장 아래 겹과 합계만 자기 변화를 읽힙니다. 큰 것만 남기고 나머지는 기타로 합치거나, LineChart로 변화를 비교하세요.
• 한 축에 단위를 섞지 마세요. 대신 별도 차트를 사용하세요.
• 누락 값을 0으로 대체하지 마세요. 대신 null을 전달하세요. 차트는 null, undefined, NaN, Infinity를 누락으로 처리하고 그 자리에서 에어리어를 끊습니다.
• 차트가 로딩, 오류, 재시도 상태를 보여주기를 기대하지 마세요. 제품 화면에서 직접 만드세요.
• 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 { AreaChart, type ChartDatum } from '@surflane/ui/chart'

const data: ChartDatum[] = [
  { id: 'oct-1', label: 'October 1', values: { models: 412, cache: 96 } },
  { id: 'oct-2', label: 'October 2', values: { models: 438, cache: 120 } },
  { id: 'oct-3', label: 'October 3', values: { models: 451, cache: 88 } },
]
<AreaChart
  title='Disk used'
  description='Models grow from 412 to 451 GiB; the cache stays near 100 GiB.'
  xLabel='Day'
  yLabel='Disk used'
  unit='GiB'
  data={data}
  series={[
    { key: 'models', label: '/srv/models' },
    { key: 'cache', label: '/srv/cache' },
  ]}
  stacked
/>

주요 API

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

관련 토큰