Heatmap
Heatmap
각 열이 주를 나타내는 표 형태로 데이터를 표시하는 히트맵 차트 컴포넌트예요. 깃허브의 기여 그래프처럼 날짜별 활동을 시각화할 때 유용해요.
출처: 문서
본문
Usage
Heatmap은 각 열이 주(week)를 나타내는 표로 데이터를 표시해요. 필수 prop은 data뿐이에요. data는 키가 YYYY-MM-DD 형식의 날짜, 값이 숫자인 객체예요.
startDate와 endDate prop은 선택사항이며 히트맵 범위를 정의해요. 설정하지 않으면 히트맵은 지난 1년의 데이터를 표시해요.
import { Heatmap } from '@mantine/charts';
import { data } from './data';
function Demo() {
return <Heatmap data={data} />;
}
Data format
Heatmap은 다음 형식의 데이터를 기대해요.
export const data = {
'2025-02-14': 2,
'2025-02-11': 3,
'2025-02-06': 4,
'2025-02-05': 1,
'2025-02-03': 2,
'2025-02-01': 2,
'2025-01-31': 4,
'2025-01-30': 2,
// ...
};
With tooltip
withTooltip과 getTooltipLabel prop을 설정하면 Heatmap 셀을 호버할 때 툴팁을 표시해요. getTooltipLabel은 날짜와 값으로 호출되며 툴팁에 표시할 문자열을 반환해야 해요.
import dayjs from 'dayjs';
import { Heatmap } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<Heatmap
data={data}
withTooltip
getTooltipLabel={(date, value) =>
`${dayjs(date).format('DD MMM, YYYY')} – ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
}
/>
);
}
Change colors
Heatmap 색은 colors prop으로 바꿀 수 있어요. 유효한 CSS 색상 값(hex, rgba, CSS 변수 등)의 배열이어야 해요. 기본적으로 Heatmap은 열 수준을 나타내는 4가지 색을 사용하지만, 원하는 만큼 색을 전달할 수 있어요.
Colors depending on color scheme
색상 스킴에 따라 색을 바꾸려면 .css 파일에서 그 색들을 정의해야 해요. 이 경우 colors prop을 전달하지 않고 4가지 색만 사용할 수 있어요. 더 많은 색이 필요하면 컴포넌트에 수동으로 전달해야 해요.
Values domain
기본적으로 Heatmap은 데이터 값에 따라 domain을 계산해요. 예를 들어 다음 데이터로 domain은 [1, 4]가 돼요.
const data = {
'2025-02-14': 2,
'2025-02-11': 3,
'2025-02-06': 4,
'2025-02-05': 1,
};
domain을 기반으로 Heatmap은 각 rect의 색을 계산해요. 1은 최소 열 수준, 4는 최대 열 수준이에요. domain을 수동으로 지정하려면 domain prop을 사용하세요. 데이터가 가능한 값의 전체 범위를 다루지 않을 때 유용해요. 예를 들어 히트맵에 전달된 데이터 일부가 14의 값만 갖지만 실제 범위는 110이라면 domain prop에 [1, 10]을 전달할 수 있어요.
Weekdays and months labels
차트 라벨을 표시하려면 withMonthLabels와 withWeekdayLabels prop을 설정하세요.
Month labels position
monthLabelsPosition="bottom"으로 설정하면 월 라벨을 히트맵 아래에 표시해요.
Change labels text
라벨을 바꾸려면 weekdayLabels와 monthLabels prop을 사용하세요. weekdayLabels prop은 일요일부터 시작하는 요일 이름 7개의 배열이어야 해요. monthLabels prop은 1월부터 시작하는 월 이름 12개의 문자열 배열이어야 해요.
Rect size, gap and radius
rectSize, gap, rectRadius prop으로 셀의 크기, 간격, 모서리 반경을 조절할 수 있어요.
Pass props to rect
getRectProps를 사용해 각 rect에 props를 전달할 수 있어요. 예를 들어 각 rect에 onClick 핸들러를 추가하는 데 사용할 수 있어요.
import { Heatmap } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<Heatmap
data={data}
getRectProps={(date, value) => ({
onClick: () => console.log({ date, value }),
})}
/>
);
}
Hide outside dates
범위 밖의 날짜를 숨길 수 있어요.
First day of week
기본 주 시작 요일은 월요일이에요. firstDayOfWeek prop으로 바꿀 수 있어요.
Legend
withLegend를 설정하면 히트맵 아래에 색 범례를 표시해요. legendLabels prop으로 라벨을 커스터마이즈할 수 있어요(기본: ['Less', 'More']).
Split months
splitMonths로 스페이서 열로 월을 시각적으로 분리하고, 각 열에 현재 월에 속한 날짜만 표시할 수 있어요. splitMonths를 활성화하면 월 라벨이 한 열씩 이동하며, 2주 미만인 월은 라벨이 표시되지 않아요.