AUISoft에이유아이소프트
AUIPivot 2.8 Documentation

7. 피벗 필드 패널과 사용자 인터랙션(드래그&드랍)

7.1 피벗 필드 패널이란?

AUIPivot는 데이터를 직접 코딩하지 않고도 사용자가 마우스 또는 터치로 필드를 이동하고 설정할 수 있는 피벗 패널 필드 UI 인터페이스를 제공합니다.

사용자는 마우스로 드래그 앤 드롭하여 각 영역에 필드를 배치함으로써 피벗 구조를 자유롭게 구성할 수 있습니다.

7.2 UI 구성 옵션 설정

// 피봇 그리드 속성 설정
const pivotProps = {
    // 피벗 패널 사용을 위해 피벗 패널이 생성될 DIV 의 아이디를 지정함.
    pivotPanelId: "#pivot_panel"
};

7.3 필드 드래그 구성 방식

사용자가 다음과 같이 마우스로 필드를 배치하면:

반기, 분기, 월 별로 각 지역에서 판매한 매출 합계를 분석한 보고서가 출력됩니다.

사용자가 UI에서 수행한 조작은 프로그램 코드 없이 내부적으로 다음 코딩한 것과 같이 자동 반영됩니다.

// 행 필드
AUIPivot.setRowFields(myPivotID, ["REGION"]);
// 열 필드
AUIPivot.setColumnFields(myPivotID, ["DATE_HALF", "DATE_QTR", "DATE_MONTH"]);
// 값 필드
AUIPivot.setValueFields(myPivotID, [{ "dataField": "TOTAL", "operation": "SUM" }]);

7.3.1 터치 화면에서 필드 옮기기

터치 화면에서도 마우스처럼 필드 글자를 직접 끌어 원하는 영역의 녹색 삽입선에 놓으세요. 별도 터치 설정은 필요하지 않습니다. 예를 들어 ‘판매 대수’를 값 영역에 놓으면 지점별 매출과 판매 대수를 함께 볼 수 있습니다.

손을 놓았을 때 한 번 적용합니다. ‘나중에 피벗 업데이트’를 선택했다면 배치를 마친 뒤 업데이트 버튼을 누르세요. 두 번째 손가락 접촉, 드래그 취소, 패널 숨김, 제거에서는 배치를 바꾸지 않습니다. 기존처럼 영역 밖에 정상적으로 놓으면 배치된 필드를 제거합니다. 마우스는 필드 본문을 끄는 기존 방식을 그대로 사용합니다.

패널 창도 마우스 또는 터치로 조작합니다. 제목을 끌어 이동하고 오른쪽 아래 점 모양 모서리를 끌어 크기를 바꿉니다. 필드 구성과 선택한 필터는 유지됩니다.

Also See: setRowFields | 관련 데모 보기

7.3.2 패널 이동과 크기 조절

제목을 끌어 이동하고 오른쪽 아래 손잡이를 끌어 크기를 바꿉니다. 제목이나 손잡이에 키보드 포커스를 두면 방향키로 10px, Shift+방향키로 1px씩 조절할 수 있습니다.

movableFieldPanel과 resizableFieldPanel로 허용 여부를 정합니다. 최소 크기는 minFieldPanelWidth와 minFieldPanelHeight를 따릅니다.

7.3.3 슬라이서 사용과 저장

2.8.0부터 AUIPivot.createSlicer(myPivotID)로 슬라이서 삽입 창을 열 수 있습니다. 필드를 여러 개 선택하고 확인하면 각각의 슬라이서가 나타납니다. 보고서에 배치하지 않은 필드도 선택할 수 있습니다.

자동 슬라이서는 제목을 끌어 이동하고 오른쪽 아래 손잡이로 크기를 조절합니다. 닫기 버튼을 누르면 해당 필드의 필터를 해제한 뒤 창을 닫습니다. 다른 필드의 필터는 유지합니다. 이미 자동 삽입한 필드는 중복 선택할 수 없으며 닫은 뒤 다시 삽입할 수 있습니다. 피벗을 제거하면 삽입 창과 자동 슬라이서도 제거됩니다.

