Skip to content

Commit 36256d8

Browse files
zdrawkuzdrawku
authored
Merge pull request #1623 from IgniteUI/ddincheva/summary-vNext
All Data summary sample
2 parents 2c85dac + 6c0c74a commit 36256d8

22 files changed

+330
-15
lines changed

‎live-editing/configs/GridConfigGenerator.ts

+11
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
import {
4343
GridAdvancedFilteringStyleComponent
4444
} from "../../src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component";
45+
import { GridAllDataSummaryComponent } from "../../src/app/grid/grid-allData-summary/grid-allData-summary.component";
4546
import {
4647
GridBatchEditingSampleComponent
4748
} from "../../src/app/grid/grid-batch-editing/grid-batch-editing-sample.component";
@@ -1158,6 +1159,16 @@ export class GridConfigGenerator implements IConfigGenerator {
11581159
ngProviders: []
11591160
})
11601161
}));
1162+
1163+
configs.push(new Config({
1164+
component: GridAllDataSummaryComponent,
1165+
additionalFiles: ["/src/app/data/nwindData.ts"],
1166+
appModuleConfig: new AppModuleConfig({
1167+
imports: [GridAllDataSummaryComponent, IgxGridModule ],
1168+
ngDeclarations: [GridAllDataSummaryComponent],
1169+
ngImports: [IgxGridModule]
1170+
})
1171+
}));
11611172
return configs;
11621173
}
11631174
}

‎live-editing/configs/HierarchicalGridConfigGenerator.ts

+11
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { IgxSparklineCoreModule} from "igniteui-angular-charts/ES5/igx-sparkline
2020
import { IgxSparklineModule} from "igniteui-angular-charts/ES5/igx-sparkline-module";
2121
import { HGridAdvancedFilteringStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component";
2222
import { HGridAdvancedFilteringSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.component";
23+
import { HGridAllDataSummaryComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component";
2324
import { HGridBatchEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-batch-editing.component";
2425
import { HierarchicalGridWithTransactionsComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-transactions.component";
2526
import { HierarchicalGridColumnHidingToolbarStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component";
@@ -670,6 +671,16 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
670671
component: HGridSelectionTemplateNumbersSampleComponent
671672
}));
672673

674+
configs.push(new Config({
675+
additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
676+
appModuleConfig: new AppModuleConfig({
677+
imports: [IgxHierarchicalGridModule, HGridAllDataSummaryComponent],
678+
ngDeclarations: [HGridAllDataSummaryComponent],
679+
ngImports: [IgxHierarchicalGridModule]
680+
}),
681+
component: HGridAllDataSummaryComponent
682+
}));
683+
673684
return configs;
674685
}
675686
}

‎live-editing/configs/TreeGridConfigGenerator.ts

+19-6
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,18 @@ import { TreeGridAdvancedFilteringSampleComponent } from "../../src/app/tree-gri
4141
import { TreeGridAdvancedFilteringStyleComponent } from "../../src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component";
4242
import { TreeGridCellSelectionComponent } from "../../src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component";
4343
import { TreeGridColumnResizingSampleComponent } from "../../src/app/tree-grid/tree-grid-column-resizing-sample/tree-grid-column-resizing-sample.component";
44-
import { TreeGridConditionalCellStyleComponent } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component";
45-
import {
46-
TreeGridConditionalRowSelectorsSampleComponent
47-
} from "../../src/app/tree-grid/tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component";
4844
// tslint:disable-next-line: ordered-imports
4945
import {
5046
TreeGridConditionalCellStyle2Component
5147
} from "../../src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component";
48+
import { TreeGridConditionalCellStyleComponent } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component";
49+
import {
50+
TreeGridConditionalRowSelectorsSampleComponent
51+
} from "../../src/app/tree-grid/tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component";
5252
import { TreeGridDisplaydensitySampleComponent } from "../../src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component";
5353
import { TreeGridEditingEventsComponent } from "../../src/app/tree-grid/tree-grid-editing-events/tree-grid-editing-events.component";
5454
import { TreeGridEditingSampleComponent } from "../../src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component";
5555
import { TreeGridEditingStyleComponent } from "../../src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component";
56-
import { TreeGridExternalAdvancedFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component";
57-
import { TreeGridExternalExcelStyleFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component";
5856
import { RemoteValuesService } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service";
5957
import { TreeGridExcelStyleFilteringLoadOnDemandComponent } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component";
6058
import {
@@ -69,6 +67,8 @@ import {
6967
import {
7068
TreeGridExcelStyleFilteringStyleComponent
7169
} from "../../src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component";
70+
import { TreeGridExternalAdvancedFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component";
71+
import { TreeGridExternalExcelStyleFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component";
7272
import { TreeGridFilteringCustomSampleComponent } from "../../src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component";
7373
import { TreeGridFilteringSampleComponent } from "../../src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component";
7474
import { TreeGridFilteringStyleComponent } from "../../src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component";
@@ -108,6 +108,7 @@ import { TreeGridToolbarSample3Component } from "../../src/app/tree-grid/tree-gr
108108
import { TreeGridToolbarSample4Component } from "../../src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component";
109109
import { TreeGridToolbarStyleComponent } from "../../src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component";
110110
import { TreeGridVirtualizationSampleComponent } from "../../src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component";
111+
import { TreeGridAllDataSummaryComponent } from "../../src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component";
111112
import { AppModuleConfig } from "./core/AppModuleConfig";
112113
import { Config } from "./core/Config";
113114
import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -918,6 +919,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
918919
})
919920
}));
920921

922+
configs.push(new Config({
923+
additionalFiles: [
924+
"/src/app/tree-grid/data/employees-flat.ts"
925+
],
926+
appModuleConfig: new AppModuleConfig({
927+
imports: [IgxTreeGridModule, TreeGridAllDataSummaryComponent],
928+
ngDeclarations: [TreeGridAllDataSummaryComponent],
929+
ngImports: [IgxTreeGridModule]
930+
}),
931+
component: TreeGridAllDataSummaryComponent
932+
}));
933+
921934
return configs;
922935
}
923936
}

