Merge pull request #5966 from IgniteUI/ddincheva/summary5754

zdrawku · web-flow · commit bbf3bca540ba · 2019-10-14T16:42:01.000+03:00
Access all grid data from each summary
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
@@ -287,6 +287,37 @@ describe('IgxGrid - Summaries #grid', () => {
                 'summary cell and data cell are not right aligned');
         }));
 
+        it('should be able to access alldata from each summary', fakeAsync(() => {
+            const fixture = TestBed.createComponent(CustomSummariesComponent);
+            const grid = fixture.componentInstance.grid1;
+            fixture.detectChanges();
+
+            const summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
+            GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight);
+            grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.inStockSummary;
+            tick(100);
+            fixture.detectChanges();
+
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
+                ['10', '0', '20,000', '39,004', '3,900.4', '6']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
+
+            grid.getCellByColumn(4, 'InStock').update(true);
+            tick();
+            fixture.detectChanges();
+
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
+                ['10', '0', '20,000', '39,004', '3,900.4', '7']);
+
+            grid.filter('UnitsInStock', 0, IgxNumberFilteringOperand.instance().condition('equals'));
+            fixture.detectChanges();
+
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
+            ['3', '0', '0', '0', '0', '1']);
+        }));
+
         describe('', () => {
             let fix;
             let grid: IgxGridComponent;
@@ -2441,6 +2472,24 @@ class EarliestSummary extends IgxDateSummaryOperand {
     }
 }
 
+class InStockSummary extends IgxNumberSummaryOperand {
+    constructor() {
+        super();
+    }
+
+    public operate(summaries?: any[], allData = [], field?): IgxSummaryResult[] {
+        const result = super.operate(summaries);
+        if (field && field === 'UnitsInStock') {
+            result.push({
+                key: 'test',
+                label: 'Items InStock',
+                summaryResult: allData.filter((rec) => rec.InStock).length
+            });
+        }
+        return result;
+    }
+}
+
 @Component({
     template: `
         <igx-grid #grid1 [data]="data" [primaryKey]="'ProductID'" [allowFiltering]="true">
@@ -2466,6 +2515,7 @@ export class CustomSummariesComponent {
     public dealsSummary = DealsSummary;
     public dealsSummaryMinMax = DealsSummaryMinMax;
     public earliest = EarliestSummary;
+    public inStockSummary = InStockSummary;
 }
 
 @Component({
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts
@@ -107,9 +107,8 @@ export class IgxGridSummaryService {
         if (!this.hasSummarizedColumns || !data) {return rowSummaries; }
         this.grid.columnList.filter(col => col.hasSummary).forEach((column) => {
             if (!rowSummaries.get(column.field)) {
-                const columnValues = data.map(record => record[column.field]);
                 rowSummaries.set(column.field,
-                    column.summaries.operate(columnValues));
+                    column.summaries.operate(data.map(r => r[column.field]), data, column.field));
             }
         });
         return rowSummaries;
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.ts
@@ -45,7 +45,7 @@ export class IgxSummaryOperand {
      *   constructor() {
      *     super();
      *   }
-     *   public operate(data?: any[]): IgxSummaryResult[] {
+     *   public operate(data: any[], allData: any[], fieldName: string): IgxSummaryResult[] {
      *     const result = [];
      *     result.push({
      *       key: "test",
@@ -59,7 +59,7 @@ export class IgxSummaryOperand {
      * ```
      * @memberof IgxSummaryOperand
      */
-    public operate(data: any[] = []): IgxSummaryResult[] {
+    public operate(data: any[] = [], allData: any[] = [], fieldName?: string): IgxSummaryResult[] {
         return [{
             key: 'count',
             label: 'Count',
@@ -129,7 +129,7 @@ export class IgxNumberSummaryOperand extends IgxSummaryOperand {
      *   constructor() {
      *     super();
      *   }
-     *   public operate(data?: any[]): IgxSummaryResult[] {
+     *   public operate(data: any[], allData: any[], fieldName: string): IgxSummaryResult[] {
      *     const result = [];
      *     result.push({
      *       key: "avg",
@@ -148,8 +148,8 @@ export class IgxNumberSummaryOperand extends IgxSummaryOperand {
      * ```
      * @memberof IgxNumberSummaryOperand
      */
-    public operate(data: any[] = []): IgxSummaryResult[] {
-        const result = super.operate(data);
+    public operate(data: any[] = [], allData: any[] = [], fieldName?: string): IgxSummaryResult[] {
+        const result = super.operate(data, allData, fieldName);
         result.push({
             key: 'min',
             label: 'Min',
@@ -215,7 +215,7 @@ export class IgxDateSummaryOperand extends IgxSummaryOperand {
      *   constructor() {
      *     super();
      *   }
-     *   public operate(data?: any[]): IgxSummaryResult[] {
+     *   public operate(data: any[], allData: any[], fieldName: string): IgxSummaryResult[] {
      *     const result = [];
      *     result.push({
      *       key: "latest",
@@ -229,8 +229,8 @@ export class IgxDateSummaryOperand extends IgxSummaryOperand {
      * ```
      * @memberof IgxDateSummaryOperand
      */
-    public operate(data: any[] = []): IgxSummaryResult[] {
-        const result = super.operate(data);
+    public operate(data: any[] = [], allData: any[] = [], fieldName?: string): IgxSummaryResult[] {
+        const result = super.operate(data, allData, fieldName);
         result.push({
             key: 'earliest',
             label: 'Earliest',
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts
@@ -1609,6 +1609,44 @@ describe('IgxTreeGrid - Summaries #tGrid', () => {
         verifySummaryForRow847(fix, 6);
     }));
 
+    it('should be able to access alldata from each summary', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxTreeGridCustomSummariesComponent);
+        fix.detectChanges();
+        const treeGrid = fix.componentInstance.treeGrid;
+
+        treeGrid.expandAll();
+        fix.detectChanges();
+
+        let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 6);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count'], ['2']);
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 7);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count'], ['3']);
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 0);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count'], ['4']);
+
+        treeGrid.getColumnByName('Name').summaries = fix.componentInstance.ptoSummary;
+        tick();
+        fix.detectChanges();
+
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 6);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'People on PTO'], ['2', '1']);
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 7);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'People on PTO'], ['3', '1']);
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 0);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'People on PTO'], ['4', '0']);
+
+        treeGrid.getCellByColumn(5, 'OnPTO').update(true);
+        tick();
+        fix.detectChanges();
+
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 6);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'People on PTO'], ['2', '2']);
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 7);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'People on PTO'], ['3', '1']);
+        summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 0);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'People on PTO'], ['4', '0']);
+    }));
+
     it('should render rows correctly after collapse and expand', async () => {
         const fix = TestBed.createComponent(IgxTreeGridSummariesScrollingComponent);
         const treeGrid = fix.componentInstance.treeGrid;
diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component';
 import { SampleTestData } from './sample-test-data.spec';
-import { IgxNumberSummaryOperand, IgxSummaryResult } from '../grids';
+import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids';
 import { IgxGridTransaction } from '../grids/grid-base.component';
 import { IgxTransactionService } from '../services/transaction/igx-transaction';
 import { IgxHierarchicalTransactionService } from '../services/transaction/igx-hierarchical-transaction';
@@ -400,6 +400,24 @@ class AgeSummaryTest extends IgxNumberSummaryOperand {
     }
 }
 
+class PTOSummary extends IgxSummaryOperand {
+    constructor() {
+        super();
+    }
+
+    public operate(summaries?: any[], allData = [], field?): IgxSummaryResult[] {
+        const result = super.operate(summaries);
+        if (field && field === 'Name') {
+            result.push({
+                key: 'test',
+                label: 'People on PTO',
+                summaryResult: allData.filter((rec) => rec.OnPTO).length
+            });
+        }
+        return result;
+    }
+}
+
 @Component({
     template: `
     <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [rowEditable]="true" width="900px" height="600px">
@@ -433,6 +451,7 @@ export class IgxTreeGridCustomSummariesComponent {
     public data = SampleTestData.employeeTreeData();
     public ageSummary = AgeSummary;
     public ageSummaryTest = AgeSummaryTest;
+    public ptoSummary = PTOSummary;
 }
 
 @Component({
diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html
@@ -4,7 +4,7 @@
     <div class="density-chooser" style="margin-bottom: 16px">
             <igx-buttongroup [values]="summaryModes" (onSelect)="selectSummaryMode($event)" style="display: block; width: 500px"></igx-buttongroup>
         </div>
-    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [cellSelection]="'single'" [width]="'1200px'" (onGroupingDone)="onGroupingDoneHandler($event)" [hideGroupedColumns]="hideGroupedColumns" [(groupingExpressions)]='groupingExpressions'
+    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [cellSelection]="'single'" [width]="'1200px'" [hideGroupedColumns]="hideGroupedColumns"
     [height]="'700px'" [(groupingExpansionState)]='expState' [rowSelectable]='true'  [summaryCalculationMode]="summaryMode">
         <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width"
             [hidden]='c.hidden' [sortable]='true' [groupable]='c.groupable' [movable]='true' [pinned]='!!c.pinned' [editable]="true" [hasSummary]="true" [dataType]='c.dataType'>
diff --git a/src/app/grid-summaries/grid-summaries.sample.html b/src/app/grid-summaries/grid-summaries.sample.html
@@ -1,5 +1,5 @@
 <igx-grid #grid1 [data]="data" [autoGenerate]="false" [displayDensity]="'compact'" [width]="w" [height]="h"
-    [paging]="false" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
+    [paging]="false" [allowFiltering]='true' [filterMode]="'excelStyleFilter'" [summaryCalculationMode]="'rootAndChildLevels'">
     <igx-column field="Index" header="Index" [width]="cw">
     </igx-column>
     <igx-column field="ProductID" header="Product ID" [width]="cw" [headerClasses]="'prodId'" [groupable]="groupable">
@@ -9,30 +9,26 @@
     </igx-column>
     <igx-column field="ReorderLevel" [width]="cw" [sortable]="true" [groupable]="groupable" [filterable]="filterable"
         editable="true" [dataType]="'number'" [disableHiding]="disableHiding" [disablePinning]="disablePinning">
-        <ng-template igxCell let-cell="cell" let-val let-row>
-            {{val}} {{row.gridID}}
-        </ng-template>
     </igx-column>
     <igx-column field="QuantityPerUnit" [width]="cw" header="QuantityPerUnit" [sortable]="true" [dataType]="'string'"
         [editable]="true">
     </igx-column>
-    <igx-column field="UnitsInStock" header="UnitsInStock" [width]="cw" [dataType]="'number'" [summaries]="mySummary"
+    <igx-column field="UnitsInStock" header="UnitsInStock" [width]="cw" [dataType]="'number'"
         [hasSummary]="hasSummaryUnit" [hidden]="hasHidden" editable="true" [sortable]="true">
         <ng-template igxCell let-cell="cell" let-val let-row>
             ${{val}}
         </ng-template>
     </igx-column>
     <igx-column field="OrderDate" [width]="cw" [dataType]="'date'" [hasSummary]="false" [sortable]="true">
-        <ng-template igxCell let-cell="cell" let-val let-row>
-            {{val}}
-        </ng-template>
     </igx-column>
     <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [width]="cw" [hasSummary]="false"
         editable="true">
         <ng-template igxCell let-cell="cell" let-val>
             {{val}}
         </ng-template>
     </igx-column>
+    <igx-column field="Sum" [hasSummary]="true" [summaries]="mySummary">
+    </igx-column>
 </igx-grid>
 
 <div class="properties-input">
diff --git a/src/app/grid-summaries/grid-summaries.sample.ts b/src/app/grid-summaries/grid-summaries.sample.ts
@@ -14,14 +14,14 @@ class MySummary extends IgxNumberSummaryOperand {
         super();
     }
 
-    operate(data?: any[]): IgxSummaryResult[] {
-        const result = super.operate(data);
-        result.push({
-            key: 'test',
-            label: 'Test',
-            summaryResult: data.filter((rec) => rec > 10 && rec < 30).length
-        });
-
+    operate(data: any[], allData = [], fieldName?): IgxSummaryResult[] {
+        fieldName = fieldName === 'Sum' ? 'ReorderLevel' : fieldName;
+        const result = super.operate(allData.map(r => r[fieldName]));
+            result.push({
+                key: 'test',
+                label: 'Total Discounted',
+                summaryResult: allData.filter((rec) => rec.Discontinued).length
+            });
         return result;
     }
 }
