New to Kendo UI for AngularStart a free 30-day trial

Angular PivotGrid Aggregates

Aggregates in PivotGrid serve to combine and summarize data across different dimensions. These aggregates enable users to perform calculations such as sum, average, count, and more, providing a comprehensive overview of the data from various perspectives.

The following example demonstrates some of the built-in aggregates of the PivotGrid in action.

Change Theme
Theme
Loading ...

Built-in Aggregates

To aggregate the PivotGrid data, set the measures property of the kendoPivotLocalBinding directive to a Measure collection.

html
<kendo-pivotgrid [measures]="measures" ... ></kendo-pivotgrid>

You can set the aggregate property to:

  • an Aggregate object

  • predefined built-in aggregates. Below is a list of supported built-in aggregates applicable for local data binding only:

    • sumAggregate
    • minAggregate
    • maxAggregate
    • averageAggregate
    • countAggregate
ts
import { Measure, minAggregate, sumAggregate} from '@progress/kendo-angular-pivotgrid';

public measures: Measure[] = [
    {
        name: 'Total',
        value: (item: DataItem): number => item.Price, aggregate: sumAggregate
    }, //...
];

To display specific aggregates during initialization, set the measureAxes property to a PivotGridAxis collection.

ts
public defaultMeasureAxes: PivotGridAxis[] = [
    { name: ['Total'] },
    { name: ['Min'] }
];

Isolating Aggregate Calculations Across PivotGrid Measures

By default, aggregates of the same type share the same internal data object for performance optimization. This means calculating the same aggregate type for multiple measures can lead to them overwriting each other.

To avoid this, use the createAggregate function along with the AggregateType enumeration to generate distinct aggregate instances for each measure. This ensures accurate, isolated calculations for each data field in the PivotGrid.

ts
import { createAggregate, AggregateType, Measure } from '@progress/kendo-angular-pivotgrid';

public measures: Measure[] = [
    {
        name: 'TotalPrice',
        value: (item: DataItem): number => item.Price,
        aggregate: createAggregate(AggregateType.Sum)
    },
    {
        name: 'TotalQuantity',
        value: (item: DataItem): number => item.Quantity,
        aggregate: createAggregate(AggregateType.Max)
    }
];

The following example demonstrates how to create distinct aggregate instances for each measure in the PivotGrid.

Change Theme
Theme
Loading ...

Custom Aggregates

When the built-in aggregates do not meet your specific requirements, you can create custom aggregates by implementing the Aggregate interface. Once created, the custom aggregate needs to be assigned to the aggregate property of a Measure object.

ts
import { Aggregate, Measure } from '@progress/kendo-angular-pivotgrid';

const createDoubleSumAggregate = (): Aggregate => {
  return {
    init: (data) => {
      if ('doubleSum' in data === false) {
        data.doubleSum = 0;
      }
    },
    accumulate: (acc, value) => {
      acc.doubleSum += value * 2;
    },
    merge: (src, dest) => {
      dest.doubleSum += src.doubleSum;
    },
    result: (data) => data.doubleSum,
    format: (value: number) => `2x: ${value.toFixed(2)}`,
  };
};

public measures: Measure[] = [
    {
        name: 'Double Sum',
        value: (item: DataItem): number => item.Price,
        aggregate: createDoubleSumAggregate()
    }
];

Custom aggregates are useful for complex calculations, business-specific formulas, and specialized formatting requirements that are not covered by the built-in aggregates.

The following example demonstrates how to create custom aggregates that implement specific business logic, such as doubling values and adding tariff percentages.

Change Theme
Theme
Loading ...