삽입 슬라이서의 초기 크기는 slicerWidth(기본 300px), slicerHeight(기본 330px)로 지정합니다. 너비는 200px 이상, 높이는 180px 이상이며 화면보다 큰 요청은 화면에 맞춥니다. setProp으로 바꾸면 다음 삽입부터 적용되며 이미 열린 창은 유지합니다.

기존 createSlicer(myPivotID, "#region", { dataField: "REGION", columnCount: 2 }) 방식도 사용할 수 있습니다. 이 방식은 개발자가 준비한 영역에 표시하고 슬라이서 ID를 반환합니다. 자동 창의 구성과 위치는 보고서 저장 대상이 아닙니다.

createSlicer로 원본 필드의 값을 버튼으로 선택할 수 있습니다. 2.8.0부터 행, 열, 값, 필터에 배치하지 않은 필드도 지원하며 보고서 배치는 바뀌지 않습니다. 필터 메뉴와 선택값을 공유하며 같은 필드의 값은 OR, 서로 다른 필드의 조건은 AND로 적용합니다.

선택값 지정, 보고서 저장, 슬라이서 데모

7.3.4 셀, 행 선택

selectionMode로 셀 또는 행 선택 방식을 지정합니다. getSelectedIndex는 대표 셀의 위치를 반환합니다.

7.3.5 선택한 값 복사

copyDisplayValue가 false이면 표시 서식을 뺀 집계값을 복사합니다. true이면 숫자 서식이 적용된 값을 복사합니다. 행 레이블은 항상 표시 이름을 사용합니다.

기본 복사에서 null과 undefined는 빈 칸, 숫자 0은 0입니다. 여러 셀은 탭으로, 행은 줄바꿈으로 구분합니다. copyBegin에서 복사를 취소하거나 복사할 문자열을 바꿀 수 있습니다.

7.3.6 툴팁 위치

showTooltip이 true이면 tooltipDocked로 셀 아래 고정을 선택합니다. false이면 마우스와의 간격을 tooltipOffsetX, tooltipOffsetY로 지정합니다. 변경한 위치 설정은 다음 툴팁부터 적용합니다.

셀 고정은 아래에 2px 간격으로 표시하며 공간이 부족하면 위로 옮깁니다. 마우스 기준 모드도 공간이 부족하면 반대편으로 옮겨 화면 안에 표시합니다. 표시된 툴팁은 마우스를 따라 움직이지 않으며 같은 셀 안의 이동은 대기 시간을 다시 시작하지 않습니다.

간격값과 화면 경계 처리

간격은 0 이상의 숫자를 사용하며 소수도 가능합니다. 생성 시 음수, 숫자가 아닌 값, NaN, Infinity가 전달되면 표시 간격은 기본값(가로 14px, 세로 16px)을 사용합니다. 이 표시 보정은 getProp의 반환값을 바꾸지 않습니다. 실행 중 setProp에 잘못된 값을 전달하면 setProp의 입력 검사 규칙을 따릅니다.

7.3.7 표에서 필드 배치하기 (2.8.0 이상)

enableGridFieldDrop을 true로 지정하면 표 상단에 행, 열, 값, 필터 배치 영역이 나타납니다. 기본값은 false이며 빈 보고서와 세 출력 방식에서 사용할 수 있습니다.

배치 영역은 지정한 피벗 높이 안에 포함됩니다. 편집 영역 표시 여부는 보고서 저장 정의에 포함되지 않으므로 생성 속성으로 별도 설정하세요. 실행 중 표시 여부를 바꾸려면 setProp 후 refresh를 호출합니다.

