Skip to content

Commit 56a8291

Browse files
dkamburovdkamburov
authored
Merge pull request #10658 from IgniteUI/dkamburov/pivot-config-ui
Expose showPivotConfigurationUI prop to hide pivot chips UI
2 parents 5cca70a + e3869f0 commit 56a8291

File tree

5 files changed

+149
-16
lines changed

5 files changed

+149
-16
lines changed

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 13.1.0
6+
7+
### New Features
8+
- Added `IgxPivotGrid` component(Preview)
9+
- The igxPivotGrid is a data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data. Main purpose is to transform and display a flat array of data into a complex grouped structure with aggregated values based on the main 3 dimensions: rows, columns and values, which the user may specify depending on his/her business needs. The whole pivot grid configuration is set through `IPivotConfiguration` interface.
10+
11+
```html
12+
<igx-pivot-grid [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
13+
</igx-pivot-grid>
14+
```
15+
16+
- For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/pivot-grid/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/igxPivotGrid-Specification) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid).
17+
518
## 13.0.0
619

720
### New Features

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -619,6 +619,7 @@ export interface HierarchicalGridType extends GridType {
619619

620620
export interface PivotGridType extends GridType {
621621
pivotConfiguration: IPivotConfiguration;
622+
showPivotConfigurationUI: boolean;
622623
columnDimensions: IPivotDimension[];
623624
rowDimensions: IPivotDimension[];
624625
values: IPivotValue[];

‎projects/igniteui-angular/src/lib/grids/pivot-grid/README.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# igx-pivot-grid
2+
**igx-pivot-grid** is a data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data. Main purpose is to transform and display a flat array of data into a complex grouped structure with aggregated values based on the main 3 dimensions: rows, columns and values, which the user may specify depending on his/her business needs.
3+
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid)
4+
5+
## Usage
6+
```html
7+
<igx-pivot-grid [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
8+
</igx-pivot-grid>
9+
```
10+
11+
## Getting Started
12+
13+
### Dependencies
14+
The grid is exported as as an `NgModule`, thus all you need to do in your application is to import the _IgxPivotGridModule_ inside your `AppModule`
15+
16+
```typescript
17+
// app.module.ts
18+
19+
import { IgxPivotGridModule } from 'igniteui-angular';
20+
21+
@NgModule({
22+
imports: [
23+
...
24+
IgxPivotGridModule,
25+
...
26+
]
27+
})
28+
export class AppModule {}
29+
```
30+
31+
Each of the components, directives and helper classes in the _IgxPivotGridModule_ can be imported through _igniteui-angular_. While you don't need to import all of them to instantiate and use the pivot-grid, you usually will import them (or your editor will auto-import them for you) when declaring types that are part of the grid API.
32+
33+
```typescript
34+
import { IgxPivotGridComponent } from 'igniteui-angular';
35+
...
36+
37+
@ViewChild('myGrid', { read: IgxPivotGridComponent })
38+
public grid: IgxPivotGridComponent;
39+
```
40+
41+
### Basic configuration
42+
43+
Define the grid
44+
```html
45+
<igx-pivot-grid [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
46+
</igx-pivot-grid>
47+
```
48+
49+
```typescript
50+
public pivotConfigHierarchy: IPivotConfiguration = {
51+
columns: [{
52+
memberName: 'Product',
53+
memberFunction: (data) => data.Product.Name,
54+
enabled: true
55+
}],
56+
rows: [{
57+
memberName: 'City',
58+
enabled: true
59+
}],
60+
values: [{
61+
member: 'NumberOfUnits',
62+
aggregate: {
63+
aggregator: IgxPivotNumericAggregate.sum,
64+
key: 'sum',
65+
label: 'Sum'
66+
},
67+
enabled: true
68+
}],
69+
filters: null
70+
};
71+
```
72+
73+
## API
74+
75+
### Inputs
76+
77+
Below is the list of all inputs that are specific to the pivot-grid look/behavior:
78+
79+
|Name|Type|Description|
80+
|--- |--- |--- |
81+
|`pivotConfiguration`|IPivotConfiguration|Gets/Sets the pivot configuration with all related dimensions and values.|
82+
|`showPivotConfigurationUI`|boolean|Gets/Sets the pivot configuration ui for the pivot grid - chips and their corresponding containers for row, filter, column dimensions and values|
83+
|`defaultExpandState`| boolean | Gets/Sets the default expand state for all rows. |
84+
85+
Note that the pivot-grid extends base igx-grid, so most of the @Input properties make sense and work in the pivot-grid as well. Keep in mind that due to some specifics, not all grid features and @Input properties will work.
86+
87+
### Outputs
88+
89+
A list of the specific events emitted by the **igx-pivot-grid**:
90+
91+
|Name|Description|
92+
|--- |--- |
93+
|_Event emitters_|_Notify for a change_|
94+
|`dimensionsChange`|Emitted when the dimension collection is changed via the grid chip area.|
95+
|`valuesChange`|Emitted when the values collection is changed via the grid chip area.|
96+
97+
98+
Defining handlers for these event emitters is done using declarative event binding:
99+
100+
```html
101+
<igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)'>
102+
</igx-pivot-grid>
103+
```
104+
105+
### Methods

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
130130
*/
131131
public pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
132132

133+
@Input()
134+
/**
135+
* Gets/Sets the pivot configuration ui for the pivot grid - chips and their
136+
* corresponding containers for row, filter, column dimensions and values
137+
*
138+
* @example
139+
* ```html
140+
* <igx-pivot-grid [showPivotConfigurationUI]="false"></igx-pivot-grid>
141+
* ```
142+
*/
143+
public showPivotConfigurationUI: boolean = true;
144+
133145
/**
134146
* @hidden @internal
135147
*/

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot" role="row" [style.width.px]="width">
22
<div class="igx-grid__tr" role="row" [style.width.px]="width">
3-
<div #pivotFilterContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1" [style.max-width.px]="grid.pivotRowWidths - 1"
3+
<div #pivotFilterContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1" [style.max-width.px]="grid.pivotRowWidths - 1"
44
(igxDragEnter)="onAreaDragEnter($event, filterArea, 2)" (igxDragLeave)="onAreaDragLeave($event, filterArea)"
55
igxDrop (dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
66

@@ -21,7 +21,7 @@
2121
</div>
2222

2323
<div class="igx-grid__tr-pivot-group">
24-
<div #pivotColumnContainer class="igx-grid__tr-pivot" (dropped)="onDimDrop($event, colArea, 1)" igxDrop
24+
<div #pivotColumnContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot" (dropped)="onDimDrop($event, colArea, 1)" igxDrop
2525
(igxDragEnter)="onAreaDragEnter($event, colArea, 1)" (igxDragLeave)="onAreaDragLeave($event, colArea)">
2626

2727
<span *ngIf="grid.columnDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
@@ -44,7 +44,7 @@
4444
</igx-chips-area>
4545
</div>
4646

47-
<div #pivotValueContainer class="igx-grid__tr-pivot" (pointerdown)="$event.preventDefault()"
47+
<div #pivotValueContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot" (pointerdown)="$event.preventDefault()"
4848
(dropped)="onValueDrop($event, valueArea)" igxDrop
4949
(igxDragEnter)="onAreaDragEnter($event, valueArea)"
5050
(igxDragLeave)="onAreaDragLeave($event, valueArea)">
@@ -81,22 +81,24 @@
8181
(igxDragEnter)="onAreaDragEnter($event, rowArea, 0)" (igxDragLeave)="onAreaDragLeave($event, rowArea)"
8282
igxDrop (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()">
8383

84-
<span *ngIf="grid.rowDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
84+
<span *ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI" class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
8585

8686
<!-- Row area -->
8787
<igx-chips-area #rowArea droppable='true'>
88-
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
89-
[displayDensity]="grid.displayDensity"
90-
[removable]="true" (remove)="rowRemoved($event)"
91-
(dragLeave)="onDimDragLeave($event)"
92-
(dragDrop)="onDimDrop($event, rowArea, 0)"
93-
(dragOver)="onDimDragOver($event, 0)"
94-
(click)="onChipSort($event, row, 0)">
95-
<igx-icon igxPrefix>table_rows</igx-icon>
96-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
97-
{{ row.memberName}}
98-
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
99-
</igx-chip>
88+
<ng-container *ngIf="grid.showPivotConfigurationUI">
89+
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
90+
[displayDensity]="grid.displayDensity"
91+
[removable]="true" (remove)="rowRemoved($event)"
92+
(dragLeave)="onDimDragLeave($event)"
93+
(dragDrop)="onDimDrop($event, rowArea, 0)"
94+
(dragOver)="onDimDragOver($event, 0)"
95+
(click)="onChipSort($event, row, 0)">
96+
<igx-icon igxPrefix>table_rows</igx-icon>
97+
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
98+
{{ row.memberName}}
99+
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
100+
</igx-chip>
101+
</ng-container>
100102
</igx-chips-area>
101103
</div>
102104

0 commit comments

Comments
 (0)