주요 특징

피벗 페이지의 축은 Book 설정의 tables[].fields로 설정한다.
큐브에 정의한 차원·측정값 이름을 행·열·값·필터에 배치하면 표가 구성된다.

초기 배치는 코드로 설정 후, 화면에서도 드래그 앤 드롭으로 바꿀 수 있다.
인스펙터 필드 패널과 행·열·필터 바에서 필드를 옮기면 축 구성이 바로 반영된다.

이 데모의 초기 배치이다.

주문 상태, 고객, 월은 아직 축에 배치하지 않았다. 인스펙터의 전체 필드 항목에서 원하는 필드를 행·열·필터 영역으로 드래그하여 배치할 수 있다.

Date 분해

열에 있는 년도·분기와, 아직 넣지 않은 월 필드는 원본 컬럼이 아니라 주문일 날짜 차원을 나눈 필드이다.
큐브에서 type: 'date' 차원에 dateFields를 지정하면 연·분기·월 같은 단위가 각각 독립 차원으로 생성된다.

{
  name: '주문일',
  source: 'Date',
  type: 'date',
  dateFields: ['월;month', '분기;quarter', '년도;year'],
}

dateFields 항목은 "표시이름;레벨" 형식이다. 레벨은 year, quarter, month이다.
Book의 rows / columns에는 원본 이름(주문일)이 아니라 분해된 이름(년도, 분기)을 배치한다. 인스펙터 전체 필드에도 같은 이름으로 보이므로, 월을 열 축으로 드래그하여 더 잘게 나눌 수 있다.

자세한 레벨 목록은 데이터와 큐브를 참고한다.

화면에서 보기

오른쪽 인스펙터는 필드 패널(mode: 'field')로 설정되어 시작한다.

값을 새롭게 추가할 때 적용되는 기본 집계 방식은 sum(합계)이다.
general.readonly가 true이면 구성을 바꿀 수 없다.

코드로 지정하기

// Cube
schema: {
  dimensions: [
    {
      name: '주문일',
      source: 'Date',
      type: 'date',
      dateFields: ['월;month', '분기;quarter', '년도;year'],
    },
    // ...
  ],
},
 
// Book
inspector: {
  visible: true,
  mode: 'field',
  position: 'right',
},
tables: {
  cube: 'ordersPivot',
  fields: {
    filters: ['결제 수단'],
    rows: ['유입 채널', '상품'],
    columns: [{ name: '년도', headerVisible: true }, { name: '분기' }],
    values: [
      { name: '주문 금액', aggregate: 'sum', numberFormat: '"$",#,##0' },
      { name: '주문 건수', aggregate: 'count', numberFormat: '#,##0" 건"' },
    ],
  },
},

각 항목에는 필드 이름(문자열) 또는 { name, … } 형태의 객체를 지정한다.
인스펙터를 켜 두면 코드로 둔 배치를 UI에서 이어서 바꿀 수 있다.

자세한 옵션은 필드 구성을 참고한다.

플레이그라운드를 불러오는 중…