그룹핑 썸머리(소계) 행을 특정 조건의 값을 확장하여 원하는 대로 적용한 모습입니다.
유입 플랫폼의 값에 따라 각각 "Desktop", "Mobile", "Tablet" 으로 구분되는데 여기서 크게 "Mobile" 과 "Tablet"은 합해서 "Mobile" 과 "Desktop"으로 출력한 모습니다.
동일 선 상의 열(column)에 위치하도록 Type 3 유형으로 출력하였습니다.
// 합계(소계) 설정
groupingSummary : {
// 소계 필드는 "viewCnt", "exposeCnt", "clickCnt" 3개에 대하여 실시 합니다.
dataFields : [ "viewCnt", "exposeCnt", "clickCnt" ],
// groupingFields 에서 설정한 필드의 depth 대로 썸머리 행이 출력되는 것이 기본입니다.
// 그러나 원하는 않는 썸머리는 제외 시키십시오.
// 즉, 썸머리로 출력되는 대상 제외 시키는 필드 설정
excepts : [ "flatform"],
// 그룹핑 썸머리 행의 구체적 설정
rows: [{
operation: "SUM",
text : "Desktop",
constraintField : "flatform", // flatform === "Desktop" 인 행들의 합계만 구해서 출력
constraint : "Desktop"
}, {
text : "Mobile+Tablet",
// 사용자 정의 계산 함수
// items (Array) : 소계의 대상이 되는 행들
// dataField (String) : 소계 대상 필드 (데모 상에서는 viewCnt, exposeCnt, clickCnt 가 대상임)
expFunction : function(items, dataField) { // 여기서 실제로 출력할 값을 계산해서 리턴시킴.
let sum = 0;
items.forEach(function(item) {
// flatform 이 Mobile 이거나 Tablet 인 행의 viewCnt, exposeCnt, clickCnt 를 계산하여 반환
if(item.flatform === "Mobile" || item.flatform === "Tablet") {
sum += Number(item[dataField]);
}
});
return sum;
},
}, {
operation: "SUM",
text : "비율",
constraintField : "flatform",
constraint : function(values) {
// values 는 위에서 정의한 연산 값을 갖는 배열임.
// 즉, 해당 예제에서 위에 정의한 연산은 2개로..
// values[0] 은 Desktop 에 대한 SUM, MIN, MAX, COUNT 등
// values[1] 은 Mobile+Tablet 에 대한 계산값이 SUM 에 있음
const rate = (values[1].SUM / values[0].SUM) * 100;
return AUIGrid.formatNumber(rate, "#,##0.00") + "%";
}
}]
},