본 번역은 검증되지 않았습니다. AIP를 통해 영문원문으로부터 번역되었습니다.

차트 XY

차트 XY 위젯은 오브젝트를 대화식 차트로 시각화하는 데 사용됩니다. 모듈 빌더는 차트 XY 위젯을 구성할 때 다음을 수행할 수 있습니다.

막대, 선, 산점도 차트로 데이터 표시하기.
시각화할 속성 선택, 속성 집계 방법(예: 개수, 합계, 평균) 및 속성이 분할되는 방식 선택하기.
고급 집계 유형 및 차트 표시를 위해 Function-backed 레이어 사용하기.
차트 제목, 축, 범례 및 숫자 형식화에 대한 디스플레이 옵션 설정하기.
차트에서 선택 및 하류 필터링 활성화하기.

아래 스크린샷은 Flight Alerts 데이터를 표시하는 세 개의 구성된 차트 XY 위젯 예제를 보여줍니다:

구성 옵션

아래 이미지에서 파란색 화살표 왼쪽에는 새로 추가된(아직 구성되지 않은) 차트 XY 위젯과 초기 구성 패널이 표시됩니다. 파란색 화살표 오른쪽에는 백킹 오브젝트 세트 Flight Alerts가 이미 채워진 개별 레이어 구성 패널이 표시됩니다:

레이어 구성 옵션

레이어를 구성하여 차트 XY 위젯에 데이터를 추가하는 것이 필요합니다. 레이어에 대한 다음 구성 옵션을 사용할 수 있습니다.

제목
- 구성 패널 내에서 현재 레이어의 제목을 설정합니다.
- 참고: 이 제목은 모듈 사용자에게는 표시되지 않으며, 빌더가 여러 레이어를 사용하는 복잡한 차트 XY 구성을 정리하고 관리하는 데 도움이 됩니다.
데이터 입력값
- 이 레이어의 입력 데이터를 제어합니다.
- 오브젝트 세트 옵션은 Workshop 오브젝트 세트 변수를 입력으로 사용하도록 합니다.
- Function 집계 옵션은 2D 집계나 3D 집계를 반환하는 함수를 입력으로 사용하도록 합니다.
  - 참고: Function 집계 레이어는 아래의 레이어 구성 옵션 중 일부만 사용할 수 있습니다.
- Time 시리즈 세트 옵션은 Workshop 시간 시리즈 세트 변수를 입력으로 사용하도록 합니다. 시간 시리즈 세트 변수에 대한 자세한 내용은 Variables를 참조하세요. 이렇게하면 X축에 시간 범위, Y축에 변수의 시간 시리즈 값이 있는 시간 시리즈 차트가 구성됩니다.
레이어 유형
- 표시되는 차트 유형을 선택합니다. 현재 옵션에는 막대 차트, 선 차트, 산점도 차트가 포함됩니다. 데이터 입력값이 시간 시리즈 세트인 경우 Line Chart 옵션만 지원됩니다. 시간 시리즈 세트 변수에 대한 자세한 내용은 Variables를 참조하세요.
영역 옵션
- 선 차트에 대해 세 가지 시각화 옵션을 제공합니다:
  - "Line" (간단한 선 차트 표시),
  - "Area" (선 차트를 그리고 각 라인 아래의 영역을 그림자로 표시), 및
  - "Stacked" (영역 옵션과 비슷하게 분할된 차트 값이 서로 위에 쌓입니다).
- 영역 옵션은 선 차트에만 사용할 수 있습니다.
레이블
- 차트에 값 레이블 표시 여부를 전환합니다.
- 이 옵션은 현재 막대 차트와 선 차트에서 사용할 수 있습니다.
X축 속성
- 차트에 그려진 속성 유형을 결정합니다.
막대 / 선 / 차트 시리즈
- 단일 / 다중 시리즈 사용
  - 선택한 X축 속성에 대해 하나 이상의 차트 시리즈를 그릴 수 있도록 합니다.
  - 예를 들어, X축 속성으로 "Alert Type"이 선택된 경우 다중 시리즈는 각 "Alert Type"의 개수와 각 "Alert Type"에 대한 "# of Hours Delayed" 합계를 모두 표시할 수 있습니다.
- 시리즈 집계
  - 차트에 그려진 각 값의 생성에 사용되는 집계 방법을 결정합니다.
  - 기본적으로 "Count"로 설정됩니다.
  - 다른 옵션으로는 "Average," "Min," "Max," "Sum," 및 "Approximate Unique Count"가 있습니다.
