필드 구성
행·열·값·필터 배치, 인스펙터 드래그 앤 드롭, 값 필드 설정을 설명합니다.
피벗 페이지의 축은 Book 설정의 tables[].fields로 정합니다.
큐브에 정의한 차원·측정값 이름을 행·열·값·필터에 배치하면 피벗 테이블이 구성됩니다.
Book·페이지 전체 구조는 피벗 북(Book)을 참고하세요.
fields 구성
| 속성 | 설명 |
|---|---|
rows | 행 축 차원 |
columns | 열 축 차원 |
values | 값(측정값) |
filters | 이 페이지의 필터 필드 |
각 항목에는 필드 이름(문자열) 또는 옵션 객체를 지정할 수 있습니다. 객체일 때 name은 필수입니다.
const config = {
tables: {
name: 'sales',
cube: 'sales',
fields: {
filters: ['국가'],
rows: [{ name: '차종' }, { name: '브랜드명' }],
columns: ['판매분기', '판매월'],
values: [{ name: '판매수량', aggregate: 'sum' }],
},
},
};filters는 해당 페이지전용 필터 필드이며, 북 공통 필터 UI(filterSelectors)와는 차이가 있습니다.
행·열 필드 (차원)
rows · columns 항목은 PivotDimensionFieldOptions입니다.
| 속성 | 설명 |
|---|---|
name | 큐브 차원 이름 (필수) |
width / headerWidth | 표시 너비(px) |
headerVisible | 헤더 셀 표시 여부 |
expanderVisible | 확장/축소 아이콘. true · false · 'auto'(기본) |
sort | 필드 정렬. 상세는 정렬 |
rows: [
{ name: '차종', expanderVisible: true },
{ name: '브랜드명', width: 120 },
],값 필드
values 항목은 PivotValueFieldOptions입니다.
| 속성 | 설명 |
|---|---|
name | 값 필드 표시 이름 (필수) |
measure | 큐브 측정값 이름. 생략 시 name과 동일하게 적용됩니다. 생성 후 변경할 수 없습니다 |
aggregate | 집계 함수. 생략 시 'sum' |
numberFormat / dateFormat / textFormat | 표시 형식 |
showAs · baseField · baseItem · baseAxis | 비중·차이 등 표시 변환. 표시 형식(Show As) |
dataBar · heatmap · highlight · icon | 셀 오버레이. 셀 오버레이 |
style / className 등 | 셀·소계·총계 스타일 |
동일한 측정값에 여러 집계 방식을 적용하려면 name과 measure를 각각 분리하여 지정합니다.
values: [
{ name: '판매수량', aggregate: 'sum' },
{ name: '평균가격', measure: '차량가격', aggregate: 'avg' },
{ name: '건수', measure: '판매수량', aggregate: 'count' },
],집계 함수 목록·변경 방법은 집계 함수를 참고하세요.
필터 필드
filters 항목은 PivotFilterFieldOptions입니다. name · width · headerWidth를 지정할 수 있습니다.
filters: ['국가', { name: '차종' }],페이지 필터 필드와 북 공통 filterSelectors의 차이는 필터를 참고하세요.
인스펙터에서 배치하기
인스펙터를 활성화하면 드래그 앤 드롭으로 필드 위치를 변경할 수 있습니다.
const config = {
inspector: true,
// 또는
// inspector: { visible: true, position: 'right', mode: 'field' },
tables: {
name: 'sales',
cube: 'sales',
fields: {
rows: ['국가'],
values: ['판매수량'],
},
},
};필드 패널에는 전체 필드 · 행 · 열 · 값 · 필터 섹션이 있습니다.
- 전체 필드 항목을 축 섹션으로 드래그하여 배치합니다.
- 값을 새로 추가할 때의 기본 집계 방식은
sum입니다. - 축에 배치된 필드를 전체 필드로 드래그하면 배치가 해제(제거)됩니다.
필드 패널 레이아웃 등은 PivotFieldPanelOptions · Config inspector를 참고하세요.
general.readonly가 true이면 구성을 변경할 수 없습니다.
런타임에서 다루기
로드된 뒤에는 table.fields와 Book API로 필드를 조회·변경합니다.
const book = control.book;
const table = control.table; // 현재 페이지 테이블
const fields = table.fields;
const valueField = fields.getValueField('판매수량');
valueField?.updateOption('aggregate', 'avg');
// Undo가 필요하면 Book 경로를 사용합니다
book.updateProp(valueField, 'aggregate', 'sum');자주 쓰는 조회·변경 API입니다.
| API | 설명 |
|---|---|
fields.getRowField / getColumnField / getValueField / getFilterField | 섹션별 필드 조회 |
fields.getAvailableDimensions / getAvailableMeasures / getAvailableFilters | 아직 배치되지 않은 필드 목록 |
book.moveField / book.addValueField / book.addDimensionField / book.addFilterField | 배치·추가 (Undo 포함) |
book.removeField / book.removeFields | 제거 |
field.updateOption / updateOptions | 옵션 변경 |
book.updateProp / updateItem | Undo가 필요한 옵션 변경 |
옵션 값을 조회할 때는 prop()를, 변경할 때는 updateOption / updateOptions(또는 Book의 updateProp)를 사용하세요.
자세한 규칙은 개발 가이드를 참고하세요.
타입·속성 전체는 PivotFieldConfiguration · PivotValueFieldOptions · PivotFieldManager를 참고하세요.