Blazor 피벗 그리드 개요

Ignite UI for Blazor 방대한 다차원 데이터를 교차표 형식으로 요약하고 나타내는 데 사용됩니다. 요약된 데이터는 쉽고 빠르게 정렬, 그룹화 또는 필터링할 수 있습니다. 이러한 데이터에는 합계, 평균 및 기타 통계가 포함될 수 있습니다. 최종 사용자는 필요에 따라 드래그 앤 드롭 작업을 통해 피벗 테이블 레이아웃을 수정할 수 있습니다.

What is Blazor Pivot Grid?

Blazor PivotGrid는 피벗 테이블에 데이터를 표시하고 제공된 데이터 세트에 대한 복잡한 분석을 수행하는 데 도움을 줍니다. 이 정교한 피벗 그리드 컨트롤은 나중에 크로스 테이블 형식으로 표시되는 대량의 데이터를 구성, 요약 및 필터링하는 데 사용됩니다. Blazor 피벗 그리드의 주요 기능은 행 차원, 열 차원, 집계 및 필터입니다.

IgbPivotGrid 사용자가 다차원 피벗 테이블 구조로 데이터를 구성하고 표시할 수 있는 기능을 제공합니다. 행과 열은 고유한 데이터 그룹을 나타내고 데이터 셀 값은 집계를 나타냅니다. 이를 통해 단순 플랫 데이터 세트를 기반으로 복잡한 데이터 분석이 가능합니다. IgbPivotGrid는 필터링 및 정렬과 같은 추가 데이터 작업뿐만 아니라 다양한 차원 및 값의 쉬운 구성을 제공하는 기능이 풍부한 피벗 테이블입니다.

Blazor Pivot Grid Example

다음은 Blazor Pivot 데이터 선택기 구성 요소와 결합된 Blazor Pivot Grid 예제입니다. 이렇게 하면 보다 유연한 런타임 구성 옵션을 가질 수 있습니다.

Getting Started With Blazor Pivot Grid

Blazor PivotGrid는 PivotConfiguration 속성을 통해 구성할 수 있습니다.

<IgbPivotGrid PivotConfiguration="PivotConfiguration" Data="PivotData">
</IgbPivotGrid>

행, 열 및 값의 세 가지 주요 차원으로 정의됩니다. 행과 열은 그리드의 행과 열에 표시되는 그룹화된 구조를 정의합니다. 값은 집계 필드와 그룹의 관련 값을 계산하고 표시하는 데 사용되는 집계를 정의합니다.

필터는 필터 구성 속성을 통해 정의할 수도 있습니다. 차원 또는 값으로 추가하고 싶지 않지만 UI를 통해 관련 멤버 값을 필터링하려는 필드에 사용할 수 있습니다.

Dimensions Configuration

각 기본 치수 구성에는 MemberName 제공된 필드와 일치하는 데이터.

관련 행 또는 열 차원 영역에 더 복잡한 중첩 그룹을 생성하는 여러 동위 차원을 정의할 수 있습니다.

드래그 앤 드롭을 사용하여 해당 칩을 통해 차원을 재정렬하거나 한 영역에서 다른 영역으로 이동할 수 있습니다.

차원은 속성을 통해 ChildLevel 확장 가능한 계층을 설명할 수도 있습니다. 예를 들면 다음과 같습니다.

@code {
    var pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.Rows.Add(new IgbPivotDimension()
        {
            MemberName = "Product",
            Enabled = true,
            Name = "pivotDimension1",
            ChildLevel = new IgbPivotDimension() { MemberName = "Country", Enabled = true, Name = "pivotDimension2" }
        });
}

이 경우 차원은 그리드의 관련 섹션(행 또는 열)에서 확장기를 렌더링하고 자식이 계층의 일부로 확장되거나 축소될 수 있도록 합니다. 기본적으로 행 차원은 초기에 확장됩니다. 이 동작은 Pivot Grid의 속성으로 DefaultExpandState 제어할 수 있습니다.

Predefined Dimensions

Pivot Grid의 일부로, 더 쉽게 구성할 수 있도록 몇 가지 추가 사전 정의된 차원이 노출됩니다.

IgbPivotDateDimension 날짜 필드에 사용할 수 있습니다. 기본적으로 다음과 같은 계층 구조를 설명합니다.
- 모든 기간
- 연령
- 병사
- 개월
- 전체 날짜

행이나 열에 대해 설정할 수 있습니다. 예를 들면 다음과 같습니다.

@code {
    IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
    dateDim.BaseDimension = new IgbPivotDimension()
        {
            MemberName = "Date",
            Enabled = true
        };
    _config.Rows.Add(dateDim);
}

또한 계층 구조의 특정 부분을 활성화 또는 비활성화하기 위해 두 번째 옵션 매개 변수를 통해 추가로 사용자 지정할 수 있습니다. 예를 들면 다음과 같습니다.

@code {
    IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
    dateDim.BaseDimension = new IgbPivotDimension()
        {
            MemberName = "Date",
            Enabled = true
        };
    dateDim.Options = new IgbPivotDateDimensionOptions()
        {
            Years = true,
            Months = true,
            FullDate = true,
            Quarters = true
        };
    _config.Rows.Add(dateDim);
}

Values Configuration

