RetentionHeatmap

visual

Compare cohort retention using color intensity in a heatmap.

컴포넌트 의존 관계

깊이

100%

Weekly activation cohorts

Select a populated cell to open its cohort evidence.

User retention by weekly cohort
Cohort	Day 7	Day 14	Day 30
Aug 3
Aug 10			—
Aug 17		—	—
Aug 24	—	—	—

0%100%

Cohort

Aug 3

Period

Day 3

Retained profiles

806 of 1,240

테스트 커버리지

2026년 7월 9일

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

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

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

RetentionHeatmap Props

Prop	타입	기본값	설명
`data`*	`RetentionRow[]`	—	코호트 행 데이터 ({ cohort, values })
`periods`	`string[]`	—	열 헤더 (기본: P0, P1, ...)
`valueFormatter`	`(value: number) => string`	—	값 포맷터. 값은 퍼센트 포인트(38 → 38%)라 기본은 v/100을 로캘 percent 스타일로 그린다
`max`	`number`	`100`	가장 어두운 색을 받는 값. 리텐션은 퍼센트 포인트라 100이 기본. 비율이 작아 표가 전부 연하면 관측 최대값을 넘긴다
`colorScale`	`[string, string]`	`["var(--opt-chart-sequential-1)", "var(--opt-chart-sequential-5)"]`	색상 스케일 [최소, 최대]
`showLegend`	`boolean`	—	표 아래 색 스케일 범례. 기본은 표시(false로만 끈다)
`locale`	`string`	—	기본 퍼센트 포맷 로캘
`loading`	`boolean`	`false`	새 데이터를 기다리는 동안 현재 표를 흐리게 유지
`emptyState`	`React.ReactNode`	—	코호트가 없을 때 대신 그릴 내용. 기본은 labels.empty
`labels`	`RetentionHeatmapLabels`	—	빈 상태, 차트 이름, 첫 열 머리글(cohortColumn), 기간 머리글(period), 범례 이름. 지역화 지점
`onCellSelect`	`(cell: RetentionCellRef) => void`	—	채워진 셀을 선택했을 때 좌표와 값을 전달
`cellLabel`	`(cell: RetentionCellRef) => string`	—	상호작용 셀 버튼의 접근 가능한 이름 생성기
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`aria-label`	`string`	—	리텐션 표 caption으로 사용하는 접근 가능한 이름

Import

tsx

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