이번 스터디에서는 SpreadJS 에서 제공하는 테이블 시트의 그룹 요약 기능을 소개합니다. 

테이블 시트 그룹화에 대한 내용은 이전 글을 참고해 주세요!

• 테이블 시트 시작하기 4 - 그룹화

그룹 요약

테이블 시트에서는 그룹화된 데이터의 요약 기능이 있습니다. 이 기능은 이전에 소개한 groupBy 메소드에 포함되어 있으며 옵션 인수를 다음과 같이 추가로 설정하여 사용할 수 있습니다.

// groupBy 메소드 사용, 그룹화를 설정합니다.
tableSheet.groupBy([{
    caption: "카테고리",
    field: "categoryName",
    width: 150,
    headerStyle: groupHeaderStyle,
    style: groupStyle,
    // 그룹 요약을 설정합니다.
    summaryFields: [{
        caption: "재고 합계",
        formula: "=SUM([unitsInStock])",
        width: 150
    }]
}]);

다음은 위의 코드를 이전 샘플에 구현한 샘플입니다. 그룹화에 표시된 그룹 열 외에도 요약 열 '재고 합계'가 시트에 삽입되어 있습니다.

summaryFields 옵션 

위에서 groupBy 메소드에 추가로 설정한 옵션 인수에서는 summaryFields 요약 열에 관한 다음과 같은 설정이 가능합니다.

이 중 많은 기능은 요약 열의 스타일을 조정하는 것으로, 이전에 소개한 그룹열의 옵션과 같은 방법으로 설정할 수 있습니다. (caption이나 style 등 그룹열 옵션과 같은 이름인 경우)

수식 및 함수에 의한 요약 방법 지정 

formula는 또한 그룹 요약의 핵심 옵션입니다. 이름에서 알 수 있듯이 이 옵션은 수식 및 함수를 설정하여 요약 방법을 지정합니다.

예를 들어 위에서 보신 샘플에서는 다음과 같이 설정하였습니다.

=SUM([unitsInStock])

unitsInStock은 샘플의 재고 데이터의 데이터 필드 이름입니다. 이를 SUM 함수로 요약하여 그룹별 재고 합계를 테이블 시트에 표시합니다.

응용 샘플

이 외에도 이 옵션은 여러 함수를 이용할 수 있습니다. SUM 함수 뿐만 아니라 Average 함수를 사용한 그룹별 평균이나 Max 함수나 MIN 함수를 사용한 최대값, 최소값의 표시 등 자유도 높은 요약을 설정할 수 있습니다.

위 샘플에서는 IF 및 MIN 함수를 사용하여 formula 옵션에 다음과 같은 수식을 설정합니다.

=IF(40>MIN([unitsInStock]),"재고 부족","재고 양호")

이 수식에 따라 요약 열 '재고 상태'에서는 그룹화된 카테고리의 재고에서 40 미만인 것이 있는 경우 '재고 부족', 그렇지 않은 경우 '재고 양호'라고 표시됩니다.

또, conditionalFormats 옵션을 사용한 조건부 서식 설정에 의해, 각각의 재고 상황에서 글꼴 색이 바뀌도록 동작합니다.

formula 옵션 및 conditionalFormats 옵션의 설정에 대해서는 아래 소스 코드를 참고해 주세요.

// 요약 열의 스타일을 정의합니다.
var summaryStyleGood = {
  foreColor: '#007700',
};
var summaryStyleCaution = {
  foreColor: '#BB2353',
};

// 그룹화를 설정합니다.
tableSheet.groupBy([
  {
    caption: '카테고리',
    field: 'categoryName',
    width: 123,
    // 그룹 요약 필드를 추가합니다.
    summaryFields: [
      {
        caption: '재고 상황',
        formula: '=IF(40>MIN([unitsInStock]),"재고 부족","재고 양호")',
        conditionalFormats: [
          /* 조건부 서식으로 요약 열이 '재고 부족'일 경우 글꼴 색상을 변경합니다. */
          {
            ruleType: 'cellValueRule',
            comparisonOperator: GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.equalsTo,
            value1: '재고 부족',
            style: summaryStyleCaution,
          },
          /* 조건부 서식으로 요약 열이 '재고 양호'인 경우 글꼴 색상을 변경합니다. */
          {
            ruleType: 'cellValueRule',
            comparisonOperator: GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.equalsTo,
            value1: '재고 양호',
            style: summaryStyleGood,
          },
        ],
        width: 123,
      },
    ],
  },
]);

지금까지 테이블 시트의 그룹 요약에 대해 알아보았습니다.

다음 스터디에서는 테이블 시트 슬라이스 기능에 대해 알아보겠습니다.

감사합니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