// 행, 열, 값, 필터를 표 안에서 배치할 수 있습니다.
const pivotProps = {
    enableGridFieldDrop: true
};

7.3.8 행 칼럼 틀 고정 개수 지정 (2.8.0 이상)

fixedRowFieldCount로 왼쪽 행 레이블 칼럼 중 고정할 개수를 지정할 수 있습니다. null은 기존 자동 고정, 0은 해제입니다. 행 번호와 상태 칼럼, 값 칼럼은 개수에서 제외됩니다.

table과 tableCellMerge에서 행 필드가 판매 지점, 차종, 모델 순서라면 2로 설정할 때 판매 지점과 차종을 고정하고 모델부터 가로로 스크롤합니다. tree에서는 이 필드들이 한 칼럼에 표시되므로 최대 1개만 고정합니다. 요청한 2는 유지되며 테이블로 돌아오면 다시 두 칼럼을 고정합니다.

// 현재 보고서의 왼쪽 행 칼럼 두 개를 고정합니다.
AUIPivot.setProp(myPivotID, "fixedRowFieldCount", 2);
AUIPivot.refresh(myPivotID);

// 기존 자동 고정으로 돌아갑니다.
AUIPivot.setProp(myPivotID, "fixedRowFieldCount", null);
AUIPivot.refresh(myPivotID);

useFixedColumns가 false이면 고정을 해제하고 개수 설정은 보존합니다. 행 필드가 줄어들면 현재 표시 가능한 수만 고정하며, 필드를 다시 늘리면 지정한 수를 다시 적용합니다. setGridData와 updatePivot으로 재집계한 뒤에도 설정은 유지됩니다.

개수는 보고서 저장 정의에 포함되지 않습니다. 필요하면 getProp으로 읽어 별도 저장하고 복원 시 setProp과 refresh로 적용하세요. getProp은 제한된 실제 개수가 아닌 지정한 값을 반환합니다.

엑셀 내보내기의 fixedColumnCount가 "auto"이면 화면의 실제 고정 수를 사용합니다. 고정한 행 칼럼이 있고 행 번호도 내보내면 그 한 칸을 추가합니다. 내보내기 옵션에서 직접 숫자를 지정하면 해당 옵션을 우선 적용합니다.

오른쪽 값 칼럼 고정 (2.8.2 이상)

오른쪽 고정은 가로 스크롤바가 표시될 때만 적용합니다. 모든 칼럼이 화면에 들어오면 합계도 본문에 이어 표시하고, 다시 가로 스크롤바가 생기면 기존 자동 또는 수동 개수로 고정합니다. 지정한 속성값과 왼쪽 고정은 유지합니다.

useFixedRightColumns의 기본값은 true이며 fixedRightColumnCount의 기본값은 null입니다. 별도 설정 없이 오른쪽 전체 합계 칼럼을 자동 고정합니다. 값 필드 추가나 제거 후 새 결과의 전체 합계 수에 맞춰 조절합니다. 기간 부분합은 제외하고 전체 합계가 없거나 앞쪽에 있으면 자동 고정하지 않습니다.

// 오른쪽 전체 합계를 자동 고정합니다. 두 속성을 생략해도 같습니다.
const pivotProps = { useFixedRightColumns: true, fixedRightColumnCount: null };

// 자동 모드 대신 마지막 값 칼럼 두 개를 고정합니다.
AUIPivot.setProp(myPivotID, { useFixedRightColumns: true, fixedRightColumnCount: 2 });
AUIPivot.refresh(myPivotID);

// 개수 설정을 보존한 채 오른쪽 고정을 해제합니다.
AUIPivot.setProp(myPivotID, "useFixedRightColumns", false);
AUIPivot.refresh(myPivotID);

fixedRightColumnCount의 0은 해제, 양의 정수는 전체 합계 여부와 관계없이 마지막 값 칼럼의 고정 개수입니다. null로 되돌리면 자동 개수를 사용합니다. useFixedRightColumns가 false이면 개수 설정에 우선하여 고정을 해제합니다.

