11import {
2- AfterViewInit ,
32 Component ,
4- EventEmitter ,
5- OnDestroy ,
6- OnInit ,
7- Output ,
3+ Input ,
84 ViewChild } from '@angular/core' ;
95import {
106 DefaultSortingStrategy ,
11- GridSelectionMode ,
127 IgxGridComponent ,
138 SortingDirection
149} from 'igniteui-angular' ;
1510import { Contract , REGIONS } from '../shared/financialData' ;
16- import { LocalService } from '../shared/local.service' ;
11+
12+ const GROUPING_EXPRESSIONS = [ {
13+ dir : SortingDirection . Desc ,
14+ fieldName : 'Category' ,
15+ ignoreCase : false ,
16+ strategy : DefaultSortingStrategy . instance ( )
17+ } ,
18+ {
19+ dir : SortingDirection . Desc ,
20+ fieldName : 'Type' ,
21+ ignoreCase : false ,
22+ strategy : DefaultSortingStrategy . instance ( )
23+ } ,
24+ {
25+ dir : SortingDirection . Desc ,
26+ fieldName : 'Contract' ,
27+ ignoreCase : false ,
28+ strategy : DefaultSortingStrategy . instance ( )
29+ }
30+ ] ;
1731
1832@Component ( {
1933 selector : 'app-finjs-grid' ,
2034 styleUrls : [ './grid-finjs.component.scss' ] ,
2135 templateUrl : './grid-finjs.component.html'
2236} )
23- export class GridFinJSComponent implements OnInit , AfterViewInit , OnDestroy {
37+ export class GridFinJSComponent {
2438 @ViewChild ( 'grid1' , { static : true } ) public grid : IgxGridComponent ;
2539
26- @Output ( ) public selectedDataChanged = new EventEmitter < any > ( ) ;
27- @Output ( ) public keyDown = new EventEmitter < any > ( ) ;
28- @Output ( ) public chartColumnKeyDown = new EventEmitter < any > ( ) ;
40+ @Input ( )
41+ public data : any ;
2942
30- public data = [ ] ;
31- public multiCellSelection : { data : any [ ] } = { data : [ ] } ;
32- public selectionMode : GridSelectionMode = 'multiple' ;
43+ public selectionMode = 'multiple' ;
3344 public contracts = Contract ;
3445 public regions = REGIONS ;
46+ public columnFormat = { digitsInfo : '1.3-3' } ;
3547 public showToolbar = true ;
36- public volume = 1000 ;
37- public frequency = 500 ;
38- private subscription$ ;
39-
40- constructor ( public finService : LocalService ) {
41- this . finService . getFinancialData ( this . volume ) ;
42- this . subscription$ = this . finService . records . subscribe ( x => {
43- this . data = x ;
44- } ) ;
45- }
48+ public groupingExpressions = GROUPING_EXPRESSIONS ;
4649
47- public ngOnInit ( ) {
48- this . grid . groupingExpressions = [ {
49- dir : SortingDirection . Desc ,
50- fieldName : 'Category' ,
51- ignoreCase : false ,
52- strategy : DefaultSortingStrategy . instance ( )
53- } ,
54- {
55- dir : SortingDirection . Desc ,
56- fieldName : 'Type' ,
57- ignoreCase : false ,
58- strategy : DefaultSortingStrategy . instance ( )
59- } ,
60- {
61- dir : SortingDirection . Desc ,
62- fieldName : 'Settlement' ,
63- ignoreCase : false ,
64- strategy : DefaultSortingStrategy . instance ( )
65- }
66- ] ;
67- }
50+ constructor ( ) { }
6851
69- public ngAfterViewInit ( ) {
70- this . grid . hideGroupedColumns = true ;
71- this . grid . reflow ( ) ;
72- }
73-
74- public ngOnDestroy ( ) {
75- if ( this . subscription$ ) {
76- this . subscription$ . unsubscribe ( ) ;
77- }
78- }
79-
80- /** Event Handlers */
81-
82- public onChange ( ) {
83- if ( this . grid . groupingExpressions . length > 0 ) {
84- this . grid . groupingExpressions = [ ] ;
85- } else {
86- this . grid . groupingExpressions = [ {
87- dir : SortingDirection . Desc ,
88- fieldName : 'Category' ,
89- ignoreCase : false ,
90- strategy : DefaultSortingStrategy . instance ( )
91- } ,
92- {
93- dir : SortingDirection . Desc ,
94- fieldName : 'Type' ,
95- ignoreCase : false ,
96- strategy : DefaultSortingStrategy . instance ( )
97- } ,
98- {
99- dir : SortingDirection . Desc ,
100- fieldName : 'Contract' ,
101- ignoreCase : false ,
102- strategy : DefaultSortingStrategy . instance ( )
103- }
104- ] ;
105- }
106- }
107-
108- public toggleGrouping ( ) {
109- if ( this . grid . groupingExpressions . length > 0 ) {
110- this . grid . groupingExpressions = [ ] ;
111- } else {
112- this . grid . groupingExpressions = [ {
113- dir : SortingDirection . Desc ,
114- fieldName : 'Category' ,
115- ignoreCase : false ,
116- strategy : DefaultSortingStrategy . instance ( )
117- } ,
118- {
119- dir : SortingDirection . Desc ,
120- fieldName : 'Type' ,
121- ignoreCase : false ,
122- strategy : DefaultSortingStrategy . instance ( )
123- } ,
124- {
125- dir : SortingDirection . Desc ,
126- fieldName : 'Contract' ,
127- ignoreCase : false ,
128- strategy : DefaultSortingStrategy . instance ( )
129- }
130- ] ;
131- }
132- }
133-
134- /** Grid Formatters */
135- public formatNumber ( value : number ) {
136- return value . toFixed ( 2 ) ;
137- }
138-
139- public percentage ( value : number ) {
140- return value . toFixed ( 2 ) + '%' ;
141- }
142-
143- public formatCurrency ( value : number ) {
144- return '$' + value . toFixed ( 3 ) ;
52+ public toggleGrouping ( newValue : boolean ) {
53+ this . groupingExpressions = newValue ? GROUPING_EXPRESSIONS : [ ] ;
14554 }
14655
14756 /** Grid CellStyles and CellClasses */
@@ -152,7 +61,7 @@ export class GridFinJSComponent implements OnInit, AfterViewInit, OnDestroy {
15261 private strongPositive = ( rowData : any ) : boolean => rowData [ 'Change(%)' ] >= 1 ;
15362 private strongNegative = ( rowData : any ) : boolean => rowData [ 'Change(%)' ] <= - 1 ;
15463
155- /* eslint-disable @typescript-eslint/member-ordering */
64+ // eslint-disable-next-line @typescript-eslint/member-ordering
15665 public trends = {
15766 changeNeg : this . changeNegative ,
15867 changePos : this . changePositive ,
@@ -161,16 +70,11 @@ export class GridFinJSComponent implements OnInit, AfterViewInit, OnDestroy {
16170 strongNegative : this . strongNegative ,
16271 strongPositive : this . strongPositive
16372 } ;
164-
73+ // eslint-disable-next-line @typescript-eslint/member-ordering
16574 public trendsChange = {
16675 changeNeg2 : this . changeNegative ,
16776 changePos2 : this . changePositive ,
16877 strongNegative2 : this . strongNegative ,
16978 strongPositive2 : this . strongPositive
17079 } ;
171- /* eslint-enable @typescript-eslint/member-ordering */
172-
173- public get grouped ( ) : boolean {
174- return this . grid . groupingExpressions . length > 0 ;
175- }
17680}
0 commit comments