Skip to content

Commit 69fbefb

Browse files
skrustevskrustev
committed
feat(pivot): Add toggles for various new pivotUI configurations.
1 parent ca63ecf commit 69fbefb

File tree

4 files changed

+132
-87
lines changed

4 files changed

+132
-87
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
44
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
55
import { NgModule } from '@angular/core';
66
import { FormsModule } from '@angular/forms';
7-
import { IgxCheckboxModule, IgxIconModule, IgxPivotGridModule } from 'igniteui-angular';
7+
import { IgxCheckboxModule, IgxIconModule, IgxPivotGridModule, IgxSwitchModule } from 'igniteui-angular';
88
import { PivotExportComponent } from './pivot-export/pivot-export.component';
99
import { PivotFeaturesComponent } from './pivot-features/pivot-features.component';
1010
import { PivotGridBasicSampleComponent } from './pivot-basic-sample/pivot-grid-basic-sample.component';
@@ -31,5 +31,6 @@ import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component'
3131
PivotGridsRoutingModule,
3232
IgxPivotGridModule,
3333
IgxCheckboxModule,
34+
IgxSwitchModule,
3435
IgxIconModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
3536
export class PivotGridsModule { }

‎src/app/pivot-grid/pivot-layout/pivot-layout.component.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
<div class="switches">
2+
<igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowRowHeaders($event)">Show row headers</igx-switch>
3+
<igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
4+
<igx-switch [checked]="pivotConfig.rows[0].horizontalSummary" (change)="onSummariesToggle($event)">Horizontal summaries</igx-switch>
5+
<igx-switch [checked]="pivotUI.horizontalSummariesPosition === 'top'" (change)="onSummariesPositionToggle($event)">Horizontal summaries position</igx-switch>
6+
</div>
17
<div class="pivot-container">
2-
<igx-pivot-grid #grid1 [data]="data" [height]="'850px'" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
8+
<igx-pivot-grid #grid1 [data]="data" [height]="'800px'" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
39
[superCompactMode]="true" [defaultExpandState]='true' [pivotUI]="pivotUI">
410
</igx-pivot-grid>
5-
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
611
</div>

‎src/app/pivot-grid/pivot-layout/pivot-layout.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,11 @@ igx-pivot-data-selector {
3434
flex: 1 1 auto;
3535
order: 0;
3636
}
37+
38+
.switches {
39+
margin-top: 12px;
40+
margin-bottom: 8px;
41+
width: 100%;
42+
display: flex;
43+
gap: 15px;
44+
}

‎src/app/pivot-grid/pivot-layout/pivot-layout.component.ts‎

Lines changed: 115 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Component } from "@angular/core";
1+
import { Component, ViewChild } from "@angular/core";
22

33
import {
44
IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate,
55
IgxPivotDateDimension, FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand,
66
PivotRowLayoutType,
7-
IPivotUISettings
7+
IPivotUISettings,
8+
IChangeCheckboxEventArgs,
9+
IgxPivotGridComponent,
10+
PivotSummaryPosition
811
} from "igniteui-angular"
912
import { SALES_DATA } from "../../data/dataToAnalyze";
1013

