주요 특징

피벗 페이지의 축은 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에서 이어서 바꿀 수 있습니다.

자세한 옵션은 필드 구성 가이드를 참고하세요.

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