차트 XY 위젯은 오브젝트를 대화식 차트로 시각화하는 데 사용됩니다. 모듈 빌더는 차트 XY 위젯을 구성할 때 다음을 수행할 수 있습니다.
아래 스크린샷은 Flight Alerts
데이터를 표시하는 세 개의 구성된 차트 XY 위젯 예제를 보여줍니다:
아래 이미지에서 파란색 화살표 왼쪽에는 새로 추가된(아직 구성되지 않은) 차트 XY 위젯과 초기 구성 패널이 표시됩니다. 파란색 화살표 오른쪽에는 백킹 오브젝트 세트 Flight Alerts
가 이미 채워진 개별 레이어 구성 패널이 표시됩니다:
레이어를 구성하여 차트 XY 위젯에 데이터를 추가하는 것이 필요합니다. 레이어에 대한 다음 구성 옵션을 사용할 수 있습니다.
위에서 설명한 레이어의 구성 옵션 외에도 주요 차트 XY 구성 패널에는 여러 차트 전체 구성 옵션이 포함됩니다:
Function-backed 레이어를 구성하려면 TwoDimensionalAggregation
또는 ThreeDimensionalAggregation
를 반환하는 함수를 작성해야 합니다.
아래에는 한 시간 시리즈를 다른 시간 시리즈로 나눈 값을 차트에 표시하기 위해 TwoDimensionalAggregation
을 반환하는 전체 예제가 있습니다:
Copied!1import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation, 2 IRange, Timestamp } from "@foundry/functions-api"; 3import { ObjectSet, MyObjectType } from "@foundry/ontology-api" 4 5// 시계열 집계 클래스 6export class TimeseriesAggregations { 7 8 // 전체 대비 백분율 함수 9 @Function() 10 public async percentOfTotal(objects:ObjectSet<MyObjectType>): 11 Promise<TwoDimensionalAggregation<IRange<Timestamp>>> { 12 // 날짜별로 그룹화하여 값의 합계를 구함 13 const numerators = await objects.groupBy(e => e.date.byDays()) 14 .sum(e => e.value); 15 // 날짜별로 그룹화하여 총 합계를 구함 16 const denominators = await objects.groupBy(e => e.date.byDays()) 17 .sum(e => e.total); 18 19 // 분자와 분모를 나누어 결과를 반환 20 return this.divide(numerators, denominators); 21 } 22 23 // 분자와 분모를 나누는 함수 24 private divide(numerators:TwoDimensionalAggregation<IRange<Timestamp>>, 25 denominators: TwoDimensionalAggregation<IRange<Timestamp>>): 26 TwoDimensionalAggregation<IRange<Timestamp>> { 27 28 // 백분율 계산 29 const percentage = numerators.buckets.map((bucket, i) => { 30 const numerator = bucket.value; 31 const denominator = denominators.buckets[i].value; 32 // 분모가 0인 경우 0으로 처리 33 if (denominator == 0) { 34 return { key: bucket.key, value: 0 }; 35 } 36 // 분자를 분모로 나눈 값을 반환 37 return { key: bucket.key, value: numerator / denominator } 38 }); 39 40 // 백분율 결과 반환 41 return { buckets: percentage }; 42 } 43}
다음은 segmentBy()
에서 반환하는 각 값에 대해 별도의 시리즈를 차트로 그리는 ThreeDimensionalAggregation
을 반환하는 전체 예제입니다:
Copied!1import { Function, TwoDimensionalAggregation, ThreeDimensionalAggregation, 2 IRange, Timestamp } from "@foundry/functions-api"; 3import { ObjectSet, MyObjectType } from "@foundry/ontology-api" 4 5export class TimeseriesAggregations { 6 7 // 객체들을 그룹화하고, 그룹별로 총합을 구한 뒤 비율을 계산하여 반환하는 함수입니다. 8 @Function() 9 public async percentOfTotalSegmented(objects:ObjectSet<MyObjectType>): 10 Promise<ThreeDimensionalAggregation<IRange<Timestamp>, string>> { 11 const numerators = await objects.groupBy(e => e.date.byDays()) 12 .segmentBy(e => e.groupId.topValues()) 13 .sum(e => e.value); 14 const denominators = await objects.groupBy(e => e.date.byDays()) 15 .segmentBy(e => e.groupId.topValues()) 16 .sum(e => e.total); 17 18 return this.divideThreeDimensional(numerators, denominators); 19 } 20 21 // numerators와 denominators를 나누어 비율을 계산하는 함수입니다. 22 private divideThreeDimensional(numerators:ThreeDimensionalAggregation<IRange<Timestamp>, string>, 23 denominators: ThreeDimensionalAggregation<IRange<Timestamp>, string>): 24 ThreeDimensionalAggregation<IRange<Timestamp>, string> { 25 26 var percentage = numerators.buckets; // 복사 27 for (let i = 0; i < numerators.buckets.length; i++) { 28 for (let j = 0; j < numerators.buckets[i].value.length; j++) { 29 // 분자와 분모를 나누어 비율을 계산합니다. 30 percentage[i].value[j].value = numerators.buckets[i].value[j].value / 31 denominators.buckets[i].value[j].value; 32 } 33 } 34 35 return { buckets: percentage }; 36 } 37}
더 많은 예제를 보려면 오브젝트 세트 집계 및 커스텀 집계 생성하기에 관한 Functions 관련 문서를 참조하세요.