- 세그먼트 별
  - 선택 사항입니다.
  - 보조 속성 유형별로 각 그림 값이 세그먼트로 구분되도록 합니다.
  - 예를 들어, X축 속성으로 "Alert Type"이 선택되고 "Aircraft Type"이 막대 차트의 Segment by 옵션으로 선택된 경우 각 막대는 각 "Aircraft Type"별로 구분된 각 "Alert Type"의 오브젝트 개수를 보여줍니다.
- null/누락 값 표시
  - Line chart에서만 사용 가능합니다.
  - 선 차트에서 null 값이나 누락 값이 어떻게 표시되는지 제어합니다.
  - 옵션은 "Gap"(누락된 값이 그려진 선의 빈 공간으로 표시되는 경우), "Ignored"(누락된 값이 무시되고 그려진 선은 대신 이전 값과 다음 사용 가능한 값으로 연결되는 경우) 또는 "Zeroes"(누락된 값이 "0"값과 동일하게 처리되는 경우)입니다.
- 표시 오버라이드
  - 선택 사항입니다.
  - 현재 시리즈의 범례 표시 이름을 재정의합니다.
  - 세그먼트화된 차트의 경우, 단일 세그먼트의 범례 표시 이름을 재정의합니다.
- 세그먼트 오버라이드
  - 막대 차트에서만 사용 가능합니다.
  - 각 막대 차트 값의 표시 방식을 수정합니다.
  - 옵션은 "Stacked," "Percentage," 및 "Grouped"가 있습니다.
선택을 필터로 사용
- 선택 사항이며 오브젝트 세트를 기반으로 한 차트에서만 사용 가능합니다.
- 설정되면 출력 오브젝트 세트 필터 변수를 통해 이 차트 레이어에 대한 선택 및 하류 위젯 필터링을 허용합니다.
레이어 삭제
- 현재 차트 레이어를 삭제할 수 있습니다.
시나리오
- 시나리오와 비교
  - 이 토글을 활성화하여 데이터를 비교할 시나리오 배열 변수를 선택합니다. 이렇게 하면 표 내의 데이터를 차트의 "segment by" 축을 사용하여 시나리오 배열의 시나리오 값과 비교합니다.
  - 이 옵션을 활성화하면 다른 속성으로 세그먼트를 나눌 수 없습니다.
- 시나리오에 대한 자세한 내용은 Scenarios documentation을 참조하세요.

차트 전체 구성 옵션

위에서 설명한 레이어의 구성 옵션 외에도 주요 차트 XY 구성 패널에는 여러 차트 전체 구성 옵션이 포함됩니다:

범주형 축
- 제목 표시
  - 활성화하면 범주형 축의 제목을 표시하고 이 제목을 재정의할 수 있습니다.
  - 기본적으로 이 제목은 차트 내에서 그려진 속성 유형을 표시합니다.
- 숫자 형식화 활성화
  - 활성화하면 범주형 축 키에 표시된 숫자 값에 대한 구성 옵션을 제공합니다.
  - 구성 옵션에는 숫자 그룹화, 표시되는 최소/최대 소수점, 과학적 표기법 등이 포함됩니다.
- 다음 기준으로 정렬
  - 차트 값이 표시되는 방식에 대한 정렬 로직을 제어합니다.
  - 기본적으로 범주형 키를 A부터 Z까지 알파벳순으로 정렬합니다.
값 축
- 여러 값 축 사용
  - 여러 차트 시리즈가 구성된 경우에만 사용 가능하며, 시리즈별로 값 축을 구성할 수 있습니다. 이렇게하면 차트의 다른 시리즈에 대해 크게 다른 값 척도가 있는 경우에 도움이 됩니다.
- 제목 표시
  - 활성화하면 값 축의 제목을 표시하고 이 제목을 재정의할 수 있습니다.
  - 기본적으로 이 제목은 차트의 시리즈에서 사용된 집계 유형을 표시합니다.
- 숫자 형식화 활성화
  - 활성화하면 값 축에 표시된 숫자 값에 대한 구성 옵션을 제공합니다.
  - 구성 옵션에는 숫자 그룹화, 표시되는 최소/최대 소수점, 과학적 표기법 등이 포함됩니다.
- 스케일 유형
  - 값 축 스케일을 "선형"(기본값) 또는 "로그"로 설정할 수 있습니다.
- 최소 범위
  - 기본적으로 표시된 차트 값에 기반하여 "자동 최소 범위 계산"으로 설정됩니다.
  - "Min"으로 전환하면 모듈 빌더가 값 축에서 표시되는 최소값을 제어할 수 있습니다.
- 최대 범위
  - 기본적으로 표시된 차트 값에 기반하여 "자동 최대 범위 계산"으로 설정됩니다.
  - "Max"로 전환하면 모듈 빌더가 값 축에서 표시되는 최대값을 제어할 수 있습니다.
