탐색기(Explorer)

선택한 셀·영역의 상세 행, 차트, 맵을 보여주는 탐색기 패널 설정과 사용법입니다.

탐색기는 피벗에서 고른 셀(또는 선택 영역)에 대응하는 데이터를 Detail / Chart / Map 패널로 제공합니다. 북 공통 UI이며, 패널이 추가되는 위치·모드·차트 옵션은 페이지(tables) 옵션에서 지정합니다.

Book 개요는 피벗 북(Book)을 참고하세요.

Detail 패널이 열린 탐색기

어디에 지정하나요

계층	속성	역할
Book `explorer`	`PivotExplorerOptions` \| `boolean`	탐색기 셸·패널 탭 표시
Book `general`	`enableExplorer` · `enableDetail` · `enableChart` · `enableMap`	기능 자체 on/off
페이지 `tables`	`explorerPosition` · `explorerMode` · `explorerWidth` · `explorerHeight`	위치·모드·초기 크기
페이지 `tables.detail`	`PivotBookPageDetailOptions`	Detail 데이터 소스·필드
페이지 `tables.chart`	`PivotBookPageChartOptions`	차트 유형·축
페이지 `tables.map`	`PivotBookPageMapOptions`	맵 차트(지도 URL 등)

explorer 속성은 객체를 사용해 세부 옵션을 설정하거나, boolean 값(true/false)으로 표시 여부만 간단히 지정할 수 있습니다. 또한 detailPanel, chartPanel, mapPanel 각 탭에도 옵션 객체 또는 boolean 값을 할당할 수 있습니다.

const config = {
  general: {
    enableExplorer: true,
    enableDetail: true,
    enableChart: true,
    enableMap: true,
  },
  explorer: {
    visible: true,
    detailPanel: true,
    chartPanel: true,
    mapPanel: true,
  },
  tables: {
    name: 'sales',
    cube: 'sales',
    explorerMode: 'detail',
    explorerPosition: 'bottom',
    explorerHeight: '25%',
    fields: {
      rows: ['차종', '브랜드명'],
      columns: ['판매분기'],
      values: ['판매수량'],
    },
    detail: {
      dataMode: 'cube',
      alternateRowColor: true,
    },
    chart: {
      chart: {
        chartType: 'column',
        xAxis: 'row',
      },
    },
  },
};

열기와 모드

값 셀을 더블클릭하거나 포커스된 셀에서 Enter 키를 누르면 탐색기가 열립니다.
선택 영역이 있으면 Enter로 선택 영역 기준으로 열 수 있습니다. 헤더 레이아웃 바의 아래쪽 탐색기 버튼으로 표시를 토글할 수도 있습니다.

탐색기가 열린 후 헤더 탭을 통해 모드를 변경할 수 있습니다. 초기 모드는 페이지의 explorerMode입니다.

`explorerMode`	패널	설명
`'detail'`(기본)	Detail	셀에 기여한 행을 그리드로 표시
`'chart'`	Chart	선택 데이터를 차트로 표시
`'map'`	Map	선택 데이터를 지도 차트로 표시

AI가 켜져 있고 ai.panel.position이 'explorer'이면 탐색기에 AI 탭이 추가됩니다. (AI Assistant)

위치 · 크기

속성	설명	기본값
`explorerPosition`	`'bottom'` \| `'left'` \| `'right'`	`'bottom'`
`explorerHeight`	아래쪽일 때 초기 높이(px 또는 `%`)	`'25%'`
`explorerWidth`	왼쪽·오른쪽일 때 초기 너비(px 또는 `%`)	`'35%'`

tables: {
  name: 'sales',
  cube: 'sales',
  explorerPosition: 'right',
  explorerWidth: '35%',
  // ...
}

화면에서는 탐색기 메뉴의 위치 항목으로도 바꿀 수 있습니다. 분할 경계를 드래그해 크기를 조절할 수 있습니다.

Detail 패널

집계 셀에 기여한 행을 그리드로 보여 줍니다. 옵션은 tables.detail 항목에서 설정합니다.

