데모셀 오버레이히트맵
채널·결제수단 × 분기 매트릭스에서 고매출·저매출 구간을 색으로 구분하는 데모입니다.
주요 특징
히트맵으로 값의 상대 위치를 색으로 표시해, 고매출·저매출 구간을 빠르게 찾을 수 있습니다.
프로모션·재고처럼 우선순위가 필요한 분석에 맞춰 구성했습니다.
| 값 필드 | 색 스케일 | 비교 범위 | 역할 |
|---|---|---|---|
| 주문 금액 | 3색 (주황 계열) | 전체(all) | 표 전역 고매출 셀 표시 |
| 주문 건수 | 2색 (파랑 계열) | 열(column) | 같은 분기 안 건수 밀도 비교 |
| 평균 단가 | (색 없음) | — | 단순 수치 참조 (색상 미적용) |
금액은 전체 기준 3색, 건수는 열(분기) 기준 2색 스케일로 비교합니다.
백분위수 모드(boundsMode: 'percentile')를 적용하여 극단값에 의한 색상 치우침을 방지합니다.
화면에서 보기
행 축은 유입 채널 · 결제 수단, 열 축은 연도 · 분기로 구성되어 있습니다.
짙은 주황색은 고매출 구간, 옅은 색은 저매출 구간을 나타냅니다. 금액 색상은 진하지만 건수 색상이 옅은 경우, 소량의 고단가 주문이 집중된 구간으로 해석할 수 있습니다.
| 조작 | 동작 |
|---|---|
| 필터 바 | 주문 상태 · 상품 · 주문일 |
| 크로스헤어 | 커서 위치의 행·열을 동시에 강조 |
코드로 지정하기
values: [
{
name: '주문 금액',
numberFormat: '"$",#,##0',
heatmap: {
visible: true,
cellScope: 'value',
compareScope: 'all',
boundsMode: 'percentile',
minValue: 10,
midValue: 50,
maxValue: 90,
colors: ['#fff7ed', '#fb923c', '#9a3412'],
},
},
]자세한 설정은 셀 오버레이 가이드를 참고하세요.
플레이그라운드를 불러오는 중…