tree, table, tableCellMerge에서 헤더, 본문과 푸터가 함께 고정됩니다. 행 레이블, 행 번호와 상태 칼럼은 개수에서 제외하며 왼쪽 고정과 독립적입니다. 왼쪽 공간을 먼저 확보하고 화면이 좁으면 들어가는 오른쪽 칼럼만 고정합니다. 다시 넓히면 자동 또는 수동 개수를 복원합니다. 기간 헤더가 경계에 걸리면 각 영역에 나누어 표시됩니다.

getProp은 제한된 실효 개수가 아닌 지정값 또는 refresh 적용 전 대기값을 반환합니다. 두 속성은 보고서 저장 정의에 포함되지 않으므로 필요하면 별도로 저장하세요. 내보내기는 기존 전체 결과의 순서와 표시 값을 유지합니다. Excel에서 오른쪽 틀 고정을 추가하지 않으며 기존 왼쪽 틀 고정 옵션을 사용합니다.

좁은 화면의 고정 해제 (2.8.2 이상)

fixedColumnsMinWidth의 기본값은 600px입니다. 피벗 자체의 너비가 600px 미만이면 왼쪽 행 레이블과 오른쪽 값 칼럼 고정을 일시 해제하고 전체 데이터 칼럼을 가로로 이동할 수 있습니다. 600px 이상이면 기존 자동 또는 수동 고정을 복원합니다. 행 번호와 상태 칼럼의 표시는 유지합니다.

너비는 resize에 지정하는 테두리 포함 크기와 같습니다. 사용 여부와 지정 개수는 바꾸지 않으므로 false로 설정한 방향은 넓어져도 고정하지 않습니다. 화면이 충분히 넓어도 전체 고정 폭이 들어가지 않으면 기존 오른쪽 개수 축소 정책을 적용합니다.

// 기본 기준을 바꾸려면 원하는 피벗 너비를 지정합니다.
const pivotProps = { fixedColumnsMinWidth: 720 };

// 좁은 화면에서도 기존 고정을 유지하려면 자동 해제를 끕니다.
AUIPivot.setProp(myPivotID, "fixedColumnsMinWidth", 0);
AUIPivot.refresh(myPivotID);

// 컨테이너 너비를 바꾼 다음 현재 크기를 적용합니다.
AUIPivot.resize(myPivotID);

고정 관련 설정은 보고서 정의에 포함되지 않습니다. 별도로 저장할 때는 getProp으로 읽으세요. Excel의 자동 왼쪽 틀 고정은 내보내는 시점의 실제 고정 개수를 따릅니다.

7.3.9 항목 수동 순서 (2.8.0 이상)

enableItemReorder를 true로 설정하면 행, 열 레이블의 경계에 항목 이동 손잡이가 나타납니다. 기본값은 false입니다.

순서는 setCustomValueOrders와 같이 필드 전체에 적용됩니다. 예를 들어 광주 지점에서 차종 순서를 바꾸면 다른 지점에도 같은 차종 순서가 적용됩니다. 부모마다 독립적인 순서를 지정하는 기능은 아닙니다. 필터로 숨긴 항목과 다른 필드의 명시적 순서는 삭제하지 않습니다.

행 값은 문자열, 유한 숫자, 참/거짓, null을 지원하고 숫자 1과 문자열 "1"을 구별합니다. 열에서 같은 표시 키로 합쳐지는 값은 한 항목으로 이동합니다. 값 셀, 합계 전용 칼럼과 요약 레이블, JSON으로 저장할 수 없는 값은 이동 대상이 아닙니다.

