Skip to content

Commit 62dc19d

Browse files
tishko0MKirova
tishko0
authored and
MKirova
committed
docs(pivotGrid): added layout sample
1 parent b0bf394 commit 62dc19d

6 files changed

Lines changed: 186 additions & 2 deletions

File tree

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ export const pivotGridsRoutesData = {
77
'pivot-grid-features': { displayName: 'Pivot Grid With Features', parentName: 'Pivot Grid' },
88
'pivot-grid-state-persistence': { displayName: 'Pivot Grid With State Persistence', parentName: 'Pivot Grid' },
99
'pivot-grid-noop-persistence': { displayName: 'Pivot Noop Grid with State Persistence', parentName: 'Pivot Grid' },
10-
'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' }
10+
'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' },
11+
'pivot-grid-layout': { displayName: 'Pivot Grid Layout', parentName: 'Pivot Grid' }
1112
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { PivotGridNoopSampleComponent } from './pivot-grid-noop/pivot-grid-noop-
1010
import { pivotGridsRoutesData } from './pivot-grid-routes-data';
1111
import { PivotGridAboutComponent } from './pivot-state-persistence/about.component';
1212
import { PivotGridStatePersistenceSampleComponent } from './pivot-state-persistence/pivot-grid-state-persistence-sample.component';
13+
import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component'
1314
// tslint:enable:max-line-length
1415

1516
export const gridsRoutes: Routes = [
@@ -52,6 +53,11 @@ export const gridsRoutes: Routes = [
5253
component: PivotGridAboutComponent,
5354
data: pivotGridsRoutesData['pivot-grid-about'],
5455
path: 'pivot-state-about'
56+
},
57+
{
58+
component: PivotGridLayoutComponent,
59+
data: pivotGridsRoutesData['pivot-grid-features'],
60+
path: 'pivot-grid-layout'
5561
}
5662
];
5763

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { PivotGridsRoutingModule } from './pivot-grids-routing.module';
1414
import { PivotGridStatePersistenceSampleComponent } from './pivot-state-persistence/pivot-grid-state-persistence-sample.component';
1515
import { PivotGridAboutComponent } from './pivot-state-persistence/about.component';
1616
import { PivotGridNoopPersistenceSampleComponent } from './pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component';
17+
import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component';
1718

