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,
Example
app.component.ts
users.ts
Name
Position
Budget
Training
Mark Ross
Team Leader
-7000
13
Concepción King
Carpenter
8300
33
Vanecia Green
Painter
-2450
42
Samara Anderson
Electrician
5900
100
Maxine Hamilton
SEO Manager
4500
29
Dan Lee
Director
12000
92
Paul Long
Web Developer
9900
13
Madonna Snyder
Product Manager
100
81
Oriole Perkins
Public Relations
6200
72
Ernest Jordan
Copywriter
7500
55
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
	};
	
	
}
[
    {
        "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.

Example
app.component.ts
users.ts
Name
Position
Budget
Training
Mark Ross
Team Leader
-7000
13
Concepción King
Carpenter
8300
33
Vanecia Green
Painter
-2450
42
Samara Anderson
Electrician
5900
100
Maxine Hamilton
SEO Manager
4500
29
Dan Lee
Director
12000
92
Paul Long
Web Developer
9900
13
Madonna Snyder
Product Manager
100
81
Oriole Perkins
Public Relations
6200
72
Ernest Jordan
Copywriter
7500
55
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"
				  [searching]="searching"
				  [cellEditing]="cellEditing">
		</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
	};
	
	searching: GuiSearching = {
	    enabled: true
	};
	
	cellEditing: boolean = true;
	
	
}
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Summaries - Inputs

InputTypeDefaultDescription
summariesGuiSummaries'enabled: false' Enables / disables summaries calculation for grid.

Column summaries - Inputs

InputTypeDefaultDescription
enabledbooleanfalse Enables / disables summaries calculation for column.
summariesTypesArray<string>[] Types of calculations. Possible values:
  • 'count',
  • 'distinct',
  • 'sum',
  • 'average',
  • 'min',
  • 'max',
  • 'median,

Related articles:









We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.