WaffleChart
WaffleChart
전체의 부분을 색칠된 셀의 그리드로 표시하는 와플 차트(waffle chart) 컴포넌트예요. 파이·도넛 차트보다 비율 비교가 쉬워요. @mantine/charts의 대부분 차트와 달리 recharts를 사용하지 않고 일반 svg 요소로 렌더링돼요.
출처: 문서
본문
Usage
WaffleChart는 전체의 부분을 색칠된 셀의 그리드로 표시해요. data 배열의 각 세그먼트에는 그 value에 비례하는 수의 셀이 할당되므로 파이나 도넛 차트보다 비율을 비교하기 쉬워요.
@mantine/charts의 대부분 차트와 달리 WaffleChart는 recharts를 사용하지 않아요. 그리드는 일반 svg 요소로 렌더링돼요.
import { WaffleChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return <WaffleChart data={data} />;
}
Total
기본적으로 모든 value의 합이 100%로 간주되어 그리드 전체가 채워져요. total을 더 큰 숫자로 설정하면 나머지 셀을 비워두는데, 목표로의 진행 상황을 표시할 때 유용해요. 데이터 합보다 작은 값은 무시돼요.
Tooltip
withTooltip을 설정하면 셀을 호버할 때 툴팁을 표시해요. getTooltipLabel로 내용을 커스터마이즈할 수 있어요. 함수는 세그먼트와 그 세그먼트에 할당된 셀 수를 받아요.
import { WaffleChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<WaffleChart
data={data}
withTooltip
getTooltipLabel={(cell) => `${cell.name}: ${cell.value}%`}
/>
);
}
Legend
범례는 기본적으로 차트 하단에 표시돼요. legendPosition으로 top, left, right로 옮기거나 withLegend={false}로 숨길 수 있어요.
Gap and grid size
rows와 columns는 그리드의 셀 수(기본 10 × 10)를, gap은 셀 사이의 거리를, cellRadius는 각 셀의 모서리 반경을 제어해요. size로 차트 너비를 제어할 수 있고, 설정하지 않으면 열 수에서 너비가 계산돼요.
Fill direction
fillDirection은 셀이 채워지는 순서를 제어해요. (Left-to-right, Right-to-left, Top-to-bottom, Bottom-to-top)
Empty cells color
어떤 세그먼트에도 할당되지 않은 셀은 --waffle-empty-color를 사용해요. emptyColor prop으로 바꿀 수 있어요.
Accessibility
그리드는 스크린 리더에 각 세그먼트 이름과 값이 라벨된 단일 이미지로 노출되므로 범례 표시 여부와 관계없이 데이터에 접근할 수 있어요. 범례 자체는 그 이름들을 시각적으로 반복하므로 aria-hidden이에요.
aria-label(또는 aria-labelledby)을 설정해 값이 무엇을 나타내는지 설명하세요. 그러면 차트 루트가 라벨된 그룹이 되고(일반 div는 접근 가능한 이름을 가질 수 없어요), 여러분의 라벨이 생성된 데이터 요약을 대체하지 않고 함께 안내돼요.