데모탐색기상세
이커머스 주문 집계 셀에 기여한 원본 행을 Detail 패널로 확인하는 데모이다.
화면에서 보기
로드가 끝나면 합계 셀 기준으로 탐색기가 열린 상태로 표시된다.
값 셀을 더블클릭하거나, 포커스된 셀에서 Enter를 눌러도 열 수 있다.
이 데모는 explorerMode: 'detail'이라 Detail 패널이 바로 표시되며, 기본 데이터 모드는 원본(source) 이다.
| 조작 | 동작 |
|---|---|
| 값 셀 더블클릭 · Enter | 탐색기 열기(상세) |
| Detail / Chart / Map 탭 | 모드 전환 |
| 탐색기 메뉴 · 큐브 데이터 / 원본 데이터 | Detail 데이터 소스 전환 |
| 탐색기 메뉴 · 행 교차 색상 · 행 단위 스크롤 | Detail 표시 옵션 |
| 탐색기 메뉴 · 위치 | 아래 / 왼쪽 / 오른쪽 |
| 닫기 버튼 | 탐색기 닫기 |
집계된 주문 금액·건수 셀을 열면 해당 조건의 주문 행(OrderID, 고객, 상품, 결제 수단 등)을 확인할 수 있다.
코드로 지정하기
페이지의 explorerMode: 'detail'로 탐색기 초기 모드를 Detail 패널로 지정하고, detail 옵션으로 세부 동작을 설정한다.
tables: {
// ...
explorerMode: 'detail',
explorerPosition: 'bottom',
explorerHeight: '40%',
detail: {
dataMode: 'source',
sourceFields: ['OrderID', 'Date', 'CustomerID', 'Product', 'Quantity', 'UnitPrice', 'PaymentMethod', 'OrderStatus', 'ReferralSource', 'TotalPrice'],
alternateRowColor: true,
scrollByRow: false,
},
},| 옵션 | 역할 |
|---|---|
explorerMode | 탐색기 초기 모드. 'detail' | 'chart' | 'map' |
explorerPosition | 탐색기 위치. 'bottom' | 'left' | 'right' |
explorerHeight | 아래쪽일 때 초기 높이(px 또는 %) |
dataMode | 'source'면 원본 DataSet 행, 'cube'면 큐브 집계 행을 보여준다 |
sourceFields | 원본(source) 모드에서 표시할 필드. 생략하면 전체 필드 |
alternateRowColor | 행 교차 색상 |
scrollByRow | 행 단위 스크롤 |
자세한 설정은 탐색기를 참고한다.
플레이그라운드를 불러오는 중…