Summaries

Summaries are one of the best features of Generic UI Grid. It allows the grid to calculate additional information about the presented data. One of the most popular summaries is 'average', which calculated the average value of all values presented in the column.

Summaries are calculated for columns of type number. Types of possible summary functions:

'count',
'distinct',
'sum',
'average',
'min',
'max',
'median,

Name

Position

Budget

Training

Sum 44950

Avg4495

Min -7000

Max 12000

Count10

Dist9

Avg53

Med92

import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [summaries]="summaries">
		</gui-grid>
	`
})
export class SummariesComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Budget',
        field: 'budget',
        type: GuiDataType.NUMBER,
        summaries: {
            enabled: true,
            summariesTypes: [
                'sum',
                'average',
                'min',
                'max'
            ]
        }
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 160,
        summaries: {
            enabled: true,
            summariesTypes: [
                'count',
                'distinct',
                'average',
                'median'
            ]
        }
    }];
			
	summaries: GuiSummaries = {
	    enabled: true
	};
	
	
}

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

To enable summaries you have to set input summaries of type GuiSummaries to enabled. Then you have to specify on which column you want to enable summaries and select summariesTypes.

Summaries config:

summaries: GuiSummaries = {
	enabled: true
};

Config at the column level:

columns: Array<GuiColumn> = [{
	header: 'Training',
	field: 'training',
	type: GuiDataType.NUMBER,
	width: 100,
	summaries: {
		enabled: true,
		summariesTypes: [
			'count',
			'distinct',
			'sum',
			'average',
			'min',
			'max',
			'median'
		]
	}
}];

Searching, Editing

Summaries are calculated for data loaded by the grid. Presented summaries values are affected by all filtering transformations like searching, filtering, etc.

Changes made by the editing also modifies summaries data. So when user changes value, summaries are recalculated.