범례
- 범례 표시
  - 차트 시리즈 제목과 시리즈 색상의 범례 표시를 전환합니다.
- 위치 옵션
  - "범례 표시"가 활성화된 경우 차트 내 범례의 위치를 제어합니다.
막대 방향
- 가로 / 세로 전환
  - 차트의 방향을 제어합니다.
  - 막대 차트의 경우 "가로"가 기본값입니다.
  - 선 차트 또는 산점도 차트의 경우 "세로"만 허용됩니다.

Function 집계 (Function-backed 레이어)

Function-backed 레이어를 구성하려면 TwoDimensionalAggregation 또는 ThreeDimensionalAggregation를 반환하는 함수를 작성해야 합니다.

아래에는 한 시간 시리즈를 다른 시간 시리즈로 나눈 값을 차트에 표시하기 위해 TwoDimensionalAggregation을 반환하는 전체 예제가 있습니다:

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation,
         IRange, Timestamp } from "@foundry/functions-api";
import { ObjectSet, MyObjectType } from "@foundry/ontology-api"

// 시계열 집계 클래스
export class TimeseriesAggregations {

    // 전체 대비 백분율 함수
    @Function()
    public async percentOfTotal(objects:ObjectSet<MyObjectType>):
                                Promise<TwoDimensionalAggregation<IRange<Timestamp>>> {
        // 날짜별로 그룹화하여 값의 합계를 구함
        const numerators = await objects.groupBy(e => e.date.byDays())
                                        .sum(e => e.value);
        // 날짜별로 그룹화하여 총 합계를 구함
        const denominators = await objects.groupBy(e => e.date.byDays())
                                          .sum(e => e.total);

        // 분자와 분모를 나누어 결과를 반환
        return this.divide(numerators, denominators);
    }

    // 분자와 분모를 나누는 함수
    private divide(numerators:TwoDimensionalAggregation<IRange<Timestamp>>,
                              denominators: TwoDimensionalAggregation<IRange<Timestamp>>):
                              TwoDimensionalAggregation<IRange<Timestamp>> {

        // 백분율 계산
        const percentage = numerators.buckets.map((bucket, i) => {
           const numerator = bucket.value;
           const denominator = denominators.buckets[i].value;
            // 분모가 0인 경우 0으로 처리
            if (denominator == 0) {
                return { key: bucket.key, value: 0 };
            }
            // 분자를 분모로 나눈 값을 반환
            return { key: bucket.key, value: numerator / denominator }
        });

        // 백분율 결과 반환
        return { buckets: percentage };
    }
}

다음은 segmentBy()에서 반환하는 각 값에 대해 별도의 시리즈를 차트로 그리는 ThreeDimensionalAggregation을 반환하는 전체 예제입니다:

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation,
         IRange, Timestamp } from "@foundry/functions-api";
import { ObjectSet, MyObjectType } from "@foundry/ontology-api"

export class TimeseriesAggregations {

    // 객체들을 그룹화하고, 그룹별로 총합을 구한 뒤 비율을 계산하여 반환하는 함수입니다.
    @Function()
    public async percentOfTotalSegmented(objects:ObjectSet<MyObjectType>):
                                         Promise<ThreeDimensionalAggregation<IRange<Timestamp>, string>> {
        const numerators = await objects.groupBy(e => e.date.byDays())
                                        .segmentBy(e => e.groupId.topValues())
                                        .sum(e => e.value);
        const denominators = await objects.groupBy(e => e.date.byDays())
                                          .segmentBy(e => e.groupId.topValues())
                                          .sum(e => e.total);

        return this.divideThreeDimensional(numerators, denominators);
    }

    // numerators와 denominators를 나누어 비율을 계산하는 함수입니다.
    private divideThreeDimensional(numerators:ThreeDimensionalAggregation<IRange<Timestamp>, string>,
                             denominators: ThreeDimensionalAggregation<IRange<Timestamp>, string>):
                             ThreeDimensionalAggregation<IRange<Timestamp>, string> {

        var percentage = numerators.buckets; // 복사
        for (let i = 0; i < numerators.buckets.length; i++) {
            for (let j = 0; j < numerators.buckets[i].value.length; j++) {
                // 분자와 분모를 나누어 비율을 계산합니다.
                percentage[i].value[j].value = numerators.buckets[i].value[j].value /
                                               denominators.buckets[i].value[j].value;
            }
        }

        return { buckets: percentage };
    }
}

더 많은 예제를 보려면 오브젝트 세트 집계 및 커스텀 집계 생성하기에 관한 Functions 관련 문서를 참조하세요.