@@ -42,95 +45,123 @@ export class IgxTotalSaleAggregate {
4245
})
4346
export class PivotGridLayoutComponent {
4447
public data = SALES_DATA;
48+
public enableSummaries = true;
4549
public pivotUI: IPivotUISettings = { showRowHeaders: true, rowLayout: PivotRowLayoutType.Horizontal };
4650

47-
public pivotConfig: IPivotConfiguration = {
48-
columns: [
49-
new IgxPivotDateDimension(
50-
{
51-
memberName: 'Date',
52-
enabled: true
53-
},
51+
@ViewChild("grid1")
52+
public grid1: IgxPivotGridComponent;
53+
54+
public pivotConfig = this.buildPivotConfig();
55+
56+
public buildPivotConfig(): IPivotConfiguration {
57+
return {
58+
columns: [
59+
new IgxPivotDateDimension(
60+
{
61+
memberName: 'Date',
62+
enabled: true
63+
},
64+
{
65+
months: false,
66+
quarters: true,
67+
fullDate: false
68+
}
69+
)
70+
],
71+
rows: [
5472
{
55-
months: false,
56-
quarters: true,
57-
fullDate: false
58-
}
59-
)
60-
],
61-
rows: [
62-
{
63-
memberFunction: () => 'All Products',
64-
memberName: 'AllProducts',
65-
enabled: true,
66-
horizontalSummary: true,
67-
width: "150px",
68-
childLevel: {
69-
memberFunction: (data) => data.Product.Name,
70-
memberName: 'ProductCategory',
71-
horizontalSummary: true,
72-
width: "150px",
73+
memberFunction: () => 'All Products',
74+
memberName: 'AllProducts',
7375
enabled: true,
76+
horizontalSummary: this.enableSummaries,
77+
width: "150px",
7478
childLevel: {
75-
memberName: 'City',
79+
memberFunction: (data) => data.Product.Name,
80+
memberName: 'ProductCategory',
81+
horizontalSummary: this.enableSummaries,
7682
width: "150px",
77-
memberFunction: (data) => data.Seller.City,
78-
enabled: true
83+
enabled: true,
84+
childLevel: {
85+
memberName: 'City',
86+
width: "150px",
87+
memberFunction: (data) => data.Seller.City,
88+
enabled: true
89+
}
7990
}
8091
}
81-
}
82-
],
83-
values: [
84-
{
85-
member: 'Value',
86-
aggregate: {
87-
key: 'SUM',
88-
aggregator: IgxPivotNumericAggregate.sum,
89-
label: 'Sum'
90-
},
91-
aggregateList: [{
92-
key: 'SUM',
93-
aggregator: IgxPivotNumericAggregate.sum,
94-
label: 'Sum'
95-
}],
96-
enabled: true,
97-
styles: {
98-
downFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150,
99-
upFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
100-
},
101-
formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
102-
},
103-
{
104-
member: 'AmountofSale',
105-
displayName: 'Amount of Sale',
106-
aggregate: {
107-
key: 'SUM',
108-
aggregator: IgxTotalSaleAggregate.totalSale,
109-
label: 'Sum of Sale'
92+
],
93+
values: [
94+
{
95+
member: 'Value',
96+
aggregate: {
97+
key: 'SUM',
98+
aggregator: IgxPivotNumericAggregate.sum,
99+
label: 'Sum'
100+
},
101+
aggregateList: [{
102+
key: 'SUM',
103+
aggregator: IgxPivotNumericAggregate.sum,
104+
label: 'Sum'
105+
}],
106+
enabled: true,
107+
styles: {
108+
downFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150,
109+
upFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
110+
},
111+
formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
110112
},
111-
aggregateList: [{
112-
key: 'SUM',
113-
aggregator: IgxTotalSaleAggregate.totalSale,
114-
label: 'Sum of Sale'
115-
}, {
116-
key: 'MIN',
117-
aggregator: IgxTotalSaleAggregate.totalMin,
118-
label: 'Minimum of Sale'
119-
}, {
120-
key: 'MAX',
121-
aggregator: IgxTotalSaleAggregate.totalMax,
122-
label: 'Maximum of Sale'
123-
}],
124-
enabled: true,
125-
dataType: 'currency'
126-
}
127-
],
128-
filters: [
129-
{
130-
memberName: 'SellerName',
131-
memberFunction: (data) => data.Seller.Name,
132-
enabled: true
133-
}
134-
]
135-
};
113+
{
114+
member: 'AmountofSale',
115+
displayName: 'Amount of Sale',
116+
aggregate: {
117+
key: 'SUM',
118+
aggregator: IgxTotalSaleAggregate.totalSale,
119+
label: 'Sum of Sale'
120+
},
121+
aggregateList: [{
122+
key: 'SUM',
123+
aggregator: IgxTotalSaleAggregate.totalSale,
124+
label: 'Sum of Sale'
125+
}, {
126+
key: 'MIN',
127+
aggregator: IgxTotalSaleAggregate.totalMin,
128+
label: 'Minimum of Sale'
129+
}, {
130+
key: 'MAX',
131+
aggregator: IgxTotalSaleAggregate.totalMax,
132+
label: 'Maximum of Sale'
133+
}],
134+
enabled: true,
135+
dataType: 'currency'
136+
}
137+
],
138+
filters: [
139+
{
140+
memberName: 'SellerName',
141+
memberFunction: (data) => data.Seller.Name,
142+
enabled: true
143+
}
144+
]
145+
};
146+
}
147+
148+
public onShowRowHeaders(event: IChangeCheckboxEventArgs) {
149+
this.pivotUI.showRowHeaders = event.checked;
150+
this.grid1.pivotUI = this.pivotUI;
151+
}
152+
153+
public onLayoutToggle(event: IChangeCheckboxEventArgs) {
154+
this.pivotUI.rowLayout = event.checked ? PivotRowLayoutType.Horizontal : PivotRowLayoutType.Vertical;
155+
this.grid1.pivotUI = this.pivotUI;
156+
}
157+
158+
public onSummariesToggle(event: IChangeCheckboxEventArgs) {
159+
this.enableSummaries = event.checked;
160+
this.grid1.pivotConfiguration = this.buildPivotConfig();
161+
}
162+
163+
public onSummariesPositionToggle(event: IChangeCheckboxEventArgs) {
164+
this.pivotUI.horizontalSummariesPosition = event.checked ? PivotSummaryPosition.Top : PivotSummaryPosition.Bottom ;
165+
this.grid1.pivotUI = this.pivotUI;
166+
}
136167
}

0 commit comments

Comments
 (0)