항목 이동은 기존 집계값과 접기, 펼치기 상태를 유지하고 즉시 화면에 적용합니다. 재집계를 하지 않으므로 pivotBegin과 pivotComplete는 발생하지 않습니다. 열 순서를 바꾸면 기존 열 선택은 해제될 수 있습니다. 필드 패널의 나중에 업데이트는 필드 배치에 대한 설정이므로 항목 이동은 즉시 반영됩니다.

// 현재 항목 순서를 읽어 별도로 저장할 수 있습니다.
const orders = AUIPivot.getCustomValueOrders(myPivotID);

// 전체 보고서 설정에도 항목 순서가 포함됩니다.
const report = AUIPivot.getReportDefinition(myPivotID);

변경한 순서는 setGridData나 updatePivot으로 재집계해도 유지됩니다. 보고서는 setReportDefinition으로 복원하세요. 손잡이 표시 여부는 생성 속성으로 별도 설정합니다.

7.3.10 계산 필드 편집 (2.8.0 이상)

enableCalculatedFieldEditor를 true로 설정하고 필드 패널을 생성하면 값 영역에 계산 필드 버튼이 표시됩니다. 원본 데이터를 불러온 뒤 버튼을 누르세요.

  1. 새 계산 필드를 선택하고 이름을 입력합니다. 기존 계산을 선택하면 수정하거나 삭제할 수 있습니다.
  2. 원본 행 계산은 두 필드 또는 숫자 상수 사이의 더하기, 빼기, 곱하기, 나누기입니다. 결과를 합계, 평균, 최솟값, 최댓값 또는 개수로 집계합니다.
  3. 합계 간 비율은 분자와 분모 필드를 각각 합산한 뒤 나눕니다. 부분 합계와 전체 합계에서도 같은 방법으로 계산합니다.
  4. 미리보기로 필터 적용 전 원본 앞 5건을 확인하고 적용합니다. 비율 미리보기는 이 5건의 합계 비율이며 전체 보고서의 합계가 아닙니다. 취소와 Esc는 편집 중인 내용을 버립니다.

원본 행 계산은 setDerivedFields와 같은 규칙입니다. 숫자가 아닌 값, 빈 값, 0으로 나눈 결과와 유한하지 않은 결과는 빈 값으로 처리합니다. 숫자 문자열은 숫자로 계산합니다. 괄호나 여러 연산자를 직접 입력하는 문자열 수식은 지원하지 않습니다. 여러 단계 계산은 먼저 만든 계산 필드를 다음 계산에서 선택하세요.

필드 이름은 1~80자이며 <, >는 사용할 수 없습니다. 내부 필드 ID는 자동 생성하므로 별칭이 같아도 ID로 구별할 수 있습니다. 숫자 표시 형식은 120자 이내입니다. 순환 참조와 없는 필드를 사용한 계산은 적용하지 않습니다.

수정하면 해당 계산 필드를 사용하는 모든 항목에 반영됩니다. 기존 값 설정이 여러 개이거나 위 집계 목록 외의 연산이면 값 설정을 그대로 유지합니다. 다른 계산, 행, 열, 필터, 업무 정렬이나 필드 그룹에서 사용 중인 계산 필드는 참조를 먼저 해제해야 삭제할 수 있습니다. 독립 계산 필드를 삭제하면 해당 필드의 값 항목도 제거됩니다.

isUpdatePiovtLater가 true이면 추가, 수정, 삭제는 패널 초안으로 유지됩니다. 업데이트 버튼을 누를 때 한 번 적용하며, 새 원본이나 외부 보고서를 적용하면 초안은 폐기됩니다. pivotBegin에서 false를 반환하면 적용하지 않습니다.

적용한 계산과 값 설정은 getReportDefinition으로 저장하고 setReportDefinition으로 복원할 수 있습니다. 편집 버튼 표시 여부와 적용 전 초안은 보고서에 저장하지 않습니다.

7.3.11 필드별 부분합 설정 (2.8.0 이상)

