Initial commit with chip areas for row/columns dimensions and values.

MKirova · MKirova · commit 43cadd06e2b9 · 2021-10-27T18:41:19.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -2,7 +2,7 @@
 <ng-content select="igx-grid-toolbar"></ng-content>
 
 <!-- Grid table head row area -->
-<igx-pivot-header-row class="igx-grid-thead" tabindex="0"
+<igx-pivot-header-row class="igx-grid-thead" tabindex="0"  style='flex-direction: column;'
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
     [density]="displayDensity"
@@ -32,8 +32,8 @@
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
-        | pivotGridRow:pivotConfiguration.rows:expansionStates:pivotConfiguration.values
-        | pivotGridColumn:pivotConfiguration.columns:pivotConfiguration.values"
+        | pivotGridRow:pivotConfiguration.rows:expansionStates:pivotConfiguration.values:pipeTrigger
+        | pivotGridColumn:pivotConfiguration.columns:pivotConfiguration.values:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -201,10 +201,22 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     public get pivotRowWidths() {
-        const rowDimCount = this.pivotConfiguration.rows.length;
+        const rowDimCount = this.rowDimensions.length;
         return MINIMUM_COLUMN_WIDTH * rowDimCount;
     }
 
+    public get rowDimensions() {
+        return this.pivotConfiguration.rows.filter(x => x.enabled);
+    }
+
+    public get columnDimensions() {
+        return this.pivotConfiguration.columns.filter(x => x.enabled);
+    }
+
+    public get values() {
+        return this.pivotConfiguration.values.filter(x => x.enabled);
+    }
+
    public toggleColumn(col: IgxColumnComponent) {
        const state = this.columnGroupStates.get(col.field);
        const newState = !state;
@@ -261,7 +273,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     protected get hasMultipleValues() {
-        return this.pivotConfiguration.values.length > 1;
+        return this.values.length > 1;
     }
 
     /**
@@ -271,7 +283,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const data = this.gridAPI.get_data();
         const fieldsMap = PivotUtil.getFieldsHierarchy(
             data,
-            this.pivotConfiguration.columns,
+            this.columnDimensions,
             PivotDimensionType.Column,
             {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
             );
@@ -343,7 +355,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     protected getMeasureChildren(colFactory, data, parent, hidden) {
         const cols = [];
-        this.pivotConfiguration.values.forEach(val => {
+        this.values.forEach(val => {
             const ref = colFactory.create(this.viewRef.injector);
             ref.instance.header = val.member;
             ref.instance.field = parent.field + '-' + val.member;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
@@ -22,12 +22,14 @@ export class IgxPivotRowPipe implements PipeTransform {
         rows: IPivotDimension[],
         expansionStates: Map<any, boolean>,
         values?: IPivotValue[],
+        _pipeTrigger?: number,
         pivotKeys: IPivotKeys =
             { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
         let hierarchies;
         let data;
-        for (const row of rows) {
+        const enabledRows = rows.filter(x => x.enabled);
+        for (const row of enabledRows) {
             if (!data) {
                 // build hierarchies - groups and subgroups
                 hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
@@ -77,17 +79,20 @@ export class IgxPivotColumnPipe implements PipeTransform {
         collection: any,
         columns: IPivotDimension[],
         values?: IPivotValue[],
+        _pipeTrigger?: number,
         pivotKeys: IPivotKeys =
             { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
     ): any[] {
         // build hierarchies - groups and subgroups by columns
         const result = [];
+        const enabledColumns = columns.filter(x => x.enabled);
+        const enabledValues = values.filter(x => x.enabled);
         collection.forEach(hierarchy => {
             // apply aggregations based on the created groups and generate column fields based on the hierarchies
-            this.groupColumns(hierarchy, columns, values, pivotKeys);
+            this.groupColumns(hierarchy, enabledColumns, enabledValues, pivotKeys);
             if (hierarchy[pivotKeys.children]) {
                 let flatCols = {};
-                PivotUtil.flattenColumnHierarchy(hierarchy[pivotKeys.children], values, pivotKeys).forEach(o => {
+                PivotUtil.flattenColumnHierarchy(hierarchy[pivotKeys.children], enabledValues, pivotKeys).forEach(o => {
                     delete o[pivotKeys.records];
                     flatCols = { ...flatCols, ...o };
                 });
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
@@ -1,13 +1,53 @@
+<div class="igx-grid-thead__wrapper" role="row" [style.width.px]="width" *ngIf="!row" >
+    <div class="igx-grid__tr" role="row" [style.width.px]="width">
+        <span #pivotFilterContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths" 
+        (pointerdown)="$event.preventDefault()">
+              <!-- Filter area -->
+              <igx-chips-area>
+                <igx-chip *ngFor="let filter of grid.pivotConfiguration.filters" [id]="filter.fieldName" [removable]="true">
+                    <igx-icon igxPrefix>filter_list</igx-icon>
+                    {{filter.fieldName}}
+                </igx-chip>
+            </igx-chips-area>
+        </span>
+        <div #pivotValueContainer [style.min-width.px] = "grid.unpinnedWidth" 
+        (pointerdown)="$event.preventDefault()">
+
+        <!-- Columns area -->
+        <igx-chips-area (reorder)="columnsOrderChanged($event)">
+            <igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName" [removable]="true" (remove)="columnRemoved($event)">
+                <igx-icon igxPrefix>view_column</igx-icon>
+                <igx-icon igxPrefix>filter_list</igx-icon>
+                {{col.fieldName}}
+            </igx-chip>
+        </igx-chips-area>
+
+         <!-- Value area -->
+         <igx-chips-area>
+            <igx-chip *ngFor="let value of grid.values" [draggable]="'true'" [id]="value.member" [removable]="true" (remove)="valueRemoved($event)">
+                <igx-icon igxPrefix>functions</igx-icon>
+                {{value.member}}
+            </igx-chip>
+        </igx-chips-area>
+        </div>
+    </div>
+</div>
 <div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
     [attr.aria-activedescendant]="activeDescendant" [class.igx-grid__tr--mrl]="hasMRL">
-
     <!-- Column headers area -->
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
 
         <ng-container *ngIf="!row">
             <div #pivotContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths" 
-                (pointerdown)="$event.preventDefault()">
-                
+                (pointerdown)="$event.preventDefault()" style='display: flex; align-items: flex-end;'>
+                 <!-- Row area -->
+                 <igx-chips-area (reorder)="rowsOrderChanged($event)">
+                    <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName" [removable]="true" (remove)="rowRemoved($event)">
+                        <igx-icon igxPrefix>table_rows</igx-icon>
+                        <igx-icon igxPrefix>filter_list</igx-icon>
+                        {{ row.fieldName}}
+                    </igx-chip>
+                </igx-chips-area>
             </div>
         </ng-container>
 
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts
@@ -3,6 +3,8 @@ import {
     Component,
     Input
 } from '@angular/core';
+import { IBaseChipEventArgs } from '../../chips/chip.component';
+import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { IgxPivotRowComponent } from './pivot-row.component';
 
@@ -31,4 +33,44 @@ export interface IgxGridRowSelectorsTemplateContext {
 export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     @Input()
     public row: IgxPivotRowComponent;
+
+    public columnsOrderChanged(event: IChipsAreaReorderEventArgs) {
+        const newOrder = [];
+        for (const chip of event.chipsArray) {
+            const chipItem = this.grid.pivotConfiguration.columns.filter((item) => item.fieldName === chip.id)[0];
+            newOrder.push(chipItem);
+        }
+        this.grid.pivotConfiguration.columns = newOrder;
+        this.grid.setupColumns();
+        this.grid.pipeTrigger++;
+    }
+
+    public rowsOrderChanged(event: IChipsAreaReorderEventArgs) {
+        const newOrder = [];
+        for (const chip of event.chipsArray) {
+            const chipItem = this.grid.pivotConfiguration.rows.filter((item) => item.fieldName === chip.id)[0];
+            newOrder.push(chipItem);
+        }
+        this.grid.pivotConfiguration.rows = newOrder;
+    }
+
+    public rowRemoved(event: IBaseChipEventArgs) {
+        const row = this.grid.pivotConfiguration.rows.find(x => x.fieldName === event.owner.id);
+        row.enabled = false;
+        this.grid.pipeTrigger++;
+    }
+
+    public columnRemoved(event: IBaseChipEventArgs) {
+        const col = this.grid.pivotConfiguration.columns.find(x => x.fieldName === event.owner.id);
+        col.enabled = false;
+        this.grid.setupColumns();
+        this.grid.pipeTrigger++;
+    }
+
+    public valueRemoved(event: IBaseChipEventArgs) {
+        const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id);
+        value.enabled = false;
+        this.grid.setupColumns();
+        this.grid.pipeTrigger++;
+    }
 }
diff --git a/src/app/pivot-grid/pivot-grid.sample.scss b/src/app/pivot-grid/pivot-grid.sample.scss
@@ -14,8 +14,4 @@
     .downFont1 {
         color:yellow;
     }
-
-    .sample-column {
-        max-width: 900px;
-    }
 }
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxNumberSummaryOperand, IgxPivotGridComponent, IPivotConfiguration } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, IgxNumberSummaryOperand, IgxPivotGridComponent, IPivotConfiguration } from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
 @Component({
@@ -46,15 +46,23 @@ export class PivotGridSampleComponent {
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [
 
+            {
+                member: 'Country',
+                fieldName: 'Country',
+                enabled: true,
+                childLevels: []
+            },
             {
                 member: 'ProductCategory',
+                fieldName: 'ProductCategory',
                 enabled: true,
                 childLevels: []
             }
         ],
         rows: [
             {
                 member: () => 'AllProd',
+                fieldName: 'ProductCategory',
                 enabled: true,
                 childLevels: [{
                     member: 'ProductCategory',
@@ -65,6 +73,7 @@ export class PivotGridSampleComponent {
             {
                 member: () => 'AllDate',
                 enabled: true,
+                fieldName: 'Date',
                 childLevels: [{
                     member: 'Date',
                     enabled: true,
@@ -73,6 +82,7 @@ export class PivotGridSampleComponent {
             },
             {
                 member: () => 'AllSale',
+                fieldName: 'SellerName',
                 enabled: true,
                 childLevels: [{
                     member: 'SellerName',

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,4 @@`
`14`	`14`	`.downFont1 {`
`15`	`15`	`color:yellow;`
`16`	`16`	`}`
`17`		`-`
`18`		`- .sample-column {`
`19`		`- max-width: 900px;`
`20`		`- }`
`21`	`17`	`}`