값 구성에는 제공된 데이터의 필드와 일치하는 구성원이 필요하거나 더 복잡한 사용자 정의 시나리오를 위해 사용자 정의 집계 함수를 정의할 수 있습니다. 기본적으로 데이터 필드의 데이터 유형에 따라 사용할 수 있는 4개의 사전 정의된 집계가 있습니다.

PivotNumericAggregate- 숫자 필드용. SUM, AVG, MIN, MAX, COUNT 집계 함수를 포함합니다.
PivotDateAggregate- 날짜 필드용입니다. LATEST, EARLIEST, COUNT 집계 함수를 포함합니다.
PivotTimeAggregate- 시간 필드용. LATEST, EARLIEST, COUNT 집계 함수를 포함합니다.
PivotAggregate- 다른 모든 데이터 유형용. 이것은 기본 집계입니다. 다음 집계 함수를 포함합니다. COUNT.

현재 집계 함수는 가치 칩의 드롭다운을 사용하여 런타임에 변경할 수 있습니다. 기본적으로 필드의 데이터 유형에 따라 사용 가능한 집계 목록이 표시됩니다. 집계의 사용자 지정 목록은 AggregateList 속성을 통해 설정할 수도 있습니다. 예를 들면 다음과 같습니다.

@code {
    IgbPivotConfiguration pivotConfiguration1 = new IgbPivotConfiguration();
    IgbPivotValue pivotValue = new IgbPivotValue()
        {
            Member = "Sales",
            Name = "pivotValue1",
            DisplayName = "Amount of Sales",
            Enabled = true,
            Aggregate = new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" }
        };
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" });
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "min", AggregatorName = PivotAggregationType.MIN, Label = "Minimum of Sales" });
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "max", AggregatorName = PivotAggregationType.MAX, Label = "Maximum of Sales" });
    pivotConfiguration1.Values.Add(pivotValue);

pivot 값은 속성도 DisplayName 제공합니다. 열 머리글에 이 값에 대한 사용자 지정 이름을 표시하는 데 사용할 수 있습니다.

Enable Property

PivotConfiguration은 IgbPivotGrid 구성 요소의 현재 상태를 설명하는 인터페이스입니다. 이를 통해 개발자는 데이터 필드를 행, 열, 필터 또는 값으로 선언할 수 있습니다. 구성을 통해 이러한 각 요소를 개별적으로 활성화 또는 비활성화할 수 있습니다. 활성화된 요소만 피벗 그리드의 현재 상태에 포함됩니다. IgbPivotDataSelector 구성 요소는 동일한 구성을 사용하고 활성화 및 비활성화된 모든 요소 목록을 표시합니다. 그들 각각에 대해 적절한 상태의 확인란이 있습니다. 최종 사용자는 이러한 확인란을 사용하여 다양한 요소를 토글하여 피벗 상태를 쉽게 조정할 수 있습니다. Enable 속성은 지정된 IgbPivotDimension 또는 IgbPivotValue 활성 상태이고 피벗 그리드에 의해 렌더링된 피벗 보기에 참여하는지 여부를 제어합니다.

Full Configuration Code

기본 피벗 구성을 살펴보겠습니다.

    IgbPivotConfiguration pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.Rows.Add(new IgbPivotDimension()
        {
            MemberName = "SellerName",
            Enabled = true,
            Name = "pivotDimension1"
        });
    pivotConfiguration.Columns.Add(new IgbPivotDimension()
        {
            MemberName = "ProductName",
            Enabled = true,
            Name = "pivotDimension2"
        });
    pivotConfiguration.Columns.Add(new IgbPivotDimension()
        {
            MemberName = "SellerCity",
            Enabled = true,
            Name = "pivotDimension2"
        });
    pivotConfiguration.Values.Add(new IgbPivotValue()
        {
            Member = "AmountofSale",
            Name = "pivotValue1",
            Enabled = true,
            Aggregate = new IgbPivotAggregator() { Key = "SUM", AggregatorName = PivotAggregationType.SUM, Label = "Sum" }
        });
}

이 구성은 각 차원 그룹의 값을 합산하는 1개의 행, 1개의 열 및 1개의 집계를 정의합니다. 멤버는 제공된 데이터 소스에서 사용 가능한 필드와 일치합니다.

public PivotDataFlat()
{
    this.Add(new PivotDataFlatItem()
    {
        ProductName = @"Clothing",
            ProductUnitPrice = 12.8,
            SellerName = @"Stanley Brooker",
            SellerCity = @"Seattle",
            Date = @"2007-01-01T00:00:00",
            Value = 94.4,
            NumberOfUnits = 282
    });

Full Configuration Example

위의 코드를 사용하면 Date 고유 열, Product Name 및 Seller City를 고유 행으로 그룹화하고 관련 셀의 판매량에 대한 관련 집계를 표시하는 다음 예제가 생성됩니다.

Known Issues and Limitations

한정	설명
열을 선언적으로 설정하는 것은 지원되지 않습니다.	피벗 그리드는 다음을 기반으로 열을 생성합니다.`Columns` 구성이므로 기본 그리드에서와 같이 선언적으로 설정하는 것은 지원되지 않습니다. 이러한 열은 무시됩니다.
중복 설정`MemberName` 또는`Member` 차원/값에 대한 속성 값입니다.	이러한 속성은 각 차원/값에 대해 고유해야 합니다. 중복으로 인해 최종 결과의 데이터가 손실될 수 있습니다.
행 선택은 단일 모드에서만 지원됩니다.	다중 선택은 현재 지원되지 않습니다.

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.