속성	설명	기본
`dataMode`	`'cube'` — 큐브 데이터 / `'source'` — 원본 DataSet	`'cube'`
`fields`	큐브 모드에서 표시할 필드(순서 유지). 생략 시 전체	—
`sourceFields`	원본 모드에서 표시할 필드. 생략 시 전체	—
`alternateRowColor`	행 교차 색상	`true`
`scrollByRow`	행 단위 스크롤	`false`

tables: {
  name: 'sales',
  cube: 'sales',
  detail: {
    dataMode: 'source',
    sourceFields: ['국가', '브랜드명', '차종', '판매수량', '차량가격'],
    alternateRowColor: true,
  },
  // ...
}

탐색기 메뉴에서 큐브 데이터 / 원본 데이터, 행 교차 색상, 행 단위 스크롤을 바꿀 수 있습니다.

Chart 패널

선택 셀·영역을 차트로 그립니다. 옵션은 tables.chart.chart 속성에 지정합니다.

속성	설명	기본
`chartType`	`'column'` \| `'bar'` \| `'line'` \| `'area'` \| `'scatter'` \| `'pie'`	`'column'`
`xAxis`	범주 축. `'row'` \| `'column'`	`'row'`

tables: {
  name: 'sales',
  cube: 'sales',
  explorerMode: 'chart',
  chart: {
    chart: {
      chartType: 'line',
      xAxis: 'column',
    },
  },
  // ...
}

탐색기 메뉴의 차트 유형 · 범주 방향으로도 변경할 수 있습니다.
전체 옵션은 PivotChartOptions 및 Config · chart를 참고하세요.

Map 패널

선택한 데이터를 지도 차트로 시각화합니다. 세부 옵션은 tables.map.chart 속성에 설정하며, mapUrl은 필수 지정 항목입니다.

속성	설명
`mapUrl`	지도 소스(GeoJSON 등) URL
`mapKeys`	`[지도 area 속성, 데이터 포인트 속성]`. 기본 `['name', 'id']`
`mapExclude`	제외할 area id 목록
`projection`	투영. 위경도 지도는 보통 `'mercator'`
`colorScale`	영역 색. 생략 시 값 필드의 히트맵 설정을 따름
`pin`	선택 지역 핀 스타일
`xAxis`	범주 축. `'row'` \| `'column'`

{
  explorer: { mapPanel: true },
  tables: {
    name: 'employment',
    cube: 'employment',
    explorerPosition: 'right',
    map: {
      chart: {
        mapUrl: './asset/maps/kr-sigun-low.geo.json',
        mapKeys: ['rm-fullname', 'area'],
        projection: 'mercator',
        pin: { style: { fill: '#7c3aed', stroke: '#c4b5fd', strokeWidth: '2' } },
      },
    },
    // fields ...
  },
}

지도 차트의 색상을 피벗 히트맵과 동기화하려면, 값 필드에 셀 오버레이 · heatmap 옵션을 지정한 후 colorScale 속성을 생략하면 됩니다. 자세한 항목은 PivotMapChartOptions · Config · map을 참고하세요.

화면에서 바꾸기

조작	동작
값 셀 더블클릭 · Enter	탐색기 열기
헤더 · 아래쪽 탐색기 버튼	탐색기 표시 토글
Detail / Chart / Map 탭	모드 전환
탐색기 메뉴 · 위치	아래 / 왼쪽 / 오른쪽
Detail 메뉴	큐브·원본, 행 교차 색상, 행 단위 스크롤
Chart 메뉴	차트 유형, 범주 방향(행/열)
닫기 버튼	탐색기 닫기

API로 바꾸기

const page = control.page; // 현재 페이지 (PivotBookPage)
const explorerView = control.explorerView;
 
// 열기 · 닫기
const cell = control.pageView.focusedCell;
if (cell) {
  control.pageView.openDetail(cell);
}
explorerView.close();
 
// 모드 · 위치
page.explorerMode = 'chart';
page.updateOption('explorerPosition', 'right');
 
// Detail 데이터 소스
page.detail.updateOption('dataMode', 'source', true);
 
// 차트 유형
page.chart.chart.updateOption('chartType', 'bar');

control.explorerView — 현재 페이지 탐색기 뷰
control.book.explorer — 북 수준 탐색기 모델(PivotExplorerOptions)
page.detail · page.chart · page.map — 페이지 컨텍스트

옵션 변경 규칙은 개발 가이드를 참고하세요.