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

4.1 피벗 필드 패널이란?

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

• 행 필드 영역 (Rows)
• 열 필드 영역 (Columns)
• 값 필드 영역 (Values)
• 필터 필드 영역 (Filters)

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

4.2 UI 구성 옵션 설정

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

4.3 필드 드래그 구성 방식

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

• [지역] → 행 필드
• [반기, 분기, 월] → 열 필드
• [매출] → 값 필드 (합계)

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

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

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

4.4 값 필드의 집계 방식 설정

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

• 합계 (SUM)
• 평균 (AVG)
• 개수 (COUNT)
• 열 합계 비율 (RATIO)
• 행 합계 비율 (ROW_RATIO)
• 최소값 (MIN)
• 최대값 (MAX)
• 곱 (MULTIPLY)
• 분산 (VARIANCE)
• 표준 편차 (STD_DEVIATION)

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

4.5 사용자 인터랙션 이벤트

이벤트명	설명
pivotBegin	사용자가 필드를 이동하거나 집계 방식을 변경했을 때 보고서 작성 시작 할 때 발생합니다.
pivotComplete	사용자가 필드를 이동하거나 집계 방식을 변경하여 피벗 보고서가 완료되었을 때 발생합니다.

// 피벗팅 보고서 시작, 완료 이벤트 바인딩
AUIPivot.bind(myPivotID, ["pivotBegin", "pivotComplete"], function(event) {
    if(event.type === "pivotBegin") {
        console.time("피봇 보고서 시간");
    } else if(event.type === "pivotComplete") {
        console.timeEnd("피봇 보고서 시간");
    }
});

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