필터 - RealPivot2

데모필터

북 공통 필터(filterSelectors)와 테이블 필터 필드(fields.filters)로 집계 범위를 조절하는 데모이다.

주요 특징

RealPivot2 필터는 적용 범위에 따라 나뉜다.
북(Book) 공통 UI로 큐브 슬라이서를 조작하는 방식과 특정 테이블에만 적용되는 필터 필드를 함께 조합할 수 있다.

종류	설정	범위
북 공통 필터	`filterSelectors` + 큐브 `slicers`	북 전체(또는 `tables` 속성으로 지정한 페이지)
페이지 필터 필드	`fields.filters`	해당 테이블 집계만

이 데모의 공통 필터 구성이다.

셀렉터	`type`	`position`	역할
주문 상태	`button`	`both`	헤더 필터 바와 인스펙터 필터 패널에 모두 표시한다
결제 수단	`dropdown`	`header`	헤더 필터 바에만 표시한다
상품	`dropdown`	`panel`	인스펙터 Filters 패널에만 표시한다
기간	`slider`	`both`	주문일 범위를 슬라이더로 좁힌다
주문일	`timeline`	`panel`	패널에서 타임라인으로 기간을 고른다

페이지 필터 필드는 '유입 채널'이다. 컬럼 바의 필터 영역에서 멤버를 고르면 이 페이지 집계에만 반영된다.

화면에서 보기

행은 결제 수단 · 상품, 열은 년도 · 분기이다.
상단 필터 바에서 주문 상태·결제 수단·기간을 바꾸고, 인스펙터 Filters 탭에서 상품·주문일 셀렉터를 조작할 수 있다. 컬럼 바의 유입 채널 필터 필드로 페이지 범위를 더 좁힐 수 있다.

조작	동작
헤더 필터 바	`position`이 `header` 또는 `both`인 셀렉터
인스펙터 → Filters	`position`이 `panel` 또는 `both`인 셀렉터
컬럼 바 필터 필드	페이지 필터 필드 멤버 선택·적용
행/열 필드 메뉴 → 필터	해당 차원에 대한 집계 필터
크로스헤어	행·열 교차 추적

셀렉터 타이틀 아이콘의 표시 위치 메뉴로 헤더 / 필터 패널 / 모두(both) 중 하나로 표시 위치를 변경할 수 있다.

코드로 지정하기

Cube에 slicers를 설정하고 Book의 filterSelectors 속성을 통해 UI를 연동한다. 페이지 전용 필터는 fields.filters에 둔다.

// Cube
slicers: [
  { name: '주문 상태', dimension: '주문 상태', type: 'list' },
  { name: '결제 수단', dimension: '결제 수단', type: 'list' },
  { name: '상품', dimension: '상품', type: 'list' },
  { name: '주문일', dimension: '주문일', type: 'range' },
],
 
// Book
filterSelectors: [
  { type: 'button', cube: 'ordersPivot', slicer: '주문 상태', position: 'both' },
  { type: 'dropdown', cube: 'ordersPivot', slicer: '결제 수단', position: 'header' },
  { type: 'dropdown', cube: 'ordersPivot', slicer: '상품', position: 'panel' },
  { type: 'slider', cube: 'ordersPivot', slicer: '주문일', position: 'both' },
  { type: 'timeline', cube: 'ordersPivot', slicer: '주문일', position: 'panel' },
],
tables: {
  fields: {
    filters: ['유입 채널'],
    rows: ['결제 수단', '상품'],
    columns: ['년도', '분기'],
    values: ['주문 금액', '주문 건수'],
  },
},

슬라이서 type과 셀렉터 type 조합·런타임 API는 필터를 참고한다.

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

스타일 정렬