enableFieldSubtotalMenu를 true로 설정하면 필드 패널의 행 영역에서 필드를 누른 뒤 부분합 설정을 열 수 있습니다. 부분합 표시를 선택하거나 해제하고 적용하세요. 취소와 Esc는 편집 중인 변경을 버립니다.

table과 tableCellMerge에서 사용할 수 있습니다. 예를 들어 행을 판매 지점, 차종, 모델 순서로 구성했을 때 판매 지점의 부분합만 숨기고 차종의 부분합은 유지할 수 있습니다. 특정 광주 지점 한 항목이 아닌 판매 지점 필드 전체에 적용됩니다. 마지막 행 필드는 별도의 부분합 행이 없으므로 변경할 수 없습니다.

tree에서는 부분합 행이 계층을 나타내므로 이 메뉴로 숨길 수 없습니다. showSummaryRow가 false이면 전체 행 부분합이 숨겨져 메뉴에서 변경할 수 없습니다. 해당 조건은 설정 창에 표시됩니다. 열 필드의 부분합 설정이나 여러 집계 연산을 동시에 추가하는 메뉴는 제공하지 않습니다.

선택한 필드만 setExceptSumRowFields의 제외 목록에 추가하거나 제거합니다. 다른 필드의 설정, 값 연산, 전체 합계 설정은 유지합니다. 이 API의 기존 정책대로 변경 적용 시 showTreeIcon이 false가 됩니다. 부분합을 다시 표시해도 접기, 펼치기 아이콘은 자동으로 켜지지 않습니다. 변경 없이 적용하거나 취소하면 아이콘 설정과 집계 결과도 유지합니다.

패널의 isUpdatePiovtLater가 true이면 배치와 계산 필드 변경을 포함한 초안으로 보관하고 업데이트 버튼에서 한 번 적용합니다. 새 데이터나 외부 보고서를 적용하면 초안을 폐기하며, 외부 API로 설정을 바꾼 경우에도 오래된 초안으로 덮어쓰지 않습니다. pivotBegin에서 false를 반환하면 적용하지 않습니다.

적용된 제외 목록은 getExceptSumRowFields로 확인할 수 있습니다. getReportDefinition의 excludedSummaryRowFields와 options.showTreeIcon에 저장되며 setReportDefinition으로 복원할 수 있습니다. 메뉴 표시 속성과 적용 전 초안은 보고서에 포함하지 않습니다.

7.4 값 필드의 집계 방식 설정

사용자는 값 필드 영역에서 다음과 같은 집계 함수를 직접 선택할 수 있습니다:

RATIO_OF_SUMS는 분자, 분모 필드 설정이 필요합니다. API 설정 예를 참고하세요. 등록한 사용자 정의 집계도 값 연산으로 사용할 수 있습니다. 필수 옵션에 기본값이 없으면 패널에서 신규 선택할 수 없으므로 API로 먼저 배치합니다.

이는 피벗 필드 내 드롭다운 메뉴로 설정할 수 있으며, 내부적으로 차원 필드가 변경됩니다.

7.5 사용자 인터랙션 이벤트

이벤트명 설명
pivotBegin 사용자가 필드를 이동하거나 집계 방식을 변경했을 때 보고서 작성 시작 할 때 발생합니다.
pivotComplete 사용자가 필드를 이동하거나 집계 방식을 변경하여 피벗 보고서가 완료되었을 때 발생합니다.
// 피벗팅 보고서 시작, 완료 이벤트 바인딩
AUIPivot.bind(myPivotID, ["pivotBegin", "pivotComplete"], function(event) {
    if(event.type === "pivotBegin") {
        console.time("피봇 보고서 시간");
    } else if(event.type === "pivotComplete") {
        console.timeEnd("피봇 보고서 시간");
    }
});

💡AUIPivot의 피벗 패널은 비개발자도 쉽게 분석 구성을 할 수 있도록 지원하며, 실시간 분석 시나리오에서 매우 강력한 기능을 제공합니다.