차트 그룹

차트 그룹

완전한 차트 표현

컴포넌트 설명용 데이터입니다. 실측 벤치마크는 제품 링크를 참고하세요.

사용 위치: 벤치마크.

사용법과 인터페이스

공통 척도의 값에는 BenchmarkBars를, 각 행의 구성에는 BenchmarkStackedBars를 사용하세요. 전송 페이로드 비교처럼 행 합계도 공통 척도로 비교해야 하면 누적 차트에 같은 max를 전달하세요. 아래 예제는 실측 결과가 아닌 설명용 데이터입니다. 실제 픽스처, 출처, 한계는 벤치마크를 참고하세요.

BenchmarkChartGroup은 기존 막대를 유지하면서 명확한 지표 제목, 단위, 표본 맥락을 함께 표시합니다. 현재 제목은 차트 그룹 검토 페이지에 있습니다. BenchmarkMetrics는 짧은 요약을 다듬은 정의 목록으로 표시하며 표 형식 숫자와 좁은 열에서 아래로 쌓이는 세부 설명을 제공합니다. 현재 지표 행은 지표 검토 페이지에서 확인할 수 있습니다. BenchmarkDataTable은 네이티브 펼침 영역과 이름이 있는 키보드 포커스 가능 스크롤 영역으로 긴 표의 모든 행과 열을 유지합니다. 데이터 표 검토 페이지에서 확인하세요. BenchmarkSource는 기록 날짜 옆에 커밋된 스냅샷을 표시하며 출처 검토 페이지에 현재 증거 바닥글이 있습니다. BenchmarkFigure, BenchmarkDelta, BenchmarkSampleSummary는 캡션, 맥락이 있는 변화량, 표본 통계를 제공합니다.

계열 레이블을 보이게 유지하고 단위와 표본 수를 포함하며 0과 누락된 데이터를 구분하세요. 레이블은 줄바꿈되고 값은 표 형식 숫자를 사용합니다. 0에는 색상 채우기가 없습니다. 누적 행은 각자 합계로 정규화되므로 길이로 절대 페이로드 크기를 비교할 수 없습니다. 중요한 발견과 한계는 차트 캡션뿐 아니라 문서 본문에도 쓰세요.

import BenchmarkChartGroup from '@master/internal-site/benchmarks/BenchmarkChartGroup.astro'import BenchmarkDataTable from '@master/internal-site/benchmarks/BenchmarkDataTable.astro'import BenchmarkSource from '@master/internal-site/benchmarks/BenchmarkSource.astro'<BenchmarkChartGroup title="Style recalculation" detail="Median · 3 samples" unit="ms"  items={[{ id: 'fixture-a', label: 'Fixture A', value: 12.5, color: 'blue' }]} /><BenchmarkDataTable title="All recorded measurements">  <table>    <thead><tr><th scope="col">Fixture</th><th scope="col">Median</th></tr></thead>    <tbody><tr><th scope="row">Fixture A</th><td>12.5 ms</td></tr></tbody>  </table></BenchmarkDataTable><BenchmarkSource generatedAt="2026-07-01T00:00:00Z" href="https://rc.css.master.co/benchmarks#data-sources" />

차트와 요약은 서버에서 렌더링되며 애니메이션이나 측정값 변경을 하지 않습니다. 표는 모바일 WebKit을 포함해 방향 키 스크롤을 일관되게 처리하는 작은 키보드 핸들러만 추가하며 펼침은 네이티브로 유지합니다. 차트마다 하나의 단위로 음이 아닌 유한값을 사용하고 부호가 있는 변화에는 변화량 레이블을 사용하세요. 항목보다 작은 max는 시각 척도를 잘라 내므로 피하세요. 표는 자체 영역 안에서만 가로로 스크롤되어야 하며 문서 전체가 스크롤되면 안 됩니다.

#완전한 차트 패턴