‎src/app/data/nwindData.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const DATA: any[] = [{
2121
UnitsInStock: 17,
2222
UnitsOnOrder: 40,
2323
ReorderLevel: 25,
24-
Discontinued: false,
24+
Discontinued: true,
2525
OrderDate: new Date("2003-03-17")
2626
}, {
2727
ProductID: 3,

‎src/app/grid/grid-allData-summary/grid-allData-summary.component.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="grid__wrapper">
2+
<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="600px" width="100%" [paging]="false">
3+
<igx-column field="ProductID" header="Product ID" width="17%" [headerClasses]="'prodId'">
4+
</igx-column>
5+
<igx-column field="ProductName" header="Product Name" width="17%" [headerClasses]="'prodId'" >
6+
</igx-column>
7+
<igx-column field="UnitPrice" header="Price" [filterable]="false" width="17%" editable="true" dataType="number">
8+
</igx-column>
9+
<igx-column field="UnitsInStock" header="Units In Stock" width="17%" dataType="number" editable="true"
10+
[hasSummary]="true" [summaries]="discontinuedSummary">
11+
</igx-column>
12+
<igx-column field="Discontinued" header="Discontinued" [editable]="true" width="17%" [dataType]="'boolean'">
13+
</igx-column>
14+
<igx-column field="OrderDate" width="15%" [dataType]="'date'" [hasSummary]="true">
15+
</igx-column>
16+
</igx-grid>
17+
</div>

‎src/app/grid/grid-allData-summary/grid-allData-summary.component.scss

Whitespace-only changes.

‎src/app/grid/grid-allData-summary/grid-allData-summary.component.ts

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
import {
3+
IgxGridComponent,
4+
IgxNumberSummaryOperand,
5+
IgxSummaryResult } from "igniteui-angular";
6+
import { DATA } from "../../data/nwindData";
7+
8+
class DiscontinuedSummary extends IgxNumberSummaryOperand {
9+
10+
constructor() {
11+
super();
12+
}
13+
14+
public operate(data?: any[], allData = [], fieldName = ""): IgxSummaryResult[] {
15+
const result = [];
16+
result.push({
17+
key: "products",
18+
label: "Producs",
19+
summaryResult: data.length
20+
});
21+
result.push({
22+
key: "total",
23+
label: "Total Items",
24+
summaryResult: IgxNumberSummaryOperand.sum(data)
25+
});
26+
result.push({
27+
key: "discontinued",
28+
label: "Discontinued Producs",
29+
summaryResult: allData.map(r => r["Discontinued"]).filter((rec) => rec).length
30+
});
31+
result.push({
32+
key: "totalDiscontinued",
33+
label: "Total Discontinued Items",
34+
summaryResult: IgxNumberSummaryOperand.sum(allData.filter((rec) => rec["Discontinued"]).map(r => r[fieldName]))
35+
});
36+
return result;
37+
}
38+
}
39+
@Component({
40+
selector: "grid-allData-summary",
41+
styleUrls: ["./grid-allData-summary.component.scss"],
42+
templateUrl: "./grid-allData-summary.component.html"
43+
})
44+
export class GridAllDataSummaryComponent implements OnInit {
45+
46+
@ViewChild("grid1", { read: IgxGridComponent, static: true })
47+
public grid1: IgxGridComponent;
48+
public discontinuedSummary = DiscontinuedSummary;
49+
public data;
50+
51+
constructor() {
52+
this.data = DATA;
53+
}
54+
55+
public ngOnInit() {
56+
}
57+
58+
}

‎src/app/grid/grid-routes-data.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const gridsRoutesData = {
8686
{ displayName: "Grid Excel Style Filtering Load On Demand", parentName: "Grid" },
8787
"grid-conditional-row-selectors": { displayName: "Grid Conditional Row Selectors", parentName: "Grid" },
8888
"grid-dynamic-chart-data": { displayName: "Grid Dynamic Chart Data", parentName: "Grid" },
89-
"grid-master-detail": { displayName: "Grid Master Detail", parentName: "Grid" },
90-
"grid-multiple-row-drag": { displayName: "Grid Multi Row Drag", parentName: "Grid"}
89+
"grid-multiple-row-drag": { displayName: "Grid Multi Row Drag", parentName: "Grid"},
90+
"grid-alldata-summaries": {displayName: "Grid AllData Summaries", parentName: "Grid"},
91+
"grid-master-detail": { displayName: "Grid Master Detail", parentName: "Grid" }
9192
};

‎src/app/grid/grids-routing.module.ts

+6
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-co
7676
import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
7777
import { GridAdvancedFilteringSampleComponent } from "./grid-advanced-filtering-sample/grid-advanced-filtering-sample.component";
7878
import { GridAdvancedFilteringStyleComponent } from "./grid-advanced-filtering-style/grid-advanced-filtering-style.component";
79+
import { GridAllDataSummaryComponent } from "./grid-allData-summary/grid-allData-summary.component";
7980
import { GridCellSelectionComponent } from "./grid-cellSelection-sample/grid-cellSelection.component";
8081
import {
8182
GridConditionalRowSelectorsComponent
@@ -516,6 +517,11 @@ export const gridsRoutes: Routes = [
516517
data: gridsRoutesData["grid-dynamic-chart-data"],
517518
path: "grid-dynamic-chart-data"
518519
},
520+
{
521+
component: GridAllDataSummaryComponent,
522+
data: gridsRoutesData["grid-alldata-summaries"],
523+
path: "grid-alldata-summaries"
524+
},
519525
{
520526
component: GridMasterDetailSampleComponent,
521527
data: gridsRoutesData["grid-master-detail"],

‎src/app/grid/grids.module.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { IgxSparklineModule } from "igniteui-angular-charts/ES5/igx-sparkline-mo
4141
import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
4242
import { GridAdvancedFilteringSampleComponent } from "./grid-advanced-filtering-sample/grid-advanced-filtering-sample.component";
4343
import { GridAdvancedFilteringStyleComponent } from "./grid-advanced-filtering-style/grid-advanced-filtering-style.component";
44+
import { GridAllDataSummaryComponent } from "./grid-allData-summary/grid-allData-summary.component";
4445
import { GridBatchEditingSampleComponent } from "./grid-batch-editing/grid-batch-editing-sample.component";
4546
import { GridWithTransactionsComponent } from "./grid-batch-editing/grid-transaction.component";
4647
import { GridComponent } from "./grid-boston-marathon/grid.component";
@@ -223,8 +224,9 @@ import { DataService } from "./services/data.service";
223224
GridMultipleRowDragComponent,
224225
ChartHostDirective,
225226
ChartArgsPipe,
226-
GridMasterDetailSampleComponent,
227-
GridExternalAdvancedFilteringComponent
227+
GridExternalAdvancedFilteringComponent,
228+
GridAllDataSummaryComponent,
229+
GridMasterDetailSampleComponent
228230
],
229231
imports: [
230232
CommonModule,

‎src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="hgrid-sample">
2+
<igx-hierarchical-grid class="hgrid" [data]="localdata"
3+
[height]="'600px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
4+
<igx-column field="Artist" [hasSummary]='true'></igx-column>
5+
<igx-column field="Photo" [hasSummary]='true' [summaries]="grammySummary">
6+
<ng-template igxCell let-cell="cell">
7+
<div class="cell__inner_2">
8+
<img [src]="cell.value" class="photo" />
9+
</div>
10+
</ng-template>
11+
</igx-column>
12+
<igx-column field="Debut"></igx-column>
13+
<igx-column field="GrammyNominations" header="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="numberSummary"></igx-column>
14+
<igx-column field="GrammyAwards" header="Grammy Awards" [hasSummary]='true' [dataType]="'number'" [summaries]="numberSummary"></igx-column>
15+
16+
<igx-row-island [key]="'Albums'">
17+
<igx-column field="Album" [hasSummary]='true'></igx-column>
18+
<igx-column field="LaunchDate" header="Launch Date" [hasSummary]='true' [dataType]="'date'"></igx-column>
19+
<igx-column field="BillboardReview" header="Billboard Review" [hasSummary]='true'></igx-column>
20+
<igx-column field="USBillboard200" header="US Billboard 200" [hasSummary]='true'></igx-column>
21+
<igx-row-island [key]="'Songs'">
22+
<igx-column field="Number" header="No." [hasSummary]='true'></igx-column>
23+
<igx-column field="Title" [hasSummary]='true'></igx-column>
24+
<igx-column field="Released" dataType="date" [hasSummary]='true'></igx-column>
25+
<igx-column field="Genre" [hasSummary]='true'></igx-column>
26+
</igx-row-island>
27+
</igx-row-island>
28+
</igx-hierarchical-grid>
29+
</div>

‎src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component.scss

Whitespace-only changes.

‎src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component.ts

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
import { IgxHierarchicalGridComponent,
3+
IgxNumberSummaryOperand,
4+
IgxSummaryOperand,
5+
IgxSummaryResult } from "igniteui-angular";
6+
import { SINGERS } from "../data";
7+
8+
class CustomNumberSummary extends IgxNumberSummaryOperand {
9+
10+
constructor() {
11+
super();
12+
}
13+
14+
public operate(data?: any[]): IgxSummaryResult[] {
15+
const result = super.operate(data);
16+
result.pop();
17+
result.pop();
18+
return result;
19+
}
20+
}
21+
22+
class GrammySummary extends IgxSummaryOperand {
23+
24+
constructor() {
25+
super();
26+
}
27+
28+
public operate(data?: any[], allData = [], fieldName = ""): IgxSummaryResult[] {
29+
const result = [];
30+
result.push({
31+
key: "nominatedSingers",
32+
label: "Nominated Singers",
33+
summaryResult: allData.filter((rec) => rec["GrammyNominations"] > 0).length
34+
});
35+
result.push({
36+
key: "singersWithAwards",
37+
label: "Singers with Awards",
38+
summaryResult: allData.filter((rec) => rec["GrammyAwards"] > 0).length
39+
});
40+
result.push({
41+
key: "nominations",
42+
label: "Total Nominations",
43+
summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r["GrammyNominations"]))
44+
});
45+
result.push({
46+
key: "awards",
47+
label: "Total Awards",
48+
summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r["GrammyAwards"]))
49+
});
50+
return result;
51+
}
52+
}
53+
54+
@Component({
55+
selector: "hierarchical-grid-allData-summary",
56+
styleUrls: ["./hierarchical-grid-allData-summary.component.scss"],
57+
templateUrl: "hierarchical-grid-allData-summary.component.html"
58+
})
59+
60+
export class HGridAllDataSummaryComponent implements OnInit {
61+
public localdata;
62+
public grammySummary = GrammySummary;
63+
public numberSummary = CustomNumberSummary;
64+
65+
@ViewChild("hierarchicalGrid", { static: true })
66+
private hierarchicalGrid: IgxHierarchicalGridComponent;
67+
68+
constructor() {}
69+
70+
public ngOnInit(): void {
71+
this.localdata = SINGERS;
72+
}
73+
}

‎src/app/hierarchical-grid/hierarchical-grid-routes-data.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,6 @@ export const hierarchicalGridRoutesData = {
5454
"hierarchical-grid-advanced-filtering": { displayName: "Hierarchical Grid Advanced Filtering", parentName: "Hierarchical Grid" },
5555
"hierarchical-grid-advanced-filtering-style": { displayName: "Hierarchical Grid Advanced Filtering Style", parentName: "Hierarchical Grid" },
5656
"hierarchical-grid-filtering-style": { displayName: "HGrid Filtering Style", parentName: "Hierarchical Grid" },
57-
"hierarchical-grid-conditional-row-selectors": { displayName: "HGrid Conditional Row Selectors", parentName: "Hierarchical Grid" }
57+
"hierarchical-grid-conditional-row-selectors": { displayName: "HGrid Conditional Row Selectors", parentName: "Hierarchical Grid" },
58+
"hierarchical-grid-allData-summary": {displayName: "HGrid All Data Custom Summaries", parentName: "Hierarchical Grid"}
5859
};

0 commit comments

Comments
 (0)