LazyCharts
먼저 보고, 그다음 계약을 읽습니다
React.lazy + Suspense로 recharts 청크를 실제 렌더 시점까지 지연 로드하는 framework-neutral LazyLineChart · LazyBarChart · LazyAreaChart — props는 각 즉시 로드 차트와 동일.
Component intent의도와 경계 읽기
recharts 청크를 대시보드 첫 페인트에서 분리하는 framework-neutral 변형이다. React.lazy가 Chart 모듈을 지연 import하고 Suspense fallback은 같은 height의 Skeleton을 예약한다. 기본 높이도 양쪽 모두 240px라 prop을 생략해도 layout shift가 없다. props는 LineChartProps / BarChartProps / AreaChartProps를 그대로 전달한다. lazy wrapper는 ref를 forward하지 않으므로 ref가 필요하면 즉시 로드 LineChart/BarChart/AreaChart를 쓴다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { LazyLineChart } from "@axe/ui";<LazyLineChart data={monthly} xKey="month" series={[{ key: "aum", label: "AUM" }]} height={280} // Skeleton·차트 높이 일치 → layout shift 0 ariaLabel="월별 운용자산 추이"/>import { LazyBarChart } from "@axe/ui";<LazyBarChart data={[ { quarter: "Q1", direct: 40, channel: 24 }, { quarter: "Q2", direct: 52, channel: 30 }, ]} xKey="quarter" series={[ { key: "direct", label: "직접" }, { key: "channel", label: "채널" }, ]} stacked height={260} ariaLabel="분기별 채널 매출 구성"/>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
data | Datum[] | 필수 | — | 레코드 배열(즉시 로드 차트와 동일). 각 원소는 xKey 라벨 + series 별 y값. |
xKey | string | 필수 | — | x축 key. data[i][xKey] 가 카테고리 축 라벨. |
series | ChartSeries[] | 필수 | — | 그릴 계열 목록. ChartSeries = { key, label?, color?, dashed? } — Chart 문서와 동일 형태. |
height | number | — | 240 | 로딩 Skeleton과 로드된 차트가 항상 같은 높이를 공유한다. 미지정 시 양쪽 모두 240px. |
showLegend | boolean | — | — | 범례 표시. 미지정 시 series 2개 이상이면 자동. |
showGrid | boolean | — | true | CartesianGrid 표시. |
onPointClick | (point: Datum) => void | — | — | point/bar 클릭 콜백(마우스 전용). 즉시 로드 차트와 동일. |
animate | boolean | — | — | 진입 애니메이션. 미지정 시 prefers-reduced-motion 이면 자동 false. |
ariaLabel | string | — | — | role="img" 컨테이너의 aria-label. 미지정 fallback 은 무의미하므로 사실상 필수. |
ariaDescribedBy | string | — | — | 확장 설명(숨긴 데이터 표) 요소의 id. |
className | string | — | — | 로드된 차트 루트 .axe-chart 에 병합(로딩 Skeleton 에는 미적용). |
stacked | boolean | — | false | [LazyBarChart 전용] bar 누적. |
gradient | boolean | — | true | [LazyAreaChart 전용] 영역 gradient fill. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-chart | stable | 로드 완료 후 내부 즉시 로드 차트의 루트 컨테이너 — className prop 이 여기 병합된다. Lazy 변형이 새로 정의하지 않고 Chart 의 클래스를 그대로 상속(data-display.css). |
.axe-skeleton | internal | 청크 로드 전 fallback — height 만큼의 Skeleton placeholder(기본 rect 변형, role="presentation"·aria-hidden). Lazy 변형의 로딩 상태 구현 세부로, Skeleton(indicators.css)에서 상속. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
로딩 중에는 Skeleton(role="presentation" + aria-hidden)이 렌더돼 SR 에 무시된다. 로드 완료 후에는 내부 차트의 role="img" + aria-label 계약을 그대로 상속한다(Chart 문서 참고).
Suspense가 청크 로드 전 Skeleton을 보여주고, Chart의 initialDimension이 SSR·hydrate 크기를 안정화한다. 로딩 Skeleton은 prefers-reduced-motion 시 shimmer를 멈춘다. 실제 수치의 SR·키보드 접근성은 로드된 차트에 달려 있으므로 ariaLabel·ariaDescribedBy를 챙긴다.