데모셀 오버레이강조
결제수단 그룹 안에서 상위·하위 상품과 평균 초과 셀을 규칙으로 표시하는 데모입니다.
주요 특징
강조로 같은 결제수단·같은 분기 안의 Top/Bottom·평균 초과 셀만 표시합니다.
전체 순위가 아니라 그룹별 상대 성과를 기준으로, 프로모션 강화·정리 검토 대상을 구분할 수 있습니다.
| 규칙 | 범위 | 의미 | 아래 예제에서의 색상 |
|---|---|---|---|
top 2 | 결제수단 그룹 × 분기 열 | 해당 수단의 상위 상품 2개 | 연한 초록 배경 + 초록 굵은 글씨 |
bottom 2 | 동일 | 하위 상품 (프로모션 및 구성 변경 검토 대상) 2개 | 연한 분홍 배경 + 분홍 글씨 |
aboveAvg | 분기 열 전체 | 분기 평균을 넘는 상품 | 파란 굵은 글씨 |
bottomPercent 20% (판매 수량) | 결제수단 그룹 × 분기 | 수량 하위 구간 | 노란 배경 + 갈색 글씨 |
compareScope: ['rowGroup', 'column']은 결제수단 그룹별로 순위를 독립 산출합니다. 전체 기준으로 비교할 경우 실적이 큰 그룹의 상품만 상위로 강조되는 편향을 방지합니다.
화면에서 보기
행 축은 결제 수단 · 상품, 열 축은 연도 · 분기로 구성되어 있습니다.
초록색 굵은 글씨는 그룹 내 상위, 분홍색은 하위, 파란색 글씨는 분기 평균 초과 금액을 나타냅니다. 노란색 배경은 판매 수량 하위 20%로, 금액과 수량 간의 패턴 차이를 한눈에 비교할 수 있습니다.
| 조작 | 동작 |
|---|---|
| 필터 바 | 주문 상태 · 유입 채널 · 주문일 |
| 크로스헤어 | 행·열 교차 추적 |
코드로 지정하기
values: [
{
name: '주문 금액',
numberFormat: '"$",#,##0',
highlight: {
visible: true,
cellScope: ['value'],
compareScope: ['rowGroup', 'column'],
ruleMode: 'first',
rules: [
{ type: 'top', value: 2, style: { backgroundColor: '#ecfdf5', color: '#047857', bold: true } },
{ type: 'bottom', value: 2, style: { backgroundColor: '#fff1f2', color: '#be123c' } },
{ type: 'aboveAvg', compareScope: 'column', style: { color: '#1d4ed8', bold: true } },
],
},
},
]자세한 설정은 셀 오버레이 가이드를 참고하세요.
플레이그라운드를 불러오는 중…