히트맵

행×열 밀도 그리드: 요일×시간대 예약 분포 같은 2차원 빈도를 보여준다. 순차(sequential) 스케일이라 단일 tone 의 불투명도 4단계로만 밝음→진함을 표현하고(무지개 금지), 0 은 빈 셀로 구분된다. 셀 hover 시 정확한 값이 title 로 노출된다.

상태

09111315171921월

화

수

목

금

토

일

적음많음

primary

09111315171921월

화

수

목

금

토

일

적음많음

point

활용 방법

요일 × 시간대 예약 밀도

values 는 rows × cols 행렬. formatValue 로 툴팁 단위를 바꾼다. 하단에 적음→많음 스케일 범례가 자동으로 붙는다.

Preview

09111315171921월

화

수

목

금

토

일

적음많음

tsx

<Heatmap
  rows={["월", "화", "수", "목", "금", "토", "일"]}
  cols={["09", "11", "13", "15", "17", "19", "21"]}
  values={grid /* number[][]: rows × cols */}
  formatValue={(v) => `${v}건 예약`}
/>

속성

이름	타입	기본값	설명
rows	string[]	-	행 라벨(예: 월~일)
cols	string[]	-	열 라벨(예: 시간대)
values	number[][]	-	rows × cols 값 행렬(음수 없음 가정)
tone	ChartTone	"primary"	셀 색(불투명도 4단계로 밀도 표현)
cellH	number	26	셀 높이(px)
formatValue	(v: number) => string	"n건"	셀 툴팁 값 포맷