Heatmap

visual

Visualize row-by-column intensity while retaining table headings and values for screen readers.

100%

상관 행렬

지표 간 상관 행렬 히트맵
	매출	방문	체류	전환
매출	1	0.82	0.31	-0.12
방문	0.82	1	0.47	0.05
체류	0.31	0.47	1	0.63
전환	-0.12	0.05	0.63	1

-11

활동 밀도

요일 × 시간대

요일별 시간대 활동 히트맵
	6	9	12	15	18	21
금	2	5	8	12	9	4
토	3	7	11	15	10	5
일	1	4	9	14	12	6

115

Data states and accessible values

Show cell values

Refreshing keeps the previous matrix visible. Hidden values remain available through cell names and hover text. Tab into the matrix and use arrow keys to move between cells.

Activity data states
	6	9	12	15	18	21
금	2	5	8	12	9	4
토	3	7	11	15	10	5
일	1	4	9	14	12	6

115

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

Heatmap 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Heatmap Props

Prop	타입	기본값	설명
`data`*	`number[][]`	—	행×열 값 매트릭스
`xLabels`	`string[]`	—	열 레이블
`yLabels`	`string[]`	—	행 레이블
`min`	`number`	—	색상 스케일 하한. 생략하면 데이터에서 구한다
`max`	`number`	—	색상 스케일 상한. 생략하면 데이터에서 구한다
`showValues`	`boolean`	`false`	셀 값의 시각적 표시 여부. false여도 스크린 리더와 hover로 확인 가능
`showLegend`	`boolean`	—	행렬 아래 색 스케일 범례(최소→최대). 기본은 표시(false로만 끈다)
`valueFormatter`	`(value: number) => string`	—	값을 표시 문자열로 바꾸는 함수. 기본은 로캘 숫자(formatNumber)
`locale`	`string`	—	기본 숫자 포맷 로캘
`loading`	`boolean`	`false`	새 데이터를 기다리는 동안 현재 표를 흐리게 유지
`emptyState`	`React.ReactNode`	—	데이터가 없을 때 대신 그릴 내용. 기본은 labels.empty
`labels`	`HeatmapLabels`	—	빈 상태, 차트 이름, 셀 이름(cellLabel: 행 × 열: 값), 범례 이름. 지역화 지점
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`aria-label`	`string`	—	스크린 리더용 레이블. 표 caption이 된다
`colorScale`	`[string, string]`	—	저→고 색상 (기본: 테마 sequential 토큰)
`scale`	`"sequential" \| "diverging"`	`"sequential"`	색이 값을 인코딩하는 방식. sequential은 한 색상 밝음→어둠(크기), diverging은 center를 중립 회색 중간점으로 둔 빨강↔파랑(극성 — 상관계수·전기 대비 변화)
`center`	`number`	`0`	diverging 스케일의 중간점

Import

tsx

import { Heatmap } from "@reopt-ai/opt-ui";