1819
@NgModule({ declarations: [
1920
PivotGridBasicSampleComponent,
@@ -23,7 +24,8 @@ import { PivotGridNoopPersistenceSampleComponent } from './pivot-grid-noop-persi
2324
PivotGridStatePersistenceSampleComponent,
2425
PivotGridNoopSampleComponent,
2526
PivotGridAboutComponent,
26-
PivotGridNoopPersistenceSampleComponent
27+
PivotGridNoopPersistenceSampleComponent,
28+
PivotGridLayoutComponent
2729
], imports: [CommonModule,
2830
FormsModule,
2931
PivotGridsRoutingModule,

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="pivot-container">
2+
<igx-pivot-grid #grid1 [data]="data" [height]="'850px'" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
3+
[superCompactMode]="true" [defaultExpandState]='true' [pivotUi]="pivotUi">
4+
</igx-pivot-grid>
5+
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
6+
</div>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
:host {
2+
padding: 8px;
3+
display: flex;
4+
flex-direction: column;
5+
6+
::ng-deep {
7+
.upFontValue {
8+
color: hsla(var(--ig-success-500));
9+
}
10+
11+
.downFontValue {
12+
color: hsla(var(--ig-error-500));
13+
}
14+
15+
igx-pivot-data-selector {
16+
border: 1px solid hsla(var(--igx-gray-200));
17+
margin: 0 8px;
18+
}
19+
}
20+
21+
}
22+
23+
igx-pivot-grid {
24+
flex: 1;
25+
}
26+
27+
igx-pivot-data-selector {
28+
--ig-size: var(--ig-size-small);
29+
}
30+
31+
.pivot-container {
32+
display: flex;
33+
align-items: flex-start;
34+
flex: 1 1 auto;
35+
order: 0;
36+
}

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { Component } from "@angular/core";
2+
3+
import {
4+
IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate,
5+
IgxPivotDateDimension, FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand,
6+
PivotRowLayoutType,
7+
IPivotUISettings
8+
} from "igniteui-angular"
9+
import { SALES_DATA } from "../../data/dataToAnalyze";
10+
11+
export class IgxTotalSaleAggregate {
12+
public static totalSale: PivotAggregation = (members, data: any) =>
13+
data.reduce((accumulator, value) => accumulator + value.Product.UnitPrice * value.NumberOfUnits, 0);
14+
15+
public static totalMin: PivotAggregation = (members, data: any) => {
16+
let min = 0;
17+
if (data.length === 1) {
18+
min = data[0].Product.UnitPrice * data[0].NumberOfUnits;
19+
} else if (data.length > 1) {
20+
const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
21+
min = mappedData.reduce((a, b) => Math.min(a, b));
22+
}
23+
return min;
24+
};
25+
26+
public static totalMax: PivotAggregation = (members, data: any) => {
27+
let max = 0;
28+
if (data.length === 1) {
29+
max = data[0].Product.UnitPrice * data[0].NumberOfUnits;
30+
} else if (data.length > 1) {
31+
const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
32+
max = mappedData.reduce((a, b) => Math.max(a, b));
33+
}
34+
return max;
35+
};
36+
}
37+
38+
@Component({
39+
selector: 'app-pivot-layout-sample',
40+
styleUrls: ['./pivot-layout.component.scss'],
41+
templateUrl: './pivot-layout.component.html'
42+
})
43+
export class PivotGridLayoutComponent {
44+
public data = SALES_DATA;
45+
public pivotUI: IPivotUISettings = { showRowHeaders: true, rowLayout: PivotRowLayoutType.Horizontal };
46+
47+
public pivotConfig: IPivotConfiguration = {
48+
columns: [
49+
new IgxPivotDateDimension(
50+
{
51+
memberName: 'Date',
52+
enabled: true
53+
},
54+
{
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+
width: "150px",
67+
childLevel: {
68+
memberFunction: (data) => data.Product.Name,
69+
memberName: 'ProductCategory',
70+
enabled: true
71+
}
72+
},
73+
{
74+
memberName: 'City',
75+
width: "150px",
76+
memberFunction: (data) => data.Seller.City,
77+
enabled: true
78+
}
79+
],
80+
values: [
81+
{
82+
member: 'Value',
83+
aggregate: {
84+
key: 'SUM',
85+
aggregator: IgxPivotNumericAggregate.sum,
86+
label: 'Sum'
87+
},
88+
aggregateList: [{
89+
key: 'SUM',
90+
aggregator: IgxPivotNumericAggregate.sum,
91+
label: 'Sum'
92+
}],
93+
enabled: true,
94+
styles: {
95+
downFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150,
96+
upFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
97+
},
98+
formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
99+
},
100+
{
101+
member: 'AmountofSale',
102+
displayName: 'Amount of Sale',
103+
aggregate: {
104+
key: 'SUM',
105+
aggregator: IgxTotalSaleAggregate.totalSale,
106+
label: 'Sum of Sale'
107+
},
108+
aggregateList: [{
109+
key: 'SUM',
110+
aggregator: IgxTotalSaleAggregate.totalSale,
111+
label: 'Sum of Sale'
112+
}, {
113+
key: 'MIN',
114+
aggregator: IgxTotalSaleAggregate.totalMin,
115+
label: 'Minimum of Sale'
116+
}, {
117+
key: 'MAX',
118+
aggregator: IgxTotalSaleAggregate.totalMax,
119+
label: 'Maximum of Sale'
120+
}],
121+
enabled: true,
122+
dataType: 'currency'
123+
}
124+
],
125+
filters: [
126+
{
127+
memberName: 'SellerName',
128+
memberFunction: (data) => data.Seller.Name,
129+
enabled: true
130+
}
131+
]
132+
};
133+
}

0 commit comments

Comments
 (0)